From cee82e47359c6377b4cbc8d3847c0ace1a9c315b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Mon, 17 Jun 2024 11:58:55 +0200
Subject: [PATCH] chore: enable eslint in vue files (#5902)

---
 docs/.vitepress/components/ListItem.vue       |   3 +-
 docs/.vitepress/components/Version.vue        |   6 +-
 eslint.config.js                              |   1 +
 .../ui/client/components/BrowserIframe.vue    |  41 ++--
 packages/ui/client/components/CodeMirror.vue  |  60 +++---
 .../client/components/ConnectionOverlay.vue   |   4 +-
 packages/ui/client/components/Coverage.vue    |   8 +-
 packages/ui/client/components/Dashboard.vue   |   4 +-
 .../ui/client/components/DetailsPanel.vue     |   6 +-
 packages/ui/client/components/FileDetails.vue | 119 ++++++------
 packages/ui/client/components/IconAction.vue  |   2 +-
 packages/ui/client/components/IconButton.vue  |  12 +-
 packages/ui/client/components/Modal.vue       |  50 ++---
 .../components/ModuleTransformResultView.vue  |  42 +++--
 packages/ui/client/components/Navigation.vue  |  51 +++--
 packages/ui/client/components/ProgressBar.vue |  48 ++---
 packages/ui/client/components/StatusIcon.vue  |   6 +-
 packages/ui/client/components/TaskItem.vue    |  30 +--
 packages/ui/client/components/TaskTree.vue    |  53 +++---
 packages/ui/client/components/TasksList.vue   | 123 ++++++------
 .../components/dashboard/ErrorEntry.vue       |   2 +-
 .../components/dashboard/TestFilesEntry.vue   |  16 +-
 .../components/dashboard/TestsEntry.vue       |  34 ++--
 .../components/views/ViewConsoleOutput.vue    |   7 +-
 .../views/ViewConsoleOutputEntry.vue          |  14 +-
 .../ui/client/components/views/ViewEditor.vue | 175 +++++++++---------
 .../components/views/ViewModuleGraph.vue      | 128 +++++++------
 .../ui/client/components/views/ViewReport.vue | 114 +++++++-----
 .../components/views/ViewReportError.vue      |  33 ++--
 packages/ui/client/pages/index.vue            |  46 ++---
 .../istanbul.report.test.ts.snap              |  18 +-
 .../__snapshots__/v8.report.test.ts.snap      |  63 +++++--
 test/coverage-test/src/Defined.vue            |   6 +-
 33 files changed, 723 insertions(+), 602 deletions(-)

diff --git a/docs/.vitepress/components/ListItem.vue b/docs/.vitepress/components/ListItem.vue
index 95a47d536..a83dd7da3 100644
--- a/docs/.vitepress/components/ListItem.vue
+++ b/docs/.vitepress/components/ListItem.vue
@@ -9,8 +9,9 @@ function reset() {
   state.value = 0
   setTimeout(() => {
     state.value = Math.random() > 0.9 ? 2 : 1
-    if (state.value === 2)
+    if (state.value === 2) {
       setTimeout(reset, 1000)
+    }
   }, Math.round(Math.random() * 3000) + 400)
 }
 
diff --git a/docs/.vitepress/components/Version.vue b/docs/.vitepress/components/Version.vue
index 2035f008f..a0742ce99 100644
--- a/docs/.vitepress/components/Version.vue
+++ b/docs/.vitepress/components/Version.vue
@@ -3,5 +3,7 @@ import { VPBadge } from 'vitepress/theme'
 </script>
 
 <template>
-  <VPBadge type="info"><slot/>+</VPBadge>
-</template>
\ No newline at end of file
+  <VPBadge type="info">
+    <slot />+
+  </VPBadge>
+</template>
diff --git a/eslint.config.js b/eslint.config.js
index df00d9b20..87d66c1f1 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -2,6 +2,7 @@ import antfu, { GLOB_SRC } from '@antfu/eslint-config'
 
 export default antfu(
   {
+    vue: true,
     // Disable tests rules because we need to test with various setup
     test: false,
     // This replaces the old `.gitignore`
diff --git a/packages/ui/client/components/BrowserIframe.vue b/packages/ui/client/components/BrowserIframe.vue
index 1ad3a4de9..859cbdecc 100644
--- a/packages/ui/client/components/BrowserIframe.vue
+++ b/packages/ui/client/components/BrowserIframe.vue
@@ -1,35 +1,36 @@
 <script setup lang="ts">
-import { viewport, customViewport } from "~/composables/browser";
-import type { ViewportSize } from "~/composables/browser";
-import { setIframeViewport, getCurrentBrowserIframe } from "~/composables/api";
+import { customViewport, viewport } from '~/composables/browser'
+import type { ViewportSize } from '~/composables/browser'
+import { getCurrentBrowserIframe, setIframeViewport } from '~/composables/api'
 
 const sizes: Record<ViewportSize, [width: string, height: string] | null> = {
-  "small-mobile": ["320px", "568px"],
-  "large-mobile": ["414px", "896px"],
-  tablet: ["834px", "1112px"],
-  full: ["100%", "100%"],
+  'small-mobile': ['320px', '568px'],
+  'large-mobile': ['414px', '896px'],
+  'tablet': ['834px', '1112px'],
+  'full': ['100%', '100%'],
   // should not be used manually, this is just
   // a fallback for the case when the viewport is not set correctly
-  custom: null,
-};
+  'custom': null,
+}
 
 async function changeViewport(name: ViewportSize) {
   if (viewport.value === name) {
-    viewport.value = customViewport.value ? "custom" : "full";
-  } else {
-    viewport.value = name;
+    viewport.value = customViewport.value ? 'custom' : 'full'
+  }
+  else {
+    viewport.value = name
   }
 
-  const iframe = getCurrentBrowserIframe();
+  const iframe = getCurrentBrowserIframe()
   if (!iframe) {
-    console.warn("Iframe not found");
-    return;
+    console.warn('Iframe not found')
+    return
   }
 
-  const [width, height] =
-    sizes[viewport.value] || customViewport.value || sizes.full;
+  const [width, height]
+    = (sizes[viewport.value] || customViewport.value || sizes.full)!
 
-  await setIframeViewport(width, height);
+  await setIframeViewport(width, height)
 }
 </script>
 
@@ -37,9 +38,7 @@ async function changeViewport(name: ViewportSize) {
   <div h="full" flex="~ col">
     <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
       <div class="i-carbon-content-delivery-network" />
-      <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate
-        >Browser UI</span
-      >
+      <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Browser UI</span>
     </div>
     <div p="l3 y2 r2" flex="~ gap-2" items-center bg-header border="b-2 base">
       <!-- TODO: these are only for preview (thank you Storybook!), we need to support more different and custom sizes (as a dropdown) -->
diff --git a/packages/ui/client/components/CodeMirror.vue b/packages/ui/client/components/CodeMirror.vue
index c6cd0700a..d76a3227c 100644
--- a/packages/ui/client/components/CodeMirror.vue
+++ b/packages/ui/client/components/CodeMirror.vue
@@ -1,57 +1,57 @@
 <script setup lang="ts">
-import type CodeMirror from "codemirror";
+import type CodeMirror from 'codemirror'
 
 const { mode, readOnly } = defineProps<{
-  mode?: string;
-  readOnly?: boolean;
-}>();
+  mode?: string
+  readOnly?: boolean
+}>()
 
 const emit = defineEmits<{
-  (event: "save", content: string): void;
-}>();
+  (event: 'save', content: string): void
+}>()
 
-const modelValue = defineModel<string>();
+const modelValue = defineModel<string>()
 
-const attrs = useAttrs();
+const attrs = useAttrs()
 
 const modeMap: Record<string, any> = {
   // html: 'htmlmixed',
   // vue: 'htmlmixed',
   // svelte: 'htmlmixed',
-  js: "javascript",
-  mjs: "javascript",
-  cjs: "javascript",
-  ts: { name: "javascript", typescript: true },
-  mts: { name: "javascript", typescript: true },
-  cts: { name: "javascript", typescript: true },
-  jsx: { name: "javascript", jsx: true },
-  tsx: { name: "javascript", typescript: true, jsx: true },
-};
+  js: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  ts: { name: 'javascript', typescript: true },
+  mts: { name: 'javascript', typescript: true },
+  cts: { name: 'javascript', typescript: true },
+  jsx: { name: 'javascript', jsx: true },
+  tsx: { name: 'javascript', typescript: true, jsx: true },
+}
 
-const el = ref<HTMLTextAreaElement>();
+const el = ref<HTMLTextAreaElement>()
 
-const cm = shallowRef<CodeMirror.EditorFromTextArea>();
+const cm = shallowRef<CodeMirror.EditorFromTextArea>()
 
-defineExpose({ cm });
+defineExpose({ cm })
 
 onMounted(async () => {
   cm.value = useCodeMirror(el, modelValue as unknown as Ref<string>, {
     ...attrs,
-    mode: modeMap[mode || ""] || mode,
+    mode: modeMap[mode || ''] || mode,
     readOnly: readOnly ? true : undefined,
     extraKeys: {
-      "Cmd-S": function (cm) {
-        emit("save", cm.getValue());
+      'Cmd-S': function (cm) {
+        emit('save', cm.getValue())
       },
-      "Ctrl-S": function (cm) {
-        emit("save", cm.getValue());
+      'Ctrl-S': function (cm) {
+        emit('save', cm.getValue())
       },
     },
-  });
-  cm.value.setSize("100%", "100%");
-  cm.value.clearHistory();
-  setTimeout(() => cm.value!.refresh(), 100);
-});
+  })
+  cm.value.setSize('100%', '100%')
+  cm.value.clearHistory()
+  setTimeout(() => cm.value!.refresh(), 100)
+})
 </script>
 
 <template>
diff --git a/packages/ui/client/components/ConnectionOverlay.vue b/packages/ui/client/components/ConnectionOverlay.vue
index 491092cff..9ca6a77ec 100644
--- a/packages/ui/client/components/ConnectionOverlay.vue
+++ b/packages/ui/client/components/ConnectionOverlay.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {
+  browserState,
   client,
   isConnected,
   isConnecting,
-  browserState,
-} from "~/composables/client";
+} from '~/composables/client'
 </script>
 
 <template>
diff --git a/packages/ui/client/components/Coverage.vue b/packages/ui/client/components/Coverage.vue
index 9135c1ec6..b1abd19e6 100644
--- a/packages/ui/client/components/Coverage.vue
+++ b/packages/ui/client/components/Coverage.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
 defineProps<{
-  src: string;
-}>();
+  src: string
+}>()
 </script>
 
 <template>
   <div h="full" flex="~ col">
     <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
       <div class="i-carbon:folder-details-reference" />
-      <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate
-        >Coverage</span
-      >
+      <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Coverage</span>
     </div>
     <div flex-auto py-1 bg-white>
       <iframe id="vitest-ui-coverage" :src="src" />
diff --git a/packages/ui/client/components/Dashboard.vue b/packages/ui/client/components/Dashboard.vue
index 96399555c..e4c67f5de 100644
--- a/packages/ui/client/components/Dashboard.vue
+++ b/packages/ui/client/components/Dashboard.vue
@@ -2,9 +2,7 @@
   <div h="full" flex="~ col">
     <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
       <div class="i-carbon-dashboard" />
-      <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate
-        >Dashboard</span
-      >
+      <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Dashboard</span>
     </div>
     <div class="scrolls" flex-auto py-1>
       <TestsFilesContainer />
diff --git a/packages/ui/client/components/DetailsPanel.vue b/packages/ui/client/components/DetailsPanel.vue
index 719f9c241..6ad9acdda 100644
--- a/packages/ui/client/components/DetailsPanel.vue
+++ b/packages/ui/client/components/DetailsPanel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 defineProps<{
-  color?: string;
-}>();
+  color?: string
+}>()
 
-const open = ref(true);
+const open = ref(true)
 </script>
 
 <template>
diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index 06083978b..9ed2fef45 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -1,96 +1,107 @@
 <script setup lang="ts">
 import {
+  browserState,
   client,
   current,
   currentLogs,
   isReport,
-  browserState,
-  config,
-} from "~/composables/client";
-import type { Params } from "~/composables/params";
-import { viewMode } from "~/composables/params";
-import type { ModuleGraph } from "~/composables/module-graph";
-import { getModuleGraph } from "~/composables/module-graph";
-import { getProjectNameColor } from "~/utils/task";
+} from '~/composables/client'
+import type { Params } from '~/composables/params'
+import { viewMode } from '~/composables/params'
+import type { ModuleGraph } from '~/composables/module-graph'
+import { getModuleGraph } from '~/composables/module-graph'
+import { getProjectNameColor } from '~/utils/task'
 
-const graph = ref<ModuleGraph>({ nodes: [], links: [] });
-const draft = ref(false);
-const hasGraphBeenDisplayed = ref(false);
-const loadingModuleGraph = ref(false);
-const currentFilepath = ref<string | undefined>(undefined);
+const graph = ref<ModuleGraph>({ nodes: [], links: [] })
+const draft = ref(false)
+const hasGraphBeenDisplayed = ref(false)
+const loadingModuleGraph = ref(false)
+const currentFilepath = ref<string | undefined>(undefined)
 
 const graphData = computed(() => {
-  const c = current.value;
-  if (!c || !c.filepath) return;
+  const c = current.value
+  if (!c || !c.filepath) {
+    return
+  }
 
   return {
     filepath: c.filepath,
-    projectName: c.file.projectName || "",
-  };
-});
+    projectName: c.file.projectName || '',
+  }
+})
 
 function open() {
-  const filePath = current.value?.filepath;
-  if (filePath) fetch(`/__open-in-editor?file=${encodeURIComponent(filePath)}`);
+  const filePath = current.value?.filepath
+  if (filePath) {
+    fetch(`/__open-in-editor?file=${encodeURIComponent(filePath)}`)
+  }
 }
 
-function changeViewMode(view: Params["view"]) {
-  if (view === "graph") hasGraphBeenDisplayed.value = true;
+function changeViewMode(view: Params['view']) {
+  if (view === 'graph') {
+    hasGraphBeenDisplayed.value = true
+  }
 
-  viewMode.value = view;
+  viewMode.value = view
 }
 const consoleCount = computed(() => {
-  return currentLogs.value?.reduce((s, { size }) => s + size, 0) ?? 0;
-});
+  return currentLogs.value?.reduce((s, { size }) => s + size, 0) ?? 0
+})
 
 function onDraft(value: boolean) {
-  draft.value = value;
+  draft.value = value
 }
 
 async function loadModuleGraph() {
   if (
-    loadingModuleGraph.value ||
-    graphData.value?.filepath === currentFilepath.value
-  )
-    return;
+    loadingModuleGraph.value
+    || graphData.value?.filepath === currentFilepath.value
+  ) {
+    return
+  }
 
-  loadingModuleGraph.value = true;
+  loadingModuleGraph.value = true
 
-  await nextTick();
+  await nextTick()
 
   try {
-    const gd = graphData.value;
-    if (!gd) return;
+    const gd = graphData.value
+    if (!gd) {
+      return
+    }
 
     if (
-      !currentFilepath.value ||
-      gd.filepath !== currentFilepath.value ||
-      (!graph.value.nodes.length && !graph.value.links.length)
+      !currentFilepath.value
+      || gd.filepath !== currentFilepath.value
+      || (!graph.value.nodes.length && !graph.value.links.length)
     ) {
       graph.value = getModuleGraph(
         await client.rpc.getModuleGraph(
           gd.projectName,
           gd.filepath,
-          !!browserState
+          !!browserState,
         ),
-        gd.filepath
-      );
-      currentFilepath.value = gd.filepath;
+        gd.filepath,
+      )
+      currentFilepath.value = gd.filepath
     }
-    changeViewMode("graph");
-  } finally {
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    loadingModuleGraph.value = false;
+    changeViewMode('graph')
+  }
+  finally {
+    await new Promise(resolve => setTimeout(resolve, 100))
+    loadingModuleGraph.value = false
   }
 }
 
 debouncedWatch(
   () => [graphData.value, viewMode.value] as const,
   ([, vm]) => {
-    if (vm === "graph") loadModuleGraph();
+    if (vm === 'graph') {
+      loadModuleGraph()
+    }
   },
-  { debounce: 100, immediate: true }
-);
+  { debounce: 100, immediate: true },
+)
 </script>
 
 <template>
@@ -137,7 +148,7 @@ debouncedWatch(
           data-testid="btn-report"
           @click="changeViewMode(null)"
         >
-          <span class="block w-1.4em h-1.4em i-carbon:report"></span>
+          <span class="block w-1.4em h-1.4em i-carbon:report" />
           Report
         </button>
         <button
@@ -150,11 +161,11 @@ debouncedWatch(
           <span
             v-if="loadingModuleGraph"
             class="block w-1.4em h-1.4em i-carbon:circle-dash animate-spin animate-2s"
-          ></span>
+          />
           <span
             v-else
             class="block w-1.4em h-1.4em i-carbon:chart-relationship"
-          ></span>
+          />
           Module Graph
         </button>
         <button
@@ -165,7 +176,7 @@ debouncedWatch(
           :class="{ 'tab-button-active': viewMode === 'editor' }"
           @click="changeViewMode('editor')"
         >
-          <span class="block w-1.4em h-1.4em i-carbon:code"></span>
+          <span class="block w-1.4em h-1.4em i-carbon:code" />
           {{ draft ? "*&#160;" : "" }}Code
         </button>
         <button
@@ -174,11 +185,11 @@ debouncedWatch(
           class="flex items-center gap-2"
           :class="{
             'tab-button-active': viewMode === 'console',
-            op20: viewMode !== 'console' && consoleCount === 0,
+            'op20': viewMode !== 'console' && consoleCount === 0,
           }"
           @click="changeViewMode('console')"
         >
-          <span class="block w-1.4em h-1.4em i-carbon:terminal-3270"></span>
+          <span class="block w-1.4em h-1.4em i-carbon:terminal-3270" />
           Console ({{ consoleCount }})
         </button>
       </div>
diff --git a/packages/ui/client/components/IconAction.vue b/packages/ui/client/components/IconAction.vue
index 461a8b1e0..7dab19e6b 100644
--- a/packages/ui/client/components/IconAction.vue
+++ b/packages/ui/client/components/IconAction.vue
@@ -13,6 +13,6 @@ defineProps({
     rounded-1
     p-0.5
   >
-    <span block :class="icon" op65 class="dark:op85 hover:op100"></span>
+    <span block :class="icon" op65 class="dark:op85 hover:op100" />
   </button>
 </template>
diff --git a/packages/ui/client/components/IconButton.vue b/packages/ui/client/components/IconButton.vue
index 8ece8f023..1e4794b63 100644
--- a/packages/ui/client/components/IconButton.vue
+++ b/packages/ui/client/components/IconButton.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 defineProps<{
-  icon?: `i-${string}` | `dark:i-${string}`;
-  title?: string;
-  disabled?: boolean;
-  active?: boolean;
-}>();
+  icon?: `i-${string}` | `dark:i-${string}`
+  title?: string
+  disabled?: boolean
+  active?: boolean
+}>()
 </script>
 
 <template>
@@ -15,7 +15,7 @@ defineProps<{
     rounded
     :disabled="disabled"
     :hover="disabled || active ? '' : 'bg-active op100'"
-    :class="['w-1.4em h-1.4em flex', { 'bg-gray-500:35 op100': active }]"
+    class="w-1.4em h-1.4em flex" :class="[{ 'bg-gray-500:35 op100': active }]"
   >
     <slot>
       <div :class="icon" ma />
diff --git a/packages/ui/client/components/Modal.vue b/packages/ui/client/components/Modal.vue
index 884f75f06..b3398e9a7 100644
--- a/packages/ui/client/components/Modal.vue
+++ b/packages/ui/client/components/Modal.vue
@@ -1,41 +1,41 @@
 <script setup lang="ts">
-const { direction = "bottom" } = defineProps<{
-  direction?: string;
-}>();
+const { direction = 'bottom' } = defineProps<{
+  direction?: string
+}>()
 
-const modelValue = defineModel<boolean>({ default: false });
+const modelValue = defineModel<boolean>({ default: false })
 
 const positionClass = computed(() => {
   switch (direction) {
-    case "bottom":
-      return "bottom-0 left-0 right-0 border-t";
-    case "top":
-      return "top-0 left-0 right-0 border-b";
-    case "left":
-      return "bottom-0 left-0 top-0 border-r";
-    case "right":
-      return "bottom-0 top-0 right-0 border-l";
+    case 'bottom':
+      return 'bottom-0 left-0 right-0 border-t'
+    case 'top':
+      return 'top-0 left-0 right-0 border-b'
+    case 'left':
+      return 'bottom-0 left-0 top-0 border-r'
+    case 'right':
+      return 'bottom-0 top-0 right-0 border-l'
     default:
-      return "";
+      return ''
   }
-});
+})
 
 const transform = computed(() => {
   switch (direction) {
-    case "bottom":
-      return "translateY(100%)";
-    case "top":
-      return "translateY(-100%)";
-    case "left":
-      return "translateX(-100%)";
-    case "right":
-      return "translateX(100%)";
+    case 'bottom':
+      return 'translateY(100%)'
+    case 'top':
+      return 'translateY(-100%)'
+    case 'left':
+      return 'translateX(-100%)'
+    case 'right':
+      return 'translateX(100%)'
     default:
-      return "";
+      return ''
   }
-});
+})
 
-const closeModal = () => (modelValue.value = false);
+const closeModal = () => (modelValue.value = false)
 </script>
 
 <template>
diff --git a/packages/ui/client/components/ModuleTransformResultView.vue b/packages/ui/client/components/ModuleTransformResultView.vue
index ea2205a99..625a5db80 100644
--- a/packages/ui/client/components/ModuleTransformResultView.vue
+++ b/packages/ui/client/components/ModuleTransformResultView.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import { client, browserState } from "~/composables/client";
+import { browserState, client } from '~/composables/client'
 
-const props = defineProps<{ id: string; projectName: string }>();
-const emit = defineEmits<{ (e: "close"): void }>();
+const props = defineProps<{ id: string; projectName: string }>()
+const emit = defineEmits<{ (e: 'close'): void }>()
 
 const result = asyncComputed(() =>
-  client.rpc.getTransformResult(props.projectName, props.id, !!browserState)
-);
-const ext = computed(() => props.id?.split(/\./g).pop() || "js");
+  client.rpc.getTransformResult(props.projectName, props.id, !!browserState),
+)
+const ext = computed(() => props.id?.split(/\./g).pop() || 'js')
 
-const source = computed(() => result.value?.source?.trim() || "");
+const source = computed(() => result.value?.source?.trim() || '')
 const code = computed(
   () =>
-    result.value?.code?.replace(/\/\/# sourceMappingURL=.*\n/, "").trim() || ""
-);
+    result.value?.code?.replace(/\/\/# sourceMappingURL=.*\n/, '').trim() || '',
+)
 const sourceMap = computed(() => ({
-  mappings: result.value?.map?.mappings ?? "",
-  version: result.value?.map?.version,
-}));
+  mappings: result.value?.map?.mappings ?? '',
+  version: (result.value?.map as any)?.version,
+}))
 
-onKeyStroke("Escape", () => {
-  emit("close");
-});
+onKeyStroke('Escape', () => {
+  emit('close')
+})
 // TODO: sourcemap https://evanw.github.io/source-map-visualization/
 </script>
 
@@ -41,11 +41,17 @@ onKeyStroke("Escape", () => {
         @click="emit('close')"
       />
     </div>
-    <div v-if="!result" p-5>No transform result found for this module.</div>
+    <div v-if="!result" p-5>
+      No transform result found for this module.
+    </div>
     <template v-else>
       <div grid="~ cols-2 rows-[min-content_auto]" overflow-hidden flex-auto>
-        <div p="x3 y-1" bg-overlay border="base b t r">Source</div>
-        <div p="x3 y-1" bg-overlay border="base b t">Transformed</div>
+        <div p="x3 y-1" bg-overlay border="base b t r">
+          Source
+        </div>
+        <div p="x3 y-1" bg-overlay border="base b t">
+          Transformed
+        </div>
         <CodeMirror
           h-full
           :model-value="source"
diff --git a/packages/ui/client/components/Navigation.vue b/packages/ui/client/components/Navigation.vue
index 7de9672be..920649c65 100644
--- a/packages/ui/client/components/Navigation.vue
+++ b/packages/ui/client/components/Navigation.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { hasFailedSnapshot } from "@vitest/ws-client";
-import { Tooltip as VueTooltip } from "floating-vue";
-import type { File, Task } from "vitest";
+import { hasFailedSnapshot } from '@vitest/ws-client'
+import { Tooltip as VueTooltip } from 'floating-vue'
+import type { File, Task } from 'vitest'
 import {
   coverageConfigured,
   coverageEnabled,
@@ -9,52 +9,51 @@ import {
   currentModule,
   dashboardVisible,
   disableCoverage,
+  openedTreeItems,
   showCoverage,
   showDashboard,
-} from "~/composables/navigation";
-import { client, findById } from "~/composables/client";
-import { isDark, toggleDark } from "~/composables";
-import { files, isReport, runAll } from "~/composables/client";
-import { activeFileId } from "~/composables/params";
-import { openedTreeItems } from "~/composables/navigation";
+} from '~/composables/navigation'
+import { client, files, findById, isReport, runAll } from '~/composables/client'
+import { isDark, toggleDark } from '~/composables'
+import { activeFileId } from '~/composables/params'
 
 const failedSnapshot = computed(
-  () => files.value && hasFailedSnapshot(files.value)
-);
+  () => files.value && hasFailedSnapshot(files.value),
+)
 function updateSnapshot() {
-  return client.rpc.updateSnapshot();
+  return client.rpc.updateSnapshot()
 }
 
-const toggleMode = computed(() => (isDark.value ? "light" : "dark"));
+const toggleMode = computed(() => (isDark.value ? 'light' : 'dark'))
 
 function onItemClick(task: Task) {
-  activeFileId.value = task.file.id;
-  currentModule.value = findById(task.file.id);
-  showDashboard(false);
+  activeFileId.value = task.file.id
+  currentModule.value = findById(task.file.id)
+  showDashboard(false)
 }
 
 async function onRunAll(files?: File[]) {
   if (coverageEnabled.value) {
-    disableCoverage.value = true;
-    await nextTick();
+    disableCoverage.value = true
+    await nextTick()
     if (coverageVisible.value) {
-      showDashboard(true);
-      await nextTick();
+      showDashboard(true)
+      await nextTick()
     }
   }
-  await runAll(files);
+  await runAll(files)
 }
 
 function collapseTests() {
-  openedTreeItems.value = [];
+  openedTreeItems.value = []
 }
 
 function expandTests() {
   files.value.forEach((file) => {
     if (!openedTreeItems.value.includes(file.id)) {
-      openedTreeItems.value.push(file.id);
+      openedTreeItems.value.push(file.id)
     }
-  });
+  })
 }
 </script>
 
@@ -65,11 +64,11 @@ function expandTests() {
     :tasks="files"
     :on-item-click="onItemClick"
     :group-by-type="true"
-    @run="onRunAll"
     :nested="true"
+    @run="onRunAll"
   >
     <template #header="{ filteredTests }">
-      <img w-6 h-6 src="/favicon.svg" alt="Vitest logo" />
+      <img w-6 h-6 src="/favicon.svg" alt="Vitest logo">
       <span font-light text-sm flex-1>Vitest</span>
       <div class="flex text-lg">
         <IconButton
diff --git a/packages/ui/client/components/ProgressBar.vue b/packages/ui/client/components/ProgressBar.vue
index 54e95e578..cb0f05a59 100644
--- a/packages/ui/client/components/ProgressBar.vue
+++ b/packages/ui/client/components/ProgressBar.vue
@@ -1,35 +1,39 @@
 <script setup lang="ts">
-import { files } from "~/composables/client";
-import { filesFailed, filesSuccess, finished } from "~/composables/summary";
+import { files } from '~/composables/client'
+import { filesFailed, filesSuccess, finished } from '~/composables/summary'
 
-const { width } = useWindowSize();
+const { width } = useWindowSize()
 const classes = computed(() => {
   // if there is no files, then in progress and gray
-  if (files.value.length === 0) return "!bg-gray-4 !dark:bg-gray-7 in-progress";
-  else if (!finished.value) return "in-progress";
+  if (files.value.length === 0) {
+    return '!bg-gray-4 !dark:bg-gray-7 in-progress'
+  }
+  else if (!finished.value) {
+    return 'in-progress'
+  }
 
-  return null;
-});
-const total = computed(() => files.value.length);
-const pass = computed(() => filesSuccess.value.length);
-const failed = computed(() => filesFailed.value.length);
+  return null
+})
+const total = computed(() => files.value.length)
+const pass = computed(() => filesSuccess.value.length)
+const failed = computed(() => filesFailed.value.length)
 
 const widthPass = computed(() => {
-  const t = unref(total);
-  return t > 0 ? (width.value * pass.value) / t : 0;
-});
+  const t = unref(total)
+  return t > 0 ? (width.value * pass.value) / t : 0
+})
 const widthFailed = computed(() => {
-  const t = unref(total);
-  return t > 0 ? (width.value * failed.value) / t : 0;
-});
+  const t = unref(total)
+  return t > 0 ? (width.value * failed.value) / t : 0
+})
 const pending = computed(() => {
-  const t = unref(total);
-  return t - failed.value - pass.value;
-});
+  const t = unref(total)
+  return t - failed.value - pass.value
+})
 const widthPending = computed(() => {
-  const t = unref(total);
-  return t > 0 ? (width.value * pending.value) / t : 0;
-});
+  const t = unref(total)
+  return t > 0 ? (width.value * pending.value) / t : 0
+})
 </script>
 
 <template>
diff --git a/packages/ui/client/components/StatusIcon.vue b/packages/ui/client/components/StatusIcon.vue
index 2475a2875..004cf8f16 100644
--- a/packages/ui/client/components/StatusIcon.vue
+++ b/packages/ui/client/components/StatusIcon.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { hasFailedSnapshot } from "@vitest/ws-client";
-import type { Task } from "vitest";
+import { hasFailedSnapshot } from '@vitest/ws-client'
+import type { Task } from 'vitest'
 
-defineProps<{ task: Task }>();
+defineProps<{ task: Task }>()
 </script>
 
 <template>
diff --git a/packages/ui/client/components/TaskItem.vue b/packages/ui/client/components/TaskItem.vue
index 6490824af..baa36e067 100644
--- a/packages/ui/client/components/TaskItem.vue
+++ b/packages/ui/client/components/TaskItem.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import type { Task } from "vitest";
-import { getProjectNameColor } from "~/utils/task";
-import { activeFileId } from "~/composables/params";
-import { isReport } from "~/constants";
+import type { Task } from 'vitest'
+import { getProjectNameColor } from '~/utils/task'
+import { activeFileId } from '~/composables/params'
+import { isReport } from '~/constants'
 
 const props = defineProps<{
-  task: Task;
-  opened: boolean;
-  failedSnapshot: boolean;
-}>();
+  task: Task
+  opened: boolean
+  failedSnapshot: boolean
+}>()
 
 const emit = defineEmits<{
-  run: [];
-  preview: [];
-  fixSnapshot: [];
-}>();
+  run: []
+  preview: []
+  fixSnapshot: []
+}>()
 
 const duration = computed(() => {
-  const { result } = props.task;
-  return result && Math.round(result.duration || 0);
-});
+  const { result } = props.task
+  return result && Math.round(result.duration || 0)
+})
 </script>
 
 <template>
diff --git a/packages/ui/client/components/TaskTree.vue b/packages/ui/client/components/TaskTree.vue
index bc98bd143..ea408cab9 100644
--- a/packages/ui/client/components/TaskTree.vue
+++ b/packages/ui/client/components/TaskTree.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { Task } from "vitest";
-import { nextTick } from "vue";
-import { runFiles, client } from "~/composables/client";
-import { caseInsensitiveMatch } from "~/utils/task";
-import { openedTreeItems, coverageEnabled } from "~/composables/navigation";
+import type { Task } from 'vitest'
+import { nextTick } from 'vue'
+import { client, runFiles } from '~/composables/client'
+import { caseInsensitiveMatch } from '~/utils/task'
+import { coverageEnabled, openedTreeItems } from '~/composables/navigation'
 
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 
 // TODO: better handling of "opened" - it means to forcefully open the tree item and set in TasksList right now
 const {
@@ -16,41 +16,42 @@ const {
   onItemClick,
   opened = false,
 } = defineProps<{
-  task: Task;
-  failedSnapshot: boolean;
-  indent?: number;
-  opened?: boolean;
-  nested?: boolean;
-  search?: string;
-  onItemClick?: (task: Task) => void;
-}>();
+  task: Task
+  failedSnapshot: boolean
+  indent?: number
+  opened?: boolean
+  nested?: boolean
+  search?: string
+  onItemClick?: (task: Task) => void
+}>()
 
 const isOpened = computed(
-  () => opened || openedTreeItems.value.includes(task.id)
-);
+  () => opened || openedTreeItems.value.includes(task.id),
+)
 
 function toggleOpen() {
   if (isOpened.value) {
-    const tasksIds = "tasks" in task ? task.tasks.map((t) => t.id) : [];
+    const tasksIds = 'tasks' in task ? task.tasks.map(t => t.id) : []
     openedTreeItems.value = openedTreeItems.value.filter(
-      (id) => id !== task.id && !tasksIds.includes(id)
-    );
-  } else {
-    openedTreeItems.value = [...openedTreeItems.value, task.id];
+      id => id !== task.id && !tasksIds.includes(id),
+    )
+  }
+  else {
+    openedTreeItems.value = [...openedTreeItems.value, task.id]
   }
 }
 
 async function onRun() {
-  onItemClick?.(task);
+  onItemClick?.(task)
   if (coverageEnabled.value) {
-    disableCoverage.value = true;
-    await nextTick();
+    disableCoverage.value = true
+    await nextTick()
   }
-  await runFiles([task.file]);
+  await runFiles([task.file])
 }
 
 function updateSnapshot() {
-  return client.rpc.updateSnapshot(task);
+  return client.rpc.updateSnapshot(task.file)
 }
 </script>
 
diff --git a/packages/ui/client/components/TasksList.vue b/packages/ui/client/components/TasksList.vue
index 4f100ca06..c99d6466b 100644
--- a/packages/ui/client/components/TasksList.vue
+++ b/packages/ui/client/components/TasksList.vue
@@ -1,93 +1,96 @@
 <script setup lang="ts">
-import type { ComputedRef } from "vue";
-import type { File, Task } from "vitest";
-import { findById, testRunState } from "~/composables/client";
-import { activeFileId } from "~/composables/params";
-import { caseInsensitiveMatch, isSuite } from "~/utils/task";
-import { hasFailedSnapshot } from "@vitest/ws-client";
+import type { ComputedRef } from 'vue'
+import type { File, Task } from 'vitest'
+import { hasFailedSnapshot } from '@vitest/ws-client'
+import { findById } from '~/composables/client'
+import { activeFileId } from '~/composables/params'
+import { caseInsensitiveMatch, isSuite } from '~/utils/task'
 
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 
-// eslint-disable-next-line unused-imports/no-unused-vars
 const {
   tasks,
-  indent = 0,
+  // indent = 0,
   nested = false,
   groupByType = false,
   onItemClick,
 } = defineProps<{
-  tasks: Task[];
-  indent?: number;
-  nested?: boolean;
-  groupByType?: boolean;
-  onItemClick?: (task: Task) => void;
-}>();
+  tasks: Task[]
+  indent?: number
+  nested?: boolean
+  groupByType?: boolean
+  onItemClick?: (task: Task) => void
+}>()
 
 const emit = defineEmits<{
-  (event: "run", files?: File[]): void;
-}>();
+  (event: 'run', files?: File[]): void
+}>()
 
-const search = ref<string>("");
-const searchBox = ref<HTMLInputElement | undefined>();
-const isFiltered = computed(() => search.value.trim() !== "");
+const search = ref<string>('')
+const searchBox = ref<HTMLInputElement | undefined>()
+const isFiltered = computed(() => search.value.trim() !== '')
 
 const filtered = computed(() => {
-  if (!search.value.trim()) return tasks;
+  if (!search.value.trim()) {
+    return tasks
+  }
 
-  return tasks.filter((task) => matchTasks([task], search.value));
-});
+  return tasks.filter(task => matchTasks([task], search.value))
+})
 const filteredTests: ComputedRef<File[]> = computed(() =>
   isFiltered.value
-    ? filtered.value.map((task) => findById(task.id)!).filter(Boolean)
-    : []
-);
+    ? filtered.value.map(task => findById(task.id)!).filter(Boolean)
+    : [],
+)
 
 const failed = computed(() =>
-  filtered.value.filter((task) => task.result?.state === "fail")
-);
+  filtered.value.filter(task => task.result?.state === 'fail'),
+)
 const success = computed(() =>
-  filtered.value.filter((task) => task.result?.state === "pass")
-);
+  filtered.value.filter(task => task.result?.state === 'pass'),
+)
 const skipped = computed(() =>
-  filtered.value.filter((task) => task.mode === "skip" || task.mode === "todo")
-);
+  filtered.value.filter(task => task.mode === 'skip' || task.mode === 'todo'),
+)
 const running = computed(() =>
   filtered.value.filter(
-    (task) =>
-      !failed.value.includes(task) &&
-      !success.value.includes(task) &&
-      !skipped.value.includes(task)
-  )
-);
+    task =>
+      !failed.value.includes(task)
+      && !success.value.includes(task)
+      && !skipped.value.includes(task),
+  ),
+)
 
-const disableClearSearch = computed(() => search.value === "");
+const disableClearSearch = computed(() => search.value === '')
 
-const throttledRunning = useThrottle(running, 250);
+const throttledRunning = useThrottle(running, 250)
 
 function clearSearch(focus: boolean) {
-  search.value = "";
-  focus && searchBox.value?.focus();
+  search.value = ''
+  focus && searchBox.value?.focus()
 }
 
 function matchTasks(tasks: Task[], search: string): boolean {
-  let result = false;
+  let result = false
 
   for (let i = 0; i < tasks.length; i++) {
-    const task = tasks[i];
+    const task = tasks[i]
 
     if (caseInsensitiveMatch(task.name, search)) {
-      result = true;
-      break;
+      result = true
+      break
     }
 
     // walk whole task tree
     if (isSuite(task) && task.tasks) {
-      result = matchTasks(task.tasks, search);
-      if (result) break;
+      result = matchTasks(task.tasks, search)
+      if (result) {
+        break
+      }
     }
   }
 
-  return result;
+  return result
 }
 </script>
 
@@ -115,7 +118,7 @@ function matchTasks(tasks: Task[], search: string): boolean {
           :op="search.length ? '100' : '50'"
           @keydown.esc="clearSearch(false)"
           @keydown.enter="emit('run', isFiltered ? filteredTests : undefined)"
-        />
+        >
         <IconButton
           v-tooltip.bottom="'Clear search'"
           :disabled="disableClearSearch"
@@ -130,7 +133,9 @@ function matchTasks(tasks: Task[], search: string): boolean {
       <template v-if="groupByType">
         <DetailsPanel v-if="failed.length">
           <template #summary>
-            <div text-red5>FAIL ({{ failed.length }})</div>
+            <div text-red5>
+              FAIL ({{ failed.length }})
+            </div>
           </template>
           <TaskTree
             v-for="task in failed"
@@ -146,7 +151,9 @@ function matchTasks(tasks: Task[], search: string): boolean {
         </DetailsPanel>
         <DetailsPanel v-if="throttledRunning.length">
           <template #summary>
-            <div text-yellow5>RUNNING ({{ throttledRunning.length }})</div>
+            <div text-yellow5>
+              RUNNING ({{ throttledRunning.length }})
+            </div>
           </template>
           <TaskTree
             v-for="task in throttledRunning"
@@ -162,7 +169,9 @@ function matchTasks(tasks: Task[], search: string): boolean {
         </DetailsPanel>
         <DetailsPanel v-if="success.length">
           <template #summary>
-            <div text-green5>PASS ({{ success.length }})</div>
+            <div text-green5>
+              PASS ({{ success.length }})
+            </div>
           </template>
           <TaskTree
             v-for="task in success"
@@ -178,7 +187,9 @@ function matchTasks(tasks: Task[], search: string): boolean {
         </DetailsPanel>
         <DetailsPanel v-if="skipped.length">
           <template #summary>
-            <div class="text-purple5:50">SKIP ({{ skipped.length }})</div>
+            <div class="text-purple5:50">
+              SKIP ({{ skipped.length }})
+            </div>
           </template>
           <TaskTree
             v-for="task in skipped"
@@ -211,7 +222,9 @@ function matchTasks(tasks: Task[], search: string): boolean {
       <!-- empty-state -->
       <template v-if="isFiltered && filtered.length === 0">
         <div flex="~ col" items-center p="x4 y4" font-light>
-          <div op30>No matched test</div>
+          <div op30>
+            No matched test
+          </div>
           <button
             font-light
             op="50 hover:100"
diff --git a/packages/ui/client/components/dashboard/ErrorEntry.vue b/packages/ui/client/components/dashboard/ErrorEntry.vue
index e9a0815c3..295f4791b 100644
--- a/packages/ui/client/components/dashboard/ErrorEntry.vue
+++ b/packages/ui/client/components/dashboard/ErrorEntry.vue
@@ -14,7 +14,7 @@ defineProps<{
     {{ error.message }}
   </h4>
   <p v-if="error.stacks?.length" class="scrolls" text="xs" font-mono mx-1 my-2 pb-2 overflow-auto>
-    <span v-for="(frame, i) in error.stacks" whitespace-pre :font-bold="i === 0 ? '' : null">❯ {{ frame.method}} {{ frame.file }}:<span text="red500/70">{{ frame.line }}:{{ frame.column }}</span><br></span>
+    <span v-for="(frame, i) in error.stacks" :key="i" whitespace-pre :font-bold="i === 0 ? '' : null">❯ {{ frame.method }} {{ frame.file }}:<span text="red500/70">{{ frame.line }}:{{ frame.column }}</span><br></span>
   </p>
   <p v-if="error.VITEST_TEST_PATH" text="sm" mb-2>
     This error originated in <span font-bold>{{ error.VITEST_TEST_PATH }}</span> test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
diff --git a/packages/ui/client/components/dashboard/TestFilesEntry.vue b/packages/ui/client/components/dashboard/TestFilesEntry.vue
index 81623f4e5..28d365ea2 100644
--- a/packages/ui/client/components/dashboard/TestFilesEntry.vue
+++ b/packages/ui/client/components/dashboard/TestFilesEntry.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { files, unhandledErrors } from "~/composables/client";
+import { files, unhandledErrors } from '~/composables/client'
 import {
   filesFailed,
   filesSnapshotFailed,
   filesSuccess,
   time,
-} from "~/composables/summary";
+} from '~/composables/summary'
 </script>
 
 <template>
@@ -66,12 +66,14 @@ import {
   </div>
   <template v-if="unhandledErrors.length">
     <div bg="red500/10" text="red500" p="x3 y2" max-w-xl m-2 rounded>
-      <h3 text-center mb-2>Unhandled Errors</h3>
+      <h3 text-center mb-2>
+        Unhandled Errors
+      </h3>
       <p text="sm" font-thin mb-2 data-testid="unhandled-errors">
         Vitest caught {{ unhandledErrors.length }} error{{
           unhandledErrors.length > 1 ? "s" : ""
         }}
-        during the test run.<br />
+        during the test run.<br>
         This might cause false positive tests. Resolve unhandled errors to make
         sure your tests are not affected.
       </p>
@@ -84,8 +86,10 @@ import {
         open:max-h-52
         overflow-auto
       >
-        <summary font-bold cursor-pointer>Errors</summary>
-        <ErrorEntry v-for="e in unhandledErrors" :error="e" />
+        <summary font-bold cursor-pointer>
+          Errors
+        </summary>
+        <ErrorEntry v-for="(e, idx) in unhandledErrors" :key="idx" :error="e" />
       </details>
     </div>
   </template>
diff --git a/packages/ui/client/components/dashboard/TestsEntry.vue b/packages/ui/client/components/dashboard/TestsEntry.vue
index e2ee83e65..c7fdd61e0 100644
--- a/packages/ui/client/components/dashboard/TestsEntry.vue
+++ b/packages/ui/client/components/dashboard/TestsEntry.vue
@@ -5,13 +5,13 @@ import {
   testsSkipped,
   testsSuccess,
   testsTodo,
-} from "~/composables/summary";
+} from '~/composables/summary'
 
-const total = computed(() => tests.value.length);
-const pass = computed(() => testsSuccess.value.length);
-const failed = computed(() => testsFailed.value.length);
-const skipped = computed(() => testsSkipped.value.length);
-const todo = computed(() => testsTodo.value.length);
+const total = computed(() => tests.value.length)
+const pass = computed(() => testsSuccess.value.length)
+const failed = computed(() => testsFailed.value.length)
+const skipped = computed(() => testsSkipped.value.length)
+const todo = computed(() => testsTodo.value.length)
 // const pending = computed(() => {
 //   const t = unref(total)
 //   return t - failed.value - pass.value
@@ -21,34 +21,44 @@ const todo = computed(() => testsTodo.value.length);
 <template>
   <div flex="~ wrap" justify-evenly gap-2 p="x-4" relative>
     <DashboardEntry text-green5 data-testid="pass-entry">
-      <template #header> Pass </template>
+      <template #header>
+        Pass
+      </template>
       <template #body>
         {{ pass }}
       </template>
     </DashboardEntry>
     <DashboardEntry
-      :class="{ 'text-red5': failed, op50: !failed }"
+      :class="{ 'text-red5': failed, 'op50': !failed }"
       data-testid="fail-entry"
     >
-      <template #header> Fail </template>
+      <template #header>
+        Fail
+      </template>
       <template #body>
         {{ failed }}
       </template>
     </DashboardEntry>
     <DashboardEntry v-if="skipped" op50 data-testid="skipped-entry">
-      <template #header> Skip </template>
+      <template #header>
+        Skip
+      </template>
       <template #body>
         {{ skipped }}
       </template>
     </DashboardEntry>
     <DashboardEntry v-if="todo" op50 data-testid="todo-entry">
-      <template #header> Todo </template>
+      <template #header>
+        Todo
+      </template>
       <template #body>
         {{ todo }}
       </template>
     </DashboardEntry>
     <DashboardEntry :tail="true" data-testid="total-entry">
-      <template #header> Total </template>
+      <template #header>
+        Total
+      </template>
       <template #body>
         {{ total }}
       </template>
diff --git a/packages/ui/client/components/views/ViewConsoleOutput.vue b/packages/ui/client/components/views/ViewConsoleOutput.vue
index f98016aea..fbcf78a3e 100644
--- a/packages/ui/client/components/views/ViewConsoleOutput.vue
+++ b/packages/ui/client/components/views/ViewConsoleOutput.vue
@@ -3,7 +3,7 @@ import { getNames } from '@vitest/ws-client'
 import { client, currentLogs as logs } from '~/composables/client'
 import { isDark } from '~/composables/dark'
 import { createAnsiToHtmlFilter } from '~/composables/error'
-import { escapeHtml } from "~/utils/escape"
+import { escapeHtml } from '~/utils/escape'
 
 const formattedLogs = computed(() => {
   const data = logs.value
@@ -11,12 +11,15 @@ const formattedLogs = computed(() => {
     const filter = createAnsiToHtmlFilter(isDark.value)
     return data.map(({ taskId, type, time, content }) => ({ taskId, type, time, content: filter.toHtml(escapeHtml(content)) }))
   }
+
+  return undefined
 })
 
 function getTaskName(id?: string) {
   const task = id && client.state.idMap.get(id)
-  if (task && 'filepath' in task)
+  if (task && 'filepath' in task) {
     return task.name
+  }
   return (task ? getNames(task).slice(1).join(' > ') : '-') || '-'
 }
 </script>
diff --git a/packages/ui/client/components/views/ViewConsoleOutputEntry.vue b/packages/ui/client/components/views/ViewConsoleOutputEntry.vue
index 098ee37f4..c2e932838 100644
--- a/packages/ui/client/components/views/ViewConsoleOutputEntry.vue
+++ b/packages/ui/client/components/views/ViewConsoleOutputEntry.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { UserConsoleLog } from "vitest";
+import type { UserConsoleLog } from 'vitest'
 
 defineProps<{
-  taskName: string;
-  type: UserConsoleLog["type"];
-  time: UserConsoleLog["time"];
-  content: UserConsoleLog["content"];
-}>();
+  taskName: string
+  type: UserConsoleLog['type']
+  time: UserConsoleLog['time']
+  content: UserConsoleLog['content']
+}>()
 
 function formatTime(t: number) {
-  return new Date(t).toLocaleTimeString();
+  return new Date(t).toLocaleTimeString()
 }
 </script>
 
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index c2f52b225..2a6d41865 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -1,144 +1,147 @@
 <script setup lang="ts">
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
-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 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'
 
 const props = defineProps<{
-  file?: File;
-}>();
+  file?: File
+}>()
 
-const emit = defineEmits<{ (event: "draft", value: boolean): void }>();
+const emit = defineEmits<{ (event: 'draft', value: boolean): void }>()
 
-const code = ref("");
-const serverCode = shallowRef<string | undefined>(undefined);
-const draft = ref(false);
+const code = ref('')
+const serverCode = shallowRef<string | undefined>(undefined)
+const draft = ref(false)
 
 watch(
   () => props.file,
   async () => {
     if (!props.file || !props.file?.filepath) {
-      code.value = "";
-      serverCode.value = code.value;
-      draft.value = false;
-      return;
+      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;
+    code.value = (await client.rpc.readTestFile(props.file.filepath)) || ''
+    serverCode.value = code.value
+    draft.value = false
   },
-  { immediate: true }
-);
+  { immediate: true },
+)
 
-const ext = computed(() => props.file?.filepath?.split(/\./g).pop() || "js");
-const editor = ref<any>();
+const ext = computed(() => props.file?.filepath?.split(/\./g).pop() || 'js')
+const editor = ref<any>()
 
 const cm = computed<CodeMirror.EditorFromTextArea | undefined>(
-  () => editor.value?.cm
-);
+  () => editor.value?.cm,
+)
 const failed = computed(
-  () => props.file?.tasks.filter((i) => i.result?.state === "fail") || []
-);
+  () => props.file?.tasks.filter(i => i.result?.state === 'fail') || [],
+)
 
-const widgets: CodeMirror.LineWidget[] = [];
-const handles: CodeMirror.LineHandle[] = [];
-const listeners: [el: HTMLSpanElement, l: EventListener, t: () => void][] = [];
+const widgets: CodeMirror.LineWidget[] = []
+const handles: CodeMirror.LineHandle[] = []
+const listeners: [el: HTMLSpanElement, l: EventListener, t: () => void][] = []
 
-const hasBeenEdited = ref(false);
+const hasBeenEdited = ref(false)
 
 function clearListeners() {
   listeners.forEach(([el, l, t]) => {
-    el.removeEventListener("click", l);
-    t();
-  });
-  listeners.length = 0;
+    el.removeEventListener('click', l)
+    t()
+  })
+  listeners.length = 0
 }
 
 useResizeObserver(editor, () => {
-  cm.value?.refresh();
-});
+  cm.value?.refresh()
+})
 
 function codemirrorChanges() {
-  draft.value = serverCode.value !== cm.value!.getValue();
+  draft.value = serverCode.value !== cm.value!.getValue()
 }
 
 watch(
   draft,
   (d) => {
-    emit("draft", d);
+    emit('draft', d)
   },
-  { immediate: true }
-);
+  { immediate: true },
+)
 
 function createErrorElement(e: ErrorWithDiff) {
   const stacks = (e?.stacks || []).filter(
-    (i) => i.file && i.file === props.file?.filepath
-  );
-  const stack = stacks?.[0];
-  if (!stack) return;
-  const div = document.createElement("div");
-  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}: ${
-    e?.message || ""
-  }`;
-  div.appendChild(pre);
-  const span = document.createElement("span");
-  span.className =
-    "i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer min-w-1em min-h-1em";
-  span.tabIndex = 0;
-  span.ariaLabel = "Open in Editor";
+    i => i.file && i.file === props.file?.filepath,
+  )
+  const stack = stacks?.[0]
+  if (!stack) {
+    return
+  }
+  const div = document.createElement('div')
+  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}: ${
+    e?.message || ''
+  }`
+  div.appendChild(pre)
+  const span = document.createElement('span')
+  span.className
+    = 'i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer min-w-1em min-h-1em'
+  span.tabIndex = 0
+  span.ariaLabel = 'Open in Editor'
   createTooltip(
     span,
     {
-      content: "Open in Editor",
-      placement: "bottom",
+      content: 'Open in Editor',
+      placement: 'bottom',
     },
-    false
-  );
+    false,
+  )
   const el: EventListener = async () => {
-    await openInEditor(stack.file, stack.line, stack.column);
-  };
-  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));
+    await openInEditor(stack.file, stack.line, stack.column)
+  }
+  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))
 }
 
 watch(
   [cm, failed],
   ([cmValue]) => {
     if (!cmValue) {
-      clearListeners();
-      return;
+      clearListeners()
+      return
     }
 
     setTimeout(() => {
-      clearListeners();
-      widgets.forEach((widget) => widget.clear());
-      handles.forEach((h) => cm.value?.removeLineClass(h, "wrap"));
-      widgets.length = 0;
-      handles.length = 0;
+      clearListeners()
+      widgets.forEach(widget => widget.clear())
+      handles.forEach(h => cm.value?.removeLineClass(h, 'wrap'))
+      widgets.length = 0
+      handles.length = 0
 
-      cmValue.on("changes", codemirrorChanges);
+      cmValue.on('changes', codemirrorChanges)
 
       failed.value.forEach((i) => {
-        i.result?.errors?.forEach(createErrorElement);
-      });
-      if (!hasBeenEdited.value) cmValue.clearHistory(); // Prevent getting access to initial state
-    }, 100);
+        i.result?.errors?.forEach(createErrorElement)
+      })
+      if (!hasBeenEdited.value) {
+        cmValue.clearHistory()
+      } // Prevent getting access to initial state
+    }, 100)
   },
-  { flush: "post" }
-);
+  { flush: 'post' },
+)
 
 async function onSave(content: string) {
-  hasBeenEdited.value = true;
-  await client.rpc.saveTestFile(props.file!.filepath, content);
-  serverCode.value = content;
-  draft.value = false;
+  hasBeenEdited.value = true
+  await client.rpc.saveTestFile(props.file!.filepath, content)
+  serverCode.value = content
+  draft.value = false
 }
 </script>
 
diff --git a/packages/ui/client/components/views/ViewModuleGraph.vue b/packages/ui/client/components/views/ViewModuleGraph.vue
index fc40507b0..2dad7fc3b 100644
--- a/packages/ui/client/components/views/ViewModuleGraph.vue
+++ b/packages/ui/client/components/views/ViewModuleGraph.vue
@@ -1,64 +1,67 @@
 <script setup lang="ts">
-import type { ResizeContext } from "d3-graph-controller";
+import type { ResizeContext } from 'd3-graph-controller'
 import {
   GraphController,
   Markers,
   PositionInitializers,
   defineGraphConfig,
-} from "d3-graph-controller";
-import type { Selection } from "d3-selection";
-import { isReport } from "~/composables/client";
+} from 'd3-graph-controller'
+import type { Selection } from 'd3-selection'
+import { isReport } from '~/composables/client'
 import type {
   ModuleGraph,
   ModuleGraphController,
   ModuleLink,
   ModuleNode,
   ModuleType,
-} from "~/composables/module-graph";
+} from '~/composables/module-graph'
 
 const props = defineProps<{
-  graph: ModuleGraph;
-  projectName: string;
-}>();
+  graph: ModuleGraph
+  projectName: string
+}>()
 
-const { graph } = toRefs(props);
+const { graph } = toRefs(props)
 
-const el = ref<HTMLDivElement>();
+const el = ref<HTMLDivElement>()
 
-const modalShow = ref(false);
-const selectedModule = ref<string | null>();
-const controller = ref<ModuleGraphController | undefined>();
+const modalShow = ref(false)
+const selectedModule = ref<string | null>()
+const controller = ref<ModuleGraphController | undefined>()
 
 watchEffect(
   () => {
-    if (modalShow.value === false)
-      setTimeout(() => (selectedModule.value = undefined), 300);
+    if (modalShow.value === false) {
+      setTimeout(() => (selectedModule.value = undefined), 300)
+    }
   },
-  { flush: "post" }
-);
+  { flush: 'post' },
+)
 
 onMounted(() => {
-  resetGraphController();
-});
+  resetGraphController()
+})
 
 onUnmounted(() => {
-  controller.value?.shutdown();
-});
+  controller.value?.shutdown()
+})
 
-watch(graph, resetGraphController);
+watch(graph, resetGraphController)
 
 function setFilter(name: ModuleType, value: boolean) {
-  controller.value?.filterNodesByType(value, name);
+  controller.value?.filterNodesByType(value, name)
 }
 
 function setSelectedModule(id: string) {
-  selectedModule.value = id;
-  modalShow.value = true;
+  selectedModule.value = id
+  modalShow.value = true
 }
 
 function resetGraphController() {
-  controller.value?.shutdown();
-  if (!graph.value || !el.value) return;
+  controller.value?.shutdown()
+  if (!graph.value || !el.value) {
+    return
+  }
 
   controller.value = new GraphController(
     el.value!,
@@ -71,9 +74,11 @@ function resetGraphController() {
         alphas: {
           initialize: 1,
           resize: ({ newHeight, newWidth }: ResizeContext) => {
-            const willBeHidden = newHeight === 0 && newWidth === 0;
-            if (willBeHidden) return 0;
-            return 0.25;
+            const willBeHidden = newHeight === 0 && newWidth === 0
+            if (willBeHidden) {
+              return 0
+            }
+            return 0.25
           },
         },
         forces: {
@@ -97,37 +102,51 @@ function resetGraphController() {
         min: 0.5,
         max: 2,
       },
-    })
-  );
+    }),
+  )
 }
 
 function bindOnClick(
-  selection: Selection<SVGCircleElement, ModuleNode, SVGGElement, undefined>
+  selection: Selection<SVGCircleElement, ModuleNode, SVGGElement, undefined>,
 ) {
-  if (isReport) return;
+  if (isReport) {
+    return
+  }
   // Only trigger on left-click and primary touch
-  const isValidClick = (event: PointerEvent) => event.button === 0;
+  const isValidClick = (event: PointerEvent) => event.button === 0
 
-  let px = 0;
-  let py = 0;
-  let pt = 0;
+  let px = 0
+  let py = 0
+  let pt = 0
 
   selection
-    .on("pointerdown", (event: PointerEvent, node) => {
-      if (node.type === "external") return;
-      if (!node.x || !node.y || !isValidClick(event)) return;
-      px = node.x;
-      py = node.y;
-      pt = Date.now();
+    .on('pointerdown', (event: PointerEvent, node) => {
+      if (node.type === 'external') {
+        return
+      }
+      if (!node.x || !node.y || !isValidClick(event)) {
+        return
+      }
+      px = node.x
+      py = node.y
+      pt = Date.now()
+    })
+    .on('pointerup', (event: PointerEvent, node: ModuleNode) => {
+      if (node.type === 'external') {
+        return
+      }
+      if (!node.x || !node.y || !isValidClick(event)) {
+        return
+      }
+      if (Date.now() - pt > 500) {
+        return
+      }
+      const dx = node.x - px
+      const dy = node.y - py
+      if (dx ** 2 + dy ** 2 < 100) {
+        setSelectedModule(node.id)
+      }
     })
-    .on("pointerup", (event: PointerEvent, node: ModuleNode) => {
-      if (node.type === "external") return;
-      if (!node.x || !node.y || !isValidClick(event)) return;
-      if (Date.now() - pt > 500) return;
-      const dx = node.x - px;
-      const dy = node.y - py;
-      if (dx ** 2 + dy ** 2 < 100) setSelectedModule(node.id);
-    });
 }
 </script>
 
@@ -147,7 +166,7 @@ function bindOnClick(
             type="checkbox"
             :checked="controller?.nodeTypeFilter.includes(node)"
             @change="setFilter(node, ($event as any).target.checked)"
-          />
+          >
           <label
             font-light
             text-sm
@@ -158,8 +177,7 @@ function bindOnClick(
             :for="`type-${node}`"
             border-b-2
             :style="{ 'border-color': `var(--color-node-${node})` }"
-            >{{ node }} Modules</label
-          >
+          >{{ node }} Modules</label>
         </div>
         <div flex-auto />
         <div>
diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index 8f3fe01d8..6a062f9eb 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -1,95 +1,109 @@
 <script setup lang="ts">
-import type { ErrorWithDiff, File, Suite, Task } from "vitest";
-import type Convert from "ansi-to-html";
-import ViewReportError from "./ViewReportError.vue";
-import { isDark } from "~/composables/dark";
-import { createAnsiToHtmlFilter } from "~/composables/error";
-import { config } from "~/composables/client";
-import { escapeHtml } from "~/utils/escape";
+import type { ErrorWithDiff, File, Suite, Task } from 'vitest'
+import type Convert from 'ansi-to-html'
+import ViewReportError from './ViewReportError.vue'
+import { isDark } from '~/composables/dark'
+import { createAnsiToHtmlFilter } from '~/composables/error'
+import { config } from '~/composables/client'
+import { escapeHtml } from '~/utils/escape'
 
 const props = defineProps<{
-  file?: File;
-}>();
+  file?: File
+}>()
 
 type LeveledTask = Task & {
-  level: number;
-};
+  level: number
+}
 
 function collectFailed(task: Task, level: number): LeveledTask[] {
-  if (task.result?.state !== "fail") return [];
+  if (task.result?.state !== 'fail') {
+    return []
+  }
 
-  if (task.type === "test" || task.type === "custom")
-    return [{ ...task, level }];
-  else
+  if (task.type === 'test' || task.type === 'custom') {
+    return [{ ...task, level }]
+  }
+  else {
     return [
       { ...task, level },
-      ...task.tasks.flatMap((t) => collectFailed(t, level + 1)),
-    ];
+      ...task.tasks.flatMap(t => collectFailed(t, level + 1)),
+    ]
+  }
 }
 
 function createHtmlError(filter: Convert, error: ErrorWithDiff) {
-  let htmlError = "";
-  if (error.message?.includes("\x1B"))
+  let htmlError = ''
+  if (error.message?.includes('\x1B')) {
     htmlError = `<b>${error.nameStr || error.name}</b>: ${filter.toHtml(
-      escapeHtml(error.message)
-    )}`;
+      escapeHtml(error.message),
+    )}`
+  }
 
-  const startStrWithX1B = error.stackStr?.includes("\x1B");
-  if (startStrWithX1B || error.stack?.includes("\x1B")) {
-    if (htmlError.length > 0)
+  const startStrWithX1B = error.stackStr?.includes('\x1B')
+  if (startStrWithX1B || error.stack?.includes('\x1B')) {
+    if (htmlError.length > 0) {
       htmlError += filter.toHtml(
-        escapeHtml((startStrWithX1B ? error.stackStr : error.stack) as string)
-      );
-    else
+        escapeHtml((startStrWithX1B ? error.stackStr : error.stack) as string),
+      )
+    }
+    else {
       htmlError = `<b>${error.nameStr || error.name}</b>: ${
         error.message
       }${filter.toHtml(
-        escapeHtml((startStrWithX1B ? error.stackStr : error.stack) as string)
-      )}`;
+        escapeHtml((startStrWithX1B ? error.stackStr : error.stack) as string),
+      )}`
+    }
   }
 
-  if (htmlError.length > 0) return htmlError;
-  return null;
+  if (htmlError.length > 0) {
+    return htmlError
+  }
+  return null
 }
 
 function mapLeveledTaskStacks(dark: boolean, tasks: LeveledTask[]) {
-  const filter = createAnsiToHtmlFilter(dark);
+  const filter = createAnsiToHtmlFilter(dark)
   return tasks.map((t) => {
-    const result = t.result;
-    if (!result) return 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;
-  });
+      ?.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 fileError = result?.errors?.[0];
+  const file = props.file
+  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 } = {
       id: file!.id,
+      file: file!,
       name: file!.name,
       level: 0,
-      type: "suite",
-      mode: "run",
+      type: 'suite',
+      mode: 'run',
       meta: {},
       tasks: [],
       result,
-    };
-    failedFlatMap.unshift(fileErrorTask);
+    }
+    failedFlatMap.unshift(fileErrorTask)
   }
   return failedFlatMap.length > 0
     ? mapLeveledTaskStacks(isDark.value, failedFlatMap)
-    : failedFlatMap;
-});
+    : failedFlatMap
+})
 </script>
 
 <template>
diff --git a/packages/ui/client/components/views/ViewReportError.vue b/packages/ui/client/components/views/ViewReportError.vue
index 86af6811c..317b3e8f0 100644
--- a/packages/ui/client/components/views/ViewReportError.vue
+++ b/packages/ui/client/components/views/ViewReportError.vue
@@ -1,30 +1,32 @@
 <script setup lang="ts">
-import type { ErrorWithDiff } from "vitest";
-import { openInEditor, shouldOpenInEditor } from "~/composables/error";
-import { escapeHtml } from "~/utils/escape";
+import type { ErrorWithDiff } from 'vitest'
+import { openInEditor, shouldOpenInEditor } from '~/composables/error'
+import { escapeHtml } from '~/utils/escape'
 
 const props = defineProps<{
-  root: string;
-  filename?: string;
-  error: ErrorWithDiff;
-}>();
+  root: string
+  filename?: string
+  error: ErrorWithDiff
+}>()
 
 function relative(p: string) {
-  if (p.startsWith(props.root)) return p.slice(props.root.length);
-  return p;
+  if (p.startsWith(props.root)) {
+    return p.slice(props.root.length)
+  }
+  return p
 }
 
-const filter = computed(() => createAnsiToHtmlFilter(isDark.value));
+const filter = computed(() => createAnsiToHtmlFilter(isDark.value))
 
 const isDiffShowable = computed(() => {
-  return !!props.error?.diff;
-});
+  return !!props.error?.diff
+})
 
 const diff = computed(() =>
   props.error.diff
     ? filter.value.toHtml(escapeHtml(props.error.diff))
-    : undefined
-);
+    : undefined,
+)
 </script>
 
 <template>
@@ -37,8 +39,7 @@ const diff = computed(() =>
       data-testid="stack"
     >
       <pre>
- - {{ relative(stack.file) }}:{{ stack.line }}:{{ stack.column }}</pre
-      >
+ - {{ relative(stack.file) }}:{{ stack.line }}:{{ stack.column }}</pre>
       <div
         v-if="shouldOpenInEditor(stack.file, filename)"
         v-tooltip.bottom="'Open in Editor'"
diff --git a/packages/ui/client/pages/index.vue b/packages/ui/client/pages/index.vue
index 2dc1dff91..f4f8f028c 100644
--- a/packages/ui/client/pages/index.vue
+++ b/packages/ui/client/pages/index.vue
@@ -1,42 +1,42 @@
 <script setup lang="ts">
 // @ts-expect-error missing types
-import { Pane, Splitpanes } from "splitpanes";
-import { browserState } from "~/composables/client";
+import { Pane, Splitpanes } from 'splitpanes'
+import { browserState } from '~/composables/client'
 import {
   coverageUrl,
   coverageVisible,
-  initializeNavigation,
   detailSizes,
-} from "~/composables/navigation";
-import { onBrowserPanelResizing } from "~/composables/browser";
+  initializeNavigation,
+} from '~/composables/navigation'
+import { onBrowserPanelResizing } from '~/composables/browser'
 
-const dashboardVisible = initializeNavigation();
+const dashboardVisible = initializeNavigation()
 
 const mainSizes = useLocalStorage<[left: number, right: number]>(
-  "vitest-ui_splitpanes-mainSizes",
+  'vitest-ui_splitpanes-mainSizes',
   [33, 67],
   {
     initOnMounted: true,
-  }
-);
+  },
+)
 
 const onMainResized = useDebounceFn((event: { size: number }[]) => {
   event.forEach((e, i) => {
-    mainSizes.value[i] = e.size;
-  });
-}, 0);
+    mainSizes.value[i] = e.size
+  })
+}, 0)
 const onModuleResized = useDebounceFn((event: { size: number }[]) => {
   event.forEach((e, i) => {
-    detailSizes.value[i] = e.size;
-  });
-  onBrowserPanelResizing(false);
-}, 0);
+    detailSizes.value[i] = e.size
+  })
+  onBrowserPanelResizing(false)
+}, 0)
 
 function resizeMain() {
-  const width = window.innerWidth;
-  const panelWidth = Math.min(width / 3, 300);
-  mainSizes.value[0] = (100 * panelWidth) / width;
-  mainSizes.value[1] = 100 - mainSizes.value[0];
+  const width = window.innerWidth
+  const panelWidth = Math.min(width / 3, 300)
+  mainSizes.value[0] = (100 * panelWidth) / width
+  mainSizes.value[1] = 100 - mainSizes.value[0]
 }
 </script>
 
@@ -58,14 +58,14 @@ function resizeMain() {
           <Coverage
             v-else-if="coverageVisible"
             key="coverage"
-            :src="coverageUrl"
+            :src="coverageUrl!"
           />
           <FileDetails v-else key="details" />
         </transition>
         <Splitpanes
           v-else
-          key="browser-detail"
           id="details-splitpanes"
+          key="browser-detail"
           @resize="onBrowserPanelResizing(true)"
           @resized="onModuleResized"
         >
@@ -77,7 +77,7 @@ function resizeMain() {
             <Coverage
               v-else-if="coverageVisible"
               key="coverage"
-              :src="coverageUrl"
+              :src="coverageUrl!"
             />
             <FileDetails v-else key="details" />
           </Pane>
diff --git a/test/coverage-test/coverage-report-tests/__snapshots__/istanbul.report.test.ts.snap b/test/coverage-test/coverage-report-tests/__snapshots__/istanbul.report.test.ts.snap
index ebb7ee824..7dc8db961 100644
--- a/test/coverage-test/coverage-report-tests/__snapshots__/istanbul.report.test.ts.snap
+++ b/test/coverage-test/coverage-report-tests/__snapshots__/istanbul.report.test.ts.snap
@@ -267,7 +267,7 @@ exports[`istanbul json report 1`] = `
         "loc": {
           "end": {
             "column": null,
-            "line": 8,
+            "line": 10,
           },
           "start": {
             "column": 0,
@@ -278,7 +278,7 @@ exports[`istanbul json report 1`] = `
           {
             "end": {
               "column": null,
-              "line": 8,
+              "line": 10,
             },
             "start": {
               "column": 0,
@@ -288,10 +288,10 @@ exports[`istanbul json report 1`] = `
           {
             "end": {
               "column": null,
-              "line": 8,
+              "line": 10,
             },
             "start": {
-              "column": 2,
+              "column": 5,
               "line": 8,
             },
           },
@@ -323,7 +323,7 @@ exports[`istanbul json report 1`] = `
       "1": {
         "end": {
           "column": null,
-          "line": 8,
+          "line": 10,
         },
         "start": {
           "column": 0,
@@ -343,21 +343,21 @@ exports[`istanbul json report 1`] = `
       "3": {
         "end": {
           "column": null,
-          "line": 8,
+          "line": 9,
         },
         "start": {
           "column": 2,
-          "line": 8,
+          "line": 9,
         },
       },
       "4": {
         "end": {
           "column": null,
-          "line": 12,
+          "line": 14,
         },
         "start": {
           "column": 5,
-          "line": 12,
+          "line": 14,
         },
       },
     },
diff --git a/test/coverage-test/coverage-report-tests/__snapshots__/v8.report.test.ts.snap b/test/coverage-test/coverage-report-tests/__snapshots__/v8.report.test.ts.snap
index 5d1808f09..a0e0edfc1 100644
--- a/test/coverage-test/coverage-report-tests/__snapshots__/v8.report.test.ts.snap
+++ b/test/coverage-test/coverage-report-tests/__snapshots__/v8.report.test.ts.snap
@@ -582,26 +582,26 @@ exports[`v8 json report 1`] = `
     },
     "branchMap": {
       "0": {
-        "line": 6,
+        "line": 7,
         "loc": {
           "end": {
-            "column": 36,
-            "line": 8,
+            "column": 1,
+            "line": 10,
           },
           "start": {
-            "column": 33,
-            "line": 6,
+            "column": 0,
+            "line": 7,
           },
         },
         "locations": [
           {
             "end": {
-              "column": 36,
-              "line": 8,
+              "column": 1,
+              "line": 10,
             },
             "start": {
-              "column": 33,
-              "line": 6,
+              "column": 0,
+              "line": 7,
             },
           },
         ],
@@ -614,10 +614,13 @@ exports[`v8 json report 1`] = `
     "s": {
       "0": 1,
       "1": 1,
-      "11": 1,
+      "13": 1,
       "4": 1,
       "5": 1,
+      "6": 0,
       "7": 0,
+      "8": 0,
+      "9": 0,
     },
     "statementMap": {
       "0": {
@@ -640,19 +643,19 @@ exports[`v8 json report 1`] = `
           "line": 2,
         },
       },
-      "11": {
+      "13": {
         "end": {
           "column": 15,
-          "line": 12,
+          "line": 14,
         },
         "start": {
           "column": 0,
-          "line": 12,
+          "line": 14,
         },
       },
       "4": {
         "end": {
-          "column": 12,
+          "column": 14,
           "line": 5,
         },
         "start": {
@@ -670,9 +673,19 @@ exports[`v8 json report 1`] = `
           "line": 6,
         },
       },
+      "6": {
+        "end": {
+          "column": 1,
+          "line": 7,
+        },
+        "start": {
+          "column": 0,
+          "line": 7,
+        },
+      },
       "7": {
         "end": {
-          "column": 36,
+          "column": 6,
           "line": 8,
         },
         "start": {
@@ -680,6 +693,26 @@ exports[`v8 json report 1`] = `
           "line": 8,
         },
       },
+      "8": {
+        "end": {
+          "column": 36,
+          "line": 9,
+        },
+        "start": {
+          "column": 0,
+          "line": 9,
+        },
+      },
+      "9": {
+        "end": {
+          "column": 1,
+          "line": 10,
+        },
+        "start": {
+          "column": 0,
+          "line": 10,
+        },
+      },
     },
   },
   "<process-cwd>/src/Hello.vue": {
diff --git a/test/coverage-test/src/Defined.vue b/test/coverage-test/src/Defined.vue
index 0f116e00b..8e72b8746 100644
--- a/test/coverage-test/src/Defined.vue
+++ b/test/coverage-test/src/Defined.vue
@@ -2,10 +2,12 @@
 const defined = MY_CONSTANT
 
 /* eslint-disable no-console */
-if (defined)
+if (defined) {
   console.log('Covered condition')
-else
+}
+else {
   console.log('Uncovered condition')
+}
 </script>
 
 <template>
-- 
2.51.2