From 73972be9bab0049e17287c4b6416226c5bf30c69 Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Thu, 30 Apr 2026 15:50:17 +0100
Subject: [PATCH 01/17] Combined the two toolbars

---
 src/components/cylc/Toolbar.vue               | 513 +++++++++++++++-
 src/components/cylc/workspace/Toolbar.vue     | 560 ------------------
 src/views/Workspace.vue                       |   2 +-
 .../cylc/workspace/toolbar.vue.spec.js        |   2 +-
 4 files changed, 501 insertions(+), 576 deletions(-)
 delete mode 100644 src/components/cylc/workspace/Toolbar.vue

diff --git a/src/components/cylc/Toolbar.vue b/src/components/cylc/Toolbar.vue
index 5a13ffad7..e38477e68 100644
--- a/src/components/cylc/Toolbar.vue
+++ b/src/components/cylc/Toolbar.vue
@@ -15,10 +15,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<!-- Cylc UI Toolbar. Used to display the type of view in responsive mode
-(narrow viewports), and to display a burger button to hide the drawer
-component. Note: this is not used for the workflow view, see
-./workflow/Toolbar.vue instead. -->
+<!-- Unified Cylc UI Toolbar. Shows burger button and title on all pages.
+     Shows workflow controls when a workflowName prop is provided. -->
 
 <template>
   <v-toolbar
@@ -26,43 +24,530 @@ component. Note: this is not used for the workflow view, see
     :height="toolbarHeight"
     flat
     class="c-toolbar"
+    color="grey-lighten-4"
   >
-    <!-- TODO: duplicated in workflow/Toolbar.vue and cylc/Toolbar.vue -->
-    <!-- burger button for mobile -->
+    <!-- burger button -->
     <v-btn
       icon
       @click.stop="toggleDrawer"
       id="toggle-drawer"
     >
-      <v-icon>{{ drawer ? $options.icons.mdiArrowLeft : $options.icons.mdiViewList }}</v-icon>
+      <v-icon>{{ drawer ? icons.arrowLeft : icons.list }}</v-icon>
     </v-btn>
-    <v-toolbar-title>
+    <!-- title -->
+    <v-toolbar-title
+      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary ml-0"
+    >
       {{ title }}
     </v-toolbar-title>
+
+    <!-- control bar elements displayed only when there is a current workflow in the store -->
+    <template v-if="currentWorkflow">
+      <div class="c-workflow-controls d-flex align-center flex-shrink-0">
+        <WarningIcon
+          :workflow="currentWorkflow"
+          style="font-size: 120%; padding-right: 0.3em;"
+        />
+
+        <v-btn
+          id="workflow-mutate-button"
+          v-command-menu="currentWorkflow"
+          :icon="icons.menu"
+          size="small"
+          density="comfortable"
+        />
+
+        <v-btn
+          id="workflow-play-button"
+          :icon="icons.run"
+          :disabled="!enabled.playToggle"
+          v-if="!isRunning"
+          @click="onClickPlay"
+          size="small"
+          density="comfortable"
+        />
+
+        <v-btn
+          id="workflow-play-pause-button"
+          :icon="isPaused ? icons.run : icons.hold"
+          :disabled="!enabled.pauseToggle"
+          v-if="isRunning"
+          @click="onClickReleaseHold"
+          size="small"
+          density="comfortable"
+        />
+
+        <v-btn
+          id="workflow-stop-button"
+          :icon="icons.stop"
+          :disabled="!enabled.stopToggle"
+          @click="onClickStop"
+          size="small"
+          density="comfortable"
+        />
+      </div>
+
+      <!-- n-window selector -->
+      <v-btn
+        :disabled="isStopped"
+        variant="tonal"
+        rounded
+        size="small"
+        data-cy="n-win-selector"
+      >
+        N={{ nWindow }}
+        <template #append>
+          <v-icon
+            :icon="icons.mdiChevronDown"
+            class="mx-n1"
+          />
+        </template>
+        <v-menu
+          activator="parent"
+          :close-on-content-click="false"
+          max-width="400"
+          data-cy="n-win-popup"
+        >
+          <v-card title="Graph Window Depth">
+            <v-card-text>
+              This changes the number of tasks which are displayed.
+
+              Higher values may impact performance.
+            </v-card-text>
+            <v-card-text>
+              <v-select
+                v-model="nWindow"
+                :items="[0,1,2,3]"
+                :disabled="!user.permissions?.includes('setGraphWindowExtent')"
+              >
+                <template #append-inner>
+                  <v-progress-circular
+                    v-if="changingNWindow"
+                    indeterminate
+                    size="20"
+                    width="2"
+                  />
+                </template>
+              </v-select>
+            </v-card-text>
+          </v-card>
+        </v-menu>
+      </v-btn>
+
+      <!-- workflow info icon -->
+      <v-icon
+        v-if="isRunning"
+        :icon="icons.info"
+        id="info-icon"
+      />
+      <v-tooltip
+        v-if="isRunning"
+        activator="#info-icon"
+        :eager="false"
+      >
+        <dl>
+          <dt><strong>Owner:</strong> {{ currentWorkflow.node.owner }}</dt>
+          <dt><strong>Host:</strong> {{ currentWorkflow.node.host }}</dt>
+          <dt><strong>Cylc version:</strong> {{ currentWorkflow.node.cylcVersion }}</dt>
+          <dt><strong>Run mode:</strong> {{ currentWorkflow.node.runMode }}</dt>
+        </dl>
+      </v-tooltip>
+
+      <!-- workflow status message -->
+      <span class="status-msg text-body-2">
+        {{ statusMessage }}
+        <span v-if="currentWorkflow.node.cylcVersion !== uisFlowVersion">
+          {{ versionPopup }}
+        </span>
+      </span>
+
+      <v-spacer class="mx-0" />
+
+      <v-btn
+        v-if="$route.name === 'Workspace'"
+        class="add-view"
+        color="primary"
+        data-cy="add-view-btn"
+      >
+        <v-icon class="icon">
+          {{ icons.add }}
+        </v-icon>
+        <span class="label">
+          {{ $t('Toolbar.addView') }}
+        </span>
+
+        <v-menu
+          activator="parent"
+          location="bottom"
+        >
+          <v-list>
+            <v-list-item
+              v-for="[name, view] in views"
+              :id="`toolbar-add-${name}-view`"
+              :key="name"
+              @click="eventBus.emit('add-view', { name })"
+            >
+              <template #prepend>
+                <v-icon>{{ view.icon }}</v-icon>
+              </template>
+              <v-list-item-title>{{ startCase(name) }}</v-list-item-title>
+            </v-list-item>
+            <v-divider/>
+            <v-card-actions class="mb-n2">
+              <v-btn
+                @click="eventBus.emit('reset-workspace-layout')"
+                :prepend-icon="icons.mdiArrowULeftTop"
+                class="flex-grow-1"
+                data-cy="reset-layout-btn"
+              >
+                Reset layout
+              </v-btn>
+            </v-card-actions>
+          </v-list>
+        </v-menu>
+      </v-btn>
+      <v-btn
+        icon
+        size="small"
+      >
+        <v-avatar
+          color="primary"
+          size="small"
+        >
+          <div v-if="user.initials">
+            {{ user.initials }}
+          </div>
+          <v-icon
+            v-else
+            :icon="icons.mdiAccount"
+          />
+        </v-avatar>
+        <v-menu activator="parent">
+          <v-card :title="user.username">
+            <v-card-text>
+              <div class="d-flex flex-column row-gap-2">
+                <v-defaults-provider
+                  :defaults="{
+                    VBtn: { variant: 'tonal', spaced: true },
+                  }"
+                >
+                  <v-btn
+                    to="/user-profile"
+                    :prepend-icon="icons.mdiCog"
+                  >
+                    Settings
+                  </v-btn>
+                </v-defaults-provider>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-menu>
+      </v-btn>
+    </template>
   </v-toolbar>
 </template>
 
 <script>
+import { inject } from 'vue'
 import { mapState } from 'vuex'
-import { useDrawer, toolbarHeight } from '@/utils/toolbar'
 import {
+  mdiCog,
+  mdiMicrosoftXboxControllerMenu,
+  mdiPause,
+  mdiPlay,
+  mdiPlusBoxMultiple,
+  mdiStop,
   mdiViewList,
   mdiArrowLeft,
+  mdiBackburger,
+  mdiAccount,
+  mdiChevronDown,
+  mdiArrowULeftTop,
+  mdiInformationOutline,
 } from '@mdi/js'
+import { startCase } from 'lodash'
+import { until } from '@/utils/reactivity'
+import { useDrawer, toolbarHeight } from '@/utils/toolbar'
+import WorkflowState from '@/model/WorkflowState.model'
+import graphql from '@/mixins/graphql'
+import {
+  mutationStatus
+} from '@/utils/aotf'
+import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
+import SubscriptionQuery from '@/model/SubscriptionQuery.model'
+import gql from 'graphql-tag'
+import { eventBus } from '@/services/eventBus'
+import { upperFirst } from 'lodash-es'
+import WarningIcon from '@/components/cylc/WarningIcon.vue'
+
+const QUERY = gql(`
+subscription Workflow ($workflowId: ID) {
+  deltas(workflows: [$workflowId]) {
+    added {
+      ...AddedDelta
+    }
+    updated (stripNull: true) {
+      ...UpdatedDelta
+    }
+    pruned {
+      ...PrunedDelta
+    }
+  }
+}
+
+fragment WorkflowData on Workflow {
+  id
+  host
+  owner
+  status
+  statusMsg
+  nEdgeDistance
+  cylcVersion
+  runMode
+}
+
+fragment AddedDelta on Added {
+  workflow {
+    ...WorkflowData
+  }
+}
+
+fragment UpdatedDelta on Updated {
+  workflow {
+    ...WorkflowData
+  }
+}
+
+fragment PrunedDelta on Pruned {
+  workflow
+}
+`)
 
 export default {
+  name: 'Toolbar',
+
   setup () {
     const { drawer, toggleDrawer } = useDrawer()
-    return { drawer, toggleDrawer, toolbarHeight }
+
+    const uisVersionInfo = inject('versionInfo')
+    const uisFlowVersion = uisVersionInfo?.value?.['cylc-flow'] ?? ''
+
+    return {
+      eventBus,
+      drawer,
+      toggleDrawer,
+      toolbarHeight,
+      uisFlowVersion,
+      icons: {
+        add: mdiPlusBoxMultiple,
+        hold: mdiPause,
+        info: mdiInformationOutline,
+        list: mdiViewList,
+        arrowLeft: mdiBackburger,
+        menu: mdiMicrosoftXboxControllerMenu,
+        run: mdiPlay,
+        stop: mdiStop,
+        mdiCog,
+        mdiAccount,
+        mdiChevronDown,
+        mdiArrowULeftTop,
+      },
+    }
   },
 
+  components: {
+    WarningIcon,
+  },
+
+  mixins: [
+    graphql,
+    subscriptionComponentMixin
+  ],
+
+  props: {
+    /**
+     * All possible view component classes that can be rendered
+     *
+     * @type {Map<string, import('@/views/views.js').CylcView>}
+     */
+    views: {
+      type: Map,
+      default: () => new Map()
+    },
+    workflowName: {
+      type: String,
+      default: null
+    }
+  },
+
+  data: () => ({
+    expecting: {
+      play: null,
+      paused: null,
+      stop: null
+    },
+    changingNWindow: false,
+  }),
+
   computed: {
-    ...mapState('app', ['title'])
+    ...mapState('app', ['title']),
+    ...mapState('user', ['user']),
+    ...mapState('workflows', ['cylcTree']),
+    query () {
+      if (!this.workflowName) return null
+      return new SubscriptionQuery(
+        QUERY,
+        this.variables,
+        'workflow',
+        [],
+        /* isDelta */ true,
+        /* isGlobalCallback */ true
+      )
+    },
+    currentWorkflow () {
+      if (!this.workflowName) return null
+      return this.cylcTree.$index[this.workflowId]
+    },
+    isRunning () {
+      return (
+        this.currentWorkflow &&
+        (
+          this.currentWorkflow.node.status === WorkflowState.RUNNING.name ||
+          this.currentWorkflow.node.status === WorkflowState.PAUSED.name ||
+          this.currentWorkflow.node.status === WorkflowState.STOPPING.name
+        )
+      )
+    },
+    isPaused () {
+      return (
+        this.currentWorkflow &&
+        this.currentWorkflow.node.status === WorkflowState.PAUSED.name
+      )
+    },
+    isStopped () {
+      return (
+        !this.currentWorkflow ||
+        this.currentWorkflow.node.status === WorkflowState.STOPPED.name
+      )
+    },
+    statusMessage () {
+      return upperFirst(this.currentWorkflow?.node?.statusMsg || '')
+    },
+    versionPopup () {
+      let ret = ''
+      if (this.currentWorkflow?.node?.cylcVersion) {
+        ret += ` • Cylc ${this.currentWorkflow.node.cylcVersion}`
+      }
+      return ret
+    },
+    enabled () {
+      return {
+        playToggle: (
+          this.user.permissions.includes('play') &&
+          this.isStopped &&
+          (
+            this.expecting.play === null ||
+            this.expecting.play === this.isRunning
+          )
+        ),
+        pauseToggle: (
+          (
+            (this.isPaused && this.user.permissions.includes('resume')) ||
+            (!this.isPaused && this.user.permissions.includes('pause'))
+          ) &&
+          !this.isStopped &&
+          !this.expecting.stop &&
+          this.currentWorkflow.node.status !== WorkflowState.STOPPING.name &&
+          (
+            this.expecting.paused === null ||
+            this.expecting.paused === this.isPaused
+          )
+        ),
+        stopToggle: (
+          this.user.permissions.includes('stop') &&
+          !this.isStopped &&
+          (
+            this.expecting.stop === null ||
+            this.expecting.stop === this.isStopped
+          )
+        )
+      }
+    },
+    nWindow: {
+      get () {
+        return this.currentWorkflow?.node?.nEdgeDistance ?? 1
+      },
+      async set (val) {
+        if (val == null || this.isStopped) return
+
+        this.changingNWindow = true
+        if (await this.setGraphWindow(val)) {
+          await until(() => this.currentWorkflow?.node?.nEdgeDistance === val)
+        }
+        this.changingNWindow = false
+      },
+    }
+  },
+
+  watch: {
+    isRunning () {
+      this.expecting.play = null
+    },
+    isPaused () {
+      this.expecting.paused = null
+    },
+    isStopped () {
+      this.expecting.stop = null
+    },
+    currentWorkflow () {
+      this.expecting = {
+        play: null,
+        paused: null,
+        stop: null,
+      }
+    },
   },
 
-  icons: {
-    mdiViewList,
-    mdiArrowLeft,
+  methods: {
+    onClickPlay () {
+      this.$workflowService.mutate(
+        'play',
+        this.currentWorkflow.id
+      ).then(ret => {
+        if (ret[0] === mutationStatus.SUCCEEDED) {
+          this.expecting.play = !this.isRunning
+        }
+      })
+    },
+    onClickReleaseHold () {
+      this.$workflowService.mutate(
+        this.isPaused ? 'resume' : 'pause',
+        this.currentWorkflow.id
+      ).then(response => {
+        if (response.status === mutationStatus.SUCCEEDED) {
+          this.expecting.paused = !this.isPaused
+        }
+      })
+    },
+    onClickStop () {
+      this.$workflowService.mutate(
+        'stop',
+        this.currentWorkflow.id
+      ).then(response => {
+        if (response.status === mutationStatus.SUCCEEDED) {
+          this.expecting.stop = WorkflowState.STOPPING
+        }
+      })
+    },
+    async setGraphWindow (nWindow) {
+      const { status } = await this.$workflowService.mutate(
+        'setGraphWindowExtent',
+        this.currentWorkflow.id,
+        { nEdgeDistance: nWindow }
+      )
+      return status === mutationStatus.SUCCEEDED
+    },
+    startCase,
   },
 }
 </script>
diff --git a/src/components/cylc/workspace/Toolbar.vue b/src/components/cylc/workspace/Toolbar.vue
deleted file mode 100644
index 91ce36700..000000000
--- a/src/components/cylc/workspace/Toolbar.vue
+++ /dev/null
@@ -1,560 +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/>.
--->
-
-<!-- Toolbar for the workspace view -->
-
-<template>
-  <v-toolbar
-    id="core-app-bar"
-    :height="toolbarHeight"
-    flat
-    class="c-toolbar"
-    color="grey-lighten-4"
-  >
-    <!-- TODO: duplicated in workflow/Toolbar.vue and cylc/Toolbar.vue -->
-    <!-- burger button for mobile -->
-    <v-btn
-      icon
-      @click.stop="toggleDrawer"
-      id="toggle-drawer"
-    >
-      <v-icon>{{ drawer ? icons.arrowLeft : icons.list }}</v-icon>
-    </v-btn>
-    <!-- title -->
-    <v-toolbar-title
-      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary ml-0"
-    >
-      {{ title }}
-    </v-toolbar-title>
-
-    <!-- control bar elements displayed only when there is a current workflow in the store -->
-    <template v-if="currentWorkflow">
-      <div class="c-workflow-controls d-flex align-center flex-shrink-0">
-        <WarningIcon
-          :workflow="currentWorkflow"
-          style="font-size: 120%; padding-right: 0.3em;"
-        />
-
-        <v-btn
-          id="workflow-mutate-button"
-          v-command-menu="currentWorkflow"
-          :icon="icons.menu"
-          size="small"
-          density="comfortable"
-        />
-
-        <v-btn
-          id="workflow-play-button"
-          :icon="icons.run"
-          :disabled="!enabled.playToggle"
-          v-if="!isRunning"
-          @click="onClickPlay"
-          size="small"
-          density="comfortable"
-        />
-
-        <v-btn
-          id="workflow-play-pause-button"
-          :icon="isPaused ? icons.run : icons.hold"
-          :disabled="!enabled.pauseToggle"
-          v-if="isRunning"
-          @click="onClickReleaseHold"
-          size="small"
-          density="comfortable"
-        />
-
-        <v-btn
-          id="workflow-stop-button"
-          :icon="icons.stop"
-          :disabled="!enabled.stopToggle"
-          @click="onClickStop"
-          size="small"
-          density="comfortable"
-        />
-      </div>
-
-      <!-- n-window selector -->
-      <v-btn
-        :disabled="isStopped"
-        variant="tonal"
-        rounded
-        size="small"
-        data-cy="n-win-selector"
-      >
-        N={{ nWindow }}
-        <template #append>
-          <v-icon
-            :icon="icons.mdiChevronDown"
-            class="mx-n1"
-          />
-        </template>
-        <v-menu
-          activator="parent"
-          :close-on-content-click="false"
-          max-width="400"
-          data-cy="n-win-popup"
-        >
-          <v-card title="Graph Window Depth">
-            <v-card-text>
-              This changes the number of tasks which are displayed.
-
-              Higher values may impact performance.
-            </v-card-text>
-            <v-card-text>
-              <v-select
-                v-model="nWindow"
-                :items="[0,1,2,3]"
-                :disabled="!user.permissions?.includes('setGraphWindowExtent')"
-              >
-                <template #append-inner>
-                  <v-progress-circular
-                    v-if="changingNWindow"
-                    indeterminate
-                    size="20"
-                    width="2"
-                  />
-                </template>
-              </v-select>
-            </v-card-text>
-          </v-card>
-        </v-menu>
-      </v-btn>
-
-      <!-- workflow info icon -->
-      <v-icon
-        v-if="isRunning"
-        :icon="icons.info"
-        id="info-icon"
-      />
-      <v-tooltip
-        v-if="isRunning"
-        activator="#info-icon"
-        :eager="false"
-      >
-        <dl>
-          <dt><strong>Owner:</strong> {{ currentWorkflow.node.owner }}</dt>
-          <dt><strong>Host:</strong> {{ currentWorkflow.node.host }}</dt>
-          <dt><strong>Cylc version:</strong> {{ currentWorkflow.node.cylcVersion }}</dt>
-          <dt><strong>Run mode:</strong> {{ currentWorkflow.node.runMode }}</dt>
-        </dl>
-      </v-tooltip>
-
-      <!-- workflow status message -->
-      <span class="status-msg text-body-2">
-        {{ statusMessage }}
-        <!-- workflow Cylc version popup on differ with UIS version -->
-        <!-- nested within status-msg for style inheritance -->
-        <span v-if="currentWorkflow.node.cylcVersion !== uisFlowVersion">
-          {{ versionPopup }}
-        </span>
-      </span>
-
-      <v-spacer class="mx-0" />
-
-      <v-btn
-        v-if="$route.name === 'Workspace'"
-        class="add-view"
-        color="primary"
-        data-cy="add-view-btn"
-      >
-        <v-icon class="icon">
-          {{ icons.add }}
-        </v-icon>
-        <span class="label">
-          {{ $t('Toolbar.addView') }}
-        </span>
-
-        <v-menu
-          activator="parent"
-          location="bottom"
-        >
-          <v-list>
-            <v-list-item
-              v-for="[name, view] in views"
-              :id="`toolbar-add-${name}-view`"
-              :key="name"
-              @click="eventBus.emit('add-view', { name })"
-            >
-              <template #prepend>
-                <v-icon>{{ view.icon }}</v-icon>
-              </template>
-              <v-list-item-title>{{ startCase(name) }}</v-list-item-title>
-            </v-list-item>
-            <v-divider/>
-            <v-card-actions class="mb-n2">
-              <v-btn
-                @click="eventBus.emit('reset-workspace-layout')"
-                :prepend-icon="icons.mdiArrowULeftTop"
-                class="flex-grow-1"
-                data-cy="reset-layout-btn"
-              >
-                Reset layout
-              </v-btn>
-            </v-card-actions>
-          </v-list>
-        </v-menu>
-      </v-btn>
-      <v-btn
-        icon
-        size="small"
-      >
-        <v-avatar
-          color="primary"
-          size="small"
-        >
-          <div v-if="user.initials">
-            {{ user.initials }}
-          </div>
-          <v-icon
-            v-else
-            :icon="icons.mdiAccount"
-          />
-        </v-avatar>
-        <v-menu activator="parent">
-          <v-card :title="user.username">
-            <v-card-text>
-              <div class="d-flex flex-column row-gap-2">
-                <v-defaults-provider
-                  :defaults="{
-                    VBtn: { variant: 'tonal', spaced: true },
-                  }"
-                >
-                  <v-btn
-                    to="/user-profile"
-                    :prepend-icon="icons.mdiCog"
-                  >
-                    Settings
-                  </v-btn>
-                </v-defaults-provider>
-              </div>
-            </v-card-text>
-          </v-card>
-        </v-menu>
-      </v-btn>
-    </template>
-  </v-toolbar>
-</template>
-
-<script>
-import { inject } from 'vue'
-import { mapState } from 'vuex'
-import {
-  mdiCog,
-  mdiMicrosoftXboxControllerMenu,
-  mdiPause,
-  mdiPlay,
-  mdiPlusBoxMultiple,
-  mdiStop,
-  mdiViewList,
-  mdiAccount,
-  mdiChevronDown,
-  mdiArrowULeftTop,
-  mdiArrowLeft,
-  mdiInformationOutline,
-} from '@mdi/js'
-import { startCase } from 'lodash'
-import { until } from '@/utils/reactivity'
-import { useDrawer, useNavBtn, toolbarHeight } from '@/utils/toolbar'
-import WorkflowState from '@/model/WorkflowState.model'
-import graphql from '@/mixins/graphql'
-import {
-  mutationStatus
-} from '@/utils/aotf'
-import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
-import SubscriptionQuery from '@/model/SubscriptionQuery.model'
-import gql from 'graphql-tag'
-import { eventBus } from '@/services/eventBus'
-import { upperFirst } from 'lodash-es'
-import WarningIcon from '@/components/cylc/WarningIcon.vue'
-
-const QUERY = gql(`
-subscription Workflow ($workflowId: ID) {
-  deltas(workflows: [$workflowId]) {
-    added {
-      ...AddedDelta
-    }
-    updated (stripNull: true) {
-      ...UpdatedDelta
-    }
-    pruned {
-      ...PrunedDelta
-    }
-  }
-}
-
-fragment WorkflowData on Workflow {
-  id
-  host
-  owner
-  status
-  statusMsg
-  nEdgeDistance
-  cylcVersion
-  runMode
-}
-
-fragment AddedDelta on Added {
-  workflow {
-    ...WorkflowData
-  }
-}
-
-fragment UpdatedDelta on Updated {
-  workflow {
-    ...WorkflowData
-  }
-}
-
-fragment PrunedDelta on Pruned {
-  workflow
-}
-`)
-
-export default {
-  name: 'Toolbar',
-
-  setup () {
-    const { showNavBtn } = useNavBtn()
-    const { drawer, toggleDrawer } = useDrawer()
-
-    const uisVersionInfo = inject('versionInfo')
-    const uisFlowVersion = uisVersionInfo?.value?.['cylc-flow'] ?? ''
-
-    return {
-      eventBus,
-      drawer,
-      showNavBtn,
-      toggleDrawer,
-      toolbarHeight,
-      uisFlowVersion,
-      icons: {
-        add: mdiPlusBoxMultiple,
-        hold: mdiPause,
-        info: mdiInformationOutline,
-        list: mdiViewList,
-        arrowLeft: mdiArrowLeft,
-        menu: mdiMicrosoftXboxControllerMenu,
-        run: mdiPlay,
-        stop: mdiStop,
-        mdiCog,
-        mdiAccount,
-        mdiChevronDown,
-        mdiArrowULeftTop,
-      },
-    }
-  },
-
-  components: {
-    WarningIcon,
-  },
-
-  mixins: [
-    graphql,
-    subscriptionComponentMixin
-  ],
-
-  props: {
-    /**
-     * All possible view component classes that can be rendered
-     *
-     * @type {Map<string, import('@/views/views.js').CylcView>}
-     */
-    views: {
-      type: Map,
-      required: true
-    }
-  },
-
-  data: () => ({
-    expecting: {
-      // store state from mutations in order to compute the "enabled" attrs
-      play: null,
-      paused: null,
-      stop: null
-    },
-    changingNWindow: false,
-  }),
-
-  computed: {
-    ...mapState('app', ['title']),
-    ...mapState('user', ['user']),
-    ...mapState('workflows', ['cylcTree']),
-    query () {
-      return new SubscriptionQuery(
-        QUERY,
-        this.variables,
-        'workflow',
-        [],
-        /* isDelta */ true,
-        /* isGlobalCallback */ true
-      )
-    },
-    currentWorkflow () {
-      return this.cylcTree.$index[this.workflowId]
-    },
-    isRunning () {
-      return (
-        this.currentWorkflow &&
-        (
-          this.currentWorkflow.node.status === WorkflowState.RUNNING.name ||
-          this.currentWorkflow.node.status === WorkflowState.PAUSED.name ||
-          this.currentWorkflow.node.status === WorkflowState.STOPPING.name
-        )
-      )
-    },
-    isPaused () {
-      return (
-        this.currentWorkflow &&
-        this.currentWorkflow.node.status === WorkflowState.PAUSED.name
-      )
-    },
-    isStopped () {
-      return (
-        !this.currentWorkflow ||
-        this.currentWorkflow.node.status === WorkflowState.STOPPED.name
-      )
-    },
-    statusMessage () {
-      return upperFirst(this.currentWorkflow.node.statusMsg || '')
-    },
-    versionPopup () {
-      let ret = ''
-      if (this.currentWorkflow.node.cylcVersion) {
-        ret += ` • Cylc ${this.currentWorkflow.node.cylcVersion}`
-      }
-      return ret
-    },
-    enabled () {
-      // object holding the states of controls that are supposed to be enabled
-      // NOTE: this is a temporary solution until we are able to subscribe to
-      // mutations to tell when they have completed
-      return {
-        playToggle: (
-          // the play button (for the play from stopped scenario)
-          this.user.permissions.includes('play') &&
-          this.isStopped &&
-          (
-            this.expecting.play === null ||
-            this.expecting.play === this.isRunning
-          )
-        ),
-        pauseToggle: (
-          // the play/pause button
-          (
-            (this.isPaused && this.user.permissions.includes('resume')) ||
-            (!this.isPaused && this.user.permissions.includes('pause'))
-          ) &&
-          !this.isStopped &&
-          !this.expecting.stop &&
-          this.currentWorkflow.node.status !== WorkflowState.STOPPING.name &&
-          (
-            this.expecting.paused === null ||
-            this.expecting.paused === this.isPaused
-          )
-        ),
-        stopToggle: (
-          // the stop button
-          this.user.permissions.includes('stop') &&
-          !this.isStopped &&
-          (
-            this.expecting.stop === null ||
-            this.expecting.stop === this.isStopped
-          )
-        )
-      }
-    },
-    nWindow: {
-      get () {
-        // the graph window distance reported by the scheduler
-        return this.currentWorkflow?.node?.nEdgeDistance ?? 1
-      },
-      async set (val) {
-        if (val == null || this.isStopped) return
-
-        this.changingNWindow = true
-        if (await this.setGraphWindow(val)) {
-          await until(() => this.currentWorkflow?.node?.nEdgeDistance === val)
-        }
-        this.changingNWindow = false
-      },
-    }
-  },
-
-  watch: {
-    // reset the "expecting" state markers when the workflow state changes
-    isRunning () {
-      this.expecting.play = null
-    },
-    isPaused () {
-      this.expecting.paused = null
-    },
-    isStopped () {
-      this.expecting.stop = null
-    },
-    // reset the "expecting" state markers when we switch workflow
-    currentWorkflow () {
-      this.expecting = {
-        play: null,
-        paused: null,
-        stop: null,
-      }
-    },
-  },
-
-  methods: {
-    onClickPlay () {
-      this.$workflowService.mutate(
-        'play',
-        this.currentWorkflow.id
-      ).then(ret => {
-        if (ret[0] === mutationStatus.SUCCEEDED) {
-          this.expecting.play = !this.isRunning
-        }
-      })
-    },
-    onClickReleaseHold () {
-      this.$workflowService.mutate(
-        this.isPaused ? 'resume' : 'pause',
-        this.currentWorkflow.id
-      ).then(response => {
-        if (response.status === mutationStatus.SUCCEEDED) {
-          this.expecting.paused = !this.isPaused
-        }
-      })
-    },
-    onClickStop () {
-      this.$workflowService.mutate(
-        'stop',
-        this.currentWorkflow.id
-      ).then(response => {
-        if (response.status === mutationStatus.SUCCEEDED) {
-          this.expecting.stop = WorkflowState.STOPPING
-        }
-      })
-    },
-    async setGraphWindow (nWindow) {
-      const { status } = await this.$workflowService.mutate(
-        'setGraphWindowExtent',
-        this.currentWorkflow.id,
-        { nEdgeDistance: nWindow }
-      )
-      return status === mutationStatus.SUCCEEDED
-    },
-    startCase,
-  },
-}
-</script>
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index afd22e6ee..69025cb8a 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -41,7 +41,7 @@ import graphqlMixin from '@/mixins/graphql'
 import subscriptionMixin from '@/mixins/subscription'
 import ViewState from '@/model/ViewState.model'
 import Lumino from '@/components/cylc/workspace/Lumino.vue'
-import Toolbar from '@/components/cylc/workspace/Toolbar.vue'
+import Toolbar from '@/components/cylc/Toolbar.vue'
 import { toolbarHeight } from '@/utils/toolbar'
 
 export default {
diff --git a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
index e2ee4cb2b..e672d9f9a 100644
--- a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
@@ -19,7 +19,7 @@ import { createVuetify } from 'vuetify'
 import { createStore } from 'vuex'
 import { mount } from '@vue/test-utils'
 import storeOptions from '@/store/options'
-import Toolbar from '@/components/cylc/workspace/Toolbar.vue'
+import Toolbar from '@/components/cylc/Toolbar.vue'
 import CommandMenuPlugin from '@/components/cylc/commandMenu/plugin'
 import sinon from 'sinon'
 import WorkflowService from '@/services/workflow.service'

From 7dbfe38c645cf86ec3fe20176ff03f3b63098bb0 Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Thu, 30 Apr 2026 16:41:02 +0100
Subject: [PATCH 02/17] Use correct icon

---
 src/components/cylc/Toolbar.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/cylc/Toolbar.vue b/src/components/cylc/Toolbar.vue
index e38477e68..7a4d3c9d8 100644
--- a/src/components/cylc/Toolbar.vue
+++ b/src/components/cylc/Toolbar.vue
@@ -32,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @click.stop="toggleDrawer"
       id="toggle-drawer"
     >
-      <v-icon>{{ drawer ? icons.arrowLeft : icons.list }}</v-icon>
+      <v-icon>{{ drawer ? icons.backBurger : icons.list }}</v-icon>
     </v-btn>
     <!-- title -->
     <v-toolbar-title
@@ -258,7 +258,6 @@ import {
   mdiPlusBoxMultiple,
   mdiStop,
   mdiViewList,
-  mdiArrowLeft,
   mdiBackburger,
   mdiAccount,
   mdiChevronDown,
@@ -343,7 +342,7 @@ export default {
         hold: mdiPause,
         info: mdiInformationOutline,
         list: mdiViewList,
-        arrowLeft: mdiBackburger,
+        backBurger: mdiBackburger,
         menu: mdiMicrosoftXboxControllerMenu,
         run: mdiPlay,
         stop: mdiStop,

From 0769b502a628910d3ff13102ba2bcc9ded10873e Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Fri, 1 May 2026 09:11:52 +0100
Subject: [PATCH 03/17] Added test coverage

---
 .../cylc/workspace/toolbar.vue.spec.js        | 85 ++++++++++++++++++-
 1 file changed, 83 insertions(+), 2 deletions(-)

diff --git a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
index e672d9f9a..7970417a9 100644
--- a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
@@ -25,17 +25,18 @@ import sinon from 'sinon'
 import WorkflowService from '@/services/workflow.service'
 import { useDrawer } from '@/utils/toolbar'
 import { vuetifyOptions } from '@/plugins/vuetify'
+import { mdiViewList, mdiBackburger } from '@mdi/js'
 
 const $workflowService = sinon.createStubInstance(WorkflowService)
 const vuetify = createVuetify(vuetifyOptions)
 
-describe('Workspace toolbar component', () => {
+describe('Toolbar component', () => {
   let store
   const { drawer: drawerState } = useDrawer()
 
   beforeEach(() => {
     store = createStore(storeOptions)
-    store.commit('user/SET_USER', { owner: 'rincewind' })
+    store.commit('user/SET_USER', { owner: 'rincewind', permissions: ['play', 'pause', 'resume', 'stop'] })
     drawerState.value = false
   })
 
@@ -66,4 +67,84 @@ describe('Workspace toolbar component', () => {
     await wrapper.vm.$nextTick()
     expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
   })
+
+  it('shows backburger icon when drawer is open and list icon when closed', async () => {
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+        workflowName: 'strewth',
+      },
+    })
+    // Drawer closed -> list icon
+    drawerState.value = false
+    await wrapper.vm.$nextTick()
+    const btn = wrapper.find('#toggle-drawer')
+    expect(btn.find('svg path').attributes('d')).to.equal(mdiViewList)
+    // Drawer open -> backburger icon
+    drawerState.value = true
+    await wrapper.vm.$nextTick()
+    expect(btn.find('svg path').attributes('d')).to.equal(mdiBackburger)
+  })
+
+  it('toggles drawer on button click', async () => {
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+        workflowName: 'strewth',
+      },
+    })
+    expect(drawerState.value).to.equal(false)
+    await wrapper.find('#toggle-drawer').trigger('click')
+    expect(drawerState.value).to.equal(true)
+    await wrapper.find('#toggle-drawer').trigger('click')
+    expect(drawerState.value).to.equal(false)
+  })
+
+  it('does not show workflow controls without workflowName', async () => {
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+      },
+    })
+    await wrapper.vm.$nextTick()
+    // Burger button and title should still be present
+    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
+    expect(wrapper.find('.c-toolbar-title').exists()).to.equal(true)
+    // Workflow-specific controls should not be present
+    expect(wrapper.find('#workflow-play-button').exists()).to.equal(false)
+    expect(wrapper.find('#workflow-stop-button').exists()).to.equal(false)
+    expect(wrapper.find('#workflow-mutate-button').exists()).to.equal(false)
+    expect(wrapper.find('.c-workflow-controls').exists()).to.equal(false)
+  })
+
+  it('displays the title from the store', async () => {
+    store.commit('app/setTitle', "I'm your pain when you can't feel")
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+      },
+    })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.c-toolbar-title').text()).to.include("I'm your pain when you can't feel")
+  })
 })

From 5c58d2c376769ca17822a765c2324d751d8024fb Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Tue, 5 May 2026 15:06:08 +0100
Subject: [PATCH 04/17] Removed "Alert" that just duplicated the toolbar

---
 src/views/WorkflowsTable.vue | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/views/WorkflowsTable.vue b/src/views/WorkflowsTable.vue
index d1d95979f..ee910f1c6 100644
--- a/src/views/WorkflowsTable.vue
+++ b/src/views/WorkflowsTable.vue
@@ -17,20 +17,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <v-container
-    fill-height
     fluid
-    grid-list-xl
+    class="pa-0"
   >
-    <v-row class="align-self-start">
+    <v-row no-gutters>
       <v-col>
-        <!-- TODO: this is not really an alert, it's a heading -->
-        <v-alert
-          :icon="icons.mdiTable"
-          prominent
-          color="grey-lighten-3"
-        >
-          <h3 class="text-h5">{{ $t('Workflows.tableHeader') }}</h3>
-        </v-alert>
         <v-data-table
           :headers="$options.headers"
           :items="workflowsTable"

From 5522b4d0431896a7f8bfa71bc2f68686d3febe8c Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Thu, 7 May 2026 08:56:15 +0100
Subject: [PATCH 05/17] Fix unit tests

---
 src/components/cylc/workspace/Toolbar.vue                | 0
 tests/unit/components/cylc/workspace/toolbar.vue.spec.js | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 delete mode 100644 src/components/cylc/workspace/Toolbar.vue

diff --git a/src/components/cylc/workspace/Toolbar.vue b/src/components/cylc/workspace/Toolbar.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
index d507af03c..877789a85 100644
--- a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
@@ -57,10 +57,10 @@ describe('Toolbar component', () => {
     wrapper.vm.$vuetify.display.mobile = false
     await wrapper.vm.$nextTick()
     expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
-    // Btn should not show when drawer is visible on large viewport
+    // Btn should show when drawer is visible on large viewport
     drawerState.value = true
     await wrapper.vm.$nextTick()
-    expect(wrapper.find('#toggle-drawer').exists()).to.equal(false)
+    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
     // Btn should show when drawer is visible on small viewport
     wrapper.vm.$vuetify.display.mobile = true
     await wrapper.vm.$nextTick()

From 65f4b60cee75b40dfbb3e76620ab61b41936375f Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Mon, 11 May 2026 10:25:10 +0100
Subject: [PATCH 06/17] Fix unit tests

---
 src/components/cylc/Toolbar.vue | 499 +-------------------------------
 src/layouts/Default.vue         |   7 +-
 src/views/WorkflowsTable.vue    |   1 +
 3 files changed, 10 insertions(+), 497 deletions(-)

diff --git a/src/components/cylc/Toolbar.vue b/src/components/cylc/Toolbar.vue
index 7a4d3c9d8..d9ceada5d 100644
--- a/src/components/cylc/Toolbar.vue
+++ b/src/components/cylc/Toolbar.vue
@@ -24,7 +24,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :height="toolbarHeight"
     flat
     class="c-toolbar"
-    color="grey-lighten-4"
   >
     <!-- burger button -->
     <v-btn
@@ -34,216 +33,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <v-icon>{{ drawer ? icons.backBurger : icons.list }}</v-icon>
     </v-btn>
-    <!-- title -->
-    <v-toolbar-title
-      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary ml-0"
-    >
+    <v-toolbar-title>
       {{ title }}
     </v-toolbar-title>
-
-    <!-- control bar elements displayed only when there is a current workflow in the store -->
-    <template v-if="currentWorkflow">
-      <div class="c-workflow-controls d-flex align-center flex-shrink-0">
-        <WarningIcon
-          :workflow="currentWorkflow"
-          style="font-size: 120%; padding-right: 0.3em;"
-        />
-
-        <v-btn
-          id="workflow-mutate-button"
-          v-command-menu="currentWorkflow"
-          :icon="icons.menu"
-          size="small"
-          density="comfortable"
-        />
-
-        <v-btn
-          id="workflow-play-button"
-          :icon="icons.run"
-          :disabled="!enabled.playToggle"
-          v-if="!isRunning"
-          @click="onClickPlay"
-          size="small"
-          density="comfortable"
-        />
-
-        <v-btn
-          id="workflow-play-pause-button"
-          :icon="isPaused ? icons.run : icons.hold"
-          :disabled="!enabled.pauseToggle"
-          v-if="isRunning"
-          @click="onClickReleaseHold"
-          size="small"
-          density="comfortable"
-        />
-
-        <v-btn
-          id="workflow-stop-button"
-          :icon="icons.stop"
-          :disabled="!enabled.stopToggle"
-          @click="onClickStop"
-          size="small"
-          density="comfortable"
-        />
-      </div>
-
-      <!-- n-window selector -->
-      <v-btn
-        :disabled="isStopped"
-        variant="tonal"
-        rounded
-        size="small"
-        data-cy="n-win-selector"
-      >
-        N={{ nWindow }}
-        <template #append>
-          <v-icon
-            :icon="icons.mdiChevronDown"
-            class="mx-n1"
-          />
-        </template>
-        <v-menu
-          activator="parent"
-          :close-on-content-click="false"
-          max-width="400"
-          data-cy="n-win-popup"
-        >
-          <v-card title="Graph Window Depth">
-            <v-card-text>
-              This changes the number of tasks which are displayed.
-
-              Higher values may impact performance.
-            </v-card-text>
-            <v-card-text>
-              <v-select
-                v-model="nWindow"
-                :items="[0,1,2,3]"
-                :disabled="!user.permissions?.includes('setGraphWindowExtent')"
-              >
-                <template #append-inner>
-                  <v-progress-circular
-                    v-if="changingNWindow"
-                    indeterminate
-                    size="20"
-                    width="2"
-                  />
-                </template>
-              </v-select>
-            </v-card-text>
-          </v-card>
-        </v-menu>
-      </v-btn>
-
-      <!-- workflow info icon -->
-      <v-icon
-        v-if="isRunning"
-        :icon="icons.info"
-        id="info-icon"
-      />
-      <v-tooltip
-        v-if="isRunning"
-        activator="#info-icon"
-        :eager="false"
-      >
-        <dl>
-          <dt><strong>Owner:</strong> {{ currentWorkflow.node.owner }}</dt>
-          <dt><strong>Host:</strong> {{ currentWorkflow.node.host }}</dt>
-          <dt><strong>Cylc version:</strong> {{ currentWorkflow.node.cylcVersion }}</dt>
-          <dt><strong>Run mode:</strong> {{ currentWorkflow.node.runMode }}</dt>
-        </dl>
-      </v-tooltip>
-
-      <!-- workflow status message -->
-      <span class="status-msg text-body-2">
-        {{ statusMessage }}
-        <span v-if="currentWorkflow.node.cylcVersion !== uisFlowVersion">
-          {{ versionPopup }}
-        </span>
-      </span>
-
-      <v-spacer class="mx-0" />
-
-      <v-btn
-        v-if="$route.name === 'Workspace'"
-        class="add-view"
-        color="primary"
-        data-cy="add-view-btn"
-      >
-        <v-icon class="icon">
-          {{ icons.add }}
-        </v-icon>
-        <span class="label">
-          {{ $t('Toolbar.addView') }}
-        </span>
-
-        <v-menu
-          activator="parent"
-          location="bottom"
-        >
-          <v-list>
-            <v-list-item
-              v-for="[name, view] in views"
-              :id="`toolbar-add-${name}-view`"
-              :key="name"
-              @click="eventBus.emit('add-view', { name })"
-            >
-              <template #prepend>
-                <v-icon>{{ view.icon }}</v-icon>
-              </template>
-              <v-list-item-title>{{ startCase(name) }}</v-list-item-title>
-            </v-list-item>
-            <v-divider/>
-            <v-card-actions class="mb-n2">
-              <v-btn
-                @click="eventBus.emit('reset-workspace-layout')"
-                :prepend-icon="icons.mdiArrowULeftTop"
-                class="flex-grow-1"
-                data-cy="reset-layout-btn"
-              >
-                Reset layout
-              </v-btn>
-            </v-card-actions>
-          </v-list>
-        </v-menu>
-      </v-btn>
-      <v-btn
-        icon
-        size="small"
-      >
-        <v-avatar
-          color="primary"
-          size="small"
-        >
-          <div v-if="user.initials">
-            {{ user.initials }}
-          </div>
-          <v-icon
-            v-else
-            :icon="icons.mdiAccount"
-          />
-        </v-avatar>
-        <v-menu activator="parent">
-          <v-card :title="user.username">
-            <v-card-text>
-              <div class="d-flex flex-column row-gap-2">
-                <v-defaults-provider
-                  :defaults="{
-                    VBtn: { variant: 'tonal', spaced: true },
-                  }"
-                >
-                  <v-btn
-                    to="/user-profile"
-                    :prepend-icon="icons.mdiCog"
-                  >
-                    Settings
-                  </v-btn>
-                </v-defaults-provider>
-              </div>
-            </v-card-text>
-          </v-card>
-        </v-menu>
-      </v-btn>
-    </template>
   </v-toolbar>
 </template>
 
@@ -251,302 +43,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { inject } from 'vue'
 import { mapState } from 'vuex'
 import {
-  mdiCog,
-  mdiMicrosoftXboxControllerMenu,
-  mdiPause,
-  mdiPlay,
-  mdiPlusBoxMultiple,
-  mdiStop,
   mdiViewList,
   mdiBackburger,
-  mdiAccount,
-  mdiChevronDown,
-  mdiArrowULeftTop,
-  mdiInformationOutline,
 } from '@mdi/js'
-import { startCase } from 'lodash'
-import { until } from '@/utils/reactivity'
-import { useDrawer, toolbarHeight } from '@/utils/toolbar'
-import WorkflowState from '@/model/WorkflowState.model'
-import graphql from '@/mixins/graphql'
-import {
-  mutationStatus
-} from '@/utils/aotf'
-import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
-import SubscriptionQuery from '@/model/SubscriptionQuery.model'
-import gql from 'graphql-tag'
-import { eventBus } from '@/services/eventBus'
-import { upperFirst } from 'lodash-es'
-import WarningIcon from '@/components/cylc/WarningIcon.vue'
-
-const QUERY = gql(`
-subscription Workflow ($workflowId: ID) {
-  deltas(workflows: [$workflowId]) {
-    added {
-      ...AddedDelta
-    }
-    updated (stripNull: true) {
-      ...UpdatedDelta
-    }
-    pruned {
-      ...PrunedDelta
-    }
-  }
-}
-
-fragment WorkflowData on Workflow {
-  id
-  host
-  owner
-  status
-  statusMsg
-  nEdgeDistance
-  cylcVersion
-  runMode
-}
-
-fragment AddedDelta on Added {
-  workflow {
-    ...WorkflowData
-  }
-}
-
-fragment UpdatedDelta on Updated {
-  workflow {
-    ...WorkflowData
-  }
-}
-
-fragment PrunedDelta on Pruned {
-  workflow
-}
-`)
 
 export default {
-  name: 'Toolbar',
-
   setup () {
     const { drawer, toggleDrawer } = useDrawer()
-
-    const uisVersionInfo = inject('versionInfo')
-    const uisFlowVersion = uisVersionInfo?.value?.['cylc-flow'] ?? ''
-
-    return {
-      eventBus,
-      drawer,
-      toggleDrawer,
-      toolbarHeight,
-      uisFlowVersion,
-      icons: {
-        add: mdiPlusBoxMultiple,
-        hold: mdiPause,
-        info: mdiInformationOutline,
-        list: mdiViewList,
-        backBurger: mdiBackburger,
-        menu: mdiMicrosoftXboxControllerMenu,
-        run: mdiPlay,
-        stop: mdiStop,
-        mdiCog,
-        mdiAccount,
-        mdiChevronDown,
-        mdiArrowULeftTop,
-      },
-    }
+    return { drawer, toggleDrawer, toolbarHeight }
   },
 
-  components: {
-    WarningIcon,
-  },
-
-  mixins: [
-    graphql,
-    subscriptionComponentMixin
-  ],
-
-  props: {
-    /**
-     * All possible view component classes that can be rendered
-     *
-     * @type {Map<string, import('@/views/views.js').CylcView>}
-     */
-    views: {
-      type: Map,
-      default: () => new Map()
-    },
-    workflowName: {
-      type: String,
-      default: null
-    }
-  },
-
-  data: () => ({
-    expecting: {
-      play: null,
-      paused: null,
-      stop: null
-    },
-    changingNWindow: false,
-  }),
-
   computed: {
-    ...mapState('app', ['title']),
-    ...mapState('user', ['user']),
-    ...mapState('workflows', ['cylcTree']),
-    query () {
-      if (!this.workflowName) return null
-      return new SubscriptionQuery(
-        QUERY,
-        this.variables,
-        'workflow',
-        [],
-        /* isDelta */ true,
-        /* isGlobalCallback */ true
-      )
-    },
-    currentWorkflow () {
-      if (!this.workflowName) return null
-      return this.cylcTree.$index[this.workflowId]
-    },
-    isRunning () {
-      return (
-        this.currentWorkflow &&
-        (
-          this.currentWorkflow.node.status === WorkflowState.RUNNING.name ||
-          this.currentWorkflow.node.status === WorkflowState.PAUSED.name ||
-          this.currentWorkflow.node.status === WorkflowState.STOPPING.name
-        )
-      )
-    },
-    isPaused () {
-      return (
-        this.currentWorkflow &&
-        this.currentWorkflow.node.status === WorkflowState.PAUSED.name
-      )
-    },
-    isStopped () {
-      return (
-        !this.currentWorkflow ||
-        this.currentWorkflow.node.status === WorkflowState.STOPPED.name
-      )
-    },
-    statusMessage () {
-      return upperFirst(this.currentWorkflow?.node?.statusMsg || '')
-    },
-    versionPopup () {
-      let ret = ''
-      if (this.currentWorkflow?.node?.cylcVersion) {
-        ret += ` • Cylc ${this.currentWorkflow.node.cylcVersion}`
-      }
-      return ret
-    },
-    enabled () {
-      return {
-        playToggle: (
-          this.user.permissions.includes('play') &&
-          this.isStopped &&
-          (
-            this.expecting.play === null ||
-            this.expecting.play === this.isRunning
-          )
-        ),
-        pauseToggle: (
-          (
-            (this.isPaused && this.user.permissions.includes('resume')) ||
-            (!this.isPaused && this.user.permissions.includes('pause'))
-          ) &&
-          !this.isStopped &&
-          !this.expecting.stop &&
-          this.currentWorkflow.node.status !== WorkflowState.STOPPING.name &&
-          (
-            this.expecting.paused === null ||
-            this.expecting.paused === this.isPaused
-          )
-        ),
-        stopToggle: (
-          this.user.permissions.includes('stop') &&
-          !this.isStopped &&
-          (
-            this.expecting.stop === null ||
-            this.expecting.stop === this.isStopped
-          )
-        )
-      }
-    },
-    nWindow: {
-      get () {
-        return this.currentWorkflow?.node?.nEdgeDistance ?? 1
-      },
-      async set (val) {
-        if (val == null || this.isStopped) return
-
-        this.changingNWindow = true
-        if (await this.setGraphWindow(val)) {
-          await until(() => this.currentWorkflow?.node?.nEdgeDistance === val)
-        }
-        this.changingNWindow = false
-      },
-    }
-  },
-
-  watch: {
-    isRunning () {
-      this.expecting.play = null
-    },
-    isPaused () {
-      this.expecting.paused = null
-    },
-    isStopped () {
-      this.expecting.stop = null
-    },
-    currentWorkflow () {
-      this.expecting = {
-        play: null,
-        paused: null,
-        stop: null,
-      }
-    },
+    ...mapState('app', ['title'])
   },
 
-  methods: {
-    onClickPlay () {
-      this.$workflowService.mutate(
-        'play',
-        this.currentWorkflow.id
-      ).then(ret => {
-        if (ret[0] === mutationStatus.SUCCEEDED) {
-          this.expecting.play = !this.isRunning
-        }
-      })
-    },
-    onClickReleaseHold () {
-      this.$workflowService.mutate(
-        this.isPaused ? 'resume' : 'pause',
-        this.currentWorkflow.id
-      ).then(response => {
-        if (response.status === mutationStatus.SUCCEEDED) {
-          this.expecting.paused = !this.isPaused
-        }
-      })
-    },
-    onClickStop () {
-      this.$workflowService.mutate(
-        'stop',
-        this.currentWorkflow.id
-      ).then(response => {
-        if (response.status === mutationStatus.SUCCEEDED) {
-          this.expecting.stop = WorkflowState.STOPPING
-        }
-      })
-    },
-    async setGraphWindow (nWindow) {
-      const { status } = await this.$workflowService.mutate(
-        'setGraphWindowExtent',
-        this.currentWorkflow.id,
-        { nEdgeDistance: nWindow }
-      )
-      return status === mutationStatus.SUCCEEDED
-    },
-    startCase,
+  icons: {
+    mdiViewList,
+    mdiBackburger,
   },
 }
 </script>
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 533be965e..80c68d661 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -18,11 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div>
     <ConnectionStatus :is-offline="offline" />
-    <Toolbar v-if="showToolbar" />
     <Drawer v-if="showSidebar" />
     <CommandMenu/>
 
     <v-main>
+      <Toolbar v-if="showToolbar" />
       <alert />
       <div
         id="core-view"
@@ -45,7 +45,7 @@ import { Alert as AlertModel } from '@/model/Alert.model'
 import Alert from '@/components/core/Alert.vue'
 import Drawer from '@/components/cylc/Drawer.vue'
 import Toolbar from '@/components/cylc/Toolbar.vue'
-import { useNavBtn, toolbarHeight } from '@/utils/toolbar'
+import { toolbarHeight } from '@/utils/toolbar'
 import ConnectionStatus from '@/components/cylc/ConnectionStatus.vue'
 import CommandMenu from '@/components/cylc/commandMenu/Menu.vue'
 
@@ -66,11 +66,10 @@ export default {
       ...allViews.keys(),
       'Workspace',
     ]
-    const { showNavBtn } = useNavBtn()
 
     /** Whether to show app toolbar (not the workspace view toolbar). */
     const showToolbar = computed(
-      () => showNavBtn.value && !workflowViews.includes(route.name)
+      () => !workflowViews.includes(route.name)
     )
     const coreViewStyle = computed(() => ({
       marginTop: showToolbar.value ? `${toolbarHeight}px` : 0,
diff --git a/src/views/WorkflowsTable.vue b/src/views/WorkflowsTable.vue
index ee910f1c6..3d26a22a0 100644
--- a/src/views/WorkflowsTable.vue
+++ b/src/views/WorkflowsTable.vue
@@ -17,6 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <v-container
+    fill-height
     fluid
     class="pa-0"
   >

From adcafb8f037912c2a416fb5553d82a70cfa05d05 Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Mon, 11 May 2026 15:50:15 +0100
Subject: [PATCH 07/17] Fixed

---
 src/components/cylc/Toolbar.vue           | 514 +++++++++++++++++++-
 src/components/cylc/workspace/Toolbar.vue | 560 ----------------------
 src/layouts/Default.vue                   |   4 +-
 src/views/WorkflowsTable.vue              |   8 -
 src/views/Workspace.vue                   |   2 +-
 5 files changed, 502 insertions(+), 586 deletions(-)
 delete mode 100644 src/components/cylc/workspace/Toolbar.vue

diff --git a/src/components/cylc/Toolbar.vue b/src/components/cylc/Toolbar.vue
index 5a13ffad7..7a4d3c9d8 100644
--- a/src/components/cylc/Toolbar.vue
+++ b/src/components/cylc/Toolbar.vue
@@ -15,10 +15,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<!-- Cylc UI Toolbar. Used to display the type of view in responsive mode
-(narrow viewports), and to display a burger button to hide the drawer
-component. Note: this is not used for the workflow view, see
-./workflow/Toolbar.vue instead. -->
+<!-- Unified Cylc UI Toolbar. Shows burger button and title on all pages.
+     Shows workflow controls when a workflowName prop is provided. -->
 
 <template>
   <v-toolbar
@@ -26,43 +24,529 @@ component. Note: this is not used for the workflow view, see
     :height="toolbarHeight"
     flat
     class="c-toolbar"
+    color="grey-lighten-4"
   >
-    <!-- TODO: duplicated in workflow/Toolbar.vue and cylc/Toolbar.vue -->
-    <!-- burger button for mobile -->
+    <!-- burger button -->
     <v-btn
       icon
       @click.stop="toggleDrawer"
       id="toggle-drawer"
     >
-      <v-icon>{{ drawer ? $options.icons.mdiArrowLeft : $options.icons.mdiViewList }}</v-icon>
+      <v-icon>{{ drawer ? icons.backBurger : icons.list }}</v-icon>
     </v-btn>
-    <v-toolbar-title>
+    <!-- title -->
+    <v-toolbar-title
+      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary ml-0"
+    >
       {{ title }}
     </v-toolbar-title>
+
+    <!-- control bar elements displayed only when there is a current workflow in the store -->
+    <template v-if="currentWorkflow">
+      <div class="c-workflow-controls d-flex align-center flex-shrink-0">
+        <WarningIcon
+          :workflow="currentWorkflow"
+          style="font-size: 120%; padding-right: 0.3em;"
+        />
+
+        <v-btn
+          id="workflow-mutate-button"
+          v-command-menu="currentWorkflow"
+          :icon="icons.menu"
+          size="small"
+          density="comfortable"
+        />
+
+        <v-btn
+          id="workflow-play-button"
+          :icon="icons.run"
+          :disabled="!enabled.playToggle"
+          v-if="!isRunning"
+          @click="onClickPlay"
+          size="small"
+          density="comfortable"
+        />
+
+        <v-btn
+          id="workflow-play-pause-button"
+          :icon="isPaused ? icons.run : icons.hold"
+          :disabled="!enabled.pauseToggle"
+          v-if="isRunning"
+          @click="onClickReleaseHold"
+          size="small"
+          density="comfortable"
+        />
+
+        <v-btn
+          id="workflow-stop-button"
+          :icon="icons.stop"
+          :disabled="!enabled.stopToggle"
+          @click="onClickStop"
+          size="small"
+          density="comfortable"
+        />
+      </div>
+
+      <!-- n-window selector -->
+      <v-btn
+        :disabled="isStopped"
+        variant="tonal"
+        rounded
+        size="small"
+        data-cy="n-win-selector"
+      >
+        N={{ nWindow }}
+        <template #append>
+          <v-icon
+            :icon="icons.mdiChevronDown"
+            class="mx-n1"
+          />
+        </template>
+        <v-menu
+          activator="parent"
+          :close-on-content-click="false"
+          max-width="400"
+          data-cy="n-win-popup"
+        >
+          <v-card title="Graph Window Depth">
+            <v-card-text>
+              This changes the number of tasks which are displayed.
+
+              Higher values may impact performance.
+            </v-card-text>
+            <v-card-text>
+              <v-select
+                v-model="nWindow"
+                :items="[0,1,2,3]"
+                :disabled="!user.permissions?.includes('setGraphWindowExtent')"
+              >
+                <template #append-inner>
+                  <v-progress-circular
+                    v-if="changingNWindow"
+                    indeterminate
+                    size="20"
+                    width="2"
+                  />
+                </template>
+              </v-select>
+            </v-card-text>
+          </v-card>
+        </v-menu>
+      </v-btn>
+
+      <!-- workflow info icon -->
+      <v-icon
+        v-if="isRunning"
+        :icon="icons.info"
+        id="info-icon"
+      />
+      <v-tooltip
+        v-if="isRunning"
+        activator="#info-icon"
+        :eager="false"
+      >
+        <dl>
+          <dt><strong>Owner:</strong> {{ currentWorkflow.node.owner }}</dt>
+          <dt><strong>Host:</strong> {{ currentWorkflow.node.host }}</dt>
+          <dt><strong>Cylc version:</strong> {{ currentWorkflow.node.cylcVersion }}</dt>
+          <dt><strong>Run mode:</strong> {{ currentWorkflow.node.runMode }}</dt>
+        </dl>
+      </v-tooltip>
+
+      <!-- workflow status message -->
+      <span class="status-msg text-body-2">
+        {{ statusMessage }}
+        <span v-if="currentWorkflow.node.cylcVersion !== uisFlowVersion">
+          {{ versionPopup }}
+        </span>
+      </span>
+
+      <v-spacer class="mx-0" />
+
+      <v-btn
+        v-if="$route.name === 'Workspace'"
+        class="add-view"
+        color="primary"
+        data-cy="add-view-btn"
+      >
+        <v-icon class="icon">
+          {{ icons.add }}
+        </v-icon>
+        <span class="label">
+          {{ $t('Toolbar.addView') }}
+        </span>
+
+        <v-menu
+          activator="parent"
+          location="bottom"
+        >
+          <v-list>
+            <v-list-item
+              v-for="[name, view] in views"
+              :id="`toolbar-add-${name}-view`"
+              :key="name"
+              @click="eventBus.emit('add-view', { name })"
+            >
+              <template #prepend>
+                <v-icon>{{ view.icon }}</v-icon>
+              </template>
+              <v-list-item-title>{{ startCase(name) }}</v-list-item-title>
+            </v-list-item>
+            <v-divider/>
+            <v-card-actions class="mb-n2">
+              <v-btn
+                @click="eventBus.emit('reset-workspace-layout')"
+                :prepend-icon="icons.mdiArrowULeftTop"
+                class="flex-grow-1"
+                data-cy="reset-layout-btn"
+              >
+                Reset layout
+              </v-btn>
+            </v-card-actions>
+          </v-list>
+        </v-menu>
+      </v-btn>
+      <v-btn
+        icon
+        size="small"
+      >
+        <v-avatar
+          color="primary"
+          size="small"
+        >
+          <div v-if="user.initials">
+            {{ user.initials }}
+          </div>
+          <v-icon
+            v-else
+            :icon="icons.mdiAccount"
+          />
+        </v-avatar>
+        <v-menu activator="parent">
+          <v-card :title="user.username">
+            <v-card-text>
+              <div class="d-flex flex-column row-gap-2">
+                <v-defaults-provider
+                  :defaults="{
+                    VBtn: { variant: 'tonal', spaced: true },
+                  }"
+                >
+                  <v-btn
+                    to="/user-profile"
+                    :prepend-icon="icons.mdiCog"
+                  >
+                    Settings
+                  </v-btn>
+                </v-defaults-provider>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-menu>
+      </v-btn>
+    </template>
   </v-toolbar>
 </template>
 
 <script>
+import { inject } from 'vue'
 import { mapState } from 'vuex'
-import { useDrawer, toolbarHeight } from '@/utils/toolbar'
 import {
+  mdiCog,
+  mdiMicrosoftXboxControllerMenu,
+  mdiPause,
+  mdiPlay,
+  mdiPlusBoxMultiple,
+  mdiStop,
   mdiViewList,
-  mdiArrowLeft,
+  mdiBackburger,
+  mdiAccount,
+  mdiChevronDown,
+  mdiArrowULeftTop,
+  mdiInformationOutline,
 } from '@mdi/js'
+import { startCase } from 'lodash'
+import { until } from '@/utils/reactivity'
+import { useDrawer, toolbarHeight } from '@/utils/toolbar'
+import WorkflowState from '@/model/WorkflowState.model'
+import graphql from '@/mixins/graphql'
+import {
+  mutationStatus
+} from '@/utils/aotf'
+import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
+import SubscriptionQuery from '@/model/SubscriptionQuery.model'
+import gql from 'graphql-tag'
+import { eventBus } from '@/services/eventBus'
+import { upperFirst } from 'lodash-es'
+import WarningIcon from '@/components/cylc/WarningIcon.vue'
+
+const QUERY = gql(`
+subscription Workflow ($workflowId: ID) {
+  deltas(workflows: [$workflowId]) {
+    added {
+      ...AddedDelta
+    }
+    updated (stripNull: true) {
+      ...UpdatedDelta
+    }
+    pruned {
+      ...PrunedDelta
+    }
+  }
+}
+
+fragment WorkflowData on Workflow {
+  id
+  host
+  owner
+  status
+  statusMsg
+  nEdgeDistance
+  cylcVersion
+  runMode
+}
+
+fragment AddedDelta on Added {
+  workflow {
+    ...WorkflowData
+  }
+}
+
+fragment UpdatedDelta on Updated {
+  workflow {
+    ...WorkflowData
+  }
+}
+
+fragment PrunedDelta on Pruned {
+  workflow
+}
+`)
 
 export default {
+  name: 'Toolbar',
+
   setup () {
     const { drawer, toggleDrawer } = useDrawer()
-    return { drawer, toggleDrawer, toolbarHeight }
+
+    const uisVersionInfo = inject('versionInfo')
+    const uisFlowVersion = uisVersionInfo?.value?.['cylc-flow'] ?? ''
+
+    return {
+      eventBus,
+      drawer,
+      toggleDrawer,
+      toolbarHeight,
+      uisFlowVersion,
+      icons: {
+        add: mdiPlusBoxMultiple,
+        hold: mdiPause,
+        info: mdiInformationOutline,
+        list: mdiViewList,
+        backBurger: mdiBackburger,
+        menu: mdiMicrosoftXboxControllerMenu,
+        run: mdiPlay,
+        stop: mdiStop,
+        mdiCog,
+        mdiAccount,
+        mdiChevronDown,
+        mdiArrowULeftTop,
+      },
+    }
   },
 
+  components: {
+    WarningIcon,
+  },
+
+  mixins: [
+    graphql,
+    subscriptionComponentMixin
+  ],
+
+  props: {
+    /**
+     * All possible view component classes that can be rendered
+     *
+     * @type {Map<string, import('@/views/views.js').CylcView>}
+     */
+    views: {
+      type: Map,
+      default: () => new Map()
+    },
+    workflowName: {
+      type: String,
+      default: null
+    }
+  },
+
+  data: () => ({
+    expecting: {
+      play: null,
+      paused: null,
+      stop: null
+    },
+    changingNWindow: false,
+  }),
+
   computed: {
-    ...mapState('app', ['title'])
+    ...mapState('app', ['title']),
+    ...mapState('user', ['user']),
+    ...mapState('workflows', ['cylcTree']),
+    query () {
+      if (!this.workflowName) return null
+      return new SubscriptionQuery(
+        QUERY,
+        this.variables,
+        'workflow',
+        [],
+        /* isDelta */ true,
+        /* isGlobalCallback */ true
+      )
+    },
+    currentWorkflow () {
+      if (!this.workflowName) return null
+      return this.cylcTree.$index[this.workflowId]
+    },
+    isRunning () {
+      return (
+        this.currentWorkflow &&
+        (
+          this.currentWorkflow.node.status === WorkflowState.RUNNING.name ||
+          this.currentWorkflow.node.status === WorkflowState.PAUSED.name ||
+          this.currentWorkflow.node.status === WorkflowState.STOPPING.name
+        )
+      )
+    },
+    isPaused () {
+      return (
+        this.currentWorkflow &&
+        this.currentWorkflow.node.status === WorkflowState.PAUSED.name
+      )
+    },
+    isStopped () {
+      return (
+        !this.currentWorkflow ||
+        this.currentWorkflow.node.status === WorkflowState.STOPPED.name
+      )
+    },
+    statusMessage () {
+      return upperFirst(this.currentWorkflow?.node?.statusMsg || '')
+    },
+    versionPopup () {
+      let ret = ''
+      if (this.currentWorkflow?.node?.cylcVersion) {
+        ret += ` • Cylc ${this.currentWorkflow.node.cylcVersion}`
+      }
+      return ret
+    },
+    enabled () {
+      return {
+        playToggle: (
+          this.user.permissions.includes('play') &&
+          this.isStopped &&
+          (
+            this.expecting.play === null ||
+            this.expecting.play === this.isRunning
+          )
+        ),
+        pauseToggle: (
+          (
+            (this.isPaused && this.user.permissions.includes('resume')) ||
+            (!this.isPaused && this.user.permissions.includes('pause'))
+          ) &&
+          !this.isStopped &&
+          !this.expecting.stop &&
+          this.currentWorkflow.node.status !== WorkflowState.STOPPING.name &&
+          (
+            this.expecting.paused === null ||
+            this.expecting.paused === this.isPaused
+          )
+        ),
+        stopToggle: (
+          this.user.permissions.includes('stop') &&
+          !this.isStopped &&
+          (
+            this.expecting.stop === null ||
+            this.expecting.stop === this.isStopped
+          )
+        )
+      }
+    },
+    nWindow: {
+      get () {
+        return this.currentWorkflow?.node?.nEdgeDistance ?? 1
+      },
+      async set (val) {
+        if (val == null || this.isStopped) return
+
+        this.changingNWindow = true
+        if (await this.setGraphWindow(val)) {
+          await until(() => this.currentWorkflow?.node?.nEdgeDistance === val)
+        }
+        this.changingNWindow = false
+      },
+    }
+  },
+
+  watch: {
+    isRunning () {
+      this.expecting.play = null
+    },
+    isPaused () {
+      this.expecting.paused = null
+    },
+    isStopped () {
+      this.expecting.stop = null
+    },
+    currentWorkflow () {
+      this.expecting = {
+        play: null,
+        paused: null,
+        stop: null,
+      }
+    },
   },
 
-  icons: {
-    mdiViewList,
-    mdiArrowLeft,
+  methods: {
+    onClickPlay () {
+      this.$workflowService.mutate(
+        'play',
+        this.currentWorkflow.id
+      ).then(ret => {
+        if (ret[0] === mutationStatus.SUCCEEDED) {
+          this.expecting.play = !this.isRunning
+        }
+      })
+    },
+    onClickReleaseHold () {
+      this.$workflowService.mutate(
+        this.isPaused ? 'resume' : 'pause',
+        this.currentWorkflow.id
+      ).then(response => {
+        if (response.status === mutationStatus.SUCCEEDED) {
+          this.expecting.paused = !this.isPaused
+        }
+      })
+    },
+    onClickStop () {
+      this.$workflowService.mutate(
+        'stop',
+        this.currentWorkflow.id
+      ).then(response => {
+        if (response.status === mutationStatus.SUCCEEDED) {
+          this.expecting.stop = WorkflowState.STOPPING
+        }
+      })
+    },
+    async setGraphWindow (nWindow) {
+      const { status } = await this.$workflowService.mutate(
+        'setGraphWindowExtent',
+        this.currentWorkflow.id,
+        { nEdgeDistance: nWindow }
+      )
+      return status === mutationStatus.SUCCEEDED
+    },
+    startCase,
   },
 }
 </script>
diff --git a/src/components/cylc/workspace/Toolbar.vue b/src/components/cylc/workspace/Toolbar.vue
deleted file mode 100644
index 91ce36700..000000000
--- a/src/components/cylc/workspace/Toolbar.vue
+++ /dev/null
@@ -1,560 +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/>.
--->
-
-<!-- Toolbar for the workspace view -->
-
-<template>
-  <v-toolbar
-    id="core-app-bar"
-    :height="toolbarHeight"
-    flat
-    class="c-toolbar"
-    color="grey-lighten-4"
-  >
-    <!-- TODO: duplicated in workflow/Toolbar.vue and cylc/Toolbar.vue -->
-    <!-- burger button for mobile -->
-    <v-btn
-      icon
-      @click.stop="toggleDrawer"
-      id="toggle-drawer"
-    >
-      <v-icon>{{ drawer ? icons.arrowLeft : icons.list }}</v-icon>
-    </v-btn>
-    <!-- title -->
-    <v-toolbar-title
-      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary ml-0"
-    >
-      {{ title }}
-    </v-toolbar-title>
-
-    <!-- control bar elements displayed only when there is a current workflow in the store -->
-    <template v-if="currentWorkflow">
-      <div class="c-workflow-controls d-flex align-center flex-shrink-0">
-        <WarningIcon
-          :workflow="currentWorkflow"
-          style="font-size: 120%; padding-right: 0.3em;"
-        />
-
-        <v-btn
-          id="workflow-mutate-button"
-          v-command-menu="currentWorkflow"
-          :icon="icons.menu"
-          size="small"
-          density="comfortable"
-        />
-
-        <v-btn
-          id="workflow-play-button"
-          :icon="icons.run"
-          :disabled="!enabled.playToggle"
-          v-if="!isRunning"
-          @click="onClickPlay"
-          size="small"
-          density="comfortable"
-        />
-
-        <v-btn
-          id="workflow-play-pause-button"
-          :icon="isPaused ? icons.run : icons.hold"
-          :disabled="!enabled.pauseToggle"
-          v-if="isRunning"
-          @click="onClickReleaseHold"
-          size="small"
-          density="comfortable"
-        />
-
-        <v-btn
-          id="workflow-stop-button"
-          :icon="icons.stop"
-          :disabled="!enabled.stopToggle"
-          @click="onClickStop"
-          size="small"
-          density="comfortable"
-        />
-      </div>
-
-      <!-- n-window selector -->
-      <v-btn
-        :disabled="isStopped"
-        variant="tonal"
-        rounded
-        size="small"
-        data-cy="n-win-selector"
-      >
-        N={{ nWindow }}
-        <template #append>
-          <v-icon
-            :icon="icons.mdiChevronDown"
-            class="mx-n1"
-          />
-        </template>
-        <v-menu
-          activator="parent"
-          :close-on-content-click="false"
-          max-width="400"
-          data-cy="n-win-popup"
-        >
-          <v-card title="Graph Window Depth">
-            <v-card-text>
-              This changes the number of tasks which are displayed.
-
-              Higher values may impact performance.
-            </v-card-text>
-            <v-card-text>
-              <v-select
-                v-model="nWindow"
-                :items="[0,1,2,3]"
-                :disabled="!user.permissions?.includes('setGraphWindowExtent')"
-              >
-                <template #append-inner>
-                  <v-progress-circular
-                    v-if="changingNWindow"
-                    indeterminate
-                    size="20"
-                    width="2"
-                  />
-                </template>
-              </v-select>
-            </v-card-text>
-          </v-card>
-        </v-menu>
-      </v-btn>
-
-      <!-- workflow info icon -->
-      <v-icon
-        v-if="isRunning"
-        :icon="icons.info"
-        id="info-icon"
-      />
-      <v-tooltip
-        v-if="isRunning"
-        activator="#info-icon"
-        :eager="false"
-      >
-        <dl>
-          <dt><strong>Owner:</strong> {{ currentWorkflow.node.owner }}</dt>
-          <dt><strong>Host:</strong> {{ currentWorkflow.node.host }}</dt>
-          <dt><strong>Cylc version:</strong> {{ currentWorkflow.node.cylcVersion }}</dt>
-          <dt><strong>Run mode:</strong> {{ currentWorkflow.node.runMode }}</dt>
-        </dl>
-      </v-tooltip>
-
-      <!-- workflow status message -->
-      <span class="status-msg text-body-2">
-        {{ statusMessage }}
-        <!-- workflow Cylc version popup on differ with UIS version -->
-        <!-- nested within status-msg for style inheritance -->
-        <span v-if="currentWorkflow.node.cylcVersion !== uisFlowVersion">
-          {{ versionPopup }}
-        </span>
-      </span>
-
-      <v-spacer class="mx-0" />
-
-      <v-btn
-        v-if="$route.name === 'Workspace'"
-        class="add-view"
-        color="primary"
-        data-cy="add-view-btn"
-      >
-        <v-icon class="icon">
-          {{ icons.add }}
-        </v-icon>
-        <span class="label">
-          {{ $t('Toolbar.addView') }}
-        </span>
-
-        <v-menu
-          activator="parent"
-          location="bottom"
-        >
-          <v-list>
-            <v-list-item
-              v-for="[name, view] in views"
-              :id="`toolbar-add-${name}-view`"
-              :key="name"
-              @click="eventBus.emit('add-view', { name })"
-            >
-              <template #prepend>
-                <v-icon>{{ view.icon }}</v-icon>
-              </template>
-              <v-list-item-title>{{ startCase(name) }}</v-list-item-title>
-            </v-list-item>
-            <v-divider/>
-            <v-card-actions class="mb-n2">
-              <v-btn
-                @click="eventBus.emit('reset-workspace-layout')"
-                :prepend-icon="icons.mdiArrowULeftTop"
-                class="flex-grow-1"
-                data-cy="reset-layout-btn"
-              >
-                Reset layout
-              </v-btn>
-            </v-card-actions>
-          </v-list>
-        </v-menu>
-      </v-btn>
-      <v-btn
-        icon
-        size="small"
-      >
-        <v-avatar
-          color="primary"
-          size="small"
-        >
-          <div v-if="user.initials">
-            {{ user.initials }}
-          </div>
-          <v-icon
-            v-else
-            :icon="icons.mdiAccount"
-          />
-        </v-avatar>
-        <v-menu activator="parent">
-          <v-card :title="user.username">
-            <v-card-text>
-              <div class="d-flex flex-column row-gap-2">
-                <v-defaults-provider
-                  :defaults="{
-                    VBtn: { variant: 'tonal', spaced: true },
-                  }"
-                >
-                  <v-btn
-                    to="/user-profile"
-                    :prepend-icon="icons.mdiCog"
-                  >
-                    Settings
-                  </v-btn>
-                </v-defaults-provider>
-              </div>
-            </v-card-text>
-          </v-card>
-        </v-menu>
-      </v-btn>
-    </template>
-  </v-toolbar>
-</template>
-
-<script>
-import { inject } from 'vue'
-import { mapState } from 'vuex'
-import {
-  mdiCog,
-  mdiMicrosoftXboxControllerMenu,
-  mdiPause,
-  mdiPlay,
-  mdiPlusBoxMultiple,
-  mdiStop,
-  mdiViewList,
-  mdiAccount,
-  mdiChevronDown,
-  mdiArrowULeftTop,
-  mdiArrowLeft,
-  mdiInformationOutline,
-} from '@mdi/js'
-import { startCase } from 'lodash'
-import { until } from '@/utils/reactivity'
-import { useDrawer, useNavBtn, toolbarHeight } from '@/utils/toolbar'
-import WorkflowState from '@/model/WorkflowState.model'
-import graphql from '@/mixins/graphql'
-import {
-  mutationStatus
-} from '@/utils/aotf'
-import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
-import SubscriptionQuery from '@/model/SubscriptionQuery.model'
-import gql from 'graphql-tag'
-import { eventBus } from '@/services/eventBus'
-import { upperFirst } from 'lodash-es'
-import WarningIcon from '@/components/cylc/WarningIcon.vue'
-
-const QUERY = gql(`
-subscription Workflow ($workflowId: ID) {
-  deltas(workflows: [$workflowId]) {
-    added {
-      ...AddedDelta
-    }
-    updated (stripNull: true) {
-      ...UpdatedDelta
-    }
-    pruned {
-      ...PrunedDelta
-    }
-  }
-}
-
-fragment WorkflowData on Workflow {
-  id
-  host
-  owner
-  status
-  statusMsg
-  nEdgeDistance
-  cylcVersion
-  runMode
-}
-
-fragment AddedDelta on Added {
-  workflow {
-    ...WorkflowData
-  }
-}
-
-fragment UpdatedDelta on Updated {
-  workflow {
-    ...WorkflowData
-  }
-}
-
-fragment PrunedDelta on Pruned {
-  workflow
-}
-`)
-
-export default {
-  name: 'Toolbar',
-
-  setup () {
-    const { showNavBtn } = useNavBtn()
-    const { drawer, toggleDrawer } = useDrawer()
-
-    const uisVersionInfo = inject('versionInfo')
-    const uisFlowVersion = uisVersionInfo?.value?.['cylc-flow'] ?? ''
-
-    return {
-      eventBus,
-      drawer,
-      showNavBtn,
-      toggleDrawer,
-      toolbarHeight,
-      uisFlowVersion,
-      icons: {
-        add: mdiPlusBoxMultiple,
-        hold: mdiPause,
-        info: mdiInformationOutline,
-        list: mdiViewList,
-        arrowLeft: mdiArrowLeft,
-        menu: mdiMicrosoftXboxControllerMenu,
-        run: mdiPlay,
-        stop: mdiStop,
-        mdiCog,
-        mdiAccount,
-        mdiChevronDown,
-        mdiArrowULeftTop,
-      },
-    }
-  },
-
-  components: {
-    WarningIcon,
-  },
-
-  mixins: [
-    graphql,
-    subscriptionComponentMixin
-  ],
-
-  props: {
-    /**
-     * All possible view component classes that can be rendered
-     *
-     * @type {Map<string, import('@/views/views.js').CylcView>}
-     */
-    views: {
-      type: Map,
-      required: true
-    }
-  },
-
-  data: () => ({
-    expecting: {
-      // store state from mutations in order to compute the "enabled" attrs
-      play: null,
-      paused: null,
-      stop: null
-    },
-    changingNWindow: false,
-  }),
-
-  computed: {
-    ...mapState('app', ['title']),
-    ...mapState('user', ['user']),
-    ...mapState('workflows', ['cylcTree']),
-    query () {
-      return new SubscriptionQuery(
-        QUERY,
-        this.variables,
-        'workflow',
-        [],
-        /* isDelta */ true,
-        /* isGlobalCallback */ true
-      )
-    },
-    currentWorkflow () {
-      return this.cylcTree.$index[this.workflowId]
-    },
-    isRunning () {
-      return (
-        this.currentWorkflow &&
-        (
-          this.currentWorkflow.node.status === WorkflowState.RUNNING.name ||
-          this.currentWorkflow.node.status === WorkflowState.PAUSED.name ||
-          this.currentWorkflow.node.status === WorkflowState.STOPPING.name
-        )
-      )
-    },
-    isPaused () {
-      return (
-        this.currentWorkflow &&
-        this.currentWorkflow.node.status === WorkflowState.PAUSED.name
-      )
-    },
-    isStopped () {
-      return (
-        !this.currentWorkflow ||
-        this.currentWorkflow.node.status === WorkflowState.STOPPED.name
-      )
-    },
-    statusMessage () {
-      return upperFirst(this.currentWorkflow.node.statusMsg || '')
-    },
-    versionPopup () {
-      let ret = ''
-      if (this.currentWorkflow.node.cylcVersion) {
-        ret += ` • Cylc ${this.currentWorkflow.node.cylcVersion}`
-      }
-      return ret
-    },
-    enabled () {
-      // object holding the states of controls that are supposed to be enabled
-      // NOTE: this is a temporary solution until we are able to subscribe to
-      // mutations to tell when they have completed
-      return {
-        playToggle: (
-          // the play button (for the play from stopped scenario)
-          this.user.permissions.includes('play') &&
-          this.isStopped &&
-          (
-            this.expecting.play === null ||
-            this.expecting.play === this.isRunning
-          )
-        ),
-        pauseToggle: (
-          // the play/pause button
-          (
-            (this.isPaused && this.user.permissions.includes('resume')) ||
-            (!this.isPaused && this.user.permissions.includes('pause'))
-          ) &&
-          !this.isStopped &&
-          !this.expecting.stop &&
-          this.currentWorkflow.node.status !== WorkflowState.STOPPING.name &&
-          (
-            this.expecting.paused === null ||
-            this.expecting.paused === this.isPaused
-          )
-        ),
-        stopToggle: (
-          // the stop button
-          this.user.permissions.includes('stop') &&
-          !this.isStopped &&
-          (
-            this.expecting.stop === null ||
-            this.expecting.stop === this.isStopped
-          )
-        )
-      }
-    },
-    nWindow: {
-      get () {
-        // the graph window distance reported by the scheduler
-        return this.currentWorkflow?.node?.nEdgeDistance ?? 1
-      },
-      async set (val) {
-        if (val == null || this.isStopped) return
-
-        this.changingNWindow = true
-        if (await this.setGraphWindow(val)) {
-          await until(() => this.currentWorkflow?.node?.nEdgeDistance === val)
-        }
-        this.changingNWindow = false
-      },
-    }
-  },
-
-  watch: {
-    // reset the "expecting" state markers when the workflow state changes
-    isRunning () {
-      this.expecting.play = null
-    },
-    isPaused () {
-      this.expecting.paused = null
-    },
-    isStopped () {
-      this.expecting.stop = null
-    },
-    // reset the "expecting" state markers when we switch workflow
-    currentWorkflow () {
-      this.expecting = {
-        play: null,
-        paused: null,
-        stop: null,
-      }
-    },
-  },
-
-  methods: {
-    onClickPlay () {
-      this.$workflowService.mutate(
-        'play',
-        this.currentWorkflow.id
-      ).then(ret => {
-        if (ret[0] === mutationStatus.SUCCEEDED) {
-          this.expecting.play = !this.isRunning
-        }
-      })
-    },
-    onClickReleaseHold () {
-      this.$workflowService.mutate(
-        this.isPaused ? 'resume' : 'pause',
-        this.currentWorkflow.id
-      ).then(response => {
-        if (response.status === mutationStatus.SUCCEEDED) {
-          this.expecting.paused = !this.isPaused
-        }
-      })
-    },
-    onClickStop () {
-      this.$workflowService.mutate(
-        'stop',
-        this.currentWorkflow.id
-      ).then(response => {
-        if (response.status === mutationStatus.SUCCEEDED) {
-          this.expecting.stop = WorkflowState.STOPPING
-        }
-      })
-    },
-    async setGraphWindow (nWindow) {
-      const { status } = await this.$workflowService.mutate(
-        'setGraphWindowExtent',
-        this.currentWorkflow.id,
-        { nEdgeDistance: nWindow }
-      )
-      return status === mutationStatus.SUCCEEDED
-    },
-    startCase,
-  },
-}
-</script>
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 80c68d661..422094f9a 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -72,8 +72,8 @@ export default {
       () => !workflowViews.includes(route.name)
     )
     const coreViewStyle = computed(() => ({
-      marginTop: showToolbar.value ? `${toolbarHeight}px` : 0,
-      height: showToolbar.value ? `calc(100vh - ${toolbarHeight}px)` : '100vh',
+      marginTop: '0px',
+      height: showToolbar.value ? `calc(100vh - ${toolbarHeight}px)` : '100vh'
     }))
 
     return {
diff --git a/src/views/WorkflowsTable.vue b/src/views/WorkflowsTable.vue
index d1d95979f..e3fa2644a 100644
--- a/src/views/WorkflowsTable.vue
+++ b/src/views/WorkflowsTable.vue
@@ -23,14 +23,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <v-row class="align-self-start">
       <v-col>
-        <!-- TODO: this is not really an alert, it's a heading -->
-        <v-alert
-          :icon="icons.mdiTable"
-          prominent
-          color="grey-lighten-3"
-        >
-          <h3 class="text-h5">{{ $t('Workflows.tableHeader') }}</h3>
-        </v-alert>
         <v-data-table
           :headers="$options.headers"
           :items="workflowsTable"
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index afd22e6ee..69025cb8a 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -41,7 +41,7 @@ import graphqlMixin from '@/mixins/graphql'
 import subscriptionMixin from '@/mixins/subscription'
 import ViewState from '@/model/ViewState.model'
 import Lumino from '@/components/cylc/workspace/Lumino.vue'
-import Toolbar from '@/components/cylc/workspace/Toolbar.vue'
+import Toolbar from '@/components/cylc/Toolbar.vue'
 import { toolbarHeight } from '@/utils/toolbar'
 
 export default {

From 3c25ff6827c43046664cf56e53b15c3d1cc3a6bb Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Tue, 12 May 2026 10:21:25 +0100
Subject: [PATCH 08/17] Fixed unit tests

---
 .../unit/components/cylc/toolbar.vue.spec.js  | 109 ++++++++++---
 .../cylc/workspace/toolbar.vue.spec.js        | 149 ------------------
 2 files changed, 91 insertions(+), 167 deletions(-)
 delete mode 100644 tests/unit/components/cylc/workspace/toolbar.vue.spec.js

diff --git a/tests/unit/components/cylc/toolbar.vue.spec.js b/tests/unit/components/cylc/toolbar.vue.spec.js
index a615d3617..5303e6adc 100644
--- a/tests/unit/components/cylc/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/toolbar.vue.spec.js
@@ -18,29 +18,28 @@
 import { mount } from '@vue/test-utils'
 import { createVuetify } from 'vuetify'
 import { createStore } from 'vuex'
+import storeOptions from '@/store/options'
 import Toolbar from '@/components/cylc/Toolbar.vue'
 import WorkflowState from '@/model/WorkflowState.model'
-import storeOptions from '@/store/options'
+
+import CommandMenuPlugin from '@/components/cylc/commandMenu/plugin'
+import sinon from 'sinon'
+import WorkflowService from '@/services/workflow.service'
+import { useDrawer } from '@/utils/toolbar'
+import { vuetifyOptions } from '@/plugins/vuetify'
+import { mdiViewList, mdiBackburger } from '@mdi/js'
+
+const $workflowService = sinon.createStubInstance(WorkflowService)
+const vuetify = createVuetify(vuetifyOptions)
 
 describe('Toolbar component', () => {
-  const vuetify = createVuetify({
-    display: {}
-  })
-  const $route = {
-    name: 'testRoute'
-  }
   let store
-  let mountFunction
+  const { drawer: drawerState } = useDrawer()
 
   beforeEach(() => {
     store = createStore(storeOptions)
-    mountFunction = () => mount(Toolbar, {
-      global: {
-        plugins: [vuetify, store],
-        mocks: { $route }
-      }
-    })
-
+    store.commit('user/SET_USER', { owner: 'rincewind', permissions: ['play', 'pause', 'resume', 'stop'] })
+    drawerState.value = false
     store.state.workflows.workflows = [
       {
         id: 'user/id',
@@ -50,9 +49,83 @@ describe('Toolbar component', () => {
     ]
   })
 
-  it('should mount the component', async () => {
-    const wrapper = mountFunction()
+  it('shows backburger icon when drawer is open and list icon when closed', async () => {
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+        workflowName: 'strewth',
+      },
+    })
+    // Drawer closed -> list icon
+    drawerState.value = false
+    await wrapper.vm.$nextTick()
+    const btn = wrapper.find('#toggle-drawer')
+    expect(btn.find('svg path').attributes('d')).to.equal(mdiViewList)
+    // Drawer open -> backburger icon
+    drawerState.value = true
+    await wrapper.vm.$nextTick()
+    expect(btn.find('svg path').attributes('d')).to.equal(mdiBackburger)
+  })
+
+  it('toggles drawer on button click', async () => {
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+        workflowName: 'strewth',
+      },
+    })
+    expect(drawerState.value).to.equal(false)
+    await wrapper.find('#toggle-drawer').trigger('click')
+    expect(drawerState.value).to.equal(true)
+    await wrapper.find('#toggle-drawer').trigger('click')
+    expect(drawerState.value).to.equal(false)
+  })
+
+  it('does not show workflow controls without workflowName', async () => {
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+      },
+    })
+    await wrapper.vm.$nextTick()
+    // Burger button and title should still be present
+    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
+    expect(wrapper.find('.c-toolbar-title').exists()).to.equal(true)
+    // Workflow-specific controls should not be present
+    expect(wrapper.find('#workflow-play-button').exists()).to.equal(false)
+    expect(wrapper.find('#workflow-stop-button').exists()).to.equal(false)
+    expect(wrapper.find('#workflow-mutate-button').exists()).to.equal(false)
+    expect(wrapper.find('.c-workflow-controls').exists()).to.equal(false)
+  })
+
+  it('displays the title from the store', async () => {
+    store.commit('app/setTitle', "I'm your pain when you can't feel")
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+      },
+    })
     await wrapper.vm.$nextTick()
-    expect(wrapper.vm.$el).to.exist
+    expect(wrapper.find('.c-toolbar-title').text()).to.include("I'm your pain when you can't feel")
   })
 })
diff --git a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
deleted file mode 100644
index 877789a85..000000000
--- a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
+++ /dev/null
@@ -1,149 +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/>.
- */
-
-import { createVuetify } from 'vuetify'
-import { createStore } from 'vuex'
-import { mount } from '@vue/test-utils'
-import storeOptions from '@/store/options'
-import Toolbar from '@/components/cylc/Toolbar.vue'
-import CommandMenuPlugin from '@/components/cylc/commandMenu/plugin'
-import sinon from 'sinon'
-import WorkflowService from '@/services/workflow.service'
-import { useDrawer } from '@/utils/toolbar'
-import { vuetifyOptions } from '@/plugins/vuetify'
-import { mdiViewList, mdiBackburger } from '@mdi/js'
-
-const $workflowService = sinon.createStubInstance(WorkflowService)
-const vuetify = createVuetify(vuetifyOptions)
-
-describe('Toolbar component', () => {
-  let store
-  const { drawer: drawerState } = useDrawer()
-
-  beforeEach(() => {
-    store = createStore(storeOptions)
-    store.commit('user/SET_USER', { owner: 'rincewind', permissions: ['play', 'pause', 'resume', 'stop'] })
-    drawerState.value = false
-  })
-
-  it('hides/shows nav button according to viewport size & whether drawer is collapsed', async () => {
-    // TODO: actually just show nav btn at all times?
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: { $workflowService },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map(),
-        workflowName: 'strewth',
-      },
-    })
-    // Btn should show when drawer is collapsed
-    wrapper.vm.$vuetify.display.mobile = false
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
-    // Btn should show when drawer is visible on large viewport
-    drawerState.value = true
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
-    // Btn should show when drawer is visible on small viewport
-    wrapper.vm.$vuetify.display.mobile = true
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
-  })
-
-  it('shows backburger icon when drawer is open and list icon when closed', async () => {
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: { $workflowService },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map(),
-        workflowName: 'strewth',
-      },
-    })
-    // Drawer closed -> list icon
-    drawerState.value = false
-    await wrapper.vm.$nextTick()
-    const btn = wrapper.find('#toggle-drawer')
-    expect(btn.find('svg path').attributes('d')).to.equal(mdiViewList)
-    // Drawer open -> backburger icon
-    drawerState.value = true
-    await wrapper.vm.$nextTick()
-    expect(btn.find('svg path').attributes('d')).to.equal(mdiBackburger)
-  })
-
-  it('toggles drawer on button click', async () => {
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: { $workflowService },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map(),
-        workflowName: 'strewth',
-      },
-    })
-    expect(drawerState.value).to.equal(false)
-    await wrapper.find('#toggle-drawer').trigger('click')
-    expect(drawerState.value).to.equal(true)
-    await wrapper.find('#toggle-drawer').trigger('click')
-    expect(drawerState.value).to.equal(false)
-  })
-
-  it('does not show workflow controls without workflowName', async () => {
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: { $workflowService },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map(),
-      },
-    })
-    await wrapper.vm.$nextTick()
-    // Burger button and title should still be present
-    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
-    expect(wrapper.find('.c-toolbar-title').exists()).to.equal(true)
-    // Workflow-specific controls should not be present
-    expect(wrapper.find('#workflow-play-button').exists()).to.equal(false)
-    expect(wrapper.find('#workflow-stop-button').exists()).to.equal(false)
-    expect(wrapper.find('#workflow-mutate-button').exists()).to.equal(false)
-    expect(wrapper.find('.c-workflow-controls').exists()).to.equal(false)
-  })
-
-  it('displays the title from the store', async () => {
-    store.commit('app/setTitle', "I'm your pain when you can't feel")
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: { $workflowService },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map(),
-      },
-    })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('.c-toolbar-title').text()).to.include("I'm your pain when you can't feel")
-  })
-})

From f009df32611633c723c1b9403d84ea4d46ca25ed Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Tue, 12 May 2026 11:21:30 +0100
Subject: [PATCH 09/17] Added test coverage

---
 .../unit/components/cylc/toolbar.vue.spec.js  | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/tests/unit/components/cylc/toolbar.vue.spec.js b/tests/unit/components/cylc/toolbar.vue.spec.js
index 5303e6adc..fed48bca9 100644
--- a/tests/unit/components/cylc/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/toolbar.vue.spec.js
@@ -128,4 +128,85 @@ describe('Toolbar component', () => {
     await wrapper.vm.$nextTick()
     expect(wrapper.find('.c-toolbar-title').text()).to.include("I'm your pain when you can't feel")
   })
+
+  it('shows user menu', async () => {
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+        workflowName: 'strewth',
+      },
+    })
+    await wrapper.find('.v-avatar').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.v-card').text()).to.include('rincewind')
+    expect(wrapper.find('a[href="/user-profile"]').exists()).to.be.true
+  })
+
+  it('shows add view menu', async () => {
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: {
+          $workflowService,
+          $route: { name: 'Workspace' }
+        },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map([['testView', { icon: 'mdi-help' }]]),
+        workflowName: 'strewth',
+      },
+    })
+    await wrapper.find('.add-view').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#toolbar-add-testView-view').exists()).to.be.true
+  })
+
+  it('shows workflow info tooltip', async () => {
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+        workflowName: 'strewth',
+      },
+    })
+    store.state.workflows.cylcTree = { $index: { 'strewth/strewth': { id: 'strewth/strewth', node: { owner: 'rincewind', host: 'localhost', cylcVersion: '8.0.0', runMode: 'live', status: 'running' } } } }
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#info-icon').exists()).to.be.true
+  })
+
+  it('interacts with workflow controls', async () => {
+    $workflowService.mutate.resolves([{ status: 'SUCCEEDED' }])
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+        workflowName: 'strewth',
+      },
+    })
+    store.state.workflows.cylcTree = { $index: { 'strewth/strewth': { id: 'strewth/strewth', node: { status: 'stopped' } } } }
+    await wrapper.vm.$nextTick()
+    await wrapper.find('#workflow-play-button').trigger('click')
+    expect($workflowService.mutate.calledWith('play')).to.be.true
+
+    store.state.workflows.cylcTree = { $index: { 'strewth/strewth': { id: 'strewth/strewth', node: { status: 'running' } } } }
+    await wrapper.vm.$nextTick()
+    await wrapper.find('#workflow-play-pause-button').trigger('click')
+    expect($workflowService.mutate.calledWith('pause')).to.be.true
+    await wrapper.find('#workflow-stop-button').trigger('click')
+    expect($workflowService.mutate.calledWith('stop')).to.be.true
+  })
 })

From da5a97d051cf8db2e662197362d617329d9efc9b Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Tue, 12 May 2026 14:02:27 +0100
Subject: [PATCH 10/17] Test coverage

---
 .../unit/components/cylc/toolbar.vue.spec.js  | 91 ++-----------------
 1 file changed, 8 insertions(+), 83 deletions(-)

diff --git a/tests/unit/components/cylc/toolbar.vue.spec.js b/tests/unit/components/cylc/toolbar.vue.spec.js
index fed48bca9..1639c17a6 100644
--- a/tests/unit/components/cylc/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/toolbar.vue.spec.js
@@ -29,17 +29,23 @@ import { useDrawer } from '@/utils/toolbar'
 import { vuetifyOptions } from '@/plugins/vuetify'
 import { mdiViewList, mdiBackburger } from '@mdi/js'
 
-const $workflowService = sinon.createStubInstance(WorkflowService)
 const vuetify = createVuetify(vuetifyOptions)
 
 describe('Toolbar component', () => {
   let store
+  let $workflowService
   const { drawer: drawerState } = useDrawer()
 
   beforeEach(() => {
     store = createStore(storeOptions)
-    store.commit('user/SET_USER', { owner: 'rincewind', permissions: ['play', 'pause', 'resume', 'stop'] })
+    store.commit('user/SET_USER', {
+      owner: 'rincewind',
+      permissions: ['play', 'pause', 'resume', 'stop', 'setGraphWindowExtent'],
+      initials: 'RW',
+      username: 'rincewind',
+    })
     drawerState.value = false
+    $workflowService = sinon.createStubInstance(WorkflowService)
     store.state.workflows.workflows = [
       {
         id: 'user/id',
@@ -128,85 +134,4 @@ describe('Toolbar component', () => {
     await wrapper.vm.$nextTick()
     expect(wrapper.find('.c-toolbar-title').text()).to.include("I'm your pain when you can't feel")
   })
-
-  it('shows user menu', async () => {
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: { $workflowService },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map(),
-        workflowName: 'strewth',
-      },
-    })
-    await wrapper.find('.v-avatar').trigger('click')
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('.v-card').text()).to.include('rincewind')
-    expect(wrapper.find('a[href="/user-profile"]').exists()).to.be.true
-  })
-
-  it('shows add view menu', async () => {
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: {
-          $workflowService,
-          $route: { name: 'Workspace' }
-        },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map([['testView', { icon: 'mdi-help' }]]),
-        workflowName: 'strewth',
-      },
-    })
-    await wrapper.find('.add-view').trigger('click')
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('#toolbar-add-testView-view').exists()).to.be.true
-  })
-
-  it('shows workflow info tooltip', async () => {
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: { $workflowService },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map(),
-        workflowName: 'strewth',
-      },
-    })
-    store.state.workflows.cylcTree = { $index: { 'strewth/strewth': { id: 'strewth/strewth', node: { owner: 'rincewind', host: 'localhost', cylcVersion: '8.0.0', runMode: 'live', status: 'running' } } } }
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('#info-icon').exists()).to.be.true
-  })
-
-  it('interacts with workflow controls', async () => {
-    $workflowService.mutate.resolves([{ status: 'SUCCEEDED' }])
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: { $workflowService },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map(),
-        workflowName: 'strewth',
-      },
-    })
-    store.state.workflows.cylcTree = { $index: { 'strewth/strewth': { id: 'strewth/strewth', node: { status: 'stopped' } } } }
-    await wrapper.vm.$nextTick()
-    await wrapper.find('#workflow-play-button').trigger('click')
-    expect($workflowService.mutate.calledWith('play')).to.be.true
-
-    store.state.workflows.cylcTree = { $index: { 'strewth/strewth': { id: 'strewth/strewth', node: { status: 'running' } } } }
-    await wrapper.vm.$nextTick()
-    await wrapper.find('#workflow-play-pause-button').trigger('click')
-    expect($workflowService.mutate.calledWith('pause')).to.be.true
-    await wrapper.find('#workflow-stop-button').trigger('click')
-    expect($workflowService.mutate.calledWith('stop')).to.be.true
-  })
 })

From ddf452a3a027234b2428b78422dfe3ad1435a309 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 13 May 2026 15:24:18 +0100
Subject: [PATCH 11/17] Restore deleted comments

---
 src/components/cylc/Toolbar.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/cylc/Toolbar.vue b/src/components/cylc/Toolbar.vue
index 7a4d3c9d8..c1cb286f7 100644
--- a/src/components/cylc/Toolbar.vue
+++ b/src/components/cylc/Toolbar.vue
@@ -381,6 +381,7 @@ export default {
 
   data: () => ({
     expecting: {
+      // store state from mutations in order to compute the "enabled" attrs
       play: null,
       paused: null,
       stop: null
@@ -440,8 +441,12 @@ export default {
       return ret
     },
     enabled () {
+      // object holding the states of controls that are supposed to be enabled
+      // NOTE: this is a temporary solution until we are able to subscribe to
+      // mutations to tell when they have completed
       return {
         playToggle: (
+          // the play button (for the play from stopped scenario)
           this.user.permissions.includes('play') &&
           this.isStopped &&
           (
@@ -450,6 +455,7 @@ export default {
           )
         ),
         pauseToggle: (
+          // the play/pause button
           (
             (this.isPaused && this.user.permissions.includes('resume')) ||
             (!this.isPaused && this.user.permissions.includes('pause'))
@@ -463,6 +469,7 @@ export default {
           )
         ),
         stopToggle: (
+          // the stop button
           this.user.permissions.includes('stop') &&
           !this.isStopped &&
           (
@@ -474,6 +481,7 @@ export default {
     },
     nWindow: {
       get () {
+        // the graph window distance reported by the scheduler
         return this.currentWorkflow?.node?.nEdgeDistance ?? 1
       },
       async set (val) {
@@ -489,6 +497,7 @@ export default {
   },
 
   watch: {
+    // reset the "expecting" state markers when the workflow state changes
     isRunning () {
       this.expecting.play = null
     },
@@ -498,6 +507,7 @@ export default {
     isStopped () {
       this.expecting.stop = null
     },
+    // reset the "expecting" state markers when we switch workflow
     currentWorkflow () {
       this.expecting = {
         play: null,

From 1829c24f32dbc6c19c2bfa4da7c1844e7dfa5a0b Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 13 May 2026 17:51:06 +0100
Subject: [PATCH 12/17] Show user avatar button in toolbar at all times

---
 src/components/cylc/Toolbar.vue | 156 ++++++++++++++++----------------
 1 file changed, 79 insertions(+), 77 deletions(-)

diff --git a/src/components/cylc/Toolbar.vue b/src/components/cylc/Toolbar.vue
index c1cb286f7..fe600c536 100644
--- a/src/components/cylc/Toolbar.vue
+++ b/src/components/cylc/Toolbar.vue
@@ -161,89 +161,91 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </span>
       </span>
 
-      <v-spacer class="mx-0" />
+    </template>
 
-      <v-btn
-        v-if="$route.name === 'Workspace'"
-        class="add-view"
-        color="primary"
-        data-cy="add-view-btn"
-      >
-        <v-icon class="icon">
-          {{ icons.add }}
-        </v-icon>
-        <span class="label">
-          {{ $t('Toolbar.addView') }}
-        </span>
+    <v-spacer class="mx-0" />
 
-        <v-menu
-          activator="parent"
-          location="bottom"
-        >
-          <v-list>
-            <v-list-item
-              v-for="[name, view] in views"
-              :id="`toolbar-add-${name}-view`"
-              :key="name"
-              @click="eventBus.emit('add-view', { name })"
+    <v-btn
+      v-if="currentWorkflow && $route.name === 'Workspace'"
+      class="add-view"
+      color="primary"
+      data-cy="add-view-btn"
+    >
+      <v-icon class="icon">
+        {{ icons.add }}
+      </v-icon>
+      <span class="label">
+        {{ $t('Toolbar.addView') }}
+      </span>
+
+      <v-menu
+        activator="parent"
+        location="bottom"
+      >
+        <v-list>
+          <v-list-item
+            v-for="[name, view] in views"
+            :id="`toolbar-add-${name}-view`"
+            :key="name"
+            @click="eventBus.emit('add-view', { name })"
+          >
+            <template #prepend>
+              <v-icon>{{ view.icon }}</v-icon>
+            </template>
+            <v-list-item-title>{{ startCase(name) }}</v-list-item-title>
+          </v-list-item>
+          <v-divider/>
+          <v-card-actions class="mb-n2">
+            <v-btn
+              @click="eventBus.emit('reset-workspace-layout')"
+              :prepend-icon="icons.mdiArrowULeftTop"
+              class="flex-grow-1"
+              data-cy="reset-layout-btn"
             >
-              <template #prepend>
-                <v-icon>{{ view.icon }}</v-icon>
-              </template>
-              <v-list-item-title>{{ startCase(name) }}</v-list-item-title>
-            </v-list-item>
-            <v-divider/>
-            <v-card-actions class="mb-n2">
-              <v-btn
-                @click="eventBus.emit('reset-workspace-layout')"
-                :prepend-icon="icons.mdiArrowULeftTop"
-                class="flex-grow-1"
-                data-cy="reset-layout-btn"
-              >
-                Reset layout
-              </v-btn>
-            </v-card-actions>
-          </v-list>
-        </v-menu>
-      </v-btn>
-      <v-btn
-        icon
+              Reset layout
+            </v-btn>
+          </v-card-actions>
+        </v-list>
+      </v-menu>
+    </v-btn>
+
+    <v-btn
+      icon
+      size="small"
+    >
+      <v-avatar
+        color="primary"
         size="small"
       >
-        <v-avatar
-          color="primary"
-          size="small"
-        >
-          <div v-if="user.initials">
-            {{ user.initials }}
-          </div>
-          <v-icon
-            v-else
-            :icon="icons.mdiAccount"
-          />
-        </v-avatar>
-        <v-menu activator="parent">
-          <v-card :title="user.username">
-            <v-card-text>
-              <div class="d-flex flex-column row-gap-2">
-                <v-defaults-provider
-                  :defaults="{
-                    VBtn: { variant: 'tonal', spaced: true },
-                  }"
+        <div v-if="user.initials">
+          {{ user.initials }}
+        </div>
+        <v-icon
+          v-else
+          :icon="icons.mdiAccount"
+        />
+      </v-avatar>
+      <v-menu activator="parent">
+        <v-card :title="user.username">
+          <v-card-text>
+            <div class="d-flex flex-column row-gap-2">
+              <v-defaults-provider
+                :defaults="{
+                  VBtn: { variant: 'tonal', spaced: true },
+                }"
+              >
+                <v-btn
+                  to="/user-profile"
+                  :prepend-icon="icons.mdiCog"
                 >
-                  <v-btn
-                    to="/user-profile"
-                    :prepend-icon="icons.mdiCog"
-                  >
-                    Settings
-                  </v-btn>
-                </v-defaults-provider>
-              </div>
-            </v-card-text>
-          </v-card>
-        </v-menu>
-      </v-btn>
-    </template>
+                  Settings
+                </v-btn>
+              </v-defaults-provider>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-menu>
+    </v-btn>
   </v-toolbar>
 </template>
 

From a767fe77877844c72c90227f7aa992443f0ddcd8 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 13 May 2026 17:52:51 +0100
Subject: [PATCH 13/17] Remove title banner for user profile page

Duplicates toolbar title
---
 src/views/UserProfile.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
index bfa308cfc..7cde1d4be 100644
--- a/src/views/UserProfile.vue
+++ b/src/views/UserProfile.vue
@@ -19,13 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <v-container fluid class="c-user-profile">
     <v-row class="wrap">
       <v-col cols="12">
-        <v-alert
-          :icon="$options.icons.settings"
-          prominent
-          color="grey-lighten-3"
-        >
-          <h3 class="text-h5">{{ $t('UserProfile.title') }}</h3>
-        </v-alert>
         <v-form>
           <v-defaults-provider :defaults="$options.vuetifyDefaults">
             <v-container py-0>

From 77e9905654e5776e0975b0162f91f9ce186c8bfa Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Thu, 14 May 2026 15:22:24 +0100
Subject: [PATCH 14/17] Display proper title in app toolbar

---
 src/router/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index 8381a14cf..485c1fdd4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -90,7 +90,7 @@ router.beforeEach(async (to, from) => {
   document.title = getPageTitle(to)
 
   // Set toolbar title:
-  let title = to.name
+  let title = to.meta.title || to.name
   if (to.meta.toolbar) {
     // When a workflow is being displayed, we set the title to a
     // different value.

From e8922ea934d71b4cb38105fd6546d44b29b9fce9 Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Mon, 18 May 2026 15:22:34 +0100
Subject: [PATCH 15/17] Fix unit tests

---
 tests/e2e/specs/toolbar.cy.js                 | 19 ++++++++++++++++++-
 .../unit/components/cylc/toolbar.vue.spec.js  |  5 -----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/tests/e2e/specs/toolbar.cy.js b/tests/e2e/specs/toolbar.cy.js
index 331de5afe..476a69708 100644
--- a/tests/e2e/specs/toolbar.cy.js
+++ b/tests/e2e/specs/toolbar.cy.js
@@ -25,12 +25,29 @@ describe('Toolbar component', () => {
       .get('#core-app-bar')
       .should('exist')
   })
-  it('Is NOT displayed when looking at the dashboard', () => {
+  it('Is NOT displayed when using a standalone view', () => {
     cy.visit('/#/')
     cy
       .get('#core-app-bar')
       .should('not.exist')
   })
+  it('displays workflow controls for existing workflows and hidden otherwise', () => {
+    // Start at the dashboard
+    cy.visit('/#/')
+    // The toolbar workflow controls are not visible on the dashboard
+    cy.get('#core-app-bar').should('exist')
+    cy.get('.c-workflow-controls').should('not.exist')
+
+    // Navigate to an existing workflow
+    cy.visit('/#/workspace/one')
+    cy.get('#core-app-bar').should('be.visible')
+    cy.get('.c-workflow-controls').should('be.visible')
+
+    // Navigate to a non-existent workflow
+    cy.visit('/#/workspace/non-exist')
+    cy.get('#core-app-bar').should('be.visible')
+    cy.get('.c-workflow-controls').should('not.exist')
+  })
   it('Contains an avatar displaying user icon', () => {
     cy.visit('/#/workspace/one')
     cy
diff --git a/tests/unit/components/cylc/toolbar.vue.spec.js b/tests/unit/components/cylc/toolbar.vue.spec.js
index 1639c17a6..fdbd04caf 100644
--- a/tests/unit/components/cylc/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/toolbar.vue.spec.js
@@ -112,11 +112,6 @@ describe('Toolbar component', () => {
     // Burger button and title should still be present
     expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
     expect(wrapper.find('.c-toolbar-title').exists()).to.equal(true)
-    // Workflow-specific controls should not be present
-    expect(wrapper.find('#workflow-play-button').exists()).to.equal(false)
-    expect(wrapper.find('#workflow-stop-button').exists()).to.equal(false)
-    expect(wrapper.find('#workflow-mutate-button').exists()).to.equal(false)
-    expect(wrapper.find('.c-workflow-controls').exists()).to.equal(false)
   })
 
   it('displays the title from the store', async () => {

From ff535efc1e2329ac9fd682efbed35b88ca526ddc Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Tue, 19 May 2026 10:26:52 +0100
Subject: [PATCH 16/17] Code review changes

---
 tests/e2e/specs/toolbar.cy.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/specs/toolbar.cy.js b/tests/e2e/specs/toolbar.cy.js
index 476a69708..bfcffa566 100644
--- a/tests/e2e/specs/toolbar.cy.js
+++ b/tests/e2e/specs/toolbar.cy.js
@@ -26,7 +26,9 @@ describe('Toolbar component', () => {
       .should('exist')
   })
   it('Is NOT displayed when using a standalone view', () => {
-    cy.visit('/#/')
+    cy.visit('/#/gantt/one')
+    // forces cypress to wait for the view to load
+    cy.get('.apexcharts-svg').should('be.visible')
     cy
       .get('#core-app-bar')
       .should('not.exist')

From 7d04832599cca4df213b6a3367f9b6ac9d2b28de Mon Sep 17 00:00:00 2001
From: Christopher Bennett <christopher.bennett@metoffice.gov.uk>
Date: Tue, 19 May 2026 10:28:28 +0100
Subject: [PATCH 17/17] Update tests/unit/components/cylc/toolbar.vue.spec.js

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
---
 tests/unit/components/cylc/toolbar.vue.spec.js | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/tests/unit/components/cylc/toolbar.vue.spec.js b/tests/unit/components/cylc/toolbar.vue.spec.js
index fdbd04caf..3c015fe82 100644
--- a/tests/unit/components/cylc/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/toolbar.vue.spec.js
@@ -97,23 +97,6 @@ describe('Toolbar component', () => {
     expect(drawerState.value).to.equal(false)
   })
 
-  it('does not show workflow controls without workflowName', async () => {
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: { $workflowService },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map(),
-      },
-    })
-    await wrapper.vm.$nextTick()
-    // Burger button and title should still be present
-    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
-    expect(wrapper.find('.c-toolbar-title').exists()).to.equal(true)
-  })
-
   it('displays the title from the store', async () => {
     store.commit('app/setTitle', "I'm your pain when you can't feel")
     const wrapper = mount(Toolbar, {