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..de49b1ec7bef 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,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/TaskItem.vue')['default']
-    TasksList: typeof import('./components/TasksList.vue')['default']
-    TaskTree: typeof import('./components/TaskTree.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..12ea58b12631
--- /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-sm 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..0514e6e8611e
--- /dev/null
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -0,0 +1,222 @@
+<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'
+
+import { activeFileId } from '~/composables/params'
+import { useSearch } from '~/composables/explorer/search'
+
+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 text-sm>
+            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 @scroll.passive="hideAllPoppers">
+      <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"
+            :buffer="100"
+          >
+            <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 === true"
+                :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>
+          </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..03512a948fba
--- /dev/null
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import type { Task, TaskState } from '@vitest/runner'
+import { nextTick } from 'vue'
+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'
+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,
+  expandable,
+  typecheck,
+  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
+}>()
+
+const task = computed(() => client.state.idMap.get(taskId))
+
+const failedSnapshot = computed(() => task.value && hasFailedSnapshot(task.value))
+
+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 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')
+  }
+
+  // status icon
+  gridColumns.push('min-content')
+  // typecheck icon
+  if (type === 'suite' && typecheck) {
+    gridColumns.push('min-content')
+  }
+  // text content
+  gridColumns.push('minmax(0, 1fr)')
+  // buttons
+  if (type === 'file') {
+    gridColumns.push('min-content')
+  }
+  // all the vertical lines with width 1rem and mx-2: always centered
+  return `grid-template-columns: ${
+    entries.map(() => '1rem').join(' ')
+  } ${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>
+  <div
+    v-if="task"
+    items-center
+    p="x-2 y-1"
+    grid="~ rows-1 items-center gap-x-2"
+    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 gray-500 dark:gray-400" class="vertical-line" h-28px inline-flex mx-2 op20 />
+    </template>
+    <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" 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>
+        <!-- only show [] in files view -->
+        <span v-if="type === 'file' && projectName" :style="{ color: projectNameColor }">
+          [{{ projectName }}]
+        </span>
+        <span v-html="highlighted" />
+      </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/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index ac021069b74e..7f6c948b5436 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -1,32 +1,36 @@
 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, TaskResultPack } 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'
+import { isFileNode } from '~/composables/explorer/utils'
 
 export { ENTRY_URL, PORT, HOST, isReport } from '../../constants'
 
-export const testRunState: Ref<RunState> = ref('idle')
-export const unhandledErrors: Ref<ErrorWithDiff[]> = ref([])
-
 export const client = (function createVitestClient() {
   if (isReport) {
     return createStaticClient()
   }
   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() {
+        onTaskUpdate(packs: TaskResultPack[]) {
+          explorerTree.resumeRun(packs)
           testRunState.value = 'running'
         },
         onFinished(_files, errors) {
+          explorerTree.endRun()
           testRunState.value = 'idle'
           unhandledErrors.value = (errors || []).map(parseError)
         },
@@ -42,41 +46,61 @@ 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 = explorerTree.nodes
+  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)) {
+        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
+      if (isFileNode(file)) {
+        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 +122,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 +135,9 @@ watch(
         client.state.collectFiles(files)
       }
       else {
-        client.state.collectFiles(files)
+        explorerTree.loadFiles(remoteFiles)
+        client.state.collectFiles(remoteFiles)
+        explorerTree.startRun()
       }
       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..222ca6746439
--- /dev/null
+++ b/packages/ui/client/composables/explorer/collapse.ts
@@ -0,0 +1,106 @@
+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.
+ *
+ * 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
+ * - remove opened tree items for the node and any children
+ * - update uiEntries without child nodes
+ *
+ * @param id The node id to collapse.
+ */
+export function runCollapseNode(id: string) {
+  const node = explorerTree.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)
+  // 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
+}
+
+/**
+ * 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 true
+ * - update uiEntries without child nodes
+ *
+ */
+export function runCollapseAllTask() {
+  // collapse all nodes
+  collapseAllNodes(explorerTree.root.tasks)
+  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..c1688bd997c0
--- /dev/null
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -0,0 +1,400 @@
+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 { 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 { explorerTree } from '~/composables/explorer/index'
+import { expandNodesOnEndRun } from '~/composables/explorer/expand'
+
+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, collect))
+
+  uiFiles.value = [...explorerTree.root.tasks]
+  runFilter(search.trim(), {
+    failed: filter.failed,
+    success: filter.success,
+    skipped: filter.skipped,
+    onlyTests: filter.onlyTests,
+  })
+}
+
+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,
+  summary: CollectorInfo,
+  search: string,
+  filter: Filter,
+) {
+  if (start) {
+    resetCollectorInfo(summary)
+  }
+
+  const collect = !start
+  queueMicrotask(() => {
+    if (end) {
+      traverseFiles(collect)
+    }
+    else {
+      traverseReceivedFiles(collect)
+    }
+  })
+
+  queueMicrotask(() => {
+    collectData(summary)
+  })
+
+  queueMicrotask(() => {
+    if (end) {
+      summary.failedSnapshot = uiFiles.value && hasFailedSnapshot(
+        uiFiles.value.map(f => findById(f.id)!),
+      )
+      summary.failedSnapshotEnabled = true
+    }
+  })
+
+  queueMicrotask(() => {
+    doRunFilter(search, filter, end)
+  })
+}
+
+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,
+  end = false,
+) {
+  // refresh explorer
+
+  const expandAll = treeFilter.value.expandAll
+  const resetExpandAll = expandAll !== true
+  const ids = new Set(openedTreeItems.value)
+  const applyExpandNodes = (ids.size > 0 && expandAll === false) || resetExpandAll
+
+  // refresh explorer
+  queueMicrotask(() => {
+    runFilter(search, filter)
+  })
+
+  if (applyExpandNodes) {
+    // expand all nodes
+    queueMicrotask(() => {
+      expandNodesOnEndRun(ids, end)
+      if (resetExpandAll) {
+        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++) {
+    task = tasks[i]
+    if (isSuite(task)) {
+      createOrUpdateSuiteTask(task.id, true)
+    }
+    else {
+      createOrUpdateNodeTask(task.id)
+    }
+  }
+}
+
+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(summary: CollectorInfo) {
+  const idMap = client.state.idMap
+  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,
+    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)
+  let s: Task
+  for (let i = 0; i < arraySuites.length; i++) {
+    s = arraySuites[i]
+    if (isAtomTest(s)) {
+      yield s
+    }
+    else {
+      yield * testsCollector(s.tasks)
+    }
+  }
+}
diff --git a/packages/ui/client/composables/explorer/expand.ts b/packages/ui/client/composables/explorer/expand.ts
new file mode 100644
index 000000000000..53a3533d34ab
--- /dev/null
+++ b/packages/ui/client/composables/explorer/expand.ts
@@ -0,0 +1,152 @@
+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, filterNode } from '~/composables/explorer/filter'
+import { findById } from '~/composables/client'
+import { explorerTree } from '~/composables/explorer/index'
+
+/**
+ * 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:
+ * - remove opened tree items for the node and any children
+ * - update uiEntries including child nodes
+ *
+ * @param id The node id to expand.
+ * @param search The search applied.
+ * @param filter The filter applied.
+ */
+export function runExpandNode(
+  id: string,
+  search: string,
+  filter: Filter,
+) {
+  const entry = createOrUpdateSuiteTask(
+    id,
+    false,
+  )
+  if (!entry) {
+    return
+  }
+
+  const [node, task] = entry
+
+  // create only direct children
+  for (const subtask of task.tasks) {
+    createOrUpdateNode(node.id, subtask, false)
+  }
+
+  // expand the node
+  node.expanded = true
+
+  const treeItems = new Set(openedTreeItems.value)
+  treeItems.add(node.id)
+  // collect children
+  // the first node is itself only when it is a file
+  const children = new Set(filterNode(
+    node,
+    search,
+    filter,
+  ))
+
+  const entries = [...collectExpandedNode(node, children)]
+  openedTreeItems.value = Array.from(treeItems)
+  // 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
+}
+
+/**
+ * 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 false
+ * - update uiEntries with child nodes
+ *
+ * @param search The search applied.
+ * @param filter The filter applied.
+ */
+export function runExpandAll(
+  search: string,
+  filter: Filter,
+) {
+  expandAllNodes(explorerTree.root.tasks, false)
+  const entries = [...filterAll(
+    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>,
+  end: boolean,
+) {
+  if (ids.size) {
+    for (const node of uiEntries.value) {
+      if (ids.has(node.id)) {
+        node.expanded = true
+      }
+    }
+  }
+  else if (end) {
+    expandAllNodes(uiEntries.value.filter(isFileNode), true)
+  }
+}
+
+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
+  const ids = new Set(Array.from(children).map(n => n.id))
+
+  for (const child of uiEntries.value) {
+    if (child.id === id) {
+      child.expanded = true
+      if (!ids.has(child.id)) {
+        yield node
+      }
+      yield * children
+    }
+    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
new file mode 100644
index 000000000000..1af7a0886921
--- /dev/null
+++ b/packages/ui/client/composables/explorer/filter.ts
@@ -0,0 +1,236 @@
+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,
+  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
+}
+/**
+ * Filter child nodes using search, filter and only tests.
+ *
+ * @param search The search applied.
+ * @param filter The filter applied.
+ */
+export function runFilter(
+  search: string,
+  filter: Filter,
+) {
+  const entries = [...filterAll(
+    search,
+    filter,
+  )]
+  uiEntries.value = entries
+  filteredFiles.value = entries.filter(isFileNode).map(f => findById(f.id)!)
+}
+
+export function* filterAll(
+  search: string,
+  filter: Filter,
+) {
+  for (const node of explorerTree.root.tasks) {
+    yield * filterNode(node, search, filter)
+  }
+}
+
+export function* filterNode(
+  node: UITaskTreeNode,
+  search: string,
+  filter: Filter,
+) {
+  const treeNodes = new Set<string>()
+
+  const list: FilterResult[] = []
+
+  for (const entry of visitNode(
+    node,
+    treeNodes,
+    n => matcher(n, search, filter),
+  )) {
+    list.push(entry)
+  }
+
+  const filesToShow = new Set<string>()
+
+  const entries = [...filterParents(
+    list,
+    filter.onlyTests,
+    treeNodes,
+    filesToShow,
+  )].reverse()
+
+  // 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 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
+  const parents = new Set(
+    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 children of expanded parents
+    return isFileNode(node) || (parents.has(node.parentId) && map.get(node.parentId)?.expanded)
+  })
+}
+
+function expandCollapseNode(
+  match: boolean,
+  child: FileTreeNode | ParentTreeNode,
+  treeNodes: Set<string>,
+  collapseParents: boolean,
+  filesToShow: Set<string>,
+) {
+  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 = explorerTree.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 = explorerTree.nodes.get(child.parentId)
+      if (parent && isFileNode(parent)) {
+        filesToShow.add(parent.id)
+      }
+
+      return child
+    }
+  }
+}
+
+function* filterParents(
+  list: FilterResult[],
+  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,
+      )
+      if (node) {
+        yield node
+      }
+    }
+    else if (match) {
+      const parent = explorerTree.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,
+  treeNodes: Set<string>,
+  matcher: (node: UITaskTreeNode) => boolean,
+): Generator<[match: boolean, node: UITaskTreeNode]> {
+  const match = matcher(node)
+
+  if (match) {
+    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.id)
+      let parent = explorerTree.nodes.get(node.parentId)
+      while (parent) {
+        treeNodes.add(parent.id)
+        parent = explorerTree.nodes.get(parent.parentId)
+      }
+    }
+  }
+
+  yield [match, node]
+  if (isParentNode(node)) {
+    for (let i = 0; i < node.tasks.length; i++) {
+      yield * visitNode(node.tasks[i], 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..c25ec78f2213
--- /dev/null
+++ b/packages/ui/client/composables/explorer/state.ts
@@ -0,0 +1,79 @@
+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 openedTreeItemsSet = computed(() => new Set(openedTreeItems.value))
+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 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
+
+  if (opened.length > 0) {
+    return expandAll !== true
+  }
+
+  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..a2e720961c4c
--- /dev/null
+++ b/packages/ui/client/composables/explorer/tree.ts
@@ -0,0 +1,203 @@
+import type { File, TaskResultPack } from '@vitest/runner'
+import {
+  filter,
+  search,
+} from '~/composables/explorer/state'
+import type {
+  CollectorInfo,
+  FilteredTests,
+  RootTreeNode,
+  UITaskTreeNode,
+} from '~/composables/explorer/types'
+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'
+
+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,
+      expanded: true,
+      tasks: [],
+    },
+    public pendingTasks = new Map<string, Set<string>>(),
+    public 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,
+      true,
+      search.value.trim(),
+      {
+        failed: filter.failed,
+        success: filter.success,
+        skipped: filter.skipped,
+        onlyTests: filter.onlyTests,
+      },
+    )
+  }
+
+  startRun() {
+    this.resumeEndRunId = setTimeout(() => this.endRun(), this.resumeEndTimeout)
+    this.collect(true, false)
+  }
+
+  resumeRun(packs: TaskResultPack[]) {
+    preparePendingTasks(packs)
+    if (!this.onTaskUpdateCalled) {
+      clearTimeout(this.resumeEndRunId)
+      this.onTaskUpdateCalled = true
+      this.collect(true, false, false)
+      this.rafCollector.resume()
+    }
+  }
+
+  endRun() {
+    this.rafCollector.pause()
+    this.onTaskUpdateCalled = false
+    this.collect(false, true)
+  }
+
+  private runCollect() {
+    this.collect(false, false)
+  }
+
+  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,
+        this.summary,
+        search.value.trim(),
+        {
+          failed: filter.failed,
+          success: filter.success,
+          skipped: filter.skipped,
+          onlyTests: filter.onlyTests,
+        },
+      )
+    }
+  }
+
+  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)
+    })
+  }
+
+  expandNode(id: string) {
+    queueMicrotask(() => {
+      runExpandNode(id, search.value.trim(), {
+        failed: filter.failed,
+        success: filter.success,
+        skipped: filter.skipped,
+        onlyTests: filter.onlyTests,
+      })
+    })
+  }
+
+  collapseAllNodes() {
+    queueMicrotask(() => {
+      runCollapseAllTask()
+    })
+  }
+
+  expandAllNodes() {
+    queueMicrotask(() => {
+      runExpandAll(search.value.trim(), {
+        failed: filter.failed,
+        success: filter.success,
+        skipped: filter.skipped,
+        onlyTests: filter.onlyTests,
+      })
+    })
+  }
+
+  filterNodes() {
+    queueMicrotask(() => {
+      runFilter(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..c1e9cb7e86a7
--- /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 {
+  children: Set<string>
+  tasks: UITaskTreeNode[]
+}
+
+export interface SuiteTreeNode extends ParentTreeNode {
+  type: 'suite'
+  typecheck?: boolean
+}
+
+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..7dbfdea5db18
--- /dev/null
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -0,0 +1,194 @@
+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, isSuite as isTaskSuite } from '~/utils/task'
+import { explorerTree } from '~/composables/explorer/index'
+import { openedTreeItemsSet } from '~/composables/explorer/state'
+
+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'
+}
+
+export function isParentNode(node: UITaskTreeNode): node is FileTreeNode | SuiteTreeNode {
+  return node.type === 'file' || node.type === 'suite'
+}
+
+export function createOrUpdateFileNode(
+  file: File,
+  collect = false,
+) {
+  let fileNode = explorerTree.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,
+      // 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: [],
+      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,
+    }
+    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], true)
+    }
+  }
+
+  // if (isTaskDone(file)) {
+  //   explorerTree.taskDone(fileNode.id)
+  // }
+}
+
+export function createOrUpdateSuiteTask(
+  id: string,
+  all: boolean,
+) {
+  const node = explorerTree.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, all && task.tasks.length > 0)
+
+  // if (isTaskDone(task)) {
+  //   explorerTree.taskDone(task.id)
+  // }
+
+  return [node, task] as const
+}
+
+export function createOrUpdateNodeTask(id: string) {
+  const node = explorerTree.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, false)
+}
+
+export function createOrUpdateNode(
+  parentId: string,
+  task: Task,
+  createAll: boolean,
+) {
+  const node = explorerTree.nodes.get(parentId) as ParentTreeNode | undefined
+  let taskNode: UITaskTreeNode | undefined
+  if (node) {
+    taskNode = explorerTree.nodes.get(task.id)
+    if (taskNode) {
+      if (!node.children.has(task.id)) {
+        node.tasks.push(taskNode)
+        node.children.add(task.id)
+      }
+      /* 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' in task.meta
+      }
+    }
+    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' in task.meta,
+          type: 'suite',
+          expandable: true,
+          // 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,
+          duration: task.result?.duration,
+          state: task.result?.state,
+        } as SuiteTreeNode
+      }
+      explorerTree.nodes.set(task.id, taskNode)
+      node.tasks.push(taskNode)
+      node.children.add(task.id)
+    }
+
+    if (taskNode && createAll && isTaskSuite(task)) {
+      for (let i = 0; i < task.tasks.length; i++) {
+        createOrUpdateNode(taskNode.id, task.tasks[i], 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 5fc31a5ebe5d..dfa65b954b26 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..f481c97a2645 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,15 @@ 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',
+        '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',
       },
+      transformers: [
+        transformerDirectives(),
+      ],
     }),
     Components({
       dirs: ['client/components'],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0ac6b2be5aab..e740ecb18af8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -713,6 +713,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
@@ -12413,6 +12416,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
@@ -15982,13 +15989,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==}
@@ -16019,6 +16033,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.
diff --git a/test/browser/package.json b/test/browser/package.json
index b785ad692015..acfb69417c9c 100644
--- a/test/browser/package.json
+++ b/test/browser/package.json
@@ -12,6 +12,7 @@
     "test-mocking": "vitest --root ./fixtures/mocking",
     "test-snapshots": "vitest --root ./fixtures/update-snapshot",
     "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'
diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index a01150aa05e1..592caf2f2478 100644
--- a/test/ui/test/ui.spec.ts
+++ b/test/ui/test/ui.spec.ts
@@ -107,5 +107,20 @@ 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()
+    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')
+    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()
+    await expect(page.getByTestId('details-panel').getByText('fixtures/sample.test.ts', { exact: true })).toBeHidden()
   })
 })