diff --git a/changes.d/2331.feat.md b/changes.d/2331.feat.md
new file mode 100644
index 000000000..33bbcb902
--- /dev/null
+++ b/changes.d/2331.feat.md
@@ -0,0 +1 @@
+Improved how task states are displayed in the sidebar.
diff --git a/src/components/cylc/TaskStateBadge.vue b/src/components/cylc/TaskStateBadge.vue
new file mode 100644
index 000000000..d8e62c380
--- /dev/null
+++ b/src/components/cylc/TaskStateBadge.vue
@@ -0,0 +1,64 @@
+<!--
+  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/>.
+-->
+
+<template>
+  <div
+    class="task-state-badge d-flex justify-center align-center px-1 font-weight-medium"
+    :class="state"
+  >
+    {{ value }}
+    <v-tooltip
+      location="top"
+      :open-delay="400"
+    >
+      {{ value }} {{ displayName }} task{{ value > 1 ? 's': '' }}.
+      <template v-if="latestTasks?.length">
+        Latest:
+        <span
+          v-for="task in latestTasks"
+          :key="task"
+          class="text-grey-lighten-1"
+        >
+          <br/>{{ task }}
+        </span>
+      </template>
+    </v-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  state: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: Number,
+    required: true,
+  },
+  latestTasks: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const displayName = computed(
+  () => props.state === 'submitted' ? 'preparing/submitted' : props.state
+)
+</script>
diff --git a/src/components/cylc/WarningIcon.vue b/src/components/cylc/WarningIcon.vue
index 51eeeb6f3..ef06b6013 100644
--- a/src/components/cylc/WarningIcon.vue
+++ b/src/components/cylc/WarningIcon.vue
@@ -26,9 +26,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <span
-    class="c-warn"
+    class="c-warn d-inline-flex"
     :class="{'active': workflow.node.warningActive}"
-    style="display: inline-block;"
   >
     <v-tooltip
       :activator="null"
@@ -45,7 +44,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @click="deactivate"
           @click.prevent
           style="
-            vertical-align: middle;
             cursor: pointer;
           "
           :style="[workflow.node.logRecords?.length ? {opacity: 1} : {opacity: 0.3}]"
diff --git a/src/components/cylc/table/Table.vue b/src/components/cylc/table/Table.vue
index 3f66c3ff1..87df61e4a 100644
--- a/src/components/cylc/table/Table.vue
+++ b/src/components/cylc/table/Table.vue
@@ -33,14 +33,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :class="{ 'flow-none': isFlowNone(item.task.node.flowNums) }"
         :data-cy-task-name="item.task.name"
       >
-        <div style="width: 2em;">
+        <div v-bind="jobIconParentProps">
           <Task
             v-command-menu="item.task"
             :task="item.task.node"
             :startTime="item.latestJob?.node?.startedTime"
           />
         </div>
-        <div style="width: 2em;">
+        <div v-bind="jobIconParentProps">
           <Job
             v-if="item.latestJob"
             v-command-menu="item.latestJob"
@@ -93,14 +93,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <td :colspan="3">
           <div class="d-flex align-content-center flex-nowrap">
-            <div class="d-flex" style="margin-left: 2em;">
+            <div v-bind="jobIconParentProps" :style="{ marginLeft: jobIconParentProps.style.width }">
               <Job
                 v-command-menu="job"
                 :key="`${job.id}-summary-${index}`"
                 :status="job.node.state"
               />
-              <span class="ml-2">#{{ job.node.submitNum }}</span>
             </div>
+            <span>#{{ job.node.submitNum }}</span>
           </div>
         </td>
         <td>{{ job.node.platform }}</td>
@@ -288,6 +288,11 @@ const taskRunTimes = computed(() => new Map(
   ])
 ))
 
+const jobIconParentProps = {
+  class: ['d-flex', 'align-center'],
+  style: { width: '2em' },
+}
+
 const itemsPerPageOptions = [
   { value: 10, title: '10' },
   { value: 20, title: '20' },
diff --git a/src/components/cylc/tree/GScanTreeItem.vue b/src/components/cylc/tree/GScanTreeItem.vue
index eca4b386a..5a75ae078 100644
--- a/src/components/cylc/tree/GScanTreeItem.vue
+++ b/src/components/cylc/tree/GScanTreeItem.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <TreeItem
     v-bind="{ node, depth, filteredOutNodesCache, hoverable }"
-    :auto-expand-types="$options.nodeTypes"
+    :auto-expand-types="nodeTypes"
     :render-expand-collapse-btn="node.type !== 'workflow'"
     ref="treeItem"
   >
@@ -46,37 +46,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </v-tooltip>
           </span>
         </div>
-        <div class="d-flex text-right c-gscan-workflow-states flex-grow-0">
-          <!-- task summary tooltips -->
-          <!-- a v-tooltip does not work directly set on Cylc job component, so we use a div to wrap it -->
-          <div
-            class="ma-0 pa-0"
-            min-width="0"
-            min-height="0"
-            style="font-size: 120%; width: auto;"
-          >
-            <WarningIcon v-if="workflowWarnings" :workflow="node" />
-          </div>
-          <div
-            v-for="[state, tasks] in Object.entries(descendantTaskInfo.latestTasks)"
-            :key="`${node.id}-${state}`"
-            :class="getTaskStateClass(descendantTaskInfo.stateTotals, state)"
-            class="ma-0 pa-0"
-            min-width="0"
-            min-height="0"
-            style="font-size: 120%; width: auto;"
-          >
-            <Job :status="state" />
-            <v-tooltip location="top">
-              <!-- tooltip text -->
-              <div class="text-grey-lighten-1">
-                {{ descendantTaskInfo.stateTotals[state] ?? 0 }} {{ state }}. Recent {{ state }} tasks:
-              </div>
-              <div v-for="(task, index) in tasks.slice(0, $options.maxTasksDisplayed)" :key="index">
-                {{ task }}<br v-if="index !== tasks.length - 1" />
-              </div>
-            </v-tooltip>
-          </div>
+        <div class="d-flex c-gscan-workflow-states flex-grow-0">
+          <TaskStateBadge
+            v-for="(value, state) in statesInfo.stateTotals"
+            :key="state"
+            v-bind="{ state, value }"
+            :latest-tasks="statesInfo.latestTasks[state]"
+          />
+          <WarningIcon
+            v-if="workflowWarnings"
+            :workflow="node"
+            class="ml-1"
+            style="font-size: 120%;"
+          />
         </div>
       </div>
     </v-list-item>
@@ -94,125 +76,103 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </TreeItem>
 </template>
 
-<script>
-import Job from '@/components/cylc/Job.vue'
+<script setup>
+import { computed } from 'vue'
+import TaskStateBadge from '@/components/cylc/TaskStateBadge.vue'
 import WorkflowIcon from '@/components/cylc/gscan/WorkflowIcon.vue'
 import TreeItem from '@/components/cylc/tree/TreeItem.vue'
 import WarningIcon from '@/components/cylc/WarningIcon.vue'
-import { JobStateNames } from '@/model/JobState.model'
+import TaskState from '@/model/TaskState.model'
 import { WorkflowState } from '@/model/WorkflowState.model'
 import { useWorkflowWarnings } from '@/composables/localStorage'
 
+const nodeTypes = ['workflow-part', 'workflow']
+
+/** Display order in sidebar */
+const taskStatesOrdered = [
+  TaskState.FAILED.name,
+  TaskState.SUBMIT_FAILED.name,
+  TaskState.SUBMITTED.name,
+  TaskState.RUNNING.name,
+]
+
 /**
- * Get aggregated task state totals and latest task states for all descendents of a node.
+ * Get aggregated task state totals for all descendents of a node.
+ *
+ * Also get latest state tasks for workflow nodes.
  *
  * @param {Object} node
- * @param {Record<string, number>} stateTotals
- * @param {Record<string, string[]>} latestTasks
- * @param {Boolean} topLevel - true if the traversal depth is 0, else false.
+ * @param {Record<string, number>} stateTotals - Accumulator for state totals.
  */
-function traverseChildren (node, stateTotals = {}, latestTasks = {}, topLevel = true) {
+function getStatesInfo (node, stateTotals = {}) {
+  const latestTasks = {}
   // if we aren't at the end of the node tree, continue recurse until we hit something other then a workflow part
   if (node.type === 'workflow-part' && node.children) {
-    // at every branch, recurse all child nodes
+    // at every branch, recurse all child nodes except stopped workflows
     for (const child of node.children) {
-      traverseChildren(child, stateTotals, latestTasks, false)
+      if (child.node.status !== WorkflowState.STOPPED.name) {
+        getStatesInfo(child, stateTotals, latestTasks)
+      }
     }
   } else if (node.type === 'workflow' && node.node.stateTotals) {
-    // if we are at the end of a node (or at least, hit a workflow node), stop and merge state
-
-    // the latest state tasks from this node with all the others from the tree
-    for (const [state, totals] of Object.entries(node.node.stateTotals)) {
-      if (
-        // filter only valid states
-        JobStateNames.includes(state) &&
-        // omit state totals from stopped workflows
-        (topLevel || node.node.status !== 'stopped')
-      ) {
-        // (cast as numbers so they dont get concatenated as strings)
-        stateTotals[state] = (stateTotals[state] ?? 0) + parseInt(totals)
+    // if we hit a workflow node, stop and merge state
+
+    // the non-zero state totals from this node with all the others from the tree
+    for (const state of taskStatesOrdered) {
+      let nodeTotal = node.node.stateTotals[state]
+      let nodeLatestTasks = node.node.latestStateTasks?.[state] ?? []
+      if (state === TaskState.SUBMITTED.name) { // include preparing tasks
+        nodeTotal += node.node.stateTotals.preparing
+        nodeLatestTasks = [
+          ...nodeLatestTasks,
+          ...(node.node.latestStateTasks?.preparing ?? []),
+        ].slice(0, 5) // limit to 5 latest (submitted tasks take priority)
       }
-    }
-    for (const [state, taskNames] of Object.entries(node.node.latestStateTasks)) {
-      if (JobStateNames.includes(state)) {
-        // concat the new tasks in where they don't already exist
-        latestTasks[state] = [
-          ...(latestTasks[state] ?? []),
-          ...taskNames,
-        ].sort().reverse() // cycle point descending order
+      if (nodeTotal) {
+        stateTotals[state] = (stateTotals[state] ?? 0) + nodeTotal
+      }
+      if (nodeLatestTasks.length) {
+        latestTasks[state] = nodeLatestTasks
       }
     }
   }
   return { stateTotals, latestTasks }
 }
 
-export default {
-  name: 'GScanTreeItem',
+const workflowWarnings = useWorkflowWarnings()
 
-  components: {
-    Job,
-    TreeItem,
-    WarningIcon,
-    WorkflowIcon,
+const props = defineProps({
+  node: {
+    type: Object,
+    required: true
   },
-
-  data: () => ({
-    workflowWarnings: useWorkflowWarnings()
-  }),
-
-  props: {
-    node: {
-      type: Object,
-      required: true
-    },
-    depth: {
-      type: Number,
-      default: 0
-    },
-    filteredOutNodesCache: {
-      type: WeakMap,
-      required: true,
-    },
-    hoverable: {
-      type: Boolean,
-    },
+  depth: {
+    type: Number,
+    default: 0
   },
-
-  computed: {
-    workflowLink () {
-      return this.node.type === 'workflow'
-        ? `/workspace/${ this.node.tokens.workflow }`
-        : ''
-    },
-
-    /** Task state totals and latest states for all descendents of this node. */
-    descendantTaskInfo () {
-      return traverseChildren(this.node)
-    },
-
-    nodeChildren () {
-      return this.node.type === 'workflow'
-        ? []
-        : this.node.children
-    },
-
-    nodeClass () {
-      return {
-        'c-workflow-stopped': this.node.node?.status === WorkflowState.STOPPED.name,
-      }
-    }
+  filteredOutNodesCache: {
+    type: WeakMap,
+    required: true,
   },
-
-  methods: {
-    getTaskStateClass (stateTotals, state) {
-      return {
-        'empty-state': !stateTotals[state]
-      }
-    },
+  hoverable: {
+    type: Boolean,
   },
+})
 
-  nodeTypes: ['workflow-part', 'workflow'],
-  maxTasksDisplayed: 5,
-  WorkflowState,
-}
+const workflowLink = computed(
+  () => props.node.type === 'workflow'
+    ? `/workspace/${ props.node.tokens.workflow }`
+    : ''
+)
+
+/** Task state totals for all descendents of this node. */
+const statesInfo = computed(() => getStatesInfo(props.node))
+
+const nodeChildren = computed(
+  () => props.node.type === 'workflow' ? [] : props.node.children
+)
+
+const nodeClass = computed(() => ({
+  'c-workflow-stopped': props.node.node?.status === WorkflowState.STOPPED.name,
+}))
 </script>
diff --git a/src/components/cylc/workspace/Toolbar.vue b/src/components/cylc/workspace/Toolbar.vue
index 5ace27473..385c7da11 100644
--- a/src/components/cylc/workspace/Toolbar.vue
+++ b/src/components/cylc/workspace/Toolbar.vue
@@ -45,7 +45,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- control bar elements displayed only when there is a current workflow in the store -->
     <template v-if="currentWorkflow">
-      <div class="c-workflow-controls flex-shrink-0">
+      <div class="c-workflow-controls d-flex align-center flex-shrink-0">
         <WarningIcon
           :workflow="currentWorkflow"
           style="font-size: 120%; padding-right: 0.3em;"
diff --git a/src/services/mock/json/workflows/multi.json b/src/services/mock/json/workflows/multi.json
index e323cf7c3..15d677de9 100644
--- a/src/services/mock/json/workflows/multi.json
+++ b/src/services/mock/json/workflows/multi.json
@@ -45,7 +45,7 @@
             "submit-failed": 0,
             "submitted": 0,
             "running": 0,
-            "failed": 0,
+            "failed": 1,
             "succeeded": 0
           },
           "latestStateTasks": {},
@@ -73,7 +73,7 @@
             "preparing": 0,
             "submit-failed": 0,
             "submitted": 0,
-            "running": 0,
+            "running": 3,
             "failed": 0,
             "succeeded": 0
           },
diff --git a/src/services/mock/json/workflows/one.json b/src/services/mock/json/workflows/one.json
index 2bbbf866e..784b2ac56 100644
--- a/src/services/mock/json/workflows/one.json
+++ b/src/services/mock/json/workflows/one.json
@@ -15,22 +15,22 @@
           "expired": 0,
           "preparing": 0,
           "submit-failed": 0,
-          "submitted": 0,
-          "running": 1,
-          "failed": 1,
+          "submitted": 1,
+          "running": 10,
+          "failed": 2,
           "succeeded": 2
         },
         "latestStateTasks": {
           "submitted": [],
           "running": [
-            "checkpoint"
+            "20000102T0000Z/checkpoint"
           ],
           "succeeded": [
-            "eventually_succeeded",
-            "succeeded"
+            "20000102T0000Z/eventually_succeeded",
+            "20000102T0000Z/succeeded"
           ],
           "failed": [
-            "failed"
+            "20000102T0000Z/failed"
           ]
         }
       },
diff --git a/src/styles/cylc/_job.scss b/src/styles/cylc/_job.scss
index ae486cb1c..7c653f05b 100644
--- a/src/styles/cylc/_job.scss
+++ b/src/styles/cylc/_job.scss
@@ -15,131 +15,90 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+@use "sass:list";
+
 /* css namespace for job element */
 $cjob: ".c-job .job rect";
 
-
 #{$cjob} {
     /* if no job status display nothing */
     fill: transparent;
     stroke: transparent;
 }
 
-.c-job {
-    .job {
-        vertical-align: middle;
-        /* scale the icon to the font-size */
-        width: 1em;
-        height: 1em;
-    }
+.c-job .job {
+    /* scale the icon to the font-size */
+    width: 1em;
+    height: 1em;
 }
 
-@mixin job_theme($theme) {
-    @if $theme == "default" {
-        $teal: rgb(109,213,194);
-        $blue: rgb(106,164,241);
-        $green: rgb(81,175,81);
-        $red: rgb(207,72,72);
-        $pink: rgb(190,106,192);
-
-        #{$cjob} {
-            &.submitted {
-                fill: $teal;
-                stroke: $teal;
-            }
-
-            &.running {
-                fill: $blue;
-                stroke: $blue;
-            }
-
-            &.succeeded {
-                fill: $green;
-                stroke: $green;
-            }
-
-            &.failed {
-                fill: $red;
-                stroke: $red;
-            }
-
-            &.submit-failed {
-                fill: $pink;
-                stroke: $pink;
-            }
-        }
-    } @else if $theme == "greyscale" {
-        $light: rgb(208,208,208);
-        $medium: rgb(133,133,133);
-        $dark: rgb(0,0,0);
-
-        #{$cjob} {
-            &.submitted {
-                fill: transparent;
-                stroke: $light;
-            }
-
-            &.running {
-                fill: $light;
-                stroke: $light;
-            }
-
-            &.succeeded {
-                fill: $medium;
-                stroke: $medium;
-            }
-
-            &.failed {
-                fill: $dark;
-                stroke: $dark;
-            }
-
-            &.submit-failed {
-                fill: transparent;
-                stroke: $dark;
-            }
-        }
-    } @else if $theme == "colour_blind" {
-        $grey: rgb(152,152,152);
-        $success: rgb(108,218,255);
-        $error: rgb(146,0,0);
-
-        #{$cjob} {
-            &.submitted {
-                fill: transparent;
-                stroke: $grey;
-            }
-
-            &.running {
-                fill: $grey;
-                stroke: $grey;
-            }
-
-            &.succeeded {
-                fill: $success;
-                stroke: $success;
-            }
-
-            &.failed {
-                fill: $error;
-                stroke: $error;
-            }
-
-            &.submit-failed {
-                fill: transparent;
-                stroke: $error;
-            }
-        }
-    }
+.task-state-badge {
+    font-size: 0.7em;
+    $height: 1.8em;
+    height: $height;
+    min-width: $height;
+    border-radius: $height;
+    border: 0.2em solid;
+    margin: 0 0.1em;
+    line-height: normal;
 }
 
-@each $theme in "default", "greyscale", "colour_blind" {
+$teal: rgb(109,213,194);
+$blue: rgb(106,164,241);
+$green: rgb(81,175,81);
+$red: rgb(207,72,72);
+$pink: rgb(190,106,192);
+
+$light: rgb(208,208,208);
+$medium: rgb(133,133,133);
+$dark: rgb(0,0,0);
+
+$grey: rgb(152,152,152);
+$success: rgb(108,218,255);
+$error: rgb(146,0,0);
+
+// Mapping of job themes to job states to (fill, outline, text) colors
+$themes: (
+    "default": (
+        "submitted": ($teal, $teal, white),
+        "running": ($blue, $blue, white),
+        "succeeded": ($green, $green, white),
+        "failed": ($red, $red, white),
+        "submit-failed": ($pink, $pink, white),
+    ),
+    "greyscale": (
+        "submitted": (transparent, $light, black),
+        "running": ($light, $light, black),
+        "succeeded": ($medium, $medium, white),
+        "failed": ($dark, $dark, white),
+        "submit-failed": (transparent, $dark, black),
+    ),
+    "colour_blind": (
+        "submitted": (transparent, $grey, black),
+        "running": ($grey, $grey, white),
+        "succeeded": ($success, $success, black),
+        "failed": ($error, $error, white),
+        "submit-failed": (transparent, $error, black),
+    ),
+);
+
+@each $theme, $state_map in $themes {
     .job_theme--#{$theme} {
         &, // job theme as configured by the top-level application
         &.job_theme_override {
             // if overridden elsewhere the new value should take priority
             // (this allows us to override the theme in the user profile)
-            @include job_theme($theme);
+            @each $state, $colors in $state_map {
+                #{$cjob}.#{$state} {
+                    fill: list.nth($colors, 1);
+                    stroke: list.nth($colors, 2);
+                }
+                .task-state-badge.#{$state} {
+                    background-color: list.nth($colors, 1);
+                    border-color: list.nth($colors, 2);
+                    color: list.nth($colors, 3);
+                }
+            }
         }
     }
 }
diff --git a/tests/e2e/specs/gscan.cy.js b/tests/e2e/specs/gscan.cy.js
index b764f64ef..d9efa8ef8 100644
--- a/tests/e2e/specs/gscan.cy.js
+++ b/tests/e2e/specs/gscan.cy.js
@@ -106,7 +106,7 @@ describe('GScan component', () => {
       cy.get('[data-cy="filter task state"]')
         .click()
         .get('.v-select__content')
-        .contains('.v-list-item', 'succeed')
+        .contains('.v-list-item', 'succeeded')
         .click({ force: true })
       cy.get('.c-treeitem:visible')
         .should('have.length', 1)
@@ -171,6 +171,27 @@ describe('GScan component', () => {
     })
   })
 
+  describe('Task state badges', () => {
+    it('collates task states up the tree', () => {
+      cy.get('.c-gscan')
+        .find('[data-node-name="other/multi"]').as('parent')
+        .find('.node:first .task-state-badge')
+        .should('have.length', 1)
+        .should('have.class', 'running')
+        .contains('3')
+      // child run2 contributes the running tasks
+      cy.get('@parent').find('[data-node-name="run2"] .task-state-badge')
+        .should('have.length', 1)
+        .should('have.class', 'running')
+        .contains('3')
+      // but child run1 is stopped and so doesn't contribute
+      cy.get('@parent').find('[data-node-name="run1"] .task-state-badge')
+        .should('have.length', 1)
+        .should('have.class', 'failed')
+        .contains('1')
+    })
+  })
+
   describe('Warnings', () => {
     it('collates warnings up the tree', () => {
       // NOTE: Log events may be duplicated in offline-mode due to the way the
diff --git a/tests/e2e/specs/userprofile.cy.js b/tests/e2e/specs/userprofile.cy.js
index 4fa560d33..68b8ffb20 100644
--- a/tests/e2e/specs/userprofile.cy.js
+++ b/tests/e2e/specs/userprofile.cy.js
@@ -66,19 +66,19 @@ describe('User Profile', () => {
     }
   })
 
-  it('Sets the job theme', () => {
+  it('Sets the task/job theme', () => {
     cy.get('#input-job-theme-default')
       .click({ force: true })
-    // set the job theme to normal
-    cy.get('.c-gscan:first .c-job:first rect:first')
-      .should('have.css', 'fill')
+    // set the theme to normal
+    cy.get('.c-gscan .task-state-badge.running').as('taskBadge')
+      .should('have.css', 'background-color')
       .then(($fill1) => {
-        // set the job theme to greyscale
+        // set the theme to greyscale
         cy.get('#input-job-theme-greyscale')
           .click({ force: true })
-        cy.get('.c-gscan:first .c-job:first rect:first')
-          .should('have.css', 'fill')
-          // make sure that the job has changed colour
+        cy.get('@taskBadge')
+          .should('have.css', 'background-color')
+          // make sure that the task state badge has changed colour
           .then(($fill2) => {
             expect($fill1).not.to.equal($fill2)
           })
diff --git a/tests/unit/components/cylc/tree/treeitem.vue.spec.js b/tests/unit/components/cylc/tree/treeitem.vue.spec.js
index 168f94277..b7ca95c48 100644
--- a/tests/unit/components/cylc/tree/treeitem.vue.spec.js
+++ b/tests/unit/components/cylc/tree/treeitem.vue.spec.js
@@ -151,13 +151,12 @@ describe('GScanTreeItem', () => {
         filteredOutNodesCache: new WeakMap(),
       }
     })
-    it('combines all descendant tasks', () => {
-      expect(wrapper.vm.descendantTaskInfo.latestTasks.submitted.length).to.equal(10)
-      expect(wrapper.vm.descendantTaskInfo.latestTasks.running.length).to.equal(10)
+    it('does not combine descendant latest state tasks', () => {
+      expect(wrapper.vm.statesInfo.latestTasks).to.deep.equal({})
     })
     it('combines all descendant task totals', () => {
-      expect(wrapper.vm.descendantTaskInfo.stateTotals.submitted).to.equal(5)
-      expect(wrapper.vm.descendantTaskInfo.stateTotals.running).to.equal(12)
+      expect(wrapper.vm.statesInfo.stateTotals.submitted).to.equal(5)
+      expect(wrapper.vm.statesInfo.stateTotals.running).to.equal(12)
     })
     it('collapses to the lowest only-child', () => {
       expect(wrapper.vm.node.id).to.equal('~cylc/double/mid')