diff --git a/packages/app/src/composables/useSpecFilter.ts b/packages/app/src/composables/useSpecFilter.ts
index af2acd4ea05f..3ba862083598 100644
--- a/packages/app/src/composables/useSpecFilter.ts
+++ b/packages/app/src/composables/useSpecFilter.ts
@@ -25,7 +25,6 @@ export function useSpecFilter (savedFilter?: string) {
 
   function setSpecFilter (specFilter: string) {
     if (specStore.specFilter !== specFilter) {
-      specStore.setSpecFilter(specFilter)
       saveSpecFilter.executeMutation({ value: JSON.stringify({ specFilter }) })
     }
   }
diff --git a/packages/app/src/runs/RunsError.spec.tsx b/packages/app/src/runs/RunsError.cy.tsx
similarity index 100%
rename from packages/app/src/runs/RunsError.spec.tsx
rename to packages/app/src/runs/RunsError.cy.tsx
diff --git a/packages/app/src/specs/InlineSpecList.vue b/packages/app/src/specs/InlineSpecList.vue
index 7a919705312c..8a7c0d447482 100644
--- a/packages/app/src/specs/InlineSpecList.vue
+++ b/packages/app/src/specs/InlineSpecList.vue
@@ -29,7 +29,7 @@ import InlineSpecListHeader from './InlineSpecListHeader.vue'
 import InlineSpecListTree from './InlineSpecListTree.vue'
 import CreateSpecModal from './CreateSpecModal.vue'
 import { fuzzySortSpecs, makeFuzzyFoundSpec, useCachedSpecs } from './spec-utils'
-import type { FuzzyFoundSpec } from './spec-utils'
+import type { FuzzyFoundSpec } from './tree/useCollapsibleTree'
 import { useSpecFilter } from '../composables/useSpecFilter'
 
 gql`
diff --git a/packages/app/src/specs/InlineSpecListTree.cy.tsx b/packages/app/src/specs/InlineSpecListTree.cy.tsx
index e00e667f43c6..cd9dca57d29c 100644
--- a/packages/app/src/specs/InlineSpecListTree.cy.tsx
+++ b/packages/app/src/specs/InlineSpecListTree.cy.tsx
@@ -1,7 +1,7 @@
-import type { FuzzyFoundSpec } from './spec-utils'
 import { ref } from 'vue'
 import { useSpecStore } from '../store'
 import InlineSpecListTree from './InlineSpecListTree.vue'
+import type { FuzzyFoundSpec } from './tree/useCollapsibleTree'
 
 describe('InlineSpecListTree', () => {
   let foundSpecs: FuzzyFoundSpec[]
diff --git a/packages/app/src/specs/InlineSpecListTree.vue b/packages/app/src/specs/InlineSpecListTree.vue
index 35d2d9b9ed82..ed70d402494d 100644
--- a/packages/app/src/specs/InlineSpecListTree.vue
+++ b/packages/app/src/specs/InlineSpecListTree.vue
@@ -60,17 +60,14 @@
 </template>
 
 <script setup lang="ts">
-import { useCollapsibleTree } from '@packages/frontend-shared/src/composables/useCollapsibleTree'
-import type { UseCollapsibleTreeNode } from '@packages/frontend-shared/src/composables/useCollapsibleTree'
-import { buildSpecTree } from './spec-utils'
-import type { SpecTreeNode, FuzzyFoundSpec } from './spec-utils'
+import { UseCollapsibleTreeNode, useCollapsibleTree, SpecTreeNode, FuzzyFoundSpec, buildSpecTree } from './tree/useCollapsibleTree'
 import SpecFileItem from './SpecFileItem.vue'
 import { computed, watch, onMounted } from 'vue'
 import DirectoryItem from './DirectoryItem.vue'
 import { RouterLink, useRouter } from 'vue-router'
 import { useSpecStore } from '../store'
-import { useVirtualList } from '@packages/frontend-shared/src/composables/useVirtualList'
-import { useVirtualListNavigation } from '@packages/frontend-shared/src/composables/useVirtualListNavigation'
+import { useVirtualList } from './tree/useVirtualList'
+import { useVirtualListNavigation } from './tree/useVirtualListNavigation'
 import { useStudioStore } from '../store/studio-store'
 
 const props = defineProps<{
diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index b4c99d31f317..80d2202bf2dd 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -183,12 +183,11 @@ import { gql, useSubscription } from '@urql/vue'
 import { computed, ref, toRef, watch } from 'vue'
 import { Specs_SpecsListFragment, SpecsList_GitInfoUpdatedDocument, SpecsListFragment } from '../generated/graphql'
 import { useI18n } from '@cy/i18n'
-import { buildSpecTree, fuzzySortSpecs, makeFuzzyFoundSpec, useCachedSpecs } from './spec-utils'
-import type { FuzzyFoundSpec } from './spec-utils'
-import { useCollapsibleTree } from '@packages/frontend-shared/src/composables/useCollapsibleTree'
+import { buildSpecTree, FuzzyFoundSpec, useCollapsibleTree } from './tree/useCollapsibleTree'
+import { fuzzySortSpecs, makeFuzzyFoundSpec, useCachedSpecs } from './spec-utils'
 import RowDirectory from './RowDirectory.vue'
 import SpecItem from './SpecItem.vue'
-import { useVirtualList } from '@packages/frontend-shared/src/composables/useVirtualList'
+import { useVirtualList } from './tree/useVirtualList'
 import NoResults from '@cy/components/NoResults.vue'
 import SpecPatternModal from '../components/SpecPatternModal.vue'
 import { useOnline, useResizeObserver } from '@vueuse/core'
diff --git a/packages/app/src/specs/generators/scaffold/ScaffoldGeneratorStepOne.vue b/packages/app/src/specs/generators/scaffold/ScaffoldGeneratorStepOne.vue
index e0f8daf51c99..548519c60d0c 100644
--- a/packages/app/src/specs/generators/scaffold/ScaffoldGeneratorStepOne.vue
+++ b/packages/app/src/specs/generators/scaffold/ScaffoldGeneratorStepOne.vue
@@ -58,8 +58,8 @@
 import { gql, useMutation } from '@urql/vue'
 import { ScaffoldGeneratorStepOne_ScaffoldIntegrationDocument } from '../../../generated/graphql'
 import { computed, onMounted } from 'vue'
-import { buildSpecTree } from '../../spec-utils'
-import { useCollapsibleTree } from '@packages/frontend-shared/src/composables/useCollapsibleTree'
+import { buildSpecTree } from '../../../specs/tree/useCollapsibleTree'
+import { useCollapsibleTree } from '../../tree/useCollapsibleTree'
 import StandardModalFooter from '@cy/components/StandardModalFooter.vue'
 import Button from '@cy/components/Button.vue'
 import { useI18n } from '@cy/i18n'
diff --git a/packages/app/src/specs/spec-utils.ts b/packages/app/src/specs/spec-utils.ts
index 728028e3c9d1..5e725ac13a6c 100644
--- a/packages/app/src/specs/spec-utils.ts
+++ b/packages/app/src/specs/spec-utils.ts
@@ -2,127 +2,7 @@ import fuzzySort from 'fuzzysort'
 import type { FoundSpec } from '@packages/types'
 import { ComputedRef, Ref, ref, watch } from 'vue'
 import _ from 'lodash'
-import { getRunnerConfigFromWindow } from '../runner'
-
-// Platform may not be available when this file is loaded (e.g. during component our component tests) so
-// we defer loading it until it's used
-let platform
-const getPlatform = (): string => {
-  if (!platform) {
-    platform = getRunnerConfigFromWindow().platform
-  }
-
-  return platform
-}
-const getRegexSeparator = () => getPlatform() === 'win32' ? /\\/ : /\//
-const getSeparator = () => getPlatform() === 'win32' ? '\\' : '/'
-
-export type FuzzyFoundSpec<T = FoundSpec> = T & {
-  fuzzyIndexes: {
-    relative: number[]
-    baseName: number[]
-  }
-}
-
-export type SpecTreeNode<T extends FoundSpec = FoundSpec> = {
-  id: string
-  name: string
-  children: SpecTreeNode<T>[]
-  isLeaf: boolean
-  parent?: SpecTreeNode<T>
-  data?: T
-  highlightIndexes: number[]
-}
-
-export function buildSpecTree<T extends FoundSpec> (specs: FoundSpec[], root: SpecTreeNode<T> = { name: '', isLeaf: false, children: [], id: '', highlightIndexes: [] }): SpecTreeNode<T> {
-  specs.forEach((spec) => buildSpecTreeRecursive(spec.relative, root, spec))
-  collapseEmptyChildren(root)
-
-  return root
-}
-
-export function buildSpecTreeRecursive<T extends FoundSpec> (path: string, tree: SpecTreeNode<T>, data?: T) {
-  const [firstFile, ...rest] = path.split(getRegexSeparator())
-  const id = tree.id ? [tree.id, firstFile].join(getSeparator()) : firstFile
-
-  const newNode: SpecTreeNode<T> = { name: firstFile, isLeaf: false, children: [], parent: tree, data, id, highlightIndexes: [] }
-
-  if (rest.length < 1) {
-    newNode.isLeaf = true
-    newNode.highlightIndexes = getHighlightIndexes(newNode)
-
-    tree.children.push(newNode)
-
-    return tree
-  }
-
-  const foundChild = tree.children.find((child) => child.name === firstFile)
-
-  if (foundChild) {
-    buildSpecTreeRecursive(rest.join(getSeparator()), foundChild, data)
-
-    return tree
-  }
-
-  newNode.highlightIndexes = getHighlightIndexes(newNode)
-  const newTree = buildSpecTreeRecursive(rest.join(getSeparator()), newNode, data)
-
-  tree.children.push(newTree)
-
-  return tree
-}
-
-function collapseEmptyChildren<T extends FoundSpec> (node: SpecTreeNode<T>) {
-  for (const child of node.children) {
-    collapseEmptyChildren(child)
-  }
-  if (node.isLeaf) {
-    return
-  }
-
-  // Root name of our tree is '/'. We don't want to collapse into the root node
-  // so we check node.parent.parent
-  if (node.parent && node.parent.parent && (node.parent.children.length === 1)) {
-    node.parent.name = [node.parent.name, node.name].join(getSeparator())
-    node.parent.id = [node.parent.id, node.name].join(getSeparator())
-    node.parent.children = node.children
-    node.parent.highlightIndexes = getHighlightIndexes(node.parent)
-  }
-
-  return
-}
-
-// Given a node, return the indexes of the characters that should be highlighted
-// The indexes are matched to the `relative` and `baseName` keys of FoundSpec, and
-// depending on whether the node is a leaf or not, the indexes are normalized to the position
-// of the node's location in the tree.
-// If a search of "src/comp" is given with indexes [0,1,2,3,4,5,6,7], the indexes will be split
-// into [0,1,2] and [4,5,6,7] corresponding with a
-// - src
-//   - components
-//     - index.ts
-// tree (given that src/comp is not collapsed)
-function getHighlightIndexes <T extends FoundSpec> (node: SpecTreeNode<T>) {
-  if (!(node.data as any)?.fuzzyIndexes) {
-    return []
-  }
-
-  const { relative: relativeIndexes, baseName: baseNameIndexes } = (node.data as FuzzyFoundSpec<T>).fuzzyIndexes
-
-  // When there is a full (or close to) relative match, baseName will no longer match.
-  // If we have indexes for baseName we show them, otherwise we pull from relative to derive
-  // baseName indexes
-  if (node.isLeaf && baseNameIndexes.length > 0) {
-    return baseNameIndexes
-  }
-
-  const maxIndex = node.id.length - 1
-  const minIndex = maxIndex - node.name.length + 1
-
-  const res = relativeIndexes.filter((index) => index >= minIndex && index <= maxIndex)
-
-  return res.map((idx) => idx - minIndex)
-}
+import { FuzzyFoundSpec, getPlatform } from './tree/useCollapsibleTree'
 
 export function fuzzySortSpecs <T extends FuzzyFoundSpec> (specs: T[], searchValue: string) {
   const normalizedSearchValue = getPlatform() === 'win32' ? searchValue.replaceAll('/', '\\') : searchValue
diff --git a/packages/app/src/specs/tree/useCollapsibleTree.ts b/packages/app/src/specs/tree/useCollapsibleTree.ts
new file mode 100644
index 000000000000..ee7eeb3714a2
--- /dev/null
+++ b/packages/app/src/specs/tree/useCollapsibleTree.ts
@@ -0,0 +1,266 @@
+import type { ComputedRef, Ref } from 'vue'
+import { computed } from 'vue'
+import { useToggle } from '@vueuse/core'
+import type { FoundSpec } from '@packages/types/src'
+import { getRunnerConfigFromWindow } from '../../runner'
+
+export type RawNode <T> = {
+  id: string
+  name: string
+  children: RawNode<T>[]
+}
+
+export type FuzzyFoundSpec<T = FoundSpec> = T & {
+  fuzzyIndexes: {
+    relative: number[]
+    baseName: number[]
+  }
+}
+
+export type SpecTreeNode<T extends FoundSpec = FoundSpec> = {
+  id: string
+  name: string
+  children: SpecTreeNode<T>[]
+  isLeaf: boolean
+  parent?: SpecTreeNode<T>
+  data?: T
+  highlightIndexes: number[]
+}
+
+// Platform may not be available when this file is loaded (e.g. during component our component tests) so
+// we defer loading it until it's used
+let platform: string
+
+export const getPlatform = (): string => {
+  if (!platform) {
+    platform = getRunnerConfigFromWindow().platform
+  }
+
+  return platform
+}
+
+const getRegexSeparator = () => getPlatform() === 'win32' ? /\\/ : /\//
+const getSeparator = () => getPlatform() === 'win32' ? '\\' : '/'
+
+export function buildSpecTree<T extends FoundSpec> (specs: FoundSpec[], root: SpecTreeNode<T> = { name: '', isLeaf: false, children: [], id: '', highlightIndexes: [] }): SpecTreeNode<T> {
+  specs.forEach((spec) => buildSpecTreeRecursive(spec.relative, root, spec))
+  collapseEmptyChildren(root)
+
+  return root
+}
+
+// Given a node, return the indexes of the characters that should be highlighted
+// The indexes are matched to the `relative` and `baseName` keys of FoundSpec, and
+// depending on whether the node is a leaf or not, the indexes are normalized to the position
+// of the node's location in the tree.
+// If a search of "src/comp" is given with indexes [0,1,2,3,4,5,6,7], the indexes will be split
+// into [0,1,2] and [4,5,6,7] corresponding with a
+// - src
+//   - components
+//     - index.ts
+// tree (given that src/comp is not collapsed)
+function getHighlightIndexes <T extends FoundSpec> (node: SpecTreeNode<T>) {
+  if (!(node.data as any)?.fuzzyIndexes) {
+    return []
+  }
+
+  const { relative: relativeIndexes, baseName: baseNameIndexes } = (node.data as FuzzyFoundSpec<T>).fuzzyIndexes
+
+  // When there is a full (or close to) relative match, baseName will no longer match.
+  // If we have indexes for baseName we show them, otherwise we pull from relative to derive
+  // baseName indexes
+  if (node.isLeaf && baseNameIndexes.length > 0) {
+    return baseNameIndexes
+  }
+
+  const maxIndex = node.id.length - 1
+  const minIndex = maxIndex - node.name.length + 1
+
+  const res = relativeIndexes.filter((index) => index >= minIndex && index <= maxIndex)
+
+  return res.map((idx) => idx - minIndex)
+}
+
+export function buildSpecTreeRecursive<T extends FoundSpec> (path: string, tree: SpecTreeNode<T>, data?: T) {
+  const [firstFile, ...rest] = path.split(getRegexSeparator())
+  const id = tree.id ? [tree.id, firstFile].join(getSeparator()) : firstFile
+
+  const newNode: SpecTreeNode<T> = { name: firstFile, isLeaf: false, children: [], parent: tree, data, id, highlightIndexes: [] }
+
+  if (rest.length < 1) {
+    newNode.isLeaf = true
+    newNode.highlightIndexes = getHighlightIndexes(newNode)
+
+    tree.children.push(newNode)
+
+    return tree
+  }
+
+  const foundChild = tree.children.find((child) => child.name === firstFile)
+
+  if (foundChild) {
+    buildSpecTreeRecursive(rest.join(getSeparator()), foundChild, data)
+
+    return tree
+  }
+
+  newNode.highlightIndexes = getHighlightIndexes(newNode)
+  const newTree = buildSpecTreeRecursive(rest.join(getSeparator()), newNode, data)
+
+  tree.children.push(newTree)
+
+  return tree
+}
+
+function collapseEmptyChildren<T extends FoundSpec> (node: SpecTreeNode<T>) {
+  for (const child of node.children) {
+    collapseEmptyChildren(child)
+  }
+  if (node.isLeaf) {
+    return
+  }
+
+  // Root name of our tree is '/'. We don't want to collapse into the root node
+  // so we check node.parent.parent
+  if (node.parent && node.parent.parent && (node.parent.children.length === 1)) {
+    node.parent.name = [node.parent.name, node.name].join(getSeparator())
+    node.parent.id = [node.parent.id, node.name].join(getSeparator())
+    node.parent.children = node.children
+    node.parent.highlightIndexes = getHighlightIndexes(node.parent)
+  }
+
+  return
+}
+
+export type UseCollapsibleTreeNode <T extends RawNode<T>> = {
+  // control open/close state
+  hidden: ComputedRef<boolean>
+  expanded: Ref<boolean>
+  toggle: () => void
+
+  // Depth of a particular node -- 1 indexed
+  depth: number
+
+  parent?: UseCollapsibleTreeNode<T>
+  children: UseCollapsibleTreeNode<T>[]
+} & { [K in keyof T]: T[K]}
+
+export interface UseCollapsibleTreeOptions {
+  expandInitially?: boolean
+  dropRoot?: boolean
+  /**
+   * Provide a long-lived cache to preserve directory collapse state across tree re-builds.
+   * This can be useful when row data is updating but doesn't represent a change to the
+   * structure of the tree.
+   */
+  cache?: Map<string, boolean>
+}
+
+function collectRoots<T extends RawNode<T>> (node: UseCollapsibleTreeNode<T> | null, acc: UseCollapsibleTreeNode<T>[] = []) {
+  if (!node || !node.parent) {
+    return acc
+  }
+
+  acc.push(node)
+
+  collectRoots<T>(node.parent, acc)
+
+  return acc
+}
+
+export const useCollapsibleTreeNode = <T extends RawNode<T>>(rawNode: T, options: UseCollapsibleTreeOptions, depth: number, parent: UseCollapsibleTreeNode<T> | null): UseCollapsibleTreeNode<T> => {
+  const { cache, expandInitially } = options
+  const treeNode = rawNode as UseCollapsibleTreeNode<T>
+  const roots = parent ? collectRoots<T>(parent) : []
+  const [expanded, toggle] = useToggle(cache?.get(rawNode.id) ?? !!expandInitially)
+
+  const hidden = computed(() => {
+    return !!roots.find((r) => r.expanded.value === false)
+  })
+
+  const wrappedToggle = (value?: boolean): boolean => {
+    const originalState = expanded.value
+    const newValue = toggle(value)
+
+    // If this is a non-hidden directory then watch for expansion changes and register them into the cache if one was provided
+    if (!!cache && !hidden.value && rawNode.children?.length) {
+      cache.set(rawNode.id, !originalState)
+    }
+
+    return newValue
+  }
+
+  return {
+    ...treeNode,
+    depth,
+    parent,
+    hidden,
+    expanded,
+    toggle: wrappedToggle,
+  }
+}
+
+function buildTree<T extends RawNode<T>> (
+  rawNode: T,
+  options: UseCollapsibleTreeOptions,
+  acc: UseCollapsibleTreeNode<T>[] = [],
+  depth = 1,
+  parent: UseCollapsibleTreeNode<T> | null = null,
+) {
+  // console.log(arguments)
+  const node = useCollapsibleTreeNode<T>(rawNode, options, depth, parent)
+
+  acc.push(node)
+
+  if (node.children?.length) {
+    for (const child of node.children) {
+      buildTree(child, options, acc, depth + 1, node)
+    }
+  }
+
+  return acc
+}
+
+function sortTree<T extends RawNode<T>> (tree: T) {
+  if (tree.children.length > 0) {
+    tree.children = tree.children.sort((a, b) => {
+      if (a.children.length === 0 && b.children.length === 0) {
+        return a.name > b.name ? 1 : -1
+      }
+
+      if (a.children.length === 0) {
+        return 1
+      }
+
+      if (b.children.length === 0) {
+        return -1
+      }
+
+      return a.name > b.name ? 1 : -1
+    })
+
+    tree.children.forEach(sortTree)
+  }
+}
+
+export function useCollapsibleTree <T extends RawNode<T>> (tree: T, options: UseCollapsibleTreeOptions = {}) {
+  options.expandInitially = options.expandInitially ?? true
+  sortTree(tree)
+  const collapsibleTree = buildTree<T>(tree, options)
+
+  collapsibleTree.sort((a, b) => {
+    if (a.parent === b.parent) {
+      if (a.children.length && !b.children.length) {
+        return -1
+      }
+
+      return 0
+    }
+
+    return 0
+  })
+
+  return {
+    tree: options.dropRoot ? collapsibleTree.slice(1) : collapsibleTree,
+  }
+}
diff --git a/packages/frontend-shared/src/composables/useVirtualList.ts b/packages/app/src/specs/tree/useVirtualList.ts
similarity index 100%
rename from packages/frontend-shared/src/composables/useVirtualList.ts
rename to packages/app/src/specs/tree/useVirtualList.ts
diff --git a/packages/frontend-shared/src/composables/useVirtualListNavigation.ts b/packages/app/src/specs/tree/useVirtualListNavigation.ts
similarity index 100%
rename from packages/frontend-shared/src/composables/useVirtualListNavigation.ts
rename to packages/app/src/specs/tree/useVirtualListNavigation.ts
diff --git a/packages/app/src/store/specs-store.ts b/packages/app/src/store/specs-store.ts
index 359519edc8e5..396ef3b06830 100644
--- a/packages/app/src/store/specs-store.ts
+++ b/packages/app/src/store/specs-store.ts
@@ -12,7 +12,6 @@ export const useSpecStore = defineStore({
   state (): SpecState {
     return {
       activeSpec: undefined,
-      specFilter: undefined,
     }
   },
 
@@ -20,8 +19,5 @@ export const useSpecStore = defineStore({
     setActiveSpec (activeSpec: SpecFile | null) {
       this.activeSpec = activeSpec
     },
-    setSpecFilter (filter: string) {
-      this.specFilter = filter
-    },
   },
 })
diff --git a/packages/frontend-shared/src/composables/examples/UseCollapsibleTreeExample.cy.tsx b/packages/frontend-shared/src/composables/examples/UseCollapsibleTreeExample.cy.tsx
deleted file mode 100644
index 24e516a58840..000000000000
--- a/packages/frontend-shared/src/composables/examples/UseCollapsibleTreeExample.cy.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import UseCollapsibleTreeExample from './UseCollapsibleTreeExample.vue'
-
-describe('<UseCollapsibleTreeExample />', () => {
-  it('renders', () => {
-    cy.mount(() => <UseCollapsibleTreeExample/>)
-  })
-})
diff --git a/packages/frontend-shared/src/composables/examples/UseCollapsibleTreeExample.vue b/packages/frontend-shared/src/composables/examples/UseCollapsibleTreeExample.vue
deleted file mode 100644
index 08d4c9c24e26..000000000000
--- a/packages/frontend-shared/src/composables/examples/UseCollapsibleTreeExample.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div
-    ref="rootEl"
-    class="h-200px overflow-auto"
-    tabindex="0"
-  >
-    <div
-      v-for="row, idx in filteredTree"
-      :key="idx"
-      v-bind="rowProps"
-      class="mt-20px pt-20px block"
-      :class="{
-        'bg-gray-50': row.children,
-        'border-2 border-red-500': selectedItem === idx
-      }"
-      :style="{ marginLeft: `${row.depth * 25}px` }"
-      @click="onRowClick(row, idx)"
-      @keypress.enter.space.prevent="onRowClick(row, idx)"
-    >
-      {{ row.name ? `${row.label}: ${row.name}` : row.label }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useCollapsibleTree } from '../../composables/useCollapsibleTree'
-import faker from 'faker'
-import type { Ref } from 'vue'
-import { ref, computed } from 'vue'
-import { useListNavigation } from '../../composables/useListNavigation'
-
-type ExampleNode = {
-  children: ExampleNode[]
-  name: string
-  id: string
-  label: string
-}
-
-const contacts: ExampleNode[] = Array.from(new Array(3).keys()).map(() => {
-  return {
-    name: faker.name.firstName(),
-    label: 'Contact Details',
-    id: faker.datatype.uuid(),
-    children: [
-      { id: faker.datatype.uuid(), name: faker.name.jobDescriptor(), label: 'Job Descriptor', children: [] },
-      { id: faker.datatype.uuid(), name: faker.name.jobTitle(), label: 'Job Title', children: [] },
-      { id: faker.datatype.uuid(), name: faker.company.companyName(), label: 'Company Name', children: [] },
-    ],
-  }
-})
-
-const root: ExampleNode = {
-  children: contacts,
-  label: 'All Contacts',
-  name: '',
-  id: faker.datatype.uuid(),
-}
-
-const onRowClick = (row, idx) => {
-  row.toggle()
-  selectedItem.value = idx
-}
-
-const rootEl: Ref<HTMLElement | undefined> = ref()
-
-const { tree } = useCollapsibleTree(root)
-const filteredTree = computed(() => tree.filter(((item) => !item.hidden.value)))
-
-const { selectedItem, rowProps } = useListNavigation(rootEl)
-</script>
diff --git a/packages/frontend-shared/src/composables/useCollapsibleTree.ts b/packages/frontend-shared/src/composables/useCollapsibleTree.ts
deleted file mode 100644
index 119523bc18c9..000000000000
--- a/packages/frontend-shared/src/composables/useCollapsibleTree.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import type { ComputedRef, Ref } from 'vue'
-import { computed } from 'vue'
-import { useToggle } from '@vueuse/core'
-
-export type RawNode <T> = {
-  id: string
-  name: string
-  children: RawNode<T>[]
-}
-
-export type UseCollapsibleTreeNode <T extends RawNode<T>> = {
-  // control open/close state
-  hidden: ComputedRef<boolean>
-  expanded: Ref<boolean>
-  toggle: () => void
-
-  // Depth of a particular node -- 1 indexed
-  depth: number
-
-  parent?: UseCollapsibleTreeNode<T>
-  children: UseCollapsibleTreeNode<T>[]
-} & { [K in keyof T]: T[K]}
-
-export interface UseCollapsibleTreeOptions {
-  expandInitially?: boolean
-  dropRoot?: boolean
-  /**
-   * Provide a long-lived cache to preserve directory collapse state across tree re-builds.
-   * This can be useful when row data is updating but doesn't represent a change to the
-   * structure of the tree.
-   */
-  cache?: Map<string, boolean>
-}
-
-function collectRoots<T extends RawNode<T>> (node: UseCollapsibleTreeNode<T> | null, acc: UseCollapsibleTreeNode<T>[] = []) {
-  if (!node || !node.parent) {
-    return acc
-  }
-
-  acc.push(node)
-
-  collectRoots<T>(node.parent, acc)
-
-  return acc
-}
-
-export const useCollapsibleTreeNode = <T extends RawNode<T>>(rawNode: T, options: UseCollapsibleTreeOptions, depth: number, parent: UseCollapsibleTreeNode<T> | null): UseCollapsibleTreeNode<T> => {
-  const { cache, expandInitially } = options
-  const treeNode = rawNode as UseCollapsibleTreeNode<T>
-  const roots = parent ? collectRoots<T>(parent) : []
-  const [expanded, toggle] = useToggle(cache?.get(rawNode.id) ?? !!expandInitially)
-
-  const hidden = computed(() => {
-    return !!roots.find((r) => r.expanded.value === false)
-  })
-
-  const wrappedToggle = (value?: boolean): boolean => {
-    const originalState = expanded.value
-    const newValue = toggle(value)
-
-    // If this is a non-hidden directory then watch for expansion changes and register them into the cache if one was provided
-    if (!!cache && !hidden.value && rawNode.children?.length) {
-      cache.set(rawNode.id, !originalState)
-    }
-
-    return newValue
-  }
-
-  return {
-    ...treeNode,
-    depth,
-    parent,
-    hidden,
-    expanded,
-    toggle: wrappedToggle,
-  }
-}
-
-function buildTree<T extends RawNode<T>> (rawNode: T, options: UseCollapsibleTreeOptions, acc: UseCollapsibleTreeNode<T>[] = [], depth = 1, parent: UseCollapsibleTreeNode<T> | null = null) {
-  const node = useCollapsibleTreeNode<T>(rawNode, options, depth, parent)
-
-  acc.push(node)
-
-  if (node.children?.length) {
-    for (const child of node.children) {
-      buildTree(child, options, acc, depth + 1, node)
-    }
-  }
-
-  return acc
-}
-
-function sortTree<T extends RawNode<T>> (tree: T) {
-  if (tree.children.length > 0) {
-    tree.children = tree.children.sort((a, b) => {
-      if (a.children.length === 0 && b.children.length === 0) {
-        return a.name > b.name ? 1 : -1
-      }
-
-      if (a.children.length === 0) {
-        return 1
-      }
-
-      if (b.children.length === 0) {
-        return -1
-      }
-
-      return a.name > b.name ? 1 : -1
-    })
-
-    tree.children.forEach(sortTree)
-  }
-}
-
-export function useCollapsibleTree <T extends RawNode<T>> (tree: T, options: UseCollapsibleTreeOptions = {}) {
-  options.expandInitially = options.expandInitially ?? true
-  sortTree(tree)
-  const collapsibleTree = buildTree<T>(tree, options)
-
-  collapsibleTree.sort((a, b) => {
-    if (a.parent === b.parent) {
-      if (a.children.length && !b.children.length) {
-        return -1
-      }
-
-      return 0
-    }
-
-    return 0
-  })
-
-  return {
-    tree: options.dropRoot ? collapsibleTree.slice(1) : collapsibleTree,
-  }
-}
diff --git a/packages/frontend-shared/src/composables/useListNavigation.ts b/packages/frontend-shared/src/composables/useListNavigation.ts
deleted file mode 100644
index 4fef406f5ad4..000000000000
--- a/packages/frontend-shared/src/composables/useListNavigation.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { onKeyStroke } from '@vueuse/core'
-import { ref, onBeforeUpdate } from 'vue'
-
-export const useListNavigation = (rootEl) => {
-  const selectedItem = ref(0)
-  const itemRefs = ref([]) as any
-  const setItemRef = (el) => {
-    if (el) {
-      itemRefs.value.push(el)
-    }
-  }
-
-  onBeforeUpdate(() => {
-    itemRefs.value = []
-  })
-
-  const goToItem = (direction: 'next' | 'previous', event) => {
-    event.preventDefault()
-    if (direction === 'next') {
-      if (selectedItem.value + 1 >= itemRefs.value.length) {
-        selectedItem.value = 0
-      } else {
-        selectedItem.value++
-      }
-    } else {
-      if (selectedItem.value <= 0) {
-        selectedItem.value = itemRefs.value.length - 1
-      } else {
-        selectedItem.value--
-      }
-    }
-
-    itemRefs.value[selectedItem.value]?.focus({ preventScroll: true })
-    itemRefs.value[selectedItem.value]?.scrollIntoView({ block: 'nearest' })
-  }
-
-  onKeyStroke('ArrowDown', (event: KeyboardEvent) => {
-    goToItem('next', event)
-  }, { target: rootEl })
-
-  onKeyStroke('ArrowUp', (event) => {
-    goToItem('previous', event)
-  }, { target: rootEl })
-
-  return {
-    selectedItem,
-    rowProps: {
-      ref: setItemRef,
-      tabindex: '-1',
-    },
-  }
-}
diff --git a/tooling/v8-snapshot/cache/dev-linux/snapshot-meta.cache.json b/tooling/v8-snapshot/cache/dev-linux/snapshot-meta.cache.json
index 0b1863a1f6da..c5cdce04453a 100644
--- a/tooling/v8-snapshot/cache/dev-linux/snapshot-meta.cache.json
+++ b/tooling/v8-snapshot/cache/dev-linux/snapshot-meta.cache.json
@@ -48,6 +48,8 @@
     "./packages/server/lib/modes/record.js",
     "./packages/server/lib/modes/run.ts",
     "./packages/server/lib/open_project.ts",
+    "./packages/server/lib/project-base.ts",
+    "./packages/server/lib/socket-ct.ts",
     "./packages/server/node_modules/@benmalka/foxdriver/node_modules/graceful-fs/polyfills.js",
     "./packages/server/node_modules/glob/node_modules/minimatch/minimatch.js",
     "./packages/server/node_modules/graceful-fs/polyfills.js",
@@ -3527,5 +3529,5 @@
     "./tooling/v8-snapshot/cache/dev-linux/snapshot-entry.js"
   ],
   "deferredHashFile": "yarn.lock",
-  "deferredHash": "ce60d1d6cc0c77f20dcfc741105a5c53593752f814bf3cab816a3024faf68bfc"
+  "deferredHash": "6e64b278585907ecd02c6688a3964ef282453f2ca9753603ade51dc14ab6f7ee"
 }