From 8880c907a4a279ef7144a64a1cc5f84f14a4574e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20M=C3=BCller?= <janmueller3698@gmail.com>
Date: Wed, 25 Feb 2026 11:49:17 +0100
Subject: [PATCH] feat(ui): implement filter for slow tests (#9705)

Co-authored-by: userquin <userquin@gmail.com>
---
 .../ui/client/components/FilterStatus.vue     |  7 ++-
 packages/ui/client/components/ProgressBar.vue |  6 +--
 packages/ui/client/components/StatusIcon.vue  |  8 ++--
 .../components/dashboard/TestFilesEntry.vue   | 16 +++++--
 .../components/dashboard/TestsEntry.vue       | 26 ++++++++---
 .../client/components/explorer/Explorer.vue   | 45 ++++++++-----------
 .../components/explorer/ExplorerItem.vue      | 15 +++++--
 .../ui/client/components/views/ViewEditor.vue |  4 +-
 .../components/views/ViewReportError.vue      |  2 +-
 .../client/composables/explorer/collector.ts  | 11 +++++
 .../ui/client/composables/explorer/filter.ts  | 14 +++++-
 .../ui/client/composables/explorer/search.ts  |  7 ++-
 .../ui/client/composables/explorer/state.ts   |  6 +++
 .../ui/client/composables/explorer/tree.ts    |  8 ++++
 .../ui/client/composables/explorer/types.ts   |  4 ++
 .../ui/client/composables/explorer/utils.ts   | 21 ++++++++-
 .../vitest/src/node/config/serializeConfig.ts |  5 +++
 packages/vitest/src/runtime/config.ts         |  1 +
 test/config/test/pool.test.ts                 |  6 +++
 test/ui/test/html-report.spec.ts              |  4 +-
 test/ui/test/ui.spec.ts                       |  4 +-
 21 files changed, 164 insertions(+), 56 deletions(-)

diff --git a/packages/ui/client/components/FilterStatus.vue b/packages/ui/client/components/FilterStatus.vue
index da9d8a2a7..2d7d165ec 100644
--- a/packages/ui/client/components/FilterStatus.vue
+++ b/packages/ui/client/components/FilterStatus.vue
@@ -16,7 +16,7 @@ function toggle() {
 
 <template>
   <label
-    class="font-light text-sm checkbox flex items-center py-1 text-sm w-full gap-y-1 mb-1px"
+    class="font-light text-sm checkbox w-fit flex items-center py-1 gap-y-1 mb-1px overflow-hidden"
     :class="disabled ? 'cursor-not-allowed op50' : 'cursor-pointer'"
     v-bind="$attrs"
     @click.prevent="toggle"
@@ -26,6 +26,7 @@ function toggle() {
         modelValue ? 'i-carbon:checkbox-checked-filled' : 'i-carbon:checkbox',
       ]"
       text-lg
+      flex-shrink-0
       aria-hidden="true"
     />
     <input
@@ -34,13 +35,15 @@ function toggle() {
       :disabled="disabled"
       sr-only
     >
-    <span flex-1 ms-2 select-none>{{ label }}</span>
+    <span flex-1 ms-2 select-none whitespace-nowrap truncate>{{ label }}</span>
   </label>
 </template>
 
 <style>
 .checkbox:focus-within {
   outline: none;
+  border-color: initial;
+  /* don't add outline-none here => uno will add 2px to the outline */
   @apply focus-base border-b-1 !mb-none;
 }
 </style>
diff --git a/packages/ui/client/components/ProgressBar.vue b/packages/ui/client/components/ProgressBar.vue
index ecf2c0879..92468c25b 100644
--- a/packages/ui/client/components/ProgressBar.vue
+++ b/packages/ui/client/components/ProgressBar.vue
@@ -50,7 +50,7 @@ const widthPending = computed(() => {
         absolute
         l-0
         t-0
-        bg-red5
+        bg-red-700 dark:bg-red-500
         h-3px
         :class="classes"
         :style="`width: ${widthFailed}px;`"
@@ -61,7 +61,7 @@ const widthPending = computed(() => {
         absolute
         l-0
         t-0
-        bg-green5
+        bg-green-700 dark:bg-green-500
         h-3px
         :class="classes"
         :style="`left: ${widthFailed}px; width: ${widthPass}px;`"
@@ -72,7 +72,7 @@ const widthPending = computed(() => {
         absolute
         l-0
         t-0
-        bg-yellow5
+        bg-yellow-700 dark:bg-yellow-500
         h-3px
         :class="classes"
         :style="`left: ${widthPass + widthFailed}px; width: ${widthPending}px;`"
diff --git a/packages/ui/client/components/StatusIcon.vue b/packages/ui/client/components/StatusIcon.vue
index 44fd3057a..c7adbc621 100644
--- a/packages/ui/client/components/StatusIcon.vue
+++ b/packages/ui/client/components/StatusIcon.vue
@@ -11,20 +11,20 @@ defineProps<{
 <template>
   <div
     v-if="state === 'pass'"
-    text-green-500
+    text-green-700 dark:text-green-500
     flex-shrink-0
     i-carbon:checkmark
   />
   <div
     v-else-if="failedSnapshot"
     v-tooltip.right="'Contains failed snapshot'"
-    text-red-500
+    text-red-700 dark:text-red-500
     flex-shrink-0
     i-carbon:compare
   />
   <div
     v-else-if="state === 'fail'"
-    text-red-500
+    text-red-700 dark:text-red-500
     flex-shrink-0
     i-carbon:close
   />
@@ -43,5 +43,5 @@ defineProps<{
     i-carbon:redo
     rotate-90
   />
-  <div v-else text-yellow-500 flex-shrink-0 i-carbon:circle-dash animate-spin />
+  <div v-else text-yellow-700 dark:text-yellow-500 flex-shrink-0 i-carbon:circle-dash animate-spin />
 </template>
diff --git a/packages/ui/client/components/dashboard/TestFilesEntry.vue b/packages/ui/client/components/dashboard/TestFilesEntry.vue
index b346f52b2..1243f23a1 100644
--- a/packages/ui/client/components/dashboard/TestFilesEntry.vue
+++ b/packages/ui/client/components/dashboard/TestFilesEntry.vue
@@ -30,12 +30,22 @@ import ErrorEntry from './ErrorEntry.vue'
       </div>
     </template>
 
+    <template v-if="explorerTree.summary.filesSkipped">
+      <div i-carbon:redo rotate-90 />
+      <div>
+        Skip
+      </div>
+      <div class="number" text-purple-700 dark:text-purple-400>
+        {{ explorerTree.summary.filesSkipped }}
+      </div>
+    </template>
+
     <template v-if="explorerTree.summary.filesFailed">
       <div i-carbon-close />
       <div>
         Fail
       </div>
-      <div class="number" text-red5>
+      <div class="number" text-red-700 dark:text-red-500>
         {{ explorerTree.summary.filesFailed }}
       </div>
     </template>
@@ -45,7 +55,7 @@ import ErrorEntry from './ErrorEntry.vue'
       <div>
         Snapshot Fail
       </div>
-      <div class="number" text-red5>
+      <div class="number" text-red-700 dark:text-red-500>
         {{ explorerTree.summary.filesSnapshotFailed }}
       </div>
     </template>
@@ -55,7 +65,7 @@ import ErrorEntry from './ErrorEntry.vue'
       <div>
         Errors
       </div>
-      <div class="number" text-red5>
+      <div class="number" text-red-700 dark:text-red-500>
         {{ unhandledErrors.length }}
       </div>
     </template>
diff --git a/packages/ui/client/components/dashboard/TestsEntry.vue b/packages/ui/client/components/dashboard/TestsEntry.vue
index 7be0fe7bc..f21411033 100644
--- a/packages/ui/client/components/dashboard/TestsEntry.vue
+++ b/packages/ui/client/components/dashboard/TestsEntry.vue
@@ -3,11 +3,12 @@ import { explorerTree } from '~/composables/explorer'
 import { filter } from '~/composables/explorer/state'
 import DashboardEntry from './DashboardEntry.vue'
 
-function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
+function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'slow' | 'total') {
   // Reset all filters first
   filter.success = false
   filter.failed = false
   filter.skipped = false
+  filter.slow = false
 
   if (type === 'total') {
     return
@@ -20,7 +21,7 @@ function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
 <template>
   <div flex="~ wrap" justify-evenly gap-2 p="x-4" relative>
     <DashboardEntry
-      text-green5
+      text-green-700 dark:text-green-500
       data-testid="pass-entry"
       cursor-pointer
       hover="op80"
@@ -34,7 +35,7 @@ function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
       </template>
     </DashboardEntry>
     <DashboardEntry
-      :class="{ 'text-red5': explorerTree.summary.testsFailed, 'op50': !explorerTree.summary.testsFailed }"
+      :class="{ 'text-red-700 dark:text-red-500': explorerTree.summary.testsFailed, 'op50': !explorerTree.summary.testsFailed }"
       data-testid="fail-entry"
       cursor-pointer
       hover="op80"
@@ -49,7 +50,7 @@ function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
     </DashboardEntry>
     <DashboardEntry
       v-if="explorerTree.summary.testsExpectedFail"
-      text-cyan5
+      text-cyan-700 dark:text-cyan-500
       data-testid="expected-fail-entry"
     >
       <template #header>
@@ -61,7 +62,7 @@ function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
     </DashboardEntry>
     <DashboardEntry
       v-if="explorerTree.summary.testsSkipped"
-      op50
+      text-purple-700 dark:text-purple-400
       data-testid="skipped-entry"
       cursor-pointer
       hover="op80"
@@ -100,5 +101,20 @@ function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
         {{ explorerTree.summary.totalTests }}
       </template>
     </DashboardEntry>
+    <DashboardEntry
+      v-if="explorerTree.summary.testsSlow"
+      text-yellow-700 dark:text-yellow-500
+      data-testid="slow-entry"
+      cursor-pointer
+      hover="op80"
+      @click="toggleFilter('slow')"
+    >
+      <template #header>
+        Slow
+      </template>
+      <template #body>
+        {{ explorerTree.summary.testsSlow }}
+      </template>
+    </DashboardEntry>
   </div>
 </template>
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index e02d84666..5a9227a15 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { File, Task } from '@vitest/runner'
-import { useResizeObserver } from '@vueuse/core'
 import { hideAllPoppers } from 'floating-vue'
 import { computed, ref } from 'vue'
 
@@ -28,6 +27,14 @@ const emit = defineEmits<{
 }>()
 
 const includeTaskLocation = computed(() => config.value.includeTaskLocation)
+const slowTime = computed(() => {
+  const threshold = config.value.slowTestThreshold
+  if (typeof threshold === 'number') {
+    return ` (>${threshold}ms)`
+  }
+
+  return ''
+})
 
 const searchBox = ref<HTMLInputElement | undefined>()
 const selectProjectRef = ref<HTMLSelectElement | undefined>()
@@ -56,25 +63,10 @@ const {
   disableClearProjectSort,
   searchMatcher,
 } = useSearch(searchBox, selectProjectRef, sortProjectRef)
-
-const filterClass = ref<string>('grid-cols-2')
-const filterHeaderClass = ref<string>('grid-col-span-2')
-
-const testExplorerRef = ref<HTMLElement | undefined>()
-useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
-  if (contentRect.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 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" />
@@ -222,18 +214,17 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
         items-center
         bg-header
         border="b-2 base"
-        grid="~ items-center gap-x-2 rows-[auto_auto]"
-        :class="filterClass"
+        flex="~ wrap gap-x-4 justify-between"
       >
-        <div :class="filterHeaderClass" flex="~ gap-2 items-center">
-          <div aria-hidden="true" class="i-carbon:filter" />
+        <div min-w-full flex="~ gap-2 items-center">
+          <div aria-hidden="true" class="i-carbon:filter" flex-shrink-0 />
           <div flex-grow-1 text-sm>
             Filter
           </div>
           <IconButton
             v-tooltip.bottom="'Clear Filter'"
             :disabled="disableFilter"
-            title="Clear search"
+            title="Clear filter"
             icon="i-carbon:filter-remove"
             @click.passive="clearFilter(false)"
           />
@@ -242,24 +233,25 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
         <FilterStatus v-model="filter.success" label="Pass" />
         <FilterStatus v-model="filter.skipped" label="Skip" />
         <FilterStatus v-model="filter.onlyTests" label="Only Tests" />
+        <FilterStatus v-model="filter.slow" :label="`Slow${slowTime}`" />
       </div>
     </div>
     <div class="scrolls" flex-auto py-1 @scroll.passive="hideAllPoppers">
       <ResultsPanel>
         <template v-if="initialized" #summary>
           <div grid="~ items-center gap-x-1 cols-[auto_min-content_auto] rows-[min-content_min-content]">
-            <span text-red5>
+            <span text-red-700 dark:text-red-500>
               FAIL ({{ testsTotal.failed }})
             </span>
             <span>/</span>
-            <span text-yellow5>
+            <span text-yellow-700 dark:text-yellow-500>
               RUNNING ({{ testsTotal.running }})
             </span>
-            <span text-green5>
+            <span text-green-700 dark:text-green-500>
               PASS ({{ testsTotal.success }})
             </span>
             <span>/</span>
-            <span class="text-purple5:50">
+            <span class="text-purple-700 dark:text-purple-400">
               SKIP ({{ filter.onlyTests ? testsTotal.skipped : '--' }})
             </span>
           </div>
@@ -343,6 +335,7 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
                 :project-name-color="item.projectNameColor ?? ''"
                 :state="item.state"
                 :duration="item.duration"
+                :slow="item.slow === true"
                 :opened="item.expanded"
                 :disable-task-location="!includeTaskLocation"
                 :class="selectedTest === item.id || (!selectedTest && activeFileId === item.id) ? 'bg-active' : ''"
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 40a286180..4e7f93302 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -20,6 +20,7 @@ const {
   indent,
   name,
   duration,
+  slow,
   current,
   opened,
   expandable,
@@ -35,6 +36,7 @@ const {
   indent: number
   typecheck?: boolean
   duration?: number
+  slow?: boolean
   state?: TaskState
   current: boolean
   type: TaskTreeNodeType
@@ -212,15 +214,20 @@ const tagsBgGradient = computed(() => {
       <div :class="opened ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right op20'" op20 />
     </div>
     <StatusIcon :state="state" :mode="task.mode" :failed-snapshot="failedSnapshot" w-4 />
-    <div flex items-end gap-2 overflow-hidden>
+    <div flex items-baseline gap-2 overflow-hidden>
       <div v-if="type === 'file' && typecheck" v-tooltip.bottom="'This is a typecheck test. It won\'t report results of the runtime tests'" class="i-logos:typescript-icon" flex-shrink-0 />
       <span text-sm truncate font-light>
         <span v-if="type === 'file' && projectName" class="rounded-full py-0.5 px-2 mr-1 text-xs" :style="{ backgroundColor: projectNameColor, color: projectNameTextColor }">
           {{ projectName }}
         </span>
-        <span :text="state === 'fail' ? 'red-500' : ''" v-html="highlighted" />
+        <span :class="state === 'fail' ? 'text-red-700 dark:text-red-500' : undefined" v-html="highlighted" />
       </span>
-      <span v-if="typeof duration === 'number'" text="xs" op20 style="white-space: nowrap">
+      <span
+        v-if="typeof duration === 'number'"
+        text="xs"
+        :class="slow ? 'text-yellow-700 dark:text-yellow-500' : 'op20'"
+        style="white-space: nowrap"
+      >
         {{ duration > 0 ? duration : '< 1' }}ms
       </span>
     </div>
@@ -276,7 +283,7 @@ const tagsBgGradient = computed(() => {
         data-testid="btn-run-test"
         :title="runButtonTitle"
         icon="i-carbon:play-filled-alt"
-        text-green5
+        text-green-700 dark:text-green-500
         :disabled="config.api?.allowExec === false"
         @click.prevent.stop="onRun(task)"
       />
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index 022d1226e..2d8c0fe1e 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -158,14 +158,14 @@ function createErrorElement(e: TestError) {
   const div = document.createElement('div')
   div.className = 'op80 flex gap-x-2 items-center'
   const pre = document.createElement('pre')
-  pre.className = 'c-red-600 dark:c-red-400'
+  pre.className = 'c-red-700 dark:c-red-400'
   pre.textContent = `${' '.repeat(stack.column)}^ ${e.name}: ${
     e?.message || ''
   }`
   div.appendChild(pre)
   const span = document.createElement('span')
   span.className
-    = 'i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer min-w-1em min-h-1em'
+    = 'i-carbon-launch c-red-700 dark:c-red-400 hover:cursor-pointer min-w-1em min-h-1em'
   span.tabIndex = 0
   span.ariaLabel = 'Open in Editor'
   createTooltip(
diff --git a/packages/ui/client/components/views/ViewReportError.vue b/packages/ui/client/components/views/ViewReportError.vue
index c6e1d1004..7c23d5287 100644
--- a/packages/ui/client/components/views/ViewReportError.vue
+++ b/packages/ui/client/components/views/ViewReportError.vue
@@ -53,7 +53,7 @@ function showCode(stack: ParsedStack) {
  - {{ relative(stack.file) }}:{{ stack.line }}:{{ stack.column }}</pre>
       <div
         v-tooltip.bottom="'Open in Editor'"
-        class="i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer min-w-1em min-h-1em"
+        class="i-carbon-launch c-red-700 dark:c-red-400 hover:cursor-pointer min-w-1em min-h-1em"
         tabindex="0"
         aria-label="Open in Editor"
         @click.passive="showCode(stack)"
diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
index f5f1e402c..9ed21f845 100644
--- a/packages/ui/client/composables/explorer/collector.ts
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -20,6 +20,7 @@ import {
   createOrUpdateNodeTask,
   createOrUpdateSuiteTask,
   isRunningTestNode,
+  isSlowTestTask,
 } from '~/composables/explorer/utils'
 import { isSuite } from '~/utils/task'
 import { hasFailedSnapshot } from '../../../../vitest/src/utils/tasks'
@@ -41,6 +42,7 @@ export function runLoadFiles(
     failed: filter.failed,
     success: filter.success,
     skipped: filter.skipped,
+    slow: filter.slow,
     onlyTests: filter.onlyTests,
   })
 }
@@ -294,6 +296,7 @@ export function resetCollectorInfo(summary: CollectorInfo) {
   summary.testsSkipped = 0
   summary.testsTodo = 0
   summary.testsExpectedFail = 0
+  summary.testsSlow = 0
   summary.totalTests = 0
   summary.failedSnapshotEnabled = false
 }
@@ -321,6 +324,7 @@ function collectData(
     testsSkipped: 0,
     testsTodo: 0,
     testsExpectedFail: 0,
+    testsSlow: 0,
     totalTests: 0,
     failedSnapshot: false,
     failedSnapshotEnabled: false,
@@ -356,6 +360,7 @@ function collectData(
       ignored,
       todo,
       expectedFail,
+      slow,
     } = collectTests(f)
 
     data.totalTests += total
@@ -364,6 +369,7 @@ function collectData(
     data.testsSkipped += skipped
     data.testsTodo += todo
     data.testsExpectedFail += expectedFail
+    data.testsSlow += slow
     data.testsIgnore += ignored
   }
 
@@ -379,6 +385,7 @@ function collectData(
   summary.testsSuccess = data.testsSuccess
   summary.testsTodo = data.testsTodo
   summary.testsExpectedFail = data.testsExpectedFail
+  summary.testsSlow = data.testsSlow
   summary.testsIgnore = data.testsIgnore
   summary.testsSkipped = data.testsSkipped
   summary.totalTests = data.totalTests
@@ -394,11 +401,15 @@ function collectTests(file: File, search: SearchMatcher = () => true, filter?: F
     ignored: 0,
     todo: 0,
     expectedFail: 0,
+    slow: 0,
   } satisfies CollectFilteredTests
 
   for (const t of testsCollector(file)) {
     if (!filter || testMatcher(t, search, filter)) {
       data.total++
+      if (isSlowTestTask(t)) {
+        data.slow++
+      }
       if (t.result?.state === 'fail') {
         data.failed++
       }
diff --git a/packages/ui/client/composables/explorer/filter.ts b/packages/ui/client/composables/explorer/filter.ts
index cc8ea4574..f46715321 100644
--- a/packages/ui/client/composables/explorer/filter.ts
+++ b/packages/ui/client/composables/explorer/filter.ts
@@ -1,6 +1,6 @@
 import type { Task } from '@vitest/runner'
 import type { FileTreeNode, Filter, FilterResult, ParentTreeNode, SearchMatcher, UITaskTreeNode } from '~/composables/explorer/types'
-import { client, findById } from '~/composables/client'
+import { client, config, findById } from '~/composables/client'
 import { explorerTree } from '~/composables/explorer/index'
 import { currentProjectName, filteredFiles, projectSort, uiEntries } from '~/composables/explorer/state'
 import {
@@ -220,6 +220,15 @@ function* filterParents(
 }
 
 function matchState(task: Task, filter: Filter) {
+  if (filter.slow) {
+    if (task.type === 'test') {
+      const threshold = config.value.slowTestThreshold
+      if (typeof threshold === 'number' && typeof task.result?.duration === 'number' && task.result.duration > threshold) {
+        return true
+      }
+    }
+  }
+
   if (filter.success || filter.failed) {
     if ('result' in task) {
       if (filter.success && task.result?.state === 'pass') {
@@ -245,7 +254,8 @@ function matchTask(
 ) {
   // search and filter will apply together
   if (search(task)) {
-    if (filter.success || filter.failed || filter.skipped) {
+    const hasStatusFilter = filter.success || filter.failed || filter.skipped || filter.slow
+    if (hasStatusFilter) {
       if (matchState(task, filter)) {
         return true
       }
diff --git a/packages/ui/client/composables/explorer/search.ts b/packages/ui/client/composables/explorer/search.ts
index c46d28cba..66ebff2fc 100644
--- a/packages/ui/client/composables/explorer/search.ts
+++ b/packages/ui/client/composables/explorer/search.ts
@@ -62,6 +62,7 @@ export function useSearch(
     filter.failed = false
     filter.success = false
     filter.skipped = false
+    filter.slow = false
     filter.onlyTests = false
     if (focus) {
       searchBox.value?.focus()
@@ -94,6 +95,7 @@ export function useSearch(
     failedValue: boolean,
     successValue: boolean,
     skippedValue: boolean,
+    slowValue: boolean,
     onlyTestsValue: boolean,
     projectValue: string,
     projectSortValue: SortUIType,
@@ -106,6 +108,7 @@ export function useSearch(
     treeFilter.value.failed = failedValue
     treeFilter.value.success = successValue
     treeFilter.value.skipped = skippedValue
+    treeFilter.value.slow = slowValue
     treeFilter.value.onlyTests = onlyTestsValue
     treeFilter.value.project = projectValue
     treeFilter.value.projectSort = projectSortValue === 'default' ? undefined : projectSortValue
@@ -117,16 +120,18 @@ export function useSearch(
       filter.failed,
       filter.success,
       filter.skipped,
+      filter.slow,
       filter.onlyTests,
       currentProject.value,
       projectSort.value,
     ] as const,
-    ([search, failed, success, skipped, onlyTests, project, projectSort]) => {
+    ([search, failed, success, skipped, slow, onlyTests, project, projectSort]) => {
       updateFilterStorage(
         search,
         failed,
         success,
         skipped,
+        slow,
         onlyTests,
         project,
         projectSort,
diff --git a/packages/ui/client/composables/explorer/state.ts b/packages/ui/client/composables/explorer/state.ts
index 905103d5f..58cc3ec3d 100644
--- a/packages/ui/client/composables/explorer/state.ts
+++ b/packages/ui/client/composables/explorer/state.ts
@@ -24,6 +24,7 @@ export const treeFilter = useLocalStorage<TreeFilterState>(
     failed: false,
     success: false,
     skipped: false,
+    slow: false,
     onlyTests: false,
     search: '',
     project: ALL_PROJECTS,
@@ -92,6 +93,7 @@ export const filter = reactive<Filter>({
   failed: treeFilter.value.failed,
   success: treeFilter.value.success,
   skipped: treeFilter.value.skipped,
+  slow: treeFilter.value.slow,
   onlyTests: treeFilter.value.onlyTests,
 })
 export const isFilteredByStatus = computed(() => {
@@ -107,6 +109,10 @@ export const isFilteredByStatus = computed(() => {
     return true
   }
 
+  if (filter.slow) {
+    return true
+  }
+
   return false
 })
 export const filteredFiles = shallowRef<File[]>([])
diff --git a/packages/ui/client/composables/explorer/tree.ts b/packages/ui/client/composables/explorer/tree.ts
index de6f57db5..e1d5336f0 100644
--- a/packages/ui/client/composables/explorer/tree.ts
+++ b/packages/ui/client/composables/explorer/tree.ts
@@ -51,6 +51,7 @@ export class ExplorerTree {
       testsSkipped: 0,
       testsTodo: 0,
       testsExpectedFail: 0,
+      testsSlow: 0,
       totalTests: 0,
       failedSnapshot: false,
       failedSnapshotEnabled: false,
@@ -73,6 +74,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       },
     )
@@ -127,6 +129,7 @@ export class ExplorerTree {
             failed: filter.failed,
             success: filter.success,
             skipped: filter.skipped,
+            slow: filter.slow,
             onlyTests: filter.onlyTests,
           },
           end ? this.executionTime : performance.now() - this.startTime,
@@ -143,6 +146,7 @@ export class ExplorerTree {
           failed: filter.failed,
           success: filter.success,
           skipped: filter.skipped,
+          slow: filter.slow,
           onlyTests: filter.onlyTests,
         },
         end ? this.executionTime : performance.now() - this.startTime,
@@ -160,6 +164,7 @@ export class ExplorerTree {
       failed: filter.failed,
       success: filter.success,
       skipped: filter.skipped,
+      slow: filter.slow,
       onlyTests: filter.onlyTests,
     })
   }
@@ -176,6 +181,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       })
     })
@@ -193,6 +199,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       })
     })
@@ -204,6 +211,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       })
     })
diff --git a/packages/ui/client/composables/explorer/types.ts b/packages/ui/client/composables/explorer/types.ts
index 814dfb0f9..a51056f38 100644
--- a/packages/ui/client/composables/explorer/types.ts
+++ b/packages/ui/client/composables/explorer/types.ts
@@ -18,6 +18,7 @@ export interface CollectFilteredTests extends FilteredTests {
   ignored: number
   todo: number
   expectedFail: number
+  slow: number
 }
 
 export interface TaskTreeNode {
@@ -40,6 +41,7 @@ export interface UITaskTreeNode extends TaskTreeNode {
   indent: number
   state?: TaskState
   duration?: number
+  slow?: boolean
 }
 
 export interface TestTreeNode extends UITaskTreeNode {
@@ -73,6 +75,7 @@ export interface Filter {
   failed: boolean
   success: boolean
   skipped: boolean
+  slow: boolean
   onlyTests: boolean
 }
 
@@ -109,6 +112,7 @@ export interface CollectorInfo {
   testsSkipped: number
   testsTodo: number
   testsExpectedFail: number
+  testsSlow: 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
index ead22543d..1e4cfb5a0 100644
--- a/packages/ui/client/composables/explorer/utils.ts
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -8,7 +8,7 @@ import type {
   UITaskTreeNode,
 } from '~/composables/explorer/types'
 import { isTestCase } from '@vitest/runner/utils'
-import { client } from '~/composables/client'
+import { client, config } from '~/composables/client'
 import { explorerTree } from '~/composables/explorer/index'
 import { openedTreeItemsSet } from '~/composables/explorer/state'
 import { getBadgeNameColor, isSuite as isTaskSuite } from '~/utils/task'
@@ -33,6 +33,20 @@ export function isParentNode(node: UITaskTreeNode): node is FileTreeNode | Suite
   return node.type === 'file' || node.type === 'suite'
 }
 
+export function isSlowTestTask(task: Task) {
+  if (task.type !== 'test') {
+    return false
+  }
+
+  const duration = task.result?.duration
+  if (typeof duration !== 'number') {
+    return false
+  }
+
+  const treshold = config.value.slowTestThreshold
+  return typeof treshold === 'number' && duration > treshold
+}
+
 export function getSortedRootTasks(sort: SortUIType, tasks = explorerTree.root.tasks) {
   const sorted = [...tasks]
 
@@ -73,6 +87,7 @@ export function createOrUpdateFileNode(
     fileNode.state = file.result?.state
     fileNode.mode = file.mode
     fileNode.duration = typeof file.result?.duration === 'number' ? Math.round(file.result.duration) : undefined
+    fileNode.slow = false
     fileNode.collectDuration = file.collectDuration
     fileNode.setupDuration = file.setupDuration
     fileNode.environmentLoad = file.environmentLoad
@@ -93,6 +108,7 @@ export function createOrUpdateFileNode(
       typecheck: !!file.meta && 'typecheck' in file.meta,
       indent: 0,
       duration: typeof file.result?.duration === 'number' ? Math.round(file.result.duration) : undefined,
+      slow: false,
       filepath: file.filepath,
       projectName: file.projectName || '',
       projectNameColor: explorerTree.colors.get(file.projectName || '') || getBadgeNameColor(file.projectName),
@@ -169,6 +185,7 @@ export function createOrUpdateNode(
       taskNode.name = task.name
       taskNode.mode = task.mode
       taskNode.duration = duration
+      taskNode.slow = isSlowTestTask(task)
       taskNode.state = task.result?.state
     }
     else {
@@ -184,6 +201,7 @@ export function createOrUpdateNode(
           expanded: false,
           indent: node.indent + 1,
           duration,
+          slow: isSlowTestTask(task),
           state: task.result?.state,
         } as TestTreeNode
       }
@@ -202,6 +220,7 @@ export function createOrUpdateNode(
           tasks: [],
           indent: node.indent + 1,
           duration,
+          slow: false,
           state: task.result?.state,
         } as SuiteTreeNode
       }
diff --git a/packages/vitest/src/node/config/serializeConfig.ts b/packages/vitest/src/node/config/serializeConfig.ts
index a40f289ec..7be23a3cb 100644
--- a/packages/vitest/src/node/config/serializeConfig.ts
+++ b/packages/vitest/src/node/config/serializeConfig.ts
@@ -1,5 +1,6 @@
 import type { TestProject } from '../project'
 import type { ApiConfig, SerializedConfig } from '../types/config'
+import { configDefaults } from '../../defaults'
 
 export function serializeConfig(project: TestProject): SerializedConfig {
   const { config, globalConfig } = project
@@ -141,5 +142,9 @@ export function serializeConfig(project: TestProject): SerializedConfig {
     tags: config.tags || [],
     tagsFilter: config.tagsFilter,
     strictTags: config.strictTags ?? true,
+    slowTestThreshold:
+      config.slowTestThreshold
+      ?? globalConfig.slowTestThreshold
+      ?? configDefaults.slowTestThreshold,
   }
 }
diff --git a/packages/vitest/src/runtime/config.ts b/packages/vitest/src/runtime/config.ts
index 521a3b246..a50b5c0aa 100644
--- a/packages/vitest/src/runtime/config.ts
+++ b/packages/vitest/src/runtime/config.ts
@@ -145,6 +145,7 @@ export interface SerializedConfig {
   tags: TestTagDefinition[]
   tagsFilter: string[] | undefined
   strictTags: boolean
+  slowTestThreshold: number | undefined
 }
 
 export interface SerializedCoverageConfig {
diff --git a/test/config/test/pool.test.ts b/test/config/test/pool.test.ts
index f3f69dd04..9a50dab9c 100644
--- a/test/config/test/pool.test.ts
+++ b/test/config/test/pool.test.ts
@@ -53,6 +53,12 @@ test('project level pool options overwrites top-level', async () => {
   expect(config.maxWorkers).toBe(1)
 })
 
+test('serialized config includes slowTestThreshold', async () => {
+  const config = await getConfig({})
+
+  expect(config.slowTestThreshold).toBe(300)
+})
+
 test('isolated single worker pool receives single testfile at once', async () => {
   const files = await getConfig<string[]>({
     maxWorkers: 1,
diff --git a/test/ui/test/html-report.spec.ts b/test/ui/test/html-report.spec.ts
index f215c4696..decfb3c20 100644
--- a/test/ui/test/html-report.spec.ts
+++ b/test/ui/test/html-report.spec.ts
@@ -52,7 +52,9 @@ test.describe('html report', () => {
     await page.goto(pageUrl)
 
     // dashboard
-    await expect(page.locator('[aria-labelledby=tests]')).toContainText('16 Pass 2 Fail 18 Total')
+    await expect(page.getByTestId('pass-entry')).toContainText('16 Pass')
+    await expect(page.getByTestId('fail-entry')).toContainText('2 Fail')
+    await expect(page.getByTestId('total-entry')).toContainText('18 Total')
 
     // unhandled errors
     await expect(page.getByTestId('unhandled-errors')).toContainText(
diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index a741e6035..6c658945d 100644
--- a/test/ui/test/ui.spec.ts
+++ b/test/ui/test/ui.spec.ts
@@ -71,7 +71,9 @@ test.describe('ui', () => {
     await page.goto(pageUrl)
 
     // dashboard
-    await expect(page.locator('[aria-labelledby=tests]')).toContainText('16 Pass 2 Fail 18 Total')
+    await expect(page.getByTestId('pass-entry')).toContainText('16 Pass')
+    await expect(page.getByTestId('fail-entry')).toContainText('2 Fail')
+    await expect(page.getByTestId('total-entry')).toContainText('18 Total')
 
     // unhandled errors
     await expect(page.getByTestId('unhandled-errors')).toContainText(
-- 
2.51.2