diff --git a/packages/ui/client/auto-imports.d.ts b/packages/ui/client/auto-imports.d.ts
index 021bd219e..988fe2d8d 100644
--- a/packages/ui/client/auto-imports.d.ts
+++ b/packages/ui/client/auto-imports.d.ts
@@ -12,6 +12,7 @@ declare global {
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const calcExternalLabels: typeof import('./composables/module-graph')['calcExternalLabels']
   const codemirrorRef: typeof import('./composables/codemirror')['codemirrorRef']
+  const columnNumber: typeof import('./composables/params')['columnNumber']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
@@ -49,6 +50,7 @@ declare global {
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getAttachmentUrl: typeof import('./composables/attachments')['getAttachmentUrl']
   const getCurrentBrowserIframe: typeof import('./composables/api')['getCurrentBrowserIframe']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
@@ -61,13 +63,16 @@ declare global {
   const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDark: typeof import('./composables/dark')['isDark']
   const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isExternalAttachment: typeof import('./composables/attachments')['isExternalAttachment']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const isTestFile: typeof import('./composables/error')['isTestFile']
   const lineNumber: typeof import('./composables/params')['lineNumber']
   const mainSizes: typeof import('./composables/navigation')['mainSizes']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const mapLeveledTaskStacks: typeof import('./composables/error')['mapLeveledTaskStacks']
   const markRaw: typeof import('vue')['markRaw']
   const navigateTo: typeof import('./composables/navigation')['navigateTo']
   const nextTick: typeof import('vue')['nextTick']
@@ -94,6 +99,7 @@ declare global {
   const onUpdated: typeof import('vue')['onUpdated']
   const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const openInEditor: typeof import('./composables/error')['openInEditor']
+  const openScreenshot: typeof import('./composables/screenshot')['openScreenshot']
   const openedTreeItems: typeof import('./composables/navigation')['openedTreeItems']
   const panels: typeof import('./composables/navigation')['panels']
   const params: typeof import('./composables/params')['params']
@@ -120,19 +126,23 @@ declare global {
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const sanitizeFilePath: typeof import('./composables/attachments')['sanitizeFilePath']
   const selectedTest: typeof import('./composables/params')['selectedTest']
   const setIframeViewport: typeof import('./composables/api')['setIframeViewport']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const shouldOpenInEditor: typeof import('./composables/error')['shouldOpenInEditor']
+  const showAnnotationSource: typeof import('./composables/codemirror')['showAnnotationSource']
   const showCoverage: typeof import('./composables/navigation')['showCoverage']
   const showDashboard: typeof import('./composables/navigation')['showDashboard']
   const showLine: typeof import('./composables/codemirror')['showLine']
+  const showLocationSource: typeof import('./composables/codemirror')['showLocationSource']
   const showNavigationPanel: typeof import('./composables/navigation')['showNavigationPanel']
   const showReport: typeof import('./composables/navigation')['showReport']
   const showRightPanel: typeof import('./composables/navigation')['showRightPanel']
   const showSource: typeof import('./composables/codemirror')['showSource']
+  const showTaskSource: typeof import('./composables/codemirror')['showTaskSource']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
@@ -279,6 +289,7 @@ declare global {
   const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScreenshot: typeof import('./composables/screenshot')['useScreenshot']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
diff --git a/packages/ui/client/components.d.ts b/packages/ui/client/components.d.ts
index 0a7fe8fa8..8bd55fe18 100644
--- a/packages/ui/client/components.d.ts
+++ b/packages/ui/client/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AnnotationAttachmentImage: typeof import('./components/AnnotationAttachmentImage.vue')['default']
     BrowserIframe: typeof import('./components/BrowserIframe.vue')['default']
     CodeMirrorContainer: typeof import('./components/CodeMirrorContainer.vue')['default']
     ConnectionOverlay: typeof import('./components/ConnectionOverlay.vue')['default']
@@ -38,5 +39,6 @@ declare module 'vue' {
     ViewModuleGraph: typeof import('./components/views/ViewModuleGraph.vue')['default']
     ViewReport: typeof import('./components/views/ViewReport.vue')['default']
     ViewReportError: typeof import('./components/views/ViewReportError.vue')['default']
+    ViewTestReport: typeof import('./components/views/ViewTestReport.vue')['default']
   }
 }
diff --git a/packages/ui/client/components/AnnotationAttachmentImage.vue b/packages/ui/client/components/AnnotationAttachmentImage.vue
new file mode 100644
index 000000000..6196bf21c
--- /dev/null
+++ b/packages/ui/client/components/AnnotationAttachmentImage.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TestAnnotation } from 'vitest'
+import { getAttachmentUrl, isExternalAttachment } from '~/composables/attachments'
+
+const props = defineProps<{
+  annotation: TestAnnotation
+}>()
+
+const href = computed<string>(() => {
+  const attachment = props.annotation.attachment!
+  const potentialUrl = attachment.path || attachment.body
+  if (typeof potentialUrl === 'string' && (potentialUrl.startsWith('http://') || potentialUrl.startsWith('https://'))) {
+    return potentialUrl
+  }
+  else {
+    return getAttachmentUrl(attachment)
+  }
+})
+</script>
+
+<template>
+  <a
+    v-if="annotation.attachment && annotation.attachment.contentType?.startsWith('image/')"
+    target="_blank"
+    class="inline-block mt-2"
+    :style="{ maxWidth: '600px' }"
+    :href="href"
+    :referrerPolicy="isExternalAttachment(annotation.attachment) ? 'no-referrer' : undefined"
+  >
+    <img
+      :src="href"
+    >
+  </a>
+</template>
diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index db1f236ad..74fb43d83 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { RunnerTask, RunnerTestCase } from 'vitest'
 import type { ModuleGraph } from '~/composables/module-graph'
 import type { Params } from '~/composables/params'
 import { toJSON } from 'flatted'
@@ -9,10 +10,11 @@ import {
   currentLogs,
   isReport,
 } from '~/composables/client'
+import { explorerTree } from '~/composables/explorer'
 import { hasFailedSnapshot } from '~/composables/explorer/collector'
 import { getModuleGraph } from '~/composables/module-graph'
 import { viewMode } from '~/composables/params'
-import { getProjectNameColor } from '~/utils/task'
+import { getProjectNameColor, getProjectTextColor } from '~/utils/task'
 
 const graph = ref<ModuleGraph>({ nodes: [], links: [] })
 const draft = ref(false)
@@ -21,6 +23,12 @@ const loadingModuleGraph = ref(false)
 const currentFilepath = ref<string | undefined>(undefined)
 const hideNodeModules = ref(true)
 
+const test = computed(() => {
+  return selectedTest.value
+    ? client.state.idMap.get(selectedTest.value) as RunnerTestCase
+    : undefined
+})
+
 const graphData = computed(() => {
   const c = current.value
   if (!c || !c.filepath) {
@@ -137,18 +145,26 @@ debouncedWatch(
 )
 
 const projectNameColor = computed(() => {
-  return getProjectNameColor(current.value?.file.projectName)
+  const projectName = current.value?.file.projectName || ''
+  return explorerTree.colors.get(projectName) || getProjectNameColor(current.value?.file.projectName)
 })
 
-const projectNameTextColor = computed(() => {
-  switch (projectNameColor.value) {
-    case 'blue':
-    case 'green':
-    case 'magenta':
-      return 'white'
-    default:
-      return 'black'
+const projectNameTextColor = computed(() => getProjectTextColor(projectNameColor.value))
+
+const testTitle = computed(() => {
+  const testId = selectedTest.value
+  if (!testId) {
+    return current.value?.name
+  }
+  const names: string[] = []
+  let node: RunnerTask | undefined = client.state.idMap.get(testId)
+  while (node) {
+    names.push(node.name)
+    node = node.suite
+      ? node.suite
+      : (node === node.file ? undefined : node.file)
   }
+  return names.reverse().join(' > ')
 })
 </script>
 
@@ -174,7 +190,7 @@ const projectNameTextColor = computed(() => {
           {{ current.file.projectName }}
         </span>
         <div flex-1 font-light op-50 ws-nowrap truncate text-sm>
-          {{ current?.name }}
+          {{ testTitle }}
         </div>
         <div class="flex text-lg">
           <IconButton
@@ -263,7 +279,8 @@ const projectNameTextColor = computed(() => {
         :file="current"
         data-testid="console"
       />
-      <ViewReport v-else-if="!viewMode" :file="current" data-testid="report" />
+      <ViewReport v-else-if="!viewMode && !test && current" :file="current" data-testid="report" />
+      <ViewTestReport v-else-if="!viewMode && test" :test="test" data-testid="report" />
     </div>
   </div>
 </template>
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index d813df041..06b61fd99 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -4,11 +4,12 @@ import type { TaskTreeNodeType } from '~/composables/explorer/types'
 import { Tooltip as VueTooltip } from 'floating-vue'
 import { nextTick } from 'vue'
 import { client, isReport, runFiles, runTask } from '~/composables/client'
-import { showSource } from '~/composables/codemirror'
+import { showTaskSource } from '~/composables/codemirror'
 import { explorerTree } from '~/composables/explorer'
 import { hasFailedSnapshot } from '~/composables/explorer/collector'
 import { escapeHtml, highlightRegex } from '~/composables/explorer/state'
 import { coverageEnabled } from '~/composables/navigation'
+import { getProjectTextColor } from '~/utils/task'
 
 // TODO: better handling of "opened" - it means to forcefully open the tree item and set in TasksList right now
 const {
@@ -149,26 +150,11 @@ function showDetails() {
     onItemClick?.(t)
   }
   else {
-    showSource(t)
+    showTaskSource(t)
   }
 }
 
-const projectNameTextColor = computed(() => {
-  switch (projectNameColor) {
-    case 'blue':
-    case 'green':
-    case 'magenta':
-    case 'black':
-    case 'red':
-      return 'white'
-
-    case 'yellow':
-    case 'cyan':
-    case 'white':
-    default:
-      return 'black'
-  }
-})
+const projectNameTextColor = computed(() => getProjectTextColor(projectNameColor))
 </script>
 
 <template>
@@ -223,7 +209,7 @@ const projectNameTextColor = computed(() => {
       >
         <IconButton
           data-testid="btn-open-details"
-          icon="i-carbon:intrusion-prevention"
+          :icon="type === 'file' ? 'i-carbon:intrusion-prevention' : 'i-carbon:code-reference'"
           @click.prevent.stop="showDetails"
         />
         <template #popper>
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index 5016234a1..d591f8919 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import type { Task, TestAttachment } from '@vitest/runner'
+import type { Task } from '@vitest/runner'
 import type CodeMirror from 'codemirror'
 import type { ErrorWithDiff, File, TestAnnotation, TestError } from 'vitest'
 import { createTooltip, destroyTooltip } from 'floating-vue'
+import { getAttachmentUrl, sanitizeFilePath } from '~/composables/attachments'
 import { client, isReport } from '~/composables/client'
 import { finished } from '~/composables/client/state'
 import { codemirrorRef } from '~/composables/codemirror'
 import { openInEditor } from '~/composables/error'
-import { lineNumber } from '~/composables/params'
+import { columnNumber, lineNumber } from '~/composables/params'
 
 const props = defineProps<{
   file?: File
@@ -56,12 +57,12 @@ watch(
   { immediate: true },
 )
 
-watch(() => [loading.value, saving.value, props.file, lineNumber.value] as const, ([loadingFile, s, _, l]) => {
+watch(() => [loading.value, saving.value, props.file, lineNumber.value, columnNumber.value] as const, ([loadingFile, s, _, l, c]) => {
   if (!loadingFile && !s) {
     if (l != null) {
       nextTick(() => {
         const cp = currentPosition.value
-        const line = cp ?? { line: l ?? 0, ch: 0 }
+        const line = cp ?? { line: (l ?? 1) - 1, ch: c ?? 0 }
         // restore caret position: the watchDebounced below will use old value
         if (cp) {
           currentPosition.value = undefined
@@ -155,7 +156,7 @@ function createErrorElement(e: ErrorWithDiff) {
   div.className = 'op80 flex gap-x-2 items-center'
   const pre = document.createElement('pre')
   pre.className = 'c-red-600 dark:c-red-400'
-  pre.textContent = `${' '.repeat(stack.column)}^ ${e?.nameStr || e.name}: ${
+  pre.textContent = `${' '.repeat(stack.column)}^ ${e.name}: ${
     e?.message || ''
   }`
   div.appendChild(pre)
@@ -184,7 +185,6 @@ function createErrorElement(e: ErrorWithDiff) {
 
 function createAnnotationElement(annotation: TestAnnotation) {
   if (!annotation.location) {
-    // TODO(v4): print unknown annotations somewhere
     return
   }
 
@@ -222,9 +222,8 @@ function createAnnotationElement(annotation: TestAnnotation) {
     if (attachment.contentType?.startsWith('image/')) {
       const link = document.createElement('a')
       const img = document.createElement('img')
-      img.classList.add('mt-3', 'inline-block')
-      img.width = 600
-      img.width = 400
+      link.classList.add('inline-block', 'mt-3')
+      link.style.maxWidth = '50vw'
       const potentialUrl = attachment.path || attachment.body
       if (typeof potentialUrl === 'string' && (potentialUrl.startsWith('http://') || potentialUrl.startsWith('https://'))) {
         img.setAttribute('src', potentialUrl)
@@ -241,7 +240,7 @@ function createAnnotationElement(annotation: TestAnnotation) {
     else {
       const download = document.createElement('a')
       download.href = getAttachmentUrl(attachment)
-      download.download = sanitizeFilePath(annotation.message)
+      download.download = sanitizeFilePath(annotation.message, attachment.contentType)
       download.classList.add('flex', 'w-min', 'gap-2', 'items-center', 'font-sans', 'underline', 'cursor-pointer')
       const icon = document.createElement('div')
       icon.classList.add('i-carbon:download', 'block')
@@ -254,19 +253,6 @@ function createAnnotationElement(annotation: TestAnnotation) {
   widgets.push(codemirrorRef.value!.addLineWidget(line - 1, notice))
 }
 
-function getAttachmentUrl(attachment: TestAttachment) {
-  // html reporter always saves files into /data/ folder
-  if (isReport) {
-    return `/data/${attachment.path}`
-  }
-  const contentType = attachment.contentType ?? 'application/octet-stream'
-  if (attachment.path) {
-    return `/__vitest_attachment__?path=${encodeURIComponent(attachment.path)}&contentType=${contentType}&token=${(window as any).VITEST_API_TOKEN}`
-  }
-  // attachment.body is always a string outside of the test frame
-  return `data:${contentType};base64,${attachment.body}`
-}
-
 const { pause, resume } = watch(
   [codemirrorRef, errors, annotations, finished] as const,
   ([cmValue, errors, annotations, end]) => {
@@ -389,11 +375,6 @@ async function onSave(content: string) {
 
 // we need to remove listeners before unmounting the component: the watcher will not be called
 onBeforeUnmount(clearListeners)
-
-function sanitizeFilePath(s: string): string {
-  // eslint-disable-next-line no-control-regex
-  return s.replace(/[\x00-\x2C\x2E\x2F\x3A-\x40\x5B-\x60\x7B-\x7F]+/g, '-')
-}
 </script>
 
 <template>
diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index 894a3914c..c40340c38 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -1,21 +1,19 @@
 <script setup lang="ts">
-import type Convert from 'ansi-to-html'
-import type { ErrorWithDiff, File, Suite, Task } from 'vitest'
+import type { RunnerTask, RunnerTestFile, RunnerTestSuite } from 'vitest'
 import { browserState, config } from '~/composables/client'
 import { isDark } from '~/composables/dark'
-import { createAnsiToHtmlFilter } from '~/composables/error'
-import { selectedTest } from '~/composables/params'
-import { escapeHtml } from '~/utils/escape'
+import { mapLeveledTaskStacks } from '~/composables/error'
+import { openScreenshot, useScreenshot } from '~/composables/screenshot'
 
 const props = defineProps<{
-  file?: File
+  file: RunnerTestFile
 }>()
 
-type LeveledTask = Task & {
+type LeveledTask = RunnerTask & {
   level: number
 }
 
-function collectFailed(task: Task, level: number): LeveledTask[] {
+function collectFailed(task: RunnerTask, level: number): LeveledTask[] {
   if (task.result?.state !== 'fail') {
     return []
   }
@@ -31,63 +29,15 @@ function collectFailed(task: Task, level: number): LeveledTask[] {
   }
 }
 
-function createHtmlError(filter: Convert, error: ErrorWithDiff) {
-  let htmlError = ''
-  if (error.message?.includes('\x1B')) {
-    htmlError = `<b>${error.name}</b>: ${filter.toHtml(
-      escapeHtml(error.message),
-    )}`
-  }
-
-  const startStrWithX1B = error.stack?.includes('\x1B')
-  if (startStrWithX1B) {
-    if (htmlError.length > 0) {
-      htmlError += filter.toHtml(
-        escapeHtml((error.stack) as string),
-      )
-    }
-    else {
-      htmlError = `<b>${error.name}</b>: ${
-        error.message
-      }${filter.toHtml(
-        escapeHtml((error.stack) as string),
-      )}`
-    }
-  }
-
-  if (htmlError.length > 0) {
-    return htmlError
-  }
-  return null
-}
-
-function mapLeveledTaskStacks(dark: boolean, tasks: LeveledTask[]) {
-  const filter = createAnsiToHtmlFilter(dark)
-  return tasks.map((t) => {
-    const result = t.result
-    if (!result) {
-      return t
-    }
-    const errors = result.errors
-      ?.map(error => createHtmlError(filter, error))
-      .filter(error => error != null)
-      .join('<br><br>')
-    if (errors?.length) {
-      result.htmlError = errors
-    }
-    return t
-  })
-}
-
 const failed = computed(() => {
   const file = props.file
-  const failedFlatMap = file?.tasks?.flatMap(t => collectFailed(t, 0)) ?? []
-  const result = file?.result
+  const failedFlatMap = file.tasks?.flatMap(t => collectFailed(t, 0)) ?? []
+  const result = file.result
   const fileError = result?.errors?.[0]
   // we must check also if the test cannot compile
   if (fileError) {
     // create a dummy one
-    const fileErrorTask: Suite & { level: number } = {
+    const fileErrorTask: RunnerTestSuite & { level: number } = {
       id: file!.id,
       file: file!,
       name: file!.name,
@@ -105,41 +55,12 @@ const failed = computed(() => {
     : failedFlatMap
 })
 
-function open(task: Task) {
-  const filePath = task.meta?.failScreenshotPath
-  if (filePath) {
-    fetch(`/__open-in-editor?file=${encodeURIComponent(filePath)}`)
-  }
-}
-
-const showScreenshot = ref(false)
-const timestamp = ref(Date.now())
-const currentTask = ref<Task | undefined>()
-const currentScreenshotUrl = computed(() => {
-  const id = currentTask.value?.id
-  // force refresh
-  const t = timestamp.value
-  // browser plugin using /, change this if base can be modified
-  return id ? `/__screenshot-error?id=${encodeURIComponent(id)}&t=${t}` : undefined
-})
-
-function showScreenshotModal(task: Task) {
-  currentTask.value = task
-  timestamp.value = Date.now()
-  showScreenshot.value = true
-}
-
-watch(() => [selectedTest.value] as const, ([test]) => {
-  if (test != null) {
-    // Have to wrap the selector in [id=''] since #{test} will produce an invalid selector because the test ID is a number
-    const testElement = document.querySelector(`[id='${test}'`)
-    if (testElement != null) {
-      nextTick(() => {
-        testElement.scrollIntoView()
-      })
-    }
-  }
-}, { flush: 'post' })
+const {
+  currentTask,
+  showScreenshot,
+  showScreenshotModal,
+  currentScreenshotUrl,
+} = useScreenshot()
 </script>
 
 <template>
@@ -154,7 +75,7 @@ watch(() => [selectedTest.value] as const, ([test]) => {
           rounded
           :style="{
             'margin-left': `${
-              task.result?.htmlError ? 0.5 : 2 * task.level + 0.5
+              task.result?.htmlError ? 0.5 : 2 * (task as LeveledTask).level + 0.5
             }rem`,
           }"
         >
@@ -173,7 +94,7 @@ watch(() => [selectedTest.value] as const, ([test]) => {
                 class="!op-100"
                 icon="i-carbon:image-reference"
                 title="Open screenshot error in editor"
-                @click="open(task)"
+                @click="openScreenshot(task)"
               />
             </template>
           </div>
@@ -189,8 +110,9 @@ watch(() => [selectedTest.value] as const, ([test]) => {
               v-for="(error, idx) of task.result.errors"
               :key="idx"
               :error="error"
-              :filename="file?.name"
+              :filename="file.name"
               :root="config.root"
+              :file-id="file.id"
             />
           </template>
         </div>
diff --git a/packages/ui/client/components/views/ViewReportError.vue b/packages/ui/client/components/views/ViewReportError.vue
index 317b3e8f0..32e42d601 100644
--- a/packages/ui/client/components/views/ViewReportError.vue
+++ b/packages/ui/client/components/views/ViewReportError.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import type { ErrorWithDiff } from 'vitest'
-import { openInEditor, shouldOpenInEditor } from '~/composables/error'
+import type { ErrorWithDiff, ParsedStack } from 'vitest'
+import { showLocationSource } from '~/composables/codemirror'
+import { isTestFile, openInEditor } from '~/composables/error'
 import { escapeHtml } from '~/utils/escape'
 
 const props = defineProps<{
+  fileId: string
   root: string
   filename?: string
   error: ErrorWithDiff
@@ -27,11 +29,18 @@ const diff = computed(() =>
     ? filter.value.toHtml(escapeHtml(props.error.diff))
     : undefined,
 )
+
+function showCode(stack: ParsedStack) {
+  if (isTestFile(stack.file, props.filename)) {
+    return showLocationSource(props.fileId, stack)
+  }
+  return openInEditor(stack.file, stack.line, stack.column)
+}
 </script>
 
 <template>
   <div class="scrolls scrolls-rounded task-error">
-    <pre><b>{{ error.name || error.nameStr }}</b>: {{ error.message }}</pre>
+    <pre><b>{{ error.name }}</b>: {{ error.message }}</pre>
     <div
       v-for="(stack, i) of error.stacks"
       :key="i"
@@ -41,12 +50,11 @@ const diff = computed(() =>
       <pre>
  - {{ relative(stack.file) }}:{{ stack.line }}:{{ stack.column }}</pre>
       <div
-        v-if="shouldOpenInEditor(stack.file, filename)"
         v-tooltip.bottom="'Open in Editor'"
         class="i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer min-w-1em min-h-1em"
         tabindex="0"
         aria-label="Open in Editor"
-        @click.passive="openInEditor(stack.file, stack.line, stack.column)"
+        @click.passive="showCode(stack)"
       />
     </div>
     <template v-if="isDiffShowable">
diff --git a/packages/ui/client/components/views/ViewTestReport.vue b/packages/ui/client/components/views/ViewTestReport.vue
new file mode 100644
index 000000000..6a1adb65b
--- /dev/null
+++ b/packages/ui/client/components/views/ViewTestReport.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import type { TestAnnotation, TestAnnotationLocation } from '@vitest/runner'
+import type { RunnerTestCase } from 'vitest'
+import { relative } from 'pathe'
+import { getAttachmentUrl, sanitizeFilePath } from '~/composables/attachments'
+import { browserState, config } from '~/composables/client'
+import { showAnnotationSource } from '~/composables/codemirror'
+import { isDark } from '~/composables/dark'
+import { mapLeveledTaskStacks } from '~/composables/error'
+import { openScreenshot, useScreenshot } from '~/composables/screenshot'
+
+const props = defineProps<{
+  test: RunnerTestCase
+}>()
+
+const failed = computed(() => {
+  if (!props.test.result || !props.test.result.errors?.length) {
+    return null
+  }
+  return mapLeveledTaskStacks(isDark.value, [props.test])[0] as RunnerTestCase | null
+})
+
+function openAnnotation(annotation: TestAnnotation) {
+  return showAnnotationSource(props.test, annotation)
+}
+
+const {
+  currentTask,
+  showScreenshot,
+  showScreenshotModal,
+  currentScreenshotUrl,
+} = useScreenshot()
+
+function getLocationString(location: TestAnnotationLocation) {
+  const path = relative(config.value.root, location.file)
+  return `${path}:${location.line}:${location.column}`
+}
+
+const kWellKnownMeta = new Set([
+  'benchmark',
+  'typecheck',
+  'failScreenshotPath',
+])
+const meta = computed(() => {
+  return Object.entries(props.test.meta).filter(([name]) => {
+    return !kWellKnownMeta.has(name)
+  })
+})
+</script>
+
+<template>
+  <div h-full class="scrolls">
+    <div v-if="failed">
+      <div
+        bg="red-500/10"
+        text="red-500 sm"
+        p="x3 y2"
+        m-2
+        rounded
+      >
+        <div flex="~ gap-2 items-center">
+          <template v-if="browserState && test.meta?.failScreenshotPath">
+            <IconButton
+              v-tooltip.bottom="'View screenshot error'"
+              class="!op-100"
+              icon="i-carbon:image"
+              title="View screenshot error"
+              @click="showScreenshotModal(test)"
+            />
+            <IconButton
+              v-tooltip.bottom="'Open screenshot error in editor'"
+              class="!op-100"
+              icon="i-carbon:image-reference"
+              title="Open screenshot error in editor"
+              @click="openScreenshot(test)"
+            />
+          </template>
+        </div>
+        <div
+          v-if="test.result?.htmlError"
+          class="scrolls scrolls-rounded task-error"
+          data-testid="task-error"
+        >
+          <pre v-html="test.result.htmlError" />
+        </div>
+        <template v-else-if="test.result?.errors">
+          <ViewReportError
+            v-for="(error, idx) of test.result.errors"
+            :key="idx"
+            :file-id="test.file.id"
+            :error="error"
+            :filename="test.file.name"
+            :root="config.root"
+          />
+        </template>
+      </div>
+    </div>
+    <template v-else>
+      <div bg="green-500/10" text="green-500 sm" p="x4 y2" m-2 rounded>
+        All tests passed in this file
+      </div>
+    </template>
+    <template v-if="test.annotations.length">
+      <h1 m-2>
+        Test Annotations
+      </h1>
+      <div
+        v-for="annotation of test.annotations"
+        :key="annotation.type + annotation.message"
+        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 class="flex gap-2" overflow-hidden>
+            <span class="font-bold" ws-nowrap truncate>{{ annotation.type }}</span>
+            <a
+              v-if="annotation.attachment && !annotation.attachment.contentType?.startsWith('image/')"
+              class="flex gap-1 items-center text-yellow-500/80 cursor-pointer"
+              :href="getAttachmentUrl(annotation.attachment)"
+              :download="sanitizeFilePath(annotation.message, annotation.attachment.contentType)"
+            >
+              <span class="i-carbon:download block" />
+              Download
+            </a>
+          </div>
+          <div>
+            <span
+              v-if="annotation.location && annotation.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="openAnnotation(annotation)"
+            >
+              {{ getLocationString(annotation.location) }}
+            </span>
+            <span
+              v-else-if="annotation.location && annotation.location.file !== test.file.filepath"
+              class="flex gap-1 text-yellow-500/80"
+              ws-nowrap
+            >
+              {{ getLocationString(annotation.location) }}
+            </span>
+          </div>
+        </div>
+
+        <div
+          class="scrolls scrolls-rounded task-error"
+          data-testid="task-error"
+        >
+          {{ annotation.message }}
+        </div>
+
+        <AnnotationAttachmentImage :annotation="annotation" />
+      </div>
+    </template>
+    <template v-if="meta.length">
+      <h1 m-2>
+        Test Meta
+      </h1>
+      <div
+        bg="gray/10"
+        text="black-100 sm"
+        p="x3 y2"
+        m-2
+        rounded
+        class="grid grid-cols-1 md:grid-cols-[200px_1fr] gap-2"
+        overflow-hidden
+      >
+        <template v-for="([name, content]) of meta" :key="name">
+          <div font-bold ws-nowrap truncate py-2>
+            {{ name }}
+          </div>
+          <pre overflow-auto bg="gray/30" rounded p-2>{{ content }}</pre>
+        </template>
+      </div>
+    </template>
+    <template v-if="browserState">
+      <Modal v-model="showScreenshot" direction="right">
+        <template v-if="currentTask">
+          <Suspense>
+            <ScreenshotError
+              :file="currentTask.file.filepath"
+              :name="currentTask.name"
+              :url="currentScreenshotUrl"
+              @close="showScreenshot = false"
+            />
+          </Suspense>
+        </template>
+      </Modal>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.task-error {
+  --cm-ttc-c-thumb: #ccc;
+}
+html.dark .task-error {
+  --cm-ttc-c-thumb: #444;
+}
+</style>
diff --git a/packages/ui/client/composables/attachments.ts b/packages/ui/client/composables/attachments.ts
new file mode 100644
index 000000000..af9cbf362
--- /dev/null
+++ b/packages/ui/client/composables/attachments.ts
@@ -0,0 +1,27 @@
+import type { TestAttachment } from '@vitest/runner'
+import mime from 'mime/lite'
+import { isReport } from '~/constants'
+
+export function getAttachmentUrl(attachment: TestAttachment): string {
+  // html reporter always saves files into /data/ folder
+  if (isReport) {
+    return `/data/${attachment.path}`
+  }
+  const contentType = attachment.contentType ?? 'application/octet-stream'
+  if (attachment.path) {
+    return `/__vitest_attachment__?path=${encodeURIComponent(attachment.path)}&contentType=${contentType}&token=${(window as any).VITEST_API_TOKEN}`
+  }
+  // attachment.body is always a string outside of the test frame
+  return `data:${contentType};base64,${attachment.body}`
+}
+
+export function sanitizeFilePath(s: string, contentType: string | undefined): string {
+  const extension = contentType ? mime.getExtension(contentType) : null
+  // eslint-disable-next-line no-control-regex
+  return s.replace(/[\x00-\x2C\x2E\x2F\x3A-\x40\x5B-\x60\x7B-\x7F]+/g, '-') + (extension ? `.${extension}` : '')
+}
+
+export function isExternalAttachment(attachment: TestAttachment): boolean {
+  const potentialUrl = attachment.path || attachment.body
+  return typeof potentialUrl === 'string' && (potentialUrl.startsWith('http://') || potentialUrl.startsWith('https://'))
+}
diff --git a/packages/ui/client/composables/codemirror.ts b/packages/ui/client/composables/codemirror.ts
index 2c3386e90..320655079 100644
--- a/packages/ui/client/composables/codemirror.ts
+++ b/packages/ui/client/composables/codemirror.ts
@@ -1,10 +1,11 @@
-import type { Task } from '@vitest/runner'
+import type { Task, TestAnnotation } from '@vitest/runner'
+import type { RunnerTestCase } from 'vitest'
 import type { Ref, WritableComputedRef } from 'vue'
 import CodeMirror from 'codemirror'
+
 import { watch } from 'vue'
 
 import { navigateTo } from '~/composables/navigation'
-
 import 'codemirror/mode/javascript/javascript'
 // import 'codemirror/mode/css/css'
 import 'codemirror/mode/xml/xml'
@@ -61,11 +62,39 @@ export function useCodeMirror(
   return markRaw(cm)
 }
 
-export async function showSource(task: Task) {
+export async function showTaskSource(task: Task) {
   navigateTo({
     file: task.file.id,
     line: task.location?.line ?? 0,
     view: 'editor',
     test: null,
+    column: null,
+  })
+}
+
+export function showLocationSource(fileId: string, location: { line: number; column: number }) {
+  navigateTo({
+    file: fileId,
+    column: location.column - 1,
+    line: location.line,
+    view: 'editor',
+    test: selectedTest.value,
+  })
+}
+
+export function showAnnotationSource(task: RunnerTestCase, annotation: TestAnnotation) {
+  if (!annotation.location) {
+    return
+  }
+  const { line, column, file } = annotation.location
+  if (task.file.filepath !== file) {
+    return openInEditor(file, line, column)
+  }
+  navigateTo({
+    file: task.file.id,
+    column: column - 1,
+    line,
+    view: 'editor',
+    test: selectedTest.value,
   })
 }
diff --git a/packages/ui/client/composables/error.ts b/packages/ui/client/composables/error.ts
index 7a0956378..e2db5b369 100644
--- a/packages/ui/client/composables/error.ts
+++ b/packages/ui/client/composables/error.ts
@@ -1,8 +1,16 @@
-import type { ErrorWithDiff } from 'vitest'
+import type Convert from 'ansi-to-html'
+import type { ErrorWithDiff, RunnerTask } from 'vitest'
 import { parseStacktrace } from '@vitest/utils/source-map'
 import Filter from 'ansi-to-html'
+import { escapeHtml } from '~/utils/escape'
 
-export function shouldOpenInEditor(name: string, fileName?: string) {
+declare module '@vitest/runner' {
+  interface TaskResult {
+    htmlError?: string
+  }
+}
+
+export function isTestFile(name: string, fileName?: string) {
   return fileName && name.endsWith(fileName)
 }
 
@@ -50,3 +58,51 @@ export function parseError(e: unknown) {
 
   return error
 }
+
+function createHtmlError(filter: Convert, error: ErrorWithDiff) {
+  let htmlError = ''
+  if (error.message?.includes('\x1B')) {
+    htmlError = `<b>${error.name}</b>: ${filter.toHtml(
+      escapeHtml(error.message),
+    )}`
+  }
+
+  const startStrWithX1B = error.stack?.includes('\x1B')
+  if (startStrWithX1B) {
+    if (htmlError.length > 0) {
+      htmlError += filter.toHtml(
+        escapeHtml((error.stack) as string),
+      )
+    }
+    else {
+      htmlError = `<b>${error.name}</b>: ${
+        error.message
+      }${filter.toHtml(
+        escapeHtml((error.stack) as string),
+      )}`
+    }
+  }
+
+  if (htmlError.length > 0) {
+    return htmlError
+  }
+  return null
+}
+
+export function mapLeveledTaskStacks(dark: boolean, tasks: RunnerTask[]) {
+  const filter = createAnsiToHtmlFilter(dark)
+  return tasks.map((t) => {
+    const result = t.result
+    if (!result || result.htmlError) {
+      return t
+    }
+    const errors = result.errors
+      ?.map(error => createHtmlError(filter, error))
+      .filter(error => error != null)
+      .join('<br><br>')
+    if (errors?.length) {
+      result.htmlError = errors
+    }
+    return t
+  })
+}
diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
index 5c18d0d26..33ac1a7c3 100644
--- a/packages/ui/client/composables/explorer/utils.ts
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -142,6 +142,7 @@ export function createOrUpdateNode(
         node.children.add(task.id)
       }
 
+      taskNode.name = task.name
       taskNode.mode = task.mode
       taskNode.duration = duration
       taskNode.state = task.result?.state
diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts
index c16bb6d03..b8c085976 100644
--- a/packages/ui/client/composables/navigation.ts
+++ b/packages/ui/client/composables/navigation.ts
@@ -3,7 +3,7 @@ import type { Params } from './params'
 import { viewport } from './browser'
 import { browserState, client, config, findById } from './client'
 import { testRunState } from './client/state'
-import { activeFileId, lineNumber, selectedTest, viewMode } from './params'
+import { activeFileId, columnNumber, lineNumber, selectedTest, viewMode } from './params'
 
 export const currentModule = ref<File>()
 export const dashboardVisible = ref(true)
@@ -101,9 +101,10 @@ export function showDashboard(show: boolean) {
   }
 }
 
-export function navigateTo({ file, line, view, test }: Params) {
+export function navigateTo({ file, line, view, test, column }: Params) {
   activeFileId.value = file
   lineNumber.value = line
+  columnNumber.value = column
   viewMode.value = view
   selectedTest.value = test
   currentModule.value = findById(file)
@@ -116,6 +117,7 @@ export function showReport(task: Task) {
     test: task.type === 'test' ? task.id : null,
     line: null,
     view: null,
+    column: null,
   })
 }
 
diff --git a/packages/ui/client/composables/params.ts b/packages/ui/client/composables/params.ts
index ceaecb9f9..de51daf42 100644
--- a/packages/ui/client/composables/params.ts
+++ b/packages/ui/client/composables/params.ts
@@ -3,6 +3,7 @@ export interface Params {
   view: null | 'graph' | 'editor' | 'console'
   line: null | number
   test: null | string
+  column: null | number
 }
 
 export const params = useUrlSearchParams<Params>('hash', {
@@ -11,10 +12,12 @@ export const params = useUrlSearchParams<Params>('hash', {
     view: null,
     line: null,
     test: null,
+    column: null,
   },
 })
 
 export const activeFileId = toRef(params, 'file')
 export const viewMode = toRef(params, 'view')
 export const lineNumber = toRef(params, 'line')
+export const columnNumber = toRef(params, 'column')
 export const selectedTest = toRef(params, 'test')
diff --git a/packages/ui/client/composables/screenshot.ts b/packages/ui/client/composables/screenshot.ts
new file mode 100644
index 000000000..c05c2ea57
--- /dev/null
+++ b/packages/ui/client/composables/screenshot.ts
@@ -0,0 +1,34 @@
+import type { RunnerTask } from 'vitest'
+
+export function openScreenshot(task: RunnerTask) {
+  const filePath = task.meta?.failScreenshotPath
+  if (filePath) {
+    fetch(`/__open-in-editor?file=${encodeURIComponent(filePath)}`)
+  }
+}
+
+export function useScreenshot() {
+  const showScreenshot = ref(false)
+  const timestamp = ref(Date.now())
+  const currentTask = ref<RunnerTask | undefined>()
+  const currentScreenshotUrl = computed(() => {
+    const id = currentTask.value?.id
+    // force refresh
+    const t = timestamp.value
+    // browser plugin using /, change this if base can be modified
+    return id ? `/__screenshot-error?id=${encodeURIComponent(id)}&t=${t}` : undefined
+  })
+
+  function showScreenshotModal(task: RunnerTask) {
+    currentTask.value = task
+    timestamp.value = Date.now()
+    showScreenshot.value = true
+  }
+
+  return {
+    currentTask,
+    showScreenshot,
+    currentScreenshotUrl,
+    showScreenshotModal,
+  }
+}
diff --git a/packages/ui/client/utils/task.ts b/packages/ui/client/utils/task.ts
index 23c128229..e3686df9a 100644
--- a/packages/ui/client/utils/task.ts
+++ b/packages/ui/client/utils/task.ts
@@ -28,3 +28,20 @@ export function getProjectNameColor(name: string | undefined) {
   const colors = ['yellow', 'cyan', 'green', 'magenta']
   return colors[index % colors.length]
 }
+
+export function getProjectTextColor(color: string) {
+  switch (color) {
+    case 'blue':
+    case 'green':
+    case 'magenta':
+    case 'black':
+    case 'red':
+      return 'white'
+
+    case 'yellow':
+    case 'cyan':
+    case 'white':
+    default:
+      return 'black'
+  }
+}
diff --git a/test/core/test/basic.test.ts b/test/core/test/basic.test.ts
index c4627d409..d69c8e258 100644
--- a/test/core/test/basic.test.ts
+++ b/test/core/test/basic.test.ts
@@ -41,11 +41,11 @@ test('assertion is callable', () => {
   expect(str).not.to.be.a('number')
 })
 
-const hi = suite('suite')
-
-hi.test('expect truthy', () => {
-  expect({}).toBeTruthy()
-  expect(null).not.toBeTruthy()
+suite('suite', () => {
+  test('expect truthy', () => {
+    expect({}).toBeTruthy()
+    expect(null).not.toBeTruthy()
+  })
 })
 
 // Remove .skip to test async fail by timeout
diff --git a/test/ui/fixtures/annotated.test.ts b/test/ui/fixtures/annotated.test.ts
index 446fa5fc2..f7bde4bc5 100644
--- a/test/ui/fixtures/annotated.test.ts
+++ b/test/ui/fixtures/annotated.test.ts
@@ -2,6 +2,7 @@ import { test } from 'vitest'
 
 test('annotated test', async ({ annotate }) => {
   await annotate('hello world')
+  await annotate('second annotation')
 })
 
 test('annotated typed test', async ({ annotate }) => {
diff --git a/test/ui/test/html-report.spec.ts b/test/ui/test/html-report.spec.ts
index 3a975fb46..f7c85e4ba 100644
--- a/test/ui/test/html-report.spec.ts
+++ b/test/ui/test/html-report.spec.ts
@@ -108,6 +108,69 @@ test.describe('html report', () => {
     await expect(page.getByTestId('diff')).toContainText('- Expected + Received + <style>* {border: 2px solid green};</style>')
   })
 
+  test('annotations in the report tab', async ({ page }) => {
+    await page.goto(pageUrl)
+
+    await test.step('annotated test', async () => {
+      const item = page.getByLabel('annotated test')
+      await item.click({ force: true })
+      await page.getByTestId('btn-report').click({ force: true })
+
+      const annotations = page.getByRole('note')
+      await expect(annotations).toHaveCount(2)
+
+      await expect(annotations.first()).toContainText('hello world')
+      await expect(annotations.first()).toContainText('notice')
+      await expect(annotations.first()).toContainText('fixtures/annotated.test.ts:4:9')
+
+      await expect(annotations.last()).toContainText('second annotation')
+      await expect(annotations.last()).toContainText('notice')
+      await expect(annotations.last()).toContainText('fixtures/annotated.test.ts:5:9')
+    })
+
+    await test.step('annotated typed test', async () => {
+      const item = page.getByLabel('annotated typed test')
+      await item.click({ force: true })
+      await page.getByTestId('btn-report').click({ force: true })
+
+      const annotation = page.getByRole('note')
+      await expect(annotation).toHaveCount(1)
+
+      await expect(annotation).toContainText('beware!')
+      await expect(annotation).toContainText('warning')
+      await expect(annotation).toContainText('fixtures/annotated.test.ts:9:9')
+    })
+
+    await test.step('annotated file test', async () => {
+      const item = page.getByLabel('annotated file test')
+      await item.click({ force: true })
+      await page.getByTestId('btn-report').click({ force: true })
+
+      const annotation = page.getByRole('note')
+      await expect(annotation).toHaveCount(1)
+
+      await expect(annotation).toContainText('file annotation')
+      await expect(annotation).toContainText('notice')
+      await expect(annotation).toContainText('fixtures/annotated.test.ts:13:9')
+      await expect(annotation.getByRole('link')).toHaveAttribute('href', /data\/\w+/)
+    })
+
+    await test.step('annotated image test', async () => {
+      const item = page.getByLabel('annotated image test')
+      await item.click({ force: true })
+      await page.getByTestId('btn-report').click({ force: true })
+
+      const annotation = page.getByRole('note')
+      await expect(annotation).toHaveCount(1)
+
+      await expect(annotation).toContainText('image annotation')
+      await expect(annotation).toContainText('notice')
+      await expect(annotation).toContainText('fixtures/annotated.test.ts:19:9')
+      await expect(annotation.getByRole('link')).toHaveAttribute('href', /data\/\w+/)
+      await expect(annotation.getByRole('img')).toHaveAttribute('src', /data\/\w+/)
+    })
+  })
+
   test('annotations', async ({ page }) => {
     await page.goto(pageUrl)
     const item = page.getByLabel('fixtures/annotated.test.ts')
@@ -116,14 +179,15 @@ test.describe('html report', () => {
     await page.getByTestId('btn-code').click({ force: true })
 
     const annotations = page.getByRole('note')
-    await expect(annotations).toHaveCount(4)
+    await expect(annotations).toHaveCount(5)
 
     await expect(annotations.first()).toHaveText('notice: hello world')
-    await expect(annotations.nth(1)).toHaveText('warning: beware!')
-    await expect(annotations.nth(2)).toHaveText(/notice: file annotation/)
-    await expect(annotations.nth(3)).toHaveText('notice: image annotation')
+    await expect(annotations.nth(1)).toHaveText('notice: second annotation')
+    await expect(annotations.nth(2)).toHaveText('warning: beware!')
+    await expect(annotations.nth(3)).toHaveText(/notice: file annotation/)
+    await expect(annotations.nth(4)).toHaveText('notice: image annotation')
 
     await expect(annotations.last().getByRole('link')).toHaveAttribute('href', /data\/\w+/)
-    await expect(annotations.nth(2).getByRole('link')).toHaveAttribute('href', /data\/\w+/)
+    await expect(annotations.nth(3).getByRole('link')).toHaveAttribute('href', /data\/\w+/)
   })
 })
diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index 82aceae6e..31f50bb98 100644
--- a/test/ui/test/ui.spec.ts
+++ b/test/ui/test/ui.spec.ts
@@ -114,7 +114,70 @@ test.describe('ui', () => {
     expect(await page.getByText('afterAll').all()).toHaveLength(6)
   })
 
-  test('annotations', async ({ page }) => {
+  test('annotations in the report tab', async ({ page }) => {
+    await page.goto(pageUrl)
+
+    await test.step('annotated test', async () => {
+      const item = page.getByLabel('annotated test')
+      await item.click({ force: true })
+      await page.getByTestId('btn-report').click({ force: true })
+
+      const annotations = page.getByRole('note')
+      await expect(annotations).toHaveCount(2)
+
+      await expect(annotations.first()).toContainText('hello world')
+      await expect(annotations.first()).toContainText('notice')
+      await expect(annotations.first()).toContainText('fixtures/annotated.test.ts:4:9')
+
+      await expect(annotations.last()).toContainText('second annotation')
+      await expect(annotations.last()).toContainText('notice')
+      await expect(annotations.last()).toContainText('fixtures/annotated.test.ts:5:9')
+    })
+
+    await test.step('annotated typed test', async () => {
+      const item = page.getByLabel('annotated typed test')
+      await item.click({ force: true })
+      await page.getByTestId('btn-report').click({ force: true })
+
+      const annotation = page.getByRole('note')
+      await expect(annotation).toHaveCount(1)
+
+      await expect(annotation).toContainText('beware!')
+      await expect(annotation).toContainText('warning')
+      await expect(annotation).toContainText('fixtures/annotated.test.ts:9:9')
+    })
+
+    await test.step('annotated file test', async () => {
+      const item = page.getByLabel('annotated file test')
+      await item.click({ force: true })
+      await page.getByTestId('btn-report').click({ force: true })
+
+      const annotation = page.getByRole('note')
+      await expect(annotation).toHaveCount(1)
+
+      await expect(annotation).toContainText('file annotation')
+      await expect(annotation).toContainText('notice')
+      await expect(annotation).toContainText('fixtures/annotated.test.ts:13:9')
+      await expect(annotation.getByRole('link')).toHaveAttribute('href', /__vitest_attachment__\?path=/)
+    })
+
+    await test.step('annotated image test', async () => {
+      const item = page.getByLabel('annotated image test')
+      await item.click({ force: true })
+      await page.getByTestId('btn-report').click({ force: true })
+
+      const annotation = page.getByRole('note')
+      await expect(annotation).toHaveCount(1)
+
+      await expect(annotation).toContainText('image annotation')
+      await expect(annotation).toContainText('notice')
+      await expect(annotation).toContainText('fixtures/annotated.test.ts:19:9')
+      await expect(annotation.getByRole('link')).toHaveAttribute('href', /__vitest_attachment__\?path=/)
+      await expect(annotation.getByRole('img')).toHaveAttribute('src', /__vitest_attachment__\?path=/)
+    })
+  })
+
+  test('annotations in the editor tab', async ({ page }) => {
     await page.goto(pageUrl)
     const item = page.getByLabel('fixtures/annotated.test.ts')
     await item.hover()
@@ -122,15 +185,16 @@ test.describe('ui', () => {
     await page.getByTestId('btn-code').click({ force: true })
 
     const annotations = page.getByRole('note')
-    await expect(annotations).toHaveCount(4)
+    await expect(annotations).toHaveCount(5)
 
     await expect(annotations.first()).toHaveText('notice: hello world')
-    await expect(annotations.nth(1)).toHaveText('warning: beware!')
-    await expect(annotations.nth(2)).toHaveText(/notice: file annotation/)
-    await expect(annotations.nth(3)).toHaveText('notice: image annotation')
+    await expect(annotations.nth(1)).toHaveText('notice: second annotation')
+    await expect(annotations.nth(2)).toHaveText('warning: beware!')
+    await expect(annotations.nth(3)).toHaveText(/notice: file annotation/)
+    await expect(annotations.nth(4)).toHaveText('notice: image annotation')
 
     await expect(annotations.last().getByRole('link')).toHaveAttribute('href', /__vitest_attachment__\?path=/)
-    await expect(annotations.nth(2).getByRole('link')).toHaveAttribute('href', /__vitest_attachment__\?path=/)
+    await expect(annotations.nth(3).getByRole('link')).toHaveAttribute('href', /__vitest_attachment__\?path=/)
   })
 
   test('error', async ({ page }) => {