From c095794e4cb36be2e0af050da6844f2c4770f0a6 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Fri, 21 Jun 2024 00:54:55 +0200
Subject: [PATCH 1/9] feat(ui): add action to explorer item to show the
 test/suite line in the source code tab

---
 docs/config/index.md                          |  2 +
 packages/ui/client/auto-imports.d.ts          |  4 +
 packages/ui/client/components/CodeMirror.vue  | 16 ++--
 packages/ui/client/components/Navigation.vue  | 15 +---
 .../client/components/explorer/Explorer.vue   |  6 +-
 .../components/explorer/ExplorerItem.vue      | 76 +++++++++++++++----
 .../ui/client/components/views/ViewEditor.vue | 11 +--
 packages/ui/client/composables/codemirror.ts  | 26 +++++++
 packages/ui/client/composables/navigation.ts  | 15 +++-
 packages/vitest/src/node/config.ts            | 10 +++
 10 files changed, 139 insertions(+), 42 deletions(-)

diff --git a/docs/config/index.md b/docs/config/index.md
index 94d4a34e7706..d5313286e781 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -2285,6 +2285,8 @@ The `location` property has `column` and `line` values that correspond to the `t
 
 ::: tip
 This option has no effect if you do not use custom code that relies on this.
+
+This option is enabled by default in [Vitest UI](/guide/ui).
 :::
 
 ### snapshotEnvironment {#snapshotEnvironment}
diff --git a/packages/ui/client/auto-imports.d.ts b/packages/ui/client/auto-imports.d.ts
index b9f6880e6219..2c1a81fc0b82 100644
--- a/packages/ui/client/auto-imports.d.ts
+++ b/packages/ui/client/auto-imports.d.ts
@@ -10,6 +10,7 @@ declare global {
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const calcExternalLabels: typeof import('./composables/module-graph')['calcExternalLabels']
+  const codemirrorRef: typeof import('./composables/codemirror')['codemirrorRef']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
@@ -63,6 +64,7 @@ declare global {
   const isRef: typeof import('vue')['isRef']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
+  const navigateTo: typeof import('./composables/navigation')['navigateTo']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
@@ -117,6 +119,8 @@ declare global {
   const shouldOpenInEditor: typeof import('./composables/error')['shouldOpenInEditor']
   const showCoverage: typeof import('./composables/navigation')['showCoverage']
   const showDashboard: typeof import('./composables/navigation')['showDashboard']
+  const showLine: typeof import('./composables/codemirror')['showLine']
+  const showSource: typeof import('./composables/codemirror')['showSource']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
diff --git a/packages/ui/client/components/CodeMirror.vue b/packages/ui/client/components/CodeMirror.vue
index d76a3227c159..83ee34dc4a83 100644
--- a/packages/ui/client/components/CodeMirror.vue
+++ b/packages/ui/client/components/CodeMirror.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type CodeMirror from 'codemirror'
+import { codemirrorRef } from '~/composables/codemirror'
 
 const { mode, readOnly } = defineProps<{
   mode?: string
@@ -30,12 +30,9 @@ const modeMap: Record<string, any> = {
 
 const el = ref<HTMLTextAreaElement>()
 
-const cm = shallowRef<CodeMirror.EditorFromTextArea>()
-
-defineExpose({ cm })
-
 onMounted(async () => {
-  cm.value = useCodeMirror(el, modelValue as unknown as Ref<string>, {
+  // useCodeMirror will remove the codemirrorRef.value on onUnmounted callback
+  const codemirror = useCodeMirror(el, modelValue as unknown as Ref<string>, {
     ...attrs,
     mode: modeMap[mode || ''] || mode,
     readOnly: readOnly ? true : undefined,
@@ -48,9 +45,10 @@ onMounted(async () => {
       },
     },
   })
-  cm.value.setSize('100%', '100%')
-  cm.value.clearHistory()
-  setTimeout(() => cm.value!.refresh(), 100)
+  codemirror.setSize('100%', '100%')
+  codemirror.clearHistory()
+  codemirrorRef.value = codemirror
+  setTimeout(() => codemirrorRef.value!.refresh(), 100)
 })
 </script>
 
diff --git a/packages/ui/client/components/Navigation.vue b/packages/ui/client/components/Navigation.vue
index 55f21c9a5580..73353d9a6a13 100644
--- a/packages/ui/client/components/Navigation.vue
+++ b/packages/ui/client/components/Navigation.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
 import { Tooltip as VueTooltip } from 'floating-vue'
-import type { File, Task } from 'vitest'
+import type { File } from 'vitest'
 import {
   coverageConfigured,
   coverageEnabled,
   coverageVisible,
-  currentModule,
   dashboardVisible,
   disableCoverage,
+  navigateTo,
   showCoverage,
   showDashboard,
 } from '~/composables/navigation'
-import { client, findById, isReport, runAll, runFiles } from '~/composables/client'
+import { client, isReport, runAll, runFiles } from '~/composables/client'
 import { isDark, toggleDark } from '~/composables'
-import { activeFileId } from '~/composables/params'
 import { explorerTree } from '~/composables/explorer'
 import { initialized, shouldShowExpandAll } from '~/composables/explorer/state'
 
@@ -23,12 +22,6 @@ function updateSnapshot() {
 
 const toggleMode = computed(() => isDark.value ? 'light' : 'dark')
 
-function onItemClick(task: Task) {
-  activeFileId.value = task.file.id
-  currentModule.value = findById(task.file.id)
-  showDashboard(false)
-}
-
 async function onRunAll(files?: File[]) {
   if (coverageEnabled.value) {
     disableCoverage.value = true
@@ -57,7 +50,7 @@ function expandTests() {
 
 <template>
   <!-- TODO: have test tree so the folders are also nested: test -> filename -> suite -> test -->
-  <Explorer border="r base" :on-item-click="onItemClick" :nested="true" @run="onRunAll">
+  <Explorer border="r base" :on-item-click="navigateTo" :nested="true" @run="onRunAll">
     <template #header="{ filteredFiles }">
       <img w-6 h-6 src="/favicon.svg" alt="Vitest logo">
       <span font-light text-sm flex-1>Vitest</span>
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 0514e6e8611e..55b66133df2f 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -9,6 +9,7 @@ import { activeFileId } from '~/composables/params'
 import { useSearch } from '~/composables/explorer/search'
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import { config } from '~/composables/client'
 
 defineOptions({ inheritAttrs: false })
 
@@ -21,6 +22,8 @@ const emit = defineEmits<{
   (event: 'run', files?: File[]): void
 }>()
 
+const includeTaskLocation = computed(() => config.value.includeTaskLocation)
+
 const searchBox = ref<HTMLInputElement | undefined>()
 
 const {
@@ -197,6 +200,7 @@ useResizeObserver(testExplorerRef, (entries) => {
           >
             <template #default="{ item }">
               <ExplorerItem
+                class="h-28px m-0 p-0"
                 :task-id="item.id"
                 :expandable="item.expandable"
                 :type="item.type"
@@ -209,7 +213,7 @@ useResizeObserver(testExplorerRef, (entries) => {
                 :state="item.state"
                 :duration="item.duration"
                 :opened="item.expanded"
-                class="h-28px m-0 p-0"
+                :disable-task-location="!includeTaskLocation"
                 :class="activeFileId === item.id ? 'bg-active' : ''"
                 :on-item-click="onItemClick"
               />
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 2edcbc417847..74140bdeacfa 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -2,11 +2,13 @@
 import type { Task, TaskState } from '@vitest/runner'
 import { nextTick } from 'vue'
 import { hasFailedSnapshot } from '@vitest/ws-client'
+import { Tooltip as VueTooltip } from 'floating-vue'
 import { client, isReport, runFiles } from '~/composables/client'
 import { coverageEnabled } from '~/composables/navigation'
 import type { TaskTreeNodeType } from '~/composables/explorer/types'
 import { explorerTree } from '~/composables/explorer'
 import { search } from '~/composables/explorer/state'
+import { showSource } from '~/composables/codemirror'
 
 // TODO: better handling of "opened" - it means to forcefully open the tree item and set in TasksList right now
 const {
@@ -19,6 +21,7 @@ const {
   expandable,
   typecheck,
   type,
+  disableTaskLocation,
   onItemClick,
 } = defineProps<{
   taskId: string
@@ -34,6 +37,7 @@ const {
   search?: string
   projectName?: string
   projectNameColor: string
+  disableTaskLocation?: boolean
   onItemClick?: (task: Task) => void
 }>()
 
@@ -86,10 +90,11 @@ const gridStyles = computed(() => {
   }
   // text content
   gridColumns.push('minmax(0, 1fr)')
-  // buttons
-  if (type === 'file') {
+  // action buttons
+  if (!isReport || type === 'file') {
     gridColumns.push('min-content')
   }
+
   // all the vertical lines with width 1rem and mx-2: always centered
   return `grid-template-columns: ${
     entries.map(() => '1rem').join(' ')
@@ -107,6 +112,25 @@ const highlighted = computed(() => {
     ? name.replace(regex, match => `<span class="highlight">${match}</span>`)
     : name
 })
+
+const disableShowDetails = computed(() => type !== 'file' && disableTaskLocation)
+const showDetailsTooltip = computed(() => {
+  return type === 'file'
+    ? 'Open test details'
+    : type === 'suite'
+      ? 'View Suite Source Code'
+      : 'View Test Source Code'
+})
+
+function showDetails() {
+  const t = task.value!
+  if (type === 'file') {
+    onItemClick?.(t)
+  }
+  else {
+    showSource(t)
+  }
+}
 </script>
 
 <template>
@@ -136,7 +160,6 @@ const highlighted = computed(() => {
     <div v-if="type === 'suite' && typecheck" class="i-logos:typescript-icon" flex-shrink-0 mr-2 />
     <div flex items-end gap-2 :text="state === 'fail' ? 'red-500' : ''" overflow-hidden>
       <span text-sm truncate font-light>
-        <!-- only show [] in files view -->
         <span v-if="type === 'file' && projectName" :style="{ color: projectNameColor }">
           [{{ projectName }}]
         </span>
@@ -146,29 +169,55 @@ const highlighted = computed(() => {
         {{ duration > 0 ? duration : '< 1' }}ms
       </span>
     </div>
-    <div v-if="type === 'file'" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
+    <div v-if="isReport && type === 'file'" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
       <IconAction
-        v-if="!isReport && failedSnapshot"
+        v-tooltip.bottom="'Open test details'"
+        data-testid="btn-open-details"
+        title="Open test details"
+        icon="i-carbon:intrusion-prevention"
+        @click.prevent.stop="onItemClick?.(task)"
+      />
+    </div>
+    <div v-if="!isReport" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
+      <IconAction
+        v-if="failedSnapshot"
         v-tooltip.bottom="'Fix failed snapshot(s)'"
         data-testid="btn-fix-snapshot"
         title="Fix failed snapshot(s)"
-        icon="i-carbon-result-old"
+        icon="i-carbon:result-old"
         @click.prevent.stop="updateSnapshot(task)"
       />
-      <IconAction
-        v-tooltip.bottom="'Open test details'"
+      <VueTooltip
+        v-if="disableShowDetails"
+        :title="showDetailsTooltip"
+        class="w-1.4em h-1.4em op100 rounded flex color-red5 dark:color-#f43f5e cursor-help"
+      >
+        <div class="i-carbon:intrusion-prevention ma" />
+        <template #popper>
+          <div class="op100 gap-1 p-y-1" grid="~ items-center cols-[1.5em_1fr]">
+            <div class="i-carbon:information-square w-1.5em h-1.5em" />
+            <div>This feature is not available, you have configured <span class="text-[#add467]">includeTaskLocation: false</span> in your configuration file.</div>
+            <div style="grid-column: 2">
+              Check the documentation for further details about <span class="text-[#add467]">includeTaskLocation</span>.
+            </div>
+          </div>
+        </template>
+      </VueTooltip>
+      <IconButton
+        v-else
+        v-tooltip.bottom="showDetailsTooltip"
         data-testid="btn-open-details"
         title="Open test details"
-        icon="i-carbon-intrusion-prevention"
-        @click.prevent.stop="onItemClick?.(task)"
+        icon="i-carbon:intrusion-prevention"
+        @click.prevent.stop="showDetails"
       />
-      <IconAction
-        v-if="!isReport"
+      <IconButton
         v-tooltip.bottom="'Run current test'"
         data-testid="btn-run-test"
         title="Run current test"
         icon="i-carbon:play-filled-alt"
         text-green5
+        :disabled="type !== 'file'"
         @click.prevent.stop="onRun(task)"
       />
     </div>
@@ -185,8 +234,7 @@ const highlighted = computed(() => {
 .test-actions {
   display: none;
 }
-.item-wrapper:hover .test-actions,
-.item-wrapper[data-current="true"] .test-actions {
+.item-wrapper:hover .test-actions {
   display: flex;
 }
 </style>
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index 2a6d41865df3..dcc94fde7ab9 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -4,6 +4,7 @@ import type { ErrorWithDiff, File } from 'vitest'
 import { createTooltip, destroyTooltip } from 'floating-vue'
 import { openInEditor } from '~/composables/error'
 import { client } from '~/composables/client'
+import { codemirrorRef } from '~/composables/codemirror'
 
 const props = defineProps<{
   file?: File
@@ -56,11 +57,11 @@ function clearListeners() {
 }
 
 useResizeObserver(editor, () => {
-  cm.value?.refresh()
+  codemirrorRef.value?.refresh()
 })
 
 function codemirrorChanges() {
-  draft.value = serverCode.value !== cm.value!.getValue()
+  draft.value = serverCode.value !== codemirrorRef.value!.getValue()
 }
 
 watch(
@@ -105,8 +106,8 @@ function createErrorElement(e: ErrorWithDiff) {
   }
   div.appendChild(span)
   listeners.push([span, el, () => destroyTooltip(span)])
-  handles.push(cm.value!.addLineClass(stack.line - 1, 'wrap', 'bg-red-500/10'))
-  widgets.push(cm.value!.addLineWidget(stack.line - 1, div))
+  handles.push(codemirrorRef.value!.addLineClass(stack.line - 1, 'wrap', 'bg-red-500/10'))
+  widgets.push(codemirrorRef.value!.addLineWidget(stack.line - 1, div))
 }
 
 watch(
@@ -120,7 +121,7 @@ watch(
     setTimeout(() => {
       clearListeners()
       widgets.forEach(widget => widget.clear())
-      handles.forEach(h => cm.value?.removeLineClass(h, 'wrap'))
+      handles.forEach(h => codemirrorRef.value?.removeLineClass(h, 'wrap'))
       widgets.length = 0
       handles.length = 0
 
diff --git a/packages/ui/client/composables/codemirror.ts b/packages/ui/client/composables/codemirror.ts
index 8ddcc4bd6c68..99b4588ff384 100644
--- a/packages/ui/client/composables/codemirror.ts
+++ b/packages/ui/client/composables/codemirror.ts
@@ -11,6 +11,10 @@ import 'codemirror/mode/jsx/jsx'
 import 'codemirror/addon/display/placeholder'
 import 'codemirror/addon/scroll/simplescrollbars'
 import 'codemirror/addon/scroll/simplescrollbars.css'
+import type { Task } from '@vitest/runner'
+import { navigateTo } from '~/composables/navigation'
+
+export const codemirrorRef = shallowRef<CodeMirror.EditorFromTextArea>()
 
 export function useCodeMirror(
   textarea: Ref<HTMLTextAreaElement | null | undefined>,
@@ -50,5 +54,27 @@ export function useCodeMirror(
     { immediate: true },
   )
 
+  onUnmounted(() => {
+    codemirrorRef.value = undefined
+  })
+
   return markRaw(cm)
 }
+
+export async function showSource(task: Task) {
+  const codeMirror = codemirrorRef.value
+  if (!codeMirror || activeFileId.value !== task.file.id) {
+    navigateTo(task, true)
+    // we need to await, CodeMirrow will take some time to initialize
+    await new Promise(r => setTimeout(r, 256))
+  }
+
+  nextTick(() => {
+    const line = { line: task.location?.line ?? 0, ch: 0 }
+    codemirrorRef.value?.scrollIntoView(line)
+    nextTick(() => {
+      codemirrorRef.value?.focus()
+      codemirrorRef.value?.setCursor(line)
+    })
+  })
+}
diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts
index 2a25ca42b84e..47799b806f2a 100644
--- a/packages/ui/client/composables/navigation.ts
+++ b/packages/ui/client/composables/navigation.ts
@@ -1,7 +1,7 @@
-import type { File } from '@vitest/runner'
+import type { File, Task } from '@vitest/runner'
 import { client, config, findById } from './client'
 import { testRunState } from './client/state'
-import { activeFileId } from './params'
+import { activeFileId, viewMode } from './params'
 
 export const currentModule = ref<File>()
 export const dashboardVisible = ref(true)
@@ -47,6 +47,7 @@ export const coverageUrl = computed(() => {
 
   return undefined
 })
+
 watch(
   testRunState,
   (state) => {
@@ -54,6 +55,7 @@ watch(
   },
   { immediate: true },
 )
+
 export function initializeNavigation() {
   const file = activeFileId.value
   if (file && file.length > 0) {
@@ -87,6 +89,15 @@ export function showDashboard(show: boolean) {
   }
 }
 
+export function navigateTo(task: Task, editor = false) {
+  activeFileId.value = task.file.id
+  if (editor) {
+    viewMode.value = 'editor'
+  }
+  currentModule.value = findById(task.file.id)
+  showDashboard(false)
+}
+
 export function showCoverage() {
   coverageVisible.value = true
   dashboardVisible.value = false
diff --git a/packages/vitest/src/node/config.ts b/packages/vitest/src/node/config.ts
index 4d369c996ac2..4029fe3c9237 100644
--- a/packages/vitest/src/node/config.ts
+++ b/packages/vitest/src/node/config.ts
@@ -699,6 +699,16 @@ export function resolveConfig(
     port: defaultBrowserPort,
   }
 
+  // enable includeTaskLocation by default in UI mode
+  if (resolved.browser.enabled) {
+    if (resolved.browser.ui) {
+      resolved.includeTaskLocation ??= true
+    }
+  }
+  else if (resolved.ui) {
+    resolved.includeTaskLocation ??= true
+  }
+
   resolved.testTransformMode ??= {}
 
   resolved.testTimeout ??= resolved.browser.enabled ? 15000 : 5000

From 1ca2e4f69b17cc98c4434babaeef44214d028164 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Fri, 21 Jun 2024 01:18:48 +0200
Subject: [PATCH 2/9] chore(docs): update includeTaskLocation

---
 docs/config/index.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/config/index.md b/docs/config/index.md
index d5313286e781..63380c0cce99 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -2283,10 +2283,12 @@ Should `location` property be included when Vitest API receives tasks in [report
 
 The `location` property has `column` and `line` values that correspond to the `test` or `describe` position in the original file.
 
+This option will be auto enabled if you don't disable it explicitly, and you are running Vitest with:
+- [Vitest UI](/guide/ui)
+- or using the [Browser Mode](/guide/browser) without [headless](/guide/browser#headless) mode
+
 ::: tip
 This option has no effect if you do not use custom code that relies on this.
-
-This option is enabled by default in [Vitest UI](/guide/ui).
 :::
 
 ### snapshotEnvironment {#snapshotEnvironment}

From 67fe171b67bd6631d36fad4985de520dc13c4daa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Mon, 24 Jun 2024 10:27:20 +0200
Subject: [PATCH 3/9] chore: apply suggestion

Co-authored-by: Anjorin Damilare <damilareanjorin1@gmail.com>
---
 docs/config/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/config/index.md b/docs/config/index.md
index 63380c0cce99..d560af678645 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -2283,7 +2283,7 @@ Should `location` property be included when Vitest API receives tasks in [report
 
 The `location` property has `column` and `line` values that correspond to the `test` or `describe` position in the original file.
 
-This option will be auto enabled if you don't disable it explicitly, and you are running Vitest with:
+This option will be auto-enabled if you don't disable it explicitly, and you are running Vitest with:
 - [Vitest UI](/guide/ui)
 - or using the [Browser Mode](/guide/browser) without [headless](/guide/browser#headless) mode
 

From d2ed94e89e1cec810340c0c6500319d828ac9adf Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 26 Jun 2024 12:48:14 +0200
Subject: [PATCH 4/9] chore: enable code tab for static html reporter

---
 packages/ui/client/components/FileDetails.vue   |  1 -
 .../client/components/explorer/ExplorerItem.vue | 16 +++++++---------
 .../ui/client/components/views/ViewEditor.vue   |  8 +++++---
 packages/ui/node/reporter.ts                    | 17 +++++++++++++++--
 packages/vitest/src/node/config.ts              | 12 ++++++++++++
 5 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index 9184b19784e4..5bfe490c598f 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -174,7 +174,6 @@ debouncedWatch(
           Module Graph
         </button>
         <button
-          v-if="!isReport"
           tab-button
           data-testid="btn-code"
           class="flex items-center gap-2"
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 74140bdeacfa..55daf8d31b07 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -91,9 +91,7 @@ const gridStyles = computed(() => {
   // text content
   gridColumns.push('minmax(0, 1fr)')
   // action buttons
-  if (!isReport || type === 'file') {
-    gridColumns.push('min-content')
-  }
+  gridColumns.push('min-content')
 
   // all the vertical lines with width 1rem and mx-2: always centered
   return `grid-template-columns: ${
@@ -169,13 +167,13 @@ function showDetails() {
         {{ duration > 0 ? duration : '< 1' }}ms
       </span>
     </div>
-    <div v-if="isReport && type === 'file'" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
-      <IconAction
-        v-tooltip.bottom="'Open test details'"
+    <div v-if="isReport" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
+      <IconButton
+        v-tooltip.bottom="showDetailsTooltip"
         data-testid="btn-open-details"
-        title="Open test details"
+        :title="showDetailsTooltip"
         icon="i-carbon:intrusion-prevention"
-        @click.prevent.stop="onItemClick?.(task)"
+        @click.prevent.stop="showDetails"
       />
     </div>
     <div v-if="!isReport" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
@@ -207,7 +205,7 @@ function showDetails() {
         v-else
         v-tooltip.bottom="showDetailsTooltip"
         data-testid="btn-open-details"
-        title="Open test details"
+        :title="showDetailsTooltip"
         icon="i-carbon:intrusion-prevention"
         @click.prevent.stop="showDetails"
       />
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index dcc94fde7ab9..bdf030f1d8b3 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -3,7 +3,7 @@ import type CodeMirror from 'codemirror'
 import type { ErrorWithDiff, File } from 'vitest'
 import { createTooltip, destroyTooltip } from 'floating-vue'
 import { openInEditor } from '~/composables/error'
-import { client } from '~/composables/client'
+import { client, isReport } from '~/composables/client'
 import { codemirrorRef } from '~/composables/codemirror'
 
 const props = defineProps<{
@@ -25,7 +25,9 @@ watch(
       draft.value = false
       return
     }
-    code.value = (await client.rpc.readTestFile(props.file.filepath)) || ''
+    code.value = isReport
+      ? ('source' in props.file ? props.file.source : '') as string
+      : (await client.rpc.readTestFile(props.file.filepath)) || ''
     serverCode.value = code.value
     draft.value = false
   },
@@ -151,7 +153,7 @@ async function onSave(content: string) {
     ref="editor"
     v-model="code"
     h-full
-    v-bind="{ lineNumbers: true }"
+    v-bind="{ lineNumbers: true, readOnly: isReport }"
     :mode="ext"
     data-testid="code-mirror"
     @save="onSave"
diff --git a/packages/ui/node/reporter.ts b/packages/ui/node/reporter.ts
index 47add940cc8a..96aa4eb5416b 100644
--- a/packages/ui/node/reporter.ts
+++ b/packages/ui/node/reporter.ts
@@ -32,9 +32,13 @@ function getOutputFile(config: PotentialConfig | undefined) {
   return config.outputFile.html
 }
 
+interface ReportFile extends File {
+  source?: string
+}
+
 interface HTMLReportData {
   paths: string[]
-  files: File[]
+  files: ReportFile[]
   config: ResolvedConfig
   moduleGraph: Record<string, Record<string, ModuleGraphData>>
   unhandledErrors: unknown[]
@@ -60,7 +64,16 @@ export default class HTMLReporter implements Reporter {
   async onFinished() {
     const result: HTMLReportData = {
       paths: this.ctx.state.getPaths(),
-      files: this.ctx.state.getFiles(),
+      files: await Promise.all(this.ctx.state.getFiles().map(async (file) => {
+        let source: string | undefined
+        try {
+          source = await fs.readFile(file.filepath, 'utf-8')
+        }
+        catch (_) {
+          // just ignore
+        }
+        return { ...file, source } satisfies ReportFile
+      })),
       config: this.ctx.config,
       unhandledErrors: this.ctx.state.getUnhandledErrors(),
       moduleGraph: {},
diff --git a/packages/vitest/src/node/config.ts b/packages/vitest/src/node/config.ts
index f7e604e02d8b..f07163183bb7 100644
--- a/packages/vitest/src/node/config.ts
+++ b/packages/vitest/src/node/config.ts
@@ -730,6 +730,18 @@ export function resolveConfig(
     resolved.includeTaskLocation ??= true
   }
 
+  const htmlReporter = toArray(resolved.reporters).some((reporter) => {
+    if (Array.isArray(reporter)) {
+      return reporter[0] === 'html'
+    }
+
+    return false
+  })
+
+  if (htmlReporter) {
+    resolved.includeTaskLocation ??= true
+  }
+
   resolved.testTransformMode ??= {}
 
   resolved.testTimeout ??= resolved.browser.enabled ? 15000 : 5000

From 24e6f07276a98407c7d789ca8a048985abe35e30 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 26 Jun 2024 14:12:08 +0200
Subject: [PATCH 5/9] chore: apply suggestions

---
 .../ui/client/components/views/ViewEditor.vue |  4 +--
 .../ui/client/composables/client/static.ts    | 14 ++++-----
 packages/ui/node/reporter.ts                  | 30 +++++++++----------
 3 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index bdf030f1d8b3..f8772abeabeb 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -25,9 +25,7 @@ watch(
       draft.value = false
       return
     }
-    code.value = isReport
-      ? ('source' in props.file ? props.file.source : '') as string
-      : (await client.rpc.readTestFile(props.file.filepath)) || ''
+    code.value = (await client.rpc.readTestFile(props.file.filepath)) || ''
     serverCode.value = code.value
     draft.value = false
   },
diff --git a/packages/ui/client/composables/client/static.ts b/packages/ui/client/composables/client/static.ts
index 19546390effe..abf3e778fc95 100644
--- a/packages/ui/client/composables/client/static.ts
+++ b/packages/ui/client/composables/client/static.ts
@@ -17,6 +17,8 @@ interface HTMLReportMetadata {
   config: ResolvedConfig
   moduleGraph: Record<string, Record<string, ModuleGraphData>>
   unhandledErrors: unknown[]
+  // filename -> source
+  sources: Record<string, string>
 }
 
 const noop: any = () => {}
@@ -51,13 +53,7 @@ export function createStaticClient(): VitestClient {
     getUnhandledErrors: () => {
       return metadata.unhandledErrors
     },
-    getTransformResult: async (id) => {
-      return {
-        code: id,
-        source: '',
-        map: null,
-      }
-    },
+    getTransformResult: asyncNoop,
     onDone: noop,
     onCollected: asyncNoop,
     onTaskUpdate: noop,
@@ -73,7 +69,9 @@ export function createStaticClient(): VitestClient {
     resolveSnapshotRawPath: asyncNoop,
     readSnapshotFile: asyncNoop,
     saveSnapshotFile: asyncNoop,
-    readTestFile: asyncNoop,
+    readTestFile: async (id: string) => {
+      return metadata.sources[id]
+    },
     removeSnapshotFile: asyncNoop,
     onUnhandledError: noop,
     saveTestFile: asyncNoop,
diff --git a/packages/ui/node/reporter.ts b/packages/ui/node/reporter.ts
index 96aa4eb5416b..2dffe8bcd1ae 100644
--- a/packages/ui/node/reporter.ts
+++ b/packages/ui/node/reporter.ts
@@ -32,16 +32,14 @@ function getOutputFile(config: PotentialConfig | undefined) {
   return config.outputFile.html
 }
 
-interface ReportFile extends File {
-  source?: string
-}
-
 interface HTMLReportData {
   paths: string[]
-  files: ReportFile[]
+  files: File[]
   config: ResolvedConfig
   moduleGraph: Record<string, Record<string, ModuleGraphData>>
   unhandledErrors: unknown[]
+  // filename -> source
+  sources: Record<string, string>
 }
 
 const distDir = resolve(fileURLToPath(import.meta.url), '../../dist')
@@ -64,19 +62,11 @@ export default class HTMLReporter implements Reporter {
   async onFinished() {
     const result: HTMLReportData = {
       paths: this.ctx.state.getPaths(),
-      files: await Promise.all(this.ctx.state.getFiles().map(async (file) => {
-        let source: string | undefined
-        try {
-          source = await fs.readFile(file.filepath, 'utf-8')
-        }
-        catch (_) {
-          // just ignore
-        }
-        return { ...file, source } satisfies ReportFile
-      })),
+      files: this.ctx.state.getFiles(),
       config: this.ctx.config,
       unhandledErrors: this.ctx.state.getUnhandledErrors(),
       moduleGraph: {},
+      sources: {},
     }
     await Promise.all(
       result.files.map(async (file) => {
@@ -87,6 +77,16 @@ export default class HTMLReporter implements Reporter {
           projectName,
           file.filepath,
         )
+        if (!result.sources[file.filepath]) {
+          try {
+            result.sources[file.filepath] = await fs.readFile(file.filepath, {
+              encoding: 'utf-8',
+            })
+          }
+          catch (_) {
+            // just ignore
+          }
+        }
       }),
     )
     await this.writeReport(stringify(result))

From 4a0257e2d89e2121885ba37f2f464d4cc673e973 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 26 Jun 2024 14:39:06 +0200
Subject: [PATCH 6/9] chore: update failing snapshots

---
 .../tests/__snapshots__/html.test.ts.snap     | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/test/reporters/tests/__snapshots__/html.test.ts.snap b/test/reporters/tests/__snapshots__/html.test.ts.snap
index 24b03826e0f8..6774077b8d97 100644
--- a/test/reporters/tests/__snapshots__/html.test.ts.snap
+++ b/test/reporters/tests/__snapshots__/html.test.ts.snap
@@ -28,6 +28,10 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
         {
           "file": [Circular],
           "id": 0,
+          "location": {
+            "column": 1,
+            "line": 5,
+          },
           "logs": [
             {
               "content": "json-fail>should fail
@@ -93,6 +97,18 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
   "paths": [
     "<rootDir>/test/reporters/fixtures/json-fail.test.ts",
   ],
+  "sources": {
+    "<rootDir>/test/reporters/fixtures/json-fail.test.ts": "import { expect, test } from 'vitest'
+
+// I am comment1
+// I am comment2
+test('should fail', () => {
+  // eslint-disable-next-line no-console
+  console.log('json-fail>should fail')
+  expect(2).toEqual(1)
+})
+",
+  },
   "unhandledErrors": [],
 }
 `;
@@ -125,6 +141,10 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
         {
           "file": [Circular],
           "id": 0,
+          "location": {
+            "column": 1,
+            "line": 3,
+          },
           "meta": {},
           "mode": "run",
           "name": "2 + 3 = 5",
@@ -144,6 +164,10 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
         {
           "file": [Circular],
           "id": "1111755131_1",
+          "location": {
+            "column": 6,
+            "line": 7,
+          },
           "meta": {},
           "mode": "skip",
           "name": "3 + 3 = 6",
@@ -169,6 +193,18 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
   "paths": [
     "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts",
   ],
+  "sources": {
+    "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts": "import { expect, test } from 'vitest'
+
+test('2 + 3 = 5', () => {
+  expect(2 + 3).toBe(5)
+})
+
+test.skip('3 + 3 = 6', () => {
+  expect(3 + 3).toBe(6)
+})
+",
+  },
   "unhandledErrors": [],
 }
 `;

From 7b271f26c509f51d4f274138be4e5af6a5242d9e Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 27 Jun 2024 12:26:19 +0200
Subject: [PATCH 7/9] chore: change explorer item layout

---
 .../components/explorer/ExplorerItem.vue      | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 55daf8d31b07..b2f008f7b73c 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -43,7 +43,15 @@ const {
 
 const task = computed(() => client.state.idMap.get(taskId))
 
-const failedSnapshot = computed(() => task.value && hasFailedSnapshot(task.value))
+const failedSnapshot = computed(() => {
+  // don't traverse the tree if it's a report
+  if (isReport) {
+    return false
+  }
+
+  const t = task.value
+  return t && hasFailedSnapshot(t)
+})
 
 function toggleOpen() {
   if (!expandable) {
@@ -119,6 +127,7 @@ const showDetailsTooltip = computed(() => {
       ? 'View Suite Source Code'
       : 'View Test Source Code'
 })
+const showDetailsClasses = computed(() => disableShowDetails.value ? 'color-red5 dark:color-#f43f5e' : null)
 
 function showDetails() {
   const t = task.value!
@@ -167,18 +176,9 @@ function showDetails() {
         {{ duration > 0 ? duration : '< 1' }}ms
       </span>
     </div>
-    <div v-if="isReport" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
-      <IconButton
-        v-tooltip.bottom="showDetailsTooltip"
-        data-testid="btn-open-details"
-        :title="showDetailsTooltip"
-        icon="i-carbon:intrusion-prevention"
-        @click.prevent.stop="showDetails"
-      />
-    </div>
-    <div v-if="!isReport" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
+    <div gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
       <IconAction
-        v-if="failedSnapshot"
+        v-if="!isReport && failedSnapshot"
         v-tooltip.bottom="'Fix failed snapshot(s)'"
         data-testid="btn-fix-snapshot"
         title="Fix failed snapshot(s)"
@@ -186,30 +186,30 @@ function showDetails() {
         @click.prevent.stop="updateSnapshot(task)"
       />
       <VueTooltip
-        v-if="disableShowDetails"
-        :title="showDetailsTooltip"
-        class="w-1.4em h-1.4em op100 rounded flex color-red5 dark:color-#f43f5e cursor-help"
+        placement="bottom"
+        class="w-1.4em h-1.4em op100 rounded flex"
+        :class="showDetailsClasses"
       >
-        <div class="i-carbon:intrusion-prevention ma" />
+        <IconButton
+          data-testid="btn-open-details"
+          icon="i-carbon:intrusion-prevention"
+          @click.prevent.stop="showDetails"
+        />
         <template #popper>
-          <div class="op100 gap-1 p-y-1" grid="~ items-center cols-[1.5em_1fr]">
+          <div v-if="disableShowDetails" class="op100 gap-1 p-y-1" grid="~ items-center cols-[1.5em_1fr]">
             <div class="i-carbon:information-square w-1.5em h-1.5em" />
-            <div>This feature is not available, you have configured <span class="text-[#add467]">includeTaskLocation: false</span> in your configuration file.</div>
+            <div>{{ showDetailsTooltip }}: this feature is not available, you have disabled <span class="text-[#add467]">includeTaskLocation</span> in your configuration file.</div>
             <div style="grid-column: 2">
-              Check the documentation for further details about <span class="text-[#add467]">includeTaskLocation</span>.
+              Clicking this button the code tab will position the cursor at first line in the source code since the UI doesn't have the information available.
             </div>
           </div>
+          <div v-else>
+            {{ showDetailsTooltip }}
+          </div>
         </template>
       </VueTooltip>
       <IconButton
-        v-else
-        v-tooltip.bottom="showDetailsTooltip"
-        data-testid="btn-open-details"
-        :title="showDetailsTooltip"
-        icon="i-carbon:intrusion-prevention"
-        @click.prevent.stop="showDetails"
-      />
-      <IconButton
+        v-if="!isReport"
         v-tooltip.bottom="'Run current test'"
         data-testid="btn-run-test"
         title="Run current test"

From 04ae6b52a5874cf1dc97e152dc7295ecf6339695 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 27 Jun 2024 14:01:32 +0200
Subject: [PATCH 8/9] chore: add line number to router params

---
 packages/ui/client/auto-imports.d.ts          |  2 +
 packages/ui/client/components.d.ts            |  2 +-
 ...CodeMirror.vue => CodeMirrorContainer.vue} |  0
 .../components/ModuleTransformResultView.vue  |  6 +--
 .../ui/client/components/views/ViewEditor.vue | 44 ++++++++++++++++---
 packages/ui/client/composables/codemirror.ts  | 16 +------
 packages/ui/client/composables/navigation.ts  | 11 +++--
 packages/ui/client/composables/params.ts      |  3 ++
 8 files changed, 55 insertions(+), 29 deletions(-)
 rename packages/ui/client/components/{CodeMirror.vue => CodeMirrorContainer.vue} (100%)

diff --git a/packages/ui/client/auto-imports.d.ts b/packages/ui/client/auto-imports.d.ts
index 2c1a81fc0b82..29e7187ea45e 100644
--- a/packages/ui/client/auto-imports.d.ts
+++ b/packages/ui/client/auto-imports.d.ts
@@ -62,6 +62,7 @@ declare global {
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const lineNumber: typeof import('./composables/params')['lineNumber']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const navigateTo: typeof import('./composables/navigation')['navigateTo']
@@ -108,6 +109,7 @@ declare global {
   const refDefault: typeof import('@vueuse/core')['refDefault']
   const refThrottled: typeof import('@vueuse/core')['refThrottled']
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const registerInitializeListener: typeof import('./composables/codemirror')['registerInitializeListener']
   const registerResizingListener: typeof import("./composables/browser")["registerResizingListener"]
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
diff --git a/packages/ui/client/components.d.ts b/packages/ui/client/components.d.ts
index de49b1ec7bef..a7a4abf4326f 100644
--- a/packages/ui/client/components.d.ts
+++ b/packages/ui/client/components.d.ts
@@ -8,7 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BrowserIframe: typeof import('./components/BrowserIframe.vue')['default']
-    CodeMirror: typeof import('./components/CodeMirror.vue')['default']
+    CodeMirrorContainer: typeof import('./components/CodeMirrorContainer.vue')['default']
     ConnectionOverlay: typeof import('./components/ConnectionOverlay.vue')['default']
     Coverage: typeof import('./components/Coverage.vue')['default']
     Dashboard: typeof import('./components/Dashboard.vue')['default']
diff --git a/packages/ui/client/components/CodeMirror.vue b/packages/ui/client/components/CodeMirrorContainer.vue
similarity index 100%
rename from packages/ui/client/components/CodeMirror.vue
rename to packages/ui/client/components/CodeMirrorContainer.vue
diff --git a/packages/ui/client/components/ModuleTransformResultView.vue b/packages/ui/client/components/ModuleTransformResultView.vue
index 625a5db80f14..f348532b6a72 100644
--- a/packages/ui/client/components/ModuleTransformResultView.vue
+++ b/packages/ui/client/components/ModuleTransformResultView.vue
@@ -52,14 +52,14 @@ onKeyStroke('Escape', () => {
         <div p="x3 y-1" bg-overlay border="base b t">
           Transformed
         </div>
-        <CodeMirror
+        <CodeMirrorContainer
           h-full
           :model-value="source"
           read-only
           v-bind="{ lineNumbers: true }"
           :mode="ext"
         />
-        <CodeMirror
+        <CodeMirrorContainer
           h-full
           :model-value="code"
           read-only
@@ -71,7 +71,7 @@ onKeyStroke('Escape', () => {
         <div p="x3 y-1" bg-overlay border="base b t">
           Source map (v{{ sourceMap.version }})
         </div>
-        <CodeMirror
+        <CodeMirrorContainer
           :model-value="sourceMap.mappings"
           read-only
           v-bind="{ lineNumbers: true }"
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index f8772abeabeb..c223a7e02768 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -5,6 +5,7 @@ import { createTooltip, destroyTooltip } from 'floating-vue'
 import { openInEditor } from '~/composables/error'
 import { client, isReport } from '~/composables/client'
 import { codemirrorRef } from '~/composables/codemirror'
+import { lineNumber } from '~/composables/params'
 
 const props = defineProps<{
   file?: File
@@ -15,23 +16,52 @@ const emit = defineEmits<{ (event: 'draft', value: boolean): void }>()
 const code = ref('')
 const serverCode = shallowRef<string | undefined>(undefined)
 const draft = ref(false)
+const loading = ref(true)
 
 watch(
   () => props.file,
   async () => {
-    if (!props.file || !props.file?.filepath) {
-      code.value = ''
+    loading.value = true
+    try {
+      if (!props.file || !props.file?.filepath) {
+        code.value = ''
+        serverCode.value = code.value
+        draft.value = false
+        return
+      }
+
+      code.value = (await client.rpc.readTestFile(props.file.filepath)) || ''
       serverCode.value = code.value
       draft.value = false
-      return
     }
-    code.value = (await client.rpc.readTestFile(props.file.filepath)) || ''
-    serverCode.value = code.value
-    draft.value = false
+    finally {
+      // fire focusing editor after loading
+      nextTick(() => (loading.value = false))
+    }
   },
   { immediate: true },
 )
 
+watch(() => [loading.value, props.file, lineNumber.value] as const, ([loadingFile, _, l]) => {
+  if (!loadingFile) {
+    if (l != null) {
+      nextTick(() => {
+        const line = { line: l ?? 0, ch: 0 }
+        codemirrorRef.value?.scrollIntoView(line, 100)
+        nextTick(() => {
+          codemirrorRef.value?.focus()
+          codemirrorRef.value?.setCursor(line)
+        })
+      })
+    }
+    else {
+      nextTick(() => {
+        codemirrorRef.value?.focus()
+      })
+    }
+  }
+}, { flush: 'post' })
+
 const ext = computed(() => props.file?.filepath?.split(/\./g).pop() || 'js')
 const editor = ref<any>()
 
@@ -147,7 +177,7 @@ async function onSave(content: string) {
 </script>
 
 <template>
-  <CodeMirror
+  <CodeMirrorContainer
     ref="editor"
     v-model="code"
     h-full
diff --git a/packages/ui/client/composables/codemirror.ts b/packages/ui/client/composables/codemirror.ts
index 99b4588ff384..f26d8a310a91 100644
--- a/packages/ui/client/composables/codemirror.ts
+++ b/packages/ui/client/composables/codemirror.ts
@@ -62,19 +62,5 @@ export function useCodeMirror(
 }
 
 export async function showSource(task: Task) {
-  const codeMirror = codemirrorRef.value
-  if (!codeMirror || activeFileId.value !== task.file.id) {
-    navigateTo(task, true)
-    // we need to await, CodeMirrow will take some time to initialize
-    await new Promise(r => setTimeout(r, 256))
-  }
-
-  nextTick(() => {
-    const line = { line: task.location?.line ?? 0, ch: 0 }
-    codemirrorRef.value?.scrollIntoView(line)
-    nextTick(() => {
-      codemirrorRef.value?.focus()
-      codemirrorRef.value?.setCursor(line)
-    })
-  })
+  navigateTo(task, task.location?.line ?? 0)
 }
diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts
index 47799b806f2a..c5cf8e28af44 100644
--- a/packages/ui/client/composables/navigation.ts
+++ b/packages/ui/client/composables/navigation.ts
@@ -1,7 +1,7 @@
 import type { File, Task } from '@vitest/runner'
 import { client, config, findById } from './client'
 import { testRunState } from './client/state'
-import { activeFileId, viewMode } from './params'
+import { activeFileId, lineNumber, viewMode } from './params'
 
 export const currentModule = ref<File>()
 export const dashboardVisible = ref(true)
@@ -89,9 +89,14 @@ export function showDashboard(show: boolean) {
   }
 }
 
-export function navigateTo(task: Task, editor = false) {
+export function navigateTo(task: Task, line: number | null = null) {
   activeFileId.value = task.file.id
-  if (editor) {
+  // reset line number
+  lineNumber.value = null
+  if (line != null) {
+    nextTick(() => {
+      lineNumber.value = line
+    })
     viewMode.value = 'editor'
   }
   currentModule.value = findById(task.file.id)
diff --git a/packages/ui/client/composables/params.ts b/packages/ui/client/composables/params.ts
index 33ad473f8a55..07218439a374 100644
--- a/packages/ui/client/composables/params.ts
+++ b/packages/ui/client/composables/params.ts
@@ -1,14 +1,17 @@
 export interface Params {
   file: string
   view: null | 'graph' | 'editor' | 'console'
+  line: null | number
 }
 
 export const params = useUrlSearchParams<Params>('hash', {
   initialValue: {
     file: '',
     view: null,
+    line: null,
   },
 })
 
 export const activeFileId = toRef(params, 'file')
 export const viewMode = toRef(params, 'view')
+export const lineNumber = toRef(params, 'line')

From 8e437b5b8426333fdff520f5eb08af7c4a80d7fe Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 27 Jun 2024 14:05:08 +0200
Subject: [PATCH 9/9] chore: remove `registerInitializeListener` from auto
 imports dts

---
 packages/ui/client/auto-imports.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/client/auto-imports.d.ts b/packages/ui/client/auto-imports.d.ts
index 29e7187ea45e..34c081840853 100644
--- a/packages/ui/client/auto-imports.d.ts
+++ b/packages/ui/client/auto-imports.d.ts
@@ -109,7 +109,6 @@ declare global {
   const refDefault: typeof import('@vueuse/core')['refDefault']
   const refThrottled: typeof import('@vueuse/core')['refThrottled']
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
-  const registerInitializeListener: typeof import('./composables/codemirror')['registerInitializeListener']
   const registerResizingListener: typeof import("./composables/browser")["registerResizingListener"]
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']