feat(ui): replace navigation tree with test explorer (#5907)

Author: userquin

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']

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']

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>

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>

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>

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>
 

packages/ui/client/components/TaskItem.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"

packages/ui/client/components/TaskTree.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,42 +9,48 @@ 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">
       <template #header>
         Total
       </template>
       <template #body>
-        {{ total }}
+        {{ explorerTree.summary.totalTests }}
       </template>
     </DashboardEntry>
   </div>

packages/ui/client/components/TasksList.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>

packages/ui/client/components/dashboard/TestFilesEntry.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>

packages/ui/client/components/dashboard/TestsEntry.vue

@@ -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

packages/ui/client/components/explorer/Explorer.vue

@@ -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([])

packages/ui/client/components/explorer/ExplorerItem.vue

@@ -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
+  }
+}

packages/ui/client/composables/client/index.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
+    }
+  }
+}

packages/ui/client/composables/client/state.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
+}

packages/ui/client/composables/explorer/collapse.ts

@@ -0,0 +1,3 @@
+import { ExplorerTree } from './tree'
+
+export const explorerTree = new ExplorerTree()

packages/ui/client/composables/explorer/collector.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,
+  }
+}

packages/ui/client/composables/explorer/expand.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,
+    },
+  )
+})

packages/ui/client/composables/explorer/filter.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,
+      })
+    })
+  }
+}

packages/ui/client/composables/explorer/index.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
+}

packages/ui/client/composables/explorer/search.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)
+    } */
+  }
+}

packages/ui/client/composables/explorer/state.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.

packages/ui/client/composables/explorer/tree.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

packages/ui/client/composables/explorer/types.ts

@@ -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",

packages/ui/client/composables/explorer/utils.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'],

packages/ui/client/composables/navigation.ts

@@ -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"
   },

packages/ui/client/composables/summary.ts

@@ -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'

packages/ui/client/utils/task.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()
   })
 })