diff --git a/client/src/api/invocations.ts b/client/src/api/invocations.ts
index 88c34695fb8c..fe5f98d51772 100644
--- a/client/src/api/invocations.ts
+++ b/client/src/api/invocations.ts
@@ -6,16 +6,18 @@ import { ApiResponse, components, fetcher } from "./schema";
 
 export type WorkflowInvocationElementView = components["schemas"]["WorkflowInvocationElementView"];
 export type WorkflowInvocationCollectionView = components["schemas"]["WorkflowInvocationCollectionView"];
+export type WorkflowInvocationStepStatesView = components["schemas"]["WorkflowInvocationStepStatesView"];
 export type InvocationJobsSummary = components["schemas"]["InvocationJobsResponse"];
 export type InvocationStep = components["schemas"]["InvocationStep"];
 
 export const invocationsFetcher = fetcher.path("/api/invocations").method("get").create();
+export const invocationFetcher = fetcher.path("/api/invocations/{invocation_id}").method("get").create();
+export const jobsSummaryFetcher = fetcher.path("/api/invocations/{invocation_id}/jobs_summary").method("get").create();
 
-export type WorkflowInvocation = WorkflowInvocationElementView | WorkflowInvocationCollectionView;
-
-export interface WorkflowInvocationJobsSummary {
-    id: string;
-}
+export type WorkflowInvocation =
+    | WorkflowInvocationElementView
+    | WorkflowInvocationCollectionView
+    | WorkflowInvocationStepStatesView;
 
 export interface WorkflowInvocationStep {
     id: string;
@@ -32,19 +34,26 @@ export async function invocationForJob(params: { jobId: string }): Promise<Workf
 
 // TODO: Replace these provisional functions with fetchers after https://github.com/galaxyproject/galaxy/pull/16707 is merged
 export async function fetchInvocationDetails(params: { id: string }): Promise<ApiResponse<WorkflowInvocation>> {
-    const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}`);
+    const { data } = await invocationFetcher({ invocation_id: params.id });
     return {
         data,
     } as ApiResponse<WorkflowInvocation>;
 }
 
-export async function fetchInvocationJobsSummary(params: {
+export async function fetchInvocationStepStateDetails(params: {
     id: string;
-}): Promise<ApiResponse<WorkflowInvocationJobsSummary>> {
-    const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}/jobs_summary`);
+}): Promise<ApiResponse<WorkflowInvocationStepStatesView>> {
+    const { data } = await invocationFetcher({ invocation_id: params.id, view: "step_states" });
+    return {
+        data,
+    } as ApiResponse<WorkflowInvocationStepStatesView>;
+}
+
+export async function fetchInvocationJobsSummary(params: { id: string }): Promise<ApiResponse<InvocationJobsSummary>> {
+    const { data } = await jobsSummaryFetcher({ invocation_id: params.id });
     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 190abb1ad1ea..7499fa5218b6 100644
--- a/client/src/api/schema/schema.ts
+++ b/client/src/api/schema/schema.ts
@@ -7979,7 +7979,7 @@ export interface components {
          * InvocationSerializationView
          * @enum {string}
          */
-        InvocationSerializationView: "element" | "collection";
+        InvocationSerializationView: "element" | "collection" | "step_states";
         /**
          * InvocationSortByEnum
          * @enum {string}
@@ -7990,10 +7990,7 @@ export interface components {
          * @enum {string}
          */
         InvocationState: "new" | "ready" | "scheduled" | "cancelled" | "cancelling" | "failed";
-        /**
-         * InvocationStep
-         * @description Information about workflow invocation step
-         */
+        /** InvocationStep */
         InvocationStep: {
             /**
              * Action
@@ -8005,8 +8002,6 @@ export interface components {
              * @example 0123456789ABCDEF
              */
             id: string;
-            /** Job Id */
-            job_id: string | null;
             /**
              * Jobs
              * @description Jobs associated with the workflow invocation step.
@@ -8045,7 +8040,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;
             /**
@@ -8916,6 +8911,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: {
             /**
@@ -8943,6 +9014,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: {
             /**
@@ -12911,7 +13086,9 @@ export interface components {
         /** WorkflowInvocationResponse */
         WorkflowInvocationResponse:
             | components["schemas"]["WorkflowInvocationElementView"]
-            | components["schemas"]["WorkflowInvocationCollectionView"];
+            | components["schemas"]["LegacyWorkflowInvocationElementView"]
+            | components["schemas"]["WorkflowInvocationCollectionView"]
+            | components["schemas"]["WorkflowInvocationStepStatesView"];
         /** WorkflowInvocationStateSummary */
         WorkflowInvocationStateSummary: {
             /**
@@ -12940,6 +13117,60 @@ export interface components {
                 [key: string]: number | undefined;
             };
         };
+        /** WorkflowInvocationStepStatesView */
+        WorkflowInvocationStepStatesView: {
+            /**
+             * 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;
+            /**
+             * Model class
+             * @description The name of the database model class.
+             * @constant
+             */
+            model_class: "WorkflowInvocation";
+            /**
+             * Invocation state
+             * @description State of workflow invocation.
+             */
+            state: components["schemas"]["InvocationState"];
+            /**
+             * Steps
+             * @description Steps of the workflow invocation.
+             */
+            steps: components["schemas"]["InvocationStep"][];
+            /**
+             * 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;
+        };
         /** WriteInvocationStoreToPayload */
         WriteInvocationStoreToPayload: {
             /**
@@ -18711,6 +18942,7 @@ export interface operations {
     show_invocation_api_invocations__invocation_id__get: {
         /** Get detailed description of a workflow invocation. */
         parameters: {
+            /** @description View to be passed to the serializer */
             /** @description Include details for individual invocation steps and populate a steps attribute in the resulting dictionary. */
             /**
              * @description Populate the invocation step state with the job state instead of the invocation step state.
@@ -18719,6 +18951,7 @@ export interface operations {
              *         are not the mapped over step outputs but the individual job outputs.
              */
             query?: {
+                view?: string | null;
                 step_details?: boolean;
                 legacy_job_state?: boolean;
             };
diff --git a/client/src/components/Workflow/InvocationsList.test.js b/client/src/components/Workflow/InvocationsList.test.js
index 6321039a1c55..cce9721b3eda 100644
--- a/client/src/components/Workflow/InvocationsList.test.js
+++ b/client/src/components/Workflow/InvocationsList.test.js
@@ -7,10 +7,13 @@ import MockAdapter from "axios-mock-adapter";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import { getLocalVue } from "tests/jest/helpers";
 
+import { mockFetcher } from "@/api/schema/__mocks__";
+
 import InvocationsList from "./InvocationsList";
 import mockInvocationData from "./test/json/invocation.json";
 
 const localVue = getLocalVue();
+jest.mock("@/api/schema");
 
 const pinia = createTestingPinia();
 describe("InvocationsList.vue", () => {
@@ -19,12 +22,16 @@ describe("InvocationsList.vue", () => {
 
     beforeEach(async () => {
         axiosMock = new MockAdapter(axios);
-        axiosMock.onGet(`api/invocations/${mockInvocationData.id}`).reply(200, mockInvocationData);
-        axiosMock.onGet(`api/invocations/${mockInvocationData.id}/jobs_summary`).reply(200, {});
+        mockFetcher.path("/api/invocations/{invocation_id}").method("get").mock({ data: mockInvocationData });
+        mockFetcher
+            .path("/api/invocations/{invocation_id}/jobs_summary")
+            .method("get")
+            .mock({ data: { states: {} } });
     });
 
     afterEach(() => {
         axiosMock.restore();
+        mockFetcher.clearMocks();
     });
 
     describe(" with empty invocation list", () => {
@@ -36,6 +43,7 @@ describe("InvocationsList.vue", () => {
             wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
+                pinia,
             });
         });
 
@@ -124,6 +132,7 @@ describe("InvocationsList.vue", () => {
             wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
+                pinia,
             });
         });
 
@@ -186,7 +195,6 @@ describe("InvocationsList.vue", () => {
             expect(columns.at(3).text()).toBe(
                 formatDistanceToNow(parseISO(`${mockInvocationData.create_time}Z`), { addSuffix: true })
             );
-            expect(columns.at(4).text()).toBe("scheduled");
             expect(columns.at(5).text()).toBe("");
         });
 
@@ -242,6 +250,7 @@ describe("InvocationsList.vue", () => {
                     },
                 },
                 localVue,
+                pinia,
             });
         });
 
diff --git a/client/src/components/Workflow/InvocationsList.vue b/client/src/components/Workflow/InvocationsList.vue
index ce962d036388..28f2470711eb 100644
--- a/client/src/components/Workflow/InvocationsList.vue
+++ b/client/src/components/Workflow/InvocationsList.vue
@@ -65,7 +65,10 @@
                 <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"
+                    :details-showing="data.detailsShowing" />
             </template>
             <template v-slot:cell(execute)="data">
                 <WorkflowRunButton
@@ -83,7 +86,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";
@@ -94,12 +96,13 @@ import { useWorkflowStore } from "@/stores/workflowStore";
 
 import paginationMixin from "./paginationMixin";
 
+import InvocationsListState from "./InvocationsListState.vue";
 import WorkflowRunButton from "./WorkflowRunButton.vue";
 import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
 
 export default {
     components: {
-        HelpText,
+        InvocationsListState,
         UtcDate,
         WorkflowInvocationState,
         WorkflowRunButton,
@@ -126,7 +129,7 @@ export default {
         }
         fields.push(
             { key: "create_time", label: "Invoked", class: "col-small", sortable: true },
-            { key: "state", class: "col-small" },
+            { key: "state" },
             { key: "execute", label: "Run", class: "col-button" }
         );
         return {
@@ -212,7 +215,7 @@ export default {
 }
 
 .table:deep(.col-name) {
-    width: 40%;
+    width: 35%;
 }
 
 .table:deep(.col-history) {
diff --git a/client/src/components/Workflow/InvocationsListState.vue b/client/src/components/Workflow/InvocationsListState.vue
new file mode 100644
index 000000000000..e03326c43e56
--- /dev/null
+++ b/client/src/components/Workflow/InvocationsListState.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, toRef } from "vue";
+
+import { useInvocationState } from "@/components/WorkflowInvocationState/usesInvocationState";
+
+import HelpText from "@/components/Help/HelpText.vue";
+import InvocationJobsProgressBar from "@/components/WorkflowInvocationState/InvocationJobsProgressBar.vue";
+import InvocationStepsProgressBar from "@/components/WorkflowInvocationState/InvocationStepsProgressBar.vue";
+
+interface Props {
+    invocationId: string;
+    invocationState: string;
+    detailsShowing: boolean;
+}
+
+const props = defineProps<Props>();
+
+const {
+    invocation,
+    invocationState,
+    invocationSchedulingTerminal,
+    invocationAndJobTerminal,
+    jobStatesSummary,
+    monitorState,
+    clearStateMonitor,
+} = useInvocationState(toRef(props, "invocationId"), true);
+
+onMounted(monitorState);
+onBeforeUnmount(clearStateMonitor);
+</script>
+
+<template>
+    <span>
+        <HelpText
+            v-if="!invocation || detailsShowing"
+            :uri="`galaxy.invocations.states.${props.invocationState}`"
+            :text="props.invocationState" />
+        <template v-else>
+            <InvocationStepsProgressBar
+                :invocation="invocation"
+                :invocation-state="invocationState"
+                :invocation-scheduling-terminal="invocationSchedulingTerminal" />
+            <InvocationJobsProgressBar
+                :job-states-summary="jobStatesSummary"
+                :invocation-scheduling-terminal="invocationSchedulingTerminal"
+                :invocation-and-job-terminal="invocationAndJobTerminal" />
+        </template>
+    </span>
+</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.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
index 751bdc5dd32a..6c2107eb03f2 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
@@ -5,11 +5,14 @@ import { setActivePinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 
 import type { WorkflowInvocation } from "@/api/invocations";
+import { mockFetcher } from "@/api/schema/__mocks__";
 
 import invocationData from "../Workflow/test/json/invocation.json";
 
 import WorkflowInvocationState from "./WorkflowInvocationState.vue";
 
+jest.mock("@/api/schema");
+
 const localVue = getLocalVue();
 
 const selectors = {
@@ -26,15 +29,18 @@ const invocationJobsSummaryById = {
 async function mountWorkflowInvocationState(invocation: WorkflowInvocation | null) {
     const pinia = createTestingPinia();
     setActivePinia(pinia);
+    if (invocation) {
+        mockFetcher.path("/api/invocations/{invocation_id}").method("get").mock({ data: invocation });
+    }
+    mockFetcher
+        .path("/api/invocations/{invocation_id}/jobs_summary")
+        .method("get")
+        .mock({ data: invocationJobsSummaryById });
 
     const wrapper = shallowMount(WorkflowInvocationState, {
         propsData: {
             invocationId: invocationData.id,
         },
-        computed: {
-            invocation: () => invocation,
-            jobStatesSummary: () => invocationJobsSummaryById,
-        },
         pinia,
         localVue,
     });
@@ -46,11 +52,13 @@ describe("WorkflowInvocationState.vue", () => {
     it("determines that invocation and job states are terminal with terminal invocation", async () => {
         const wrapper = await mountWorkflowInvocationState(invocationData as WorkflowInvocation);
         expect(isInvocationAndJobTerminal(wrapper)).toBe(true);
+        mockFetcher.clearMocks();
     });
 
     it("determines that invocation and job states are not terminal with no invocation", async () => {
         const wrapper = await mountWorkflowInvocationState(null);
         expect(isInvocationAndJobTerminal(wrapper)).toBe(false);
+        mockFetcher.clearMocks();
     });
 
     it("determines that invocation and job states are not terminal with non-terminal invocation", async () => {
@@ -60,6 +68,7 @@ describe("WorkflowInvocationState.vue", () => {
         } as WorkflowInvocation;
         const wrapper = await mountWorkflowInvocationState(invocation);
         expect(isInvocationAndJobTerminal(wrapper)).toBe(false);
+        mockFetcher.clearMocks();
     });
 });
 
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 2b734f4bcfb2..a560355f183a 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,3 +1,50 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, toRef } from "vue";
+
+import { cancelWorkflowScheduling } from "./services";
+import { useInvocationState } from "./usesInvocationState";
+
+import WorkflowInvocationDetails from "./WorkflowInvocationDetails.vue";
+import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
+import WorkflowInvocationSummary from "./WorkflowInvocationSummary.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+interface Props {
+    invocationId: string;
+    index?: Number;
+}
+
+const props = defineProps<Props>();
+
+const {
+    invocation,
+    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 +55,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 +76,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..67cb9a25ac41
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/usesInvocationState.ts
@@ -0,0 +1,93 @@
+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>, fetchMinimal: boolean = false) {
+    const invocationStore = useInvocationStore();
+
+    const invocation = computed(() => {
+        if (fetchMinimal) {
+            return invocationStore.getInvocationWithStepStatesById(invocationId.value);
+        } else {
+            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) {
+            if (fetchMinimal) {
+                await invocationStore.fetchInvocationWithStepStatesForId({ id: invocationId.value });
+            } else {
+                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..4159a4dfac23 100644
--- a/client/src/stores/invocationStore.ts
+++ b/client/src/stores/invocationStore.ts
@@ -4,8 +4,9 @@ import {
     fetchInvocationDetails,
     fetchInvocationJobsSummary,
     fetchInvocationStep,
+    fetchInvocationStepStateDetails,
+    type InvocationJobsSummary,
     type WorkflowInvocation,
-    type WorkflowInvocationJobsSummary,
     type WorkflowInvocationStep,
 } from "@/api/invocations";
 import { useKeyedCache } from "@/composables/keyedCache";
@@ -14,8 +15,11 @@ export const useInvocationStore = defineStore("invocationStore", () => {
     const { getItemById: getInvocationById, fetchItemById: fetchInvocationForId } =
         useKeyedCache<WorkflowInvocation>(fetchInvocationDetails);
 
+    const { getItemById: getInvocationWithStepStatesById, fetchItemById: fetchInvocationWithStepStatesForId } =
+        useKeyedCache<WorkflowInvocation>(fetchInvocationStepStateDetails);
+
     const { getItemById: getInvocationJobsSummaryById, fetchItemById: fetchInvocationJobsSummaryForId } =
-        useKeyedCache<WorkflowInvocationJobsSummary>(fetchInvocationJobsSummary);
+        useKeyedCache<InvocationJobsSummary>(fetchInvocationJobsSummary);
 
     const { getItemById: getInvocationStepById, fetchItemById: fetchInvocationStepById } =
         useKeyedCache<WorkflowInvocationStep>(fetchInvocationStep);
@@ -27,5 +31,7 @@ export const useInvocationStore = defineStore("invocationStore", () => {
         fetchInvocationJobsSummaryForId,
         getInvocationStepById,
         fetchInvocationStepById,
+        getInvocationWithStepStatesById,
+        fetchInvocationWithStepStatesForId,
     };
 });
diff --git a/lib/galaxy/model/__init__.py b/lib/galaxy/model/__init__.py
index 4259ef5b0ad7..4b2aa5ceaaa2 100644
--- a/lib/galaxy/model/__init__.py
+++ b/lib/galaxy/model/__init__.py
@@ -8761,11 +8761,12 @@ def _serialize(self, id_encoder, serialization_options):
         return invocation_attrs
 
     def to_dict(self, view="collection", value_mapper=None, step_details=False, legacy_job_state=False):
-        rval = super().to_dict(view=view, value_mapper=value_mapper)
+        base_view = view if view != "step_states" else "collection"
+        rval = super().to_dict(view=base_view, value_mapper=value_mapper)
         if rval["state"] is None:
             # bugs could result in no state being set
             rval["state"] = self.states.FAILED
-        if view == "element":
+        if view in ["element", "step_states"]:
             steps = []
             for step in self.steps:
                 if step_details:
@@ -8786,7 +8787,7 @@ def to_dict(self, view="collection", value_mapper=None, step_details=False, lega
                 else:
                     steps.append(v)
             rval["steps"] = steps
-
+        if view == "element":
             inputs = {}
             for input_item_association in self.input_datasets + self.input_dataset_collections:
                 if input_item_association.history_content_type == "dataset":
@@ -9207,8 +9208,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 44741831c8f1..72c48726baff 100644
--- a/lib/galaxy/schema/invocation.py
+++ b/lib/galaxy/schema/invocation.py
@@ -309,22 +309,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(
@@ -343,11 +333,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(
         ...,
@@ -381,6 +366,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"""
 
@@ -527,8 +538,11 @@ class WorkflowInvocationCollectionView(Model, WithModelClass):
     model_class: INVOCATION_MODEL_CLASS = ModelClassField(INVOCATION_MODEL_CLASS)
 
 
-class WorkflowInvocationElementView(WorkflowInvocationCollectionView):
+class WorkflowInvocationStepStatesView(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."
     )
@@ -553,11 +567,42 @@ 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,
+            WorkflowInvocationStepStatesView,
+        ],
+        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 view == InvocationSerializationView.step_states:
+            root = WorkflowInvocationStepStatesView(**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
@@ -596,6 +641,7 @@ class CreateInvocationFromStore(StoreContentSource):
 class InvocationSerializationView(str, Enum):
     element = "element"
     collection = "collection"
+    step_states = "step_states"  # collection + steps - for monitoring, lighter than element
 
 
 class InvocationSerializationParams(BaseModel):
diff --git a/lib/galaxy/webapps/galaxy/api/workflows.py b/lib/galaxy/webapps/galaxy/api/workflows.py
index 54386e7596c6..358ce83988a7 100644
--- a/lib/galaxy/webapps/galaxy/api/workflows.py
+++ b/lib/galaxy/webapps/galaxy/api/workflows.py
@@ -1408,11 +1408,12 @@ def show_invocation(
         self,
         invocation_id: InvocationIDPathParam,
         trans: ProvidesUserContext = DependsOnTrans,
+        view: SerializationViewQueryParam = None,
         step_details: StepDetailQueryParam = False,
         legacy_job_state: LegacyJobStateQueryParam = False,
     ) -> WorkflowInvocationResponse:
         serialization_params = InvocationSerializationParams(
-            step_details=step_details, legacy_job_state=legacy_job_state
+            view=view, step_details=step_details, legacy_job_state=legacy_job_state
         )
         return self.invocations_service.show(trans, invocation_id, serialization_params, eager=True)
 
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 36549c820015..7d831f2020bc 100644
--- a/lib/galaxy_test/api/test_workflows.py
+++ b/lib/galaxy_test/api/test_workflows.py
@@ -7264,29 +7264,20 @@ def test_invocation_usage(self):
         usage_details = self._invocation_details(workflow_id, invocation_id)
 
         invocation_steps = usage_details["steps"]
-        invocation_input_step, invocation_tool_step = {}, {}
+        invocation_tool_step = {}
         for invocation_step in invocation_steps:
             self._assert_has_keys(invocation_step, "workflow_step_id", "order_index", "id")
             order_index = invocation_step["order_index"]
             assert order_index in [0, 1, 2], order_index
-            if order_index == 0:
-                invocation_input_step = invocation_step
-            elif order_index == 2:
+            if 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}"
         )
         self._assert_status_code_is(invocation_tool_step_response, 200)
-        self._assert_has_keys(invocation_tool_step_response.json(), "id", "order_index", "job_id")
-
-        assert invocation_tool_step_response.json()["job_id"] == job_id
+        self._assert_has_keys(invocation_tool_step_response.json(), "id", "order_index")
 
     def test_invocation_with_collection_mapping(self):
         workflow_id, invocation_id = self._run_mapping_workflow()