diff --git a/changes.d/2370.feat.md b/changes.d/2370.feat.md
new file mode 100644
index 000000000..88ebe2743
--- /dev/null
+++ b/changes.d/2370.feat.md
@@ -0,0 +1,4 @@
+Task filtering improvements:
+* Task ID filtering now supports globs.
+* Task state filtering now supports queued, runahead, wallclock, xtriggered, retry, held and skip selectors.
+* Task filtering controls have been redesigned.
diff --git a/src/components/cylc/TaskFilter.vue b/src/components/cylc/TaskFilter.vue
deleted file mode 100644
index a8fc1547f..000000000
--- a/src/components/cylc/TaskFilter.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-Copyright (C) NIWA & British Crown (Met Office) & Contributors.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<!-- Controls for filtering tasks in views. -->
-
-<template>
-  <v-row no-gutters>
-    <v-col
-      cols="12"
-      md="6"
-      class="pr-md-2 mb-2 mb-md-0"
-    >
-      <v-text-field
-        data-cy="filter-id"
-        clearable
-        placeholder="Filter by ID"
-        v-model="model.id"
-        ref="filterIDInput"
-      />
-    </v-col>
-    <v-col
-      cols="12"
-      md="6"
-      class="mb-2 mb-md-0"
-    >
-      <TaskFilterSelect
-        v-model="model.states"
-        type="task state"
-        :items="TaskStateNames"
-        data-cy="filter task state"
-        placeholder="Filter by task state"
-      />
-    </v-col>
-  </v-row>
-</template>
-
-<script setup>
-import { TaskStateNames } from '@/model/TaskState.model'
-import TaskFilterSelect from '@/components/cylc/TaskFilterSelect.vue'
-
-/** @type {import('vue').Ref<{ id: string?, states: string[]? }>} */
-const model = defineModel({
-  type: Object,
-  required: true,
-})
-
-</script>
diff --git a/src/components/cylc/ViewToolbar.vue b/src/components/cylc/ViewToolbar.vue
index 25a024835..faf7f7c13 100644
--- a/src/components/cylc/ViewToolbar.vue
+++ b/src/components/cylc/ViewToolbar.vue
@@ -30,24 +30,90 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="control"
         :data-cy="`control-${iControl.key}`"
       >
-        <v-btn
-          @click="iControl.callback"
-          v-bind="btnProps"
-          :disabled="iControl.disabled"
-          :aria-checked="iControl.value"
-          :color="iControl.value ? 'blue' : undefined"
-          role="switch"
+        <!-- menu component (to support dropdowns) -->
+        <v-menu
+          eager
+          :close-on-content-click="false"
         >
-          <v-icon>{{ iControl.icon }}</v-icon>
-          <v-tooltip>{{ iControl.title }}</v-tooltip>
-        </v-btn>
+          <template v-slot:activator="{ props }">
+            <!-- inputs -->
+            <v-text-field
+              v-if="iControl.action === 'input'"
+              v-model="iControl.value"
+              class="input"
+              v-bind="iControl.props"
+              clearable
+              :prepend-inner-icon="iControl.icon"
+              @update:modelValue="iControl.callback"
+              @focus="autoResizeInput"
+              @blur="autoResizeInput"
+            />
+
+            <!-- buttons -->
+            <v-btn
+              v-else
+              class="control-btn"
+              v-bind="{...$attrs, ...props, ...btnProps}"
+              @click="(e) => {iControl.action === 'menu' ? null : iControl.callback(e)}"
+              :disabled="iControl.disabled"
+              :aria-checked="iControl.value"
+              :color="isSet(iControl.value) ? 'blue' : undefined"
+              role="switch"
+              density="compact"
+            >
+              <v-icon>{{ iControl.icon[iControl.value] || iControl.icon }}</v-icon>
+              <v-tooltip>{{ iControl.title }}</v-tooltip>
+            </v-btn>
+          </template>
+
+          <!-- dropdowns -->
+          <v-card
+            v-if="iControl.action === 'menu'"
+          >
+            <v-btn
+              :prepend-icon="$options.icons.mdiUndo"
+              variant="plain"
+              @click="iControl.callback([])"
+              block
+              spaced="end"
+              :data-cy="`control-${iControl.key}-reset`"
+            >
+              Reset
+            </v-btn>
+            <v-divider></v-divider>
+
+            <v-treeview
+              v-bind="iControl.props"
+              v-model:activated="iControl.value"
+              @update:activated="iControl.callback"
+              color="blue"
+              density="compact"
+              style="padding-top: 0;"
+            >
+              <!-- task icons (for task state filters -->
+              <template
+                v-slot:prepend="{ item }"
+                v-if="iControl.props['task-state-icons']"
+              >
+                <Task :task="item.taskProps" />
+              </template>
+            </v-treeview>
+          </v-card>
+        </v-menu>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { btnProps } from '@/utils/viewToolbar'
+import { btnProps, taskStateItems } from '@/utils/viewToolbar'
+import Task from '@/components/cylc/Task.vue'
+import {
+  mdiFilter,
+  mdiMagnify,
+  mdiUndo,
+} from '@mdi/js'
+import { TaskState, WaitingStateModifierNames } from '@/model/TaskState.model'
 
 export default {
   name: 'ViewToolbar',
@@ -56,10 +122,18 @@ export default {
     'setOption'
   ],
 
+  components: {
+    Task
+  },
+
+  icons: {
+    mdiUndo,
+  },
+
   props: {
     groups: {
       required: true,
-      type: Array
+      type: Array,
       /*
         groups: [
           {
@@ -70,21 +144,40 @@ export default {
               {
                 // display name
                 title: String,
+
                 // unique key:
                 // * Provided with "setOption" events.
                 // * Used by enableIf/disableIf
                 // * Added to the control's class list for testing.
                 key: String
+
+                // icon for the control:
+                // * Either an icon.
+                // * Or a mapping of state to an icon.
+                // NOTE: this is autopopulated for action="taskStateFilter | taskIDFilter"
+                icon: Icon | Object[key, Icon]
+
                 // action to perform when clicked:
+                // Generic actions:
                 // * toggle - toggle true/false
                 // * callback - call the provided callback
+                // * menu - open a menu (provide props: {items} in v-treeview format)
+                // Specialised actions:
+                // * taskIDFilter - Search box for task IDs
+                // * taskStateFilter - open a task state filter menu
                 action: String
+
                 // for use with action='callback'
                 callback: Fuction
+
+                // props to be set on the control
+                props: Object
+
                 // list of keys
                 // only enable this control if all of the listed controls have
                 // truthy values
                 enableIf
+
                 // list of keys
                 // disable this control if any of the listed controls have
                 // truthy values
@@ -111,6 +204,8 @@ export default {
       let iControl
       let callback // callback to fire when control is activated
       let disabled // true if control should not be enabled
+      let props
+      let action
       const values = this.getValues()
       for (const group of this.groups) {
         iGroup = {
@@ -120,15 +215,43 @@ export default {
         for (const control of group.controls) {
           callback = null
           disabled = false
+          props = control.props || {}
+          action = control.action
 
           // set callback
-          switch (control.action) {
-            case 'toggle':
+          switch (action) {
+            case 'toggle': // toggle button
               callback = (e) => this.toggle(control, e)
               break
-            case 'callback':
+            case 'callback': // button which actions a callback
               callback = (e) => this.call(control, e)
               break
+            case 'taskIDFilter': // specialised "input" for filtering tasks
+              callback = (value) => this.set(control, value)
+              control.icon = mdiMagnify
+              action = 'input'
+              props = {
+                placeholder: 'Search     (globs supported)',
+                ...props,
+              }
+              break
+            case 'input': // text input
+              callback = (value) => this.set(control, value)
+              break
+            case 'taskStateFilter': // specialised "menu" for filtering tasks
+              action = 'menu'
+              control.icon = mdiFilter
+              props = {
+                items: taskStateItems,
+                'indent-lines': true,
+                activatable: true,
+                'active-strategy': 'independent',
+                'item-value': 'value',
+                'task-state-icons': true, // flag to enable special slots
+                ...props,
+              }
+              callback = (value) => this.set(control, value)
+              break
           }
 
           // set disabled
@@ -147,6 +270,8 @@ export default {
 
           iControl = {
             ...control,
+            action,
+            props,
             callback,
             disabled
           }
@@ -186,6 +311,40 @@ export default {
       }
       return vars
     },
+    set (control, value) {
+      // update the value
+      if ( // special logic for the taskStateFilter
+        control.action === 'taskStateFilter' &&
+        // if a waiting state modifier is selected
+        value.some((modifier) => WaitingStateModifierNames.includes(modifier)) &&
+        // but the waiting state is not
+        !value.includes(TaskState.WAITING.name)
+      ) {
+        // then add the waiting state (i.e, don't allow the user to de-select
+        // waiting whilst a modifier is in play)
+        value.push(TaskState.WAITING.name)
+      }
+      this.$emit('setOption', control.key, value)
+    },
+    autoResizeInput (e) {
+      // enlarge a text input when focused or containing text
+      if (e.type === 'focus') {
+        e.target.classList.add('expanded')
+      } else {
+        if (e.target.value) {
+          e.target.classList.add('expanded')
+        } else {
+          e.target.classList.remove('expanded')
+        }
+      }
+    },
+    isSet (value) {
+      // determine if a control is active or not
+      if (Array.isArray(value)) {
+        return value.length
+      }
+      return value
+    }
   }
 }
 </script>
@@ -204,11 +363,25 @@ export default {
         // place a divider between groups
         content: '';
         height: 70%;
-        width: 2px;
-        background: rgb(0, 0, 0, 0.22);
+        width: 0.15em;
+        border-radius: 0.15em;
+        background: rgb(0, 0, 0, 0.18);
         // put a bit of space between the groups
         margin: 0 $spacing;
       }
+
+      // pack buttons more tightly than the vuetify default
+      .control-btn {
+        margin: 0.4em 0.25em 0.4em 0.25em;
+      }
+
+      // auto expand/collapse the search bar
+      .input {
+        width: 8em;
+      }
+      .input:has(input.expanded) {
+        width: 20em;
+      }
     }
   }
 </style>
diff --git a/src/components/cylc/common/filter.js b/src/components/cylc/common/filter.js
index b39715cef..92eb9768c 100644
--- a/src/components/cylc/common/filter.js
+++ b/src/components/cylc/common/filter.js
@@ -17,6 +17,44 @@
 
 /* Logic for filtering tasks. */
 
+import {
+  GenericModifierNames,
+  TaskState,
+  TaskStateNames,
+  WaitingStateModifierNames,
+} from '@/model/TaskState.model'
+import {
+  escapeRegExp
+} from 'lodash-es'
+
+/* Convert a glob to a Regex.
+ *
+ * Returns null if a blank string is provided as input.
+ *
+ * Supports the same globs as Python's "fnmatch" module:
+ *   `*` - match everything.
+ *   `?` - match a single character.
+ *   `[seq]` - match any character in seq (same as regex).
+ *   `[!seq]` - match any character *not* in seq.
+ */
+export function globToRegex (glob) {
+  if (!glob || !glob.trim()) {
+    // no glob provided
+    return null
+  }
+  return new RegExp(
+    // escape any regex characters in the glob
+    escapeRegExp(glob.trim())
+      .replace(/\\\*/, '.*')
+      // `?` -> `.`
+      .replace(/\\\?/, '.')
+      // `[!X]` -> `[^X]`
+      .replace(/\\\[!([^]*)\\\]/, '[^$1]')
+      // `[X]` -> `[X]`
+      .replace(/\\\[([^]*)\\\]/, '[$1]')
+  )
+}
+
 /**
  * Return true if the node ID matches the given ID, or if no ID is given.
  *
@@ -24,8 +62,8 @@
  * @param {?string} id
  * @return {boolean}
  */
-export function matchID (node, id) {
-  return !id?.trim() || node.tokens.relativeID.includes(id)
+export function matchID (node, regex) {
+  return !regex || Boolean(node.tokens.relativeID.match(regex))
 }
 
 /**
@@ -36,8 +74,29 @@ export function matchID (node, id) {
  * @param {?string[]} states
  * @returns {boolean}
  */
-export function matchState (node, states) {
-  return !states?.length || states.includes(node.node.state)
+export function matchState (
+  node,
+  states = [],
+  waitingStateModifiers = [],
+  genericModifiers = [],
+) {
+  return (
+    (!states?.length || states.includes(node.node.state)) &&
+    (
+      node.node.state !== 'waiting' ||
+      !states.includes(TaskState.WAITING.name) ||
+      !waitingStateModifiers.length ||
+      waitingStateModifiers.some((modifier) => node.node[modifier])
+    ) &&
+    (
+      !genericModifiers.length ||
+      genericModifiers.some((modifier) => node.node[modifier]) ||
+      (
+        genericModifiers.includes('isSkip') &&
+        node.node.runtime?.runMode === 'Skip'
+      )
+    )
+  )
 }
 
 /**
@@ -49,6 +108,14 @@ export function matchState (node, states) {
  * @param {?string[]} states
  * @return {boolean}
  */
-export function matchNode (node, id, states) {
-  return matchID(node, id) && matchState(node, states)
+export function matchNode (node, regex, states, waitingStateModifiers, genericModifiers) {
+  return matchID(node, regex) && matchState(node, states, waitingStateModifiers, genericModifiers)
+}
+
+export function groupStateFilters (states) {
+  return [
+    states.filter(x => TaskStateNames.includes(x)),
+    states.filter(x => WaitingStateModifierNames.includes(x)),
+    states.filter(x => GenericModifierNames.includes(x)),
+  ]
 }
diff --git a/src/components/cylc/gscan/GScan.vue b/src/components/cylc/gscan/GScan.vue
index 74cbb1446..258b0ff28 100644
--- a/src/components/cylc/gscan/GScan.vue
+++ b/src/components/cylc/gscan/GScan.vue
@@ -99,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :workflows="workflows"
         :node-filter-func="filterNode"
         tree-item-component="GScanTreeItem"
-        class="c-gscan-workflow"
+        class="c-gscan-workflow pa-0"
         ref="tree"
         v-bind="{ filterState }"
       />
@@ -123,7 +123,7 @@ import Tree from '@/components/cylc/tree/Tree.vue'
 import { filterByName, filterByState } from '@/components/cylc/gscan/filters'
 import { sortedWorkflowTree } from '@/components/cylc/gscan/sort.js'
 import { mutate } from '@/utils/aotf'
-import TaskFilterSelect from '@/components/cylc/TaskFilterSelect.vue'
+import TaskFilterSelect from '@/components/cylc/gscan/TaskFilterSelect.vue'
 
 export default {
   name: 'GScan',
diff --git a/src/components/cylc/TaskFilterSelect.vue b/src/components/cylc/gscan/TaskFilterSelect.vue
similarity index 100%
rename from src/components/cylc/TaskFilterSelect.vue
rename to src/components/cylc/gscan/TaskFilterSelect.vue
diff --git a/src/components/cylc/table/Table.vue b/src/components/cylc/table/Table.vue
index 87df61e4a..d4a3cb726 100644
--- a/src/components/cylc/table/Table.vue
+++ b/src/components/cylc/table/Table.vue
@@ -26,6 +26,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     density="compact"
     v-model:page="page"
     v-model:items-per-page="itemsPerPage"
+    fixed-header
   >
     <template v-slot:item.task.name="{ item }">
       <div
diff --git a/src/components/cylc/tree/Tree.vue b/src/components/cylc/tree/Tree.vue
index 1b47f5920..32eca5cae 100644
--- a/src/components/cylc/tree/Tree.vue
+++ b/src/components/cylc/tree/Tree.vue
@@ -16,10 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <v-container
-    fluid
-    class="pa-0"
-  >
+  <div>
     <component
       :is="treeItemComponent"
       v-for="child of rootChildren"
@@ -27,7 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :node="child"
       v-bind="{ hoverable, cyclePointsOrderDesc, expandAll, filteredOutNodesCache, flat }"
     />
-  </v-container>
+  </div>
 </template>
 
 <script>
diff --git a/src/model/TaskState.model.js b/src/model/TaskState.model.js
index 63501409a..87614438e 100644
--- a/src/model/TaskState.model.js
+++ b/src/model/TaskState.model.js
@@ -43,6 +43,7 @@ export class TaskState extends Enumify {
 
 /**
  * Task states ordered for display purposes.
+ * TODO: replace this by iterating TaskState.enumKeys?
  */
 export const TaskStateUserOrder = [
   TaskState.WAITING,
@@ -57,4 +58,38 @@ export const TaskStateUserOrder = [
 
 export const TaskStateNames = TaskStateUserOrder.map(({ name }) => name)
 
+export class TaskModifier extends Enumify {
+  static isRetry = new TaskModifier('isRetry', 'Retry')
+  static isRunahead = new TaskModifier('isRunahead', 'Runahead')
+  static isQueued = new TaskModifier('isQueued', 'Queued')
+  static isWallclock = new TaskModifier('isWallclock', 'Wallclock')
+  static isXtrigger = new TaskModifier('isXtriggered', 'Xtrigger')
+  static isHeld = new TaskModifier('isHeld', 'Held')
+  static isSkip = new TaskModifier('isSkip', 'Skip')
+  static _ = this.closeEnum()
+
+  constructor (field, title) {
+    super()
+    this.field = field
+    this.title = title
+  }
+}
+
+export const WaitingStateModifiers = [
+  TaskModifier.isRetry,
+  TaskModifier.isRunahead,
+  TaskModifier.isQueued,
+  TaskModifier.isWallclock,
+  TaskModifier.isXtrigger,
+]
+
+export const WaitingStateModifierNames = WaitingStateModifiers.map(({ field }) => field)
+
+export const GenericModifiers = [
+  TaskModifier.isSkip,
+  TaskModifier.isHeld,
+]
+
+export const GenericModifierNames = GenericModifiers.map(({ field }) => field)
+
 export default TaskState
diff --git a/src/services/mock/json/workflows/one.json b/src/services/mock/json/workflows/one.json
index 784b2ac56..b72ae2f4e 100644
--- a/src/services/mock/json/workflows/one.json
+++ b/src/services/mock/json/workflows/one.json
@@ -48,6 +48,13 @@
         }
       ],
       "familyProxies": [
+        {
+          "__typename": "FamilyProxy",
+          "id": "~user/one//20000102T0000Z/root",
+          "name": "root",
+          "state": "failed",
+          "cyclePoint": "20000102T0000Z"
+        },
         {
           "__typename": "FamilyProxy",
           "id": "~user/one//20000102T0000Z/BAD",
@@ -115,6 +122,9 @@
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
+          "isRetry": false,
+          "isWallclock": false,
+          "isXtriggered": false,
           "cyclePoint": "20000102T0000Z",
           "flowNums": "[1]",
           "firstParent": {
@@ -135,6 +145,9 @@
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
+          "isRetry": false,
+          "isWallclock": false,
+          "isXtriggered": false,
           "cyclePoint": "20000102T0000Z",
           "flowNums": "[1]",
           "firstParent": {
@@ -152,9 +165,12 @@
           "id": "~user/one//20000102T0000Z/failed",
           "name": "failed",
           "state": "failed",
-          "isHeld": false,
+          "isHeld": true,
           "isQueued": false,
           "isRunahead": false,
+          "isRetry": false,
+          "isWallclock": false,
+          "isXtriggered": false,
           "cyclePoint": "20000102T0000Z",
           "flowNums": "[1,2]",
           "firstParent": {
@@ -174,6 +190,9 @@
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
+          "isRetry": true,
+          "isWallclock": false,
+          "isXtriggered": false,
           "cyclePoint": "20000102T0000Z",
           "flowNums": "[1]",
           "firstParent": {
@@ -193,6 +212,9 @@
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
+          "isRetry": false,
+          "isWallclock": false,
+          "isXtriggered": false,
           "cyclePoint": "20000102T0000Z",
           "flowNums": "[]",
           "firstParent": {
@@ -212,6 +234,9 @@
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
+          "isRetry": false,
+          "isWallclock": false,
+          "isXtriggered": false,
           "cyclePoint": "20000102T0000Z",
           "flowNums": "[1]",
           "firstParent": {
@@ -223,6 +248,9 @@
           "task": {
             "meanElapsedTime": 4.0,
             "name": "succeeded"
+          },
+          "runtime": {
+            "runMode": "Skip"
           }
         },
         {
@@ -232,6 +260,9 @@
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
+          "isRetry": false,
+          "isWallclock": true,
+          "isXtriggered": true,
           "cyclePoint": "20000102T0000Z",
           "flowNums": "[1]",
           "firstParent": {
diff --git a/src/utils/viewToolbar.js b/src/utils/viewToolbar.js
index 54626a56b..a768b5cd9 100644
--- a/src/utils/viewToolbar.js
+++ b/src/utils/viewToolbar.js
@@ -14,6 +14,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {
+  GenericModifiers,
+  TaskModifier,
+  TaskState,
+  TaskStateNames,
+  WaitingStateModifiers,
+} from '@/model/TaskState.model'
+
 /**
  * Scale icon size to button size.
  * https://github.com/vuetifyjs/vuetify/issues/16288
@@ -39,3 +47,47 @@ export const btnProps = (size) => ({
     fontSize: btnIconFontSize(size)
   },
 })
+
+function getProps (modifier) {
+  const ret = {}
+  if (modifier === TaskModifier.isSkip) {
+    ret.runtime = { runMode: 'Skip' }
+  } else {
+    ret[modifier.field] = true
+  }
+  return ret
+}
+
+export const taskStateItems = [
+  {
+    title: TaskState.WAITING.name,
+    value: TaskState.WAITING.name,
+    taskProps: { state: TaskState.WAITING.name },
+    children: WaitingStateModifiers
+      .map((modifier) => {
+        return {
+          title: modifier.title,
+          value: modifier.field,
+          taskProps: getProps(modifier)
+        }
+      })
+  },
+  ...TaskStateNames
+    .filter((name) => name !== TaskState.WAITING.name)
+    .map((name) => {
+      return {
+        title: name,
+        value: name,
+        taskProps: { state: name }
+      }
+    }),
+  { type: 'divider' },
+  ...GenericModifiers
+    .map((modifier) => {
+      return {
+        title: modifier.title,
+        value: modifier.field,
+        taskProps: getProps(modifier)
+      }
+    }),
+]
diff --git a/src/views/Table.vue b/src/views/Table.vue
index e57008936..1d9710248 100644
--- a/src/views/Table.vue
+++ b/src/views/Table.vue
@@ -16,46 +16,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="h-100">
-    <v-container
-      fluid
-      class="c-table ma-0 pa-2 h-100 flex-column d-flex"
-    >
-      <!-- Toolbar -->
-      <v-row
-        no-gutters
-        class="d-flex flex-wrap flex-grow-0"
-      >
-        <!-- Filters -->
-        <v-col>
-          <TaskFilter v-model="tasksFilter"/>
-        </v-col>
-      </v-row>
-      <v-row
-        no-gutters
-        class="flex-grow-1 position-relative"
-      >
-        <v-col
-          cols="12"
-          class="mh-100 position-relative"
-        >
-          <v-container
-            fluid
-            class="ma-0 pa-0 w-100 h-100 left-0 top-0 position-absolute pt-2"
-          >
-            <TableComponent
-              :tasks="filteredTasks"
-              v-model:initial-options="dataTableOptions"
-            />
-          </v-container>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
+  <v-container
+    fluid
+    class="c-table pa-2 pb-0 h-100 flex-column d-flex"
+  >
+    <ViewToolbar
+      :groups="controlGroups"
+      @setOption="setOption"
+    />
+    <div class="overflow-hidden">
+      <TableComponent
+        :tasks="filteredTasks"
+        v-model:initial-options="dataTableOptions"
+        class="mh-100"
+      />
+    </div>
+  </v-container>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
+
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import {
@@ -63,9 +44,9 @@ import {
   updateInitialOptionsEvent,
   useInitialOptions
 } from '@/utils/initialOptions'
-import { matchNode } from '@/components/cylc/common/filter'
+import { matchNode, groupStateFilters, globToRegex } from '@/components/cylc/common/filter'
+import ViewToolbar from '@/components/cylc/ViewToolbar.vue'
 import TableComponent from '@/components/cylc/table/Table.vue'
-import TaskFilter from '@/components/cylc/TaskFilter.vue'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import gql from 'graphql-tag'
 
@@ -167,7 +148,7 @@ export default {
 
   components: {
     TableComponent,
-    TaskFilter
+    ViewToolbar,
   },
 
   emits: [updateInitialOptionsEvent],
@@ -234,8 +215,51 @@ export default {
     },
 
     filteredTasks () {
-      return this.tasks.filter(({ task }) => matchNode(task, this.tasksFilter.id, this.tasksFilter.states))
-    }
-  }
+      const [states, waitingStateModifiers, genericModifiers] = groupStateFilters(
+        this.tasksFilter.states?.length ? this.tasksFilter.states : []
+      )
+      return this.tasks.filter(({ task }) => matchNode(
+        task,
+        globToRegex(this.tasksFilter.id),
+        states,
+        waitingStateModifiers,
+        genericModifiers
+      ))
+    },
+
+    controlGroups () {
+      return [
+        {
+          title: 'Filter',
+          controls: [
+            {
+              title: 'Filter By ID',
+              action: 'taskIDFilter',
+              key: 'taskIDFilter',
+              value: this.tasksFilter.id
+            },
+            {
+              title: 'Filter By State',
+              action: 'taskStateFilter',
+              key: 'taskStateFilter',
+              value: this.tasksFilter.states,
+            },
+          ],
+        },
+      ]
+    },
+  },
+
+  methods: {
+    setOption (option, value) {
+      if (option === 'taskStateFilter') {
+        this.tasksFilter.states = value
+      } else if (option === 'taskIDFilter') {
+        this.tasksFilter.id = value
+      } else {
+        this[option] = value
+      }
+    },
+  },
 }
 </script>
diff --git a/src/views/Tree.vue b/src/views/Tree.vue
index 984999dd9..e87702dcb 100644
--- a/src/views/Tree.vue
+++ b/src/views/Tree.vue
@@ -16,89 +16,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="h-100">
-    <v-container
-      fluid
-      class="c-tree pa-2"
-      data-cy="tree-view"
-    >
-      <!-- Toolbar -->
-      <v-row
-        no-gutters
-        class="d-flex flex-wrap"
-      >
-        <!-- Filters -->
-        <v-col>
-          <TaskFilter v-model="tasksFilter" />
-        </v-col>
-        <!-- Expand, collapse all -->
-        <v-col class="flex-grow-0">
-          <div
-            class="d-flex flex-nowrap ml-2"
-          >
-            <v-btn
-              @click="flat = !flat"
-              icon
-              variant="flat"
-              size="small"
-              data-cy="toggle-families"
-            >
-              <v-icon size="x-large">
-                {{ flat? $options.icons.mdiFormatAlignRight : $options.icons.mdiFormatAlignJustify }}
-              </v-icon>
-              <v-tooltip>
-                {{ flat ? "Show Families" : "Hide Families" }}
-              </v-tooltip>
-            </v-btn>
-            <v-btn
-              @click="expandAll = ['workflow', 'cycle', 'family']"
-              icon
-              variant="flat"
-              size="small"
-              data-cy="expand-all"
-            >
-              <v-icon size="x-large">{{ $options.icons.mdiPlus }}</v-icon>
-              <v-tooltip>Expand all</v-tooltip>
-            </v-btn>
-            <v-btn
-              @click="expandAll = []"
-              icon
-              variant="flat"
-              size="small"
-              data-cy="collapse-all"
-            >
-              <v-icon size="x-large">{{ $options.icons.mdiMinus }}</v-icon>
-              <v-tooltip>Collapse all</v-tooltip>
-            </v-btn>
-          </div>
-        </v-col>
-      </v-row>
-      <v-row
-        no-gutters
-        class="mt-2"
-      >
-        <v-col
-          cols="12"
-          class="mh-100 position-relative"
-        >
-          <TreeComponent
-            :workflows="workflows"
-            :hoverable="false"
-            :autoStripTypes="['workflow']"
-            :node-filter-func="filterNode"
-            :flat="flat"
-            v-bind="{ expandAll, filterState }"
-            ref="treeComponent"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
+  <div class="c-tree h-100 overflow-auto">
+    <ViewToolbar
+      class="toolbar"
+      :groups="controlGroups"
+      @setOption="setOption"
+    />
+    <TreeComponent
+      class="tree"
+      :workflows="workflows"
+      :hoverable="false"
+      :autoStripTypes="['workflow']"
+      :node-filter-func="filterNode"
+      :flat="flat"
+      v-bind="{ expandAll, filterState }"
+      ref="treeComponent"
+    />
   </div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { mdiPlus, mdiMinus, mdiFormatAlignRight, mdiFormatAlignJustify } from '@mdi/js'
+import {
+  mdiFormatAlignJustify,
+  mdiFormatAlignRight,
+  mdiMinus,
+  mdiPlus,
+} from '@mdi/js'
 import gql from 'graphql-tag'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
@@ -107,9 +51,9 @@ import {
   useInitialOptions
 } from '@/utils/initialOptions'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
-import TaskFilter from '@/components/cylc/TaskFilter.vue'
 import TreeComponent from '@/components/cylc/tree/Tree.vue'
-import { matchID, matchState } from '@/components/cylc/common/filter'
+import ViewToolbar from '@/components/cylc/ViewToolbar.vue'
+import { matchID, matchState, groupStateFilters, globToRegex } from '@/components/cylc/common/filter'
 
 const QUERY = gql`
 subscription Workflow ($workflowId: ID) {
@@ -232,8 +176,8 @@ export default {
   ],
 
   components: {
-    TaskFilter,
-    TreeComponent
+    TreeComponent,
+    ViewToolbar,
   },
 
   props: { initialOptions },
@@ -282,12 +226,81 @@ export default {
 
     filterState () {
       return (this.tasksFilter.id?.trim() || this.tasksFilter.states?.length)
-        ? this.tasksFilter
+        ? [this.tasksFilter.id, this.tasksFilter.states, this.flat]
         : null
-    }
+    },
+
+    controlGroups () {
+      return [
+        {
+          title: 'Filter',
+          controls: [
+            {
+              title: 'Filter By ID',
+              action: 'taskIDFilter',
+              key: 'taskIDFilter',
+              value: this.tasksFilter.id
+            },
+            {
+              title: 'Filter By State',
+              action: 'taskStateFilter',
+              key: 'taskStateFilter',
+              value: this.tasksFilter.states,
+            },
+          ],
+        },
+        {
+          title: 'Tree',
+          controls: [
+            {
+              title: 'Toggle Families',
+              icon: {
+                true: mdiFormatAlignJustify,
+                false: mdiFormatAlignRight
+              },
+              action: 'toggle',
+              value: this.flat,
+              key: 'flat'
+            },
+            {
+              title: 'Expand All',
+              key: 'ExpandAll',
+              icon: mdiPlus,
+              action: 'callback',
+              callback: this.treeExpandAll,
+            },
+            {
+              title: 'Collapse All',
+              key: 'CollapseAll',
+              icon: mdiMinus,
+              action: 'callback',
+              callback: this.treeCollapseAll,
+            },
+          ]
+        }
+      ]
+    },
   },
 
   methods: {
+    setOption (option, value) {
+      if (option === 'taskStateFilter') {
+        this.tasksFilter.states = value
+      } else if (option === 'taskIDFilter') {
+        this.tasksFilter.id = value
+      } else {
+        this[option] = value
+      }
+    },
+
+    treeExpandAll () {
+      this.expandAll = ['workflow', 'cycle', 'family']
+    },
+
+    treeCollapseAll () {
+      this.expandAll = []
+    },
+
     /**
      * Recursively set the filtered out cache for this node and its children if applicable.
      *
@@ -302,9 +315,14 @@ export default {
         // jobs are always included and don't contribute to the filtering
         return false
       }
-      const stateMatch = matchState(node, this.tasksFilter.states)
+
+      const [states, waitingStateModifiers, genericModifiers] = groupStateFilters(
+        this.tasksFilter.states?.length ? this.tasksFilter.states : []
+      )
+
+      const stateMatch = matchState(node, states, waitingStateModifiers, genericModifiers)
       // This node should be included if any parent matches the ID filter
-      const idMatch = parentsIDMatch || matchID(node, this.tasksFilter.id)
+      const idMatch = parentsIDMatch || matchID(node, globToRegex(this.tasksFilter.id))
       let isMatch = stateMatch && idMatch
 
       let { children } = node
@@ -312,7 +330,7 @@ export default {
         // follow the family tree from cycle point nodes
         children = node.familyTree[0]?.children
       }
-      if (children) {
+      if (!this.flat && children) {
         for (const child of children) {
           isMatch = this.filterNode(child, filteredOutNodesCache, idMatch) || isMatch
           // Note: do not break early as we must run the filter over all children
@@ -325,10 +343,26 @@ export default {
   },
 
   icons: {
-    mdiPlus,
-    mdiMinus,
-    mdiFormatAlignRight,
     mdiFormatAlignJustify,
+    mdiFormatAlignRight,
+    mdiMinus,
+    mdiPlus,
   },
 }
 </script>
+
+<style scoped lang="scss">
+.c-tree {
+  .toolbar {
+    position: sticky;
+    top: 0;
+    padding: 0.5em;
+    background: white;
+    z-index: 1;
+  }
+  .tree {
+    width: 100%;
+    padding: 0 0.5em;
+  }
+}
+</style>
diff --git a/tests/component/specs/viewToolbar.cy.js b/tests/component/specs/viewToolbar.cy.js
index bc7ee88f6..87da7232c 100644
--- a/tests/component/specs/viewToolbar.cy.js
+++ b/tests/component/specs/viewToolbar.cy.js
@@ -27,7 +27,7 @@ describe('View Toolbar Component', () => {
     cy.vmount(
       ViewToolbar,
       {
-        props: { groups }
+        props: { groups },
       }
     ).as('wrapper')
     // add the classes Vuetify requires
@@ -224,4 +224,93 @@ describe('View Toolbar Component', () => {
     // TODO: visual regression test
     // https://github.com/cylc/cylc-ui/issues/178
   })
+
+  it('filters task states', () => {
+    mountToolbar([
+      {
+        title: 'Group 1',
+        controls: [
+          {
+            title: 'Filter',
+            action: 'taskStateFilter',
+            value: [],
+            key: 'filter'
+          }
+        ]
+      },
+    ])
+    cy.get('.control > button').click()
+    cy.get('.v-list-item').as('menuItems')
+      .filter(':visible')
+      .should('have.length', 10)
+      .contains('.v-list-item', 'waiting').as('waitingItem')
+
+    // 1) select the waiting state and expand the waiting submenu
+    cy.get('@waitingItem')
+      .click()
+      .find('button')
+      .click({ force: true })
+
+      // the setOption event should be fired
+      .get('@wrapper').then(({ wrapper }) => {
+        expect(
+          wrapper.emitted().setOption.at(-1)[1]
+        ).to.deep.equal(['waiting'])
+      })
+
+      // the waiting state should be selected
+      .get('@waitingItem')
+      .should('have.class', 'v-list-item--active')
+
+      // the waiting submenu should be open
+      .get('.v-list-item').as('menuItems')
+      .filter(':visible')
+      .should('have.length', 15)
+
+    // 2) select the Retry state
+    cy.get('@menuItems')
+      .contains('Retry')
+      .click({ force: true })
+
+      // the setOption event should be fired
+      .get('@wrapper').then(({ wrapper }) => {
+        expect(
+          wrapper.emitted().setOption.at(-1)[1]
+        ).to.deep.equal(['waiting', 'isRetry'])
+      })
+
+    // 3) unselect the waiting state
+    cy.get('@waitingItem')
+      .click()
+
+      // implementation detail: the setOption event is fired again
+      // but the waiting state is not removed
+      .get('@wrapper').then(({ wrapper }) => {
+        expect(
+          wrapper.emitted().setOption.at(-1)[1]
+        ).to.deep.equal(['isRetry', 'waiting'])
+      })
+
+      // the waiting state should still be selected
+      .get('@waitingItem')
+      .should('have.class', 'v-list-item--active')
+
+    // 3) unselect the retry state THEN the waiting state
+    cy.get('@menuItems')
+      .contains('Retry')
+      .click({ force: true })
+      .get('@waitingItem')
+      .click()
+
+      // the waiting state should NOT be selected
+      .get('@waitingItem')
+      .should('not.have.class', 'v-list-item--active')
+
+      // the setOption event should be fired
+      .get('@wrapper').then(({ wrapper }) => {
+        expect(
+          wrapper.emitted().setOption.at(-1)[1]
+        ).to.deep.equal([])
+      })
+  })
 })
diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
index 192842765..1d9899c77 100644
--- a/tests/e2e/specs/analysis.cy.js
+++ b/tests/e2e/specs/analysis.cy.js
@@ -420,19 +420,12 @@ describe('Analysis view', () => {
   })
 })
 
-function addView (view) {
-  cy.get('[data-cy=add-view-btn]').click()
-  cy.get(`#toolbar-add-${view}-view`).click()
-    // wait for menu to close
-    .should('not.be.exist')
-}
-
 describe('Filters and Options save state', () => {
   const numTasks = sortedTasks.length
   describe('Options save state', () => {
     beforeEach(() => {
+      localStorage.defaultView = 'Analysis'
       cy.visit('/#/workspace/one')
-      addView('Analysis')
     })
 
     it('remembers table and box & whiskers toggle option when switching between workflows', () => {
@@ -548,7 +541,12 @@ describe('Filters and Options save state', () => {
     })
 
     it('shows sorting controls in correct tab', () => {
-      addView('Analysis') // second analysis view
+      // add second analysis view
+      cy.get('[data-cy=add-view-btn]').click()
+      cy.get('#toolbar-add-Analysis-view').click()
+        // wait for menu to close
+        .should('not.be.exist')
+
       cy.get('.c-analysis [data-cy=box-plot-toggle]:last')
         .click()
         .get('[data-cy="box-plot-sort-select"]')
diff --git a/tests/e2e/specs/editRuntimeForm.cy.js b/tests/e2e/specs/editRuntimeForm.cy.js
index 3580df33e..fa4242df6 100644
--- a/tests/e2e/specs/editRuntimeForm.cy.js
+++ b/tests/e2e/specs/editRuntimeForm.cy.js
@@ -180,7 +180,7 @@ describe('Edit Runtime form', () => {
       .get('.c-mutation-dialog .v-card-subtitle')
       .contains('/root')
     // but not jobs
-    cy.get('[data-cy=tree-view] [data-c-interactive].c-job:first')
+    cy.get('.c-tree [data-c-interactive].c-job:first')
       .click({ force: true })
       .get('#less-more-button')
       .should('not.exist') // if this does deliberately exist in future, change to .click()
diff --git a/tests/e2e/specs/gantt.cy.js b/tests/e2e/specs/gantt.cy.js
index 2ae9ad264..d4a3b1d9e 100644
--- a/tests/e2e/specs/gantt.cy.js
+++ b/tests/e2e/specs/gantt.cy.js
@@ -60,7 +60,7 @@ describe('Filter save state', () => {
     // Set task name filter option to something other than default ('')
     selectOption('#c-gantt-filter-job-name', 'c3')
     // Set task times filter option to something other than default ('Total times')
-    selectOption('#c-gantt-filter-job-timings', 'Queue')
+    selectOption('#c-gantt-filter-job-timings', 'Queue times')
     // Set platform filter option to something other than default ('All')
     selectOption('#c-gantt-filter-job-platforms', 'localhost')
     // Set tasks per page filter option to something other than default (10)
@@ -75,7 +75,7 @@ describe('Filter save state', () => {
     // Check name filter
     checkOption('#c-gantt-filter-job-name', 'c3')
     // Check task times filter
-    checkOption('#c-gantt-filter-job-timings', 'Queue')
+    checkOption('#c-gantt-filter-job-timings', 'Queue times')
     // Check platform filter
     checkOption('#c-gantt-filter-job-platforms', 'localhost')
     // Check tasks per page
diff --git a/tests/e2e/specs/mutation.cy.js b/tests/e2e/specs/mutation.cy.js
index 7cd4503d0..9988257e4 100644
--- a/tests/e2e/specs/mutation.cy.js
+++ b/tests/e2e/specs/mutation.cy.js
@@ -33,7 +33,7 @@ describe('Mutations component', () => {
    * @param {string} nodeName - the tree node name, to search for and open the mutations form
    */
   const openMutationsForm = (nodeName) => {
-    cy.get('[data-cy=tree-view]').as('treeView')
+    cy.get('.c-tree').as('treeView')
       .find('.c-treeitem')
       .find('.c-task')
       .should('be.visible')
diff --git a/tests/e2e/specs/table.cy.js b/tests/e2e/specs/table.cy.js
index 26df1dee7..20cd60ead 100644
--- a/tests/e2e/specs/table.cy.js
+++ b/tests/e2e/specs/table.cy.js
@@ -43,14 +43,12 @@ describe('Table view', () => {
     it('Should filter by ID', () => {
       cy.get('.c-table table > tbody > tr')
         .should('have.length', initialNumRows)
-      cy.get('[data-cy=filter-id] input')
+      cy.get('[data-cy=control-taskIDFilter] input')
         .should('be.empty')
-      cy.get('[data-cy="filter task state"] input')
-        .should('have.value', '')
       cy.get('td [data-cy-task-name=sleepy]')
         .should('be.visible')
       for (const id of ['eep', '/sle']) {
-        cy.get('[data-cy=filter-id] input')
+        cy.get('[data-cy=control-taskIDFilter] input')
           .clear()
           .type(id)
         cy.get('td [data-cy-task-name=sleepy]')
@@ -69,7 +67,7 @@ describe('Table view', () => {
         .get('td [data-cy-task-name=failed]')
         .should('be.visible')
       cy
-        .get('[data-cy="filter task state"]')
+        .get('[data-cy=control-taskStateFilter]')
         .click()
       cy
         .get('.v-list-item')
@@ -89,7 +87,7 @@ describe('Table view', () => {
         .get('.c-table table > tbody > tr')
         .should('have.length', initialNumRows)
       cy
-        .get('[data-cy="filter task state"]')
+        .get('[data-cy=control-taskStateFilter]')
         .click()
       cy
         .get('.v-list-item')
@@ -100,7 +98,7 @@ describe('Table view', () => {
         .should('have.length', 2)
         .should('be.visible')
       cy
-        .get('[data-cy=filter-id] input')
+        .get('[data-cy=control-taskIDFilter] input')
         .type('eventually')
       cy
         .get('td [data-cy-task-name=eventually_succeeded]')
@@ -182,18 +180,19 @@ describe('State saving', () => {
       .get('.c-table table > tbody > tr')
       .should('have.length', initialNumRows)
     cy
-      .get('[data-cy="filter task state"]:last')
+      .get('[data-cy=control-taskStateFilter]:last')
       .click()
     cy
       .get('.v-list-item')
-      .contains(TaskState.SUCCEEDED.name)
+      .filter(':visible')
+      .contains('.v-list-item', 'succeeded')
       .click({ force: true })
     cy
       .get('.c-table table > tbody > tr')
       .should('have.length', 2)
       .should('be.visible')
     cy
-      .get('[data-cy=filter-id] input:last')
+      .get('[data-cy=control-taskIDFilter] input:last')
       .type('eventually')
     cy
       .get('td [data-cy-task-name=eventually_succeeded]')
diff --git a/tests/e2e/specs/tree.cy.js b/tests/e2e/specs/tree.cy.js
index 525cb733d..793af7fd9 100644
--- a/tests/e2e/specs/tree.cy.js
+++ b/tests/e2e/specs/tree.cy.js
@@ -174,7 +174,7 @@ describe('Tree view', () => {
         .should('have.length', initialNumTasks)
         .contains('waiting')
       for (const id of ['eed', '/suc', 'GOOD', 'SUC']) {
-        cy.get('[data-cy=filter-id] input')
+        cy.get('.c-view-toolbar input')
           .clear()
           .type(id)
         cy.get('.node-data-task:visible')
@@ -184,12 +184,12 @@ describe('Tree view', () => {
           .should('not.be.visible')
       }
       // It should stop filtering when input is cleared
-      cy.get('[data-cy=filter-id] input')
+      cy.get('.c-view-toolbar input')
         .clear()
         .get('.node-data-task:visible')
         .should('have.length', initialNumTasks)
       // It should filter by cycle point
-      cy.get('[data-cy=filter-id] input')
+      cy.get('.c-view-toolbar input')
         .type('2000') // (matches all tasks)
         .get('.node-data-task:visible')
         .should('have.length', initialNumTasks)
@@ -202,7 +202,7 @@ describe('Tree view', () => {
           .contains(name)
           .should('be.visible')
       }
-      cy.get('[data-cy="filter task state"]')
+      cy.get('[data-cy="control-taskStateFilter"]')
         .click()
         .get('.v-list-item')
         .contains(new RegExp(`^${TaskState.FAILED.name}$`))
@@ -226,10 +226,10 @@ describe('Tree view', () => {
         .contains('failed')
         .should('be.visible')
       cy
-        .get('[data-cy=filter-id]')
+        .get('[data-cy="control-taskIDFilter"]')
         .type('i')
       cy
-        .get('[data-cy="filter task state"]')
+        .get('[data-cy="control-taskStateFilter"]')
         .click()
         .get('.v-list-item')
         .contains(TaskState.WAITING.name)
@@ -247,10 +247,10 @@ describe('Tree view', () => {
         .contains('failed')
         .should('be.visible')
       cy
-        .get('[data-cy=filter-id]')
+        .get('[data-cy="control-taskIDFilter"]')
         .type('i')
       cy
-        .get('[data-cy="filter task state"]')
+        .get('[data-cy="control-taskStateFilter"]')
         .click()
         .get('.v-list-item')
         .contains(TaskState.WAITING.name)
@@ -265,18 +265,37 @@ describe('Tree view', () => {
         .contains('retrying')
     })
 
-    it('Provides a select all functionality', () => {
+    it('Provides a reset functionality', () => {
       cy.visit('/#/tree/one')
-      cy.get('[data-cy="filter task state"]')
-        .get('.v-list-item--active')
-        .should('have.length', 0)
-      cy.get('[data-cy="filter task state"]')
+      cy.get('[data-cy="control-taskStateFilter"]')
         .click()
-        .get('[data-cy=task-filter-select-all]')
+        .get('.v-list-item')
+        .as('filters')
+
+      // select some states
+      for (const state of [
+        TaskState.WAITING,
+        TaskState.PREPARING,
+        TaskState.SUBMITTED]
+      ) {
+        cy.get('@filters')
+          .contains(state.name)
+          .click()
+      }
+
+      // there should be three states selected
+      cy.get('@filters')
+        .get('.v-list-item--active')
+        .should('have.length', 3)
+
+      // press the reset button
+      cy.get('[data-cy="control-taskStateFilter-reset"]')
         .click()
-      cy.get('[data-cy="filter task state"]')
+
+      // there should be zero states selected
+      cy.get('@filters')
         .get('.v-list-item--active')
-        .should('have.length', 8)
+        .should('have.length', 0)
     })
   })
 
@@ -287,11 +306,11 @@ describe('Tree view', () => {
         .contains('sleepy')
         .as('sleepyTask')
         .should('be.visible')
-      cy.get('[data-cy=collapse-all]')
+      cy.get('[data-cy=control-CollapseAll]')
         .click()
         .get('@sleepyTask')
         .should('not.be.visible')
-        .get('[data-cy=expand-all]')
+        .get('[data-cy=control-ExpandAll]')
         .click()
         .get('@sleepyTask')
         .should('be.visible')
@@ -299,7 +318,7 @@ describe('Tree view', () => {
 
     it('Does not expand jobs but can collapse them', () => {
       cy.visit('/#/tree/one')
-        .get('[data-cy=expand-all]')
+        .get('[data-cy=control-ExpandAll]')
         .click()
         .get('.node-data-job:first')
         .should('not.exist')
@@ -308,14 +327,14 @@ describe('Tree view', () => {
         .click()
         .get('.node-data-job:first')
         .should('be.visible')
-      cy.get('[data-cy=expand-all]')
+      cy.get('[data-cy=control-ExpandAll]')
         .click()
         // The job should remain expanded
         .get('.node-data-job:first')
         .should('be.visible')
-      cy.get('[data-cy=collapse-all]')
+      cy.get('[data-cy=control-CollapseAll]')
         .click()
-        .get('[data-cy=expand-all]')
+        .get('[data-cy=control-ExpandAll]')
         .click()
         // The job should be collapsed now
         .get('.node-data-job:first')
@@ -328,41 +347,24 @@ describe('Tree view', () => {
         .contains('sleepy')
         .as('sleepyTask')
         .should('be.visible')
-      cy.get('[data-cy=filter-id]')
+      cy.get('[data-cy="control-taskIDFilter"]')
         .type('sleep')
-      cy.get('[data-cy=collapse-all]')
+      cy.get('[data-cy=control-CollapseAll]')
         .click()
         .get('@sleepyTask')
         .should('not.be.visible')
-        .get('[data-cy=expand-all]')
+        .get('[data-cy=control-ExpandAll]')
         .click()
         .get('@sleepyTask')
         .should('be.visible')
     })
   })
 
-  it('should show a summary of tasks if the number of selected items is greater than the maximum limit', () => {
-    cy.visit('/#/tree/one')
-    cy.get('[data-cy="filter task state"]')
-      .click()
-    // eslint-disable-next-line no-lone-blocks
-    TaskState.enumValues.forEach(state => {
-      cy.get('.v-list-item')
-        .contains(state.name)
-        .click({ force: true })
-    })
-    // Click outside to close dropdown
-    cy.get('noscript')
-      .click({ force: true })
-    cy.get('[data-cy="filter task state"]')
-      .contains('.v-select__selection', '(+')
-  })
-
   describe('Toggle families', () => {
     it('Toggles between flat and hierarchical modes', () => {
       cy.visit('/#/tree/one')
       cy.get('.node-data-family').should('have.length', 3)
-      cy.get('[data-cy=toggle-families]').click()
+      cy.get('[data-cy=control-flat]').click()
       cy.get('.node-data-family').should('have.length', 0)
     })
   })
diff --git a/tests/e2e/specs/workspace.cy.js b/tests/e2e/specs/workspace.cy.js
index 07c0c27fe..56b52cfb0 100644
--- a/tests/e2e/specs/workspace.cy.js
+++ b/tests/e2e/specs/workspace.cy.js
@@ -118,7 +118,7 @@ describe('Workspace view and component/widget', () => {
         .should('have.length', 2)
       cy.get('.c-tree')
         .should('be.visible')
-        .find('[data-cy=filter-id] input')
+        .find('[data-cy=control-taskIDFilter] input')
         .should('have.value', 'GOOD')
       cy.get('.c-table')
         .should('be.visible')
@@ -141,7 +141,8 @@ describe('Workspace view and component/widget', () => {
     // (It takes a moment for the split pane to render properly - should('be.visible') does not wait for this unfortunately)
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(100)
-    cy.get('.c-tree [data-cy=filter-id] input')
+    cy.get('.c-tree')
+      .find('[data-cy=control-taskIDFilter] input')
       .type('GOOD')
     expectRememberedLayout()
 
diff --git a/tests/unit/components/cylc/common/filter.spec.js b/tests/unit/components/cylc/common/filter.spec.js
index cc965ad74..3d57f4f01 100644
--- a/tests/unit/components/cylc/common/filter.spec.js
+++ b/tests/unit/components/cylc/common/filter.spec.js
@@ -15,7 +15,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { matchID, matchNode, matchState } from '@/components/cylc/common/filter'
+import {
+  globToRegex,
+  matchID,
+  matchNode,
+  matchState,
+} from '@/components/cylc/common/filter'
 
 const taskNode = {
   id: '~user/one//20000102T0000Z/succeeded',
@@ -35,9 +40,12 @@ const taskNode = {
     id: '~user/one//20000102T0000Z/succeeded',
     name: 'succeeded',
     state: 'succeeded',
-    isHeld: false,
+    isHeld: true,
     isQueued: false,
     isRunahead: false,
+    isRetry: true,
+    isWallclock: false,
+    isXtriggered: false,
     cyclePoint: '20000102T0000Z',
     firstParent: {
       id: '~user/one//20000102T0000Z/SUCCEEDED',
@@ -53,19 +61,21 @@ const taskNode = {
 describe('task filtering', () => {
   describe('matchID', () => {
     it.each([
-      { node: taskNode, id: '', expected: true },
-      { node: taskNode, id: '  ', expected: true },
-      { node: taskNode, id: '2000', expected: true },
-      { node: taskNode, id: 'succeeded', expected: true },
-      { node: taskNode, id: '20000102T0000Z/suc', expected: true },
-      { node: taskNode, id: '2001', expected: false },
-      { node: taskNode, id: 'darmok', expected: false },
+      { node: taskNode, regex: null, expected: true },
+      { node: taskNode, regex: /2000/, expected: true },
+      { node: taskNode, regex: /succeeded/, expected: true },
+      { node: taskNode, regex: /20000102T0000Z\/suc/, expected: true },
+      { node: taskNode, regex: /2001/, expected: false },
+      { node: taskNode, regex: globToRegex('*'), expected: true },
+      { node: taskNode, regex: globToRegex('suc*'), expected: true },
+      { node: taskNode, regex: /darmok/, expected: false },
+      { node: taskNode, regex: globToRegex('darmok*'), expected: false },
       // Only matches relative ID:
-      { node: taskNode, id: 'user/one', expected: false },
+      { node: taskNode, regex: /user\/one/, expected: false },
       // Case sensitive:
-      { node: taskNode, id: 'SUC', expected: false },
-    ])('matchID(<$node.id>, $id)', ({ node, id, expected }) => {
-      expect(matchID(node, id)).toBe(expected)
+      { node: taskNode, regex: /SUC/, expected: false },
+    ])('matchID(<$node.id>, $regex)', ({ node, regex, expected }) => {
+      expect(matchID(node, regex)).toBe(expected)
     })
   })
 
@@ -76,21 +86,61 @@ describe('task filtering', () => {
       { node: taskNode, states: ['succeeded'], expected: true },
       { node: taskNode, states: ['succeeded', 'failed'], expected: true },
       { node: taskNode, states: ['failed'], expected: false },
-    ])('matchState(<$node.node.state>, $states)', ({ node, states, expected }) => {
-      expect(matchState(node, states)).toBe(expected)
+      { node: taskNode, states: ['waiting'], waitingStateModifiers: ['isRetry'], expected: false },
+      { node: taskNode, genericModifiers: ['isHeld'], expected: true },
+      { node: taskNode, genericModifiers: ['isHeld', 'isRunahead'], expected: true },
+      { node: taskNode, genericModifiers: ['isRunahead'], expected: false },
+      { node: taskNode, states: ['succeeded'], genericModifiers: ['isHeld'], expected: true },
+      { node: taskNode, states: ['waiting'], genericModifiers: ['isHeld'], expected: false },
+    ])('matchState(<$node.node.state>, $states)', ({
+      node,
+      states,
+      waitingStateModifiers,
+      genericModifiers,
+      expected,
+    }) => {
+      expect(matchState(
+        node,
+        states,
+        waitingStateModifiers,
+        genericModifiers,
+      )).toBe(expected)
     })
   })
 
   describe('matchNode', () => {
     it.each([
-      { node: taskNode, id: '', states: [], expected: true },
-      { node: taskNode, id: '2000', states: [], expected: true },
-      { node: taskNode, id: '', states: ['succeeded', 'failed'], expected: true },
-      { node: taskNode, id: '2000', states: ['succeeded', 'failed'], expected: true },
-      { node: taskNode, id: 'darmok', states: ['succeeded', 'failed'], expected: false },
-      { node: taskNode, id: '2000', states: ['failed'], expected: false },
-    ])('matchNode(<$node.id>, $id, $states)', ({ node, id, states, expected }) => {
-      expect(matchNode(node, id, states)).toBe(expected)
+      { node: taskNode, regex: null, states: [], expected: true },
+      { node: taskNode, regex: /2000/, states: [], expected: true },
+      { node: taskNode, regex: /2000/, states: ['succeeded', 'failed'], expected: true },
+      { node: taskNode, regex: /darmok/, states: ['succeeded', 'failed'], expected: false },
+      { node: taskNode, regex: /2000/, states: ['failed'], expected: false },
+    ])('matchNode(<$node.id>, $regex, $states)', ({ node, regex, states, expected }) => {
+      expect(matchNode(node, regex, states)).toBe(expected)
+    })
+  })
+
+  describe('globToRegex', () => {
+    it.each([
+      // no pattern specified
+      { glob: '', regex: null },
+      { glob: '  ', regex: null },
+
+      // plain text
+      { glob: 'foo', regex: /foo/ },
+
+      // globs
+      { glob: 'f*o', regex: /f.*o/ },
+      { glob: 'f?o', regex: /f.o/ },
+      { glob: 'f[o]o', regex: /f[o]o/ },
+      { glob: 'f[!o]o', regex: /f[^o]o/ },
+
+      // regex escapes
+      { glob: '.*', regex: /\..*/ },
+      { glob: '(x)', regex: /\(x\)/ },
+      { glob: '\\w\\d\\s', regex: /\\w\\d\\s/ },
+    ])('globToRegex($glob) => $regex', ({ glob, regex }) => {
+      expect(String(globToRegex(glob))).toBe(String(regex))
     })
   })
 })
diff --git a/tests/unit/views/table.vue.spec.js b/tests/unit/views/table.vue.spec.js
index 8314cc4ea..14022cae6 100644
--- a/tests/unit/views/table.vue.spec.js
+++ b/tests/unit/views/table.vue.spec.js
@@ -124,11 +124,19 @@ describe('Table view', () => {
     })
 
     it('should filter by ID', async () => {
+      // plain ID
       wrapper.vm.tasksFilter = {
         id: 'taskA'
       }
       await nextTick()
       expect(wrapper.vm.filteredTasks.length).to.equal(1)
+
+      // glob ID
+      wrapper.vm.tasksFilter = {
+        id: 'task[A]'
+      }
+      await nextTick()
+      expect(wrapper.vm.filteredTasks.length).to.equal(1)
     })
 
     it('should filter by task state', async () => {
diff --git a/tests/unit/views/tree.vue.spec.js b/tests/unit/views/tree.vue.spec.js
index a8bd5a38f..421ec7abf 100644
--- a/tests/unit/views/tree.vue.spec.js
+++ b/tests/unit/views/tree.vue.spec.js
@@ -55,7 +55,7 @@ const workflowNode = {
                 {
                   ...expandID('~user/workflow1//1/foo'),
                   type: 'task',
-                  node: { state: 'failed' },
+                  node: { state: 'failed', isHeld: true },
                   children: [
                     {
                       ...expandID('~user/workflow1//1/foo/1'),
@@ -114,19 +114,33 @@ describe('Tree view', () => {
     })
 
     it.each([
+      // the task should be displayed
       { tasksFilter: { id: 'foo' }, filteredOut: false },
       { tasksFilter: { states: ['failed'] }, filteredOut: false },
       { tasksFilter: { id: 'foo', states: ['failed'] }, filteredOut: false },
+      { tasksFilter: { id: 'foo', states: ['isHeld'] }, filteredOut: false },
+      { tasksFilter: { id: 'foo', states: ['failed', 'isHeld'] }, filteredOut: false },
+      { tasksFilter: { id: 'f*', states: ['failed', 'isHeld'] }, filteredOut: false },
+      { tasksFilter: { id: 'f?', states: ['failed', 'isHeld'] }, filteredOut: false },
+      { tasksFilter: { id: 'f[o]o', states: ['failed', 'isHeld'] }, filteredOut: false },
+      { tasksFilter: { id: 'f[!z]o', states: ['failed', 'isHeld'] }, filteredOut: false },
 
+      // the task should *not* be displayed
       { tasksFilter: { id: 'asdf' }, filteredOut: true },
       { tasksFilter: { states: ['running'] }, filteredOut: true },
       { tasksFilter: { id: 'foo', states: ['running'] }, filteredOut: true },
       { tasksFilter: { id: 'asdf', states: ['failed'] }, filteredOut: true },
+      { tasksFilter: { id: 'asdf', states: ['failed', 'isRunahead'] }, filteredOut: true },
+      { tasksFilter: { id: 'asdf*' }, filteredOut: true },
+      { tasksFilter: { id: 'asdf?' }, filteredOut: true },
+      { tasksFilter: { id: 'asd[f]' }, filteredOut: true },
+      { tasksFilter: { id: 'asd[!f]' }, filteredOut: true },
     ])('filters by $tasksFilter', async ({ tasksFilter, filteredOut }) => {
       const wrapper = mountFunction()
       wrapper.vm.tasksFilter = tasksFilter
       await nextTick()
-      expect(wrapper.vm.filterState).toMatchObject(tasksFilter)
+      expect(wrapper.vm.filterState[0]).toMatchObject(tasksFilter.id)
+      expect(wrapper.vm.filterState[1]).toMatchObject(tasksFilter.states)
       const filteredOutNodesCache = new Map()
       expect(wrapper.vm.filterNode(workflowNode, filteredOutNodesCache)).toEqual(!filteredOut)
       expect(getIDMap(filteredOutNodesCache)).toEqual({
diff --git a/vite.config.js b/vite.config.js
index f7aec3560..b552c78e4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -88,7 +88,8 @@ export default defineConfig(({ mode }) => {
       },
       watch: {
         ignored: [
-          path.resolve(__dirname, './coverage')
+          path.resolve(__dirname, './coverage'),
+          path.resolve(__dirname, '**/.nfs*'),
         ]
       },
       warmup: {
diff --git a/yarn.lock b/yarn.lock
index ffa582eaf..539d82138 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3957,9 +3957,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001524, caniuse-lite@npm:^1.0.30001718":
-  version: 1.0.30001723
-  resolution: "caniuse-lite@npm:1.0.30001723"
-  checksum: 10c0/e019503061759b96017c4d27ddd7ca1b48533eabcd0431b51d2e3156f99f6b031075e46c279c0db63424cdfc874bba992caec2db51b922a0f945e686246886f6
+  version: 1.0.30001757
+  resolution: "caniuse-lite@npm:1.0.30001757"
+  checksum: 10c0/3ccb71fa2bf1f8c96ff1bf9b918b08806fed33307e20a3ce3259155fda131eaf96cfcd88d3d309c8fd7f8285cc71d89a3b93648a1c04814da31c301f98508d42
   languageName: node
   linkType: hard