From 2d3f25e57fe5010222b67ccde9a7676878209a11 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 6 Oct 2025 14:56:40 +0100
Subject: [PATCH 01/10] Fix hit area of task/job icons

---
 src/components/cylc/table/Table.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

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' },

From ddbbb1abf9559bcbbdfb3327b0753d7a4a29c0bb Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 6 Oct 2025 15:00:05 +0100
Subject: [PATCH 02/10] Replace task state icons with badges in sidebar

---
 src/components/cylc/TaskStateBadge.vue     |  45 ++++++
 src/components/cylc/WarningIcon.vue        |   4 +-
 src/components/cylc/tree/GScanTreeItem.vue |  57 ++-----
 src/components/cylc/workspace/Toolbar.vue  |   2 +-
 src/styles/cylc/_job.scss                  | 172 ++++++++-------------
 tests/e2e/specs/userprofile.cy.js          |  16 +-
 6 files changed, 137 insertions(+), 159 deletions(-)
 create mode 100644 src/components/cylc/TaskStateBadge.vue

diff --git a/src/components/cylc/TaskStateBadge.vue b/src/components/cylc/TaskStateBadge.vue
new file mode 100644
index 000000000..d5efc3fda
--- /dev/null
+++ b/src/components/cylc/TaskStateBadge.vue
@@ -0,0 +1,45 @@
+<!--
+  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"
+    v-tooltip="{ text: tooltip, openDelay: 400, location: 'top' }"
+  >
+    {{ value > 99 ? '99+' : value }}
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  state: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: Number,
+    required: true,
+  },
+})
+
+const tooltip = computed(
+  () => `${props.value} ${props.state} task${props.value > 1 ? 's' : ''}`
+)
+</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/tree/GScanTreeItem.vue b/src/components/cylc/tree/GScanTreeItem.vue
index eca4b386a..f76f09612 100644
--- a/src/components/cylc/tree/GScanTreeItem.vue
+++ b/src/components/cylc/tree/GScanTreeItem.vue
@@ -47,37 +47,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </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>
+          <WarningIcon
+            v-if="workflowWarnings"
+            :workflow="node"
+            style="font-size: 120%;"
+          />
         </div>
+        <template
+          v-for="state in Object.keys(descendantTaskInfo.latestTasks)"
+          :key="`${node.id}-${state}`"
+        >
+          <TaskStateBadge
+            v-if="descendantTaskInfo.stateTotals[state]"
+            :state="state"
+            :value="descendantTaskInfo.stateTotals[state]"
+          />
+        </template>
       </div>
     </v-list-item>
 
@@ -95,7 +80,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import Job from '@/components/cylc/Job.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'
@@ -150,7 +135,7 @@ export default {
   name: 'GScanTreeItem',
 
   components: {
-    Job,
+    TaskStateBadge,
     TreeItem,
     WarningIcon,
     WorkflowIcon,
@@ -203,14 +188,6 @@ export default {
     }
   },
 
-  methods: {
-    getTaskStateClass (stateTotals, state) {
-      return {
-        'empty-state': !stateTotals[state]
-      }
-    },
-  },
-
   nodeTypes: ['workflow-part', 'workflow'],
   maxTasksDisplayed: 5,
   WorkflowState,
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/styles/cylc/_job.scss b/src/styles/cylc/_job.scss
index ae486cb1c..a0d286fbb 100644
--- a/src/styles/cylc/_job.scss
+++ b/src/styles/cylc/_job.scss
@@ -15,131 +15,89 @@
  * 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;
+    min-width: 1.8em;
+    border-radius: 1.8em;
+    border: 2px 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/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)
           })

From 73f48594abd3e5e1d957ae4ac7a31a9cdb697b9f Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 15 Oct 2025 14:49:32 +0100
Subject: [PATCH 03/10] Move warning triangles after task state badges in
 sidebar

---
 src/components/cylc/tree/GScanTreeItem.vue | 23 +++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/cylc/tree/GScanTreeItem.vue b/src/components/cylc/tree/GScanTreeItem.vue
index f76f09612..e2112828b 100644
--- a/src/components/cylc/tree/GScanTreeItem.vue
+++ b/src/components/cylc/tree/GScanTreeItem.vue
@@ -46,23 +46,24 @@ 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">
+        <div class="d-flex c-gscan-workflow-states flex-grow-0">
+          <template
+            v-for="state in Object.keys(descendantTaskInfo.latestTasks)"
+            :key="`${node.id}-${state}`"
+          >
+            <TaskStateBadge
+              v-if="descendantTaskInfo.stateTotals[state]"
+              :state="state"
+              :value="descendantTaskInfo.stateTotals[state]"
+            />
+          </template>
           <WarningIcon
             v-if="workflowWarnings"
             :workflow="node"
+            class="ml-1"
             style="font-size: 120%;"
           />
         </div>
-        <template
-          v-for="state in Object.keys(descendantTaskInfo.latestTasks)"
-          :key="`${node.id}-${state}`"
-        >
-          <TaskStateBadge
-            v-if="descendantTaskInfo.stateTotals[state]"
-            :state="state"
-            :value="descendantTaskInfo.stateTotals[state]"
-          />
-        </template>
       </div>
     </v-list-item>
 

From 218a8c176ac5fd723309ff2857110e8e1b59ceac Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Thu, 16 Oct 2025 14:43:14 +0100
Subject: [PATCH 04/10] Don't truncate numbers in task state badge

---
 src/components/cylc/TaskStateBadge.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cylc/TaskStateBadge.vue b/src/components/cylc/TaskStateBadge.vue
index d5efc3fda..009b6fc62 100644
--- a/src/components/cylc/TaskStateBadge.vue
+++ b/src/components/cylc/TaskStateBadge.vue
@@ -21,7 +21,7 @@
     :class="state"
     v-tooltip="{ text: tooltip, openDelay: 400, location: 'top' }"
   >
-    {{ value > 99 ? '99+' : value }}
+    {{ value }}
   </div>
 </template>
 

From 1abf5eeb128724ec2be1e419a3fd0b933e986367 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Fri, 17 Oct 2025 18:04:14 +0100
Subject: [PATCH 05/10] Changelog

---
 changes.d/2331.feat.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changes.d/2331.feat.md

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.

From fe2b566971383ca929c90d14d0ad5db5a0bc8159 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 3 Nov 2025 18:05:51 +0000
Subject: [PATCH 06/10] Add test and change task state totals for offline mode

---
 src/services/mock/json/workflows/multi.json |  4 ++--
 src/services/mock/json/workflows/one.json   |  6 +++---
 tests/e2e/specs/gscan.cy.js                 | 23 ++++++++++++++++++++-
 3 files changed, 27 insertions(+), 6 deletions(-)

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..49273f25a 100644
--- a/src/services/mock/json/workflows/one.json
+++ b/src/services/mock/json/workflows/one.json
@@ -15,9 +15,9 @@
           "expired": 0,
           "preparing": 0,
           "submit-failed": 0,
-          "submitted": 0,
-          "running": 1,
-          "failed": 1,
+          "submitted": 1,
+          "running": 10,
+          "failed": 2,
           "succeeded": 2
         },
         "latestStateTasks": {
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

From 6270e7f0886321d423cbe2d79b2fae00278c1edd Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 5 Nov 2025 16:39:31 +0000
Subject: [PATCH 07/10] Reimplement latest tasks tooltips & simplify

---
 src/components/cylc/TaskStateBadge.vue        |  33 +++-
 src/components/cylc/tree/GScanTreeItem.vue    | 162 ++++++++----------
 src/services/mock/json/workflows/one.json     |   8 +-
 .../components/cylc/tree/treeitem.vue.spec.js |   8 +-
 4 files changed, 102 insertions(+), 109 deletions(-)

diff --git a/src/components/cylc/TaskStateBadge.vue b/src/components/cylc/TaskStateBadge.vue
index 009b6fc62..8aadc322e 100644
--- a/src/components/cylc/TaskStateBadge.vue
+++ b/src/components/cylc/TaskStateBadge.vue
@@ -19,16 +19,29 @@
   <div
     class="task-state-badge d-flex justify-center align-center px-1 font-weight-medium"
     :class="state"
-    v-tooltip="{ text: tooltip, openDelay: 400, location: 'top' }"
   >
     {{ value }}
+    <v-tooltip
+      location="top"
+      :open-delay="400"
+    >
+      {{ value }} {{ state }} task{{ value > 1 ? 's': '' }}.
+      <template v-if="latestTasks.length">
+        Latest:
+        <span
+          v-for="(task, index) in latestTasks.slice(0, maxLatestTasks)"
+          :key="index"
+          class="text-grey-lighten-1"
+        >
+          <br/>{{ task }}
+        </span>
+      </template>
+    </v-tooltip>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
+defineProps({
   state: {
     type: String,
     required: true
@@ -37,9 +50,13 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  latestTasks: {
+    type: Array,
+    default: () => [],
+  },
+  maxLatestTasks: {
+    type: Number,
+    default: 5,
+  },
 })
-
-const tooltip = computed(
-  () => `${props.value} ${props.state} task${props.value > 1 ? 's' : ''}`
-)
 </script>
diff --git a/src/components/cylc/tree/GScanTreeItem.vue b/src/components/cylc/tree/GScanTreeItem.vue
index e2112828b..1acd495bd 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"
   >
@@ -47,16 +47,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </span>
         </div>
         <div class="d-flex c-gscan-workflow-states flex-grow-0">
-          <template
-            v-for="state in Object.keys(descendantTaskInfo.latestTasks)"
-            :key="`${node.id}-${state}`"
-          >
-            <TaskStateBadge
-              v-if="descendantTaskInfo.stateTotals[state]"
-              :state="state"
-              :value="descendantTaskInfo.stateTotals[state]"
-            />
-          </template>
+          <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"
@@ -80,51 +76,56 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </TreeItem>
 </template>
 
-<script>
+<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.
  *
  * @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.
+ * @param {Record<string, string[]>} latestTasks - Accumulator for latest tasks.
  */
-function traverseChildren (node, stateTotals = {}, latestTasks = {}, topLevel = true) {
+function getStatesInfo (node, stateTotals = {}, 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) {
+      const nodeTotal = node.node.stateTotals[state]
+      if (nodeTotal) {
+        stateTotals[state] = (stateTotals[state] ?? 0) + nodeTotal
       }
-    }
-    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
+      const nodeLatestTasks = node.node.latestStateTasks?.[state]
+      if (nodeLatestTasks?.length) {
         latestTasks[state] = [
           ...(latestTasks[state] ?? []),
-          ...taskNames,
+          ...nodeLatestTasks,
         ].sort().reverse() // cycle point descending order
       }
     }
@@ -132,65 +133,40 @@ function traverseChildren (node, stateTotals = {}, latestTasks = {}, topLevel =
   return { stateTotals, latestTasks }
 }
 
-export default {
-  name: 'GScanTreeItem',
+const workflowWarnings = useWorkflowWarnings()
 
-  components: {
-    TaskStateBadge,
-    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,
   },
+  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/services/mock/json/workflows/one.json b/src/services/mock/json/workflows/one.json
index 49273f25a..784b2ac56 100644
--- a/src/services/mock/json/workflows/one.json
+++ b/src/services/mock/json/workflows/one.json
@@ -23,14 +23,14 @@
         "latestStateTasks": {
           "submitted": [],
           "running": [
-            "checkpoint"
+            "20000102T0000Z/checkpoint"
           ],
           "succeeded": [
-            "eventually_succeeded",
-            "succeeded"
+            "20000102T0000Z/eventually_succeeded",
+            "20000102T0000Z/succeeded"
           ],
           "failed": [
-            "failed"
+            "20000102T0000Z/failed"
           ]
         }
       },
diff --git a/tests/unit/components/cylc/tree/treeitem.vue.spec.js b/tests/unit/components/cylc/tree/treeitem.vue.spec.js
index 168f94277..3a3c0cf70 100644
--- a/tests/unit/components/cylc/tree/treeitem.vue.spec.js
+++ b/tests/unit/components/cylc/tree/treeitem.vue.spec.js
@@ -152,12 +152,12 @@ describe('GScanTreeItem', () => {
       }
     })
     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)
+      expect(wrapper.vm.statesInfo.latestTasks.submitted.length).to.equal(10)
+      expect(wrapper.vm.statesInfo.latestTasks.running.length).to.equal(10)
     })
     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')

From 266038f5ea41519090e7b32a338934975a188dab Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 5 Nov 2025 17:37:28 +0000
Subject: [PATCH 08/10] Include preparing tasks in submitted task state badge
 total

---
 src/components/cylc/TaskStateBadge.vue               | 10 ++++++++--
 src/components/cylc/tree/GScanTreeItem.vue           | 10 +++++++---
 tests/unit/components/cylc/tree/treeitem.vue.spec.js |  2 +-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/cylc/TaskStateBadge.vue b/src/components/cylc/TaskStateBadge.vue
index 8aadc322e..2283b0357 100644
--- a/src/components/cylc/TaskStateBadge.vue
+++ b/src/components/cylc/TaskStateBadge.vue
@@ -25,7 +25,7 @@
       location="top"
       :open-delay="400"
     >
-      {{ value }} {{ state }} task{{ value > 1 ? 's': '' }}.
+      {{ value }} {{ displayName }} task{{ value > 1 ? 's': '' }}.
       <template v-if="latestTasks.length">
         Latest:
         <span
@@ -41,7 +41,9 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from 'vue'
+
+const props = defineProps({
   state: {
     type: String,
     required: true
@@ -59,4 +61,8 @@ defineProps({
     default: 5,
   },
 })
+
+const displayName = computed(
+  () => props.state === 'submitted' ? 'preparing/submitted' : props.state
+)
 </script>
diff --git a/src/components/cylc/tree/GScanTreeItem.vue b/src/components/cylc/tree/GScanTreeItem.vue
index 1acd495bd..a865faf77 100644
--- a/src/components/cylc/tree/GScanTreeItem.vue
+++ b/src/components/cylc/tree/GScanTreeItem.vue
@@ -117,12 +117,16 @@ function getStatesInfo (node, stateTotals = {}, latestTasks = {}) {
 
     // the non-zero state totals from this node with all the others from the tree
     for (const state of taskStatesOrdered) {
-      const nodeTotal = node.node.stateTotals[state]
+      let nodeTotal = node.node.stateTotals[state]
+      const nodeLatestTasks = Array.from(node.node.latestStateTasks?.[state] ?? [])
+      if (state === TaskState.SUBMITTED.name) { // include preparing tasks
+        nodeTotal += node.node.stateTotals.preparing
+        nodeLatestTasks.push(...(node.node.latestStateTasks?.preparing ?? []))
+      }
       if (nodeTotal) {
         stateTotals[state] = (stateTotals[state] ?? 0) + nodeTotal
       }
-      const nodeLatestTasks = node.node.latestStateTasks?.[state]
-      if (nodeLatestTasks?.length) {
+      if (nodeLatestTasks.length) {
         latestTasks[state] = [
           ...(latestTasks[state] ?? []),
           ...nodeLatestTasks,
diff --git a/tests/unit/components/cylc/tree/treeitem.vue.spec.js b/tests/unit/components/cylc/tree/treeitem.vue.spec.js
index 3a3c0cf70..4e82c7249 100644
--- a/tests/unit/components/cylc/tree/treeitem.vue.spec.js
+++ b/tests/unit/components/cylc/tree/treeitem.vue.spec.js
@@ -152,7 +152,7 @@ describe('GScanTreeItem', () => {
       }
     })
     it('combines all descendant tasks', () => {
-      expect(wrapper.vm.statesInfo.latestTasks.submitted.length).to.equal(10)
+      expect(wrapper.vm.statesInfo.latestTasks.submitted.length).to.equal(20)
       expect(wrapper.vm.statesInfo.latestTasks.running.length).to.equal(10)
     })
     it('combines all descendant task totals', () => {

From 8f947c84a889548b0df4bd41fecdb7e4a827784a Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Thu, 6 Nov 2025 13:24:52 +0000
Subject: [PATCH 09/10] Tweak task state badge border thickness

---
 src/styles/cylc/_job.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/styles/cylc/_job.scss b/src/styles/cylc/_job.scss
index a0d286fbb..7c653f05b 100644
--- a/src/styles/cylc/_job.scss
+++ b/src/styles/cylc/_job.scss
@@ -34,10 +34,11 @@ $cjob: ".c-job .job rect";
 
 .task-state-badge {
     font-size: 0.7em;
-    height: 1.8em;
-    min-width: 1.8em;
-    border-radius: 1.8em;
-    border: 2px solid;
+    $height: 1.8em;
+    height: $height;
+    min-width: $height;
+    border-radius: $height;
+    border: 0.2em solid;
     margin: 0 0.1em;
     line-height: normal;
 }

From 6cd68ef90554f38947205398eb177da90f62143e Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 12 Nov 2025 12:17:40 +0000
Subject: [PATCH 10/10] Only show latest state tasks for workflows, not
 workflow dirs/groups

We cannot show the true latest tasks for groups, and it is unclear what workflow each task belongs to
---
 src/components/cylc/TaskStateBadge.vue         | 10 +++-------
 src/components/cylc/tree/GScanTreeItem.vue     | 18 ++++++++++--------
 .../components/cylc/tree/treeitem.vue.spec.js  |  5 ++---
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/cylc/TaskStateBadge.vue b/src/components/cylc/TaskStateBadge.vue
index 2283b0357..d8e62c380 100644
--- a/src/components/cylc/TaskStateBadge.vue
+++ b/src/components/cylc/TaskStateBadge.vue
@@ -26,11 +26,11 @@
       :open-delay="400"
     >
       {{ value }} {{ displayName }} task{{ value > 1 ? 's': '' }}.
-      <template v-if="latestTasks.length">
+      <template v-if="latestTasks?.length">
         Latest:
         <span
-          v-for="(task, index) in latestTasks.slice(0, maxLatestTasks)"
-          :key="index"
+          v-for="task in latestTasks"
+          :key="task"
           class="text-grey-lighten-1"
         >
           <br/>{{ task }}
@@ -56,10 +56,6 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  maxLatestTasks: {
-    type: Number,
-    default: 5,
-  },
 })
 
 const displayName = computed(
diff --git a/src/components/cylc/tree/GScanTreeItem.vue b/src/components/cylc/tree/GScanTreeItem.vue
index a865faf77..5a75ae078 100644
--- a/src/components/cylc/tree/GScanTreeItem.vue
+++ b/src/components/cylc/tree/GScanTreeItem.vue
@@ -99,11 +99,13 @@ const taskStatesOrdered = [
 /**
  * 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 - Accumulator for state totals.
- * @param {Record<string, string[]>} latestTasks - Accumulator for latest tasks.
  */
-function getStatesInfo (node, stateTotals = {}, latestTasks = {}) {
+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 except stopped workflows
@@ -118,19 +120,19 @@ function getStatesInfo (node, stateTotals = {}, latestTasks = {}) {
     // 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]
-      const nodeLatestTasks = Array.from(node.node.latestStateTasks?.[state] ?? [])
+      let nodeLatestTasks = node.node.latestStateTasks?.[state] ?? []
       if (state === TaskState.SUBMITTED.name) { // include preparing tasks
         nodeTotal += node.node.stateTotals.preparing
-        nodeLatestTasks.push(...(node.node.latestStateTasks?.preparing ?? []))
+        nodeLatestTasks = [
+          ...nodeLatestTasks,
+          ...(node.node.latestStateTasks?.preparing ?? []),
+        ].slice(0, 5) // limit to 5 latest (submitted tasks take priority)
       }
       if (nodeTotal) {
         stateTotals[state] = (stateTotals[state] ?? 0) + nodeTotal
       }
       if (nodeLatestTasks.length) {
-        latestTasks[state] = [
-          ...(latestTasks[state] ?? []),
-          ...nodeLatestTasks,
-        ].sort().reverse() // cycle point descending order
+        latestTasks[state] = nodeLatestTasks
       }
     }
   }
diff --git a/tests/unit/components/cylc/tree/treeitem.vue.spec.js b/tests/unit/components/cylc/tree/treeitem.vue.spec.js
index 4e82c7249..b7ca95c48 100644
--- a/tests/unit/components/cylc/tree/treeitem.vue.spec.js
+++ b/tests/unit/components/cylc/tree/treeitem.vue.spec.js
@@ -151,9 +151,8 @@ describe('GScanTreeItem', () => {
         filteredOutNodesCache: new WeakMap(),
       }
     })
-    it('combines all descendant tasks', () => {
-      expect(wrapper.vm.statesInfo.latestTasks.submitted.length).to.equal(20)
-      expect(wrapper.vm.statesInfo.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.statesInfo.stateTotals.submitted).to.equal(5)