From 076dda0d52a0e8afbcb4f76b83af4a1bc12d2361 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 17 Jun 2024 13:00:32 +0200
Subject: [PATCH 01/25] feat(ui): replace navigation tree with test explorer

---
 packages/runner/src/utils/tasks.ts            |   2 +-
 packages/ui/client/auto-imports.d.ts          |  16 -
 packages/ui/client/components.d.ts            |   7 +-
 .../ui/client/components/FilterStatus.vue     |  33 ++
 packages/ui/client/components/IconButton.vue  |   2 +-
 packages/ui/client/components/Navigation.vue  |  67 ++--
 packages/ui/client/components/ProgressBar.vue |  27 +-
 packages/ui/client/components/TaskItem.vue    | 120 ------
 packages/ui/client/components/TaskTree.vue    |  94 -----
 packages/ui/client/components/TasksList.vue   | 243 ------------
 .../components/dashboard/TestFilesEntry.vue   |  45 +--
 .../components/dashboard/TestsEntry.vue       |  40 +-
 .../client/components/explorer/Explorer.vue   | 224 +++++++++++
 .../components/explorer/ExplorerItem.vue      | 117 ++++++
 .../client/components/explorer/TaskItem.vue   | 102 +++++
 .../ui/client/composables/client/index.ts     |  88 +++--
 .../ui/client/composables/client/state.ts     |   7 +
 .../client/composables/explorer/collapse.ts   | 109 +++++
 .../client/composables/explorer/collector.ts  | 371 ++++++++++++++++++
 .../ui/client/composables/explorer/expand.ts  | 156 ++++++++
 .../ui/client/composables/explorer/filter.ts  | 222 +++++++++++
 .../ui/client/composables/explorer/index.ts   |   3 +
 .../ui/client/composables/explorer/search.ts  | 107 +++++
 .../ui/client/composables/explorer/state.ts   |  89 +++++
 .../ui/client/composables/explorer/tree.ts    | 185 +++++++++
 .../ui/client/composables/explorer/types.ts   |  91 +++++
 .../ui/client/composables/explorer/utils.ts   | 185 +++++++++
 packages/ui/client/composables/navigation.ts  |   9 +-
 packages/ui/client/composables/summary.ts     | 109 -----
 packages/ui/client/utils/task.ts              |   7 +
 packages/ui/package.json                      |   3 +-
 packages/ui/vite.config.ts                    |   6 +-
 packages/ws-client/src/index.ts               |   8 +-
 pnpm-lock.yaml                                |  27 +-
 test/browser/package.json                     |   1 +
 test/core/test/tab-effect.spec.mjs            |   1 -
 36 files changed, 2187 insertions(+), 736 deletions(-)
 create mode 100644 packages/ui/client/components/FilterStatus.vue
 delete mode 100644 packages/ui/client/components/TaskItem.vue
 delete mode 100644 packages/ui/client/components/TaskTree.vue
 delete mode 100644 packages/ui/client/components/TasksList.vue
 create mode 100644 packages/ui/client/components/explorer/Explorer.vue
 create mode 100644 packages/ui/client/components/explorer/ExplorerItem.vue
 create mode 100644 packages/ui/client/components/explorer/TaskItem.vue
 create mode 100644 packages/ui/client/composables/client/state.ts
 create mode 100644 packages/ui/client/composables/explorer/collapse.ts
 create mode 100644 packages/ui/client/composables/explorer/collector.ts
 create mode 100644 packages/ui/client/composables/explorer/expand.ts
 create mode 100644 packages/ui/client/composables/explorer/filter.ts
 create mode 100644 packages/ui/client/composables/explorer/index.ts
 create mode 100644 packages/ui/client/composables/explorer/search.ts
 create mode 100644 packages/ui/client/composables/explorer/state.ts
 create mode 100644 packages/ui/client/composables/explorer/tree.ts
 create mode 100644 packages/ui/client/composables/explorer/types.ts
 create mode 100644 packages/ui/client/composables/explorer/utils.ts
 delete mode 100644 packages/ui/client/composables/summary.ts

diff --git a/packages/runner/src/utils/tasks.ts b/packages/runner/src/utils/tasks.ts
index 82f25919cd63..50ac4cedc43d 100644
--- a/packages/runner/src/utils/tasks.ts
+++ b/packages/runner/src/utils/tasks.ts
@@ -1,7 +1,7 @@
 import { type Arrayable, toArray } from '@vitest/utils'
 import type { Custom, Suite, Task, Test } from '../types'
 
-function isAtomTest(s: Task): s is Test | Custom {
+export function isAtomTest(s: Task): s is Test | Custom {
   return s.type === 'test' || s.type === 'custom'
 }
 
diff --git a/packages/ui/client/auto-imports.d.ts b/packages/ui/client/auto-imports.d.ts
index d0043d4d004e..b9f6880e6219 100644
--- a/packages/ui/client/auto-imports.d.ts
+++ b/packages/ui/client/auto-imports.d.ts
@@ -46,14 +46,6 @@ declare global {
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
-  const filesFailed: typeof import('./composables/summary')['filesFailed']
-  const filesIgnore: typeof import('./composables/summary')['filesIgnore']
-  const filesRunning: typeof import('./composables/summary')['filesRunning']
-  const filesSkipped: typeof import('./composables/summary')['filesSkipped']
-  const filesSnapshotFailed: typeof import('./composables/summary')['filesSnapshotFailed']
-  const filesSuccess: typeof import('./composables/summary')['filesSuccess']
-  const filesTodo: typeof import('./composables/summary')['filesTodo']
-  const finished: typeof import('./composables/summary')['finished']
   const getCurrentBrowserIframe: typeof import('./composables/api')['getCurrentBrowserIframe']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
@@ -128,22 +120,14 @@ declare global {
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
-  const tests: typeof import('./composables/summary')['tests']
-  const testsFailed: typeof import('./composables/summary')['testsFailed']
-  const testsIgnore: typeof import('./composables/summary')['testsIgnore']
-  const testsSkipped: typeof import('./composables/summary')['testsSkipped']
-  const testsSuccess: typeof import('./composables/summary')['testsSuccess']
-  const testsTodo: typeof import('./composables/summary')['testsTodo']
   const throttledRef: typeof import('@vueuse/core')['throttledRef']
   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
-  const time: typeof import('./composables/summary')['time']
   const toRaw: typeof import('vue')['toRaw']
   const toReactive: typeof import('@vueuse/core')['toReactive']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
   const toValue: typeof import('vue')['toValue']
   const toggleDark: typeof import('./composables/dark')['toggleDark']
-  const totalTests: typeof import('./composables/summary')['totalTests']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
diff --git a/packages/ui/client/components.d.ts b/packages/ui/client/components.d.ts
index 235bcb312dea..c8c25c1ad1bb 100644
--- a/packages/ui/client/components.d.ts
+++ b/packages/ui/client/components.d.ts
@@ -15,7 +15,10 @@ declare module 'vue' {
     DashboardEntry: typeof import('./components/dashboard/DashboardEntry.vue')['default']
     DetailsPanel: typeof import('./components/DetailsPanel.vue')['default']
     ErrorEntry: typeof import('./components/dashboard/ErrorEntry.vue')['default']
+    Explorer: typeof import('./components/explorer/Explorer.vue')['default']
+    ExplorerItem: typeof import('./components/explorer/ExplorerItem.vue')['default']
     FileDetails: typeof import('./components/FileDetails.vue')['default']
+    FilterStatus: typeof import('./components/FilterStatus.vue')['default']
     IconAction: typeof import('./components/IconAction.vue')['default']
     IconButton: typeof import('./components/IconButton.vue')['default']
     Modal: typeof import('./components/Modal.vue')['default']
@@ -25,9 +28,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     StatusIcon: typeof import('./components/StatusIcon.vue')['default']
-    TaskItem: typeof import('./components/TaskItem.vue')['default']
-    TasksList: typeof import('./components/TasksList.vue')['default']
-    TaskTree: typeof import('./components/TaskTree.vue')['default']
+    TaskItem: typeof import('./components/explorer/TaskItem.vue')['default']
     TestFilesEntry: typeof import('./components/dashboard/TestFilesEntry.vue')['default']
     TestsEntry: typeof import('./components/dashboard/TestsEntry.vue')['default']
     TestsFilesContainer: typeof import('./components/dashboard/TestsFilesContainer.vue')['default']
diff --git a/packages/ui/client/components/FilterStatus.vue b/packages/ui/client/components/FilterStatus.vue
new file mode 100644
index 000000000000..449731967dab
--- /dev/null
+++ b/packages/ui/client/components/FilterStatus.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{ label: string }>()
+const modelValue = defineModel<boolean | null>()
+</script>
+
+<template>
+  <label
+    class="font-light text-sm checkbox flex items-center cursor-pointer py-1 text-md w-full gap-y-1 mb-1px"
+    v-bind="$attrs"
+    @click.prevent="modelValue = !modelValue"
+  >
+    <span
+      :class="[
+        modelValue ? 'i-carbon:checkbox-checked-filled' : 'i-carbon:checkbox',
+      ]"
+      text-lg
+      aria-hidden="true"
+    />
+    <input
+      v-model="modelValue"
+      type="checkbox"
+      sr-only
+    >
+    <span flex-1 ms-2 select-none>{{ label }}</span>
+  </label>
+</template>
+
+<style>
+.checkbox:focus-within {
+  outline: none;
+  @apply focus-base border-b-1 !mb-none;
+}
+</style>
diff --git a/packages/ui/client/components/IconButton.vue b/packages/ui/client/components/IconButton.vue
index 1e4794b6347a..123d59dc600a 100644
--- a/packages/ui/client/components/IconButton.vue
+++ b/packages/ui/client/components/IconButton.vue
@@ -18,7 +18,7 @@ defineProps<{
     class="w-1.4em h-1.4em flex" :class="[{ 'bg-gray-500:35 op100': active }]"
   >
     <slot>
-      <div :class="icon" ma />
+      <span :class="icon" ma block />
     </slot>
   </button>
 </template>
diff --git a/packages/ui/client/components/Navigation.vue b/packages/ui/client/components/Navigation.vue
index 920649c65ac9..55f21c9a5580 100644
--- a/packages/ui/client/components/Navigation.vue
+++ b/packages/ui/client/components/Navigation.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { hasFailedSnapshot } from '@vitest/ws-client'
 import { Tooltip as VueTooltip } from 'floating-vue'
 import type { File, Task } from 'vitest'
 import {
@@ -9,22 +8,20 @@ import {
   currentModule,
   dashboardVisible,
   disableCoverage,
-  openedTreeItems,
   showCoverage,
   showDashboard,
 } from '~/composables/navigation'
-import { client, files, findById, isReport, runAll } from '~/composables/client'
+import { client, findById, 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'
 
-const failedSnapshot = computed(
-  () => files.value && hasFailedSnapshot(files.value),
-)
 function 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
@@ -41,46 +38,42 @@ async function onRunAll(files?: File[]) {
       await nextTick()
     }
   }
-  await runAll(files)
+  if (files?.length) {
+    await runFiles(files)
+  }
+  else {
+    await runAll()
+  }
 }
 
 function collapseTests() {
-  openedTreeItems.value = []
+  explorerTree.collapseAllNodes()
 }
 
 function expandTests() {
-  files.value.forEach((file) => {
-    if (!openedTreeItems.value.includes(file.id)) {
-      openedTreeItems.value.push(file.id)
-    }
-  })
+  explorerTree.expandAllNodes()
 }
 </script>
 
 <template>
   <!-- TODO: have test tree so the folders are also nested: test -> filename -> suite -> test -->
-  <TasksList
-    border="r base"
-    :tasks="files"
-    :on-item-click="onItemClick"
-    :group-by-type="true"
-    :nested="true"
-    @run="onRunAll"
-  >
-    <template #header="{ filteredTests }">
+  <Explorer border="r base" :on-item-click="onItemClick" :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>
       <div class="flex text-lg">
         <IconButton
-          v-show="openedTreeItems.length > 0"
+          v-show="!shouldShowExpandAll"
           v-tooltip.bottom="'Collapse tests'"
           title="Collapse tests"
+          :disabled="!initialized"
           icon="i-carbon:collapse-all"
           @click="collapseTests()"
         />
         <IconButton
-          v-show="openedTreeItems.length === 0"
+          v-show="shouldShowExpandAll"
           v-tooltip.bottom="'Expand tests'"
+          :disabled="!initialized"
           title="Expand tests"
           icon="i-carbon:expand-all"
           @click="expandTests()"
@@ -101,10 +94,7 @@ function expandTests() {
         >
           <div class="i-carbon:folder-off ma" />
           <template #popper>
-            <div
-              class="op100 gap-1 p-y-1"
-              grid="~ items-center cols-[1.5em_1fr]"
-            >
+            <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>Coverage enabled but missing html reporter.</div>
               <div style="grid-column: 2">
@@ -125,23 +115,18 @@ function expandTests() {
           @click="showCoverage()"
         />
         <IconButton
-          v-if="failedSnapshot && !isReport"
+          v-if="(explorerTree.summary.failedSnapshot && !isReport)"
           v-tooltip.bottom="'Update all failed snapshot(s)'"
           icon="i-carbon:result-old"
-          @click="updateSnapshot()"
+          :disabled="!explorerTree.summary.failedSnapshotEnabled"
+          @click="explorerTree.summary.failedSnapshotEnabled && updateSnapshot()"
         />
         <IconButton
           v-if="!isReport"
-          v-tooltip.bottom="
-            filteredTests
-              ? filteredTests.length === 0
-                ? 'No test to run (clear filter)'
-                : 'Rerun filtered'
-              : 'Rerun all'
-          "
-          :disabled="filteredTests?.length === 0"
+          v-tooltip.bottom="filteredFiles ? (filteredFiles.length === 0 ? 'No test to run (clear filter)' : 'Rerun filtered') : 'Rerun all'"
+          :disabled="filteredFiles?.length === 0"
           icon="i-carbon:play"
-          @click="onRunAll(filteredTests)"
+          @click="onRunAll(filteredFiles)"
         />
         <IconButton
           v-tooltip.bottom="`Toggle to ${toggleMode} mode`"
@@ -150,5 +135,5 @@ function expandTests() {
         />
       </div>
     </template>
-  </TasksList>
+  </Explorer>
 </template>
diff --git a/packages/ui/client/components/ProgressBar.vue b/packages/ui/client/components/ProgressBar.vue
index cb0f05a59a22..74d828627d3c 100644
--- a/packages/ui/client/components/ProgressBar.vue
+++ b/packages/ui/client/components/ProgressBar.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { files } from '~/composables/client'
-import { filesFailed, filesSuccess, finished } from '~/composables/summary'
+import { explorerTree } from '~/composables/explorer'
+import { finished } from '~/composables/client/state'
 
 const { width } = useWindowSize()
 const classes = computed(() => {
-  // if there is no files, then in progress and gray
-  if (files.value.length === 0) {
+  // if there are no files, then in progress and gray
+  if (explorerTree.summary.files === 0) {
     return '!bg-gray-4 !dark:bg-gray-7 in-progress'
   }
   else if (!finished.value) {
@@ -14,25 +14,22 @@ const classes = computed(() => {
 
   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 = explorerTree.summary.files
+  return t > 0 ? (width.value * explorerTree.summary.filesSuccess / t) : 0
 })
 const widthFailed = computed(() => {
-  const t = unref(total)
-  return t > 0 ? (width.value * failed.value) / t : 0
+  const t = explorerTree.summary.files
+  return t > 0 ? (width.value * explorerTree.summary.filesFailed / t) : 0
 })
 const pending = computed(() => {
-  const t = unref(total)
-  return t - failed.value - pass.value
+  const t = explorerTree.summary.files
+  return t - explorerTree.summary.filesFailed - explorerTree.summary.filesSuccess
 })
 const widthPending = computed(() => {
-  const t = unref(total)
-  return t > 0 ? (width.value * pending.value) / t : 0
+  const t = explorerTree.summary.files
+  return t > 0 ? (width.value * pending.value / t) : 0
 })
 </script>
 
diff --git a/packages/ui/client/components/TaskItem.vue b/packages/ui/client/components/TaskItem.vue
deleted file mode 100644
index baa36e067524..000000000000
--- a/packages/ui/client/components/TaskItem.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<script setup lang="ts">
-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
-}>()
-
-const emit = defineEmits<{
-  run: []
-  preview: []
-  fixSnapshot: []
-}>()
-
-const duration = computed(() => {
-  const { result } = props.task
-  return result && Math.round(result.duration || 0)
-})
-</script>
-
-<template>
-  <div
-    v-if="task"
-    flex="~ row"
-    items-center
-    p="x-2 y-1"
-    border-rounded
-    cursor-pointer
-    hover="bg-active"
-    class="item-wrapper"
-    :aria-label="task.name"
-    :data-current="activeFileId === task.id"
-  >
-    <div v-if="task.type === 'suite'" pr-1>
-      <div v-if="opened" i-carbon-chevron-down op20 />
-      <div v-else i-carbon-chevron-right op20 />
-    </div>
-    <StatusIcon :task="task" mr-2 />
-    <div
-      v-if="task.type === 'suite' && task.meta.typecheck"
-      i-logos:typescript-icon
-      flex-shrink-0
-      mr-2
-    />
-    <div
-      flex
-      items-end
-      gap-2
-      :text="task?.result?.state === 'fail' ? 'red-500' : ''"
-      overflow-hidden
-    >
-      <span text-sm truncate font-light>
-        <!-- only show [] in files view -->
-        <span
-          v-if="'filepath' in task && task.projectName"
-          :style="{ color: getProjectNameColor(task.file.projectName) }"
-        >
-          [{{ task.file.projectName }}]
-        </span>
-        {{ task.name }}
-      </span>
-      <span
-        v-if="typeof duration === 'number'"
-        text="xs"
-        op20
-        style="white-space: nowrap"
-      >
-        {{ duration > 0 ? duration : "< 1" }}ms
-      </span>
-    </div>
-    <div
-      v-if="task.type === 'suite' && 'filepath' in task"
-      gap-1
-      justify-end
-      flex-grow-1
-      pl-1
-      class="test-actions"
-    >
-      <IconAction
-        v-if="!isReport && failedSnapshot"
-        v-tooltip.bottom="'Fix failed snapshot(s)'"
-        data-testid="btn-fix-snapshot"
-        title="Fix failed snapshot(s)"
-        icon="i-carbon-result-old"
-        @click.prevent.stop="emit('fixSnapshot')"
-      />
-      <IconAction
-        v-tooltip.bottom="'Open test details'"
-        data-testid="btn-open-details"
-        title="Open test details"
-        icon="i-carbon-intrusion-prevention"
-        @click.prevent.stop="emit('preview')"
-      />
-      <IconAction
-        v-if="!isReport"
-        v-tooltip.bottom="'Run current test'"
-        data-testid="btn-run-test"
-        title="Run current test"
-        icon="i-carbon:play-filled-alt"
-        text-green5
-        @click.prevent.stop="emit('run')"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.test-actions {
-  display: none;
-}
-
-.item-wrapper:hover .test-actions,
-.item-wrapper[data-current="true"] .test-actions {
-  display: flex;
-}
-</style>
diff --git a/packages/ui/client/components/TaskTree.vue b/packages/ui/client/components/TaskTree.vue
deleted file mode 100644
index ea408cab966d..000000000000
--- a/packages/ui/client/components/TaskTree.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script setup lang="ts">
-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 })
-
-// TODO: better handling of "opened" - it means to forcefully open the tree item and set in TasksList right now
-const {
-  task,
-  indent = 0,
-  nested = false,
-  search,
-  onItemClick,
-  opened = false,
-} = defineProps<{
-  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),
-)
-
-function toggleOpen() {
-  if (isOpened.value) {
-    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]
-  }
-}
-
-async function onRun() {
-  onItemClick?.(task)
-  if (coverageEnabled.value) {
-    disableCoverage.value = true
-    await nextTick()
-  }
-  await runFiles([task.file])
-}
-
-function updateSnapshot() {
-  return client.rpc.updateSnapshot(task.file)
-}
-</script>
-
-<template>
-  <!-- maybe provide a KEEP STRUCTURE mode, do not filter by search keyword  -->
-  <!-- v-if = keepStructure ||  (!search || caseInsensitiveMatch(task.name, search)) -->
-  <TaskItem
-    v-if="
-      opened || !nested || !search || caseInsensitiveMatch(task.name, search)
-    "
-    v-bind="$attrs"
-    :task="task"
-    :style="{
-      paddingLeft: indent
-        ? `${indent * 0.75 + (task.type === 'suite' ? 0.5 : 1.75)}rem`
-        : '1rem',
-    }"
-    :opened="isOpened && task.type === 'suite' && task.tasks.length"
-    :failed-snapshot="failedSnapshot"
-    @click="toggleOpen()"
-    @run="onRun()"
-    @fix-snapshot="updateSnapshot()"
-    @preview="onItemClick?.(task)"
-  />
-  <div
-    v-if="nested && task.type === 'suite' && task.tasks.length"
-    v-show="isOpened"
-  >
-    <TaskTree
-      v-for="suite in task.tasks"
-      :key="suite.id"
-      :failed-snapshot="false"
-      :task="suite"
-      :nested="nested"
-      :indent="indent + 1"
-      :search="search"
-      :on-item-click="onItemClick"
-    />
-  </div>
-</template>
diff --git a/packages/ui/client/components/TasksList.vue b/packages/ui/client/components/TasksList.vue
deleted file mode 100644
index c99d6466bb8c..000000000000
--- a/packages/ui/client/components/TasksList.vue
+++ /dev/null
@@ -1,243 +0,0 @@
-<script setup lang="ts">
-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 })
-
-const {
-  tasks,
-  // indent = 0,
-  nested = false,
-  groupByType = false,
-  onItemClick,
-} = defineProps<{
-  tasks: Task[]
-  indent?: number
-  nested?: boolean
-  groupByType?: boolean
-  onItemClick?: (task: Task) => void
-}>()
-
-const emit = defineEmits<{
-  (event: 'run', files?: File[]): void
-}>()
-
-const search = ref<string>('')
-const searchBox = ref<HTMLInputElement | undefined>()
-const isFiltered = computed(() => search.value.trim() !== '')
-
-const filtered = computed(() => {
-  if (!search.value.trim()) {
-    return tasks
-  }
-
-  return tasks.filter(task => matchTasks([task], search.value))
-})
-const filteredTests: ComputedRef<File[]> = computed(() =>
-  isFiltered.value
-    ? filtered.value.map(task => findById(task.id)!).filter(Boolean)
-    : [],
-)
-
-const failed = computed(() =>
-  filtered.value.filter(task => task.result?.state === 'fail'),
-)
-const success = computed(() =>
-  filtered.value.filter(task => task.result?.state === 'pass'),
-)
-const skipped = computed(() =>
-  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),
-  ),
-)
-
-const disableClearSearch = computed(() => search.value === '')
-
-const throttledRunning = useThrottle(running, 250)
-
-function clearSearch(focus: boolean) {
-  search.value = ''
-  focus && searchBox.value?.focus()
-}
-
-function matchTasks(tasks: Task[], search: string): boolean {
-  let result = false
-
-  for (let i = 0; i < tasks.length; i++) {
-    const task = tasks[i]
-
-    if (caseInsensitiveMatch(task.name, search)) {
-      result = true
-      break
-    }
-
-    // walk whole task tree
-    if (isSuite(task) && task.tasks) {
-      result = matchTasks(task.tasks, search)
-      if (result) {
-        break
-      }
-    }
-  }
-
-  return result
-}
-</script>
-
-<template>
-  <div h="full" flex="~ col">
-    <div>
-      <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
-        <slot
-          name="header"
-          :filtered-tests="isFiltered ? filteredTests : undefined"
-        />
-      </div>
-      <div p="l3 y2 r2" flex="~ gap-2" items-center bg-header border="b-2 base">
-        <div class="i-carbon:search" flex-shrink-0 />
-        <input
-          ref="searchBox"
-          v-model="search"
-          placeholder="Search..."
-          outline="none"
-          bg="transparent"
-          font="light"
-          text="sm"
-          flex-1
-          pl-1
-          :op="search.length ? '100' : '50'"
-          @keydown.esc="clearSearch(false)"
-          @keydown.enter="emit('run', isFiltered ? filteredTests : undefined)"
-        >
-        <IconButton
-          v-tooltip.bottom="'Clear search'"
-          :disabled="disableClearSearch"
-          title="Clear search"
-          icon="i-carbon:filter-remove"
-          @click.passive="clearSearch(true)"
-        />
-      </div>
-    </div>
-
-    <div class="scrolls" flex-auto py-1>
-      <template v-if="groupByType">
-        <DetailsPanel v-if="failed.length">
-          <template #summary>
-            <div text-red5>
-              FAIL ({{ failed.length }})
-            </div>
-          </template>
-          <TaskTree
-            v-for="task in failed"
-            :key="task.id"
-            :task="task"
-            :nested="nested"
-            :search="search"
-            :opened="isFiltered"
-            :failed-snapshot="hasFailedSnapshot(task)"
-            :class="activeFileId === task.id ? 'bg-active' : ''"
-            :on-item-click="onItemClick"
-          />
-        </DetailsPanel>
-        <DetailsPanel v-if="throttledRunning.length">
-          <template #summary>
-            <div text-yellow5>
-              RUNNING ({{ throttledRunning.length }})
-            </div>
-          </template>
-          <TaskTree
-            v-for="task in throttledRunning"
-            :key="task.id"
-            :task="task"
-            :nested="nested"
-            :search="search"
-            :opened="isFiltered"
-            :failed-snapshot="hasFailedSnapshot(task)"
-            :class="activeFileId === task.id ? 'bg-active' : ''"
-            :on-item-click="onItemClick"
-          />
-        </DetailsPanel>
-        <DetailsPanel v-if="success.length">
-          <template #summary>
-            <div text-green5>
-              PASS ({{ success.length }})
-            </div>
-          </template>
-          <TaskTree
-            v-for="task in success"
-            :key="task.id"
-            :task="task"
-            :nested="nested"
-            :opened="isFiltered"
-            :failed-snapshot="hasFailedSnapshot(task)"
-            :search="search"
-            :class="activeFileId === task.id ? 'bg-active' : ''"
-            :on-item-click="onItemClick"
-          />
-        </DetailsPanel>
-        <DetailsPanel v-if="skipped.length">
-          <template #summary>
-            <div class="text-purple5:50">
-              SKIP ({{ skipped.length }})
-            </div>
-          </template>
-          <TaskTree
-            v-for="task in skipped"
-            :key="task.id"
-            :task="task"
-            :opened="isFiltered"
-            :nested="nested"
-            :failed-snapshot="hasFailedSnapshot(task)"
-            :search="search"
-            :class="activeFileId === task.id ? 'bg-active' : ''"
-            :on-item-click="onItemClick"
-          />
-        </DetailsPanel>
-      </template>
-
-      <!-- flat -->
-      <template v-else>
-        <TaskTree
-          v-for="task in filtered"
-          :key="task.id"
-          :task="task"
-          :nested="nested"
-          :opened="isFiltered"
-          :failed-snapshot="hasFailedSnapshot(task)"
-          :search="search"
-          :class="activeFileId === task.id ? 'bg-active' : ''"
-          :on-item-click="onItemClick"
-        />
-      </template>
-      <!-- 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>
-          <button
-            font-light
-            op="50 hover:100"
-            text-sm
-            border="~ gray-400/50 rounded"
-            p="x2 y0.5"
-            m="t2"
-            @click.passive="clearSearch(true)"
-          >
-            Clear
-          </button>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
diff --git a/packages/ui/client/components/dashboard/TestFilesEntry.vue b/packages/ui/client/components/dashboard/TestFilesEntry.vue
index 28d365ea2759..366145d053e4 100644
--- a/packages/ui/client/components/dashboard/TestFilesEntry.vue
+++ b/packages/ui/client/components/dashboard/TestFilesEntry.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
-import { files, unhandledErrors } from '~/composables/client'
-import {
-  filesFailed,
-  filesSnapshotFailed,
-  filesSuccess,
-  time,
-} from '~/composables/summary'
+import { unhandledErrors } from '~/composables/client/state'
+import { explorerTree } from '~/composables/explorer'
 </script>
 
 <template>
@@ -23,36 +18,42 @@ import {
     <div i-carbon-document />
     <div>Files</div>
     <div class="number" data-testid="num-files">
-      {{ files.length }}
+      {{ explorerTree.summary.files }}
     </div>
 
-    <template v-if="filesSuccess.length">
+    <template v-if="explorerTree.summary.filesSuccess">
       <div i-carbon-checkmark />
       <div>Pass</div>
       <div class="number">
-        {{ filesSuccess.length }}
+        {{ explorerTree.summary.filesSuccess }}
       </div>
     </template>
 
-    <template v-if="filesFailed.length">
+    <template v-if="explorerTree.summary.filesFailed">
       <div i-carbon-close />
-      <div>Fail</div>
+      <div>
+        Fail
+      </div>
       <div class="number" text-red5>
-        {{ filesFailed.length }}
+        {{ explorerTree.summary.filesFailed }}
       </div>
     </template>
 
-    <template v-if="filesSnapshotFailed.length">
+    <template v-if="explorerTree.summary.filesSnapshotFailed">
       <div i-carbon-compare />
-      <div>Snapshot Fail</div>
+      <div>
+        Snapshot Fail
+      </div>
       <div class="number" text-red5>
-        {{ filesSnapshotFailed.length }}
+        {{ explorerTree.summary.filesSnapshotFailed }}
       </div>
     </template>
 
     <template v-if="unhandledErrors.length">
       <div i-carbon-checkmark-outline-error />
-      <div>Errors</div>
+      <div>
+        Errors
+      </div>
       <div class="number" text-red5>
         {{ unhandledErrors.length }}
       </div>
@@ -61,7 +62,7 @@ import {
     <div i-carbon-timer />
     <div>Time</div>
     <div class="number" data-testid="run-time">
-      {{ time }}
+      {{ explorerTree.summary.time }}
     </div>
   </div>
   <template v-if="unhandledErrors.length">
@@ -70,12 +71,8 @@ import {
         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>
-        This might cause false positive tests. Resolve unhandled errors to make
-        sure your tests are not affected.
+        Vitest caught {{ unhandledErrors.length }} error{{ unhandledErrors.length > 1 ? 's' : '' }} during the test run.<br>
+        This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
       </p>
       <details
         data-testid="unhandled-errors-details"
diff --git a/packages/ui/client/components/dashboard/TestsEntry.vue b/packages/ui/client/components/dashboard/TestsEntry.vue
index c7fdd61e0fa1..3dcbbed37a76 100644
--- a/packages/ui/client/components/dashboard/TestsEntry.vue
+++ b/packages/ui/client/components/dashboard/TestsEntry.vue
@@ -1,21 +1,5 @@
 <script setup lang="ts">
-import {
-  tests,
-  testsFailed,
-  testsSkipped,
-  testsSuccess,
-  testsTodo,
-} 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 pending = computed(() => {
-//   const t = unref(total)
-//   return t - failed.value - pass.value
-// })
+import { explorerTree } from '~/composables/explorer'
 </script>
 
 <template>
@@ -25,34 +9,40 @@ const todo = computed(() => testsTodo.value.length)
         Pass
       </template>
       <template #body>
-        {{ pass }}
+        {{ explorerTree.summary.testsSuccess }}
       </template>
     </DashboardEntry>
     <DashboardEntry
-      :class="{ 'text-red5': failed, 'op50': !failed }"
+      :class="{ 'text-red5': explorerTree.summary.testsFailed, 'op50': !explorerTree.summary.testsFailed }"
       data-testid="fail-entry"
     >
       <template #header>
         Fail
       </template>
       <template #body>
-        {{ failed }}
+        {{ explorerTree.summary.testsFailed }}
       </template>
     </DashboardEntry>
-    <DashboardEntry v-if="skipped" op50 data-testid="skipped-entry">
+    <DashboardEntry
+      v-if="explorerTree.summary.testsSkipped"
+      op50 data-testid="skipped-entry"
+    >
       <template #header>
         Skip
       </template>
       <template #body>
-        {{ skipped }}
+        {{ explorerTree.summary.testsSkipped }}
       </template>
     </DashboardEntry>
-    <DashboardEntry v-if="todo" op50 data-testid="todo-entry">
+    <DashboardEntry
+      v-if="explorerTree.summary.testsTodo" op50
+      data-testid="todo-entry"
+    >
       <template #header>
         Todo
       </template>
       <template #body>
-        {{ todo }}
+        {{ explorerTree.summary.testsTodo }}
       </template>
     </DashboardEntry>
     <DashboardEntry :tail="true" data-testid="total-entry">
@@ -60,7 +50,7 @@ const todo = computed(() => testsTodo.value.length)
         Total
       </template>
       <template #body>
-        {{ total }}
+        {{ explorerTree.summary.totalTests }}
       </template>
     </DashboardEntry>
   </div>
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
new file mode 100644
index 000000000000..bb5d7d933c77
--- /dev/null
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import type { File, Task } from '@vitest/runner'
+import { RecycleScroller } from 'vue-virtual-scroller'
+import { activeFileId } from '~/composables/params'
+import { useSearch } from '~/composables/explorer/search'
+// @ts-expect-error missing types
+
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+
+defineOptions({ inheritAttrs: false })
+
+const { onItemClick } = defineProps<{
+  onItemClick?: (task: Task) => void
+}>()
+
+const emit = defineEmits<{
+  (event: 'item-click', files?: File[]): void
+  (event: 'run', files?: File[]): void
+}>()
+
+const searchBox = ref<HTMLInputElement | undefined>()
+
+const {
+  initialized,
+  filter,
+  search,
+  disableFilter,
+  isFiltered,
+  isFilteredByStatus,
+  disableClearSearch,
+  clearAll,
+  clearSearch,
+  clearFilter,
+  filteredFiles,
+  testsTotal,
+  uiEntries,
+} = useSearch(searchBox)
+
+const filterClass = ref<string>('grid-cols-2')
+const filterHeaderClass = ref<string>('grid-col-span-2')
+const testExplorerRef = ref<HTMLInputElement | undefined>()
+
+useResizeObserver(testExplorerRef, (entries) => {
+  const { width } = entries[0].contentRect
+  if (width < 420) {
+    filterClass.value = 'grid-cols-2'
+    filterHeaderClass.value = 'grid-col-span-2'
+  }
+  else {
+    filterClass.value = 'grid-cols-4'
+    filterHeaderClass.value = 'grid-col-span-4'
+  }
+})
+</script>
+
+<template>
+  <div ref="testExplorerRef" h="full" flex="~ col">
+    <div>
+      <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
+        <slot name="header" :filtered-files="isFiltered || isFilteredByStatus ? filteredFiles : undefined" />
+      </div>
+      <div
+        p="l3 y2 r2"
+        flex="~ gap-2"
+        items-center
+        bg-header
+        border="b-2 base"
+      >
+        <div class="i-carbon:search" flex-shrink-0 />
+        <input
+          ref="searchBox"
+          v-model="search"
+          placeholder="Search..."
+          outline="none"
+          bg="transparent"
+          font="light"
+          text="sm"
+          flex-1
+          pl-1
+          :op="search.length ? '100' : '50'"
+          @keydown.esc="clearSearch(false)"
+          @keydown.enter="emit('run', isFiltered || isFilteredByStatus ? filteredFiles : undefined)"
+        >
+        <IconButton
+          v-tooltip.bottom="'Clear search'"
+          :disabled="disableClearSearch"
+          title="Clear search"
+          icon="i-carbon:filter-remove"
+          @click.passive="clearSearch(true)"
+        />
+      </div>
+      <div
+        p="l3 y2 r2"
+        items-center
+        bg-header
+        border="b-2 base"
+        grid="~ items-center gap-x-2 rows-[auto_auto]"
+        :class="filterClass"
+      >
+        <div :class="filterHeaderClass" flex="~ gap-2 items-center">
+          <div aria-hidden="true" class="i-carbon:filter" />
+          <div flex-grow-1>
+            Filter
+          </div>
+          <IconButton
+            v-tooltip.bottom="'Clear Filter'"
+            :disabled="disableFilter"
+            title="Clear search"
+            icon="i-carbon:filter-remove"
+            @click.passive="clearFilter(false)"
+          />
+        </div>
+        <FilterStatus v-model="filter.failed" label="Fail" />
+        <FilterStatus v-model="filter.success" label="Pass" />
+        <FilterStatus v-model="filter.skipped" label="Skip" />
+        <FilterStatus v-model="filter.onlyTests" label="Only Tests" />
+      </div>
+    </div>
+    <div class="scrolls" flex-auto py-1>
+      <DetailsPanel>
+        <template #summary>
+          <div grid="~ items-center gap-x-1 cols-[auto_min-content_auto] rows-[min-content_min-content]">
+            <span text-red5>
+              FAIL ({{ testsTotal.failed }})
+            </span>
+            <span>/</span>
+            <span text-yellow5>
+              RUNNING ({{ testsTotal.running }})
+            </span>
+            <span text-green5>
+              PASS ({{ testsTotal.success }})
+            </span>
+            <span>/</span>
+            <span class="text-purple5:50">
+              SKIP ({{ filter.onlyTests ? testsTotal.skipped : '--' }})
+            </span>
+          </div>
+        </template>
+        <!-- empty-state -->
+        <template v-if="(isFiltered || isFilteredByStatus) && uiEntries.length === 0">
+          <div v-show="initialized" flex="~ col" items-center p="x4 y4" font-light>
+            <div op30>
+              No matched test
+            </div>
+            <button
+              type="button"
+              font-light
+              text-sm
+              border="~ gray-400/50 rounded"
+              p="x2 y0.5"
+              m="t2"
+              op="50"
+              :class="disableClearSearch ? null : 'hover:op100'"
+              :disabled="disableClearSearch"
+              @click.passive="clearSearch(true)"
+            >
+              Clear Search
+            </button>
+            <button
+              type="button"
+              font-light
+              text-sm
+              border="~ gray-400/50 rounded"
+              p="x2 y0.5"
+              m="t2"
+              op="50"
+              :class="disableFilter ? null : 'hover:op100'"
+              :disabled="disableFilter"
+              @click.passive="clearFilter(true)"
+            >
+              Clear Filter
+            </button>
+            <button
+              type="button"
+              font-light
+              op="50 hover:100"
+              text-sm
+              border="~ gray-400/50 rounded"
+              p="x2 y0.5"
+              m="t2"
+              @click.passive="clearAll"
+            >
+              Clear All
+            </button>
+          </div>
+        </template>
+        <template v-else>
+          <RecycleScroller
+            page-mode
+            key-field="id"
+            :item-size="28"
+            :items="uiEntries"
+          >
+            <!--            <DynamicScrollerItem
+              :item="item"
+              :data-id="item.id"
+              :active="active"
+            > -->
+            <template #default="{ item }">
+              <ExplorerItem
+                :task-id="item.id"
+                :expandable="item.expandable"
+                :type="item.type"
+                :current="activeFileId === item.id"
+                :indent="item.indent"
+                :name="item.name"
+                :typecheck="item.typecheck"
+                :project-name="item.projectName ?? ''"
+                :project-name-color="item.projectNameColor ?? ''"
+                :state="item.state"
+                :duration="item.duration"
+                :opened="item.expanded"
+                class="h-28px m-0 p-0"
+                :class="activeFileId === item.id ? 'bg-active' : ''"
+                :on-item-click="onItemClick"
+              />
+            </template>
+            <!--            </DynamicScrollerItem> -->
+          </RecycleScroller>
+        </template>
+      </DetailsPanel>
+    </div>
+  </div>
+</template>
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
new file mode 100644
index 000000000000..957b23210df2
--- /dev/null
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { Task, TaskState } from '@vitest/runner'
+import { nextTick } from 'vue'
+import { client, runFiles } from '~/composables/client'
+import { coverageEnabled } from '~/composables/navigation'
+import type { TaskTreeNodeType } from '~/composables/explorer/types'
+import { explorerTree } from '~/composables/explorer'
+
+// TODO: better handling of "opened" - it means to forcefully open the tree item and set in TasksList right now
+const {
+  taskId,
+  indent,
+  duration,
+  current,
+  opened,
+  expandable,
+  type,
+  onItemClick,
+} = defineProps<{
+  taskId: string
+  name: string
+  indent: number
+  typecheck?: boolean
+  duration?: number
+  state?: TaskState
+  current: boolean
+  type: TaskTreeNodeType
+  opened: boolean
+  expandable: boolean
+  search?: string
+  projectName?: string
+  projectNameColor: string
+  onItemClick?: (task: Task) => void
+}>()
+
+function toggleOpen() {
+  if (!expandable) {
+    return
+  }
+
+  if (opened) {
+    explorerTree.collapseNode(taskId)
+  }
+  else {
+    explorerTree.expandNode(taskId)
+  }
+}
+
+async function onRun(task: Task) {
+  onItemClick?.(task)
+  if (coverageEnabled.value) {
+    disableCoverage.value = true
+    await nextTick()
+  }
+  await runFiles([task.file])
+}
+
+function updateSnapshot(task: Task) {
+  return client.rpc.updateSnapshot(task.file)
+}
+
+const styles = computed(() => {
+  if (indent === 0) {
+    return null
+  }
+
+  return {
+    paddingLeft: indent ? `${indent * 0.75 + (type === 'suite' ? 0.50 : 1.75)}rem` : '1rem',
+  }
+})
+
+/* const containerRef = ref<HTMLDivElement | undefined>()
+const bottom = ref<number>(0)
+
+useResizeObserver(containerRef, (entries) => {
+  const { height } = entries[0].contentRect
+  if (isOpened.value) {
+    bottom.value = height
+  }
+}) */
+</script>
+
+<template>
+  <div :style="styles">
+    <!-- maybe provide a KEEP STRUCTURE mode, do not filter by search keyword  -->
+    <!-- v-if = keepStructure ||  (!search || caseInsensitiveMatch(task.name, search)) -->
+    <TaskItem
+      :task-id="taskId"
+      :opened="opened"
+      :state="state"
+      :duration="duration"
+      :type="type"
+      :name="name"
+      :typecheck="typecheck"
+      :project-name="projectName"
+      :project-name-color="projectNameColor"
+      :current="current"
+      @click="toggleOpen()"
+      @run="task => onRun(task)"
+      @fix-snapshot="task => updateSnapshot(task)"
+      @preview="task => onItemClick?.(task)"
+    />
+    <!--    <div
+      v-if="nested && task.type === 'suite' && task.tasks.length"
+      v-show="isOpened"
+      flex
+      relative
+    >
+      <div
+        v-if="isOpened"
+        flex mt&#45;&#45;3px ml-15px justify-center
+      >
+        <div w-1px border="x base" mb-9></div>
+      </div>
+    </div> -->
+  </div>
+</template>
diff --git a/packages/ui/client/components/explorer/TaskItem.vue b/packages/ui/client/components/explorer/TaskItem.vue
new file mode 100644
index 000000000000..97a169e55dec
--- /dev/null
+++ b/packages/ui/client/components/explorer/TaskItem.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { Task, TaskState } from '@vitest/runner'
+import { hasFailedSnapshot } from '@vitest/ws-client'
+import { isReport } from '~/constants'
+import { client } from '~/composables/client'
+import type { TaskTreeNodeType } from '~/composables/explorer/types'
+
+const props = defineProps<{
+  taskId: string
+  name: string
+  typecheck?: boolean
+  duration?: number
+  projectName?: string
+  projectNameColor: string
+  type: TaskTreeNodeType
+  state?: TaskState
+  opened: boolean
+  current: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'preview', value: Task): void
+  (event: 'run', value: Task): void
+  (event: 'fixSnapshot', value: Task): void
+}>()
+
+const task = computed(() => {
+  return client.state.idMap.get(props.taskId)
+})
+
+const failedSnapshot = computed(() => task.value && hasFailedSnapshot(task.value))
+</script>
+
+<template>
+  <div
+    v-if="task"
+    flex="~ row"
+    items-center
+    p="x-2 y-1"
+    border-rounded
+    cursor-pointer
+    hover="bg-active"
+    class="item-wrapper"
+    :aria-label="name"
+    :data-current="current"
+  >
+    <div v-if="type === 'suite'" pr-1>
+      <div :class="opened ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right op20'" op20 />
+    </div>
+    <StatusIcon :task="task" mr-2 />
+    <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>
+        {{ name }}
+      </span>
+      <span v-if="typeof duration === 'number'" text="xs" op20 style="white-space: nowrap">
+        {{ duration > 0 ? duration : '< 1' }}ms
+      </span>
+    </div>
+    <div v-if="type === 'file'" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
+      <IconAction
+        v-if="!isReport && failedSnapshot"
+        v-tooltip.bottom="'Fix failed snapshot(s)'"
+        data-testid="btn-fix-snapshot"
+        title="Fix failed snapshot(s)"
+        icon="i-carbon-result-old"
+        @click.prevent.stop="emit('fixSnapshot', task)"
+      />
+      <IconAction
+        v-tooltip.bottom="'Open test details'"
+        data-testid="btn-open-details"
+        title="Open test details"
+        icon="i-carbon-intrusion-prevention"
+        @click.prevent.stop="emit('preview', task)"
+      />
+      <IconAction
+        v-if="!isReport"
+        v-tooltip.bottom="'Run current test'"
+        data-testid="btn-run-test"
+        title="Run current test"
+        icon="i-carbon:play-filled-alt"
+        text-green5
+        @click.prevent.stop="emit('run', task)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.test-actions {
+  display: none;
+}
+
+.item-wrapper:hover .test-actions,
+.item-wrapper[data-current="true"] .test-actions {
+  display: flex;
+}
+</style>
diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index ac021069b74e..481933c99f37 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -1,19 +1,20 @@
 import { createClient, getTasks } from '@vitest/ws-client'
 import type { WebSocketStatus } from '@vueuse/core'
-import type { ErrorWithDiff, File, ResolvedConfig } from 'vitest'
-import type { Ref } from 'vue'
-import { reactive } from 'vue'
+import type { File, ResolvedConfig } from 'vitest'
+import { reactive as reactiveVue } from 'vue'
 import { createFileTask } from '@vitest/runner/utils'
-import type { BrowserRunnerState, RunState } from '../../../types'
+import type { BrowserRunnerState } from '../../../types'
 import { ENTRY_URL, isReport } from '../../constants'
 import { parseError } from '../error'
 import { activeFileId } from '../params'
 import { createStaticClient } from './static'
+import { testRunState, unhandledErrors } from './state'
+import { uiFiles } from '~/composables/explorer/state'
+import { explorerTree } from '~/composables/explorer'
 
 export { ENTRY_URL, PORT, HOST, isReport } from '../../constants'
 
-export const testRunState: Ref<RunState> = ref('idle')
-export const unhandledErrors: Ref<ErrorWithDiff[]> = ref([])
+const onTaskUpdateCalled = ref(false)
 
 export const client = (function createVitestClient() {
   if (isReport) {
@@ -21,12 +22,23 @@ export const client = (function createVitestClient() {
   }
   else {
     return createClient(ENTRY_URL, {
-      reactive: reactive as any,
+      reactive: (data, ctxKey) => {
+        return ctxKey === 'state' ? reactiveVue(data as any) as any : shallowRef(data)
+      },
       handlers: {
         onTaskUpdate() {
+          // eslint-disable-next-line no-console
+          console.log('onTaskUpdate')
+          if (testRunState.value === 'idle' && !onTaskUpdateCalled.value) {
+            onTaskUpdateCalled.value = true
+            explorerTree.resumeRun()
+          }
           testRunState.value = 'running'
         },
         onFinished(_files, errors) {
+          // eslint-disable-next-line no-console
+          console.log('onFinished', _files?.length, errors?.length)
+          explorerTree.endRun()
           testRunState.value = 'idle'
           unhandledErrors.value = (errors || []).map(parseError)
         },
@@ -42,41 +54,55 @@ export const client = (function createVitestClient() {
   }
 })()
 
-function sort(a: File, b: File) {
-  return a.name.localeCompare(b.name)
-}
-
 export const config = shallowRef<ResolvedConfig>({} as any)
 export const status = ref<WebSocketStatus>('CONNECTING')
-export const files = computed(() => client.state.getFiles().sort(sort))
-export const current = computed(() =>
-  files.value.find(file => file.id === activeFileId.value),
-)
-export const currentLogs = computed(
-  () =>
-    getTasks(current.value)
-      .map(i => i?.logs || [])
-      .flat() || [],
-)
+
+export const current = computed(() => {
+  const currentFileId = activeFileId.value
+  const entry = uiFiles.value.find(file => file.id === currentFileId)!
+  return entry ? findById(entry.id) : undefined
+})
+export const currentLogs = computed(() => getTasks(current.value).map(i => i?.logs || []).flat() || [])
 
 export function findById(id: string) {
-  return files.value.find(file => file.id === id)
+  const file = client.state.idMap.get(id)
+  return file ? file as File : undefined
 }
 
 export const isConnected = computed(() => status.value === 'OPEN')
 export const isConnecting = computed(() => status.value === 'CONNECTING')
 export const isDisconnected = computed(() => status.value === 'CLOSED')
 
-export function runAll(files = client.state.getFiles()) {
-  return runFiles(files)
+export function runAll() {
+  return runFiles(client.state.getFiles()/* , true */)
 }
 
-export function runFiles(files: File[]) {
-  files.forEach((f) => {
+function clearResults(useFiles: File[]) {
+  const map = new Map(uiFiles.value.map(i => [i.id, i]))
+  useFiles.forEach((f) => {
     delete f.result
-    getTasks(f).forEach(i => delete i.result)
+    getTasks(f).forEach((i) => {
+      delete i.result
+      explorerTree.removeTaskDone(i.id)
+      if (map.has(i.id)) {
+        map.get(i.id)!.state = undefined
+      }
+    })
+    const file = map.get(f.id)
+    if (file) {
+      file.state = undefined
+      file.duration = undefined
+      file.collectDuration = undefined
+    }
   })
-  return client.rpc.rerun(files.map(i => i.filepath))
+}
+
+export function runFiles(useFiles: File[]) {
+  clearResults(useFiles)
+
+  explorerTree.startRun()
+
+  return client.rpc.rerun(useFiles.map(i => i.filepath))
 }
 
 export function runCurrent() {
@@ -98,7 +124,7 @@ watch(
     ws.addEventListener('open', async () => {
       status.value = 'OPEN'
       client.state.filesMap.clear()
-      const [files, _config, errors] = await Promise.all([
+      const [remoteFiles, _config, errors] = await Promise.all([
         client.rpc.getFiles(),
         client.rpc.getConfig(),
         client.rpc.getUnhandledErrors(),
@@ -111,7 +137,9 @@ watch(
         client.state.collectFiles(files)
       }
       else {
-        client.state.collectFiles(files)
+        explorerTree.loadFiles(remoteFiles)
+        client.state.collectFiles(remoteFiles)
+        explorerTree.startRun(!onTaskUpdateCalled.value)
       }
       unhandledErrors.value = (errors || []).map(parseError)
       config.value = _config
diff --git a/packages/ui/client/composables/client/state.ts b/packages/ui/client/composables/client/state.ts
new file mode 100644
index 000000000000..06778fa1dbcd
--- /dev/null
+++ b/packages/ui/client/composables/client/state.ts
@@ -0,0 +1,7 @@
+import type { Ref } from 'vue'
+import type { ErrorWithDiff } from '@vitest/utils'
+import type { RunState } from '../../../types'
+
+export const testRunState: Ref<RunState> = ref('idle')
+export const finished = computed(() => testRunState.value === 'idle')
+export const unhandledErrors: Ref<ErrorWithDiff[]> = ref([])
diff --git a/packages/ui/client/composables/explorer/collapse.ts b/packages/ui/client/composables/explorer/collapse.ts
new file mode 100644
index 000000000000..4b52037d8462
--- /dev/null
+++ b/packages/ui/client/composables/explorer/collapse.ts
@@ -0,0 +1,109 @@
+import type { FileTreeNode, UITaskTreeNode } from '~/composables/explorer/types'
+import { isFileNode, isParentNode } from '~/composables/explorer/utils'
+import { openedTreeItems, treeFilter, uiEntries } from '~/composables/explorer/state'
+
+/**
+ * Collapse all nodes: all children collapsed.
+ *
+ * This method will use current `uiEntries`, we don't need to traverse the full tree.
+ * The action will be applied on the current items in the test results explorer.
+ *
+ * If the node is not a parent node, nothing will happen.
+ *
+ * Calling this method will:
+ * - collapse all nodes
+ * - update the filtered expandAll state
+ * - remove opened tree items for the node and any children
+ * - update uiEntries without child nodes
+ *
+ * @param id The node id to collapse.
+ * @param nodes Tree node map.
+ */
+export function runCollapseNode(
+  id: string,
+  nodes: Map<string, UITaskTreeNode>,
+) {
+  const node = nodes.get(id)
+  if (!node || !isParentNode(node)) {
+    return
+  }
+
+  const treeItems = new Set(openedTreeItems.value)
+  treeItems.delete(node.id)
+  const entries = [...collectCollapseNode(node)]
+  openedTreeItems.value = Array.from(treeItems)
+  treeFilter.value.expandAll = true
+  uiEntries.value = entries
+}
+
+/**
+ * Collapse all nodes: any child collapsed.
+ *
+ * This method will use current `uiEntries`, we don't need to traverse the full tree.
+ * The action will be applied on the current items in the test results explorer.
+ *
+ * We'll use current `uiEntries`, we don't need to traverse the full tree.
+ *
+ * Calling this method will:
+ * - collapse all nodes
+ * - clear stored opened tree items
+ * - update the filtered expandAll state to false
+ * - update uiEntries without child nodes
+ *
+ * @param nodes The file nodes.
+ */
+export function runCollapseAllTask(nodes: FileTreeNode[]) {
+  // collapse all nodes
+  collapseAllNodes(nodes)
+  const entries = [...uiEntries.value.filter(isFileNode)]
+  collapseAllNodes(entries)
+  // collapse all nodes
+  openedTreeItems.value = []
+  treeFilter.value.expandAll = true
+  uiEntries.value = entries
+}
+
+function collapseAllNodes(nodes: UITaskTreeNode[]) {
+  for (const node of nodes) {
+    if (isParentNode(node)) {
+      node.expanded = false
+      collapseAllNodes(node.tasks)
+    }
+  }
+}
+
+function * collectChildNodes(node: UITaskTreeNode, itself: boolean): Generator<string> {
+  if (itself) {
+    yield node.id
+  }
+
+  if (isParentNode(node)) {
+    for (let i = 0; i < node.tasks.length; i++) {
+      yield * collectChildNodes(node.tasks[i], true)
+    }
+  }
+}
+
+function* collectCollapseNode(node: UITaskTreeNode) {
+  const id = node.id
+  // collect children to remove from the list
+  const childNodes = new Set<string>(collectChildNodes(node, false))
+  for (let i = 0; i < uiEntries.value.length; i++) {
+    const child = uiEntries.value[i]
+    // collapse current node and return it
+    if (child.id === id) {
+      child.expanded = false
+      yield child
+      continue
+    }
+
+    // remove children from the list
+    if (childNodes.has(child.id)) {
+      childNodes.delete(child.id)
+      continue
+    }
+
+    // return the node
+    yield child
+  }
+}
diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
new file mode 100644
index 000000000000..84596443edbb
--- /dev/null
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -0,0 +1,371 @@
+import type { Custom, File, Task, Test } from '@vitest/runner'
+import { isAtomTest } from '@vitest/runner/utils'
+import type { Arrayable } from '@vitest/utils'
+import { toArray } from '@vitest/utils'
+import { hasFailedSnapshot } from '@vitest/ws-client'
+import type {
+  CollectFilteredTests,
+  CollectorInfo,
+  FileTreeNode,
+  Filter,
+  FilteredTests,
+  UITaskTreeNode,
+} from '~/composables/explorer/types'
+import { client, findById } from '~/composables/client'
+import { runFilter, testMatcher } from '~/composables/explorer/filter'
+import {
+  createOrUpdateFileNode,
+  createOrUpdateNodeTask,
+  createOrUpdateSuiteTask,
+} from '~/composables/explorer/utils'
+import { isSuite } from '~/utils/task'
+import { openedTreeItems, treeFilter, uiFiles } from '~/composables/explorer/state'
+import { expandNodesOnEndRun } from '~/composables/explorer/expand'
+
+export function runLoadFiles(
+  remoteFiles: File[],
+  rootTasks: FileTreeNode[],
+  nodes: Map<string, UITaskTreeNode>,
+  search: string,
+  filter: Filter,
+) {
+  remoteFiles.map(f => [`${f.filepath}:${f.projectName || ''}`, f] as const)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([, f]) => createOrUpdateFileNode(f, nodes, rootTasks))
+
+  uiFiles.value = [...rootTasks]
+  queueMicrotask(() => {
+    runFilter(rootTasks, nodes, search.trim(), {
+      failed: filter.failed,
+      success: filter.success,
+      skipped: filter.skipped,
+      onlyTests: filter.onlyTests,
+    })
+  })
+}
+
+export function runCollect(
+  start: boolean,
+  end: boolean,
+  rootTasks: FileTreeNode[],
+  nodes: Map<string, UITaskTreeNode>,
+  summary: CollectorInfo,
+  search: string,
+  filter: Filter,
+) {
+  if (start) {
+    queueMicrotask(() => resetCollectorInfo(summary))
+  }
+
+  queueMicrotask(() => {
+    // collect remote children
+    for (let i = 0; i < rootTasks.length; i++) {
+      const fileNode = rootTasks[i]
+      const file = findById(fileNode.id)
+      if (!file) {
+        continue
+      }
+
+      createOrUpdateFileNode(file, nodes, rootTasks, !start)
+      const tasks = file.tasks
+      if (!tasks?.length) {
+        continue
+      }
+
+      createOrUpdateEntry(file.tasks, nodes)
+    }
+  })
+
+  queueMicrotask(() => {
+    collectData(rootTasks, summary)
+  })
+
+  queueMicrotask(() => {
+    if (end) {
+      summary.failedSnapshot = uiFiles.value && hasFailedSnapshot(
+        uiFiles.value.map(f => findById(f.id)!),
+      )
+      summary.failedSnapshotEnabled = true
+    }
+  })
+
+  queueMicrotask(() => {
+    doRunFilter(rootTasks, nodes, search, filter)
+  })
+}
+
+function doRunFilter(
+  rootTasks: FileTreeNode[],
+  nodes: Map<string, UITaskTreeNode>,
+  search: string,
+  filter: Filter,
+  end = false,
+) {
+  // refresh explorer
+
+  const expandAll = treeFilter.value.expandAll
+  const filtered = search.trim().length > 0 || filter.failed || filter.success || filter.skipped || filter.onlyTests
+  const resetExpandAll = expandAll !== true
+  const ids = new Set(openedTreeItems.value)
+  const applyExpandNodes = (ids.size > 0 && expandAll === false) || resetExpandAll
+
+  // refresh explorer
+  queueMicrotask(() => {
+    runFilter(rootTasks, nodes, search, filter)
+  })
+
+  if (applyExpandNodes) {
+    // expand all nodes
+    queueMicrotask(() => {
+      expandNodesOnEndRun(ids, nodes, end)
+      if (resetExpandAll || filtered) {
+        treeFilter.value.expandAll = false
+      }
+    })
+
+    // refresh explorer
+    queueMicrotask(() => runFilter(rootTasks, nodes, search, filter))
+  }
+}
+
+function createOrUpdateEntry(tasks: Task[], nodes: Map<string, UITaskTreeNode>) {
+  for (let i = 0; i < tasks.length; i++) {
+    const task = tasks[i]
+    if (isSuite(task)) {
+      createOrUpdateSuiteTask(task.id, nodes, true)
+    }
+    else { createOrUpdateNodeTask(task.id, nodes) }
+  }
+}
+
+export function resetCollectorInfo(summary: CollectorInfo) {
+  summary.files = 0
+  summary.time = ''
+  summary.filesFailed = 0
+  summary.filesSuccess = 0
+  summary.filesIgnore = 0
+  summary.filesRunning = 0
+  summary.filesSkipped = 0
+  summary.filesTodo = 0
+  summary.testsFailed = 0
+  summary.testsSuccess = 0
+  summary.testsIgnore = 0
+  summary.testsSkipped = 0
+  summary.testsTodo = 0
+  summary.totalTests = 0
+  summary.failedSnapshotEnabled = false
+}
+
+function collectData(
+  files: FileTreeNode[],
+  summary: CollectorInfo,
+) {
+  const idMap = client.state.idMap
+  const filesMap = new Map(files.filter(f => idMap.has(f.id)).map(f => [f.id, f]))
+  const useFiles = Array.from(filesMap.values()).map(file => [file.id, findById(file.id)] as const)
+  const data = {
+    files: filesMap.size,
+    time: '',
+    filesFailed: 0,
+    filesSuccess: 0,
+    filesIgnore: 0,
+    filesRunning: 0,
+    filesSkipped: 0,
+    filesTodo: 0,
+    filesSnapshotFailed: 0,
+    testsFailed: 0,
+    testsSuccess: 0,
+    testsIgnore: 0,
+    testsSkipped: 0,
+    testsTodo: 0,
+    totalTests: 0,
+    failedSnapshot: false,
+    failedSnapshotEnabled: false,
+  } satisfies CollectorInfo
+
+  let time = 0
+  for (const [id, f] of useFiles) {
+    if (!f) {
+      continue
+    }
+    const file = filesMap.get(id)
+    if (file) {
+      file.mode = f.mode
+      file.setupDuration = f.setupDuration
+      file.prepareDuration = f.prepareDuration
+      file.environmentLoad = f.environmentLoad
+      file.collectDuration = f.collectDuration
+      file.duration = f.result?.duration
+      file.state = f.result?.state
+    }
+    time += Math.max(0, f.collectDuration || 0)
+    time += Math.max(0, f.setupDuration || 0)
+    time += Math.max(0, f.result?.duration || 0)
+    time += Math.max(0, f.environmentLoad || 0)
+    time += Math.max(0, f.prepareDuration || 0)
+    data.time = time > 1000 ? `${(time / 1000).toFixed(2)}s` : `${Math.round(time)}ms`
+    if (f.result?.state === 'fail') {
+      data.filesFailed++
+    }
+    else if (f.result?.state === 'pass') {
+      data.filesSuccess++
+    }
+    else if (f.mode === 'skip') {
+      data.filesIgnore++
+      data.filesSkipped++
+    }
+    else if (f.mode === 'todo') {
+      data.filesIgnore++
+      data.filesTodo++
+    }
+    else {
+      data.filesRunning++
+    }
+
+    const {
+      failed,
+      success,
+      skipped,
+      total,
+      ignored,
+      todo,
+    } = collectTests(f)
+
+    data.totalTests += total
+    data.testsFailed += failed
+    data.testsSuccess += success
+    data.testsSkipped += skipped
+    data.testsTodo += todo
+    data.testsIgnore += ignored
+  }
+
+  summary.files = data.files
+  summary.time = data.time
+  summary.filesFailed = data.filesFailed
+  summary.filesSuccess = data.filesSuccess
+  summary.filesIgnore = data.filesIgnore
+  summary.filesRunning = data.filesRunning
+  summary.filesSkipped = data.filesSkipped
+  summary.filesTodo = data.filesTodo
+  summary.testsFailed = data.testsFailed
+  summary.testsSuccess = data.testsSuccess
+  summary.testsFailed = data.testsFailed
+  summary.testsTodo = data.testsTodo
+  summary.testsIgnore = data.testsIgnore
+  summary.testsSkipped = data.testsSkipped
+  summary.totalTests = data.totalTests
+}
+
+function collectTests(file: File, search = '', filter?: Filter) {
+  const data = {
+    failed: 0,
+    success: 0,
+    skipped: 0,
+    running: 0,
+    total: 0,
+    ignored: 0,
+    todo: 0,
+  } satisfies CollectFilteredTests
+
+  for (const t of testsCollector(file)) {
+    if (!filter || testMatcher(t, search, filter)) {
+      data.total++
+      if (t.result?.state === 'fail') {
+        data.failed++
+      }
+      else if (t.result?.state === 'pass') {
+        data.success++
+      }
+      else if (t.mode === 'skip') {
+        data.ignored++
+        data.skipped++
+      }
+      else if (t.mode === 'todo') {
+        data.ignored++
+        data.todo++
+      }
+    }
+  }
+
+  data.running = data.total - data.failed - data.success - data.ignored
+
+  return data
+}
+
+export function collectTestsTotalData(
+  filtered: boolean,
+  onlyTests: boolean,
+  tests: File[],
+  filesSummary: FilteredTests,
+  search: string,
+  filter: Filter,
+) {
+  if (onlyTests) {
+    // todo: apply similar logic when filtered
+    return tests
+      .map(file => collectTests(file, search, filter))
+      .reduce((acc, {
+        failed,
+        success,
+        ignored,
+        running,
+      }) => {
+        acc.failed += failed
+        acc.success += success
+        acc.skipped += ignored
+        acc.running += running
+        return acc
+      }, { failed: 0, success: 0, skipped: 0, running: 0 })
+  }
+  else if (filtered) {
+    const data = {
+      failed: 0,
+      success: 0,
+      skipped: 0,
+      running: 0,
+    } satisfies FilteredTests
+    // will match when the filter entry is active or filter is inactive (skipped excluded)
+    // for example, we should update all when the filter is empty
+    // but shouldn't update failed if we're filtering by success
+    const empty = !filter.success && !filter.failed
+    const applyFailed = filter.failed || empty
+    const applySuccess = filter.success || empty
+    for (const f of tests) {
+      if (f.result?.state === 'fail') {
+        data.failed += applyFailed ? 1 : 0
+      }
+      else if (f.result?.state === 'pass') {
+        data.success += applySuccess ? 1 : 0
+      }
+      else if (f.mode === 'skip' || f.mode === 'todo') {
+        // just ignore
+      }
+      else {
+        data.running++
+      }
+    }
+
+    return data
+  }
+
+  return filesSummary
+}
+
+function* testsCollector(suite: Arrayable<Task>): Generator<Test | Custom> {
+  const arraySuites = toArray(suite)
+  for (const s of arraySuites) {
+    if (isAtomTest(s)) {
+      yield s
+    }
+    else {
+      for (const task of s.tasks) {
+        if (isAtomTest(task)) {
+          yield task
+        }
+        else {
+          yield * testsCollector(task)
+        }
+      }
+    }
+  }
+}
diff --git a/packages/ui/client/composables/explorer/expand.ts b/packages/ui/client/composables/explorer/expand.ts
new file mode 100644
index 000000000000..58f833a7d7c1
--- /dev/null
+++ b/packages/ui/client/composables/explorer/expand.ts
@@ -0,0 +1,156 @@
+import { filteredFiles, openedTreeItems, treeFilter, uiEntries } from '~/composables/explorer/state'
+import type { FileTreeNode, Filter, UITaskTreeNode } from '~/composables/explorer/types'
+import { createOrUpdateNode, createOrUpdateSuiteTask, isFileNode, isParentNode } from '~/composables/explorer/utils'
+import { filterAll, filterTask } from '~/composables/explorer/filter'
+import { findById } from '~/composables/client'
+
+/**
+ * Expand the node: only direct children will be expanded
+ *
+ * This method will use current `uiEntries`, we don't need to traverse the full tree.
+ * The action will be applied on the current items in the test results explorer.
+ *
+ * **Note:** we only need to apply the filter on child nodes, when filtering, parent nodes
+ * are not present in the explorer if don't match the filter, only those matching the criteria
+ * will be there, we only need to filter the children of the node to expand.
+ *
+ * Calling this method will:
+ * - update the filtered expandAll state
+ * - remove opened tree items for the node and any children
+ * - update uiEntries including child nodes
+ *
+ * @param id The node id to expand.
+ * @param nodes Tree node map.
+ * @param search The search applied.
+ * @param filter The filter applied.
+ */
+export function runExpandNode(
+  id: string,
+  nodes: Map<string, UITaskTreeNode>,
+  search: string,
+  filter: Filter,
+) {
+  const entry = createOrUpdateSuiteTask(
+    id,
+    nodes,
+    false,
+  )
+  if (!entry) {
+    return
+  }
+
+  const [node, task] = entry
+
+  // create only direct children
+  for (const subtask of task.tasks) {
+    createOrUpdateNode(node.id, subtask, nodes, false)
+  }
+
+  // expand the node
+  node.expanded = true
+
+  const treeItems = new Set(openedTreeItems.value)
+  treeItems.add(node.id)
+  // collect children
+  // the first node is itself
+  const children = new Set(filterTask(
+    node,
+    nodes,
+    search,
+    filter,
+  ))
+
+  const entries = [...collectExpandedNode(node, children)]
+  openedTreeItems.value = Array.from(treeItems)
+  treeFilter.value.expandAll = false
+  uiEntries.value = entries
+}
+
+/**
+ * Expand all nodes: any child expanded.
+ *
+ * This method will use current `uiEntries`, we don't need to traverse the full tree.
+ * The action will be applied on the current items in the test results explorer.
+ *
+ * Any already expanded child will be shown as expanded: collapsing nodes will not collapse any child.
+ *
+ * **Note:** we don't need to apply the filter here, we'll use the current `uiEntries`, when filtering,
+ * parent nodes are not present in the explorer, only those matching the criteria will be there.
+ * The filter will be applied to the full tree.
+ *
+ * Calling this method will:
+ * - expand all nodes
+ * - add stored opened tree items
+ * - update the filtered expandAll state to true
+ * - update uiEntries with child nodes
+ *
+ * @param nodes Tree node map.
+ * @param nodeTree Tree node map.
+ * @param search The search applied.
+ * @param filter The filter applied.
+ */
+export function runExpandAll(
+  nodes: FileTreeNode[],
+  nodeTree: Map<string, UITaskTreeNode>,
+  search: string,
+  filter: Filter,
+) {
+  expandAllNodes(nodes, false)
+  const entries = [...filterAll(
+    nodes,
+    nodeTree,
+    search,
+    filter,
+  )]
+  treeFilter.value.expandAll = false
+  openedTreeItems.value = []
+  uiEntries.value = entries
+  filteredFiles.value = entries.filter(isFileNode).map(f => findById(f.id)!)
+}
+
+export function expandNodesOnEndRun(
+  ids: Set<string>,
+  nodes: Map<string, UITaskTreeNode>,
+  updateState: boolean,
+) {
+  if (ids.size) {
+    for (const node of nodes.values()) {
+      if (ids.has(node.id)) {
+        node.expanded = true
+      }
+    }
+  }
+  else {
+    expandAllNodes(uiEntries.value.filter(isFileNode), updateState)
+  }
+}
+
+export function expandAllNodes(nodes: UITaskTreeNode[], updateState: boolean) {
+  for (const node of nodes) {
+    if (isParentNode(node)) {
+      node.expanded = true
+      expandAllNodes(node.tasks, false)
+    }
+  }
+
+  if (updateState) {
+    treeFilter.value.expandAll = false
+    openedTreeItems.value = []
+  }
+}
+
+function* collectExpandedNode(
+  node: UITaskTreeNode,
+  children: Set<UITaskTreeNode>,
+) {
+  const id = node.id
+
+  for (const node of uiEntries.value) {
+    if (node.id === id) {
+      yield * children
+    }
+    else {
+      yield node
+    }
+  }
+}
diff --git a/packages/ui/client/composables/explorer/filter.ts b/packages/ui/client/composables/explorer/filter.ts
new file mode 100644
index 000000000000..4ba89b9fc393
--- /dev/null
+++ b/packages/ui/client/composables/explorer/filter.ts
@@ -0,0 +1,222 @@
+import type { Task } from '@vitest/runner'
+import { caseInsensitiveMatch } from '~/utils/task'
+import type { FileTreeNode, Filter, FilterResult, ParentTreeNode, UITaskTreeNode } from '~/composables/explorer/types'
+import {
+  isFileNode,
+  isParentNode,
+} from '~/composables/explorer/utils'
+import { client, findById } from '~/composables/client'
+import { filteredFiles, uiEntries } from '~/composables/explorer/state'
+
+export function testMatcher(task: Task, search: string, filter: Filter) {
+  return task ? matchTask(task, search, filter) : false
+}
+/**
+ * Filter child nodes using search, filter and only tests.
+ *
+ * @param nodes The file nodes.
+ * @param nodeTree Tree node map.
+ * @param search The search applied.
+ * @param filter The filter applied.
+ */
+export function runFilter(
+  nodes: FileTreeNode[],
+  nodeTree: Map<string, UITaskTreeNode>,
+  search: string,
+  filter: Filter,
+) {
+  const entries = [...filterAll(
+    nodes,
+    nodeTree,
+    search,
+    filter,
+  )]
+  uiEntries.value = entries
+  filteredFiles.value = entries.filter(isFileNode).map(f => findById(f.id)!)
+}
+
+export function* filterAll(
+  nodes: UITaskTreeNode[],
+  nodeTree: Map<string, UITaskTreeNode>,
+  search: string,
+  filter: Filter,
+) {
+  for (const node of nodes) {
+    yield * filterTask(node, nodeTree, search, filter)
+  }
+}
+
+export function* filterTask(
+  node: UITaskTreeNode,
+  nodes: Map<string, UITaskTreeNode>,
+  search: string,
+  filter: Filter,
+) {
+  const treeNodes = new Set<string>()
+
+  const list: FilterResult[] = []
+
+  for (const entry of visitNode(
+    node,
+    nodes,
+    treeNodes,
+    n => matcher(n, search, filter),
+  )) { list.push(entry) }
+
+  const filesToShow = new Set<string>()
+
+  const entries = [...filterParents(
+    list,
+    nodes,
+    filter.onlyTests,
+    treeNodes,
+    filesToShow,
+  )].reverse()
+
+  // we need to remove any child added when filtering: we traverse the full tree
+  const parents = new Set(
+    entries.filter(e => isParentNode(e) && e.expanded).map(e => e.id),
+  )
+  yield * entries.filter((node) => {
+    // all file nodes, or expanded parents, or children of expanded parents
+    return isFileNode(node) || (isParentNode(node) ? node.expanded : parents.has(node.parentId))
+  })
+}
+
+function expandCollapseNode(
+  match: boolean,
+  child: FileTreeNode | ParentTreeNode,
+  treeNodes: Set<string>,
+  collapseParents: boolean,
+  filesToShow: Set<string>,
+  nodes: Map<string, UITaskTreeNode>,
+) {
+  if (collapseParents) {
+    if (isFileNode(child)) {
+      if (filesToShow.has(child.id)) {
+        return child
+      }
+
+      return undefined
+    }
+    // show the parent if at least one child matches the filter
+    if (treeNodes.has(child.id)) {
+      const parent = nodes.get(child.parentId)
+      if (parent && isFileNode(parent)) {
+        filesToShow.add(parent.id)
+      }
+
+      return child
+    }
+  }
+  else {
+    // show the parent if matches the filter or at least one child matches the filter
+    if (match || treeNodes.has(child.id) || filesToShow.has(child.id)) {
+      const parent = nodes.get(child.parentId)
+      if (parent && isFileNode(parent)) {
+        filesToShow.add(parent.id)
+      }
+
+      return child
+    }
+  }
+}
+
+function* filterParents(
+  list: FilterResult[],
+  nodes: Map<string, UITaskTreeNode>,
+  collapseParents: boolean,
+  treeNodes: Set<string>,
+  filesToShow: Set<string>,
+) {
+  for (let i = list.length - 1; i >= 0; i--) {
+    const [match, child] = list[i]
+    if (isParentNode(child)) {
+      const node = expandCollapseNode(
+        match,
+        child,
+        treeNodes,
+        collapseParents,
+        filesToShow,
+        nodes,
+      )
+      if (node) {
+        yield node
+      }
+    }
+    else if (match) {
+      const parent = nodes.get(child.parentId)
+      if (parent && isFileNode(parent)) {
+        filesToShow.add(parent.id)
+      }
+
+      yield child
+    }
+  }
+}
+
+function matchState(task: Task, filter: Filter) {
+  if (filter.success || filter.failed) {
+    if ('result' in task) {
+      if (filter.success && task.result?.state === 'pass') {
+        return true
+      }
+      if (filter.failed && task.result?.state === 'fail') {
+        return true
+      }
+    }
+  }
+
+  if (filter.skipped && 'mode' in task) {
+    return task.mode === 'skip' || task.mode === 'todo'
+  }
+
+  return false
+}
+
+function matchTask(
+  task: Task,
+  search: string,
+  filter: Filter,
+) {
+  const match = search.length === 0 || caseInsensitiveMatch(task.name, search)
+
+  // search and filter will apply together
+  if (match) {
+    if (filter.success || filter.failed || filter.skipped) {
+      if (matchState(task, filter)) {
+        return true
+      }
+    }
+    else {
+      return true
+    }
+  }
+
+  return false
+}
+
+function* visitNode(
+  node: UITaskTreeNode,
+  nodes: Map<string, UITaskTreeNode>,
+  treeNodes: Set<string>,
+  matcher: (node: UITaskTreeNode) => boolean,
+): Generator<[match: boolean, node: UITaskTreeNode]> {
+  const match = matcher(node)
+
+  if (match) {
+    treeNodes.add(node.parentId)
+  }
+
+  yield [match, node]
+  if (isParentNode(node)) {
+    for (let i = 0; i < node.tasks.length; i++) {
+      yield * visitNode(node.tasks[i], nodes, treeNodes, matcher)
+    }
+  }
+}
+
+function matcher(node: UITaskTreeNode, search: string, filter: Filter) {
+  const task = client.state.idMap.get(node.id)
+  return task ? matchTask(task, search, filter) : false
+}
diff --git a/packages/ui/client/composables/explorer/index.ts b/packages/ui/client/composables/explorer/index.ts
new file mode 100644
index 000000000000..a5da36b2ec7a
--- /dev/null
+++ b/packages/ui/client/composables/explorer/index.ts
@@ -0,0 +1,3 @@
+import { ExplorerTree } from './tree'
+
+export const explorerTree = new ExplorerTree()
diff --git a/packages/ui/client/composables/explorer/search.ts b/packages/ui/client/composables/explorer/search.ts
new file mode 100644
index 000000000000..e8a2b7d6d48f
--- /dev/null
+++ b/packages/ui/client/composables/explorer/search.ts
@@ -0,0 +1,107 @@
+import type { Ref } from 'vue'
+import {
+  filter,
+  filteredFiles,
+  initialized,
+  isFiltered,
+  isFilteredByStatus,
+  openedTreeItems,
+  search,
+  testsTotal,
+  treeFilter,
+  uiEntries,
+} from './state'
+import { explorerTree } from '~/composables/explorer'
+
+export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
+  const disableFilter = computed(() => {
+    if (isFilteredByStatus.value) {
+      return false
+    }
+
+    return !filter.onlyTests
+  })
+  const disableClearSearch = computed(() => search.value === '')
+  const debouncedSearch = ref(search.value)
+
+  debouncedWatch(search, (value) => {
+    debouncedSearch.value = value?.trim() ?? ''
+  }, { debounce: 256 })
+
+  function clearSearch(focus: boolean) {
+    search.value = ''
+    focus && searchBox.value?.focus()
+  }
+
+  function clearFilter(focus: boolean) {
+    filter.failed = false
+    filter.success = false
+    filter.skipped = false
+    filter.onlyTests = false
+    focus && searchBox.value?.focus()
+  }
+
+  function clearAll() {
+    clearFilter(false)
+    clearSearch(true)
+  }
+
+  function updateFilterStorage(
+    searchValue: string,
+    failedValue: boolean,
+    successValue: boolean,
+    skippedValue: boolean,
+    onlyTestsValue: boolean,
+  ) {
+    if (!initialized.value) {
+      return
+    }
+
+    treeFilter.value.search = searchValue?.trim() ?? ''
+    treeFilter.value.failed = failedValue
+    treeFilter.value.success = successValue
+    treeFilter.value.skipped = skippedValue
+    treeFilter.value.onlyTests = onlyTestsValue
+  }
+
+  watch(
+    () => [
+      debouncedSearch.value,
+      filter.failed,
+      filter.success,
+      filter.skipped,
+      filter.onlyTests,
+    ] as const,
+    ([search, failed, success, skipped, onlyTests]) => {
+      updateFilterStorage(search, failed, success, skipped, onlyTests)
+      explorerTree.filterNodes()
+    },
+    { flush: 'post' },
+  )
+
+  watch(() => openedTreeItems.value.length, (size) => {
+    if (size) {
+      treeFilter.value.expandAll = undefined
+    }
+  }, { flush: 'post' })
+
+  onMounted(() => {
+    nextTick(() => (initialized.value = true))
+  })
+
+  return {
+    initialized,
+    filter,
+    search,
+    disableFilter,
+    isFiltered,
+    isFilteredByStatus,
+    disableClearSearch,
+    clearAll,
+    clearSearch,
+    clearFilter,
+    filteredFiles,
+    testsTotal,
+    uiEntries,
+  }
+}
diff --git a/packages/ui/client/composables/explorer/state.ts b/packages/ui/client/composables/explorer/state.ts
new file mode 100644
index 000000000000..e7ec4d87b5f5
--- /dev/null
+++ b/packages/ui/client/composables/explorer/state.ts
@@ -0,0 +1,89 @@
+import type { File } from '@vitest/runner'
+import type { FileTreeNode, Filter, FilteredTests, TreeFilterState, UITaskTreeNode } from './types'
+import { explorerTree } from './index'
+
+export const uiFiles = shallowRef<FileTreeNode[]>([])
+export const uiEntries = shallowRef<UITaskTreeNode[]>([])
+export const openedTreeItems = useLocalStorage<string[]>(
+  'vitest-ui_task-tree-opened',
+  [],
+  { shallow: true },
+)
+export const treeFilter = useLocalStorage<TreeFilterState>(
+  'vitest-ui_task-tree-filter',
+  {
+    expandAll: undefined,
+    failed: false,
+    success: false,
+    skipped: false,
+    onlyTests: false,
+    search: '',
+  },
+)
+export const search = ref<string>(treeFilter.value.search)
+export const isFiltered = computed(() => search.value.trim() !== '')
+export const filter = reactive<Filter>({
+  failed: treeFilter.value.failed,
+  success: treeFilter.value.success,
+  skipped: treeFilter.value.skipped,
+  onlyTests: treeFilter.value.onlyTests,
+})
+export const failedFilter = computed(() => filter.failed)
+export const successFilter = computed(() => filter.success)
+export const skipFilter = computed(() => filter.skipped)
+export const onlyTestsFilter = computed(() => filter.onlyTests)
+export const isFilteredByStatus = computed(() => {
+  if (filter.failed) {
+    return true
+  }
+
+  if (filter.success) {
+    return true
+  }
+
+  if (filter.skipped) {
+    return true
+  }
+
+  return false
+})
+export const filteredFiles = shallowRef<File[]>([])
+export const initialized = ref(false)
+export const shouldShowExpandAll = computed(() => {
+  const expandAll = treeFilter.value.expandAll
+  const opened = openedTreeItems.value
+  const filtered = isFiltered.value
+  const filteredStatus = isFilteredByStatus.value
+
+  if (opened.length > 0) {
+    return expandAll !== true
+  }
+
+  // don't remove this: we need to force a rerender
+  if (filtered || filteredStatus) {
+    return expandAll !== false
+  }
+
+  return expandAll !== false
+})
+export const testsTotal = computed<FilteredTests>(() => {
+  const filtered = isFiltered.value
+  const filteredByStatus = isFilteredByStatus.value
+  const onlyTests = filter.onlyTests
+  const failed = explorerTree.summary.filesFailed
+  const success = explorerTree.summary.filesSuccess
+  const skipped = explorerTree.summary.filesSkipped
+  const running = explorerTree.summary.filesRunning
+  const files = filteredFiles.value
+  return explorerTree.collectTestsTotal(
+    filtered || filteredByStatus,
+    onlyTests,
+    files,
+    {
+      failed,
+      success,
+      skipped,
+      running,
+    },
+  )
+})
diff --git a/packages/ui/client/composables/explorer/tree.ts b/packages/ui/client/composables/explorer/tree.ts
new file mode 100644
index 000000000000..39755f1a1a02
--- /dev/null
+++ b/packages/ui/client/composables/explorer/tree.ts
@@ -0,0 +1,185 @@
+import type { File } from '@vitest/runner'
+import {
+  filter,
+  search,
+} from '~/composables/explorer/state'
+import type {
+  CollectorInfo,
+  FilteredTests,
+  RootTreeNode,
+  UITaskTreeNode,
+} from '~/composables/explorer/types'
+import { collectTestsTotalData, runCollect, runLoadFiles } from '~/composables/explorer/collector'
+import { runCollapseAllTask, runCollapseNode } from '~/composables/explorer/collapse'
+import { runExpandAll, runExpandNode } from '~/composables/explorer/expand'
+import { runFilter } from '~/composables/explorer/filter'
+
+export class ExplorerTree {
+  private rafCollector: ReturnType<typeof useRafFn>
+  private resumeEndRunId: ReturnType<typeof setTimeout> | undefined
+  constructor(
+    // if the user refreshes the page with finished tests, we don't receive onFinished event
+    // maybe we should send the event/data from the server when the client reconnects
+    // todo: remove this and resumeEndRunId when vitest runner fix the problem
+    // todo: remove also client/index.ts logic with onTaskUpdateCalled
+    private resumeEndTimeout = 500,
+    private done = new Set<string>(),
+    private root = <RootTreeNode>{
+      id: 'vitest-root-node',
+      expandable: true,
+      expanded: true,
+      tasks: [],
+    },
+    private nodes = new Map<string, UITaskTreeNode>(),
+    public summary = reactive<CollectorInfo>({
+      files: 0,
+      time: '',
+      filesFailed: 0,
+      filesSuccess: 0,
+      filesIgnore: 0,
+      filesRunning: 0,
+      filesSkipped: 0,
+      filesSnapshotFailed: 0,
+      filesTodo: 0,
+      testsFailed: 0,
+      testsSuccess: 0,
+      testsIgnore: 0,
+      testsSkipped: 0,
+      testsTodo: 0,
+      totalTests: 0,
+      failedSnapshot: false,
+      failedSnapshotEnabled: false,
+    }),
+  ) {
+    // will run runCollect every ~100ms: 1000/10 = 100ms
+    // (beware increasing fpsLimit, it can be too much for the browser)
+    this.rafCollector = useRafFn(this.runCollect.bind(this), { fpsLimit: 10, immediate: false })
+  }
+
+  isUITaskDone(node: UITaskTreeNode) {
+    return this.done.has(node.id)
+  }
+
+  taskDone(id: string) {
+    this.done.add(id)
+  }
+
+  removeTaskDone(id: string) {
+    this.done.delete(id)
+  }
+
+  clearDone() {
+    this.done.clear()
+  }
+
+  loadFiles(remoteFiles: File[]) {
+    runLoadFiles(remoteFiles, this.root.tasks, this.nodes, search.value.trim(), {
+      failed: filter.failed,
+      success: filter.success,
+      skipped: filter.skipped,
+      onlyTests: filter.onlyTests,
+    })
+  }
+
+  resumeRun() {
+    clearTimeout(this.resumeEndRunId)
+    this.rafCollector.resume()
+  }
+
+  endRun() {
+    clearTimeout(this.resumeEndRunId)
+    // collect final state: rafCollector can be null on page refresh
+    this.rafCollector.pause()
+    this.collect(false, true)
+  }
+
+  private runCollect() {
+    this.collect(false, false)
+  }
+
+  private collect(start: boolean, end: boolean) {
+    queueMicrotask(() => {
+      runCollect(
+        start,
+        end,
+        this.root.tasks,
+        this.nodes,
+        this.summary,
+        search.value.trim(),
+        {
+          failed: filter.failed,
+          success: filter.success,
+          skipped: filter.skipped,
+          onlyTests: filter.onlyTests,
+        },
+      )
+    })
+  }
+
+  startRun(registerResumeEndRun = false) {
+    if (registerResumeEndRun) {
+      this.resumeEndRunId = setTimeout(() => this.endRun(), this.resumeEndTimeout)
+    }
+
+    this.collect(true, false)
+  }
+
+  collectTestsTotal(
+    filtered: boolean,
+    onlyTests: boolean,
+    tests: File[],
+    filesSummary: FilteredTests,
+  ) {
+    return collectTestsTotalData(filtered, onlyTests, tests, filesSummary, search.value.trim(), {
+      failed: filter.failed,
+      success: filter.success,
+      skipped: filter.skipped,
+      onlyTests: filter.onlyTests,
+    })
+  }
+
+  collapseNode(id: string) {
+    queueMicrotask(() => {
+      runCollapseNode(id, this.nodes)
+    })
+  }
+
+  expandNode(id: string) {
+    queueMicrotask(() => {
+      runExpandNode(id, this.nodes, search.value.trim(), {
+        failed: filter.failed,
+        success: filter.success,
+        skipped: filter.skipped,
+        onlyTests: filter.onlyTests,
+      })
+    })
+  }
+
+  collapseAllNodes() {
+    queueMicrotask(() => {
+      runCollapseAllTask(this.root.tasks)
+    })
+  }
+
+  expandAllNodes() {
+    queueMicrotask(() => {
+      runExpandAll(this.root.tasks, this.nodes, search.value.trim(), {
+        failed: filter.failed,
+        success: filter.success,
+        skipped: filter.skipped,
+        onlyTests: filter.onlyTests,
+      })
+    })
+  }
+
+  filterNodes() {
+    queueMicrotask(() => {
+      runFilter(this.root.tasks, this.nodes, search.value.trim(), {
+        failed: filter.failed,
+        success: filter.success,
+        skipped: filter.skipped,
+        onlyTests: filter.onlyTests,
+      })
+    })
+  }
+}
diff --git a/packages/ui/client/composables/explorer/types.ts b/packages/ui/client/composables/explorer/types.ts
new file mode 100644
index 000000000000..41940225e80b
--- /dev/null
+++ b/packages/ui/client/composables/explorer/types.ts
@@ -0,0 +1,91 @@
+import type { RunMode, TaskState } from '@vitest/runner'
+
+export type FilterResult = [match: boolean, node: UITaskTreeNode]
+
+export interface FilteredTests {
+  failed: number
+  success: number
+  skipped: number
+  running: number
+}
+
+export interface CollectFilteredTests extends FilteredTests {
+  total: number
+  ignored: number
+  todo: number
+}
+
+export interface TaskTreeNode {
+  id: string
+  expandable: boolean
+  expanded: boolean
+}
+
+export interface RootTreeNode extends TaskTreeNode {
+  tasks: FileTreeNode[]
+}
+
+export type TaskTreeNodeType = 'file' | 'suite' | 'test' | 'custom'
+
+export interface UITaskTreeNode extends TaskTreeNode {
+  type: TaskTreeNodeType
+  name: string
+  parentId: string
+  mode: RunMode
+  indent: number
+  state?: TaskState
+  duration?: number
+}
+
+export interface ParentTreeNode extends UITaskTreeNode {
+  tasks: UITaskTreeNode[]
+}
+
+export interface SuiteTreeNode extends UITaskTreeNode {
+  type: 'suite'
+  typecheck?: boolean
+  tasks: UITaskTreeNode[]
+}
+
+export interface FileTreeNode extends ParentTreeNode {
+  type: 'file'
+  filepath: string
+  projectName?: string
+  projectNameColor: string
+  collectDuration?: number
+  setupDuration?: number
+  environmentLoad?: number
+  prepareDuration?: number
+}
+
+export interface Filter {
+  failed: boolean
+  success: boolean
+  skipped: boolean
+  onlyTests: boolean
+}
+
+export interface TreeFilterState extends Filter {
+  search: string
+  expandAll?: boolean
+}
+
+export interface CollectorInfo {
+  files: number
+  time: string
+  filesFailed: number
+  filesSuccess: number
+  filesIgnore: number
+  filesRunning: number
+  filesSkipped: number
+  filesTodo: number
+  filesSnapshotFailed: number
+  testsFailed: number
+  testsSuccess: number
+  testsIgnore: number
+  testsSkipped: number
+  testsTodo: number
+  totalTests: number
+  failedSnapshot: boolean
+  failedSnapshotEnabled: boolean
+}
diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
new file mode 100644
index 000000000000..037e02464ce1
--- /dev/null
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -0,0 +1,185 @@
+import type { File, Task } from '@vitest/runner'
+import { isAtomTest } from '@vitest/runner/utils'
+import type { FileTreeNode, ParentTreeNode, SuiteTreeNode, UITaskTreeNode } from '~/composables/explorer/types'
+import { client } from '~/composables/client'
+import { getProjectNameColor, isTaskDone, isSuite as isTaskSuite } from '~/utils/task'
+import { explorerTree } from '~/composables/explorer/index'
+
+export function isFileNode(node: UITaskTreeNode): node is FileTreeNode {
+  return node.type === 'file'
+}
+export function isSuiteNode(node: UITaskTreeNode): node is SuiteTreeNode {
+  return node.type === 'suite'
+}
+
+export function isParentNode(node: UITaskTreeNode): node is FileTreeNode | SuiteTreeNode {
+  return node.type === 'file' || node.type === 'suite'
+}
+
+export function createOrUpdateFileNode(
+  file: File,
+  nodes: Map<string, UITaskTreeNode>,
+  rootTasks: FileTreeNode[],
+  collect = false,
+) {
+  let fileNode = nodes.get(file.id) as FileTreeNode | undefined
+
+  if (fileNode) {
+    if (explorerTree.isUITaskDone(fileNode)) {
+      return
+    }
+
+    fileNode.state = file.result?.state
+    fileNode.mode = file.mode
+    fileNode.duration = file.result?.duration
+    fileNode.collectDuration = file.collectDuration
+    fileNode.setupDuration = file.setupDuration
+    fileNode.environmentLoad = file.environmentLoad
+    fileNode.prepareDuration = file.prepareDuration
+  }
+  else {
+    fileNode = {
+      id: file.id,
+      parentId: 'root',
+      name: file.name,
+      mode: file.mode,
+      expandable: true,
+      expanded: false,
+      type: 'file',
+      tasks: [],
+      indent: 0,
+      duration: file.result?.duration,
+      filepath: file.filepath,
+      projectName: file.projectName || '',
+      projectNameColor: getProjectNameColor(file.projectName),
+      collectDuration: file.collectDuration,
+      setupDuration: file.setupDuration,
+      environmentLoad: file.environmentLoad,
+      prepareDuration: file.prepareDuration,
+      state: file.result?.state,
+    }
+    nodes.set(file.id, fileNode)
+    rootTasks.push(fileNode)
+  }
+  if (collect) {
+    for (let i = 0; i < file.tasks.length; i++) {
+      createOrUpdateNode(file.id, file.tasks[i], nodes, true)
+    }
+  }
+
+  if (isTaskDone(file)) {
+    explorerTree.taskDone(fileNode.id)
+  }
+}
+
+export function createOrUpdateSuiteTask(
+  id: string,
+  nodes: Map<string, UITaskTreeNode>,
+  all: boolean,
+) {
+  const node = nodes.get(id)
+  if (!node || !isParentNode(node) || explorerTree.isUITaskDone(node)) {
+    return
+  }
+
+  const task = client.state.idMap.get(id)
+  // if no children just return
+  if (!task || !isTaskSuite(task)) {
+    return
+  }
+
+  // update the node
+  createOrUpdateNode(node.parentId, task, nodes, all && task.tasks.length > 0)
+
+  if (isTaskDone(task)) {
+    explorerTree.taskDone(task.id)
+  }
+
+  return [node, task] as const
+}
+
+export function createOrUpdateNodeTask(
+  id: string,
+  nodes: Map<string, UITaskTreeNode>,
+) {
+  const node = nodes.get(id)
+  if (!node || explorerTree.isUITaskDone(node)) {
+    return
+  }
+
+  const task = client.state.idMap.get(id)
+  // if no children just return
+  if (!task || !isAtomTest(task)) {
+    return
+  }
+
+  createOrUpdateNode(node.parentId, task, nodes, false)
+}
+
+export function createOrUpdateNode(
+  parentId: string,
+  task: Task,
+  nodes: Map<string, UITaskTreeNode>,
+  createAll: boolean,
+) {
+  const node = nodes.get(parentId) as ParentTreeNode | undefined
+  let taskNode: UITaskTreeNode | undefined
+  if (node) {
+    taskNode = nodes.get(task.id) as UITaskTreeNode | undefined
+    if (taskNode) {
+      if (explorerTree.isUITaskDone(taskNode)) {
+        return
+      }
+
+      taskNode.mode = task.mode
+      taskNode.duration = task.result?.duration
+      taskNode.state = task.result?.state
+      if (isSuiteNode(taskNode)) {
+        taskNode.typecheck = task.meta?.typecheck
+      }
+    }
+    else {
+      if (isAtomTest(task)) {
+        taskNode = {
+          id: task.id,
+          parentId,
+          name: task.name,
+          mode: task.mode,
+          type: task.type,
+          expandable: false,
+          expanded: false,
+          indent: node.indent + 1,
+          duration: task.result?.duration,
+          state: task.result?.state,
+        }
+      }
+      else {
+        taskNode = {
+          id: task.id,
+          parentId,
+          name: task.name,
+          mode: task.mode,
+          typecheck: task.meta?.typecheck,
+          type: 'suite',
+          expandable: true,
+          expanded: false,
+          tasks: [],
+          indent: node.indent + 1,
+          duration: task.result?.duration,
+          state: task.result?.state,
+        } as SuiteTreeNode
+      }
+      nodes.set(task.id, taskNode)
+      node.tasks.push(taskNode)
+    }
+    if (createAll && isTaskSuite(task)) {
+      for (let i = 0; i < task.tasks.length; i++) {
+        createOrUpdateNode(task.id, task.tasks[i], nodes, createAll)
+      }
+    }
+
+    if (isTaskDone(task)) {
+      explorerTree.taskDone(task.id)
+    }
+  }
+}
diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts
index 93aec53e92c6..2a25ca42b84e 100644
--- a/packages/ui/client/composables/navigation.ts
+++ b/packages/ui/client/composables/navigation.ts
@@ -1,5 +1,6 @@
-import type { File } from 'vitest'
-import { client, config, findById, testRunState } from './client'
+import type { File } from '@vitest/runner'
+import { client, config, findById } from './client'
+import { testRunState } from './client/state'
 import { activeFileId } from './params'
 
 export const currentModule = ref<File>()
@@ -24,10 +25,6 @@ export const detailSizes = useLocalStorage<[left: number, right: number]>(
   },
 )
 
-export const openedTreeItems = useLocalStorage<string[]>(
-  'vitest-ui_task-tree-opened',
-  [],
-)
 // TODO
 // For html report preview, "coverage.reportsDirectory" must be explicitly set as a subdirectory of html report.
 // Handling other cases seems difficult, so this limitation is mentioned in the documentation for now.
diff --git a/packages/ui/client/composables/summary.ts b/packages/ui/client/composables/summary.ts
deleted file mode 100644
index ecb39d985a71..000000000000
--- a/packages/ui/client/composables/summary.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { hasFailedSnapshot } from '@vitest/ws-client'
-import type { Custom, Task, Test } from 'vitest'
-import { files, testRunState } from '~/composables/client'
-
-type Nullable<T> = T | null | undefined
-type Arrayable<T> = T | Array<T>
-
-// files
-export const filesFailed = computed(() =>
-  files.value.filter(f => f.result?.state === 'fail'),
-)
-export const filesSuccess = computed(() =>
-  files.value.filter(f => f.result?.state === 'pass'),
-)
-export const filesIgnore = computed(() =>
-  files.value.filter(f => f.mode === 'skip' || f.mode === 'todo'),
-)
-export const filesRunning = computed(() =>
-  files.value.filter(
-    f =>
-      !filesFailed.value.includes(f)
-      && !filesSuccess.value.includes(f)
-      && !filesIgnore.value.includes(f),
-  ),
-)
-export const filesSkipped = computed(() =>
-  filesIgnore.value.filter(f => f.mode === 'skip'),
-)
-export const filesSnapshotFailed = computed(() =>
-  files.value.filter(hasFailedSnapshot),
-)
-export const filesTodo = computed(() =>
-  filesIgnore.value.filter(f => f.mode === 'todo'),
-)
-export const finished = computed(() => testRunState.value === 'idle')
-// tests
-export const tests = computed(() => {
-  return getTests(files.value)
-})
-export const testsFailed = computed(() => {
-  return tests.value.filter(f => f.result?.state === 'fail')
-})
-export const testsSuccess = computed(() => {
-  return tests.value.filter(f => f.result?.state === 'pass')
-})
-export const testsIgnore = computed(() =>
-  tests.value.filter(f => f.mode === 'skip' || f.mode === 'todo'),
-)
-export const testsSkipped = computed(() =>
-  testsIgnore.value.filter(f => f.mode === 'skip'),
-)
-export const testsTodo = computed(() =>
-  testsIgnore.value.filter(f => f.mode === 'todo'),
-)
-export const totalTests = computed(
-  () => testsFailed.value.length + testsSuccess.value.length,
-)
-export const time = computed(() => {
-  const t = files.value.reduce((acc, t) => {
-    acc += Math.max(0, t.collectDuration || 0)
-    acc += Math.max(0, t.setupDuration || 0)
-    acc += Math.max(0, t.result?.duration || 0)
-    acc += Math.max(0, t.environmentLoad || 0)
-    acc += Math.max(0, t.prepareDuration || 0)
-    return acc
-  }, 0)
-
-  if (t > 1000) {
-    return `${(t / 1000).toFixed(2)}s`
-  }
-
-  return `${Math.round(t)}ms`
-})
-
-function toArray<T>(array?: Nullable<Arrayable<T>>): Array<T> {
-  array = array || []
-  if (Array.isArray(array)) {
-    return array
-  }
-  return [array]
-}
-
-function isAtomTest(s: Task): s is Test | Custom {
-  return s.type === 'test' || s.type === 'custom'
-}
-
-function getTests(suite: Arrayable<Task>): (Test | Custom)[] {
-  const tests: (Test | Custom)[] = []
-  const arraySuites = toArray(suite)
-  for (const s of arraySuites) {
-    if (isAtomTest(s)) {
-      tests.push(s)
-    }
-    else {
-      for (const task of s.tasks) {
-        if (isAtomTest(task)) {
-          tests.push(task)
-        }
-        else {
-          const taskTests = getTests(task)
-          for (const test of taskTests) {
-            tests.push(test)
-          }
-        }
-      }
-    }
-  }
-  return tests
-}
diff --git a/packages/ui/client/utils/task.ts b/packages/ui/client/utils/task.ts
index 5561d36c6339..b5e59a988099 100644
--- a/packages/ui/client/utils/task.ts
+++ b/packages/ui/client/utils/task.ts
@@ -4,6 +4,13 @@ export function isSuite(task: Task): task is Suite {
   return Object.hasOwnProperty.call(task, 'tasks')
 }
 
+export function isTaskDone(task: Task) {
+  const state = task.result?.state
+  const mode = task.mode
+
+  return state === 'pass' || state === 'fail' || state === 'skip' || mode === 'skip' || mode === 'todo'
+}
+
 export function caseInsensitiveMatch(target: string, str2: string) {
   if (typeof target !== 'string' || typeof str2 !== 'string') {
     return false
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4854c976d334..930987a14d3c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -53,7 +53,8 @@
     "flatted": "^3.3.1",
     "pathe": "^1.1.2",
     "picocolors": "^1.0.1",
-    "sirv": "^2.0.4"
+    "sirv": "^2.0.4",
+    "vue-virtual-scroller": "2.0.0-beta.8"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 462c61b667de..f01e18976982 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -6,7 +6,7 @@ import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Unocss from 'unocss/vite'
 import Pages from 'vite-plugin-pages'
-import { presetAttributify, presetIcons, presetUno } from 'unocss'
+import { presetAttributify, presetIcons, presetUno, transformerDirectives } from 'unocss'
 
 // for debug:
 // open a static file serve to share the report json
@@ -42,10 +42,14 @@ export const config: UserConfig = {
         'bg-active': 'bg-gray-500:8',
         'bg-hover': 'bg-gray-500:20',
         'border-base': 'border-gray-500:10',
+        'focus-base': 'border-gray-500 dark:border-gray-400',
 
         'tab-button': 'font-light op50 hover:op80 h-full px-4',
         'tab-button-active': 'op100 bg-gray-500:10',
       },
+      transformers: [
+        transformerDirectives(),
+      ],
     }),
     Components({
       dirs: ['client/components'],
diff --git a/packages/ws-client/src/index.ts b/packages/ws-client/src/index.ts
index 115f6a27f2c6..99d7ae3576f0 100644
--- a/packages/ws-client/src/index.ts
+++ b/packages/ws-client/src/index.ts
@@ -14,7 +14,7 @@ export interface VitestClientOptions {
   reconnectInterval?: number
   reconnectTries?: number
   connectTimeout?: number
-  reactive?: <T>(v: T) => T
+  reactive?: <T>(v: T, forKey: 'state' | 'idMap' | 'filesMap') => T
   ref?: <T>(v: T) => { value: T }
   WebSocketConstructor?: typeof WebSocket
 }
@@ -44,10 +44,10 @@ export function createClient(url: string, options: VitestClientOptions = {}) {
     state: new StateManager(),
     waitForConnection,
     reconnect,
-  }) as VitestClient
+  }, 'state') as VitestClient
 
-  ctx.state.filesMap = reactive(ctx.state.filesMap)
-  ctx.state.idMap = reactive(ctx.state.idMap)
+  ctx.state.filesMap = reactive(ctx.state.filesMap, 'filesMap')
+  ctx.state.idMap = reactive(ctx.state.idMap, 'idMap')
 
   let onMessage: Function
   const functions: WebSocketEvents = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58fd8d866ea5..bc9c380fcb6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -707,6 +707,9 @@ importers:
       vitest:
         specifier: workspace:*
         version: link:../vitest
+      vue-virtual-scroller:
+        specifier: 2.0.0-beta.8
+        version: 2.0.0-beta.8(vue@3.4.27)
     devDependencies:
       '@faker-js/faker':
         specifier: ^8.4.1
@@ -12545,6 +12548,10 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /mitt@2.1.0:
+    resolution: {integrity: sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==}
+    dev: false
+
   /mitt@3.0.0:
     resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==}
     dev: true
@@ -16091,13 +16098,20 @@ packages:
       - supports-color
     dev: true
 
+  /vue-observe-visibility@2.0.0-alpha.1(vue@3.4.27):
+    resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.4.27(typescript@5.4.5)
+    dev: false
+
   /vue-resize@2.0.0-alpha.1(vue@3.4.27):
     resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
       vue: 3.4.27(typescript@5.4.5)
-    dev: true
 
   /vue-router@4.3.3(vue@3.4.27):
     resolution: {integrity: sha512-8Q+u+WP4N2SXY38FDcF2H1dUEbYVHVPtPCPZj/GTZx8RCbiB8AtJP9+YIxn4Vs0svMTNQcLIzka4GH7Utkx9xQ==}
@@ -16128,6 +16142,17 @@ packages:
       typescript: 5.2.2
     dev: true
 
+  /vue-virtual-scroller@2.0.0-beta.8(vue@3.4.27):
+    resolution: {integrity: sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      mitt: 2.1.0
+      vue: 3.4.27(typescript@5.4.5)
+      vue-observe-visibility: 2.0.0-alpha.1(vue@3.4.27)
+      vue-resize: 2.0.0-alpha.1(vue@3.4.27)
+    dev: false
+
   /vue@2.7.10:
     resolution: {integrity: sha512-HmFC70qarSHPXcKtW8U8fgIkF6JGvjEmDiVInTkKZP0gIlEPhlVlcJJLkdGIDiNkIeA2zJPQTWJUI4iWe+AVfg==}
     deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
diff --git a/test/browser/package.json b/test/browser/package.json
index faef5c27aab4..e228e4627c45 100644
--- a/test/browser/package.json
+++ b/test/browser/package.json
@@ -11,6 +11,7 @@
     "test-fixtures": "vitest",
     "test-mocking": "vitest --root ./fixtures/mocking",
     "coverage": "vitest --coverage.enabled --coverage.provider=istanbul --browser.headless=yes",
+    "test:browser:preview": "PROVIDER=preview vitest",
     "test:browser:playwright": "PROVIDER=playwright vitest",
     "test:browser:webdriverio": "PROVIDER=webdriverio vitest"
   },
diff --git a/test/core/test/tab-effect.spec.mjs b/test/core/test/tab-effect.spec.mjs
index 840a43864fdc..8c620cb095fc 100644
--- a/test/core/test/tab-effect.spec.mjs
+++ b/test/core/test/tab-effect.spec.mjs
@@ -1,4 +1,3 @@
-/* eslint-disable eslint-comments/no-unlimited-disable */
 /* eslint-disable */
 import { expect, test, vi } from 'vitest'
 import { join as joinPath } from 'node:path'

From 2f243bff261a15c05d54e7c00400864d8eed7bbb Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 17 Jun 2024 14:22:02 +0200
Subject: [PATCH 02/25] chore: remove optimization

---
 .../ui/client/composables/client/index.ts     |  6 ++--
 .../ui/client/composables/explorer/utils.ts   | 33 +++++++++----------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index 481933c99f37..a1a088e62cf9 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -1,6 +1,6 @@
 import { createClient, getTasks } from '@vitest/ws-client'
 import type { WebSocketStatus } from '@vueuse/core'
-import type { File, ResolvedConfig } from 'vitest'
+import type { File, ResolvedConfig, TaskResultPack } from 'vitest'
 import { reactive as reactiveVue } from 'vue'
 import { createFileTask } from '@vitest/runner/utils'
 import type { BrowserRunnerState } from '../../../types'
@@ -26,7 +26,7 @@ export const client = (function createVitestClient() {
         return ctxKey === 'state' ? reactiveVue(data as any) as any : shallowRef(data)
       },
       handlers: {
-        onTaskUpdate() {
+        onTaskUpdate(packs: TaskResultPack[]) {
           // eslint-disable-next-line no-console
           console.log('onTaskUpdate')
           if (testRunState.value === 'idle' && !onTaskUpdateCalled.value) {
@@ -83,7 +83,7 @@ function clearResults(useFiles: File[]) {
     delete f.result
     getTasks(f).forEach((i) => {
       delete i.result
-      explorerTree.removeTaskDone(i.id)
+      // explorerTree.removeTaskDone(i.id)
       if (map.has(i.id)) {
         map.get(i.id)!.state = undefined
       }
diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
index 037e02464ce1..5f7290757acc 100644
--- a/packages/ui/client/composables/explorer/utils.ts
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -2,8 +2,7 @@ import type { File, Task } from '@vitest/runner'
 import { isAtomTest } from '@vitest/runner/utils'
 import type { FileTreeNode, ParentTreeNode, SuiteTreeNode, UITaskTreeNode } from '~/composables/explorer/types'
 import { client } from '~/composables/client'
-import { getProjectNameColor, isTaskDone, isSuite as isTaskSuite } from '~/utils/task'
-import { explorerTree } from '~/composables/explorer/index'
+import { getProjectNameColor, isSuite as isTaskSuite } from '~/utils/task'
 
 export function isFileNode(node: UITaskTreeNode): node is FileTreeNode {
   return node.type === 'file'
@@ -25,9 +24,9 @@ export function createOrUpdateFileNode(
   let fileNode = nodes.get(file.id) as FileTreeNode | undefined
 
   if (fileNode) {
-    if (explorerTree.isUITaskDone(fileNode)) {
-      return
-    }
+    // if (explorerTree.isUITaskDone(fileNode)) {
+    //   return
+    // }
 
     fileNode.state = file.result?.state
     fileNode.mode = file.mode
@@ -67,9 +66,9 @@ export function createOrUpdateFileNode(
     }
   }
 
-  if (isTaskDone(file)) {
-    explorerTree.taskDone(fileNode.id)
-  }
+  // if (isTaskDone(file)) {
+  //   explorerTree.taskDone(fileNode.id)
+  // }
 }
 
 export function createOrUpdateSuiteTask(
@@ -78,7 +77,7 @@ export function createOrUpdateSuiteTask(
   all: boolean,
 ) {
   const node = nodes.get(id)
-  if (!node || !isParentNode(node) || explorerTree.isUITaskDone(node)) {
+  if (!node || !isParentNode(node)/* || explorerTree.isUITaskDone(node) */) {
     return
   }
 
@@ -91,9 +90,9 @@ export function createOrUpdateSuiteTask(
   // update the node
   createOrUpdateNode(node.parentId, task, nodes, all && task.tasks.length > 0)
 
-  if (isTaskDone(task)) {
-    explorerTree.taskDone(task.id)
-  }
+  // if (isTaskDone(task)) {
+  //   explorerTree.taskDone(task.id)
+  // }
 
   return [node, task] as const
 }
@@ -103,7 +102,7 @@ export function createOrUpdateNodeTask(
   nodes: Map<string, UITaskTreeNode>,
 ) {
   const node = nodes.get(id)
-  if (!node || explorerTree.isUITaskDone(node)) {
+  if (!node/* || explorerTree.isUITaskDone(node) */) {
     return
   }
 
@@ -127,9 +126,9 @@ export function createOrUpdateNode(
   if (node) {
     taskNode = nodes.get(task.id) as UITaskTreeNode | undefined
     if (taskNode) {
-      if (explorerTree.isUITaskDone(taskNode)) {
+      /* if (explorerTree.isUITaskDone(taskNode)) {
         return
-      }
+      } */
 
       taskNode.mode = task.mode
       taskNode.duration = task.result?.duration
@@ -178,8 +177,8 @@ export function createOrUpdateNode(
       }
     }
 
-    if (isTaskDone(task)) {
+    /* if (isTaskDone(task)) {
       explorerTree.taskDone(task.id)
-    }
+    } */
   }
 }

From 099a5041c492e29c446fbd96947218035e0a97a4 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 17 Jun 2024 14:34:16 +0200
Subject: [PATCH 03/25] chore: fix lint

---
 packages/ui/client/composables/client/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index a1a088e62cf9..d52ff599b017 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -26,7 +26,7 @@ export const client = (function createVitestClient() {
         return ctxKey === 'state' ? reactiveVue(data as any) as any : shallowRef(data)
       },
       handlers: {
-        onTaskUpdate(packs: TaskResultPack[]) {
+        onTaskUpdate(_packs: TaskResultPack[]) {
           // eslint-disable-next-line no-console
           console.log('onTaskUpdate')
           if (testRunState.value === 'idle' && !onTaskUpdateCalled.value) {

From b0a8491b4df100579ad91892df2da0ec6cb89e28 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 17 Jun 2024 14:49:26 +0200
Subject: [PATCH 04/25] fix: missing expand/collapse icon

---
 packages/ui/client/components/explorer/Explorer.vue | 4 +++-
 packages/ui/client/components/explorer/TaskItem.vue | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index bb5d7d933c77..32c6a32f02d8 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { File, Task } from '@vitest/runner'
+
+// @ts-expect-error missing types
 import { RecycleScroller } from 'vue-virtual-scroller'
+
 import { activeFileId } from '~/composables/params'
 import { useSearch } from '~/composables/explorer/search'
-// @ts-expect-error missing types
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
diff --git a/packages/ui/client/components/explorer/TaskItem.vue b/packages/ui/client/components/explorer/TaskItem.vue
index 97a169e55dec..f6efeca902a6 100644
--- a/packages/ui/client/components/explorer/TaskItem.vue
+++ b/packages/ui/client/components/explorer/TaskItem.vue
@@ -44,11 +44,11 @@ const failedSnapshot = computed(() => task.value && hasFailedSnapshot(task.value
     :aria-label="name"
     :data-current="current"
   >
-    <div v-if="type === 'suite'" pr-1>
-      <div :class="opened ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right op20'" op20 />
+    <div v-if="type === 'file' || type === 'suite'" pr-1>
+      <div :class="opened ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right op20'" op20 />
     </div>
     <StatusIcon :task="task" mr-2 />
-    <div v-if="type === 'suite' && typecheck" class="i-logos:typescript-icon" flex-shrink-0 mr-2 />
+    <div v-if="type === 'file' || 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 -->

From 74cb684070e5cbdeb78e3c619fa5b65adbca099a Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 17 Jun 2024 15:03:11 +0200
Subject: [PATCH 05/25] chore: update lock file

---
 pnpm-lock.yaml | 88 ++++++++++++++++++++++++++------------------------
 1 file changed, 46 insertions(+), 42 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 10430812e52e..8f2d3a3136c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,7 +36,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^2.21.1
-        version: 2.21.1(@vue/compiler-sfc@3.4.27)(eslint@9.5.0)(typescript@5.4.5)(vitest@packages+vitest)
+        version: 2.21.1(@vue/compiler-sfc@3.4.29)(eslint@9.5.0)(typescript@5.4.5)(vitest@packages+vitest)
       '@antfu/ni':
         specifier: ^0.21.12
         version: 0.21.12
@@ -707,6 +707,9 @@ importers:
       vitest:
         specifier: workspace:*
         version: link:../vitest
+      vue-virtual-scroller:
+        specifier: 2.0.0-beta.8
+        version: 2.0.0-beta.8(vue@3.4.29)
     devDependencies:
       '@faker-js/faker':
         specifier: ^8.4.1
@@ -719,7 +722,7 @@ importers:
         version: 1.1.43
       '@testing-library/vue':
         specifier: ^8.1.0
-        version: 8.1.0(@vue/compiler-sfc@3.4.27)(vue@3.4.29)
+        version: 8.1.0(@vue/compiler-sfc@3.4.29)(vue@3.4.29)
       '@types/codemirror':
         specifier: ^5.60.15
         version: 5.60.15
@@ -782,7 +785,7 @@ importers:
         version: 5.2.6(@types/node@20.14.2)
       vite-plugin-pages:
         specifier: ^0.32.2
-        version: 0.32.2(@vue/compiler-sfc@3.4.27)(vite@5.2.6)(vue-router@4.3.3)
+        version: 0.32.2(@vue/compiler-sfc@3.4.29)(vite@5.2.6)(vue-router@4.3.3)
       vue:
         specifier: ^3.4.29
         version: 3.4.29(typescript@5.4.5)
@@ -1552,7 +1555,7 @@ packages:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  /@antfu/eslint-config@2.21.1(@vue/compiler-sfc@3.4.27)(eslint@9.5.0)(typescript@5.4.5)(vitest@packages+vitest):
+  /@antfu/eslint-config@2.21.1(@vue/compiler-sfc@3.4.29)(eslint@9.5.0)(typescript@5.4.5)(vitest@packages+vitest):
     resolution: {integrity: sha512-CG7U7nihU73zufrxe5Rr4pxsHrW60GXl9yzRpRY+ImGQ2CVhd0eb3fqJYdNwDJBgKgqHGWX4p1ovYvno/jfWHA==}
     hasBin: true
     peerDependencies:
@@ -1624,7 +1627,7 @@ packages:
       eslint-plugin-vitest: 0.5.4(@typescript-eslint/eslint-plugin@7.13.0)(eslint@9.5.0)(typescript@5.4.5)(vitest@packages+vitest)
       eslint-plugin-vue: 9.26.0(eslint@9.5.0)
       eslint-plugin-yml: 1.14.0(eslint@9.5.0)
-      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.4.27)(eslint@9.5.0)
+      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.4.29)(eslint@9.5.0)
       globals: 15.4.0
       jsonc-eslint-parser: 2.4.0
       local-pkg: 0.5.0
@@ -5289,7 +5292,7 @@ packages:
     dependencies:
       '@testing-library/dom': 10.1.0
 
-  /@testing-library/vue@8.1.0(@vue/compiler-sfc@3.4.27)(vue@3.4.29):
+  /@testing-library/vue@8.1.0(@vue/compiler-sfc@3.4.29)(vue@3.4.29):
     resolution: {integrity: sha512-ls4RiHO1ta4mxqqajWRh8158uFObVrrtAPoxk7cIp4HrnQUj/ScKzqz53HxYpG3X6Zb7H2v+0eTGLSoy8HQ2nA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -5301,7 +5304,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.24.4
       '@testing-library/dom': 9.3.4
-      '@vue/compiler-sfc': 3.4.27
+      '@vue/compiler-sfc': 3.4.29
       '@vue/test-utils': 2.4.6
       vue: 3.4.29(typescript@5.4.5)
     dev: true
@@ -6305,20 +6308,6 @@ packages:
       source-map-js: 1.2.0
     dev: true
 
-  /@vue/compiler-sfc@3.4.27:
-    resolution: {integrity: sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==}
-    dependencies:
-      '@babel/parser': 7.24.7
-      '@vue/compiler-core': 3.4.27
-      '@vue/compiler-dom': 3.4.27
-      '@vue/compiler-ssr': 3.4.27
-      '@vue/shared': 3.4.27
-      estree-walker: 2.0.2
-      magic-string: 0.30.10
-      postcss: 8.4.38
-      source-map-js: 1.2.0
-    dev: true
-
   /@vue/compiler-sfc@3.4.29:
     resolution: {integrity: sha512-zygDcEtn8ZimDlrEQyLUovoWgKQic6aEQqRXce2WXBvSeHbEbcAsXyCk9oG33ZkyWH4sl9D3tkYc1idoOkdqZQ==}
     dependencies:
@@ -6346,13 +6335,6 @@ packages:
       '@vue/shared': 3.4.26
     dev: true
 
-  /@vue/compiler-ssr@3.4.27:
-    resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==}
-    dependencies:
-      '@vue/compiler-dom': 3.4.27
-      '@vue/shared': 3.4.27
-    dev: true
-
   /@vue/compiler-ssr@3.4.29:
     resolution: {integrity: sha512-rFbwCmxJ16tDp3N8XCx5xSQzjhidYjXllvEcqX/lopkoznlNPz3jyy0WGJCyhAaVQK677WWFt3YO/WUEkMMUFQ==}
     dependencies:
@@ -6418,8 +6400,8 @@ packages:
         optional: true
     dependencies:
       '@volar/language-core': 2.3.0
-      '@vue/compiler-dom': 3.4.27
-      '@vue/shared': 3.4.27
+      '@vue/compiler-dom': 3.4.29
+      '@vue/shared': 3.4.29
       computeds: 0.0.1
       minimatch: 9.0.4
       path-browserify: 1.0.1
@@ -6508,13 +6490,13 @@ packages:
       vue: 3.4.26(typescript@5.4.5)
     dev: true
 
-  /@vue/server-renderer@3.4.27(vue@3.4.21):
-    resolution: {integrity: sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==}
+  /@vue/server-renderer@3.4.29(vue@3.4.21):
+    resolution: {integrity: sha512-HMLCmPI2j/k8PVkSBysrA2RxcxC5DgBiCdj7n7H2QtR8bQQPqKAe8qoaxLcInzouBmzwJ+J0x20ygN/B5mYBng==}
     peerDependencies:
-      vue: 3.4.27
+      vue: 3.4.29
     dependencies:
-      '@vue/compiler-ssr': 3.4.27
-      '@vue/shared': 3.4.27
+      '@vue/compiler-ssr': 3.4.29
+      '@vue/shared': 3.4.29
       vue: 3.4.21(typescript@5.4.5)
     dev: true
     optional: true
@@ -6551,8 +6533,8 @@ packages:
       js-beautify: 1.14.6
       vue: 3.4.21(typescript@5.4.5)
     optionalDependencies:
-      '@vue/compiler-dom': 3.4.27
-      '@vue/server-renderer': 3.4.27(vue@3.4.21)
+      '@vue/compiler-dom': 3.4.29
+      '@vue/server-renderer': 3.4.29(vue@3.4.21)
     dev: true
 
   /@vue/test-utils@2.4.6:
@@ -9356,13 +9338,13 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.4.27)(eslint@9.5.0):
+  /eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.4.29)(eslint@9.5.0):
     resolution: {integrity: sha512-PfpJ4uKHnqeL/fXUnzYkOax3aIenlwewXRX8jFinA1a2yCFnLgMuiH3xvCgvHHUlV2xJWQHbCTdiJWGwb3NqpQ==}
     peerDependencies:
       '@vue/compiler-sfc': ^3.3.0
       eslint: ^8.50.0 || ^9.0.0
     dependencies:
-      '@vue/compiler-sfc': 3.4.27
+      '@vue/compiler-sfc': 3.4.29
       eslint: 9.5.0
     dev: true
 
@@ -12409,6 +12391,10 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /mitt@2.1.0:
+    resolution: {integrity: sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==}
+    dev: false
+
   /mitt@3.0.0:
     resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==}
     dev: true
@@ -15641,7 +15627,7 @@ packages:
       vfile-message: 4.0.2
     dev: true
 
-  /vite-plugin-pages@0.32.2(@vue/compiler-sfc@3.4.27)(vite@5.2.6)(vue-router@4.3.3):
+  /vite-plugin-pages@0.32.2(@vue/compiler-sfc@3.4.29)(vite@5.2.6)(vue-router@4.3.3):
     resolution: {integrity: sha512-wX4lRlylcTggwHUH7bV1SVJpQMz4ZUkbzzAbbBBH5M7c/9Yx5rAqrjYELIca6vLCoCpSd+r6/WI7KnvRK/Drcg==}
     peerDependencies:
       '@solidjs/router': '*'
@@ -15660,7 +15646,7 @@ packages:
         optional: true
     dependencies:
       '@types/debug': 4.1.12
-      '@vue/compiler-sfc': 3.4.27
+      '@vue/compiler-sfc': 3.4.29
       debug: 4.3.5
       deep-equal: 2.2.3
       extract-comments: 1.1.0
@@ -15978,13 +15964,20 @@ packages:
       - supports-color
     dev: true
 
+  /vue-observe-visibility@2.0.0-alpha.1(vue@3.4.29):
+    resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.4.29(typescript@5.4.5)
+    dev: false
+
   /vue-resize@2.0.0-alpha.1(vue@3.4.29):
     resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
       vue: 3.4.29(typescript@5.4.5)
-    dev: true
 
   /vue-router@4.3.3(vue@3.4.29):
     resolution: {integrity: sha512-8Q+u+WP4N2SXY38FDcF2H1dUEbYVHVPtPCPZj/GTZx8RCbiB8AtJP9+YIxn4Vs0svMTNQcLIzka4GH7Utkx9xQ==}
@@ -16015,6 +16008,17 @@ packages:
       typescript: 5.2.2
     dev: true
 
+  /vue-virtual-scroller@2.0.0-beta.8(vue@3.4.29):
+    resolution: {integrity: sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      mitt: 2.1.0
+      vue: 3.4.29(typescript@5.4.5)
+      vue-observe-visibility: 2.0.0-alpha.1(vue@3.4.29)
+      vue-resize: 2.0.0-alpha.1(vue@3.4.29)
+    dev: false
+
   /vue@2.7.10:
     resolution: {integrity: sha512-HmFC70qarSHPXcKtW8U8fgIkF6JGvjEmDiVInTkKZP0gIlEPhlVlcJJLkdGIDiNkIeA2zJPQTWJUI4iWe+AVfg==}
     deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.

From 722d73434ea7c3da5222c2359c42bb21aad73375 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 17 Jun 2024 15:03:27 +0200
Subject: [PATCH 06/25] chore: reduce filter font size

---
 packages/ui/client/components/FilterStatus.vue      | 2 +-
 packages/ui/client/components/explorer/Explorer.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/client/components/FilterStatus.vue b/packages/ui/client/components/FilterStatus.vue
index 449731967dab..12ea58b12631 100644
--- a/packages/ui/client/components/FilterStatus.vue
+++ b/packages/ui/client/components/FilterStatus.vue
@@ -5,7 +5,7 @@ const modelValue = defineModel<boolean | null>()
 
 <template>
   <label
-    class="font-light text-sm checkbox flex items-center cursor-pointer py-1 text-md w-full gap-y-1 mb-1px"
+    class="font-light text-sm checkbox flex items-center cursor-pointer py-1 text-sm w-full gap-y-1 mb-1px"
     v-bind="$attrs"
     @click.prevent="modelValue = !modelValue"
   >
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 32c6a32f02d8..22f58e92afe3 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -101,7 +101,7 @@ useResizeObserver(testExplorerRef, (entries) => {
       >
         <div :class="filterHeaderClass" flex="~ gap-2 items-center">
           <div aria-hidden="true" class="i-carbon:filter" />
-          <div flex-grow-1>
+          <div flex-grow-1 text-sm font-bold="">
             Filter
           </div>
           <IconButton

From 3ad2ad4143fbbe930614dd05337f53f80aff6437 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 18 Jun 2024 18:03:53 +0200
Subject: [PATCH 07/25] chore: update logic for typecheck iin meta

---
 packages/ui/client/composables/explorer/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
index 5f7290757acc..78eb035d1539 100644
--- a/packages/ui/client/composables/explorer/utils.ts
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -134,7 +134,7 @@ export function createOrUpdateNode(
       taskNode.duration = task.result?.duration
       taskNode.state = task.result?.state
       if (isSuiteNode(taskNode)) {
-        taskNode.typecheck = task.meta?.typecheck
+        taskNode.typecheck = !!task.meta && 'typecheck' in task.meta
       }
     }
     else {
@@ -158,7 +158,7 @@ export function createOrUpdateNode(
           parentId,
           name: task.name,
           mode: task.mode,
-          typecheck: task.meta?.typecheck,
+          typecheck: !!task.meta && 'typecheck' in task.meta,
           type: 'suite',
           expandable: true,
           expanded: false,

From 5b34b6b62c8b56c92afc22abb3ca67ed129d6cf9 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 18 Jun 2024 20:14:18 +0200
Subject: [PATCH 08/25] chore: add vertical lines to the explorer

---
 packages/ui/client/components.d.ts            |   1 -
 .../client/components/explorer/Explorer.vue   |   8 +-
 .../components/explorer/ExplorerItem.vue      | 161 +++++++++++++-----
 .../client/components/explorer/TaskItem.vue   | 102 -----------
 packages/ui/vite.config.ts                    |   1 +
 5 files changed, 117 insertions(+), 156 deletions(-)
 delete mode 100644 packages/ui/client/components/explorer/TaskItem.vue

diff --git a/packages/ui/client/components.d.ts b/packages/ui/client/components.d.ts
index c8c25c1ad1bb..de49b1ec7bef 100644
--- a/packages/ui/client/components.d.ts
+++ b/packages/ui/client/components.d.ts
@@ -28,7 +28,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     StatusIcon: typeof import('./components/StatusIcon.vue')['default']
-    TaskItem: typeof import('./components/explorer/TaskItem.vue')['default']
     TestFilesEntry: typeof import('./components/dashboard/TestFilesEntry.vue')['default']
     TestsEntry: typeof import('./components/dashboard/TestsEntry.vue')['default']
     TestsFilesContainer: typeof import('./components/dashboard/TestsFilesContainer.vue')['default']
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 22f58e92afe3..887b0a20cbe6 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -193,11 +193,6 @@ useResizeObserver(testExplorerRef, (entries) => {
             :item-size="28"
             :items="uiEntries"
           >
-            <!--            <DynamicScrollerItem
-              :item="item"
-              :data-id="item.id"
-              :active="active"
-            > -->
             <template #default="{ item }">
               <ExplorerItem
                 :task-id="item.id"
@@ -206,7 +201,7 @@ useResizeObserver(testExplorerRef, (entries) => {
                 :current="activeFileId === item.id"
                 :indent="item.indent"
                 :name="item.name"
-                :typecheck="item.typecheck"
+                :typecheck="item.typecheck === true"
                 :project-name="item.projectName ?? ''"
                 :project-name-color="item.projectNameColor ?? ''"
                 :state="item.state"
@@ -217,7 +212,6 @@ useResizeObserver(testExplorerRef, (entries) => {
                 :on-item-click="onItemClick"
               />
             </template>
-            <!--            </DynamicScrollerItem> -->
           </RecycleScroller>
         </template>
       </DetailsPanel>
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 957b23210df2..51d7f5e147f3 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { Task, TaskState } from '@vitest/runner'
 import { nextTick } from 'vue'
-import { client, runFiles } from '~/composables/client'
+import { hasFailedSnapshot } from 'vitest/src/utils'
+import { client, isReport, runFiles } from '~/composables/client'
 import { coverageEnabled } from '~/composables/navigation'
 import type { TaskTreeNodeType } from '~/composables/explorer/types'
 import { explorerTree } from '~/composables/explorer'
@@ -14,6 +15,7 @@ const {
   current,
   opened,
   expandable,
+  typecheck,
   type,
   onItemClick,
 } = defineProps<{
@@ -33,6 +35,12 @@ const {
   onItemClick?: (task: Task) => void
 }>()
 
+const task = computed(() => {
+  return client.state.idMap.get(taskId)
+})
+
+const failedSnapshot = computed(() => task.value && hasFailedSnapshot(task.value))
+
 function toggleOpen() {
   if (!expandable) {
     return
@@ -59,59 +67,120 @@ function updateSnapshot(task: Task) {
   return client.rpc.updateSnapshot(task.file)
 }
 
-const styles = computed(() => {
-  if (indent === 0) {
-    return null
+const data = computed(() => {
+  return indent <= 0 ? [] : Array.from({ length: indent }, (_, i) => `${taskId}-${i}`)
+})
+const gridStyles = computed(() => {
+  const entries = data.value
+  const gridColumns: string[] = []
+  // folder icon
+  if (type === 'file' || type === 'suite') {
+    gridColumns.push('min-content')
   }
 
-  return {
-    paddingLeft: indent ? `${indent * 0.75 + (type === 'suite' ? 0.50 : 1.75)}rem` : '1rem',
+  // status icon
+  gridColumns.push('min-content')
+  // typecheck icon
+  if (type === 'suite' && typecheck) {
+    gridColumns.push('min-content')
   }
-})
 
-/* const containerRef = ref<HTMLDivElement | undefined>()
-const bottom = ref<number>(0)
+  // text content
+  gridColumns.push('minmax(0, 1fr)')
+  // buttons
+  if (type === 'file') {
+    gridColumns.push('min-content')
+  }
 
-useResizeObserver(containerRef, (entries) => {
-  const { height } = entries[0].contentRect
-  if (isOpened.value) {
-    bottom.value = height
+  if (entries.length === 0) {
+    return `grid-template-columns: ${gridColumns.join(' ')};`
   }
-}) */
+
+  return `padding-left: 1.2rem; grid-template-columns: ${
+    entries.map((_, idx) => idx === 0 ? '1px' : '1.25rem').join(' ')
+  } ${gridColumns.join(' ')};`
+})
 </script>
 
 <template>
-  <div :style="styles">
-    <!-- maybe provide a KEEP STRUCTURE mode, do not filter by search keyword  -->
-    <!-- v-if = keepStructure ||  (!search || caseInsensitiveMatch(task.name, search)) -->
-    <TaskItem
-      :task-id="taskId"
-      :opened="opened"
-      :state="state"
-      :duration="duration"
-      :type="type"
-      :name="name"
-      :typecheck="typecheck"
-      :project-name="projectName"
-      :project-name-color="projectNameColor"
-      :current="current"
-      @click="toggleOpen()"
-      @run="task => onRun(task)"
-      @fix-snapshot="task => updateSnapshot(task)"
-      @preview="task => onItemClick?.(task)"
-    />
-    <!--    <div
-      v-if="nested && task.type === 'suite' && task.tasks.length"
-      v-show="isOpened"
-      flex
-      relative
-    >
-      <div
-        v-if="isOpened"
-        flex mt&#45;&#45;3px ml-15px justify-center
-      >
-        <div w-1px border="x base" mb-9></div>
-      </div>
-    </div> -->
+  <div
+    v-if="task"
+    items-center
+    p="x-2 y-1"
+    grid="~ rows-1 items-center"
+    w-full
+    h-28px
+    border-rounded
+    hover="bg-active"
+    cursor-pointer
+    class="item-wrapper"
+    :style="gridStyles"
+    :aria-label="name"
+    :data-current="current"
+    @click="toggleOpen()"
+  >
+    <template v-if="indent > 0">
+      <div v-for="i in data" :key="i" border="solid border-v-line" class="vertical-line" h-28px inline-flex m-0 />
+    </template>
+    <div v-if="type === 'file' || type === 'suite'" :class="{ 'pr-1': type === 'file', 'pl-2': type === 'suite' }">
+      <div :class="opened ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right op20'" op20 />
+    </div>
+    <StatusIcon :task="task" mr-2 :class="{ 'ml-2': type !== 'suite' && indent > 0, 'ml-1': type === 'suite' && indent > 0 }" />
+    <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>
+        {{ name }}
+      </span>
+      <span v-if="typeof duration === 'number'" text="xs" op20 style="white-space: nowrap">
+        {{ duration > 0 ? duration : '< 1' }}ms
+      </span>
+    </div>
+    <div v-if="type === 'file'" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
+      <IconAction
+        v-if="!isReport && failedSnapshot"
+        v-tooltip.bottom="'Fix failed snapshot(s)'"
+        data-testid="btn-fix-snapshot"
+        title="Fix failed snapshot(s)"
+        icon="i-carbon-result-old"
+        @click.prevent.stop="updateSnapshot(task)"
+      />
+      <IconAction
+        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)"
+      />
+      <IconAction
+        v-if="!isReport"
+        v-tooltip.bottom="'Run current test'"
+        data-testid="btn-run-test"
+        title="Run current test"
+        icon="i-carbon:play-filled-alt"
+        text-green5
+        @click.prevent.stop="onRun(task)"
+      />
+    </div>
   </div>
 </template>
+
+<style scoped>
+.vertical-line:first-of-type {
+  @apply border-l-2px;
+}
+.vertical-line + .vertical-line {
+  @apply border-r-1px;
+}
+.test-actions {
+  display: none;
+}
+
+.item-wrapper:hover .test-actions,
+.item-wrapper[data-current="true"] .test-actions {
+  display: flex;
+}
+</style>
diff --git a/packages/ui/client/components/explorer/TaskItem.vue b/packages/ui/client/components/explorer/TaskItem.vue
deleted file mode 100644
index f6efeca902a6..000000000000
--- a/packages/ui/client/components/explorer/TaskItem.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import type { Task, TaskState } from '@vitest/runner'
-import { hasFailedSnapshot } from '@vitest/ws-client'
-import { isReport } from '~/constants'
-import { client } from '~/composables/client'
-import type { TaskTreeNodeType } from '~/composables/explorer/types'
-
-const props = defineProps<{
-  taskId: string
-  name: string
-  typecheck?: boolean
-  duration?: number
-  projectName?: string
-  projectNameColor: string
-  type: TaskTreeNodeType
-  state?: TaskState
-  opened: boolean
-  current: boolean
-}>()
-
-const emit = defineEmits<{
-  (event: 'preview', value: Task): void
-  (event: 'run', value: Task): void
-  (event: 'fixSnapshot', value: Task): void
-}>()
-
-const task = computed(() => {
-  return client.state.idMap.get(props.taskId)
-})
-
-const failedSnapshot = computed(() => task.value && hasFailedSnapshot(task.value))
-</script>
-
-<template>
-  <div
-    v-if="task"
-    flex="~ row"
-    items-center
-    p="x-2 y-1"
-    border-rounded
-    cursor-pointer
-    hover="bg-active"
-    class="item-wrapper"
-    :aria-label="name"
-    :data-current="current"
-  >
-    <div v-if="type === 'file' || type === 'suite'" pr-1>
-      <div :class="opened ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right op20'" op20 />
-    </div>
-    <StatusIcon :task="task" mr-2 />
-    <div v-if="type === 'file' || 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>
-        {{ name }}
-      </span>
-      <span v-if="typeof duration === 'number'" text="xs" op20 style="white-space: nowrap">
-        {{ duration > 0 ? duration : '< 1' }}ms
-      </span>
-    </div>
-    <div v-if="type === 'file'" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
-      <IconAction
-        v-if="!isReport && failedSnapshot"
-        v-tooltip.bottom="'Fix failed snapshot(s)'"
-        data-testid="btn-fix-snapshot"
-        title="Fix failed snapshot(s)"
-        icon="i-carbon-result-old"
-        @click.prevent.stop="emit('fixSnapshot', task)"
-      />
-      <IconAction
-        v-tooltip.bottom="'Open test details'"
-        data-testid="btn-open-details"
-        title="Open test details"
-        icon="i-carbon-intrusion-prevention"
-        @click.prevent.stop="emit('preview', task)"
-      />
-      <IconAction
-        v-if="!isReport"
-        v-tooltip.bottom="'Run current test'"
-        data-testid="btn-run-test"
-        title="Run current test"
-        icon="i-carbon:play-filled-alt"
-        text-green5
-        @click.prevent.stop="emit('run', task)"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.test-actions {
-  display: none;
-}
-
-.item-wrapper:hover .test-actions,
-.item-wrapper[data-current="true"] .test-actions {
-  display: flex;
-}
-</style>
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index f01e18976982..e653b1313614 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -42,6 +42,7 @@ export const config: UserConfig = {
         'bg-active': 'bg-gray-500:8',
         'bg-hover': 'bg-gray-500:20',
         'border-base': 'border-gray-500:10',
+        'border-v-line': 'border-gray-500:20',
         'focus-base': 'border-gray-500 dark:border-gray-400',
 
         'tab-button': 'font-light op50 hover:op80 h-full px-4',

From 9fc998b391984fedb4f8e39fa1592826a47f8a27 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 18 Jun 2024 20:28:10 +0200
Subject: [PATCH 09/25] chore: remove bold type from filter title

---
 packages/ui/client/components/explorer/Explorer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 887b0a20cbe6..6fd050e87523 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -101,7 +101,7 @@ useResizeObserver(testExplorerRef, (entries) => {
       >
         <div :class="filterHeaderClass" flex="~ gap-2 items-center">
           <div aria-hidden="true" class="i-carbon:filter" />
-          <div flex-grow-1 text-sm font-bold="">
+          <div flex-grow-1 text-sm>
             Filter
           </div>
           <IconButton

From ed60c55ce3fb8aab351316eff8ae234b5d9dd0e6 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 18 Jun 2024 22:59:51 +0200
Subject: [PATCH 10/25] chore: center vertical lines with chevron icon

---
 .../components/explorer/ExplorerItem.vue      | 20 ++++++++-----------
 packages/ui/vite.config.ts                    |  1 -
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 51d7f5e147f3..411a9f729cc0 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -36,6 +36,7 @@ const {
 }>()
 
 const task = computed(() => {
+  console.log(taskId)
   return client.state.idMap.get(taskId)
 })
 
@@ -84,20 +85,15 @@ const gridStyles = computed(() => {
   if (type === 'suite' && typecheck) {
     gridColumns.push('min-content')
   }
-
   // text content
   gridColumns.push('minmax(0, 1fr)')
   // buttons
   if (type === 'file') {
     gridColumns.push('min-content')
   }
-
-  if (entries.length === 0) {
-    return `grid-template-columns: ${gridColumns.join(' ')};`
-  }
-
-  return `padding-left: 1.2rem; grid-template-columns: ${
-    entries.map((_, idx) => idx === 0 ? '1px' : '1.25rem').join(' ')
+  // all the vertical lines with width 1rem and mx-2: always centered
+  return `grid-template-columns: ${
+    entries.map(() => '1rem').join(' ')
   } ${gridColumns.join(' ')};`
 })
 </script>
@@ -107,7 +103,7 @@ const gridStyles = computed(() => {
     v-if="task"
     items-center
     p="x-2 y-1"
-    grid="~ rows-1 items-center"
+    grid="~ rows-1 items-center gap-x-2"
     w-full
     h-28px
     border-rounded
@@ -120,12 +116,12 @@ const gridStyles = computed(() => {
     @click="toggleOpen()"
   >
     <template v-if="indent > 0">
-      <div v-for="i in data" :key="i" border="solid border-v-line" class="vertical-line" h-28px inline-flex m-0 />
+      <div v-for="i in data" :key="i" border="solid gray-500 dark:gray-400" class="vertical-line" h-28px inline-flex mx-2 op20 />
     </template>
-    <div v-if="type === 'file' || type === 'suite'" :class="{ 'pr-1': type === 'file', 'pl-2': type === 'suite' }">
+    <div v-if="type === 'file' || type === 'suite'" w-4>
       <div :class="opened ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right op20'" op20 />
     </div>
-    <StatusIcon :task="task" mr-2 :class="{ 'ml-2': type !== 'suite' && indent > 0, 'ml-1': type === 'suite' && indent > 0 }" />
+    <StatusIcon :task="task" w-4 />
     <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>
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index e653b1313614..f01e18976982 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -42,7 +42,6 @@ export const config: UserConfig = {
         'bg-active': 'bg-gray-500:8',
         'bg-hover': 'bg-gray-500:20',
         'border-base': 'border-gray-500:10',
-        'border-v-line': 'border-gray-500:20',
         'focus-base': 'border-gray-500 dark:border-gray-400',
 
         'tab-button': 'font-light op50 hover:op80 h-full px-4',

From a3617303f8420391007c5ae3ac6540e2168b3665 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 19 Jun 2024 00:56:08 +0200
Subject: [PATCH 11/25] chore: simplify explorer logic

---
 .../client/composables/explorer/collapse.ts   | 16 +++---
 .../client/composables/explorer/collector.ts  | 45 +++++++---------
 .../ui/client/composables/explorer/expand.ts  | 20 ++------
 .../ui/client/composables/explorer/filter.ts  | 51 ++++++++++---------
 .../ui/client/composables/explorer/tree.ts    | 18 +++----
 .../ui/client/composables/explorer/types.ts   |  4 +-
 .../ui/client/composables/explorer/utils.ts   | 49 ++++++++++--------
 7 files changed, 94 insertions(+), 109 deletions(-)

diff --git a/packages/ui/client/composables/explorer/collapse.ts b/packages/ui/client/composables/explorer/collapse.ts
index 4b52037d8462..4ed75cf823e7 100644
--- a/packages/ui/client/composables/explorer/collapse.ts
+++ b/packages/ui/client/composables/explorer/collapse.ts
@@ -1,6 +1,7 @@
-import type { FileTreeNode, UITaskTreeNode } from '~/composables/explorer/types'
+import type { UITaskTreeNode } from '~/composables/explorer/types'
 import { isFileNode, isParentNode } from '~/composables/explorer/utils'
 import { openedTreeItems, treeFilter, uiEntries } from '~/composables/explorer/state'
+import { explorerTree } from '~/composables/explorer/index'
 
 /**
  * Collapse all nodes: all children collapsed.
@@ -17,13 +18,9 @@ import { openedTreeItems, treeFilter, uiEntries } from '~/composables/explorer/s
  * - update uiEntries without child nodes
  *
  * @param id The node id to collapse.
- * @param nodes Tree node map.
  */
-export function runCollapseNode(
-  id: string,
-  nodes: Map<string, UITaskTreeNode>,
-) {
-  const node = nodes.get(id)
+export function runCollapseNode(id: string) {
+  const node = explorerTree.nodes.get(id)
   if (!node || !isParentNode(node)) {
     return
   }
@@ -50,11 +47,10 @@ export function runCollapseNode(
  * - update the filtered expandAll state to false
  * - update uiEntries without child nodes
  *
- * @param nodes The file nodes.
  */
-export function runCollapseAllTask(nodes: FileTreeNode[]) {
+export function runCollapseAllTask() {
   // collapse all nodes
-  collapseAllNodes(nodes)
+  collapseAllNodes(explorerTree.root.tasks)
   const entries = [...uiEntries.value.filter(isFileNode)]
   collapseAllNodes(entries)
   // collapse all nodes
diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
index 84596443edbb..012cf88f2c9e 100644
--- a/packages/ui/client/composables/explorer/collector.ts
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -6,10 +6,8 @@ import { hasFailedSnapshot } from '@vitest/ws-client'
 import type {
   CollectFilteredTests,
   CollectorInfo,
-  FileTreeNode,
   Filter,
   FilteredTests,
-  UITaskTreeNode,
 } from '~/composables/explorer/types'
 import { client, findById } from '~/composables/client'
 import { runFilter, testMatcher } from '~/composables/explorer/filter'
@@ -21,21 +19,20 @@ import {
 import { isSuite } from '~/utils/task'
 import { openedTreeItems, treeFilter, uiFiles } from '~/composables/explorer/state'
 import { expandNodesOnEndRun } from '~/composables/explorer/expand'
+import { explorerTree } from '~/composables/explorer/index'
 
 export function runLoadFiles(
   remoteFiles: File[],
-  rootTasks: FileTreeNode[],
-  nodes: Map<string, UITaskTreeNode>,
   search: string,
   filter: Filter,
 ) {
   remoteFiles.map(f => [`${f.filepath}:${f.projectName || ''}`, f] as const)
     .sort(([a], [b]) => a.localeCompare(b))
-    .map(([, f]) => createOrUpdateFileNode(f, nodes, rootTasks))
+    .map(([, f]) => createOrUpdateFileNode(f))
 
-  uiFiles.value = [...rootTasks]
+  uiFiles.value = [...explorerTree.root.tasks]
   queueMicrotask(() => {
-    runFilter(rootTasks, nodes, search.trim(), {
+    runFilter(search.trim(), {
       failed: filter.failed,
       success: filter.success,
       skipped: filter.skipped,
@@ -47,8 +44,6 @@ export function runLoadFiles(
 export function runCollect(
   start: boolean,
   end: boolean,
-  rootTasks: FileTreeNode[],
-  nodes: Map<string, UITaskTreeNode>,
   summary: CollectorInfo,
   search: string,
   filter: Filter,
@@ -58,6 +53,7 @@ export function runCollect(
   }
 
   queueMicrotask(() => {
+    const rootTasks = explorerTree.root.tasks
     // collect remote children
     for (let i = 0; i < rootTasks.length; i++) {
       const fileNode = rootTasks[i]
@@ -66,18 +62,18 @@ export function runCollect(
         continue
       }
 
-      createOrUpdateFileNode(file, nodes, rootTasks, !start)
+      createOrUpdateFileNode(file, !start)
       const tasks = file.tasks
       if (!tasks?.length) {
         continue
       }
 
-      createOrUpdateEntry(file.tasks, nodes)
+      createOrUpdateEntry(file.tasks)
     }
   })
 
   queueMicrotask(() => {
-    collectData(rootTasks, summary)
+    collectData(summary)
   })
 
   queueMicrotask(() => {
@@ -90,13 +86,11 @@ export function runCollect(
   })
 
   queueMicrotask(() => {
-    doRunFilter(rootTasks, nodes, search, filter)
+    doRunFilter(search, filter)
   })
 }
 
 function doRunFilter(
-  rootTasks: FileTreeNode[],
-  nodes: Map<string, UITaskTreeNode>,
   search: string,
   filter: Filter,
   end = false,
@@ -111,30 +105,32 @@ function doRunFilter(
 
   // refresh explorer
   queueMicrotask(() => {
-    runFilter(rootTasks, nodes, search, filter)
+    runFilter(search, filter)
   })
 
   if (applyExpandNodes) {
     // expand all nodes
     queueMicrotask(() => {
-      expandNodesOnEndRun(ids, nodes, end)
+      expandNodesOnEndRun(ids, end)
       if (resetExpandAll || filtered) {
         treeFilter.value.expandAll = false
       }
     })
 
     // refresh explorer
-    queueMicrotask(() => runFilter(rootTasks, nodes, search, filter))
+    queueMicrotask(() => runFilter(search, filter))
   }
 }
 
-function createOrUpdateEntry(tasks: Task[], nodes: Map<string, UITaskTreeNode>) {
+function createOrUpdateEntry(tasks: Task[]) {
   for (let i = 0; i < tasks.length; i++) {
     const task = tasks[i]
     if (isSuite(task)) {
-      createOrUpdateSuiteTask(task.id, nodes, true)
+      createOrUpdateSuiteTask(task.id, true)
+    }
+    else {
+      createOrUpdateNodeTask(task.id)
     }
-    else { createOrUpdateNodeTask(task.id, nodes) }
   }
 }
 
@@ -156,12 +152,9 @@ export function resetCollectorInfo(summary: CollectorInfo) {
   summary.failedSnapshotEnabled = false
 }
 
-function collectData(
-  files: FileTreeNode[],
-  summary: CollectorInfo,
-) {
+function collectData(summary: CollectorInfo) {
   const idMap = client.state.idMap
-  const filesMap = new Map(files.filter(f => idMap.has(f.id)).map(f => [f.id, f]))
+  const filesMap = new Map(explorerTree.root.tasks.filter(f => idMap.has(f.id)).map(f => [f.id, f]))
   const useFiles = Array.from(filesMap.values()).map(file => [file.id, findById(file.id)] as const)
   const data = {
     files: filesMap.size,
diff --git a/packages/ui/client/composables/explorer/expand.ts b/packages/ui/client/composables/explorer/expand.ts
index 58f833a7d7c1..971487af094a 100644
--- a/packages/ui/client/composables/explorer/expand.ts
+++ b/packages/ui/client/composables/explorer/expand.ts
@@ -1,8 +1,9 @@
 import { filteredFiles, openedTreeItems, treeFilter, uiEntries } from '~/composables/explorer/state'
-import type { FileTreeNode, Filter, UITaskTreeNode } from '~/composables/explorer/types'
+import type { Filter, UITaskTreeNode } from '~/composables/explorer/types'
 import { createOrUpdateNode, createOrUpdateSuiteTask, isFileNode, isParentNode } from '~/composables/explorer/utils'
 import { filterAll, filterTask } from '~/composables/explorer/filter'
 import { findById } from '~/composables/client'
+import { explorerTree } from '~/composables/explorer/index'
 
 /**
  * Expand the node: only direct children will be expanded
@@ -20,19 +21,16 @@ import { findById } from '~/composables/client'
  * - update uiEntries including child nodes
  *
  * @param id The node id to expand.
- * @param nodes Tree node map.
  * @param search The search applied.
  * @param filter The filter applied.
  */
 export function runExpandNode(
   id: string,
-  nodes: Map<string, UITaskTreeNode>,
   search: string,
   filter: Filter,
 ) {
   const entry = createOrUpdateSuiteTask(
     id,
-    nodes,
     false,
   )
   if (!entry) {
@@ -43,7 +41,7 @@ export function runExpandNode(
 
   // create only direct children
   for (const subtask of task.tasks) {
-    createOrUpdateNode(node.id, subtask, nodes, false)
+    createOrUpdateNode(node.id, subtask, false)
   }
 
   // expand the node
@@ -55,7 +53,6 @@ export function runExpandNode(
   // the first node is itself
   const children = new Set(filterTask(
     node,
-    nodes,
     search,
     filter,
   ))
@@ -84,21 +81,15 @@ export function runExpandNode(
  * - update the filtered expandAll state to true
  * - update uiEntries with child nodes
  *
- * @param nodes Tree node map.
- * @param nodeTree Tree node map.
  * @param search The search applied.
  * @param filter The filter applied.
  */
 export function runExpandAll(
-  nodes: FileTreeNode[],
-  nodeTree: Map<string, UITaskTreeNode>,
   search: string,
   filter: Filter,
 ) {
-  expandAllNodes(nodes, false)
+  expandAllNodes(explorerTree.root.tasks, false)
   const entries = [...filterAll(
-    nodes,
-    nodeTree,
     search,
     filter,
   )]
@@ -110,11 +101,10 @@ export function runExpandAll(
 
 export function expandNodesOnEndRun(
   ids: Set<string>,
-  nodes: Map<string, UITaskTreeNode>,
   updateState: boolean,
 ) {
   if (ids.size) {
-    for (const node of nodes.values()) {
+    for (const node of explorerTree.nodes.values()) {
       if (ids.has(node.id)) {
         node.expanded = true
       }
diff --git a/packages/ui/client/composables/explorer/filter.ts b/packages/ui/client/composables/explorer/filter.ts
index 4ba89b9fc393..d0ec2209beb5 100644
--- a/packages/ui/client/composables/explorer/filter.ts
+++ b/packages/ui/client/composables/explorer/filter.ts
@@ -4,9 +4,11 @@ import type { FileTreeNode, Filter, FilterResult, ParentTreeNode, UITaskTreeNode
 import {
   isFileNode,
   isParentNode,
+  isTestNode,
 } from '~/composables/explorer/utils'
 import { client, findById } from '~/composables/client'
 import { filteredFiles, uiEntries } from '~/composables/explorer/state'
+import { explorerTree } from '~/composables/explorer/index'
 
 export function testMatcher(task: Task, search: string, filter: Filter) {
   return task ? matchTask(task, search, filter) : false
@@ -14,20 +16,14 @@ export function testMatcher(task: Task, search: string, filter: Filter) {
 /**
  * Filter child nodes using search, filter and only tests.
  *
- * @param nodes The file nodes.
- * @param nodeTree Tree node map.
  * @param search The search applied.
  * @param filter The filter applied.
  */
 export function runFilter(
-  nodes: FileTreeNode[],
-  nodeTree: Map<string, UITaskTreeNode>,
   search: string,
   filter: Filter,
 ) {
   const entries = [...filterAll(
-    nodes,
-    nodeTree,
     search,
     filter,
   )]
@@ -36,19 +32,16 @@ export function runFilter(
 }
 
 export function* filterAll(
-  nodes: UITaskTreeNode[],
-  nodeTree: Map<string, UITaskTreeNode>,
   search: string,
   filter: Filter,
 ) {
-  for (const node of nodes) {
-    yield * filterTask(node, nodeTree, search, filter)
+  for (const node of explorerTree.root.tasks) {
+    yield * filterTask(node, search, filter)
   }
 }
 
 export function* filterTask(
   node: UITaskTreeNode,
-  nodes: Map<string, UITaskTreeNode>,
   search: string,
   filter: Filter,
 ) {
@@ -58,16 +51,16 @@ export function* filterTask(
 
   for (const entry of visitNode(
     node,
-    nodes,
     treeNodes,
     n => matcher(n, search, filter),
-  )) { list.push(entry) }
+  )) {
+    list.push(entry)
+  }
 
   const filesToShow = new Set<string>()
 
   const entries = [...filterParents(
     list,
-    nodes,
     filter.onlyTests,
     treeNodes,
     filesToShow,
@@ -75,11 +68,11 @@ export function* filterTask(
 
   // we need to remove any child added when filtering: we traverse the full tree
   const parents = new Set(
-    entries.filter(e => isParentNode(e) && e.expanded).map(e => e.id),
+    entries.filter(e => isParentNode(e)).map(e => e.id),
   )
   yield * entries.filter((node) => {
     // all file nodes, or expanded parents, or children of expanded parents
-    return isFileNode(node) || (isParentNode(node) ? node.expanded : parents.has(node.parentId))
+    return isFileNode(node) || (isParentNode(node) ? parents.has(node.id) : parents.has(node.parentId))
   })
 }
 
@@ -89,7 +82,6 @@ function expandCollapseNode(
   treeNodes: Set<string>,
   collapseParents: boolean,
   filesToShow: Set<string>,
-  nodes: Map<string, UITaskTreeNode>,
 ) {
   if (collapseParents) {
     if (isFileNode(child)) {
@@ -101,7 +93,7 @@ function expandCollapseNode(
     }
     // show the parent if at least one child matches the filter
     if (treeNodes.has(child.id)) {
-      const parent = nodes.get(child.parentId)
+      const parent = explorerTree.nodes.get(child.parentId)
       if (parent && isFileNode(parent)) {
         filesToShow.add(parent.id)
       }
@@ -112,7 +104,7 @@ function expandCollapseNode(
   else {
     // show the parent if matches the filter or at least one child matches the filter
     if (match || treeNodes.has(child.id) || filesToShow.has(child.id)) {
-      const parent = nodes.get(child.parentId)
+      const parent = explorerTree.nodes.get(child.parentId)
       if (parent && isFileNode(parent)) {
         filesToShow.add(parent.id)
       }
@@ -124,7 +116,6 @@ function expandCollapseNode(
 
 function* filterParents(
   list: FilterResult[],
-  nodes: Map<string, UITaskTreeNode>,
   collapseParents: boolean,
   treeNodes: Set<string>,
   filesToShow: Set<string>,
@@ -138,14 +129,13 @@ function* filterParents(
         treeNodes,
         collapseParents,
         filesToShow,
-        nodes,
       )
       if (node) {
         yield node
       }
     }
     else if (match) {
-      const parent = nodes.get(child.parentId)
+      const parent = explorerTree.nodes.get(child.parentId)
       if (parent && isFileNode(parent)) {
         filesToShow.add(parent.id)
       }
@@ -198,20 +188,31 @@ function matchTask(
 
 function* visitNode(
   node: UITaskTreeNode,
-  nodes: Map<string, UITaskTreeNode>,
   treeNodes: Set<string>,
   matcher: (node: UITaskTreeNode) => boolean,
 ): Generator<[match: boolean, node: UITaskTreeNode]> {
   const match = matcher(node)
 
   if (match) {
-    treeNodes.add(node.parentId)
+    if (isTestNode(node)) {
+      let parent = explorerTree.nodes.get(node.parentId)
+      while (parent) {
+        treeNodes.add(parent.id)
+        parent = explorerTree.nodes.get(parent.parentId)
+      }
+    }
+    else if (isFileNode(node)) {
+      treeNodes.add(node.id)
+    }
+    else {
+      treeNodes.add(node.parentId)
+    }
   }
 
   yield [match, node]
   if (isParentNode(node)) {
     for (let i = 0; i < node.tasks.length; i++) {
-      yield * visitNode(node.tasks[i], nodes, treeNodes, matcher)
+      yield * visitNode(node.tasks[i], treeNodes, matcher)
     }
   }
 }
diff --git a/packages/ui/client/composables/explorer/tree.ts b/packages/ui/client/composables/explorer/tree.ts
index 39755f1a1a02..4967cf7e7e8c 100644
--- a/packages/ui/client/composables/explorer/tree.ts
+++ b/packages/ui/client/composables/explorer/tree.ts
@@ -24,13 +24,13 @@ export class ExplorerTree {
     // todo: remove also client/index.ts logic with onTaskUpdateCalled
     private resumeEndTimeout = 500,
     private done = new Set<string>(),
-    private root = <RootTreeNode>{
+    public root = <RootTreeNode>{
       id: 'vitest-root-node',
       expandable: true,
       expanded: true,
       tasks: [],
     },
-    private nodes = new Map<string, UITaskTreeNode>(),
+    public nodes = new Map<string, UITaskTreeNode>(),
     public summary = reactive<CollectorInfo>({
       files: 0,
       time: '',
@@ -73,7 +73,7 @@ export class ExplorerTree {
   }
 
   loadFiles(remoteFiles: File[]) {
-    runLoadFiles(remoteFiles, this.root.tasks, this.nodes, search.value.trim(), {
+    runLoadFiles(remoteFiles, search.value.trim(), {
       failed: filter.failed,
       success: filter.success,
       skipped: filter.skipped,
@@ -102,8 +102,6 @@ export class ExplorerTree {
       runCollect(
         start,
         end,
-        this.root.tasks,
-        this.nodes,
         this.summary,
         search.value.trim(),
         {
@@ -140,13 +138,13 @@ export class ExplorerTree {
 
   collapseNode(id: string) {
     queueMicrotask(() => {
-      runCollapseNode(id, this.nodes)
+      runCollapseNode(id)
     })
   }
 
   expandNode(id: string) {
     queueMicrotask(() => {
-      runExpandNode(id, this.nodes, search.value.trim(), {
+      runExpandNode(id, search.value.trim(), {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
@@ -157,13 +155,13 @@ export class ExplorerTree {
 
   collapseAllNodes() {
     queueMicrotask(() => {
-      runCollapseAllTask(this.root.tasks)
+      runCollapseAllTask()
     })
   }
 
   expandAllNodes() {
     queueMicrotask(() => {
-      runExpandAll(this.root.tasks, this.nodes, search.value.trim(), {
+      runExpandAll(search.value.trim(), {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
@@ -174,7 +172,7 @@ export class ExplorerTree {
 
   filterNodes() {
     queueMicrotask(() => {
-      runFilter(this.root.tasks, this.nodes, search.value.trim(), {
+      runFilter(search.value.trim(), {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
diff --git a/packages/ui/client/composables/explorer/types.ts b/packages/ui/client/composables/explorer/types.ts
index 41940225e80b..c1e9cb7e86a7 100644
--- a/packages/ui/client/composables/explorer/types.ts
+++ b/packages/ui/client/composables/explorer/types.ts
@@ -38,13 +38,13 @@ export interface UITaskTreeNode extends TaskTreeNode {
 }
 
 export interface ParentTreeNode extends UITaskTreeNode {
+  children: Set<string>
   tasks: UITaskTreeNode[]
 }
 
-export interface SuiteTreeNode extends UITaskTreeNode {
+export interface SuiteTreeNode extends ParentTreeNode {
   type: 'suite'
   typecheck?: boolean
-  tasks: UITaskTreeNode[]
 }
 
 export interface FileTreeNode extends ParentTreeNode {
diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
index 78eb035d1539..33936bcf0416 100644
--- a/packages/ui/client/composables/explorer/utils.ts
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -3,10 +3,16 @@ import { isAtomTest } from '@vitest/runner/utils'
 import type { FileTreeNode, ParentTreeNode, SuiteTreeNode, UITaskTreeNode } from '~/composables/explorer/types'
 import { client } from '~/composables/client'
 import { getProjectNameColor, isSuite as isTaskSuite } from '~/utils/task'
+import { explorerTree } from '~/composables/explorer/index'
+
+export function isTestNode(node: UITaskTreeNode): node is FileTreeNode {
+  return node.type === 'test' || node.type === 'custom'
+}
 
 export function isFileNode(node: UITaskTreeNode): node is FileTreeNode {
   return node.type === 'file'
 }
+
 export function isSuiteNode(node: UITaskTreeNode): node is SuiteTreeNode {
   return node.type === 'suite'
 }
@@ -17,11 +23,9 @@ export function isParentNode(node: UITaskTreeNode): node is FileTreeNode | Suite
 
 export function createOrUpdateFileNode(
   file: File,
-  nodes: Map<string, UITaskTreeNode>,
-  rootTasks: FileTreeNode[],
   collect = false,
 ) {
-  let fileNode = nodes.get(file.id) as FileTreeNode | undefined
+  let fileNode = explorerTree.nodes.get(file.id) as FileTreeNode | undefined
 
   if (fileNode) {
     // if (explorerTree.isUITaskDone(fileNode)) {
@@ -45,6 +49,7 @@ export function createOrUpdateFileNode(
       expandable: true,
       expanded: false,
       type: 'file',
+      children: new Set(),
       tasks: [],
       indent: 0,
       duration: file.result?.duration,
@@ -57,12 +62,12 @@ export function createOrUpdateFileNode(
       prepareDuration: file.prepareDuration,
       state: file.result?.state,
     }
-    nodes.set(file.id, fileNode)
-    rootTasks.push(fileNode)
+    explorerTree.nodes.set(file.id, fileNode)
+    explorerTree.root.tasks.push(fileNode)
   }
   if (collect) {
     for (let i = 0; i < file.tasks.length; i++) {
-      createOrUpdateNode(file.id, file.tasks[i], nodes, true)
+      createOrUpdateNode(file.id, file.tasks[i], true)
     }
   }
 
@@ -73,10 +78,9 @@ export function createOrUpdateFileNode(
 
 export function createOrUpdateSuiteTask(
   id: string,
-  nodes: Map<string, UITaskTreeNode>,
   all: boolean,
 ) {
-  const node = nodes.get(id)
+  const node = explorerTree.nodes.get(id)
   if (!node || !isParentNode(node)/* || explorerTree.isUITaskDone(node) */) {
     return
   }
@@ -88,7 +92,7 @@ export function createOrUpdateSuiteTask(
   }
 
   // update the node
-  createOrUpdateNode(node.parentId, task, nodes, all && task.tasks.length > 0)
+  createOrUpdateNode(node.parentId, task, all && task.tasks.length > 0)
 
   // if (isTaskDone(task)) {
   //   explorerTree.taskDone(task.id)
@@ -97,11 +101,8 @@ export function createOrUpdateSuiteTask(
   return [node, task] as const
 }
 
-export function createOrUpdateNodeTask(
-  id: string,
-  nodes: Map<string, UITaskTreeNode>,
-) {
-  const node = nodes.get(id)
+export function createOrUpdateNodeTask(id: string) {
+  const node = explorerTree.nodes.get(id)
   if (!node/* || explorerTree.isUITaskDone(node) */) {
     return
   }
@@ -112,20 +113,23 @@ export function createOrUpdateNodeTask(
     return
   }
 
-  createOrUpdateNode(node.parentId, task, nodes, false)
+  createOrUpdateNode(node.parentId, task, false)
 }
 
 export function createOrUpdateNode(
   parentId: string,
   task: Task,
-  nodes: Map<string, UITaskTreeNode>,
   createAll: boolean,
 ) {
-  const node = nodes.get(parentId) as ParentTreeNode | undefined
+  const node = explorerTree.nodes.get(parentId) as ParentTreeNode | undefined
   let taskNode: UITaskTreeNode | undefined
   if (node) {
-    taskNode = nodes.get(task.id) as UITaskTreeNode | undefined
+    taskNode = explorerTree.nodes.get(task.id) as UITaskTreeNode | undefined
     if (taskNode) {
+      if (!node.children.has(task.id)) {
+        node.tasks.push(taskNode)
+        node.children.add(task.id)
+      }
       /* if (explorerTree.isUITaskDone(taskNode)) {
         return
       } */
@@ -162,18 +166,21 @@ export function createOrUpdateNode(
           type: 'suite',
           expandable: true,
           expanded: false,
+          children: new Set(),
           tasks: [],
           indent: node.indent + 1,
           duration: task.result?.duration,
           state: task.result?.state,
         } as SuiteTreeNode
       }
-      nodes.set(task.id, taskNode)
+      explorerTree.nodes.set(task.id, taskNode)
       node.tasks.push(taskNode)
+      node.children.add(task.id)
     }
-    if (createAll && isTaskSuite(task)) {
+
+    if (taskNode && createAll && isTaskSuite(task)) {
       for (let i = 0; i < task.tasks.length; i++) {
-        createOrUpdateNode(task.id, task.tasks[i], nodes, createAll)
+        createOrUpdateNode(taskNode.id, task.tasks[i], createAll)
       }
     }
 

From 8d996b62bbcd7b4dba191a4c3827ed9e92a2a4a1 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 19 Jun 2024 01:08:41 +0200
Subject: [PATCH 12/25] chore: fix lint

---
 packages/ui/client/components/explorer/ExplorerItem.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 411a9f729cc0..cff0362cbb34 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Task, TaskState } from '@vitest/runner'
 import { nextTick } from 'vue'
-import { hasFailedSnapshot } from 'vitest/src/utils'
+import { hasFailedSnapshot } from '@vitest/ws-client'
 import { client, isReport, runFiles } from '~/composables/client'
 import { coverageEnabled } from '~/composables/navigation'
 import type { TaskTreeNodeType } from '~/composables/explorer/types'
@@ -35,10 +35,7 @@ const {
   onItemClick?: (task: Task) => void
 }>()
 
-const task = computed(() => {
-  console.log(taskId)
-  return client.state.idMap.get(taskId)
-})
+const task = computed(() => client.state.idMap.get(taskId))
 
 const failedSnapshot = computed(() => task.value && hasFailedSnapshot(task.value))
 

From d76ead56420181299937d603af5eda74ccd2c18c Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 19 Jun 2024 13:02:14 +0200
Subject: [PATCH 13/25] chore: refactor logic to resume collect on task update

---
 .../ui/client/composables/client/index.ts     | 30 ++++++------
 .../client/composables/explorer/collector.ts  | 15 ++----
 .../ui/client/composables/explorer/tree.ts    | 49 +++++++++++--------
 3 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index d52ff599b017..9179058e58a4 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -1,6 +1,6 @@
 import { createClient, getTasks } from '@vitest/ws-client'
 import type { WebSocketStatus } from '@vueuse/core'
-import type { File, ResolvedConfig, TaskResultPack } from 'vitest'
+import type { File, ResolvedConfig } from 'vitest'
 import { reactive as reactiveVue } from 'vue'
 import { createFileTask } from '@vitest/runner/utils'
 import type { BrowserRunnerState } from '../../../types'
@@ -11,11 +11,10 @@ import { createStaticClient } from './static'
 import { testRunState, unhandledErrors } from './state'
 import { uiFiles } from '~/composables/explorer/state'
 import { explorerTree } from '~/composables/explorer'
+import { isFileNode } from '~/composables/explorer/utils'
 
 export { ENTRY_URL, PORT, HOST, isReport } from '../../constants'
 
-const onTaskUpdateCalled = ref(false)
-
 export const client = (function createVitestClient() {
   if (isReport) {
     return createStaticClient()
@@ -26,18 +25,11 @@ export const client = (function createVitestClient() {
         return ctxKey === 'state' ? reactiveVue(data as any) as any : shallowRef(data)
       },
       handlers: {
-        onTaskUpdate(_packs: TaskResultPack[]) {
-          // eslint-disable-next-line no-console
-          console.log('onTaskUpdate')
-          if (testRunState.value === 'idle' && !onTaskUpdateCalled.value) {
-            onTaskUpdateCalled.value = true
-            explorerTree.resumeRun()
-          }
+        onTaskUpdate() {
+          explorerTree.resumeRun()
           testRunState.value = 'running'
         },
         onFinished(_files, errors) {
-          // eslint-disable-next-line no-console
-          console.log('onFinished', _files?.length, errors?.length)
           explorerTree.endRun()
           testRunState.value = 'idle'
           unhandledErrors.value = (errors || []).map(parseError)
@@ -78,21 +70,27 @@ export function runAll() {
 }
 
 function clearResults(useFiles: File[]) {
-  const map = new Map(uiFiles.value.map(i => [i.id, i]))
+  const map = explorerTree.nodes
   useFiles.forEach((f) => {
     delete f.result
     getTasks(f).forEach((i) => {
       delete i.result
       // explorerTree.removeTaskDone(i.id)
       if (map.has(i.id)) {
-        map.get(i.id)!.state = undefined
+        const task = map.get(i.id)
+        if (task) {
+          task.state = undefined
+          task.duration = undefined
+        }
       }
     })
     const file = map.get(f.id)
     if (file) {
       file.state = undefined
       file.duration = undefined
-      file.collectDuration = undefined
+      if (isFileNode(file)) {
+        file.collectDuration = undefined
+      }
     }
   })
 }
@@ -139,7 +137,7 @@ watch(
       else {
         explorerTree.loadFiles(remoteFiles)
         client.state.collectFiles(remoteFiles)
-        explorerTree.startRun(!onTaskUpdateCalled.value)
+        explorerTree.startRun()
       }
       unhandledErrors.value = (errors || []).map(parseError)
       config.value = _config
diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
index 012cf88f2c9e..22e8aba1f0da 100644
--- a/packages/ui/client/composables/explorer/collector.ts
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -49,7 +49,7 @@ export function runCollect(
   filter: Filter,
 ) {
   if (start) {
-    queueMicrotask(() => resetCollectorInfo(summary))
+    resetCollectorInfo(summary)
   }
 
   queueMicrotask(() => {
@@ -346,19 +346,14 @@ export function collectTestsTotalData(
 
 function* testsCollector(suite: Arrayable<Task>): Generator<Test | Custom> {
   const arraySuites = toArray(suite)
-  for (const s of arraySuites) {
+  let s: Task
+  for (let i = 0; i < arraySuites.length; i++) {
+    s = arraySuites[i]
     if (isAtomTest(s)) {
       yield s
     }
     else {
-      for (const task of s.tasks) {
-        if (isAtomTest(task)) {
-          yield task
-        }
-        else {
-          yield * testsCollector(task)
-        }
-      }
+      yield * testsCollector(s.tasks)
     }
   }
 }
diff --git a/packages/ui/client/composables/explorer/tree.ts b/packages/ui/client/composables/explorer/tree.ts
index 4967cf7e7e8c..6c13e6a218f2 100644
--- a/packages/ui/client/composables/explorer/tree.ts
+++ b/packages/ui/client/composables/explorer/tree.ts
@@ -16,13 +16,8 @@ import { runFilter } from '~/composables/explorer/filter'
 
 export class ExplorerTree {
   private rafCollector: ReturnType<typeof useRafFn>
-  private resumeEndRunId: ReturnType<typeof setTimeout> | undefined
   constructor(
-    // if the user refreshes the page with finished tests, we don't receive onFinished event
-    // maybe we should send the event/data from the server when the client reconnects
-    // todo: remove this and resumeEndRunId when vitest runner fix the problem
-    // todo: remove also client/index.ts logic with onTaskUpdateCalled
-    private resumeEndTimeout = 500,
+    private onTaskUpdateCalled: boolean = false,
     private done = new Set<string>(),
     public root = <RootTreeNode>{
       id: 'vitest-root-node',
@@ -81,15 +76,21 @@ export class ExplorerTree {
     })
   }
 
+  startRun() {
+    this.collect(true, false)
+  }
+
   resumeRun() {
-    clearTimeout(this.resumeEndRunId)
-    this.rafCollector.resume()
+    if (!this.onTaskUpdateCalled) {
+      this.onTaskUpdateCalled = true
+      this.collect(true, false, false)
+      this.rafCollector.resume()
+    }
   }
 
   endRun() {
-    clearTimeout(this.resumeEndRunId)
-    // collect final state: rafCollector can be null on page refresh
     this.rafCollector.pause()
+    this.onTaskUpdateCalled = false
     this.collect(false, true)
   }
 
@@ -97,8 +98,24 @@ export class ExplorerTree {
     this.collect(false, false)
   }
 
-  private collect(start: boolean, end: boolean) {
-    queueMicrotask(() => {
+  private collect(start: boolean, end: boolean, task = true) {
+    if (task) {
+      queueMicrotask(() => {
+        runCollect(
+          start,
+          end,
+          this.summary,
+          search.value.trim(),
+          {
+            failed: filter.failed,
+            success: filter.success,
+            skipped: filter.skipped,
+            onlyTests: filter.onlyTests,
+          },
+        )
+      })
+    }
+    else {
       runCollect(
         start,
         end,
@@ -111,15 +128,7 @@ export class ExplorerTree {
           onlyTests: filter.onlyTests,
         },
       )
-    })
-  }
-
-  startRun(registerResumeEndRun = false) {
-    if (registerResumeEndRun) {
-      this.resumeEndRunId = setTimeout(() => this.endRun(), this.resumeEndTimeout)
     }
-
-    this.collect(true, false)
   }
 
   collectTestsTotal(

From 14af3226cd81e6d9b4a56bfc0ce740b322056a94 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 19 Jun 2024 15:06:06 +0200
Subject: [PATCH 14/25] chore: collect tasks on the initial load

---
 .../ui/client/composables/explorer/collector.ts | 15 +++++++--------
 packages/ui/client/composables/explorer/tree.ts | 17 +++++++++++------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
index 22e8aba1f0da..75c947b094c2 100644
--- a/packages/ui/client/composables/explorer/collector.ts
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -23,21 +23,20 @@ import { explorerTree } from '~/composables/explorer/index'
 
 export function runLoadFiles(
   remoteFiles: File[],
+  collect: boolean,
   search: string,
   filter: Filter,
 ) {
   remoteFiles.map(f => [`${f.filepath}:${f.projectName || ''}`, f] as const)
     .sort(([a], [b]) => a.localeCompare(b))
-    .map(([, f]) => createOrUpdateFileNode(f))
+    .map(([, f]) => createOrUpdateFileNode(f, collect))
 
   uiFiles.value = [...explorerTree.root.tasks]
-  queueMicrotask(() => {
-    runFilter(search.trim(), {
-      failed: filter.failed,
-      success: filter.success,
-      skipped: filter.skipped,
-      onlyTests: filter.onlyTests,
-    })
+  runFilter(search.trim(), {
+    failed: filter.failed,
+    success: filter.success,
+    skipped: filter.skipped,
+    onlyTests: filter.onlyTests,
   })
 }
 
diff --git a/packages/ui/client/composables/explorer/tree.ts b/packages/ui/client/composables/explorer/tree.ts
index 6c13e6a218f2..77ac4003dac0 100644
--- a/packages/ui/client/composables/explorer/tree.ts
+++ b/packages/ui/client/composables/explorer/tree.ts
@@ -68,12 +68,17 @@ export class ExplorerTree {
   }
 
   loadFiles(remoteFiles: File[]) {
-    runLoadFiles(remoteFiles, search.value.trim(), {
-      failed: filter.failed,
-      success: filter.success,
-      skipped: filter.skipped,
-      onlyTests: filter.onlyTests,
-    })
+    runLoadFiles(
+      remoteFiles,
+      true,
+      search.value.trim(),
+      {
+        failed: filter.failed,
+        success: filter.success,
+        skipped: filter.skipped,
+        onlyTests: filter.onlyTests,
+      },
+    )
   }
 
   startRun() {

From 41224f2820bffcad5272620ea6ce2533e62abe96 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 19 Jun 2024 20:31:00 +0200
Subject: [PATCH 15/25] fix: wrong logic when expanding/collapsing nodes

---
 .../client/composables/explorer/collector.ts  |  6 ++--
 .../ui/client/composables/explorer/expand.ts  | 27 ++++++++++-------
 .../ui/client/composables/explorer/filter.ts  | 30 ++++++++++++++-----
 .../ui/client/composables/explorer/state.ts   |  5 +---
 .../ui/client/composables/explorer/utils.ts   |  7 +++--
 5 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
index 75c947b094c2..cbe6c195319d 100644
--- a/packages/ui/client/composables/explorer/collector.ts
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -18,8 +18,8 @@ import {
 } from '~/composables/explorer/utils'
 import { isSuite } from '~/utils/task'
 import { openedTreeItems, treeFilter, uiFiles } from '~/composables/explorer/state'
-import { expandNodesOnEndRun } from '~/composables/explorer/expand'
 import { explorerTree } from '~/composables/explorer/index'
+import { expandNodesOnEndRun } from '~/composables/explorer/expand'
 
 export function runLoadFiles(
   remoteFiles: File[],
@@ -115,15 +115,15 @@ function doRunFilter(
         treeFilter.value.expandAll = false
       }
     })
-
     // refresh explorer
     queueMicrotask(() => runFilter(search, filter))
   }
 }
 
 function createOrUpdateEntry(tasks: Task[]) {
+  let task: Task
   for (let i = 0; i < tasks.length; i++) {
-    const task = tasks[i]
+    task = tasks[i]
     if (isSuite(task)) {
       createOrUpdateSuiteTask(task.id, true)
     }
diff --git a/packages/ui/client/composables/explorer/expand.ts b/packages/ui/client/composables/explorer/expand.ts
index 971487af094a..ee375c019aac 100644
--- a/packages/ui/client/composables/explorer/expand.ts
+++ b/packages/ui/client/composables/explorer/expand.ts
@@ -1,7 +1,7 @@
 import { filteredFiles, openedTreeItems, treeFilter, uiEntries } from '~/composables/explorer/state'
 import type { Filter, UITaskTreeNode } from '~/composables/explorer/types'
 import { createOrUpdateNode, createOrUpdateSuiteTask, isFileNode, isParentNode } from '~/composables/explorer/utils'
-import { filterAll, filterTask } from '~/composables/explorer/filter'
+import { filterAll, filterNode } from '~/composables/explorer/filter'
 import { findById } from '~/composables/client'
 import { explorerTree } from '~/composables/explorer/index'
 
@@ -50,8 +50,8 @@ export function runExpandNode(
   const treeItems = new Set(openedTreeItems.value)
   treeItems.add(node.id)
   // collect children
-  // the first node is itself
-  const children = new Set(filterTask(
+  // the first node is itself only when it is a file
+  const children = new Set(filterNode(
     node,
     search,
     filter,
@@ -101,17 +101,17 @@ export function runExpandAll(
 
 export function expandNodesOnEndRun(
   ids: Set<string>,
-  updateState: boolean,
+  end: boolean,
 ) {
   if (ids.size) {
-    for (const node of explorerTree.nodes.values()) {
+    for (const node of uiEntries.value) {
       if (ids.has(node.id)) {
         node.expanded = true
       }
     }
   }
-  else {
-    expandAllNodes(uiEntries.value.filter(isFileNode), updateState)
+  else if (end) {
+    expandAllNodes(uiEntries.value.filter(isFileNode), true)
   }
 }
 
@@ -134,13 +134,18 @@ function* collectExpandedNode(
   children: Set<UITaskTreeNode>,
 ) {
   const id = node.id
+  const ids = new Set(Array.from(children).map(n => n.id))
 
-  for (const node of uiEntries.value) {
-    if (node.id === id) {
+  for (const child of uiEntries.value) {
+    if (child.id === id) {
+      child.expanded = true
+      if (!ids.has(child.id)) {
+        yield node
+      }
       yield * children
     }
-    else {
-      yield node
+    else if (!ids.has(child.id)) {
+      yield child
     }
   }
 }
diff --git a/packages/ui/client/composables/explorer/filter.ts b/packages/ui/client/composables/explorer/filter.ts
index d0ec2209beb5..ccd135c57fdd 100644
--- a/packages/ui/client/composables/explorer/filter.ts
+++ b/packages/ui/client/composables/explorer/filter.ts
@@ -36,11 +36,11 @@ export function* filterAll(
   filter: Filter,
 ) {
   for (const node of explorerTree.root.tasks) {
-    yield * filterTask(node, search, filter)
+    yield * filterNode(node, search, filter)
   }
 }
 
-export function* filterTask(
+export function* filterNode(
   node: UITaskTreeNode,
   search: string,
   filter: Filter,
@@ -66,13 +66,22 @@ export function* filterTask(
     filesToShow,
   )].reverse()
 
-  // we need to remove any child added when filtering: we traverse the full tree
+  // We show only the files and parents whose parent is expanded.
+  // Filtering will return all the nodes matching the filter and their parents.
+  // Once we've the tree, we need to remove the children of not expanded parents.
+  // For example, if we filter a test inside a suite, when collapsing the suite
+  // we still need to show the suite, but the test must be removed from the rendered tree.
+
+  const map = explorerTree.nodes
+  // collect files and all suites whose parent is expanded
   const parents = new Set(
-    entries.filter(e => isParentNode(e)).map(e => e.id),
+    entries.filter(e => isFileNode(e) || (isParentNode(e) && map.get(e.parentId)?.expanded)).map(e => e.id),
   )
+
+  // collect files, and suites and tests whose parent is expanded
   yield * entries.filter((node) => {
-    // all file nodes, or expanded parents, or children of expanded parents
-    return isFileNode(node) || (isParentNode(node) ? parents.has(node.id) : parents.has(node.parentId))
+    // all file nodes or children of expanded parents
+    return isFileNode(node) || (parents.has(node.parentId) && map.get(node.parentId)?.expanded)
   })
 }
 
@@ -139,7 +148,6 @@ function* filterParents(
       if (parent && isFileNode(parent)) {
         filesToShow.add(parent.id)
       }
-
       yield child
     }
   }
@@ -195,6 +203,7 @@ function* visitNode(
 
   if (match) {
     if (isTestNode(node)) {
+      // treeNodes.add(node.parentId)
       let parent = explorerTree.nodes.get(node.parentId)
       while (parent) {
         treeNodes.add(parent.id)
@@ -205,7 +214,12 @@ function* visitNode(
       treeNodes.add(node.id)
     }
     else {
-      treeNodes.add(node.parentId)
+      treeNodes.add(node.id)
+      let parent = explorerTree.nodes.get(node.parentId)
+      while (parent) {
+        treeNodes.add(parent.id)
+        parent = explorerTree.nodes.get(parent.parentId)
+      }
     }
   }
 
diff --git a/packages/ui/client/composables/explorer/state.ts b/packages/ui/client/composables/explorer/state.ts
index e7ec4d87b5f5..5540287d2747 100644
--- a/packages/ui/client/composables/explorer/state.ts
+++ b/packages/ui/client/composables/explorer/state.ts
@@ -9,6 +9,7 @@ export const openedTreeItems = useLocalStorage<string[]>(
   [],
   { shallow: true },
 )
+export const openedTreeItemsSet = computed(() => new Set(openedTreeItems.value))
 export const treeFilter = useLocalStorage<TreeFilterState>(
   'vitest-ui_task-tree-filter',
   {
@@ -28,10 +29,6 @@ export const filter = reactive<Filter>({
   skipped: treeFilter.value.skipped,
   onlyTests: treeFilter.value.onlyTests,
 })
-export const failedFilter = computed(() => filter.failed)
-export const successFilter = computed(() => filter.success)
-export const skipFilter = computed(() => filter.skipped)
-export const onlyTestsFilter = computed(() => filter.onlyTests)
 export const isFilteredByStatus = computed(() => {
   if (filter.failed) {
     return true
diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
index 33936bcf0416..3eef369f22c5 100644
--- a/packages/ui/client/composables/explorer/utils.ts
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -4,6 +4,7 @@ import type { FileTreeNode, ParentTreeNode, SuiteTreeNode, UITaskTreeNode } from
 import { client } from '~/composables/client'
 import { getProjectNameColor, isSuite as isTaskSuite } from '~/utils/task'
 import { explorerTree } from '~/composables/explorer/index'
+import { openedTreeItemsSet, treeFilter } from '~/composables/explorer/state'
 
 export function isTestNode(node: UITaskTreeNode): node is FileTreeNode {
   return node.type === 'test' || node.type === 'custom'
@@ -47,7 +48,7 @@ export function createOrUpdateFileNode(
       name: file.name,
       mode: file.mode,
       expandable: true,
-      expanded: false,
+      expanded: openedTreeItemsSet.value.size > 0 ? openedTreeItemsSet.value.has(file.id) : treeFilter.value.expandAll !== false,
       type: 'file',
       children: new Set(),
       tasks: [],
@@ -124,7 +125,7 @@ export function createOrUpdateNode(
   const node = explorerTree.nodes.get(parentId) as ParentTreeNode | undefined
   let taskNode: UITaskTreeNode | undefined
   if (node) {
-    taskNode = explorerTree.nodes.get(task.id) as UITaskTreeNode | undefined
+    taskNode = explorerTree.nodes.get(task.id)
     if (taskNode) {
       if (!node.children.has(task.id)) {
         node.tasks.push(taskNode)
@@ -165,7 +166,7 @@ export function createOrUpdateNode(
           typecheck: !!task.meta && 'typecheck' in task.meta,
           type: 'suite',
           expandable: true,
-          expanded: false,
+          expanded: openedTreeItemsSet.value.size > 0 ? openedTreeItemsSet.value.has(task.id) : treeFilter.value.expandAll !== false,
           children: new Set(),
           tasks: [],
           indent: node.indent + 1,

From d03a87cebc1bc9c33baa810aeda64d01079add69 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 19 Jun 2024 21:16:24 +0200
Subject: [PATCH 16/25] chore: add ui tests for filter

---
 test/ui/test/ui.spec.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index a01150aa05e1..ec3b5738cbd2 100644
--- a/test/ui/test/ui.spec.ts
+++ b/test/ui/test/ui.spec.ts
@@ -107,5 +107,18 @@ test.describe('ui', () => {
     await page.getByPlaceholder('Search...').fill('add')
     await page.getByText('PASS (1)').click()
     await expect(page.getByTestId('details-panel').getByText('fixtures/sample.test.ts', { exact: true })).toBeVisible()
+
+    // match only failing files when fail filter applied
+    await page.getByPlaceholder('Search...').fill('')
+    await page.getByText(/^Fail$/, { exact: true }).click()
+    await page.getByText('FAIL (1)').click()
+    await expect(page.getByTestId('details-panel').getByText('fixtures/error.test.ts', { exact: true })).toBeVisible()
+
+    // match only pass files when fail filter applied
+    await page.getByPlaceholder('Search...').fill('console')
+    await page.getByText(/^Fail$/, { exact: true }).click()
+    await page.locator('span').filter({ hasText: /^Pass$/ }).click()
+    await page.getByText('PASS (1)').click()
+    await expect(page.getByTestId('details-panel').getByText('fixtures/console.test.ts', { exact: true })).toBeVisible()
   })
 })

From 286020976c2e40abcdf3799f270f9465885cee4a Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 19 Jun 2024 21:25:32 +0200
Subject: [PATCH 17/25] chore: update ui tests for filter

---
 test/ui/test/ui.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index ec3b5738cbd2..592caf2f2478 100644
--- a/test/ui/test/ui.spec.ts
+++ b/test/ui/test/ui.spec.ts
@@ -113,6 +113,7 @@ test.describe('ui', () => {
     await page.getByText(/^Fail$/, { exact: true }).click()
     await page.getByText('FAIL (1)').click()
     await expect(page.getByTestId('details-panel').getByText('fixtures/error.test.ts', { exact: true })).toBeVisible()
+    await expect(page.getByTestId('details-panel').getByText('fixtures/sample.test.ts', { exact: true })).toBeHidden()
 
     // match only pass files when fail filter applied
     await page.getByPlaceholder('Search...').fill('console')
@@ -120,5 +121,6 @@ test.describe('ui', () => {
     await page.locator('span').filter({ hasText: /^Pass$/ }).click()
     await page.getByText('PASS (1)').click()
     await expect(page.getByTestId('details-panel').getByText('fixtures/console.test.ts', { exact: true })).toBeVisible()
+    await expect(page.getByTestId('details-panel').getByText('fixtures/sample.test.ts', { exact: true })).toBeHidden()
   })
 })

From dc1c4dd463bd186d09ed6201439f0c5f92c6dff7 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 19 Jun 2024 22:45:26 +0200
Subject: [PATCH 18/25] chore: update restore opened tasks logic

---
 packages/ui/client/composables/explorer/collapse.ts  | 4 +++-
 packages/ui/client/composables/explorer/collector.ts | 5 ++---
 packages/ui/client/composables/explorer/expand.ts    | 4 +++-
 packages/ui/client/composables/explorer/state.ts     | 7 -------
 packages/ui/client/composables/explorer/tree.ts      | 4 ++++
 packages/ui/client/composables/explorer/utils.ts     | 8 +++++---
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/ui/client/composables/explorer/collapse.ts b/packages/ui/client/composables/explorer/collapse.ts
index 4ed75cf823e7..724b719816c9 100644
--- a/packages/ui/client/composables/explorer/collapse.ts
+++ b/packages/ui/client/composables/explorer/collapse.ts
@@ -29,7 +29,9 @@ export function runCollapseNode(id: string) {
   treeItems.delete(node.id)
   const entries = [...collectCollapseNode(node)]
   openedTreeItems.value = Array.from(treeItems)
-  treeFilter.value.expandAll = true
+  // Keep expandAll state as it is: collapsing individual shouldn't prevent collapsing all the nodes ("collapse all" button)
+  // There is a watcher on composable search.ts to reset to undefined expandAll if there are no opened items
+  // treeFilter.value.expandAll = true
   uiEntries.value = entries
 }
 
diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
index cbe6c195319d..836b2e48d445 100644
--- a/packages/ui/client/composables/explorer/collector.ts
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -85,7 +85,7 @@ export function runCollect(
   })
 
   queueMicrotask(() => {
-    doRunFilter(search, filter)
+    doRunFilter(search, filter, end)
   })
 }
 
@@ -97,7 +97,6 @@ function doRunFilter(
   // refresh explorer
 
   const expandAll = treeFilter.value.expandAll
-  const filtered = search.trim().length > 0 || filter.failed || filter.success || filter.skipped || filter.onlyTests
   const resetExpandAll = expandAll !== true
   const ids = new Set(openedTreeItems.value)
   const applyExpandNodes = (ids.size > 0 && expandAll === false) || resetExpandAll
@@ -111,7 +110,7 @@ function doRunFilter(
     // expand all nodes
     queueMicrotask(() => {
       expandNodesOnEndRun(ids, end)
-      if (resetExpandAll || filtered) {
+      if (resetExpandAll) {
         treeFilter.value.expandAll = false
       }
     })
diff --git a/packages/ui/client/composables/explorer/expand.ts b/packages/ui/client/composables/explorer/expand.ts
index ee375c019aac..df9e5ef80889 100644
--- a/packages/ui/client/composables/explorer/expand.ts
+++ b/packages/ui/client/composables/explorer/expand.ts
@@ -59,7 +59,9 @@ export function runExpandNode(
 
   const entries = [...collectExpandedNode(node, children)]
   openedTreeItems.value = Array.from(treeItems)
-  treeFilter.value.expandAll = false
+  // Keep expandAll state as it is: expanding individual shouldn't prevent expanding all the nodes ("expand all" button)
+  // There is a watcher on composable search.ts to reset to undefined expandAll if there are no opened items
+  // treeFilter.value.expandAll = false
   uiEntries.value = entries
 }
 
diff --git a/packages/ui/client/composables/explorer/state.ts b/packages/ui/client/composables/explorer/state.ts
index 5540287d2747..c25ec78f2213 100644
--- a/packages/ui/client/composables/explorer/state.ts
+++ b/packages/ui/client/composables/explorer/state.ts
@@ -49,18 +49,11 @@ export const initialized = ref(false)
 export const shouldShowExpandAll = computed(() => {
   const expandAll = treeFilter.value.expandAll
   const opened = openedTreeItems.value
-  const filtered = isFiltered.value
-  const filteredStatus = isFilteredByStatus.value
 
   if (opened.length > 0) {
     return expandAll !== true
   }
 
-  // don't remove this: we need to force a rerender
-  if (filtered || filteredStatus) {
-    return expandAll !== false
-  }
-
   return expandAll !== false
 })
 export const testsTotal = computed<FilteredTests>(() => {
diff --git a/packages/ui/client/composables/explorer/tree.ts b/packages/ui/client/composables/explorer/tree.ts
index 77ac4003dac0..56c5ef9dcfcd 100644
--- a/packages/ui/client/composables/explorer/tree.ts
+++ b/packages/ui/client/composables/explorer/tree.ts
@@ -16,9 +16,11 @@ import { runFilter } from '~/composables/explorer/filter'
 
 export class ExplorerTree {
   private rafCollector: ReturnType<typeof useRafFn>
+  private resumeEndRunId: ReturnType<typeof setTimeout> | undefined
   constructor(
     private onTaskUpdateCalled: boolean = false,
     private done = new Set<string>(),
+    private resumeEndTimeout = 500,
     public root = <RootTreeNode>{
       id: 'vitest-root-node',
       expandable: true,
@@ -82,11 +84,13 @@ export class ExplorerTree {
   }
 
   startRun() {
+    this.resumeEndRunId = setTimeout(() => this.endRun(), this.resumeEndTimeout)
     this.collect(true, false)
   }
 
   resumeRun() {
     if (!this.onTaskUpdateCalled) {
+      clearTimeout(this.resumeEndRunId)
       this.onTaskUpdateCalled = true
       this.collect(true, false, false)
       this.rafCollector.resume()
diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
index 3eef369f22c5..7dbfdea5db18 100644
--- a/packages/ui/client/composables/explorer/utils.ts
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -4,7 +4,7 @@ import type { FileTreeNode, ParentTreeNode, SuiteTreeNode, UITaskTreeNode } from
 import { client } from '~/composables/client'
 import { getProjectNameColor, isSuite as isTaskSuite } from '~/utils/task'
 import { explorerTree } from '~/composables/explorer/index'
-import { openedTreeItemsSet, treeFilter } from '~/composables/explorer/state'
+import { openedTreeItemsSet } from '~/composables/explorer/state'
 
 export function isTestNode(node: UITaskTreeNode): node is FileTreeNode {
   return node.type === 'test' || node.type === 'custom'
@@ -48,7 +48,8 @@ export function createOrUpdateFileNode(
       name: file.name,
       mode: file.mode,
       expandable: true,
-      expanded: openedTreeItemsSet.value.size > 0 ? openedTreeItemsSet.value.has(file.id) : treeFilter.value.expandAll !== false,
+      // When the current run finish, we will expand all nodes when required, here we expand only the opened nodes
+      expanded: openedTreeItemsSet.value.size > 0 && openedTreeItemsSet.value.has(file.id),
       type: 'file',
       children: new Set(),
       tasks: [],
@@ -166,7 +167,8 @@ export function createOrUpdateNode(
           typecheck: !!task.meta && 'typecheck' in task.meta,
           type: 'suite',
           expandable: true,
-          expanded: openedTreeItemsSet.value.size > 0 ? openedTreeItemsSet.value.has(task.id) : treeFilter.value.expandAll !== false,
+          // When the current run finish, we will expand all nodes when required, here we expand only the opened nodes
+          expanded: openedTreeItemsSet.value.size > 0 && openedTreeItemsSet.value.has(task.id),
           children: new Set(),
           tasks: [],
           indent: node.indent + 1,

From a32daaa36e6c7c25d088ee666fc12a6dd9a66a88 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 19 Jun 2024 23:22:07 +0200
Subject: [PATCH 19/25] chore: update jsdocs and hints + cleanup

---
 packages/ui/client/composables/explorer/collapse.ts | 3 +--
 packages/ui/client/composables/explorer/expand.ts   | 3 +--
 packages/ui/client/composables/explorer/filter.ts   | 7 +++----
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/ui/client/composables/explorer/collapse.ts b/packages/ui/client/composables/explorer/collapse.ts
index 724b719816c9..222ca6746439 100644
--- a/packages/ui/client/composables/explorer/collapse.ts
+++ b/packages/ui/client/composables/explorer/collapse.ts
@@ -13,7 +13,6 @@ import { explorerTree } from '~/composables/explorer/index'
  *
  * Calling this method will:
  * - collapse all nodes
- * - update the filtered expandAll state
  * - remove opened tree items for the node and any children
  * - update uiEntries without child nodes
  *
@@ -46,7 +45,7 @@ export function runCollapseNode(id: string) {
  * Calling this method will:
  * - collapse all nodes
  * - clear stored opened tree items
- * - update the filtered expandAll state to false
+ * - update the filtered expandAll state to true
  * - update uiEntries without child nodes
  *
  */
diff --git a/packages/ui/client/composables/explorer/expand.ts b/packages/ui/client/composables/explorer/expand.ts
index df9e5ef80889..53a3533d34ab 100644
--- a/packages/ui/client/composables/explorer/expand.ts
+++ b/packages/ui/client/composables/explorer/expand.ts
@@ -16,7 +16,6 @@ import { explorerTree } from '~/composables/explorer/index'
  * will be there, we only need to filter the children of the node to expand.
  *
  * Calling this method will:
- * - update the filtered expandAll state
  * - remove opened tree items for the node and any children
  * - update uiEntries including child nodes
  *
@@ -80,7 +79,7 @@ export function runExpandNode(
  * Calling this method will:
  * - expand all nodes
  * - add stored opened tree items
- * - update the filtered expandAll state to true
+ * - update the filtered expandAll state to false
  * - update uiEntries with child nodes
  *
  * @param search The search applied.
diff --git a/packages/ui/client/composables/explorer/filter.ts b/packages/ui/client/composables/explorer/filter.ts
index ccd135c57fdd..1af7a0886921 100644
--- a/packages/ui/client/composables/explorer/filter.ts
+++ b/packages/ui/client/composables/explorer/filter.ts
@@ -68,9 +68,9 @@ export function* filterNode(
 
   // We show only the files and parents whose parent is expanded.
   // Filtering will return all the nodes matching the filter and their parents.
-  // Once we've the tree, we need to remove the children of not expanded parents.
-  // For example, if we filter a test inside a suite, when collapsing the suite
-  // we still need to show the suite, but the test must be removed from the rendered tree.
+  // Once we've the tree, we need to remove the children from not expanded parents.
+  // For example, if we have a suite with only one test, when collapsing the suite node,
+  // we still need to show the suite, but the test must be removed from the list to render.
 
   const map = explorerTree.nodes
   // collect files and all suites whose parent is expanded
@@ -203,7 +203,6 @@ function* visitNode(
 
   if (match) {
     if (isTestNode(node)) {
-      // treeNodes.add(node.parentId)
       let parent = explorerTree.nodes.get(node.parentId)
       while (parent) {
         treeNodes.add(parent.id)

From 5c441d9688315ff5242b6e47b620e872a619005d Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 20 Jun 2024 12:01:30 +0200
Subject: [PATCH 20/25] chore: optimize collect logic to traverse only files
 with pending `TaskResultPack`

---
 .../ui/client/composables/client/index.ts     |  6 +-
 .../client/composables/explorer/collector.ts  | 62 +++++++++++++++----
 .../ui/client/composables/explorer/tree.ts    |  8 ++-
 3 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index 9179058e58a4..7f6c948b5436 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -1,6 +1,6 @@
 import { createClient, getTasks } from '@vitest/ws-client'
 import type { WebSocketStatus } from '@vueuse/core'
-import type { File, ResolvedConfig } from 'vitest'
+import type { File, ResolvedConfig, TaskResultPack } from 'vitest'
 import { reactive as reactiveVue } from 'vue'
 import { createFileTask } from '@vitest/runner/utils'
 import type { BrowserRunnerState } from '../../../types'
@@ -25,8 +25,8 @@ export const client = (function createVitestClient() {
         return ctxKey === 'state' ? reactiveVue(data as any) as any : shallowRef(data)
       },
       handlers: {
-        onTaskUpdate() {
-          explorerTree.resumeRun()
+        onTaskUpdate(packs: TaskResultPack[]) {
+          explorerTree.resumeRun(packs)
           testRunState.value = 'running'
         },
         onFinished(_files, errors) {
diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
index 836b2e48d445..fb6d11827692 100644
--- a/packages/ui/client/composables/explorer/collector.ts
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -1,21 +1,12 @@
-import type { Custom, File, Task, Test } from '@vitest/runner'
+import type { Custom, File, Task, TaskResultPack, Test } from '@vitest/runner'
 import { isAtomTest } from '@vitest/runner/utils'
 import type { Arrayable } from '@vitest/utils'
 import { toArray } from '@vitest/utils'
 import { hasFailedSnapshot } from '@vitest/ws-client'
-import type {
-  CollectFilteredTests,
-  CollectorInfo,
-  Filter,
-  FilteredTests,
-} from '~/composables/explorer/types'
+import type { CollectFilteredTests, CollectorInfo, Filter, FilteredTests } from '~/composables/explorer/types'
 import { client, findById } from '~/composables/client'
 import { runFilter, testMatcher } from '~/composables/explorer/filter'
-import {
-  createOrUpdateFileNode,
-  createOrUpdateNodeTask,
-  createOrUpdateSuiteTask,
-} from '~/composables/explorer/utils'
+import { createOrUpdateFileNode, createOrUpdateNodeTask, createOrUpdateSuiteTask } from '~/composables/explorer/utils'
 import { isSuite } from '~/utils/task'
 import { openedTreeItems, treeFilter, uiFiles } from '~/composables/explorer/state'
 import { explorerTree } from '~/composables/explorer/index'
@@ -40,6 +31,27 @@ export function runLoadFiles(
   })
 }
 
+export function preparePendingTasks(packs: TaskResultPack[]) {
+  queueMicrotask(() => {
+    const pending = explorerTree.pendingTasks
+    const idMap = client.state.idMap
+    for (const pack of packs) {
+      const result = pack[1]
+      if (result) {
+        const task = idMap.get(pack[0])
+        if (task) {
+          let file = pending.get(task.file.id)
+          if (!file) {
+            file = new Set()
+            pending.set(task.file.id, file)
+          }
+          file.add(task.id)
+        }
+      }
+    }
+  })
+}
+
 export function runCollect(
   start: boolean,
   end: boolean,
@@ -51,6 +63,7 @@ export function runCollect(
     resetCollectorInfo(summary)
   }
 
+  /* OLD CODE
   queueMicrotask(() => {
     const rootTasks = explorerTree.root.tasks
     // collect remote children
@@ -70,6 +83,31 @@ export function runCollect(
       createOrUpdateEntry(file.tasks)
     }
   })
+*/
+
+  /*
+   * This new logic will only traverse files with pending TaskResultPack.
+   */
+  queueMicrotask(() => {
+    const rootTasks = explorerTree.root.tasks
+    const updatedFiles = new Map(explorerTree.pendingTasks.entries())
+    explorerTree.pendingTasks.clear()
+    const idMap = client.state.idMap
+    // collect remote children
+    for (let i = 0; i < rootTasks.length; i++) {
+      const fileNode = rootTasks[i]
+      const file = findById(fileNode.id)
+      if (!file) {
+        continue
+      }
+      const entries = updatedFiles.get(file.id)
+      if (!entries) {
+        continue
+      }
+      createOrUpdateFileNode(file, !start)
+      createOrUpdateEntry(Array.from(entries).map(id => idMap.get(id)).filter(Boolean) as Task[])
+    }
+  })
 
   queueMicrotask(() => {
     collectData(summary)
diff --git a/packages/ui/client/composables/explorer/tree.ts b/packages/ui/client/composables/explorer/tree.ts
index 56c5ef9dcfcd..a2e720961c4c 100644
--- a/packages/ui/client/composables/explorer/tree.ts
+++ b/packages/ui/client/composables/explorer/tree.ts
@@ -1,4 +1,4 @@
-import type { File } from '@vitest/runner'
+import type { File, TaskResultPack } from '@vitest/runner'
 import {
   filter,
   search,
@@ -9,7 +9,7 @@ import type {
   RootTreeNode,
   UITaskTreeNode,
 } from '~/composables/explorer/types'
-import { collectTestsTotalData, runCollect, runLoadFiles } from '~/composables/explorer/collector'
+import { collectTestsTotalData, preparePendingTasks, runCollect, runLoadFiles } from '~/composables/explorer/collector'
 import { runCollapseAllTask, runCollapseNode } from '~/composables/explorer/collapse'
 import { runExpandAll, runExpandNode } from '~/composables/explorer/expand'
 import { runFilter } from '~/composables/explorer/filter'
@@ -27,6 +27,7 @@ export class ExplorerTree {
       expanded: true,
       tasks: [],
     },
+    public pendingTasks = new Map<string, Set<string>>(),
     public nodes = new Map<string, UITaskTreeNode>(),
     public summary = reactive<CollectorInfo>({
       files: 0,
@@ -88,7 +89,8 @@ export class ExplorerTree {
     this.collect(true, false)
   }
 
-  resumeRun() {
+  resumeRun(packs: TaskResultPack[]) {
+    preparePendingTasks(packs)
     if (!this.onTaskUpdateCalled) {
       clearTimeout(this.resumeEndRunId)
       this.onTaskUpdateCalled = true

From a7a80a1744351dd04fd3a7aea9b7cf335576932c Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 20 Jun 2024 12:27:14 +0200
Subject: [PATCH 21/25] chore: collect all on end run

---
 .../client/composables/explorer/collector.ts  | 87 ++++++++++---------
 1 file changed, 46 insertions(+), 41 deletions(-)

diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
index fb6d11827692..c1688bd997c0 100644
--- a/packages/ui/client/composables/explorer/collector.ts
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -63,49 +63,13 @@ export function runCollect(
     resetCollectorInfo(summary)
   }
 
-  /* OLD CODE
+  const collect = !start
   queueMicrotask(() => {
-    const rootTasks = explorerTree.root.tasks
-    // collect remote children
-    for (let i = 0; i < rootTasks.length; i++) {
-      const fileNode = rootTasks[i]
-      const file = findById(fileNode.id)
-      if (!file) {
-        continue
-      }
-
-      createOrUpdateFileNode(file, !start)
-      const tasks = file.tasks
-      if (!tasks?.length) {
-        continue
-      }
-
-      createOrUpdateEntry(file.tasks)
+    if (end) {
+      traverseFiles(collect)
     }
-  })
-*/
-
-  /*
-   * This new logic will only traverse files with pending TaskResultPack.
-   */
-  queueMicrotask(() => {
-    const rootTasks = explorerTree.root.tasks
-    const updatedFiles = new Map(explorerTree.pendingTasks.entries())
-    explorerTree.pendingTasks.clear()
-    const idMap = client.state.idMap
-    // collect remote children
-    for (let i = 0; i < rootTasks.length; i++) {
-      const fileNode = rootTasks[i]
-      const file = findById(fileNode.id)
-      if (!file) {
-        continue
-      }
-      const entries = updatedFiles.get(file.id)
-      if (!entries) {
-        continue
-      }
-      createOrUpdateFileNode(file, !start)
-      createOrUpdateEntry(Array.from(entries).map(id => idMap.get(id)).filter(Boolean) as Task[])
+    else {
+      traverseReceivedFiles(collect)
     }
   })
 
@@ -127,6 +91,47 @@ export function runCollect(
   })
 }
 
+function traverseFiles(collect: boolean) {
+  const rootTasks = explorerTree.root.tasks
+  // collect remote children
+  for (let i = 0; i < rootTasks.length; i++) {
+    const fileNode = rootTasks[i]
+    const file = findById(fileNode.id)
+    if (!file) {
+      continue
+    }
+
+    createOrUpdateFileNode(file, collect)
+    const tasks = file.tasks
+    if (!tasks?.length) {
+      continue
+    }
+
+    createOrUpdateEntry(file.tasks)
+  }
+}
+
+function traverseReceivedFiles(collect: boolean) {
+  const rootTasks = explorerTree.root.tasks
+  const updatedFiles = new Map(explorerTree.pendingTasks.entries())
+  explorerTree.pendingTasks.clear()
+  const idMap = client.state.idMap
+  // collect remote children
+  for (let i = 0; i < rootTasks.length; i++) {
+    const fileNode = rootTasks[i]
+    const file = findById(fileNode.id)
+    if (!file) {
+      continue
+    }
+    const entries = updatedFiles.get(file.id)
+    if (!entries) {
+      continue
+    }
+    createOrUpdateFileNode(file, collect)
+    createOrUpdateEntry(Array.from(entries).map(id => idMap.get(id)).filter(Boolean) as Task[])
+  }
+}
+
 function doRunFilter(
   search: string,
   filter: Filter,

From 28caf7abfaaddee5a02bbada018b1d6d2fa00f80 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 20 Jun 2024 12:27:41 +0200
Subject: [PATCH 22/25] chore: update buffer and refresh interval

---
 packages/ui/client/components/explorer/Explorer.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 6fd050e87523..edf4d76b9a01 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -192,6 +192,8 @@ useResizeObserver(testExplorerRef, (entries) => {
             key-field="id"
             :item-size="28"
             :items="uiEntries"
+            :buffer="100"
+            :update-interval="100"
           >
             <template #default="{ item }">
               <ExplorerItem

From 9beb9c241cc78ddd2bdcc1091054a151ebe41e60 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 20 Jun 2024 12:34:52 +0200
Subject: [PATCH 23/25] chore: remove setting update interval, (some entries
 not being refreshed when scrolling)

---
 packages/ui/client/components/explorer/Explorer.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index edf4d76b9a01..75c117be5c5f 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -193,7 +193,6 @@ useResizeObserver(testExplorerRef, (entries) => {
             :item-size="28"
             :items="uiEntries"
             :buffer="100"
-            :update-interval="100"
           >
             <template #default="{ item }">
               <ExplorerItem

From 918b5cc2f6f30d5f663de6cd6755dd56803b85ff Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 20 Jun 2024 13:38:24 +0200
Subject: [PATCH 24/25] chore: add search syntax highlighting

---
 .../client/components/explorer/ExplorerItem.vue | 17 +++++++++++++++--
 packages/ui/vite.config.ts                      |  1 +
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index cff0362cbb34..03512a948fba 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -6,11 +6,13 @@ 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'
 
 // TODO: better handling of "opened" - it means to forcefully open the tree item and set in TasksList right now
 const {
   taskId,
   indent,
+  name,
   duration,
   current,
   opened,
@@ -93,6 +95,18 @@ const gridStyles = computed(() => {
     entries.map(() => '1rem').join(' ')
   } ${gridColumns.join(' ')};`
 })
+
+const highlightRegex = computed(() => {
+  const searchString = search.value.toLowerCase()
+  return searchString.length ? new RegExp(`(${searchString})`, 'gi') : null
+})
+
+const highlighted = computed(() => {
+  const regex = highlightRegex.value
+  return regex
+    ? name.replace(regex, match => `<span class="highlight">${match}</span>`)
+    : name
+})
 </script>
 
 <template>
@@ -126,7 +140,7 @@ const gridStyles = computed(() => {
         <span v-if="type === 'file' && projectName" :style="{ color: projectNameColor }">
           [{{ projectName }}]
         </span>
-        {{ name }}
+        <span v-html="highlighted" />
       </span>
       <span v-if="typeof duration === 'number'" text="xs" op20 style="white-space: nowrap">
         {{ duration > 0 ? duration : '< 1' }}ms
@@ -171,7 +185,6 @@ const gridStyles = computed(() => {
 .test-actions {
   display: none;
 }
-
 .item-wrapper:hover .test-actions,
 .item-wrapper[data-current="true"] .test-actions {
   display: flex;
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index f01e18976982..f481c97a2645 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -43,6 +43,7 @@ export const config: UserConfig = {
         'bg-hover': 'bg-gray-500:20',
         'border-base': 'border-gray-500:10',
         'focus-base': 'border-gray-500 dark:border-gray-400',
+        'highlight': 'bg-[#eab306] text-[#323238] dark:bg-[#323238] dark:text-[#eab306]',
 
         'tab-button': 'font-light op50 hover:op80 h-full px-4',
         'tab-button-active': 'op100 bg-gray-500:10',

From e91a0a73d2801ea8633cb6b62d14139224954010 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 20 Jun 2024 14:10:15 +0200
Subject: [PATCH 25/25] chore: hide all tooltips when scrolling

---
 packages/ui/client/components/explorer/Explorer.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 75c117be5c5f..0514e6e8611e 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { File, Task } from '@vitest/runner'
+import { hideAllPoppers } from 'floating-vue'
 
 // @ts-expect-error missing types
 import { RecycleScroller } from 'vue-virtual-scroller'
@@ -118,7 +119,7 @@ useResizeObserver(testExplorerRef, (entries) => {
         <FilterStatus v-model="filter.onlyTests" label="Only Tests" />
       </div>
     </div>
-    <div class="scrolls" flex-auto py-1>
+    <div class="scrolls" flex-auto py-1 @scroll.passive="hideAllPoppers">
       <DetailsPanel>
         <template #summary>
           <div grid="~ items-center gap-x-1 cols-[auto_min-content_auto] rows-[min-content_min-content]">