diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
index e2b8def400c1..f87f34b33991 100644
--- a/client/src/components/Common/ButtonSpinner.vue
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -11,12 +11,14 @@ interface Props {
     wait?: boolean;
     tooltip?: string;
     disabled?: boolean;
+    size?: string;
 }
 
 withDefaults(defineProps<Props>(), {
     wait: false,
     tooltip: undefined,
     disabled: false,
+    size: "md",
 });
 </script>
 
@@ -25,6 +27,7 @@ withDefaults(defineProps<Props>(), {
         v-if="wait"
         v-b-tooltip.hover.bottom
         disabled
+        :size="size"
         variant="info"
         title="Please Wait..."
         class="d-flex flex-nowrap align-items-center text-nowrap">
@@ -38,6 +41,7 @@ withDefaults(defineProps<Props>(), {
         class="d-flex flex-nowrap align-items-center text-nowrap"
         :title="tooltip"
         :disabled="disabled"
+        :size="size"
         @click="$emit('onClick')">
         <FontAwesomeIcon :icon="faPlay" class="mr-2" />
         {{ title }}
diff --git a/client/src/components/Grid/GridInvocation.vue b/client/src/components/Grid/GridInvocation.vue
index 847127cfa0b7..65aed67b73f7 100644
--- a/client/src/components/Grid/GridInvocation.vue
+++ b/client/src/components/Grid/GridInvocation.vue
@@ -109,7 +109,7 @@ function refreshTable() {
             :extra-props="extraProps"
             :embedded="forStoredWorkflow || forHistory || forBatch">
             <template v-slot:expanded="{ rowData }">
-                <span class="position-absolute ml-4" :data-invocation-id="rowData.id">
+                <span class="mb-2" :data-invocation-id="rowData.id">
                     <small>
                         <b>Last updated: <UtcDate :date="rowData.update_time" mode="elapsed" />; Invocation ID:</b>
                     </small>
diff --git a/client/src/components/History/SwitchToHistoryLink.vue b/client/src/components/History/SwitchToHistoryLink.vue
index 047e9ec93fb3..13916b4e9f3f 100644
--- a/client/src/components/History/SwitchToHistoryLink.vue
+++ b/client/src/components/History/SwitchToHistoryLink.vue
@@ -86,7 +86,7 @@ function viewHistoryInNewTab(history: HistorySummary) {
 <template>
     <div>
         <LoadingSpan v-if="!history" />
-        <div v-else class="history-link">
+        <div v-else class="history-link" data-description="switch to history link">
             <BLink
                 v-b-tooltip.hover.top.noninteractive.html
                 data-description="switch to history link"
diff --git a/client/src/components/JobMetrics/JobMetrics.test.js b/client/src/components/JobMetrics/JobMetrics.test.js
index b8e934489e9d..529bf66a7663 100644
--- a/client/src/components/JobMetrics/JobMetrics.test.js
+++ b/client/src/components/JobMetrics/JobMetrics.test.js
@@ -6,6 +6,8 @@ import { getLocalVue } from "tests/jest/helpers";
 
 import JobMetrics from "./JobMetrics";
 
+const NO_METRICS_MESSAGE = "No metrics available for this job.";
+
 // Ignore all axios calls, data is mocked locally -- just say "OKAY!"
 jest.mock("axios", () => ({
     get: async () => {
@@ -26,7 +28,8 @@ describe("JobMetrics/JobMetrics.vue", () => {
         });
 
         await wrapper.vm.$nextTick();
-        expect(wrapper.find("div").exists()).toBe(false);
+        const alert = wrapper.find(".alert-info");
+        expect(alert.text()).toBe(NO_METRICS_MESSAGE);
     });
 
     it("should group plugins by type", async () => {
diff --git a/client/src/components/JobMetrics/JobMetrics.vue b/client/src/components/JobMetrics/JobMetrics.vue
index 469dc3062e73..78dc294c002c 100644
--- a/client/src/components/JobMetrics/JobMetrics.vue
+++ b/client/src/components/JobMetrics/JobMetrics.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
 import { computed, ref, unref, watch } from "vue";
 
 import { useJobMetricsStore } from "@/stores/jobMetricsStore";
@@ -217,4 +218,5 @@ const estimatedServerInstance = computed(() => {
             :cores-allocated="coresAllocated"
             :memory-allocated-in-mebibyte="memoryAllocatedInMebibyte" />
     </div>
+    <BAlert v-else variant="info" show> No metrics available for this job. </BAlert>
 </template>
diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
index 9e22d80b65a5..2240a3d8c315 100644
--- a/client/src/components/Workflow/Invocation/InvocationScrollList.vue
+++ b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -96,12 +96,10 @@ const route = useRoute();
 const router = useRouter();
 
 function cardClicked(invocation: WorkflowInvocation) {
-    let path = `/workflows/invocations/${invocation.id}`;
     if (props.inPanel) {
-        path += "?from_panel=true";
         emit("invocation-clicked");
     }
-    router.push(path);
+    router.push(`/workflows/invocations/${invocation.id}`);
 }
 
 function scrollToTop() {
diff --git a/client/src/components/Workflow/List/WorkflowIndicators.vue b/client/src/components/Workflow/List/WorkflowIndicators.vue
index 92ccac96c4ae..10f841277c80 100644
--- a/client/src/components/Workflow/List/WorkflowIndicators.vue
+++ b/client/src/components/Workflow/List/WorkflowIndicators.vue
@@ -17,6 +17,7 @@ library.add(faFileImport, faGlobe, faShieldAlt, faUsers, faUser);
 interface Props {
     workflow: any;
     publishedView: boolean;
+    noEditTime?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -118,7 +119,7 @@ function onViewUserPublished() {
             <FontAwesomeIcon :icon="faFileImport" fixed-width @click="onCopyLink" />
         </BButton>
 
-        <span class="mr-1">
+        <span v-if="!noEditTime" class="mr-1">
             <small>
                 edited
                 <UtcDate :date="workflow.update_time" mode="elapsed" />
@@ -136,8 +137,9 @@ function onViewUserPublished() {
         </BBadge>
 
         <BBadge
-            v-if="publishedView"
+            v-if="publishedView && workflow.published"
             v-b-tooltip.noninteractive.hover
+            data-description="published owner badge"
             class="outline-badge cursor-pointer mx-1"
             :title="publishedTitle"
             @click="onViewUserPublished">
diff --git a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
index feb1bb1b2ac2..802ebac376a4 100644
--- a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
@@ -1,56 +1,59 @@
 <template>
     <div>
-        <div v-if="isConfigLoaded" class="h4 clearfix mb-3">
+        <div v-if="isConfigLoaded">
             <BAlert v-if="!canRunOnHistory" variant="warning" show>
                 <span v-localize>
                     The workflow cannot run because the current history is immutable. Please select a different history
                     or send the results to a new one using the run settings ⚙️
                 </span>
             </BAlert>
-            <b>Workflow: {{ model.name }}</b> <i>(version: {{ model.runData.version + 1 }})</i>
-            <ButtonSpinner
-                id="run-workflow"
-                :wait="waitingForRequest"
-                :disabled="hasValidationErrors || !canRunOnHistory"
-                class="float-right"
-                title="Run Workflow"
-                @onClick="onExecute" />
-            <b-dropdown
-                v-if="showRuntimeSettings(currentUser)"
-                id="dropdown-form"
-                ref="dropdown"
-                class="workflow-run-settings float-right"
-                style="margin-right: 10px"
-                title="Workflow Run Settings"
-                no-caret>
-                <template v-slot:button-content>
-                    <span class="fa fa-cog" />
+            <WorkflowNavigationTitle
+                :workflow-id="model.runData.workflow_id"
+                :run-disabled="hasValidationErrors || !canRunOnHistory"
+                :run-waiting="waitingForRequest"
+                @on-execute="onExecute">
+                <template v-slot:workflow-run-actions>
+                    <b-dropdown
+                        v-if="showRuntimeSettings(currentUser)"
+                        id="dropdown-form"
+                        ref="dropdown"
+                        class="workflow-run-settings"
+                        title="Workflow Run Settings"
+                        size="sm"
+                        variant="link"
+                        no-caret>
+                        <template v-slot:button-content>
+                            <span class="fa fa-cog" />
+                        </template>
+                        <b-dropdown-form>
+                            <b-form-checkbox v-model="sendToNewHistory" class="workflow-run-settings-target">
+                                Send results to a new history
+                            </b-form-checkbox>
+                            <b-form-checkbox
+                                v-if="reuseAllowed(currentUser)"
+                                v-model="useCachedJobs"
+                                title="This may skip executing jobs that you have already run.">
+                                Attempt to re-use jobs with identical parameters?
+                            </b-form-checkbox>
+                            <b-form-checkbox
+                                v-if="isConfigLoaded && config.object_store_allows_id_selection"
+                                v-model="splitObjectStore">
+                                Send outputs and intermediate to different storage locations?
+                            </b-form-checkbox>
+                            <WorkflowStorageConfiguration
+                                v-if="isConfigLoaded && config.object_store_allows_id_selection"
+                                :split-object-store="splitObjectStore"
+                                :invocation-preferred-object-store-id="preferredObjectStoreId"
+                                :invocation-intermediate-preferred-object-store-id="preferredIntermediateObjectStoreId"
+                                @updated="onStorageUpdate">
+                            </WorkflowStorageConfiguration>
+                        </b-dropdown-form>
+                    </b-dropdown>
                 </template>
-                <b-dropdown-form>
-                    <b-form-checkbox v-model="sendToNewHistory" class="workflow-run-settings-target">
-                        Send results to a new history
-                    </b-form-checkbox>
-                    <b-form-checkbox
-                        v-if="reuseAllowed(currentUser)"
-                        v-model="useCachedJobs"
-                        title="This may skip executing jobs that you have already run.">
-                        Attempt to re-use jobs with identical parameters?
-                    </b-form-checkbox>
-                    <b-form-checkbox
-                        v-if="isConfigLoaded && config.object_store_allows_id_selection"
-                        v-model="splitObjectStore">
-                        Send outputs and intermediate to different storage locations?
-                    </b-form-checkbox>
-                    <WorkflowStorageConfiguration
-                        v-if="isConfigLoaded && config.object_store_allows_id_selection"
-                        :split-object-store="splitObjectStore"
-                        :invocation-preferred-object-store-id="preferredObjectStoreId"
-                        :invocation-intermediate-preferred-object-store-id="preferredIntermediateObjectStoreId"
-                        @updated="onStorageUpdate">
-                    </WorkflowStorageConfiguration>
-                </b-dropdown-form>
-            </b-dropdown>
+            </WorkflowNavigationTitle>
         </div>
+
+        <WorkflowAnnotation :workflow-id="model.runData.workflow_id" :history-id="model.historyId" show-details />
         <FormDisplay
             :inputs="formInputs"
             :allow-empty-value-on-required-input="true"
@@ -62,7 +65,6 @@
 </template>
 
 <script>
-import ButtonSpinner from "components/Common/ButtonSpinner";
 import FormDisplay from "components/Form/FormDisplay";
 import { allowCachedJobs } from "components/Tool/utilities";
 import { isWorkflowInput } from "components/Workflow/constants";
@@ -76,10 +78,14 @@ import { useUserStore } from "@/stores/userStore";
 import { invokeWorkflow } from "./services";
 import WorkflowStorageConfiguration from "./WorkflowStorageConfiguration";
 
+import WorkflowAnnotation from "../../Workflow/WorkflowAnnotation.vue";
+import WorkflowNavigationTitle from "../WorkflowNavigationTitle.vue";
+
 export default {
     components: {
-        ButtonSpinner,
         FormDisplay,
+        WorkflowAnnotation,
+        WorkflowNavigationTitle,
         WorkflowStorageConfiguration,
     },
     props: {
diff --git a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
index 13d9d6cb8b55..c51868e53705 100644
--- a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
@@ -33,7 +33,7 @@ const targetHistories = props.invocations.reduce((histories, invocation) => {
 }, [] as string[]);
 const wasNewHistoryTarget =
     props.invocations.length > 0 &&
-    props.invocations[0]?.history_id &&
+    !!props.invocations[0]?.history_id &&
     historyStore.currentHistoryId !== props.invocations[0].history_id;
 </script>
 
@@ -51,7 +51,7 @@ const wasNewHistoryTarget =
         <WorkflowInvocationState
             v-else-if="props.invocations.length === 1 && props.invocations[0]"
             :invocation-id="props.invocations[0].id"
-            :new-history-target="wasNewHistoryTarget ? props.invocations[0].history_id : undefined"
+            :new-history-target="wasNewHistoryTarget"
             is-full-page
             success />
         <div id="webhook-view"></div>
diff --git a/client/src/components/Workflow/WorkflowAnnotation.test.ts b/client/src/components/Workflow/WorkflowAnnotation.test.ts
new file mode 100644
index 000000000000..abb7a4f5c062
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowAnnotation.test.ts
@@ -0,0 +1,168 @@
+import { createTestingPinia } from "@pinia/testing";
+import { getFakeRegisteredUser } from "@tests/test-data";
+import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { getLocalVue } from "tests/jest/helpers";
+
+import { useServerMock } from "@/api/client/__mocks__";
+import { useHistoryStore } from "@/stores/historyStore";
+import { useUserStore } from "@/stores/userStore";
+
+import WorkflowAnnotation from "./WorkflowAnnotation.vue";
+
+// Constants
+const WORKFLOW_OWNER = "test-user";
+const OTHER_USER = "other-user";
+const WORKFLOW_UPDATE_TIME = "2023-01-01T00:00:00.000Z";
+const INVOCATION_TIME = "2024-01-01T00:00:00.000Z";
+const SAMPLE_WORKFLOW = {
+    id: "workflow-id",
+    name: "workflow-name",
+    owner: WORKFLOW_OWNER,
+    version: 1,
+    update_time: WORKFLOW_UPDATE_TIME,
+};
+const OTHER_USER_WORKFLOW_ID = "other-user-workflow-id";
+const SAMPLE_RUN_COUNT = 100;
+const TEST_HISTORY_ID = "test-history-id";
+const TEST_HISTORY = {
+    id: TEST_HISTORY_ID,
+    name: "fake-history-name",
+};
+
+const SELECTORS = {
+    RUN_COUNT: ".workflow-invocations-count",
+    INDICATORS_LINK: '[data-description="published owner badge"]',
+    SWITCH_TO_HISTORY_LINK: "[data-description='switch to history link']",
+    TIME_INFO: '[data-description="workflow annotation time info"]',
+    DATE: '[data-description="workflow annotation date"]',
+};
+
+// Mock the workflow store to return the sample workflow
+jest.mock("@/stores/workflowStore", () => {
+    const originalModule = jest.requireActual("@/stores/workflowStore");
+    return {
+        ...originalModule,
+        useWorkflowStore: () => ({
+            ...originalModule.useWorkflowStore(),
+            getStoredWorkflowByInstanceId: jest.fn().mockImplementation((id: string) => {
+                if (id === OTHER_USER_WORKFLOW_ID) {
+                    return { ...SAMPLE_WORKFLOW, id: OTHER_USER_WORKFLOW_ID, published: true };
+                }
+                return SAMPLE_WORKFLOW;
+            }),
+        }),
+    };
+});
+
+jest.mock("@/stores/historyStore"),
+    () => {
+        const originalModule = jest.requireActual("@/stores/historyStore");
+        return {
+            ...originalModule,
+            useHistoryStore: () => ({
+                ...originalModule.useHistoryStore(),
+                getHistoryById: jest.fn().mockImplementation(() => TEST_HISTORY),
+            }),
+        };
+    };
+
+const localVue = getLocalVue();
+const { server, http } = useServerMock();
+
+/**
+ * Mounts the WorkflowAnnotation component with props/stores adjusted given the parameters
+ * @param version The version of the component to mount (`run_form` or `invocation` view)
+ * @param ownsWorkflow Whether the user owns the workflow
+ * @returns The wrapper object
+ */
+async function mountWorkflowAnnotation(version: "run_form" | "invocation", ownsWorkflow = true) {
+    server.use(
+        http.get("/api/histories/{history_id}", ({ response }) => {
+            return response(200).json(TEST_HISTORY);
+        })
+    );
+    server.use(
+        http.get("/api/workflows/{workflow_id}/counts", ({ response }) => {
+            return response(200).json({ scheduled: SAMPLE_RUN_COUNT });
+        })
+    );
+
+    const wrapper = mount(WorkflowAnnotation as object, {
+        propsData: {
+            workflowId: ownsWorkflow ? SAMPLE_WORKFLOW.id : OTHER_USER_WORKFLOW_ID,
+            historyId: TEST_HISTORY_ID,
+            invocationUpdateTime: version === "invocation" ? INVOCATION_TIME : undefined,
+            showDetails: version === "run_form",
+        },
+        localVue,
+        pinia: createTestingPinia(),
+        stubs: {
+            FontAwesomeIcon: true,
+        },
+    });
+
+    const historyStore = useHistoryStore();
+    historyStore.setCurrentHistoryId(TEST_HISTORY_ID);
+
+    const userStore = useUserStore();
+    userStore.currentUser = getFakeRegisteredUser({
+        username: ownsWorkflow ? WORKFLOW_OWNER : OTHER_USER,
+    });
+
+    await flushPromises();
+
+    return { wrapper };
+}
+
+describe("WorkflowAnnotation renders", () => {
+    it("(always) the run count and history, not indicators if owned not published", async () => {
+        async function checkHasRunCount(version: "run_form" | "invocation") {
+            const { wrapper } = await mountWorkflowAnnotation(version);
+
+            const runCount = wrapper.find(SELECTORS.RUN_COUNT);
+            expect(runCount.text()).toContain("workflow runs:");
+            expect(runCount.text()).toContain(SAMPLE_RUN_COUNT.toString());
+
+            expect(wrapper.find(SELECTORS.SWITCH_TO_HISTORY_LINK).text()).toBe(TEST_HISTORY.name);
+
+            // Since this is the user's own workflow, the indicators link
+            // (to view all published workflows by the owner) should not be present
+            expect(wrapper.find(SELECTORS.INDICATORS_LINK).exists()).toBe(false);
+        }
+        await checkHasRunCount("run_form");
+        await checkHasRunCount("invocation");
+    });
+
+    it("workflow indicators if the user does not own the workflow", async () => {
+        // we assume it is another user's published workflow in this case
+
+        async function checkHasIndicators(version: "run_form" | "invocation") {
+            const { wrapper } = await mountWorkflowAnnotation(version, false);
+
+            const indicatorsLink = wrapper.find(SELECTORS.INDICATORS_LINK);
+            expect(indicatorsLink.text()).toBe(WORKFLOW_OWNER);
+            expect(indicatorsLink.attributes("title")).toContain(
+                `Click to view all published workflows by '${WORKFLOW_OWNER}'`
+            );
+        }
+        await checkHasIndicators("run_form");
+        await checkHasIndicators("invocation");
+    });
+
+    it("renders time since edit if run form view", async () => {
+        const { wrapper } = await mountWorkflowAnnotation("run_form");
+
+        const timeInfo = wrapper.find(SELECTORS.TIME_INFO);
+        expect(timeInfo.text()).toContain("edited");
+        expect(timeInfo.find(SELECTORS.DATE).attributes("title")).toBe(WORKFLOW_UPDATE_TIME);
+    });
+
+    it("renders time since invocation if invocation view", async () => {
+        const { wrapper } = await mountWorkflowAnnotation("invocation");
+
+        const timeInfo = wrapper.find(SELECTORS.TIME_INFO);
+        expect(timeInfo.text()).toContain("invoked");
+        expect(timeInfo.find(SELECTORS.DATE).attributes("title")).toBe(INVOCATION_TIME);
+    });
+});
diff --git a/client/src/components/Workflow/WorkflowAnnotation.vue b/client/src/components/Workflow/WorkflowAnnotation.vue
new file mode 100644
index 000000000000..28559a7313d8
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowAnnotation.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { faClock } from "@fortawesome/free-regular-svg-icons";
+import { faExclamation, faHdd } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBadge } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+
+import { isRegisteredUser } from "@/api";
+import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
+import { useHistoryStore } from "@/stores/historyStore";
+import { useUserStore } from "@/stores/userStore";
+
+import TextSummary from "../Common/TextSummary.vue";
+import SwitchToHistoryLink from "../History/SwitchToHistoryLink.vue";
+import StatelessTags from "../TagsMultiselect/StatelessTags.vue";
+import UtcDate from "../UtcDate.vue";
+import WorkflowInvocationsCount from "../Workflow/WorkflowInvocationsCount.vue";
+import WorkflowIndicators from "@/components/Workflow/List/WorkflowIndicators.vue";
+
+interface Props {
+    workflowId: string;
+    invocationUpdateTime?: string;
+    historyId: string;
+    showDetails?: boolean;
+    newHistoryTarget?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    invocationUpdateTime: undefined,
+});
+
+const { workflow } = useWorkflowInstance(props.workflowId);
+
+const { currentUser } = storeToRefs(useUserStore());
+const owned = computed(() => {
+    if (isRegisteredUser(currentUser.value) && workflow.value) {
+        return currentUser.value.username === workflow.value.owner;
+    } else {
+        return false;
+    }
+});
+
+const description = computed(() => {
+    if (workflow.value?.annotation) {
+        return workflow.value.annotation?.trim();
+    } else {
+        return null;
+    }
+});
+
+const timeElapsed = computed(() => {
+    return props.invocationUpdateTime || workflow.value?.update_time;
+});
+
+const workflowTags = computed(() => {
+    return workflow.value?.tags || [];
+});
+</script>
+
+<template>
+    <div v-if="workflow" class="pb-2 pl-2">
+        <div class="d-flex justify-content-between align-items-center">
+            <div>
+                <i v-if="timeElapsed" data-description="workflow annotation time info">
+                    <FontAwesomeIcon :icon="faClock" class="mr-1" />
+                    <span v-localize>
+                        {{ props.invocationUpdateTime ? "invoked" : "edited" }}
+                    </span>
+                    <UtcDate :date="timeElapsed" mode="elapsed" data-description="workflow annotation date" />
+                </i>
+                <span class="d-flex flex-gapx-1 align-items-center">
+                    <FontAwesomeIcon :icon="faHdd" />Input History:
+                    <SwitchToHistoryLink :history-id="props.historyId" />
+                    <BBadge
+                        v-if="props.newHistoryTarget && useHistoryStore().currentHistoryId !== props.historyId"
+                        v-b-tooltip.hover.noninteractive
+                        data-description="new history badge"
+                        role="button"
+                        variant="info"
+                        title="Results generated in a new history. Click on history name to switch to that history.">
+                        <FontAwesomeIcon :icon="faExclamation" />
+                    </BBadge>
+                </span>
+            </div>
+            <slot name="middle-content" />
+            <div class="d-flex align-items-center">
+                <div class="d-flex flex-column align-items-end mr-2">
+                    <WorkflowIndicators :workflow="workflow" published-view no-edit-time />
+                    <WorkflowInvocationsCount v-if="owned" class="mr-1" :workflow="workflow" />
+                </div>
+            </div>
+        </div>
+        <div v-if="props.showDetails">
+            <TextSummary v-if="description" class="my-1" :description="description" />
+            <StatelessTags v-if="workflowTags.length" :value="workflowTags" :disabled="true" />
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.test.ts b/client/src/components/Workflow/WorkflowNavigationTitle.test.ts
new file mode 100644
index 000000000000..75dfa51431a9
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.test.ts
@@ -0,0 +1,199 @@
+import { createTestingPinia } from "@pinia/testing";
+import { getFakeRegisteredUser } from "@tests/test-data";
+import { shallowMount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { getLocalVue } from "tests/jest/helpers";
+
+import sampleInvocation from "@/components/Workflow/test/json/invocation.json";
+import { useUserStore } from "@/stores/userStore";
+
+import WorkflowNavigationTitle from "./WorkflowNavigationTitle.vue";
+
+// Constants
+const WORKFLOW_OWNER = "test-user";
+const OTHER_USER = "other-user";
+const UNIMPORTABLE_WORKFLOW_ID = "invalid-workflow-id";
+const UNIMPORTABLE_WORKFLOW_INSTANCE_ID = "invalid-instance-id";
+const SAMPLE_WORKFLOW = {
+    id: "workflow-id",
+    name: "workflow-name",
+    owner: WORKFLOW_OWNER,
+    version: 1,
+};
+const IMPORT_ERROR_MESSAGE = "Failed to import workflow";
+
+const SELECTORS = {
+    WORKFLOW_HEADING: "[data-description='workflow heading']",
+    ACTIONS_BUTTON_GROUP: "bbuttongroup-stub",
+    EDIT_WORKFLOW_BUTTON: `bbutton-stub[title='<b>Edit</b><br>${SAMPLE_WORKFLOW.name}']`,
+    IMPORT_WORKFLOW_BUTTON: "[data-description='import workflow button']",
+    EXECUTE_WORKFLOW_BUTTON: "[data-description='execute workflow button']",
+    ROUTE_TO_RUN_BUTTON: "[data-description='route to workflow run button']",
+    ALERT_MESSAGE: "balert-stub",
+};
+
+// Mock the copyWorkflow function for importing a workflow
+jest.mock("components/Workflow/workflows.services", () => ({
+    copyWorkflow: jest.fn().mockImplementation((workflowId: string) => {
+        if (workflowId === UNIMPORTABLE_WORKFLOW_ID) {
+            throw new Error(IMPORT_ERROR_MESSAGE);
+        }
+        return SAMPLE_WORKFLOW;
+    }),
+}));
+
+// Mock the workflow store to return the sample workflow
+jest.mock("@/stores/workflowStore", () => {
+    const originalModule = jest.requireActual("@/stores/workflowStore");
+    return {
+        ...originalModule,
+        useWorkflowStore: () => ({
+            ...originalModule.useWorkflowStore(),
+            getStoredWorkflowByInstanceId: jest.fn().mockImplementation((instanceId: string) => {
+                if (instanceId === UNIMPORTABLE_WORKFLOW_INSTANCE_ID) {
+                    return { ...SAMPLE_WORKFLOW, id: UNIMPORTABLE_WORKFLOW_ID };
+                }
+                return SAMPLE_WORKFLOW;
+            }),
+        }),
+    };
+});
+
+const localVue = getLocalVue();
+
+/**
+ * Mounts the WorkflowNavigationTitle component with props/stores adjusted given the parameters
+ * @param version The version of the component to mount (`run_form` or `invocation` view)
+ * @param ownsWorkflow Whether the user owns the workflow associated with the invocation
+ * @param unimportableWorkflow Whether the workflow import should fail
+ * @returns The wrapper object, and the mockRouter object
+ */
+async function mountWorkflowNavigationTitle(
+    version: "run_form" | "invocation",
+    ownsWorkflow = true,
+    unimportableWorkflow = false
+) {
+    const mockRouter = {
+        push: jest.fn(),
+    };
+
+    let workflowId: string;
+    let invocation;
+    if (version === "invocation") {
+        workflowId = !unimportableWorkflow ? sampleInvocation.workflow_id : UNIMPORTABLE_WORKFLOW_INSTANCE_ID;
+        invocation = {
+            ...sampleInvocation,
+            workflow_id: workflowId,
+        };
+    } else {
+        workflowId = !unimportableWorkflow ? SAMPLE_WORKFLOW.id : UNIMPORTABLE_WORKFLOW_INSTANCE_ID;
+        invocation = undefined;
+    }
+
+    const wrapper = shallowMount(WorkflowNavigationTitle as object, {
+        propsData: {
+            invocation,
+            workflowId,
+        },
+        localVue,
+        mocks: {
+            $router: mockRouter,
+        },
+        pinia: createTestingPinia(),
+    });
+
+    const userStore = useUserStore();
+    userStore.currentUser = getFakeRegisteredUser({
+        username: ownsWorkflow ? WORKFLOW_OWNER : OTHER_USER,
+    });
+
+    return { wrapper, mockRouter };
+}
+
+describe("WorkflowNavigationTitle renders", () => {
+    it("the workflow name in header and run button in actions; invocation version", async () => {
+        const { wrapper } = await mountWorkflowNavigationTitle("invocation");
+
+        const heading = wrapper.find(SELECTORS.WORKFLOW_HEADING);
+        expect(heading.text()).toContain(`Invoked Workflow: ${SAMPLE_WORKFLOW.name}`);
+        expect(heading.text()).toContain(`(version: ${SAMPLE_WORKFLOW.version + 1})`);
+
+        const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
+        const runButton = actionsGroup.find(SELECTORS.ROUTE_TO_RUN_BUTTON);
+        expect(runButton.attributes("title")).toContain("Rerun");
+        expect(runButton.attributes("title")).toContain(SAMPLE_WORKFLOW.name);
+    });
+
+    it("the workflow name in header and run button in actions; run form version", async () => {
+        const { wrapper } = await mountWorkflowNavigationTitle("run_form");
+
+        const heading = wrapper.find(SELECTORS.WORKFLOW_HEADING);
+        expect(heading.text()).toContain(`Workflow: ${SAMPLE_WORKFLOW.name}`);
+        expect(heading.text()).toContain(`(version: ${SAMPLE_WORKFLOW.version + 1})`);
+
+        const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
+        const runButton = actionsGroup.find(SELECTORS.EXECUTE_WORKFLOW_BUTTON);
+        expect(runButton.attributes("title")).toContain("Run");
+    });
+
+    it("edit button if user owns the workflow", async () => {
+        async function findAndClickEditButton(version: "invocation" | "run_form") {
+            const { wrapper, mockRouter } = await mountWorkflowNavigationTitle(version);
+            const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
+
+            const editButton = actionsGroup.find(SELECTORS.EDIT_WORKFLOW_BUTTON);
+            await editButton.trigger("click");
+            await flushPromises();
+
+            expect(mockRouter.push).toHaveBeenCalledTimes(1);
+            expect(mockRouter.push).toHaveBeenCalledWith(
+                `/workflows/edit?id=${SAMPLE_WORKFLOW.id}&version=${SAMPLE_WORKFLOW.version}`
+            );
+        }
+        await findAndClickEditButton("invocation");
+        await findAndClickEditButton("run_form");
+    });
+
+    it("import button instead if user does not own the workflow", async () => {
+        async function findImportButton(version: "invocation" | "run_form") {
+            const { wrapper } = await mountWorkflowNavigationTitle(version, false);
+            const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
+            const importButton = actionsGroup.find(SELECTORS.IMPORT_WORKFLOW_BUTTON);
+            expect(importButton.exists()).toBe(true);
+        }
+        await findImportButton("invocation");
+        await findImportButton("run_form");
+    });
+});
+
+describe("Importing a workflow in WorkflowNavigationTitle", () => {
+    // We only need to test the `invocation` version because the button is the same in both versions
+
+    it("should show a confirmation dialog when the import is successful", async () => {
+        const { wrapper } = await mountWorkflowNavigationTitle("invocation", false);
+        const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
+        const importButton = actionsGroup.find(SELECTORS.IMPORT_WORKFLOW_BUTTON);
+
+        // Cannot `.trigger("click")` on `AsyncButton` because it is a stubbed custom component
+        await importButton.props().action();
+        await flushPromises();
+
+        const alert = wrapper.find(SELECTORS.ALERT_MESSAGE);
+        expect(alert.attributes("variant")).toBe("info");
+        expect(alert.text()).toContain(`Workflow ${SAMPLE_WORKFLOW.name} imported successfully`);
+    });
+
+    it("should show an error dialog when the import fails", async () => {
+        const { wrapper } = await mountWorkflowNavigationTitle("invocation", false, true);
+        const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
+        const importButton = actionsGroup.find(SELECTORS.IMPORT_WORKFLOW_BUTTON);
+
+        // Cannot `.trigger("click")` on `AsyncButton` because it is a stubbed custom component
+        await importButton.props().action();
+        await flushPromises();
+
+        const alert = wrapper.find(SELECTORS.ALERT_MESSAGE);
+        expect(alert.attributes("variant")).toBe("danger");
+        expect(alert.text()).toContain(IMPORT_ERROR_MESSAGE);
+    });
+});
diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
new file mode 100644
index 000000000000..4a5b9a413716
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { faEdit, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, ref } from "vue";
+import { RouterLink } from "vue-router";
+import { useRouter } from "vue-router/composables";
+
+import { isRegisteredUser } from "@/api";
+import type { WorkflowInvocationElementView } from "@/api/invocations";
+import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
+import { useUserStore } from "@/stores/userStore";
+import type { Workflow } from "@/stores/workflowStore";
+import localize from "@/utils/localization";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import { copyWorkflow } from "./workflows.services";
+
+import AsyncButton from "../Common/AsyncButton.vue";
+import ButtonSpinner from "../Common/ButtonSpinner.vue";
+import WorkflowRunButton from "./WorkflowRunButton.vue";
+
+const router = useRouter();
+
+interface Props {
+    invocation?: WorkflowInvocationElementView;
+    workflowId: string;
+    runDisabled?: boolean;
+    runWaiting?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    invocation: undefined,
+});
+
+const emit = defineEmits<{
+    (e: "on-execute"): void;
+}>();
+
+const { workflow, error } = useWorkflowInstance(props.workflowId);
+
+const { currentUser, isAnonymous } = storeToRefs(useUserStore());
+const owned = computed(() => {
+    if (isRegisteredUser(currentUser.value) && workflow.value) {
+        return currentUser.value.username === workflow.value.owner;
+    } else {
+        return false;
+    }
+});
+
+const importErrorMessage = ref<string | null>(null);
+const importedWorkflow = ref<Workflow | null>(null);
+const workflowImportedAttempted = ref(false);
+
+async function onImport() {
+    if (!workflow.value || !workflow.value.owner) {
+        return;
+    }
+    try {
+        const wf = await copyWorkflow(workflow.value.id, workflow.value.owner);
+        importedWorkflow.value = wf as unknown as Workflow;
+    } catch (error) {
+        importErrorMessage.value = errorMessageAsString(error, "Failed to import workflow");
+    } finally {
+        workflowImportedAttempted.value = true;
+    }
+}
+
+function getWorkflowName(): string {
+    return workflow.value?.name || "...";
+}
+
+const workflowImportTitle = computed(() => {
+    if (isAnonymous.value) {
+        return localize("Login to import this workflow");
+    } else if (workflowImportedAttempted.value) {
+        return localize("Workflow imported");
+    } else {
+        return localize("Import this workflow");
+    }
+});
+</script>
+
+<template>
+    <div>
+        <div>
+            <BAlert v-if="importErrorMessage" variant="danger" dismissible show @dismissed="importErrorMessage = null">
+                {{ importErrorMessage }}
+            </BAlert>
+            <BAlert v-else-if="importedWorkflow" variant="info" dismissible show @dismissed="importedWorkflow = null">
+                <span>
+                    Workflow <b>{{ importedWorkflow.name }}</b> imported successfully.
+                </span>
+                <RouterLink to="/workflows/list">Click here</RouterLink> to view the imported workflow in the workflows
+                list.
+            </BAlert>
+
+            <BAlert v-if="error" variant="danger" show>{{ error }}</BAlert>
+
+            <div v-if="workflow" class="ui-portlet-section">
+                <div class="d-flex portlet-header align-items-center">
+                    <div class="flex-grow-1" data-description="workflow heading">
+                        <div class="px-1">
+                            <FontAwesomeIcon :icon="faSitemap" />
+                            <b class="mx-1">
+                                {{ props.invocation ? "Invoked " : "" }}Workflow: {{ getWorkflowName() }}
+                            </b>
+                            <i>(version: {{ workflow.version + 1 }})</i>
+                        </div>
+                    </div>
+                    <BButtonGroup>
+                        <BButton
+                            v-if="owned && workflow"
+                            v-b-tooltip.hover.noninteractive.html
+                            size="sm"
+                            :title="
+                                !workflow.deleted
+                                    ? `<b>Edit</b><br>${getWorkflowName()}`
+                                    : 'This workflow has been deleted.'
+                            "
+                            variant="link"
+                            :disabled="workflow.deleted"
+                            @click="router.push(`/workflows/edit?id=${workflow.id}&version=${workflow.version}`)">
+                            <FontAwesomeIcon :icon="faEdit" fixed-width />
+                        </BButton>
+                        <AsyncButton
+                            v-else
+                            v-b-tooltip.hover.noninteractive
+                            data-description="import workflow button"
+                            size="sm"
+                            :disabled="isAnonymous || workflowImportedAttempted"
+                            :title="workflowImportTitle"
+                            :icon="faUpload"
+                            variant="link"
+                            :action="onImport">
+                        </AsyncButton>
+
+                        <slot name="workflow-run-actions" />
+
+                        <ButtonSpinner
+                            v-if="!props.invocation"
+                            id="run-workflow"
+                            data-description="execute workflow button"
+                            :wait="runWaiting"
+                            :disabled="runDisabled"
+                            size="sm"
+                            title="Run"
+                            @onClick="emit('on-execute')" />
+                        <WorkflowRunButton
+                            v-else
+                            :id="workflow.id"
+                            data-description="route to workflow run button"
+                            variant="link"
+                            :title="
+                                !workflow.deleted
+                                    ? `<b>Rerun</b><br>${getWorkflowName()}`
+                                    : 'This workflow has been deleted.'
+                            "
+                            :disabled="workflow.deleted"
+                            full
+                            :version="workflow.version" />
+                    </BButtonGroup>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/Workflow/WorkflowRunButton.test.ts b/client/src/components/Workflow/WorkflowRunButton.test.ts
index 11c02dc95549..0aec407666a4 100644
--- a/client/src/components/Workflow/WorkflowRunButton.test.ts
+++ b/client/src/components/Workflow/WorkflowRunButton.test.ts
@@ -8,9 +8,10 @@ import WorkflowRunButton from "./WorkflowRunButton.vue";
 const localVue = getLocalVue();
 
 const WORKFLOW_ID = generateRandomString();
+const WORKFLOW_VERSION = 1;
 const WORKFLOW_RUN_BUTTON_SELECTOR = `[data-workflow-run="${WORKFLOW_ID}"]`;
 
-async function mountWorkflowRunButton(props?: { id: string; full?: boolean }) {
+async function mountWorkflowRunButton(props?: { id: string; version: number; full?: boolean }) {
     const wrapper = mount(WorkflowRunButton as object, {
         propsData: { ...props },
         localVue,
@@ -20,19 +21,12 @@ async function mountWorkflowRunButton(props?: { id: string; full?: boolean }) {
 }
 
 describe("WorkflowRunButton.vue", () => {
-    it("should render button with icon", async () => {
-        const { wrapper } = await mountWorkflowRunButton({ id: WORKFLOW_ID });
+    it("should render button with icon and route", async () => {
+        const { wrapper } = await mountWorkflowRunButton({ id: WORKFLOW_ID, version: WORKFLOW_VERSION });
 
-        expect(wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).exists()).toBeTruthy();
-        expect(wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).attributes("title")).toBe("Run workflow");
-        expect(wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).text()).toBe("");
-    });
-
-    it("should redirect to workflow run page", async () => {
-        const { wrapper } = await mountWorkflowRunButton({ id: WORKFLOW_ID });
-
-        const runButton = await wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR);
-
-        expect(runButton.attributes("href")).toBe(`/workflows/run?id=${WORKFLOW_ID}`);
+        const button = wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR);
+        expect(button.attributes("title")).toBe("Run workflow");
+        expect(button.text()).toBe("");
+        expect(button.attributes("href")).toBe(`/workflows/run?id=${WORKFLOW_ID}&version=${WORKFLOW_VERSION}`);
     });
 });
diff --git a/client/src/components/Workflow/WorkflowRunButton.vue b/client/src/components/Workflow/WorkflowRunButton.vue
index 8d23de3c65c8..f5e26c981da9 100644
--- a/client/src/components/Workflow/WorkflowRunButton.vue
+++ b/client/src/components/Workflow/WorkflowRunButton.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPlay } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { computed } from "vue";
 
-library.add(faPlay);
-
 interface Props {
     id: string;
     full?: boolean;
@@ -14,9 +11,14 @@ interface Props {
     disabled?: boolean;
     version?: number;
     force?: boolean;
+    variant?: string;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    title: undefined,
+    version: undefined,
+    variant: "primary",
+});
 
 const runPath = computed(
     () => `/workflows/run?id=${props.id}${props.version !== undefined ? `&version=${props.version}` : ""}`
@@ -35,8 +37,9 @@ function forceRunPath() {
         v-b-tooltip.hover.top.html.noninteractive
         :title="title ?? 'Run workflow'"
         :data-workflow-run="id"
-        variant="primary"
+        :variant="variant"
         size="sm"
+        class="text-decoration-none"
         :disabled="disabled"
         :to="runPath"
         @click="forceRunPath">
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts
deleted file mode 100644
index eaabaad4015d..000000000000
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { createTestingPinia } from "@pinia/testing";
-import { getFakeRegisteredUser } from "@tests/test-data";
-import { shallowMount } from "@vue/test-utils";
-import flushPromises from "flush-promises";
-import { getLocalVue } from "tests/jest/helpers";
-
-import sampleInvocation from "@/components/Workflow/test/json/invocation.json";
-import { useUserStore } from "@/stores/userStore";
-
-import WorkflowInvocationHeader from "./WorkflowInvocationHeader.vue";
-
-// Constants
-const WORKFLOW_OWNER = "test-user";
-const OTHER_USER = "other-user";
-const UNIMPORTABLE_WORKFLOW_ID = "invalid-workflow-id";
-const UNIMPORTABLE_WORKFLOW_INSTANCE_ID = "invalid-instance-id";
-const SAMPLE_WORKFLOW = {
-    id: "workflow-id",
-    name: "workflow-name",
-    owner: WORKFLOW_OWNER,
-    version: 1,
-};
-const IMPORT_ERROR_MESSAGE = "Failed to import workflow";
-
-const SELECTORS = {
-    INVOKED_WORKFLOW_HEADING: "anonymous-stub[h1='true']",
-    RETURN_TO_INVOCATIONS_LIST_BUTTON: "bbutton-stub[title='Return to Invocations List']",
-    ACTIONS_BUTTON_GROUP: "bbuttongroup-stub",
-    EDIT_WORKFLOW_BUTTON: `bbutton-stub[title='<b>Edit</b><br>${SAMPLE_WORKFLOW.name}']`,
-    IMPORT_WORKFLOW_BUTTON: "anonymous-stub[title='Import this workflow']",
-    RUN_WORKFLOW_BUTTON: `anonymous-stub[id='${SAMPLE_WORKFLOW.id}']`,
-    ALERT_MESSAGE: "balert-stub",
-};
-
-// Mock the copyWorkflow function for importing a workflow
-jest.mock("components/Workflow/workflows.services", () => ({
-    copyWorkflow: jest.fn().mockImplementation((workflowId: string) => {
-        if (workflowId === UNIMPORTABLE_WORKFLOW_ID) {
-            throw new Error(IMPORT_ERROR_MESSAGE);
-        }
-        return SAMPLE_WORKFLOW;
-    }),
-}));
-
-// Mock the workflow store to return the sample workflow
-jest.mock("@/stores/workflowStore", () => {
-    const originalModule = jest.requireActual("@/stores/workflowStore");
-    return {
-        ...originalModule,
-        useWorkflowStore: () => ({
-            ...originalModule.useWorkflowStore(),
-            getStoredWorkflowByInstanceId: jest.fn().mockImplementation((instanceId: string) => {
-                if (instanceId === UNIMPORTABLE_WORKFLOW_INSTANCE_ID) {
-                    return { ...SAMPLE_WORKFLOW, id: UNIMPORTABLE_WORKFLOW_ID };
-                }
-                return SAMPLE_WORKFLOW;
-            }),
-        }),
-    };
-});
-
-const localVue = getLocalVue();
-
-/**
- * Mounts the WorkflowInvocationHeader component with props/stores adjusted given the parameters
- * @param ownsWorkflow Whether the user owns the workflow associated with the invocation
- * @param hasReturnBtn Whether the component should have a return to invocations list button
- * @param unimportableWorkflow Whether the workflow import should fail
- * @returns The wrapper object
- */
-async function mountWorkflowInvocationHeader(ownsWorkflow = true, hasReturnBtn = false, unimportableWorkflow = false) {
-    const wrapper = shallowMount(WorkflowInvocationHeader as object, {
-        propsData: {
-            invocation: {
-                ...sampleInvocation,
-                workflow_id: !unimportableWorkflow ? sampleInvocation.workflow_id : UNIMPORTABLE_WORKFLOW_INSTANCE_ID,
-            },
-            invocationState: "scheduled",
-            isFullPage: true,
-            jobStatesSummary: {},
-            fromPanel: !hasReturnBtn,
-            invocationSchedulingTerminal: true,
-            invocationAndJobTerminal: true,
-        },
-        localVue,
-        pinia: createTestingPinia(),
-    });
-
-    const userStore = useUserStore();
-    userStore.currentUser = getFakeRegisteredUser({
-        username: ownsWorkflow ? WORKFLOW_OWNER : OTHER_USER,
-    });
-
-    return { wrapper };
-}
-
-describe("WorkflowInvocationHeader renders", () => {
-    // Included both cases in one test because these are always constant
-    it("(always) the workflow name in header and run button in actions", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader();
-
-        const heading = wrapper.find(SELECTORS.INVOKED_WORKFLOW_HEADING);
-        expect(heading.text()).toBe(`Invoked Workflow: "${SAMPLE_WORKFLOW.name}"`);
-
-        const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
-        const runButton = actionsGroup.find(SELECTORS.RUN_WORKFLOW_BUTTON);
-        expect(runButton.attributes("title")).toContain(SAMPLE_WORKFLOW.name);
-    });
-
-    it("edit button if user owns the workflow", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader();
-        const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
-        const editButton = actionsGroup.find(SELECTORS.EDIT_WORKFLOW_BUTTON);
-        expect(editButton.attributes("to")).toBe(
-            `/workflows/edit?id=${SAMPLE_WORKFLOW.id}&version=${SAMPLE_WORKFLOW.version}`
-        );
-    });
-
-    it("import button instead if user does not own the workflow", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader(false);
-        const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
-        const importButton = actionsGroup.find(SELECTORS.IMPORT_WORKFLOW_BUTTON);
-        expect(importButton.exists()).toBe(true);
-    });
-});
-
-describe("Importing a workflow in WorkflowInvocationHeader", () => {
-    it("should show a confirmation dialog when the import is successful", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader(false);
-        const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
-        const importButton = actionsGroup.find(SELECTORS.IMPORT_WORKFLOW_BUTTON);
-
-        // Cannot `.trigger("click")` on `AsyncButton` because it is a stubbed custom component
-        await importButton.props().action();
-        await flushPromises();
-
-        const alert = wrapper.find(SELECTORS.ALERT_MESSAGE);
-        expect(alert.attributes("variant")).toBe("info");
-        expect(alert.text()).toContain(`Workflow ${SAMPLE_WORKFLOW.name} imported successfully`);
-    });
-
-    it("should show an error dialog when the import fails", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader(false, false, true);
-        const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
-        const importButton = actionsGroup.find(SELECTORS.IMPORT_WORKFLOW_BUTTON);
-
-        // Cannot `.trigger("click")` on `AsyncButton` because it is a stubbed custom component
-        await importButton.props().action();
-        await flushPromises();
-
-        const alert = wrapper.find(SELECTORS.ALERT_MESSAGE);
-        expect(alert.attributes("variant")).toBe("danger");
-        expect(alert.text()).toContain(IMPORT_ERROR_MESSAGE);
-    });
-});
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue
deleted file mode 100644
index 9009597e72ad..000000000000
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue
+++ /dev/null
@@ -1,286 +0,0 @@
-<script setup lang="ts">
-import { faClock } from "@fortawesome/free-regular-svg-icons";
-import { faArrowLeft, faEdit, faExclamation, faHdd, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BBadge, BButton, BButtonGroup } from "bootstrap-vue";
-import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
-import { RouterLink } from "vue-router";
-
-import { isRegisteredUser } from "@/api";
-import type { InvocationJobsSummary, InvocationStep, WorkflowInvocationElementView } from "@/api/invocations";
-import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
-import { useHistoryStore } from "@/stores/historyStore";
-import { useUserStore } from "@/stores/userStore";
-import type { Workflow } from "@/stores/workflowStore";
-import localize from "@/utils/localization";
-import { errorMessageAsString } from "@/utils/simple-error";
-
-import { copyWorkflow } from "../Workflow/workflows.services";
-import {
-    errorCount as jobStatesSummaryErrorCount,
-    jobCount as jobStatesSummaryJobCount,
-    numTerminal,
-    okCount as jobStatesSummaryOkCount,
-    runningCount as jobStatesSummaryRunningCount,
-} from "./util";
-
-import AsyncButton from "../Common/AsyncButton.vue";
-import Heading from "../Common/Heading.vue";
-import SwitchToHistoryLink from "../History/SwitchToHistoryLink.vue";
-import ProgressBar from "../ProgressBar.vue";
-import UtcDate from "../UtcDate.vue";
-import WorkflowInvocationsCount from "../Workflow/WorkflowInvocationsCount.vue";
-import WorkflowRunButton from "../Workflow/WorkflowRunButton.vue";
-
-interface Props {
-    isFullPage?: boolean;
-    invocation: WorkflowInvocationElementView;
-    invocationState: string;
-    fromPanel?: boolean;
-    jobStatesSummary: InvocationJobsSummary;
-    invocationSchedulingTerminal: boolean;
-    invocationAndJobTerminal: boolean;
-    success?: boolean;
-    newHistoryTarget?: string;
-}
-
-const props = defineProps<Props>();
-
-const { workflow } = useWorkflowInstance(props.invocation.workflow_id);
-
-const { currentUser, isAnonymous } = storeToRefs(useUserStore());
-const owned = computed(() => {
-    if (isRegisteredUser(currentUser.value) && workflow.value) {
-        return currentUser.value.username === workflow.value.owner;
-    } else {
-        return false;
-    }
-});
-
-const importErrorMessage = ref<string | null>(null);
-const importedWorkflow = ref<Workflow | null>(null);
-
-async function onImport() {
-    if (!workflow.value || !workflow.value.owner) {
-        return;
-    }
-    try {
-        const wf = await copyWorkflow(workflow.value.id, workflow.value.owner);
-        importedWorkflow.value = wf as unknown as Workflow;
-    } catch (error) {
-        importErrorMessage.value = errorMessageAsString(error, "Failed to import workflow");
-    }
-}
-
-function getWorkflowName(): string {
-    return workflow.value?.name || "...";
-}
-
-type StepStateType = { [state: string]: number };
-
-const stepStates = computed<StepStateType>(() => {
-    const stepStates: StepStateType = {};
-    const steps: InvocationStep[] = props.invocation.steps || [];
-    for (const step of steps) {
-        if (!step) {
-            continue;
-        }
-        // the API defined state here allowing null and undefined is odd...
-        const stepState: string = step.state || "unknown";
-        if (!stepStates[stepState]) {
-            stepStates[stepState] = 1;
-        } else {
-            stepStates[stepState] += 1;
-        }
-    }
-    return stepStates;
-});
-
-const stepCount = computed<number>(() => {
-    return props.invocation.steps.length || 0;
-});
-
-const stepStatesStr = computed<string>(() => {
-    return `${stepStates.value?.scheduled || 0} of ${stepCount.value} steps successfully scheduled.`;
-});
-
-const okCount = computed<number>(() => {
-    return jobStatesSummaryOkCount(props.jobStatesSummary);
-});
-
-const runningCount = computed<number>(() => {
-    return jobStatesSummaryRunningCount(props.jobStatesSummary);
-});
-
-const jobCount = computed<number>(() => {
-    return jobStatesSummaryJobCount(props.jobStatesSummary);
-});
-
-const errorCount = computed<number>(() => {
-    return jobStatesSummaryErrorCount(props.jobStatesSummary);
-});
-
-const newCount = computed<number>(() => {
-    return jobCount.value - okCount.value - runningCount.value - errorCount.value;
-});
-
-const jobStatesStr = computed(() => {
-    let jobStr = `${numTerminal(props.jobStatesSummary) || 0} of ${jobCount.value} jobs complete`;
-    if (!props.invocationSchedulingTerminal) {
-        jobStr += " (total number of jobs will change until all steps fully scheduled)";
-    }
-    return `${jobStr}.`;
-});
-</script>
-
-<template>
-    <div>
-        <BAlert v-if="importErrorMessage" variant="danger" dismissible show @dismissed="importErrorMessage = null">
-            {{ importErrorMessage }}
-        </BAlert>
-        <BAlert v-else-if="importedWorkflow" variant="info" dismissible show @dismissed="importedWorkflow = null">
-            <span>
-                Workflow <b>{{ importedWorkflow.name }}</b> imported successfully.
-            </span>
-            <RouterLink to="/workflows/list">Click here</RouterLink> to view the imported workflow in the workflows
-            list.
-        </BAlert>
-        <div v-if="!props.success && props.isFullPage" class="d-flex flex-gapx-1">
-            <Heading h1 separator inline truncate size="xl" class="flex-grow-1">
-                Invoked Workflow: "{{ getWorkflowName() }}"
-            </Heading>
-
-            <div v-if="!props.fromPanel">
-                <BButton
-                    v-b-tooltip.hover.noninteractive
-                    :title="localize('Return to Invocations List')"
-                    class="text-nowrap"
-                    size="sm"
-                    variant="outline-primary"
-                    to="/workflows/invocations">
-                    <FontAwesomeIcon :icon="faArrowLeft" class="mr-1" />
-                    <span v-localize>Invocations List</span>
-                </BButton>
-            </div>
-        </div>
-        <div class="py-2 pl-3 d-flex justify-content-between align-items-center flex-nowrap">
-            <div v-if="props.isFullPage">
-                <i>
-                    <FontAwesomeIcon :icon="faClock" class="mr-1" />invoked
-                    <UtcDate :date="props.invocation.update_time" mode="elapsed" />
-                </i>
-                <span class="d-flex flex-gapx-1 align-items-center">
-                    <FontAwesomeIcon :icon="faHdd" />History:
-                    <SwitchToHistoryLink :history-id="props.invocation.history_id" />
-                    <BBadge
-                        v-if="props.newHistoryTarget && useHistoryStore().currentHistoryId !== props.newHistoryTarget"
-                        v-b-tooltip.hover.noninteractive
-                        data-description="new history badge"
-                        role="button"
-                        variant="info"
-                        title="Results generated in a new history. Click on history name to switch to that history.">
-                        <FontAwesomeIcon :icon="faExclamation" />
-                    </BBadge>
-                </span>
-            </div>
-            <div class="progress-bars mx-1">
-                <ProgressBar
-                    v-if="!stepCount"
-                    note="Loading step state summary..."
-                    :loading="true"
-                    class="steps-progress" />
-                <ProgressBar
-                    v-else-if="invocationState == 'cancelled'"
-                    note="Invocation scheduling cancelled - expected jobs and outputs may not be generated."
-                    :error-count="1"
-                    class="steps-progress" />
-                <ProgressBar
-                    v-else-if="invocationState == 'failed'"
-                    note="Invocation scheduling failed - Galaxy administrator may have additional details in logs."
-                    :error-count="1"
-                    class="steps-progress" />
-                <ProgressBar
-                    v-else
-                    :note="stepStatesStr"
-                    :total="stepCount"
-                    :ok-count="stepStates.scheduled"
-                    :loading="!invocationSchedulingTerminal"
-                    class="steps-progress" />
-                <ProgressBar
-                    :note="jobStatesStr"
-                    :total="jobCount"
-                    :ok-count="okCount"
-                    :running-count="runningCount"
-                    :new-count="newCount"
-                    :error-count="errorCount"
-                    :loading="!invocationAndJobTerminal"
-                    class="jobs-progress" />
-            </div>
-            <div v-if="workflow" class="d-flex flex-gapx-1 align-items-center">
-                <div class="d-flex flex-column align-items-end mr-2">
-                    <span v-if="workflow.version !== undefined" class="mb-1">
-                        <FontAwesomeIcon :icon="faSitemap" />
-                        Workflow Version: {{ workflow.version + 1 }}
-                    </span>
-                    <WorkflowInvocationsCount class="float-right" :workflow="workflow" />
-                </div>
-                <BButtonGroup vertical>
-                    <BButton
-                        v-if="owned"
-                        v-b-tooltip.hover.noninteractive.html
-                        :title="
-                            !workflow.deleted
-                                ? `<b>Edit</b><br>${getWorkflowName()}`
-                                : 'This workflow has been deleted.'
-                        "
-                        size="sm"
-                        variant="secondary"
-                        :disabled="workflow.deleted"
-                        :to="`/workflows/edit?id=${workflow.id}&version=${workflow.version}`">
-                        <FontAwesomeIcon :icon="faEdit" />
-                        <span v-localize>Edit</span>
-                    </BButton>
-                    <AsyncButton
-                        v-else
-                        v-b-tooltip.hover.noninteractive
-                        size="sm"
-                        :disabled="isAnonymous"
-                        :title="localize('Import this workflow')"
-                        :icon="faUpload"
-                        variant="outline-primary"
-                        :action="onImport">
-                        <span v-localize>Import</span>
-                    </AsyncButton>
-                    <WorkflowRunButton
-                        :id="workflow.id || ''"
-                        :title="
-                            !workflow.deleted
-                                ? `<b>Rerun</b><br>${getWorkflowName()}`
-                                : 'This workflow has been deleted.'
-                        "
-                        :disabled="workflow.deleted"
-                        full
-                        force
-                        :version="workflow.version" />
-                </BButtonGroup>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.progress-bars {
-    // progress bar shrinks to fit divs on either side
-    flex-grow: 1;
-    flex-shrink: 1;
-    max-width: 50%;
-
-    .steps-progress,
-    .jobs-progress {
-        // truncate text in progress bars
-        white-space: nowrap;
-        overflow: hidden;
-    }
-}
-</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 33af070b8c88..299b1227a9a1 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BNavItem, BTab, BTabs } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 
-import { type InvocationJobsSummary, type WorkflowInvocationElementView } from "@/api/invocations";
+import { type InvocationJobsSummary, type InvocationStep, type WorkflowInvocationElementView } from "@/api/invocations";
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
 import { getRootFromIndexLink } from "@/onload";
 import { useInvocationStore } from "@/stores/invocationStore";
@@ -12,12 +12,21 @@ import { useWorkflowStore } from "@/stores/workflowStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import { cancelWorkflowScheduling } from "./services";
-import { isTerminal, jobCount, runningCount } from "./util";
+import {
+    errorCount as jobStatesSummaryErrorCount,
+    isTerminal,
+    jobCount as jobStatesSummaryJobCount,
+    numTerminal,
+    okCount as jobStatesSummaryOkCount,
+    runningCount as jobStatesSummaryRunningCount,
+} from "./util";
 
+import ProgressBar from "../ProgressBar.vue";
 import WorkflowInvocationSteps from "../Workflow/Invocation/Graph/WorkflowInvocationSteps.vue";
 import InvocationReport from "../Workflow/InvocationReport.vue";
+import WorkflowAnnotation from "../Workflow/WorkflowAnnotation.vue";
+import WorkflowNavigationTitle from "../Workflow/WorkflowNavigationTitle.vue";
 import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
-import WorkflowInvocationHeader from "./WorkflowInvocationHeader.vue";
 import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTabs.vue";
 import WorkflowInvocationMetrics from "./WorkflowInvocationMetrics.vue";
 import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
@@ -27,14 +36,12 @@ interface Props {
     invocationId: string;
     isSubworkflow?: boolean;
     isFullPage?: boolean;
-    fromPanel?: boolean;
     success?: boolean;
-    newHistoryTarget?: string;
+    newHistoryTarget?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     isSubworkflow: false,
-    newHistoryTarget: undefined,
 });
 
 const emit = defineEmits<{
@@ -69,10 +76,8 @@ const disabledReportTooltip = computed(() => {
     const state = invocationState.value;
     if (state != "scheduled") {
         return `This workflow is not currently scheduled. The current state is ${state}. Once the workflow is fully scheduled and jobs have complete this option will become available.`;
-    } else if (runningCount(jobStatesSummary.value) != 0) {
-        return `The workflow invocation still contains ${runningCount(
-            jobStatesSummary.value
-        )} running job(s). Once these jobs have completed this option will become available.`;
+    } else if (runningCount.value != 0) {
+        return `The workflow invocation still contains ${runningCount.value} running job(s). Once these jobs have completed this option will become available.`;
     } else {
         return "Steps for this workflow are still running. A report will be available once complete.";
     }
@@ -100,7 +105,7 @@ const invocationSchedulingTerminal = computed(() => {
     );
 });
 const jobStatesTerminal = computed(() => {
-    if (invocationSchedulingTerminal.value && jobCount(jobStatesSummary.value as InvocationJobsSummary) === 0) {
+    if (invocationSchedulingTerminal.value && jobCount.value === 0) {
         // no jobs for this invocation (think subworkflow or just inputs)
         return true;
     }
@@ -111,11 +116,63 @@ const jobStatesSummary = computed(() => {
     return (!jobsSummary ? null : jobsSummary) as InvocationJobsSummary;
 });
 const invocationStateSuccess = computed(() => {
-    return (
-        invocationState.value == "scheduled" &&
-        runningCount(jobStatesSummary.value) === 0 &&
-        invocationAndJobTerminal.value
-    );
+    return invocationState.value == "scheduled" && runningCount.value === 0 && invocationAndJobTerminal.value;
+});
+
+type StepStateType = { [state: string]: number };
+
+const stepStates = computed<StepStateType>(() => {
+    const stepStates: StepStateType = {};
+    const steps: InvocationStep[] = invocation.value?.steps || [];
+    for (const step of steps) {
+        if (!step) {
+            continue;
+        }
+        // the API defined state here allowing null and undefined is odd...
+        const stepState: string = step.state || "unknown";
+        if (!stepStates[stepState]) {
+            stepStates[stepState] = 1;
+        } else {
+            stepStates[stepState] += 1;
+        }
+    }
+    return stepStates;
+});
+
+const stepCount = computed<number>(() => {
+    return invocation.value?.steps.length || 0;
+});
+
+const stepStatesStr = computed<string>(() => {
+    return `${stepStates.value?.scheduled || 0} of ${stepCount.value} steps successfully scheduled.`;
+});
+
+const okCount = computed<number>(() => {
+    return jobStatesSummaryOkCount(jobStatesSummary.value);
+});
+
+const errorCount = computed<number>(() => {
+    return jobStatesSummaryErrorCount(jobStatesSummary.value);
+});
+
+const runningCount = computed<number>(() => {
+    return jobStatesSummaryRunningCount(jobStatesSummary.value);
+});
+
+const jobCount = computed<number>(() => {
+    return jobStatesSummaryJobCount(jobStatesSummary.value);
+});
+
+const newCount = computed<number>(() => {
+    return jobCount.value - okCount.value - runningCount.value - errorCount.value;
+});
+
+const jobStatesStr = computed(() => {
+    let jobStr = `${numTerminal(jobStatesSummary.value) || 0} of ${jobCount.value} jobs complete`;
+    if (!invocationSchedulingTerminal.value) {
+        jobStr += " (total number of jobs will change until all steps fully scheduled)";
+    }
+    return `${jobStr}.`;
 });
 
 const workflowStore = useWorkflowStore();
@@ -171,16 +228,52 @@ function cancelWorkflowSchedulingLocal() {
 
 <template>
     <div v-if="invocation" class="d-flex flex-column w-100" data-description="workflow invocation state">
-        <WorkflowInvocationHeader
-            :is-full-page="props.isFullPage"
+        <WorkflowNavigationTitle
+            v-if="props.isFullPage && !props.success"
             :invocation="invocation"
-            :invocation-state="invocationState"
-            :from-panel="props.fromPanel"
-            :job-states-summary="jobStatesSummary"
-            :success="props.success"
-            :new-history-target="props.newHistoryTarget"
-            :invocation-scheduling-terminal="invocationSchedulingTerminal"
-            :invocation-and-job-terminal="invocationAndJobTerminal" />
+            :workflow-id="invocation.workflow_id" />
+        <WorkflowAnnotation
+            v-if="props.isFullPage"
+            :workflow-id="invocation.workflow_id"
+            :invocation-update-time="invocation.update_time"
+            :history-id="invocation.history_id"
+            :new-history-target="props.newHistoryTarget">
+            <template v-slot:middle-content>
+                <div class="progress-bars mx-1">
+                    <ProgressBar
+                        v-if="!stepCount"
+                        note="Loading step state summary..."
+                        :loading="true"
+                        class="steps-progress" />
+                    <ProgressBar
+                        v-else-if="invocationState == 'cancelled'"
+                        note="Invocation scheduling cancelled - expected jobs and outputs may not be generated."
+                        :error-count="1"
+                        class="steps-progress" />
+                    <ProgressBar
+                        v-else-if="invocationState == 'failed'"
+                        note="Invocation scheduling failed - Galaxy administrator may have additional details in logs."
+                        :error-count="1"
+                        class="steps-progress" />
+                    <ProgressBar
+                        v-else
+                        :note="stepStatesStr"
+                        :total="stepCount"
+                        :ok-count="stepStates.scheduled"
+                        :loading="!invocationSchedulingTerminal"
+                        class="steps-progress" />
+                    <ProgressBar
+                        :note="jobStatesStr"
+                        :total="jobCount"
+                        :ok-count="okCount"
+                        :running-count="runningCount"
+                        :new-count="newCount"
+                        :error-count="errorCount"
+                        :loading="!invocationAndJobTerminal"
+                        class="jobs-progress" />
+                </div>
+            </template>
+        </WorkflowAnnotation>
         <BTabs
             ref="invocationTabs"
             class="mt-1 d-flex flex-column overflow-auto"
@@ -271,3 +364,19 @@ function cancelWorkflowSchedulingLocal() {
         <span v-localize>Invocation not found.</span>
     </BAlert>
 </template>
+
+<style scoped lang="scss">
+.progress-bars {
+    // progress bar shrinks to fit divs on either side
+    flex-grow: 1;
+    flex-shrink: 1;
+    max-width: 50%;
+
+    .steps-progress,
+    .jobs-progress {
+        // truncate text in progress bars
+        white-space: nowrap;
+        overflow: hidden;
+    }
+}
+</style>
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 011bb9ffd082..862a0622cc5f 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -656,7 +656,6 @@ export function getRouter(Galaxy) {
                         props: (route) => ({
                             invocationId: route.params.invocationId,
                             isFullPage: true,
-                            fromPanel: Boolean(route.query.from_panel),
                         }),
                     },
                     {
diff --git a/client/src/stores/workflowStore.ts b/client/src/stores/workflowStore.ts
index f1bc4a606c71..e68b62ab604f 100644
--- a/client/src/stores/workflowStore.ts
+++ b/client/src/stores/workflowStore.ts
@@ -15,6 +15,9 @@ export interface Workflow {
     version: number;
     deleted?: boolean;
     owner?: string;
+    annotation?: string;
+    tags?: string[];
+    update_time?: string;
 }
 
 export const useWorkflowStore = defineStore("workflowStore", () => {
diff --git a/lib/galaxy/managers/workflows.py b/lib/galaxy/managers/workflows.py
index 48be30372d67..20354c029198 100644
--- a/lib/galaxy/managers/workflows.py
+++ b/lib/galaxy/managers/workflows.py
@@ -1078,6 +1078,7 @@ def _workflow_to_dict_run(self, trans, stored, workflow, history=None):
             step_models.append(step_model)
         return {
             "id": trans.app.security.encode_id(stored.id),
+            "workflow_id": trans.app.security.encode_id(workflow.id),
             "history_id": trans.app.security.encode_id(history.id) if history else None,
             "name": stored.name,
             "owner": stored.user.username,