From d58292e1710f43156a57593433891f27f6b857b9 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Fri, 10 Oct 2025 18:20:21 +0200
Subject: [PATCH 01/10] feat(ui): add project filter/sort support

---
 .../ui/client/components/FilterStatus.vue     | 16 +++-
 .../client/components/explorer/Explorer.vue   | 88 ++++++++++++++++++-
 .../ui/client/composables/client/index.ts     |  2 +
 .../ui/client/composables/explorer/filter.ts  | 12 ++-
 .../ui/client/composables/explorer/search.ts  | 57 +++++++++++-
 .../ui/client/composables/explorer/state.ts   | 13 ++-
 .../ui/client/composables/explorer/types.ts   |  5 ++
 .../ui/client/composables/explorer/utils.ts   | 23 ++++-
 8 files changed, 201 insertions(+), 15 deletions(-)

diff --git a/packages/ui/client/components/FilterStatus.vue b/packages/ui/client/components/FilterStatus.vue
index 12ea58b12631..ae90e344c02d 100644
--- a/packages/ui/client/components/FilterStatus.vue
+++ b/packages/ui/client/components/FilterStatus.vue
@@ -1,13 +1,22 @@
 <script setup lang="ts">
-defineProps<{ label: string }>()
+const props = defineProps<{ label: string; disabled?: boolean }>()
 const modelValue = defineModel<boolean | null>()
+
+function toggle() {
+  if (props.disabled) {
+    return
+  }
+
+  modelValue.value = !modelValue.value
+}
 </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"
+    class="font-light text-sm checkbox flex items-center py-1 text-sm w-full gap-y-1 mb-1px"
+    :class="disabled ? 'cursor-not-allowed op50' : 'cursor-pointer'"
     v-bind="$attrs"
-    @click.prevent="modelValue = !modelValue"
+    @click.prevent="toggle"
   >
     <span
       :class="[
@@ -19,6 +28,7 @@ const modelValue = defineModel<boolean | null>()
     <input
       v-model="modelValue"
       type="checkbox"
+      :disabled="disabled"
       sr-only
     >
     <span flex-1 ms-2 select-none>{{ label }}</span>
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index d7fe8a87a8b7..15df6f28dfa8 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -5,9 +5,9 @@ import { hideAllPoppers } from 'floating-vue'
 // @ts-expect-error missing types
 import { RecycleScroller } from 'vue-virtual-scroller'
 
-import { config } from '~/composables/client'
+import { availableProjects, config } from '~/composables/client'
 import { useSearch } from '~/composables/explorer/search'
-
+import { ALL_PROJECTS, projectSort } from '~/composables/explorer/state'
 import { activeFileId } from '~/composables/params'
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
@@ -26,6 +26,8 @@ const emit = defineEmits<{
 const includeTaskLocation = computed(() => config.value.includeTaskLocation)
 
 const searchBox = ref<HTMLInputElement | undefined>()
+const selectProjectRef = ref<HTMLSelectElement | undefined>()
+const sortProjectRef = ref<HTMLSelectElement | undefined>()
 
 const {
   initialized,
@@ -41,7 +43,14 @@ const {
   filteredFiles,
   testsTotal,
   uiEntries,
-} = useSearch(searchBox)
+  enableProjects,
+  disableClearProjects,
+  currentProject,
+  clearProject,
+  disableProjectSort,
+  clearProjectSort,
+  disableClearProjectSort,
+} = useSearch(searchBox, selectProjectRef, sortProjectRef)
 
 const filterClass = ref<string>('grid-cols-2')
 const filterHeaderClass = ref<string>('grid-col-span-2')
@@ -65,6 +74,79 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
       <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
+        v-if="enableProjects"
+        p="l3 y2 r2"
+        bg-header
+        border="b-2 base"
+        grid="~ cols-[auto_auto_minmax(0,1fr)_auto] gap-x-2 gap-y-1"
+        items-center
+      >
+        <!-- Row 1 -->
+        <div class="i-carbon:workspace" flex-shrink-0 />
+        <label for="project-select" text-sm>
+          Projects
+        </label>
+        <select
+          id="project-select"
+          ref="selectProjectRef"
+          v-model="currentProject"
+          flex-1
+          pl-1
+          text-sm
+        >
+          <option :value="ALL_PROJECTS">
+            All Projects
+          </option>
+          <option
+            v-for="project in availableProjects"
+            :key="project"
+            :value="project"
+          >
+            {{ project }}
+          </option>
+        </select>
+
+        <IconButton
+          v-tooltip.bottom="'Clear project filter'"
+          :disabled="disableClearProjects"
+          title="Clear project filter"
+          icon="i-carbon:filter-remove"
+          @click.passive="clearProject(true)"
+        />
+
+        <!-- Row 2 -->
+        <div class="i-carbon:arrows-vertical" flex-shrink-0 />
+        <label for="project-sort" text-sm>
+          Sort by
+        </label>
+        <select
+          id="project-sort"
+          ref="sortProjectRef"
+          v-model="projectSort"
+          flex-1
+          pl-1
+          text-sm
+          :disabled="disableProjectSort"
+        >
+          <option value="default">
+            Default
+          </option>
+          <option value="asc">
+            Project A-Z
+          </option>
+          <option value="desc">
+            Project Z-A
+          </option>
+        </select>
+        <IconButton
+          v-tooltip.bottom="'Reset sort'"
+          :disabled="disableClearProjectSort"
+          title="Reset sort"
+          icon="i-carbon:filter-reset"
+          @click.passive="clearProjectSort(true)"
+        />
+      </div>
       <div
         p="l3 y2 r2"
         flex="~ gap-2"
diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index 4219d9c89f75..64f9737622b1 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -63,6 +63,7 @@ export const client = (function createVitestClient() {
 
 export const config = shallowRef<SerializedConfig>({} as any)
 export const status = ref<WebSocketStatus>('CONNECTING')
+export const availableProjects = shallowRef<string[]>([])
 
 export const current = computed(() => {
   const currentFileId = activeFileId.value
@@ -174,6 +175,7 @@ watch(
           return file
         })
       }
+      availableProjects.value = projects.map(p => p.name)
       explorerTree.loadFiles(files, projects)
       client.state.collectFiles(files)
       explorerTree.startRun()
diff --git a/packages/ui/client/composables/explorer/filter.ts b/packages/ui/client/composables/explorer/filter.ts
index 06b92036589d..bfaf61d80723 100644
--- a/packages/ui/client/composables/explorer/filter.ts
+++ b/packages/ui/client/composables/explorer/filter.ts
@@ -2,12 +2,12 @@ import type { Task } from '@vitest/runner'
 import type { FileTreeNode, Filter, FilterResult, ParentTreeNode, UITaskTreeNode } from '~/composables/explorer/types'
 import { client, findById } from '~/composables/client'
 import { explorerTree } from '~/composables/explorer/index'
-import { filteredFiles, uiEntries } from '~/composables/explorer/state'
+import { currentProjectName, filteredFiles, projectSort, uiEntries } from '~/composables/explorer/state'
 import {
+  getSortedRootTasks,
   isFileNode,
   isParentNode,
   isTestNode,
-  sortedRootTasks,
 } from '~/composables/explorer/utils'
 import { caseInsensitiveMatch } from '~/utils/task'
 
@@ -36,7 +36,13 @@ export function* filterAll(
   search: string,
   filter: Filter,
 ) {
-  for (const node of sortedRootTasks()) {
+  const project = currentProjectName.value
+  const tasks = getSortedRootTasks(projectSort.value)
+
+  for (const node of tasks) {
+    if (project && node.projectName !== project) {
+      continue
+    }
     yield* filterNode(node, search, filter)
   }
 }
diff --git a/packages/ui/client/composables/explorer/search.ts b/packages/ui/client/composables/explorer/search.ts
index 15e63d7bc286..bec3fa9ac395 100644
--- a/packages/ui/client/composables/explorer/search.ts
+++ b/packages/ui/client/composables/explorer/search.ts
@@ -1,19 +1,29 @@
 import type { Ref } from 'vue'
+import type { ProjectSortUIType } from '~/composables/explorer/types'
 import { explorerTree } from '~/composables/explorer'
 import {
+  ALL_PROJECTS,
+  currentProject,
+  disableClearProjects,
+  enableProjects,
   filter,
   filteredFiles,
   initialized,
   isFiltered,
   isFilteredByStatus,
   openedTreeItems,
+  projectSort,
   search,
   testsTotal,
   treeFilter,
   uiEntries,
 } from './state'
 
-export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
+export function useSearch(
+  searchBox: Ref<HTMLInputElement | undefined>,
+  selectProject: Ref<HTMLSelectElement | undefined>,
+  sortProject: Ref<HTMLSelectElement | undefined>,
+) {
   const disableFilter = computed(() => {
     if (isFilteredByStatus.value) {
       return false
@@ -21,8 +31,11 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
 
     return !filter.onlyTests
   })
+
   const disableClearSearch = computed(() => search.value === '')
   const debouncedSearch = ref(search.value)
+  const disableProjectSort = computed(() => currentProject.value !== ALL_PROJECTS)
+  const disableClearProjectSort = computed(() => disableProjectSort.value || projectSort.value === 'default')
 
   debouncedWatch(() => search.value, (value) => {
     debouncedSearch.value = value?.trim() ?? ''
@@ -45,9 +58,25 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     }
   }
 
+  function clearProject(focus: boolean) {
+    currentProject.value = ALL_PROJECTS
+    if (focus) {
+      selectProject.value?.focus()
+    }
+  }
+
+  function clearProjectSort(focus: boolean) {
+    projectSort.value = 'default'
+    if (focus) {
+      sortProject.value?.focus()
+    }
+  }
+
   function clearAll() {
     clearFilter(false)
     clearSearch(true)
+    clearProject(false)
+    clearProjectSort(false)
   }
 
   function updateFilterStorage(
@@ -56,6 +85,8 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     successValue: boolean,
     skippedValue: boolean,
     onlyTestsValue: boolean,
+    projectValue: string,
+    projectSortValue: ProjectSortUIType,
   ) {
     if (!initialized.value) {
       return
@@ -66,6 +97,8 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     treeFilter.value.success = successValue
     treeFilter.value.skipped = skippedValue
     treeFilter.value.onlyTests = onlyTestsValue
+    treeFilter.value.project = projectValue
+    treeFilter.value.projectSort = projectSortValue === 'default' ? undefined : projectSortValue
   }
 
   watch(
@@ -75,9 +108,19 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
       filter.success,
       filter.skipped,
       filter.onlyTests,
+      currentProject.value,
+      projectSort.value,
     ] as const,
-    ([search, failed, success, skipped, onlyTests]) => {
-      updateFilterStorage(search, failed, success, skipped, onlyTests)
+    ([search, failed, success, skipped, onlyTests, project, projectSort]) => {
+      updateFilterStorage(
+        search,
+        failed,
+        success,
+        skipped,
+        onlyTests,
+        project,
+        projectSort,
+      )
       explorerTree.filterNodes()
     },
     { flush: 'post' },
@@ -103,5 +146,13 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     filteredFiles,
     testsTotal,
     uiEntries,
+    enableProjects,
+    disableClearProjects,
+    currentProject,
+    clearProject,
+    projectSort,
+    disableProjectSort,
+    clearProjectSort,
+    disableClearProjectSort,
   }
 }
diff --git a/packages/ui/client/composables/explorer/state.ts b/packages/ui/client/composables/explorer/state.ts
index 99f0bf1e2cb2..355a9d1e76c8 100644
--- a/packages/ui/client/composables/explorer/state.ts
+++ b/packages/ui/client/composables/explorer/state.ts
@@ -1,5 +1,6 @@
 import type { File } from '@vitest/runner'
-import type { FileTreeNode, Filter, FilteredTests, TreeFilterState, UITaskTreeNode } from './types'
+import type { FileTreeNode, Filter, FilteredTests, ProjectSortUIType, TreeFilterState, UITaskTreeNode } from './types'
+import { availableProjects } from '~/composables/client'
 import { explorerTree } from './index'
 
 export const uiFiles = shallowRef<FileTreeNode[]>([])
@@ -9,6 +10,7 @@ export const openedTreeItems = useLocalStorage<string[]>(
   [],
   { shallow: true },
 )
+export const ALL_PROJECTS = '__vitest_ui_all_projects__'
 export const openedTreeItemsSet = computed(() => new Set(openedTreeItems.value))
 export const treeFilter = useLocalStorage<TreeFilterState>(
   'vitest-ui_task-tree-filter',
@@ -19,8 +21,17 @@ export const treeFilter = useLocalStorage<TreeFilterState>(
     skipped: false,
     onlyTests: false,
     search: '',
+    project: ALL_PROJECTS,
+    projectSort: undefined,
   },
 )
+export const projectSort = ref<ProjectSortUIType>(treeFilter.value.projectSort || 'default')
+export const currentProject = shallowRef(treeFilter.value?.project || ALL_PROJECTS)
+export const enableProjects = computed(() => availableProjects.value.length > 1)
+export const disableClearProjects = computed(() => currentProject.value === ALL_PROJECTS)
+export const currentProjectName = computed(() => {
+  return !enableProjects.value || currentProject.value === ALL_PROJECTS ? undefined : currentProject.value
+})
 export const search = ref<string>(treeFilter.value.search)
 const htmlEntities: Record<string, string> = {
   '&': '&amp;',
diff --git a/packages/ui/client/composables/explorer/types.ts b/packages/ui/client/composables/explorer/types.ts
index 0544676b9d91..f35a1acde9e8 100644
--- a/packages/ui/client/composables/explorer/types.ts
+++ b/packages/ui/client/composables/explorer/types.ts
@@ -71,9 +71,14 @@ export interface Filter {
   onlyTests: boolean
 }
 
+export type ProjectSortType = 'asc' | 'desc'
+export type ProjectSortUIType = ProjectSortType | 'default'
+
 export interface TreeFilterState extends Filter {
   search: string
   expandAll?: boolean
+  project?: string
+  projectSort?: ProjectSortType
 }
 
 export interface CollectorInfo {
diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
index 2c9bc0c1166d..a4c140febe18 100644
--- a/packages/ui/client/composables/explorer/utils.ts
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -2,6 +2,7 @@ import type { File, Task } from '@vitest/runner'
 import type {
   FileTreeNode,
   ParentTreeNode,
+  ProjectSortUIType,
   SuiteTreeNode,
   TestTreeNode,
   UITaskTreeNode,
@@ -32,10 +33,28 @@ export function isParentNode(node: UITaskTreeNode): node is FileTreeNode | Suite
   return node.type === 'file' || node.type === 'suite'
 }
 
-export function sortedRootTasks(tasks = explorerTree.root.tasks) {
-  return tasks.sort((a, b) => {
+export function getSortedRootTasks(sort: ProjectSortUIType, tasks = explorerTree.root.tasks) {
+  const sorted = [...tasks]
+
+  sorted.sort((a, b) => {
+    if (sort === 'asc' || sort === 'desc') {
+      const projectA = a.projectName || ''
+      const projectB = b.projectName || ''
+      if (projectA !== projectB) {
+        if (sort === 'asc') {
+          return projectA.localeCompare(projectB)
+        }
+        else {
+          return projectB.localeCompare(projectA)
+        }
+      }
+    }
+    // Default sort (by filepath, then project) is the fallback for project sort
+    // and the primary for default sort
     return `${a.filepath}:${a.projectName}`.localeCompare(`${b.filepath}:${b.projectName}`)
   })
+
+  return sorted
 }
 
 export function createOrUpdateFileNode(

From 683b0f5bcf502fb56e694d5b74e7cc1169771edd Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Fri, 10 Oct 2025 19:27:19 +0200
Subject: [PATCH 02/10] chore: update filter status props definition

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

diff --git a/packages/ui/client/components/FilterStatus.vue b/packages/ui/client/components/FilterStatus.vue
index ae90e344c02d..da9d8a2a7540 100644
--- a/packages/ui/client/components/FilterStatus.vue
+++ b/packages/ui/client/components/FilterStatus.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-const props = defineProps<{ label: string; disabled?: boolean }>()
+const { disabled = false } = defineProps<{
+  label: string
+  disabled?: boolean
+}>()
 const modelValue = defineModel<boolean | null>()
 
 function toggle() {
-  if (props.disabled) {
+  if (disabled) {
     return
   }
 

From 4a93d89ff21da53c50dd739b00ca74826afac053 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 11 Oct 2025 03:39:08 +0200
Subject: [PATCH 03/10] chore: update explorer summary

---
 packages/ui/client/composables/explorer/filter.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/ui/client/composables/explorer/filter.ts b/packages/ui/client/composables/explorer/filter.ts
index bfaf61d80723..cd4b1a038c20 100644
--- a/packages/ui/client/composables/explorer/filter.ts
+++ b/packages/ui/client/composables/explorer/filter.ts
@@ -235,6 +235,11 @@ function matchTask(
   search: string,
   filter: Filter,
 ) {
+  const project = currentProjectName.value
+  if (project && task.file.projectName !== project) {
+    return false
+  }
+
   const match = search.length === 0 || caseInsensitiveMatch(task.name, search)
 
   // search and filter will apply together

From 0f4c35d39124f19cabee79abd357ff11a12e1451 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 11 Oct 2025 03:50:52 +0200
Subject: [PATCH 04/10] Revert "chore: update explorer summary"

This reverts commit 4a93d89ff21da53c50dd739b00ca74826afac053.
---
 packages/ui/client/composables/explorer/filter.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/ui/client/composables/explorer/filter.ts b/packages/ui/client/composables/explorer/filter.ts
index cd4b1a038c20..bfaf61d80723 100644
--- a/packages/ui/client/composables/explorer/filter.ts
+++ b/packages/ui/client/composables/explorer/filter.ts
@@ -235,11 +235,6 @@ function matchTask(
   search: string,
   filter: Filter,
 ) {
-  const project = currentProjectName.value
-  if (project && task.file.projectName !== project) {
-    return false
-  }
-
   const match = search.length === 0 || caseInsensitiveMatch(task.name, search)
 
   // search and filter will apply together

From 822fb1ac781d03431e14afd04d01f4ad941c5172 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 11 Oct 2025 04:01:37 +0200
Subject: [PATCH 05/10] fix: align explorer summary with project filter

---
 packages/ui/client/composables/explorer/state.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/client/composables/explorer/state.ts b/packages/ui/client/composables/explorer/state.ts
index 355a9d1e76c8..fc7017882ab5 100644
--- a/packages/ui/client/composables/explorer/state.ts
+++ b/packages/ui/client/composables/explorer/state.ts
@@ -69,6 +69,7 @@ export const isFilteredByStatus = computed(() => {
 
   return false
 })
+export const isProjectFiltered = computed(() => currentProject.value !== ALL_PROJECTS)
 export const filteredFiles = shallowRef<File[]>([])
 export const initialized = ref(false)
 export const shouldShowExpandAll = computed(() => {
@@ -84,6 +85,7 @@ export const shouldShowExpandAll = computed(() => {
 export const testsTotal = computed<FilteredTests>(() => {
   const filtered = isFiltered.value
   const filteredByStatus = isFilteredByStatus.value
+  const projectFiltered = isProjectFiltered.value
   const onlyTests = filter.onlyTests
   const failed = explorerTree.summary.filesFailed
   const success = explorerTree.summary.filesSuccess
@@ -91,7 +93,7 @@ export const testsTotal = computed<FilteredTests>(() => {
   const running = explorerTree.summary.filesRunning
   const files = filteredFiles.value
   return explorerTree.collectTestsTotal(
-    filtered || filteredByStatus,
+    filtered || filteredByStatus || projectFiltered,
     onlyTests,
     files,
     {

From f0f1357b4c2f3a29a5dd07578dff509b9971acf7 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 11 Oct 2025 04:13:35 +0200
Subject: [PATCH 06/10] chore: use `currentProjectName` and remove
 `isProjectFiltered`

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

diff --git a/packages/ui/client/composables/explorer/state.ts b/packages/ui/client/composables/explorer/state.ts
index fc7017882ab5..9ef5eb02088a 100644
--- a/packages/ui/client/composables/explorer/state.ts
+++ b/packages/ui/client/composables/explorer/state.ts
@@ -69,7 +69,6 @@ export const isFilteredByStatus = computed(() => {
 
   return false
 })
-export const isProjectFiltered = computed(() => currentProject.value !== ALL_PROJECTS)
 export const filteredFiles = shallowRef<File[]>([])
 export const initialized = ref(false)
 export const shouldShowExpandAll = computed(() => {
@@ -85,7 +84,7 @@ export const shouldShowExpandAll = computed(() => {
 export const testsTotal = computed<FilteredTests>(() => {
   const filtered = isFiltered.value
   const filteredByStatus = isFilteredByStatus.value
-  const projectFiltered = isProjectFiltered.value
+  const project = currentProjectName.value
   const onlyTests = filter.onlyTests
   const failed = explorerTree.summary.filesFailed
   const success = explorerTree.summary.filesSuccess
@@ -93,7 +92,7 @@ export const testsTotal = computed<FilteredTests>(() => {
   const running = explorerTree.summary.filesRunning
   const files = filteredFiles.value
   return explorerTree.collectTestsTotal(
-    filtered || filteredByStatus || projectFiltered,
+    filtered || filteredByStatus || !!project,
     onlyTests,
     files,
     {

From b7cbf1aeac44bfade5ab7a86d366307d34fb37d4 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 12 Oct 2025 14:09:27 +0200
Subject: [PATCH 07/10] chore: prettify selectors

---
 .../client/components/explorer/Explorer.vue   | 96 +++++++++++--------
 1 file changed, 58 insertions(+), 38 deletions(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 15df6f28dfa8..e9e10d4d662c 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -87,25 +87,35 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
         <label for="project-select" text-sm>
           Projects
         </label>
-        <select
-          id="project-select"
-          ref="selectProjectRef"
-          v-model="currentProject"
-          flex-1
-          pl-1
-          text-sm
-        >
-          <option :value="ALL_PROJECTS">
-            All Projects
-          </option>
-          <option
-            v-for="project in availableProjects"
-            :key="project"
-            :value="project"
+        <div class="relative flex-1">
+          <select
+            id="project-select"
+            ref="selectProjectRef"
+            v-model="currentProject"
+            w-full
+            appearance-none
+            bg-base
+            border="~ base rounded"
+            pl-2
+            pr-8
+            py-1
+            text-sm
+            cursor-pointer
+            hover:bg-active
           >
-            {{ project }}
-          </option>
-        </select>
+            <option :value="ALL_PROJECTS">
+              All Projects
+            </option>
+            <option
+              v-for="project in availableProjects"
+              :key="project"
+              :value="project"
+            >
+              {{ project }}
+            </option>
+          </select>
+          <div class="i-carbon:chevron-down absolute right-2 top-1/2 op50 -translate-y-1/2 pointer-events-none" />
+        </div>
 
         <IconButton
           v-tooltip.bottom="'Clear project filter'"
@@ -120,25 +130,35 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
         <label for="project-sort" text-sm>
           Sort by
         </label>
-        <select
-          id="project-sort"
-          ref="sortProjectRef"
-          v-model="projectSort"
-          flex-1
-          pl-1
-          text-sm
-          :disabled="disableProjectSort"
-        >
-          <option value="default">
-            Default
-          </option>
-          <option value="asc">
-            Project A-Z
-          </option>
-          <option value="desc">
-            Project Z-A
-          </option>
-        </select>
+        <div class="relative flex-1" :class="{ 'op-50 cursor-not-allowed': disableProjectSort }">
+          <select
+            id="project-sort"
+            ref="sortProjectRef"
+            v-model="projectSort"
+            w-full
+            appearance-none
+            bg-base
+            border="~ base rounded"
+            pl-2
+            pr-8
+            py-1
+            text-sm
+            cursor-pointer
+            hover:bg-active
+            :disabled="disableProjectSort"
+          >
+            <option value="default">
+              Default
+            </option>
+            <option value="asc">
+              Project A-Z
+            </option>
+            <option value="desc">
+              Project Z-A
+            </option>
+          </select>
+          <div class="i-carbon:chevron-down absolute right-2 top-1/2 op50 -translate-y-1/2 pointer-events-none" />
+        </div>
         <IconButton
           v-tooltip.bottom="'Reset sort'"
           :disabled="disableClearProjectSort"
@@ -225,7 +245,7 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
           </div>
         </template>
         <!-- empty-state -->
-        <template v-if="(isFiltered || isFilteredByStatus) && uiEntries.length === 0">
+        <template v-if="(isFiltered || isFilteredByStatus || !!currentProjectName) && uiEntries.length === 0">
           <div v-if="initialized" flex="~ col" items-center p="x4 y4" font-light>
             <div op30>
               No matched test

From 2b32a7838311c47ab26885aaaa6e4d8e60e87854 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 12 Oct 2025 14:23:10 +0200
Subject: [PATCH 08/10] chore: fix webstorm

---
 packages/ui/client/components/explorer/Explorer.vue | 1 +
 packages/ui/client/composables/explorer/search.ts   | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index e9e10d4d662c..978b4216d183 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -46,6 +46,7 @@ const {
   enableProjects,
   disableClearProjects,
   currentProject,
+  currentProjectName,
   clearProject,
   disableProjectSort,
   clearProjectSort,
diff --git a/packages/ui/client/composables/explorer/search.ts b/packages/ui/client/composables/explorer/search.ts
index bec3fa9ac395..6beb6d860581 100644
--- a/packages/ui/client/composables/explorer/search.ts
+++ b/packages/ui/client/composables/explorer/search.ts
@@ -4,6 +4,7 @@ import { explorerTree } from '~/composables/explorer'
 import {
   ALL_PROJECTS,
   currentProject,
+  currentProjectName,
   disableClearProjects,
   enableProjects,
   filter,
@@ -149,6 +150,7 @@ export function useSearch(
     enableProjects,
     disableClearProjects,
     currentProject,
+    currentProjectName,
     clearProject,
     projectSort,
     disableProjectSort,

From 0af74143600063b1070d464eeef567e9f9394c15 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Fri, 16 Jan 2026 19:13:56 +0100
Subject: [PATCH 09/10] chore: resolve conflicts

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

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index b445f0b742ce..472898b9ff42 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -1,10 +1,11 @@
 <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'
 
 // @ts-expect-error missing types
 import { RecycleScroller } from 'vue-virtual-scroller'
-
 import { availableProjects, config } from '~/composables/client'
 import { useSearch } from '~/composables/explorer/search'
 import { ALL_PROJECTS, projectSort } from '~/composables/explorer/state'

From d9e612c1881d2574945e65e6a8f1c2b0c24ce3f1 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Fri, 16 Jan 2026 20:38:33 +0100
Subject: [PATCH 10/10] chore: fix select and options styles for dark

---
 packages/ui/client/components/explorer/Explorer.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 472898b9ff42..b415ec28ad9a 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -100,6 +100,7 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
             w-full
             appearance-none
             bg-base
+            text-base
             border="~ base rounded"
             pl-2
             pr-8
@@ -107,14 +108,16 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
             text-sm
             cursor-pointer
             hover:bg-active
+            class="outline-none"
           >
-            <option :value="ALL_PROJECTS">
+            <option :value="ALL_PROJECTS" class="text-base bg-base">
               All Projects
             </option>
             <option
               v-for="project in availableProjects"
               :key="project"
               :value="project"
+              class="text-base bg-base"
             >
               {{ project }}
             </option>
@@ -143,6 +146,7 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
             w-full
             appearance-none
             bg-base
+            text-base
             border="~ base rounded"
             pl-2
             pr-8
@@ -150,15 +154,16 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
             text-sm
             cursor-pointer
             hover:bg-active
+            class="outline-none"
             :disabled="disableProjectSort"
           >
-            <option value="default">
+            <option value="default" class="text-base bg-base">
               Default
             </option>
-            <option value="asc">
+            <option value="asc" class="text-base bg-base">
               Project A-Z
             </option>
-            <option value="desc">
+            <option value="desc" class="text-base bg-base">
               Project Z-A
             </option>
           </select>