diff --git a/client/src/api/invocations.ts b/client/src/api/invocations.ts
index 88c34695fb8c..495a009c660c 100644
--- a/client/src/api/invocations.ts
+++ b/client/src/api/invocations.ts
@@ -13,10 +13,6 @@ export const invocationsFetcher = fetcher.path("/api/invocations").method("get")
 
 export type WorkflowInvocation = WorkflowInvocationElementView | WorkflowInvocationCollectionView;
 
-export interface WorkflowInvocationJobsSummary {
-    id: string;
-}
-
 export interface WorkflowInvocationStep {
     id: string;
 }
@@ -38,13 +34,11 @@ export async function fetchInvocationDetails(params: { id: string }): Promise<Ap
     } as ApiResponse<WorkflowInvocation>;
 }
 
-export async function fetchInvocationJobsSummary(params: {
-    id: string;
-}): Promise<ApiResponse<WorkflowInvocationJobsSummary>> {
+export async function fetchInvocationJobsSummary(params: { id: string }): Promise<ApiResponse<InvocationJobsSummary>> {
     const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}/jobs_summary`);
     return {
         data,
-    } as ApiResponse<WorkflowInvocationJobsSummary>;
+    } as ApiResponse<InvocationJobsSummary>;
 }
 
 export async function fetchInvocationStep(params: { id: string }): Promise<ApiResponse<WorkflowInvocationStep>> {
diff --git a/client/src/api/schema/schema.ts b/client/src/api/schema/schema.ts
index 8865c361e282..e4de5ba426b9 100644
--- a/client/src/api/schema/schema.ts
+++ b/client/src/api/schema/schema.ts
@@ -7880,10 +7880,7 @@ export interface components {
          * @enum {string}
          */
         InvocationState: "new" | "ready" | "scheduled" | "cancelled" | "cancelling" | "failed";
-        /**
-         * InvocationStep
-         * @description Information about workflow invocation step
-         */
+        /** InvocationStep */
         InvocationStep: {
             /**
              * Action
@@ -7895,8 +7892,6 @@ export interface components {
              * @example 0123456789ABCDEF
              */
             id: string;
-            /** Job Id */
-            job_id: string | null;
             /**
              * Jobs
              * @description Jobs associated with the workflow invocation step.
@@ -7934,7 +7929,7 @@ export interface components {
              * State of the invocation step
              * @description Describes where in the scheduling process the workflow invocation step is.
              */
-            state?: components["schemas"]["InvocationStepState"] | components["schemas"]["JobState"] | null;
+            state: components["schemas"]["InvocationStepState"];
             /** Subworkflow Invocation Id */
             subworkflow_invocation_id: string | null;
             /**
@@ -8795,6 +8790,82 @@ export interface components {
              */
             value: string;
         };
+        /** LegacyInvocationStep */
+        LegacyInvocationStep: {
+            /**
+             * Action
+             * @description Whether to take action on the invocation step.
+             */
+            action: boolean | null;
+            /**
+             * Invocation Step ID
+             * @example 0123456789ABCDEF
+             */
+            id: string;
+            /** Job Id */
+            job_id: string | null;
+            /**
+             * Jobs
+             * @description Jobs associated with the workflow invocation step.
+             * @default []
+             */
+            jobs?: components["schemas"]["JobBaseModel"][];
+            /**
+             * Model class
+             * @description The name of the database model class.
+             * @constant
+             */
+            model_class: "WorkflowInvocationStep";
+            /**
+             * Order index
+             * @description The index of the workflow step in the workflow.
+             */
+            order_index: number;
+            /**
+             * Output collections
+             * @description The dataset collection outputs of the workflow invocation step.
+             * @default {}
+             */
+            output_collections?: {
+                [key: string]: components["schemas"]["InvocationStepCollectionOutput"] | undefined;
+            };
+            /**
+             * Outputs
+             * @description The outputs of the workflow invocation step.
+             * @default {}
+             */
+            outputs?: {
+                [key: string]: components["schemas"]["InvocationStepOutput"] | undefined;
+            };
+            /**
+             * State of the invocation step
+             * @description Describes the job state corresponding to this invocation step.
+             */
+            state: components["schemas"]["JobState"] | null;
+            /** Subworkflow Invocation Id */
+            subworkflow_invocation_id: string | null;
+            /**
+             * Update Time
+             * @description The last time and date this item was updated.
+             */
+            update_time: string | null;
+            /**
+             * Workflow step ID
+             * @description The encoded ID of the workflow step associated with this workflow invocation step.
+             * @example 0123456789ABCDEF
+             */
+            workflow_step_id: string;
+            /**
+             * Step label
+             * @description The label of the workflow step
+             */
+            workflow_step_label?: string | null;
+            /**
+             * UUID
+             * @description Universal unique identifier of the workflow step.
+             */
+            workflow_step_uuid?: string | null;
+        };
         /** LegacyLibraryPermissionsPayload */
         LegacyLibraryPermissionsPayload: {
             /**
@@ -8822,6 +8893,110 @@ export interface components {
              */
             LIBRARY_MODIFY_in?: string[] | string | null;
         };
+        /** LegacyWorkflowInvocationElementView */
+        LegacyWorkflowInvocationElementView: {
+            /**
+             * Create Time
+             * Format: date-time
+             * @description The time and date this item was created.
+             */
+            create_time: string;
+            /**
+             * History ID
+             * @description The encoded ID of the history associated with the invocation.
+             * @example 0123456789ABCDEF
+             */
+            history_id: string;
+            /**
+             * ID
+             * @description The encoded ID of the workflow invocation.
+             * @example 0123456789ABCDEF
+             */
+            id: string;
+            /**
+             * Input step parameters
+             * @description Input step parameters of the workflow invocation.
+             */
+            input_step_parameters: {
+                [key: string]: components["schemas"]["InvocationInputParameter"] | undefined;
+            };
+            /**
+             * Inputs
+             * @description Input datasets/dataset collections of the workflow invocation.
+             */
+            inputs: {
+                [key: string]: components["schemas"]["InvocationInput"] | undefined;
+            };
+            /**
+             * Messages
+             * @description A list of messages about why the invocation did not succeed.
+             */
+            messages: (
+                | components["schemas"]["InvocationCancellationReviewFailedResponse"]
+                | components["schemas"]["InvocationCancellationHistoryDeletedResponse"]
+                | components["schemas"]["InvocationCancellationUserRequestResponse"]
+                | components["schemas"]["InvocationFailureDatasetFailedResponse"]
+                | components["schemas"]["InvocationFailureCollectionFailedResponse"]
+                | components["schemas"]["InvocationFailureJobFailedResponse"]
+                | components["schemas"]["InvocationFailureOutputNotFoundResponse"]
+                | components["schemas"]["InvocationFailureExpressionEvaluationFailedResponse"]
+                | components["schemas"]["InvocationFailureWhenNotBooleanResponse"]
+                | components["schemas"]["InvocationUnexpectedFailureResponse"]
+                | components["schemas"]["InvocationEvaluationWarningWorkflowOutputNotFoundResponse"]
+            )[];
+            /**
+             * Model class
+             * @description The name of the database model class.
+             * @constant
+             */
+            model_class: "WorkflowInvocation";
+            /**
+             * Output collections
+             * @description Output dataset collections of the workflow invocation.
+             */
+            output_collections: {
+                [key: string]: components["schemas"]["InvocationOutputCollection"] | undefined;
+            };
+            /**
+             * Output values
+             * @description Output values of the workflow invocation.
+             */
+            output_values: Record<string, never>;
+            /**
+             * Outputs
+             * @description Output datasets of the workflow invocation.
+             */
+            outputs: {
+                [key: string]: components["schemas"]["InvocationOutput"] | undefined;
+            };
+            /**
+             * Invocation state
+             * @description State of workflow invocation.
+             */
+            state: components["schemas"]["InvocationState"];
+            /**
+             * Steps
+             * @description Steps of the workflow invocation (legacy view using job state).
+             */
+            steps: components["schemas"]["LegacyInvocationStep"][];
+            /**
+             * Update Time
+             * Format: date-time
+             * @description The last time and date this item was updated.
+             */
+            update_time: string;
+            /**
+             * UUID
+             * @description Universal unique identifier of the workflow invocation.
+             */
+            uuid?: string | string | null;
+            /**
+             * Workflow ID
+             * @description The encoded Workflow ID associated with the invocation.
+             * @example 0123456789ABCDEF
+             */
+            workflow_id: string;
+        };
         /** LibraryAvailablePermissions */
         LibraryAvailablePermissions: {
             /**
@@ -12741,6 +12916,7 @@ export interface components {
         /** WorkflowInvocationResponse */
         WorkflowInvocationResponse:
             | components["schemas"]["WorkflowInvocationElementView"]
+            | components["schemas"]["LegacyWorkflowInvocationElementView"]
             | components["schemas"]["WorkflowInvocationCollectionView"];
         /** WorkflowInvocationStateSummary */
         WorkflowInvocationStateSummary: {
diff --git a/client/src/components/Workflow/InvocationsList.vue b/client/src/components/Workflow/InvocationsList.vue
index ce962d036388..95591d36f43d 100644
--- a/client/src/components/Workflow/InvocationsList.vue
+++ b/client/src/components/Workflow/InvocationsList.vue
@@ -65,7 +65,7 @@
                 <UtcDate :date="data.value" mode="elapsed" />
             </template>
             <template v-slot:cell(state)="data">
-                <HelpText :uri="`galaxy.invocations.states.${data.value}`" :text="data.value" />
+                <InvocationsListState :invocation-state="data.value" :invocation-id="data.item.id" />
             </template>
             <template v-slot:cell(execute)="data">
                 <WorkflowRunButton
@@ -83,7 +83,6 @@
 </template>
 
 <script>
-import HelpText from "components/Help/HelpText";
 import { invocationsProvider } from "components/providers/InvocationsProvider";
 import UtcDate from "components/UtcDate";
 import WorkflowInvocationState from "components/WorkflowInvocationState/WorkflowInvocationState";
@@ -95,11 +94,12 @@ import { useWorkflowStore } from "@/stores/workflowStore";
 import paginationMixin from "./paginationMixin";
 
 import WorkflowRunButton from "./WorkflowRunButton.vue";
+import InvocationsListState from "./InvocationsListState.vue";
 import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
 
 export default {
     components: {
-        HelpText,
+        InvocationsListState,
         UtcDate,
         WorkflowInvocationState,
         WorkflowRunButton,
diff --git a/client/src/components/Workflow/InvocationsListState.vue b/client/src/components/Workflow/InvocationsListState.vue
new file mode 100644
index 000000000000..0e9eecbc30ba
--- /dev/null
+++ b/client/src/components/Workflow/InvocationsListState.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import HelpText from "@/components/Help/HelpText.vue";
+
+interface Props {
+    invocationId: string;
+    invocationState: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <HelpText :uri="`galaxy.invocations.states.${invocationState}`" :text="invocationState" />
+</template>
diff --git a/client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue b/client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue
new file mode 100644
index 000000000000..82546ea39559
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { InvocationJobsSummary } from "@/api/invocations";
+
+import {
+    errorCount as jobStatesSummaryErrorCount,
+    jobCount as jobStatesSummaryJobCount,
+    numTerminal,
+    okCount as jobStatesSummaryOkCount,
+    runningCount as jobStatesSummaryRunningCount,
+} from "./util";
+
+import ProgressBar from "@/components/ProgressBar.vue";
+
+interface Props {
+    jobStatesSummary: InvocationJobsSummary;
+    invocationSchedulingTerminal: boolean;
+    invocationAndJobTerminal: boolean;
+}
+
+const props = defineProps<Props>();
+
+const jobCount = computed<number>(() => {
+    return jobStatesSummaryJobCount(props.jobStatesSummary);
+});
+
+const okCount = computed<number>(() => {
+    return jobStatesSummaryOkCount(props.jobStatesSummary);
+});
+
+const runningCount = computed<number>(() => {
+    return jobStatesSummaryRunningCount(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>
+    <ProgressBar
+        :note="jobStatesStr"
+        :total="jobCount"
+        :ok-count="okCount"
+        :running-count="runningCount"
+        :new-count="newCount"
+        :error-count="errorCount"
+        :loading="!invocationAndJobTerminal"
+        class="jobs-progress" />
+</template>
diff --git a/client/src/components/WorkflowInvocationState/InvocationStepsProgressBar.vue b/client/src/components/WorkflowInvocationState/InvocationStepsProgressBar.vue
new file mode 100644
index 000000000000..02e8a3406722
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/InvocationStepsProgressBar.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { InvocationStep, WorkflowInvocationElementView } from "@/api/invocations";
+
+import ProgressBar from "@/components/ProgressBar.vue";
+
+interface Props {
+    invocation?: WorkflowInvocationElementView;
+    invocationState: string;
+    invocationSchedulingTerminal: boolean;
+}
+
+const props = defineProps<Props>();
+
+const stepCount = computed<number>(() => {
+    return props.invocation?.steps.length || 0;
+});
+
+type StepStateType = { [state: string]: number };
+
+const stepStates = computed<StepStateType>(() => {
+    const stepStates: StepStateType = {};
+    if (!props.invocation) {
+        return {};
+    }
+    const steps: InvocationStep[] = props.invocation?.steps || [];
+    for (const step of steps) {
+        if (!step) {
+            continue;
+        }
+        const stepState: string = step.state;
+        if (!stepStates[stepState]) {
+            stepStates[stepState] = 1;
+        } else {
+            stepStates[stepState] += 1;
+        }
+    }
+    return stepStates;
+});
+
+const stepStatesStr = computed<string>(() => {
+    return `${stepStates.value?.scheduled || 0} of ${stepCount.value} steps successfully scheduled.`;
+});
+</script>
+
+<template>
+    <span>
+        <ProgressBar v-if="!invocation" 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" />
+    </span>
+</template>
diff --git a/client/src/components/WorkflowInvocationState/InvocationSummaryActionButtons.vue b/client/src/components/WorkflowInvocationState/InvocationSummaryActionButtons.vue
new file mode 100644
index 000000000000..c032c759fd28
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/InvocationSummaryActionButtons.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { getRootFromIndexLink } from "@/onload";
+
+interface Props {
+    invocationId: string;
+    invocationState: string;
+    invocationStateSuccess: boolean;
+    runningCount: number;
+}
+
+const props = defineProps<Props>();
+
+const reportTooltip = "View report for this workflow invocation";
+const generatePdfTooltip = "Generate PDF report for this workflow invocation";
+
+function getUrl(path: string): string {
+    return getRootFromIndexLink() + path;
+}
+
+const invocationLink = computed<string | null>(() => {
+    const id = props.invocationId;
+    if (id) {
+        return getUrl(`workflows/invocations/report?id=${id}`);
+    } else {
+        return null;
+    }
+});
+
+const invocationPdfLink = computed<string | null>(() => {
+    const id = props.invocationId;
+    if (id) {
+        return getUrl(`api/invocations/${id}/report.pdf`);
+    } else {
+        return null;
+    }
+});
+
+const disabledReportTooltip = computed(() => {
+    const state = props.invocationState;
+    const runCount = props.runningCount;
+    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 (runCount != 0) {
+        return `The workflow invocation still contains ${runCount} 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.";
+    }
+});
+</script>
+
+<template>
+    <div>
+        <span>
+            <b-button
+                v-b-tooltip.hover
+                :title="invocationStateSuccess ? reportTooltip : disabledReportTooltip"
+                :disabled="!invocationStateSuccess"
+                size="sm"
+                class="invocation-report-link"
+                :href="invocationLink">
+                View Report
+            </b-button>
+            <b-button
+                v-b-tooltip.hover
+                :title="invocationStateSuccess ? generatePdfTooltip : disabledReportTooltip"
+                :disabled="!invocationStateSuccess"
+                size="sm"
+                class="invocation-pdf-link"
+                :href="invocationPdfLink"
+                target="_blank">
+                Generate PDF
+            </b-button>
+        </span>
+    </div>
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 2b734f4bcfb2..3402041a670b 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,3 +1,57 @@
+<script setup lang="ts">
+import { computed, onMounted, onBeforeUnmount, toRef } from "vue";
+
+import { InvocationJobsSummary, WorkflowInvocationElementView } from "@/api/invocations";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+import { useInvocationStore } from "@/stores/invocationStore";
+
+import { cancelWorkflowScheduling } from "./services";
+import { isTerminal, jobCount } from "./util";
+import { useInvocationState } from "./usesInvocationState";
+
+import WorkflowInvocationDetails from "./WorkflowInvocationDetails.vue";
+import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
+import WorkflowInvocationSummary from "./WorkflowInvocationSummary.vue";
+
+interface Props {
+    invocationId: string;
+    index?: Number;
+}
+
+const props = defineProps<Props>();
+
+const {
+    invocation,
+    invocationState,
+    invocationSchedulingTerminal,
+    invocationAndJobTerminal,
+    jobStatesSummary,
+    monitorState,
+    clearStateMonitor,
+} = useInvocationState(toRef(props, "invocationId"));
+
+onMounted(monitorState);
+onBeforeUnmount(clearStateMonitor);
+
+function onError(e: unknown) {
+    console.error(e);
+}
+
+const emit = defineEmits<{
+    (e: "invocation-cancelled"): void;
+}>();
+
+function onCancel() {
+    emit("invocation-cancelled");
+}
+
+function handleCancelWorkflowScheduling() {
+    cancelWorkflowScheduling(props.invocationId).then(onCancel).catch(onError);
+}
+</script>
+
 <template>
     <b-tabs v-if="invocation">
         <b-tab title="Summary" active>
@@ -8,7 +62,7 @@
                 :invocation-and-job-terminal="invocationAndJobTerminal"
                 :invocation-scheduling-terminal="invocationSchedulingTerminal"
                 :job-states-summary="jobStatesSummary"
-                @invocation-cancelled="cancelWorkflowScheduling" />
+                @invocation-cancelled="handleCancelWorkflowScheduling" />
         </b-tab>
         <b-tab title="Details">
             <WorkflowInvocationDetails :invocation="invocation" />
@@ -29,107 +83,3 @@
         <LoadingSpan message="Loading invocation" />
     </b-alert>
 </template>
-<script>
-import LoadingSpan from "components/LoadingSpan";
-
-import { useInvocationStore } from "@/stores/invocationStore";
-
-import { cancelWorkflowScheduling } from "./services";
-import { isTerminal, jobCount } from "./util";
-
-import WorkflowInvocationDetails from "./WorkflowInvocationDetails.vue";
-import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
-import WorkflowInvocationSummary from "./WorkflowInvocationSummary.vue";
-
-export default {
-    components: {
-        LoadingSpan,
-        WorkflowInvocationSummary,
-        WorkflowInvocationDetails,
-        WorkflowInvocationExportOptions,
-    },
-    props: {
-        invocationId: {
-            type: String,
-            required: true,
-        },
-        index: {
-            type: Number,
-            required: false,
-            default: null,
-        },
-    },
-    setup() {
-        const invocationStore = useInvocationStore();
-        return {
-            invocationStore,
-        };
-    },
-    data() {
-        return {
-            stepStatesInterval: null,
-            jobStatesInterval: null,
-        };
-    },
-    computed: {
-        invocation: function () {
-            return this.invocationStore.getInvocationById(this.invocationId);
-        },
-        invocationState: function () {
-            return this.invocation?.state || "new";
-        },
-        invocationAndJobTerminal: function () {
-            return !!(this.invocationSchedulingTerminal && this.jobStatesTerminal);
-        },
-        invocationSchedulingTerminal: function () {
-            return (
-                this.invocationState == "scheduled" ||
-                this.invocationState == "cancelled" ||
-                this.invocationState == "failed"
-            );
-        },
-        jobStatesTerminal: function () {
-            if (this.invocationSchedulingTerminal && jobCount(this.jobStatesSummary) === 0) {
-                // no jobs for this invocation (think subworkflow or just inputs)
-                return true;
-            }
-            return this.jobStatesSummary && isTerminal(this.jobStatesSummary);
-        },
-        jobStatesSummary() {
-            const jobsSummary = this.invocationStore.getInvocationJobsSummaryById(this.invocationId);
-            return !jobsSummary ? null : jobsSummary;
-        },
-    },
-    created: function () {
-        this.pollStepStatesUntilTerminal();
-        this.pollJobStatesUntilTerminal();
-    },
-    beforeDestroy: function () {
-        clearTimeout(this.jobStatesInterval);
-        clearTimeout(this.stepStatesInterval);
-    },
-    methods: {
-        pollStepStatesUntilTerminal: async function () {
-            if (!this.invocation || !this.invocationSchedulingTerminal) {
-                await this.invocationStore.fetchInvocationForId({ id: this.invocationId });
-                this.stepStatesInterval = setTimeout(this.pollStepStatesUntilTerminal, 3000);
-            }
-        },
-        pollJobStatesUntilTerminal: async function () {
-            if (!this.jobStatesTerminal) {
-                await this.invocationStore.fetchInvocationJobsSummaryForId({ id: this.invocationId });
-                this.jobStatesInterval = setTimeout(this.pollJobStatesUntilTerminal, 3000);
-            }
-        },
-        onError: function (e) {
-            console.error(e);
-        },
-        onCancel() {
-            this.$emit("invocation-cancelled");
-        },
-        cancelWorkflowScheduling: function () {
-            cancelWorkflowScheduling(this.invocationId).then(this.onCancel).catch(this.onError);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
index eafa5a84b1a0..d358a8483eda 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
@@ -1,4 +1,4 @@
-import { shallowMount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
 import invocationData from "../Workflow/test/json/invocation.json";
@@ -16,7 +16,7 @@ describe("WorkflowInvocationSummary.vue with terminal invocation", () => {
             invocationAndJobTerminal: true,
             invocationSchedulingTerminal: true,
         };
-        wrapper = shallowMount(WorkflowInvocationSummary, {
+        wrapper = mount(WorkflowInvocationSummary, {
             propsData,
             localVue,
         });
@@ -43,7 +43,7 @@ describe("WorkflowInvocationSummary.vue with invocation scheduling running", ()
             invocationAndJobTerminal: false,
             invocationSchedulingTerminal: false,
         };
-        wrapper = shallowMount(WorkflowInvocationSummary, {
+        wrapper = mount(WorkflowInvocationSummary, {
             store,
             propsData,
             localVue,
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
index 28ddeaa0eae1..35cb06d42214 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
@@ -1,27 +1,18 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import { InvocationJobsSummary, InvocationStep, WorkflowInvocationElementView } from "@/api/invocations";
-import { getRootFromIndexLink } from "@/onload";
+import { InvocationJobsSummary, WorkflowInvocationElementView } from "@/api/invocations";
 
-import {
-    errorCount as jobStatesSummaryErrorCount,
-    jobCount as jobStatesSummaryJobCount,
-    numTerminal,
-    okCount as jobStatesSummaryOkCount,
-    runningCount as jobStatesSummaryRunningCount,
-} from "./util";
+import { runningCount as jobStatesSummaryRunningCount } from "./util";
 
+import InvocationJobsProgressBar from "./InvocationJobsProgressBar.vue";
+import InvocationMessage from "./InvocationMessage.vue";
+import InvocationStepsProgressBar from "./InvocationStepsProgressBar.vue";
+import InvocationSummaryActionButtons from "./InvocationSummaryActionButtons.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import ProgressBar from "@/components/ProgressBar.vue";
-import InvocationMessage from "@/components/WorkflowInvocationState/InvocationMessage.vue";
-
-function getUrl(path: string): string {
-    return getRootFromIndexLink() + path;
-}
 
 interface Props {
-    invocation?: WorkflowInvocationElementView;
+    invocation: WorkflowInvocationElementView;
     invocationAndJobTerminal: boolean;
     invocationSchedulingTerminal: boolean;
     jobStatesSummary: InvocationJobsSummary;
@@ -30,10 +21,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const reportTooltip = "View report for this workflow invocation";
-const generatePdfTooltip = "Generate PDF report for this workflow invocation";
-
-const invocationId = computed<string | undefined>(() => props.invocation?.id);
+const invocationId = computed<string>(() => props.invocation.id);
 
 const indexStr = computed(() => {
     if (props.index == undefined) {
@@ -44,100 +32,19 @@ const indexStr = computed(() => {
 });
 
 const invocationState = computed(() => {
-    return props.invocation?.state || "new";
+    return props.invocation.state || "new";
 });
 
 const invocationStateSuccess = computed(() => {
     return invocationState.value == "scheduled" && runningCount.value === 0 && props.invocationAndJobTerminal;
 });
 
-const disabledReportTooltip = computed(() => {
-    const state = invocationState.value;
-    const runCount = runningCount.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 (runCount != 0) {
-        return `The workflow invocation still contains ${runCount} 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.";
-    }
-});
-
-const stepCount = computed<number>(() => {
-    return props.invocation?.steps.length || 0;
-});
-
-type StepStateType = { [state: string]: number };
-
-const stepStates = computed<StepStateType>(() => {
-    const stepStates: StepStateType = {};
-    if (!props.invocation) {
-        return {};
-    }
-    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 invocationLink = computed<string | null>(() => {
-    const id = invocationId.value;
-    if (id) {
-        return getUrl(`workflows/invocations/report?id=${id}`);
-    } else {
-        return null;
-    }
-});
-
-const invocationPdfLink = computed<string | null>(() => {
-    const id = invocationId.value;
-    if (id) {
-        return getUrl(`api/invocations/${id}/report.pdf`);
-    } else {
-        return null;
-    }
-});
-
-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}.`;
+const messages = computed(() => {
+    return props.invocation.messages;
 });
 
 const emit = defineEmits<{
@@ -151,29 +58,12 @@ function onCancel() {
 
 <template>
     <div class="mb-3 workflow-invocation-state-component">
-        <div v-if="invocationAndJobTerminal">
-            <span>
-                <b-button
-                    v-b-tooltip.hover
-                    :title="invocationStateSuccess ? reportTooltip : disabledReportTooltip"
-                    :disabled="!invocationStateSuccess"
-                    size="sm"
-                    class="invocation-report-link"
-                    :href="invocationLink">
-                    View Report
-                </b-button>
-                <b-button
-                    v-b-tooltip.hover
-                    :title="invocationStateSuccess ? generatePdfTooltip : disabledReportTooltip"
-                    :disabled="!invocationStateSuccess"
-                    size="sm"
-                    class="invocation-pdf-link"
-                    :href="invocationPdfLink"
-                    target="_blank">
-                    Generate PDF
-                </b-button>
-            </span>
-        </div>
+        <InvocationSummaryActionButtons
+            v-if="invocationAndJobTerminal"
+            :invocation-id="invocationId"
+            :invocation-state="invocationState"
+            :invocation-state-success="invocationStateSuccess"
+            :running-count="runningCount" />
         <div v-else-if="!invocationAndJobTerminal">
             <b-alert variant="info" show>
                 <LoadingSpan :message="`Waiting to complete invocation ${indexStr}`" />
@@ -184,41 +74,23 @@ function onCancel() {
                 title="Cancel scheduling of workflow invocation"
                 @click="onCancel"></span>
         </div>
-        <ProgressBar v-if="!stepCount" note="Loading step state summary..." :loading="true" class="steps-progress" />
-        <template v-if="invocation.messages?.length">
+        <template v-if="messages?.length">
             <InvocationMessage
-                v-for="message in invocation.messages"
+                v-for="message in messages"
                 :key="message.reason"
                 class="steps-progress my-1"
                 :invocation-message="message"
                 :invocation="invocation">
             </InvocationMessage>
         </template>
-        <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
+        <InvocationStepsProgressBar
             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" />
+            :invocation="invocation"
+            :invocation-state="invocationState"
+            :invocation-scheduling-terminal="invocationSchedulingTerminal" />
+        <InvocationJobsProgressBar
+            :job-states-summary="jobStatesSummary"
+            :invocation-scheduling-terminal="invocationSchedulingTerminal"
+            :invocation-and-job-terminal="invocationAndJobTerminal" />
     </div>
 </template>
diff --git a/client/src/components/WorkflowInvocationState/usesInvocationState.ts b/client/src/components/WorkflowInvocationState/usesInvocationState.ts
new file mode 100644
index 000000000000..f59f3bc4357c
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/usesInvocationState.ts
@@ -0,0 +1,86 @@
+import { computed, type Ref } from "vue";
+
+import { InvocationJobsSummary } from "@/api/invocations";
+
+import { useInvocationStore } from "@/stores/invocationStore";
+
+import { isTerminal, jobCount } from "./util";
+
+type OptionalInterval = ReturnType<typeof setInterval> | null;
+
+export function useInvocationState(invocationId: Ref<string>) {
+    const invocationStore = useInvocationStore();
+
+    const invocation = computed(() => {
+        return invocationStore.getInvocationById(invocationId.value);
+    });
+
+    let stepStatesInterval: OptionalInterval = null;
+    let jobStatesInterval: OptionalInterval = null;
+
+    const invocationState = computed(() => {
+        return invocation.value?.state || "new";
+    });
+
+    const invocationSchedulingTerminal = computed(() => {
+        const state = invocationState.value;
+        return state == "scheduled" || state == "cancelled" || state == "failed";
+    });
+
+    const invocationAndJobTerminal = computed(() => {
+        return !!(invocationSchedulingTerminal.value && jobStatesTerminal.value);
+    });
+
+    const jobStatesTerminal = computed(() => {
+        if (invocationSchedulingTerminal.value && jobCount(jobStatesSummary.value) === 0) {
+            // no jobs for this invocation (think subworkflow or just inputs)
+            return true;
+        }
+        return jobStatesSummary.value && isTerminal(jobStatesSummary.value);
+    });
+
+    const jobStatesSummary = computed<InvocationJobsSummary | null>(() => {
+        const jobsSummary: InvocationJobsSummary | null = invocationStore.getInvocationJobsSummaryById(
+            invocationId.value
+        );
+        return !jobsSummary ? null : jobsSummary;
+    });
+
+    async function pollStepStatesUntilTerminal() {
+        if (!invocation.value || !invocationSchedulingTerminal.value) {
+            await invocationStore.fetchInvocationForId({ id: invocationId.value });
+            stepStatesInterval = setTimeout(pollStepStatesUntilTerminal, 3000);
+        }
+    }
+
+    async function pollJobStatesUntilTerminal() {
+        if (!jobStatesTerminal.value) {
+            await invocationStore.fetchInvocationJobsSummaryForId({ id: invocationId.value });
+            jobStatesInterval = setTimeout(pollJobStatesUntilTerminal, 3000);
+        }
+    }
+
+    async function monitorState() {
+        pollStepStatesUntilTerminal();
+        pollJobStatesUntilTerminal();
+    }
+
+    async function clearStateMonitor() {
+        if (jobStatesInterval) {
+            clearTimeout(jobStatesInterval);
+        }
+        if (stepStatesInterval) {
+            clearTimeout(stepStatesInterval);
+        }
+    }
+
+    return {
+        invocation,
+        invocationState,
+        invocationSchedulingTerminal,
+        invocationAndJobTerminal,
+        jobStatesSummary,
+        monitorState,
+        clearStateMonitor,
+    };
+}
diff --git a/client/src/stores/invocationStore.ts b/client/src/stores/invocationStore.ts
index ceac2109f459..836667d22661 100644
--- a/client/src/stores/invocationStore.ts
+++ b/client/src/stores/invocationStore.ts
@@ -5,7 +5,7 @@ import {
     fetchInvocationJobsSummary,
     fetchInvocationStep,
     type WorkflowInvocation,
-    type WorkflowInvocationJobsSummary,
+    type InvocationJobsSummary,
     type WorkflowInvocationStep,
 } from "@/api/invocations";
 import { useKeyedCache } from "@/composables/keyedCache";
@@ -15,7 +15,7 @@ export const useInvocationStore = defineStore("invocationStore", () => {
         useKeyedCache<WorkflowInvocation>(fetchInvocationDetails);
 
     const { getItemById: getInvocationJobsSummaryById, fetchItemById: fetchInvocationJobsSummaryForId } =
-        useKeyedCache<WorkflowInvocationJobsSummary>(fetchInvocationJobsSummary);
+        useKeyedCache<InvocationJobsSummary>(fetchInvocationJobsSummary);
 
     const { getItemById: getInvocationStepById, fetchItemById: fetchInvocationStepById } =
         useKeyedCache<WorkflowInvocationStep>(fetchInvocationStep);
diff --git a/lib/galaxy/model/__init__.py b/lib/galaxy/model/__init__.py
index 235eb89ee3e8..c6c4a1686b29 100644
--- a/lib/galaxy/model/__init__.py
+++ b/lib/galaxy/model/__init__.py
@@ -9093,8 +9093,6 @@ def to_dict(self, view="collection", value_mapper=None):
         rval["order_index"] = self.workflow_step.order_index
         rval["workflow_step_label"] = self.workflow_step.label
         rval["workflow_step_uuid"] = str(self.workflow_step.uuid)
-        # Following no longer makes sense...
-        # rval['state'] = self.job.state if self.job is not None else None
         if view == "element":
             jobs = []
             for job in self.jobs:
diff --git a/lib/galaxy/schema/invocation.py b/lib/galaxy/schema/invocation.py
index df81f450de32..dffb7873bd00 100644
--- a/lib/galaxy/schema/invocation.py
+++ b/lib/galaxy/schema/invocation.py
@@ -337,22 +337,12 @@ class InvocationStepCollectionOutput(Model):
     )
 
 
-class InvocationStep(Model, WithModelClass):
+class BaseInvocationStep(Model, WithModelClass):
     """Information about workflow invocation step"""
 
     model_class: INVOCATION_STEP_MODEL_CLASS = ModelClassField(INVOCATION_STEP_MODEL_CLASS)
     id: Annotated[EncodedDatabaseIdField, Field(..., title="Invocation Step ID")]
     update_time: Optional[datetime] = schema.UpdateTimeField
-    job_id: Optional[
-        Annotated[
-            EncodedDatabaseIdField,
-            Field(
-                default=None,
-                title="Job ID",
-                description="The encoded ID of the job associated with this workflow invocation step.",
-            ),
-        ]
-    ]
     workflow_step_id: Annotated[
         EncodedDatabaseIdField,
         Field(
@@ -371,11 +361,6 @@ class InvocationStep(Model, WithModelClass):
             ),
         ]
     ]
-    state: Optional[Union[InvocationStepState, JobState]] = Field(
-        default=None,
-        title="State of the invocation step",
-        description="Describes where in the scheduling process the workflow invocation step is.",
-    )
     action: Optional[bool] = InvocationStepActionField
     order_index: int = Field(
         ...,
@@ -409,6 +394,32 @@ class InvocationStep(Model, WithModelClass):
     )
 
 
+class LegacyInvocationStep(BaseInvocationStep):
+    job_id: Optional[
+        Annotated[
+            EncodedDatabaseIdField,
+            Field(
+                default=None,
+                title="Job ID",
+                description="The encoded ID of the job associated with this workflow invocation step.",
+            ),
+        ]
+    ]
+    state: Optional[JobState] = Field(
+        ...,
+        title="State of the invocation step",
+        description="Describes the job state corresponding to this invocation step.",
+    )
+
+
+class InvocationStep(BaseInvocationStep):
+    state: InvocationStepState = Field(
+        ...,
+        title="State of the invocation step",
+        description="Describes where in the scheduling process the workflow invocation step is.",
+    )
+
+
 class InvocationReport(Model, WithModelClass):
     """Report describing workflow invocation"""
 
@@ -555,8 +566,7 @@ class WorkflowInvocationCollectionView(Model, WithModelClass):
     model_class: INVOCATION_MODEL_CLASS = ModelClassField(INVOCATION_MODEL_CLASS)
 
 
-class WorkflowInvocationElementView(WorkflowInvocationCollectionView):
-    steps: List[InvocationStep] = Field(default=..., title="Steps", description="Steps of the workflow invocation.")
+class BaseWorkflowInvocationElementView(WorkflowInvocationCollectionView):
     inputs: Dict[str, InvocationInput] = Field(
         default=..., title="Inputs", description="Input datasets/dataset collections of the workflow invocation."
     )
@@ -581,11 +591,35 @@ class WorkflowInvocationElementView(WorkflowInvocationCollectionView):
     )
 
 
+class LegacyWorkflowInvocationElementView(BaseWorkflowInvocationElementView):
+    steps: List[LegacyInvocationStep] = Field(
+        default=..., title="Steps", description="Steps of the workflow invocation (legacy view using job state)."
+    )
+
+
+class WorkflowInvocationElementView(BaseWorkflowInvocationElementView):
+    steps: List[InvocationStep] = Field(default=..., title="Steps", description="Steps of the workflow invocation.")
+
+
 class WorkflowInvocationResponse(RootModel):
     root: Annotated[
-        Union[WorkflowInvocationElementView, WorkflowInvocationCollectionView], Field(union_mode="left_to_right")
+        Union[WorkflowInvocationElementView, LegacyWorkflowInvocationElementView, WorkflowInvocationCollectionView],
+        Field(union_mode="left_to_right"),
     ]
 
+    @staticmethod
+    def from_dict(as_dict: Dict[str, Any], view: "InvocationSerializationView", legacy_job_state: bool):
+        # WorkflowInvocationResponse(**as_dict) does the same thing but I think it is better to
+        # be explicit here since we know what model we're trying to serialize - this is safer, more
+        # performant, and will likely yield clearer error messages.
+        if view == InvocationSerializationView.collection:
+            root = WorkflowInvocationCollectionView(**as_dict)
+        elif legacy_job_state:
+            root = LegacyWorkflowInvocationElementView(**as_dict)
+        else:
+            root = WorkflowInvocationElementView(**as_dict)
+        return WorkflowInvocationResponse(root=root)
+
 
 class InvocationJobsSummaryBaseModel(Model):
     id: EncodedDatabaseIdField = InvocationIdField
diff --git a/lib/galaxy/webapps/galaxy/services/invocations.py b/lib/galaxy/webapps/galaxy/services/invocations.py
index f6d7b1c1a60d..72630220d22f 100644
--- a/lib/galaxy/webapps/galaxy/services/invocations.py
+++ b/lib/galaxy/webapps/galaxy/services/invocations.py
@@ -219,7 +219,7 @@ def serialize_workflow_invocation(
         legacy_job_state = params.legacy_job_state
         as_dict = invocation.to_dict(view.value, step_details=step_details, legacy_job_state=legacy_job_state)
         as_dict["messages"] = invocation.messages
-        return WorkflowInvocationResponse(**as_dict)
+        return WorkflowInvocationResponse.from_dict(as_dict, view, legacy_job_state)
 
     def serialize_workflow_invocations(
         self,
diff --git a/lib/galaxy_test/api/test_workflows.py b/lib/galaxy_test/api/test_workflows.py
index f8e1cb85ca6e..6b8d734c293a 100644
--- a/lib/galaxy_test/api/test_workflows.py
+++ b/lib/galaxy_test/api/test_workflows.py
@@ -7192,11 +7192,6 @@ def test_invocation_usage(self):
             elif order_index == 2:
                 invocation_tool_step = invocation_step
 
-        # Tool steps have non-null job_ids (deprecated though they may be)
-        assert invocation_input_step.get("job_id", None) is None
-        job_id = invocation_tool_step.get("job_id", None)
-        assert job_id is not None
-
         invocation_tool_step_id = invocation_tool_step["id"]
         invocation_tool_step_response = self._get(
             f"workflows/{workflow_id}/invocations/{invocation_id}/steps/{invocation_tool_step_id}"