diff --git a/src/components/cylc/cylcObject/Menu.vue b/src/components/cylc/cylcObject/Menu.vue
index 8c6f2c293c..a62b6e75a9 100644
--- a/src/components/cylc/cylcObject/Menu.vue
+++ b/src/components/cylc/cylcObject/Menu.vue
@@ -279,7 +279,7 @@ export default {
           {
             name: 'Log',
             initialOptions: {
-              relativeID: this.node.tokens.relativeID
+              relativeID: this.node.tokens.relativeID || null
             }
           }
         )
diff --git a/src/components/cylc/workflow/Lumino.vue b/src/components/cylc/workflow/Lumino.vue
index 65151f188b..61cea3d875 100644
--- a/src/components/cylc/workflow/Lumino.vue
+++ b/src/components/cylc/workflow/Lumino.vue
@@ -19,14 +19,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Lumino box panel gets inserted here -->
   </div>
   <template
-    v-for="[id, { name, initialOptions }] in views"
+    v-for="[id, { name }] in views"
     :key="id"
   >
     <Teleport :to="`#${id}`">
       <component
         :is="props.allViews.get(name).component"
         :workflow-name="workflowName"
-        :initial-options="initialOptions"
+        v-model:initial-options="views.get(id).initialOptions"
         class="h-100"
       />
     </Teleport>
@@ -62,7 +62,7 @@ import { useDefaultView } from '@/views/views'
  * Mitt event for adding a view to the workspace.
  * @typedef {Object} AddViewEvent
  * @property {string} name - the view to add
- * @property {Object=} initialOptions - prop passed to the view component
+ * @property {Record<string,*>} initialOptions - prop passed to the view component
  */
 
 const $eventBus = inject('eventBus')
@@ -135,16 +135,16 @@ onBeforeUnmount(() => {
 /**
  * Create a widget and add it to the dock.
  *
- * @param {AddViewEvent} view
+ * @param {AddViewEvent} event
  * @param {boolean} onTop
  */
-const addView = (view, onTop = true) => {
+const addView = ({ name, initialOptions = {} }, onTop = true) => {
   const id = uniqueId('widget')
-  const luminoWidget = new LuminoWidget(id, startCase(view.name), /* closable */ true)
+  const luminoWidget = new LuminoWidget(id, startCase(name), /* closable */ true)
   dockPanel.addWidget(luminoWidget, { mode: 'tab-after' })
   // give time for Lumino's widget DOM element to be created
   nextTick(() => {
-    views.value.set(id, view)
+    views.value.set(id, { name, initialOptions })
     addWidgetEventListeners(id)
     if (onTop) {
       dockPanel.selectWidget(luminoWidget)
diff --git a/src/views/Log.vue b/src/views/Log.vue
index 39ff793073..ea89a51a59 100644
--- a/src/views/Log.vue
+++ b/src/views/Log.vue
@@ -56,7 +56,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="jobLog"
           data-cy="job-id-input"
           class="flex-grow-1 flex-column"
-          v-model="relativeID"
+          :model-value="relativeID"
+          @update:modelValue="debouncedUpdateRelativeID"
           placeholder="cycle/task/job"
           clearable
         />
@@ -143,6 +144,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
+import { ref } from 'vue'
+import { usePrevious } from '@vueuse/core'
 import {
   mdiClockOutline,
   mdiFileAlertOutline,
@@ -153,6 +156,11 @@ import {
 import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
+import {
+  initialOptions,
+  updateInitialOptionsEvent,
+  useInitialOptions
+} from '@/views/initialOptions'
 import LogComponent from '@/components/cylc/log/Log.vue'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import { Tokens } from '@/utils/uid'
@@ -227,6 +235,8 @@ export const getDefaultFile = (logFiles) => {
   return null // rather than undefined
 }
 
+const getFileLabel = (id) => id ? `No log files for ${id}` : 'Enter a task/job ID'
+
 class Results {
   constructor () {
     /** @type {string[]} */
@@ -287,34 +297,59 @@ export default {
     }
   },
 
+  emits: [
+    updateInitialOptionsEvent,
+  ],
+
   props: {
-    initialOptions: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    }
+    initialOptions,
   },
 
-  data () {
+  setup (props, { emit }) {
+    /**
+     * The task/job ID input.
+     * @type {import('vue').Ref<string>}
+     */
+    const relativeID = useInitialOptions('relativeID', { props, emit })
+
+    const previousRelativeID = usePrevious(relativeID)
+
+    /**
+     * The selected log file name.
+     * @type {import('vue').Ref<string>}
+     */
+    const file = useInitialOptions('file', { props, emit })
+
+    /** Set the value of relativeID at most every 0.5 seconds, used for text input */
+    const debouncedUpdateRelativeID = debounce((value) => {
+      relativeID.value = value
+    }, 500)
+
     return {
       // the log subscription query
-      query: null,
+      query: ref(null),
       // list of log files for the selected workflow/task/job
-      logFiles: [],
+      logFiles: ref([]),
       // the log file as a list of lines
-      results: new Results(),
-      // the task/job ID input
-      relativeID: null,
-      // the selected log file name
-      file: null,
+      results: ref(new Results()),
+      relativeID,
+      previousRelativeID,
+      file,
       // the label for the file input
-      fileLabel: 'Select File',
+      fileLabel: ref('Select File'),
       // turns the file input off (e.g. when the file list is being loaded)
-      fileDisabled: false,
-      // toggle between viewing workflow logs (0) and job logs (1)
-      jobLog: 0, // default to displaying workflow logs
+      fileDisabled: ref(false),
+      // toggle between viewing workflow logs (0) and job logs (1).
+      // default to displaying workflow logs unless initial task/job ID is provided.
+      jobLog: ref(relativeID.value == null ? 0 : 1),
       // toggle timestamps in log files
-      timestamps: true,
+      timestamps: ref(true),
+      debouncedUpdateRelativeID,
+    }
+  },
+
+  data () {
+    return {
       controlGroups: [
         {
           title: 'Log',
@@ -338,19 +373,23 @@ export default {
     }
   },
 
-  created () {
-    // set the ID/file if specified in initialOptions
-    if (this.initialOptions?.tokens?.task) {
-      this.relativeID = this.initialOptions.tokens.relativeID
-    }
-    if (this.initialOptions?.file) {
-      this.file = this.initialOptions.file
-    }
-  },
-
-  async mounted () {
-    // load the log file list and subscribe on startup
-    await this.updateLogFileList()
+  mounted () {
+    // Watch id & file together:
+    this.$watch(
+      () => ({
+        id: this.id ?? undefined, // (treat null as undefined)
+        file: this.file ?? undefined
+      }),
+      async ({ id }, old) => {
+        // update the query when the id or file change
+        this.updateQuery()
+        // refresh the file list when the id changes
+        if (id !== old?.id) {
+          await this.updateLogFileList()
+        }
+      },
+      { immediate: true }
+    )
   },
 
   computed: {
@@ -422,7 +461,7 @@ export default {
       } catch (err) {
         // the query failed
         console.warn(err)
-        this.fileLabel = this.id ? `No log files for ${this.id}` : 'Enter a task/job ID'
+        this.fileLabel = getFileLabel(this.id)
         this.fileDisabled = true
         return
       }
@@ -445,7 +484,7 @@ export default {
         this.fileDisabled = false
         this.logFiles = logFiles
       } else {
-        this.fileLabel = `No log files for ${this.id}`
+        this.fileLabel = getFileLabel(this.id)
         this.fileDisabled = true
         this.logFiles = []
       }
@@ -453,23 +492,12 @@ export default {
   },
 
   watch: {
-    id: debounce(
-      // refresh the file list and update the query when the id changes
-      async function () {
-        await this.updateLogFileList()
-        this.updateQuery()
-      },
-      // only re-run this once every 0.5 seconds
-      500
-    ),
-    jobLog () {
+    jobLog (val, old) {
       // reset the filename when the log mode changes
       this.file = null
+      // go back to last chosen job if we are switching back to job logs
+      this.relativeID = val ? this.previousRelativeID : null
     },
-    file () {
-      // update the query when the file changes
-      this.updateQuery()
-    }
   },
 
   // Misc options
diff --git a/src/views/initialOptions.js b/src/views/initialOptions.js
new file mode 100644
index 0000000000..59198a37f1
--- /dev/null
+++ b/src/views/initialOptions.js
@@ -0,0 +1,62 @@
+/**
+ * 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/>.
+ */
+
+/* The `initialOptions` prop is used by views to specify any options such as
+filters, inputs, toggles etc. that can be loaded when creating the view.
+This is used for saving the view state along with the tab layout. */
+
+import { ref, watch } from 'vue'
+
+/**
+ * @callback emitter
+ * @param {updateInitialOptionsEvent} event
+ * @param {...any} args
+ */
+
+/** initialOptions prop */
+export const initialOptions = {
+  type: Object,
+  required: false,
+  default: () => ({})
+}
+
+export const updateInitialOptionsEvent = 'update:initialOptions'
+
+/**
+ * Return a ref that is bound to a sub-property of the initialOptions prop for a view.
+ *
+ * When the ref's value changes, the initialOptions prop is updated with the new value.
+ *
+ * @param {string} name
+ * @param {{
+ *   props: { initialOptions: Record<string,T> },
+ *   emit: emitter,
+ * }} param1
+ * @returns {import('vue').Ref<T>}
+ */
+export const useInitialOptions = (name, { props, emit }) => {
+  const _ref = ref(props.initialOptions[name])
+  watch(
+    _ref,
+    (val, old) => emit(
+      updateInitialOptionsEvent,
+      { ...props.initialOptions, [name]: val }
+    ),
+    { immediate: true, deep: true }
+  )
+  return _ref
+}
diff --git a/tests/e2e/specs/log.cy.js b/tests/e2e/specs/log.cy.js
index a38a4b53aa..fcb23a4006 100644
--- a/tests/e2e/specs/log.cy.js
+++ b/tests/e2e/specs/log.cy.js
@@ -134,3 +134,52 @@ describe('Log View', () => {
       .should('be.visible')
   })
 })
+
+describe('Log command in menu', () => {
+  it('opens a log view tab', () => {
+    cy.visit('/#/workspace/one')
+      .get('.lm-DockPanel-widget')
+      .should('have.length', 1)
+      .get('.c-tree .c-job:first')
+      .click()
+      .get('.c-mutation').contains('Log')
+      .click()
+      .get('.lm-DockPanel-widget')
+      .should('have.length', 2)
+      .get('[data-cy=log-viewer]')
+      .contains(jobLogLines.join(''))
+  })
+})
+
+describe('Log view in workspace', () => {
+  it('remembers job ID and file when switching between workflows', () => {
+    const jobFile = 'job.out'
+    const jobID = '4/avocet'
+    cy.visit('/#/workspace/one')
+      .get('#workflow-mutate-button')
+      .click()
+      .get('.c-mutation').contains('Log')
+      .click()
+      .get('[data-cy=job-toggle]')
+      .click()
+      .get('.c-log [data-cy=job-id-input] input').as('jobIDInput')
+      .type(jobID)
+      .get('[data-cy=log-viewer]')
+      .should('be.visible')
+      .get('.c-log [data-cy=file-input] input').as('fileInput')
+      .invoke('val')
+      .should('eq', jobFile)
+    // Navigate away
+    cy.visit('/#/workspace/two')
+      .get('.c-log')
+      .should('not.exist')
+    // Navigate back
+    cy.visit('/#/workspace/one')
+      .get('@jobIDInput')
+      .invoke('val')
+      .should('eq', jobID)
+      .get('@fileInput')
+      .invoke('val')
+      .should('eq', jobFile)
+  })
+})
diff --git a/tests/unit/views/initialOptions.spec.js b/tests/unit/views/initialOptions.spec.js
new file mode 100644
index 0000000000..36519e3168
--- /dev/null
+++ b/tests/unit/views/initialOptions.spec.js
@@ -0,0 +1,51 @@
+/**
+ * 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 { nextTick } from 'vue'
+import { vi } from 'vitest'
+import {
+  updateInitialOptionsEvent,
+  useInitialOptions
+} from '@/views/initialOptions'
+
+describe('useInitialOptions', () => {
+  it('updates the initialOptions prop when the ref changes', async () => {
+    const emit = vi.fn()
+    const initialOptions = {
+      name: 'Isaac Clarke',
+      ship: 'USG Ishimura',
+    }
+    const props = { initialOptions }
+    const name = useInitialOptions('name', { props, emit })
+    // Should be called immediately
+    expect(emit).toHaveBeenCalledWith(
+      updateInitialOptionsEvent,
+      initialOptions
+    )
+    emit.mockClear()
+    // Change the value of the ref
+    name.value = 'Nicole Brennan'
+    await nextTick()
+    expect(emit).toHaveBeenCalledWith(
+      updateInitialOptionsEvent,
+      {
+        name: 'Nicole Brennan',
+        ship: 'USG Ishimura',
+      }
+    )
+  })
+})
diff --git a/tests/unit/views/log.vue.spec.js b/tests/unit/views/log.vue.spec.js
index fdae3178d0..6e3f7506b3 100644
--- a/tests/unit/views/log.vue.spec.js
+++ b/tests/unit/views/log.vue.spec.js
@@ -24,7 +24,6 @@ import sinon from 'sinon'
 import Log, { getDefaultFile } from '@/views/Log.vue'
 import WorkflowService from '@/services/workflow.service'
 import User from '@/model/User.model'
-import { Tokens } from '@/utils/uid'
 
 describe('getDefaultFile()', () => {
   it.each([
@@ -89,7 +88,6 @@ describe('Log view', () => {
     props: {
       workflowName,
       initialOptions: {
-        tokens: new Tokens(workflowID),
         file: initialFile,
       },
     },
@@ -103,6 +101,15 @@ describe('Log view', () => {
       new User('cylc', [], new Date(), true, 'localhost', owner)
     )
     $workflowService = sinon.createStubInstance(WorkflowService)
+    $workflowService.apolloClient = {
+      query: () => ({
+        data: {
+          logFiles: {
+            files: ['a.log', 'b.log']
+          }
+        }
+      }),
+    }
   })
 
   it('issues the subscription', async () => {
@@ -119,17 +126,17 @@ describe('Log view', () => {
     // old file & log lines should be wiped
     expect(wrapper.vm.file).toBe(null)
     expect(wrapper.vm.results.lines).toEqual([])
+    expect(wrapper.vm.id).toBe(null)
     // should have unsubscribed
     expect(wrapper.vm.$workflowService.unsubscribe.calledOnce).toBe(true)
   })
 
   it('does not issue subscription for incomplete task ID', async () => {
-    const wrapper = mountFunction({
-      data: () => ({
-        jobLog: 1,
-        relativeID: '2000', // cycle point only is invalid
-      })
-    })
+    const wrapper = mountFunction()
+    wrapper.vm.jobLog = 1
+    await nextTick()
+    wrapper.vm.relativeID = '2000' // cycle point only is invalid
+    await nextTick()
     expect(wrapper.vm.id).toBe(null)
     expect(wrapper.vm.query).toBe(null)
     // type in complete task ID
@@ -144,4 +151,26 @@ describe('Log view', () => {
       file: 'job.out',
     })
   })
+
+  it('goes back to previous job when toggling job->workflow->job', async () => {
+    const relativeID = '2000/angua'
+    const expectedJobID = `${workflowID}//${relativeID}`
+    const wrapper = mountFunction({
+      props: {
+        workflowName,
+        initialOptions: {
+          file: 'job.out',
+          relativeID,
+        },
+      },
+    })
+    expect(wrapper.vm.jobLog).toEqual(1)
+    expect(wrapper.vm.id).toEqual(expectedJobID)
+    wrapper.vm.jobLog = 0
+    await nextTick()
+    expect(wrapper.vm.id).toEqual(workflowID)
+    wrapper.vm.jobLog = 1
+    await nextTick()
+    expect(wrapper.vm.id).toEqual(expectedJobID)
+  })
 })