diff --git a/client/src/api/jobs.ts b/client/src/api/jobs.ts
index 661d412d2849..31e9801ddfdd 100644
--- a/client/src/api/jobs.ts
+++ b/client/src/api/jobs.ts
@@ -2,5 +2,8 @@ import { type components } from "@/api/schema";
 
 export type JobDestinationParams = components["schemas"]["JobDestinationParams"];
 export type ShowFullJobResponse = components["schemas"]["ShowFullJobResponse"];
+export type JobBaseModel = components["schemas"]["JobBaseModel"];
 export type JobDetails = components["schemas"]["ShowFullJobResponse"] | components["schemas"]["EncodedJobDetails"];
 export type JobInputSummary = components["schemas"]["JobInputSummary"];
+export type JobDisplayParametersSummary = components["schemas"]["JobDisplayParametersSummary"];
+export type JobMetric = components["schemas"]["JobMetric"];
diff --git a/client/src/components/Grid/GridInvocation.vue b/client/src/components/Grid/GridInvocation.vue
index d8997096096f..847127cfa0b7 100644
--- a/client/src/components/Grid/GridInvocation.vue
+++ b/client/src/components/Grid/GridInvocation.vue
@@ -2,7 +2,9 @@
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
+import type { WorkflowInvocation } from "@/api/invocations";
 import invocationsGridConfig from "@/components/Grid/configs/invocations";
+import invocationsBatchConfig from "@/components/Grid/configs/invocationsBatch";
 import invocationsHistoryGridConfig from "@/components/Grid/configs/invocationsHistory";
 import invocationsWorkflowGridConfig from "@/components/Grid/configs/invocationsWorkflow";
 import { useUserStore } from "@/stores/userStore";
@@ -19,6 +21,7 @@ interface Props {
     headerMessage?: string;
     ownerGrid?: boolean;
     filteredFor?: { type: "History" | "StoredWorkflow"; id: string; name: string };
+    invocationsList?: WorkflowInvocation[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,12 +29,14 @@ const props = withDefaults(defineProps<Props>(), {
     headerMessage: "",
     ownerGrid: true,
     filteredFor: undefined,
+    invocationsList: undefined,
 });
 
 const { currentUser } = storeToRefs(useUserStore());
 
 const forStoredWorkflow = computed(() => props.filteredFor?.type === "StoredWorkflow");
 const forHistory = computed(() => props.filteredFor?.type === "History");
+const forBatch = computed(() => !!props.invocationsList?.length);
 
 const effectiveNoInvocationsMessage = computed(() => {
     let message = props.noInvocationsMessage;
@@ -51,6 +56,9 @@ const effectiveTitle = computed(() => {
 });
 
 const extraProps = computed(() => {
+    if (forBatch.value) {
+        return Object.fromEntries(props.invocationsList.map((invocation) => [invocation.id, invocation]));
+    }
     const params: {
         workflow_id?: string;
         history_id?: string;
@@ -72,7 +80,9 @@ const extraProps = computed(() => {
 });
 
 let gridConfig: GridConfig;
-if (forStoredWorkflow.value) {
+if (forBatch.value) {
+    gridConfig = invocationsBatchConfig;
+} else if (forStoredWorkflow.value) {
     gridConfig = invocationsWorkflowGridConfig;
 } else if (forHistory.value) {
     gridConfig = invocationsHistoryGridConfig;
@@ -97,9 +107,9 @@ function refreshTable() {
             :grid-message="props.headerMessage"
             :no-data-message="effectiveNoInvocationsMessage"
             :extra-props="extraProps"
-            :embedded="forStoredWorkflow || forHistory">
+            :embedded="forStoredWorkflow || forHistory || forBatch">
             <template v-slot:expanded="{ rowData }">
-                <span class="float-right position-absolute mr-4" style="right: 0" :data-invocation-id="rowData.id">
+                <span class="position-absolute ml-4" :data-invocation-id="rowData.id">
                     <small>
                         <b>Last updated: <UtcDate :date="rowData.update_time" mode="elapsed" />; Invocation ID:</b>
                     </small>
diff --git a/client/src/components/Grid/configs/invocationsBatch.ts b/client/src/components/Grid/configs/invocationsBatch.ts
new file mode 100644
index 000000000000..c84f0b39d27d
--- /dev/null
+++ b/client/src/components/Grid/configs/invocationsBatch.ts
@@ -0,0 +1,80 @@
+import { faEye } from "@fortawesome/free-solid-svg-icons";
+
+import { type WorkflowInvocation } from "@/api/invocations";
+import { getAppRoot } from "@/onload";
+
+import { type FieldArray, type GridConfig } from "./types";
+
+/**
+ * Request and return invocations for the given workflow (and current user) from server
+ */
+async function getData(
+    offset: number,
+    limit: number,
+    search: string,
+    sort_by: string,
+    sort_desc: boolean,
+    extraProps?: Record<string, unknown>
+) {
+    // extra props will be Record<string, Invocation>; get array of invocations
+    const data = Object.values(extraProps ?? {}) as WorkflowInvocation[];
+    const totalMatches = data.length;
+    return [data, totalMatches];
+}
+
+/**
+ * Declare columns to be displayed
+ */
+const fields: FieldArray = [
+    {
+        key: "expand",
+        title: null,
+        type: "expand",
+    },
+    {
+        key: "view",
+        title: "View",
+        type: "button",
+        icon: faEye,
+        handler: (data) => {
+            const url = `${getAppRoot()}workflows/invocations/${(data as WorkflowInvocation).id}`;
+            window.open(url, "_blank");
+        },
+        converter: () => "",
+    },
+    {
+        key: "history_id",
+        title: "History",
+        type: "history",
+    },
+    {
+        key: "create_time",
+        title: "Invoked",
+        type: "date",
+    },
+    {
+        key: "state",
+        title: "State",
+        type: "helptext",
+        converter: (data) => {
+            const invocation = data as WorkflowInvocation;
+            return `galaxy.invocations.states.${invocation.state}`;
+        },
+    },
+];
+
+/**
+ * Grid configuration
+ */
+const gridConfig: GridConfig = {
+    id: "invocations-batch-grid",
+    fields: fields,
+    getData: getData,
+    plural: "Workflow Invocations",
+    sortBy: "create_time",
+    sortDesc: true,
+    sortKeys: [],
+    title: "Workflow Invocations in Batch",
+};
+
+export default gridConfig;
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 04f3c7d0729f..58ba0da9a58a 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -20,7 +20,7 @@ import { useEventStore } from "@/stores/eventStore";
 import { clearDrag } from "@/utils/setDrag";
 
 import { JobStateSummary } from "./Collection/JobStateSummary";
-import { HIERARCHICAL_COLLECTION_JOB_STATES, type StateMap, STATES } from "./model/states";
+import { getContentItemState, type StateMap, STATES } from "./model/states";
 
 import CollectionDescription from "./Collection/CollectionDescription.vue";
 import ContentOptions from "./ContentOptions.vue";
@@ -135,25 +135,7 @@ const state = computed<keyof StateMap>(() => {
     if (props.isPlaceholder) {
         return "placeholder";
     }
-    if (props.item.accessible === false) {
-        return "inaccessible";
-    }
-    if (props.item.populated_state === "failed") {
-        return "failed_populated_state";
-    }
-    if (props.item.populated_state === "new") {
-        return "new_populated_state";
-    }
-    if (props.item.job_state_summary) {
-        for (const jobState of HIERARCHICAL_COLLECTION_JOB_STATES) {
-            if (props.item.job_state_summary[jobState] > 0) {
-                return jobState;
-            }
-        }
-    } else if (props.item.state) {
-        return props.item.state;
-    }
-    return "ok";
+    return getContentItemState(props.item);
 });
 
 const dataState = computed(() => {
diff --git a/client/src/components/History/Content/model/states.ts b/client/src/components/History/Content/model/states.ts
index 5a201ed9b085..bc3195cbf348 100644
--- a/client/src/components/History/Content/model/states.ts
+++ b/client/src/components/History/Content/model/states.ts
@@ -1,3 +1,4 @@
+import { isHDCA } from "@/api";
 import { type components } from "@/api/schema";
 
 type DatasetState = components["schemas"]["DatasetState"];
@@ -146,3 +147,26 @@ export const HIERARCHICAL_COLLECTION_JOB_STATES = [
     "queued",
     "new",
 ] as const;
+
+export function getContentItemState(item: any) {
+    if (isHDCA(item)) {
+        if (item.populated_state === "failed") {
+            return "failed_populated_state";
+        }
+        if (item.populated_state === "new") {
+            return "new_populated_state";
+        }
+        if (item.job_state_summary) {
+            for (const jobState of HIERARCHICAL_COLLECTION_JOB_STATES) {
+                if (item.job_state_summary[jobState] > 0) {
+                    return jobState;
+                }
+            }
+        }
+    } else if (item.accessible === false) {
+        return "inaccessible";
+    } else if (item.state) {
+        return item.state;
+    }
+    return "ok";
+}
diff --git a/client/src/components/History/SwitchToHistoryLink.test.ts b/client/src/components/History/SwitchToHistoryLink.test.ts
index a63d5eee99fb..d5bf29c50b5e 100644
--- a/client/src/components/History/SwitchToHistoryLink.test.ts
+++ b/client/src/components/History/SwitchToHistoryLink.test.ts
@@ -17,6 +17,18 @@ const selectors = {
     historyLink: ".history-link",
 } as const;
 
+// Mock the history store to always return the same current history id
+jest.mock("@/stores/historyStore", () => {
+    const originalModule = jest.requireActual("@/stores/historyStore");
+    return {
+        ...originalModule,
+        useHistoryStore: () => ({
+            ...originalModule.useHistoryStore(),
+            currentHistoryId: "current-history-id",
+        }),
+    };
+});
+
 function mountSwitchToHistoryLinkForHistory(history: HistorySummaryExtended) {
     const pinia = createTestingPinia();
 
@@ -98,6 +110,18 @@ describe("SwitchToHistoryLink", () => {
         await expectOptionForHistory("Switch", history);
     });
 
+    it("should display the appropriate text when the history is the Current history", async () => {
+        const history = {
+            id: "current-history-id",
+            name: "History Current",
+            deleted: false,
+            purged: false,
+            archived: false,
+            user_id: "user_id",
+        } as HistorySummaryExtended;
+        await expectOptionForHistory("This is your current history", history);
+    });
+
     it("should display the View option when the history is purged", async () => {
         const history = {
             id: "purged-history-id",
diff --git a/client/src/components/History/SwitchToHistoryLink.vue b/client/src/components/History/SwitchToHistoryLink.vue
index 5241f42f5d07..047e9ec93fb3 100644
--- a/client/src/components/History/SwitchToHistoryLink.vue
+++ b/client/src/components/History/SwitchToHistoryLink.vue
@@ -48,9 +48,20 @@ const actionText = computed(() => {
     return "View in new tab";
 });
 
+const linkTitle = computed(() => {
+    if (historyStore.currentHistoryId === props.historyId) {
+        return "This is your current history";
+    } else {
+        return `<b>${actionText.value}</b><br>${history.value?.name}`;
+    }
+});
+
 async function onClick(event: MouseEvent, history: HistorySummary) {
     const eventStore = useEventStore();
     const ctrlKey = eventStore.isMac ? event.metaKey : event.ctrlKey;
+    if (!ctrlKey && historyStore.currentHistoryId === history.id) {
+        return;
+    }
     if (!ctrlKey && canSwitch.value) {
         if (props.filters) {
             historyStore.applyFilters(history.id, props.filters);
@@ -78,9 +89,10 @@ function viewHistoryInNewTab(history: HistorySummary) {
         <div v-else class="history-link">
             <BLink
                 v-b-tooltip.hover.top.noninteractive.html
+                data-description="switch to history link"
                 class="truncate"
                 href="#"
-                :title="`<b>${actionText}</b><br>${history.name}`"
+                :title="linkTitle"
                 @click.stop="onClick($event, history)">
                 {{ history.name }}
             </BLink>
diff --git a/client/src/components/JobInformation/JobInformation.vue b/client/src/components/JobInformation/JobInformation.vue
index 3d537f8e3b30..4594f2b5e221 100644
--- a/client/src/components/JobInformation/JobInformation.vue
+++ b/client/src/components/JobInformation/JobInformation.vue
@@ -4,12 +4,13 @@ import HelpText from "components/Help/HelpText";
 import { JobDetailsProvider } from "components/providers/JobProvider";
 import UtcDate from "components/UtcDate";
 import { NON_TERMINAL_STATES } from "components/WorkflowInvocationState/util";
-import { formatDuration, intervalToDuration } from "date-fns";
 import { computed, ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
 import { rethrowSimple } from "@/utils/simple-error";
 
+import { getJobDuration } from "./utilities";
+
 import DecodedId from "../DecodedId.vue";
 import CodeRow from "./CodeRow.vue";
 
@@ -27,9 +28,7 @@ const props = defineProps({
     },
 });
 
-const runTime = computed(() =>
-    formatDuration(intervalToDuration({ start: new Date(job.value.create_time), end: new Date(job.value.update_time) }))
-);
+const runTime = computed(() => getJobDuration(job.value));
 
 const jobIsTerminal = computed(() => job.value && !NON_TERMINAL_STATES.includes(job.value.state));
 
diff --git a/client/src/components/JobInformation/utilities.ts b/client/src/components/JobInformation/utilities.ts
new file mode 100644
index 000000000000..2dff242f94f3
--- /dev/null
+++ b/client/src/components/JobInformation/utilities.ts
@@ -0,0 +1,7 @@
+import { formatDuration, intervalToDuration } from "date-fns";
+
+import type { JobBaseModel } from "@/api/jobs";
+
+export function getJobDuration(job: JobBaseModel): string {
+    return formatDuration(intervalToDuration({ start: new Date(job.create_time), end: new Date(job.update_time) }));
+}
diff --git a/client/src/components/Panels/InvocationsPanel.vue b/client/src/components/Panels/InvocationsPanel.vue
index cd329d1a2ae1..ba810258676e 100644
--- a/client/src/components/Panels/InvocationsPanel.vue
+++ b/client/src/components/Panels/InvocationsPanel.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
+import { ref } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
 
@@ -8,15 +9,27 @@ import InvocationScrollList from "../Workflow/Invocation/InvocationScrollList.vu
 import ActivityPanel from "./ActivityPanel.vue";
 
 const { currentUser, toggledSideBar } = storeToRefs(useUserStore());
+
+const shouldCollapse = ref(false);
+function collapseOnLeave() {
+    if (shouldCollapse.value) {
+        toggledSideBar.value = "";
+    }
+}
 </script>
 
 <template>
+    <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
     <ActivityPanel
         title="Workflow Invocations"
         go-to-all-title="Open Invocations List"
         href="/workflows/invocations"
-        @goToAll="toggledSideBar = ''">
-        <InvocationScrollList v-if="currentUser && !currentUser?.isAnonymous" in-panel />
+        @goToAll="shouldCollapse = true"
+        @mouseleave.native="collapseOnLeave">
+        <InvocationScrollList
+            v-if="currentUser && !currentUser?.isAnonymous"
+            in-panel
+            @invocation-clicked="shouldCollapse = true" />
         <BAlert v-else variant="info" class="mt-3" show>Please log in to view your Workflow Invocations.</BAlert>
     </ActivityPanel>
 </template>
diff --git a/client/src/components/ProgressBar.vue b/client/src/components/ProgressBar.vue
index d980db5afac8..29290ead9387 100644
--- a/client/src/components/ProgressBar.vue
+++ b/client/src/components/ProgressBar.vue
@@ -1,58 +1,50 @@
+<script setup lang="ts">
+// Not really a very generic ProgressBar - consider renaming to StateProgressBar.
+
+import { BProgress, BProgressBar } from "bootstrap-vue";
+
+interface Props {
+    total: number;
+    note: string;
+    loading: boolean;
+    okCount?: number;
+    runningCount?: number;
+    newCount?: number;
+    errorCount?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    total: 1,
+    note: undefined,
+    loading: false,
+    okCount: 0,
+    runningCount: 0,
+    newCount: 0,
+    errorCount: 0,
+});
+</script>
+
 <template>
-    <div class="my-1 progressContainer">
-        <small v-if="note" class="progressNote">
-            {{ note }}<span v-if="loading">.<span class="blinking">..</span></span>
+    <div class="my-1 progress-container">
+        <small v-if="props.note" class="progress-note">
+            {{ props.note }}<span v-if="props.loading">.<span class="blinking">..</span></span>
         </small>
-        <b-progress :max="total">
-            <b-progress-bar variant="success" :value="okCount" />
-            <b-progress-bar variant="danger" :value="errorCount" />
-            <b-progress-bar variant="warning" :value="runningCount" />
-            <b-progress-bar variant="warning" :value="newCount" />
-        </b-progress>
+        <BProgress :max="props.total">
+            <BProgressBar variant="success" :value="props.okCount" />
+            <BProgressBar variant="danger" :value="props.errorCount" />
+            <BProgressBar variant="warning" :value="props.runningCount" />
+            <BProgressBar variant="warning" :value="props.newCount" />
+        </BProgress>
     </div>
 </template>
-<script>
-// Not really a very generic ProgressBar - consider renaming to StateProgressBar.
-export default {
-    props: {
-        total: {
-            type: Number,
-            default: 1,
-        },
-        note: {
-            type: String,
-            default: null,
-        },
-        loading: {
-            type: Boolean,
-            default: false,
-        },
-        okCount: {
-            type: Number,
-            default: 0,
-        },
-        runningCount: {
-            type: Number,
-            default: 0,
-        },
-        newCount: {
-            type: Number,
-            default: 0,
-        },
-        errorCount: {
-            type: Number,
-            default: 0,
-        },
-    },
-};
-</script>
-<style lang="css" scoped>
-.progressNote {
+
+<style scoped>
+.progress-note {
     position: absolute;
     text-align: center;
     width: 100%;
 }
-.progressContainer {
+.progress-container {
     position: relative;
 }
 </style>
diff --git a/client/src/components/Workflow/Editor/NodeInvocationText.vue b/client/src/components/Workflow/Editor/NodeInvocationText.vue
index acc3dd31f555..0b37b9be771c 100644
--- a/client/src/components/Workflow/Editor/NodeInvocationText.vue
+++ b/client/src/components/Workflow/Editor/NodeInvocationText.vue
@@ -1,17 +1,13 @@
 <script setup lang="ts">
+import { faCheckSquare, faSquare } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import { isWorkflowInput } from "@/components/Workflow/constants";
-import { type GraphStep, iconClasses } from "@/composables/useInvocationGraph";
+import { type GraphStep, iconClasses, statePlaceholders } from "@/composables/useInvocationGraph";
 
 const props = defineProps<{
     invocationStep: GraphStep;
 }>();
-
-const statePlaceholders: Record<string, string> = {
-    ok: "successful",
-    error: "failed",
-};
 </script>
 <template>
     <div class="p-1 unselectable">
@@ -29,11 +25,24 @@ const statePlaceholders: Record<string, string> = {
                 </span>
             </div>
         </div>
-        <div v-else-if="isWorkflowInput(props.invocationStep.type)">
-            <!-- TODO: Maybe put a ContentItem here? -->
-            This is an input
+        <div v-else-if="isWorkflowInput(props.invocationStep.type)" class="truncate w-100">
+            <span v-if="typeof props.invocationStep.nodeText === 'boolean'">
+                <FontAwesomeIcon :icon="props.invocationStep.nodeText ? faCheckSquare : faSquare" />
+                {{ props.invocationStep.nodeText }}
+            </span>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span v-else-if="props.invocationStep.nodeText !== undefined" v-html="props.invocationStep.nodeText" />
+            <span v-else>This is an input</span>
         </div>
         <div v-else-if="props.invocationStep.type === 'subworkflow'">This is a subworkflow.</div>
         <div v-else>This step has no jobs as of yet.</div>
     </div>
 </template>
+
+<style scoped>
+.truncate {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+</style>
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 917e3cb55ad4..14c83d2a8cbf 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -92,7 +92,7 @@ import WorkflowEdges from "@/components/Workflow/Editor/WorkflowEdges.vue";
 import WorkflowMinimap from "@/components/Workflow/Editor/WorkflowMinimap.vue";
 import ZoomControl from "@/components/Workflow/Editor/ZoomControl.vue";
 
-const emit = defineEmits(["transform", "graph-offset", "onRemove", "scrollTo"]);
+const emit = defineEmits(["transform", "graph-offset", "onRemove", "scrollTo", "stepClicked"]);
 const props = defineProps({
     steps: { type: Object as PropType<{ [index: string]: Step }>, required: true },
     datatypesMapper: { type: DatatypesMapperModel, required: true },
@@ -176,6 +176,7 @@ function onDragConnector(position: TerminalPosition, draggingTerminal: OutputTer
     isDragging.value = true;
 }
 function onActivate(nodeId: number | null) {
+    emit("stepClicked", nodeId);
     if (activeNodeId.value !== nodeId) {
         stateStore.activeNodeId = nodeId;
     }
diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
index f59331bcfeef..4d6f6e68717d 100644
--- a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
+++ b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -9,27 +9,21 @@ import {
     faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { useElementBounding } from "@vueuse/core";
 import { BAlert, BButton, BCard, BCardBody, BCardHeader } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import type { WorkflowInvocationElementView } from "@/api/invocations";
-import { JobProvider } from "@/components/providers";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
 import { useInvocationGraph } from "@/composables/useInvocationGraph";
 import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
 import type { Workflow } from "@/stores/workflowStore";
-import { withPrefix } from "@/utils/redirect";
 
-import WorkflowInvocationSteps from "./WorkflowInvocationSteps.vue";
 import Heading from "@/components/Common/Heading.vue";
-import ExternalLink from "@/components/ExternalLink.vue";
-import JobInformation from "@/components/JobInformation/JobInformation.vue";
-import JobParameters from "@/components/JobParameters/JobParameters.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
+import WorkflowInvocationStep from "@/components/WorkflowInvocationState/WorkflowInvocationStep.vue";
+import WorkflowInvocationStepHeader from "@/components/WorkflowInvocationState/WorkflowInvocationStepHeader.vue";
 
 library.add(faArrowDown, faChevronDown, faChevronUp, faSignInAlt, faSitemap, faTimes);
 
@@ -70,11 +64,9 @@ const loadingGraph = ref(true);
 const initialLoading = ref(true);
 const errored = ref(false);
 const errorMessage = ref("");
-const showingJobId = ref<string | undefined>(undefined);
 const pollTimeout = ref<any>(null);
-const hideGraph = ref(false);
-const jobCard = ref<BCard | null>(null);
-const loadedJobInfo = ref<HTMLDivElement | null>(null);
+const stepCard = ref<BCard | null>(null);
+const loadedJobInfo = ref<typeof WorkflowInvocationStep | null>(null);
 
 const invocationRef = computed(() => props.invocation);
 
@@ -109,50 +101,6 @@ watch(
     { immediate: true }
 );
 
-// on loading steps, toggle the first one with state === "error" or last one if none are errored
-watch(
-    () => initialLoading.value,
-    (newVal) => {
-        if (!newVal && steps.value) {
-            const errorStep = Object.values(steps.value).find((step) => step.state === "error");
-            if (errorStep) {
-                activeNodeId.value = errorStep.id;
-            } else if (props.isTerminal) {
-                activeNodeId.value = Object.values(steps.value)?.slice(-1)[0]?.id || null;
-            }
-        }
-    },
-    { immediate: true }
-);
-
-// when the graph is hidden/visible, reset the active node and showingJobId
-watch(
-    () => hideGraph.value,
-    () => {
-        showingJobId.value = undefined;
-        activeNodeId.value = null;
-    }
-);
-
-// scroll to the job card when it is loaded (only on invocation route)
-if (props.isFullPage) {
-    watch(
-        () => loadedJobInfo.value,
-        async (jobInfo) => {
-            if (jobInfo) {
-                scrollJobToView();
-            }
-        },
-        { immediate: true }
-    );
-}
-
-// properties for handling the flex-draggable steps panel
-const invocationContainer = ref<HTMLDivElement | null>(null);
-const { width: containerWidth } = useElementBounding(invocationContainer);
-const minWidth = computed(() => containerWidth.value * 0.3);
-const maxWidth = computed(() => 0.7 * containerWidth.value);
-
 onUnmounted(() => {
     clearTimeout(pollTimeout.value);
 });
@@ -196,16 +144,15 @@ async function pollInvocationGraph() {
     }
 }
 
-function scrollJobToView() {
-    const jobCardHeader = jobCard.value?.querySelector(".card-header");
-    jobCardHeader?.scrollIntoView({ behavior: "smooth", block: "start" });
+function scrollStepToView() {
+    const stepCardHeader = stepCard.value?.querySelector(".card-header");
+    stepCardHeader?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
 
-function toggleActiveStep(stepId: number) {
-    if (activeNodeId.value === stepId) {
-        activeNodeId.value = null;
-    } else {
-        activeNodeId.value = stepId;
+/** On a repetition of the step clicked, scroll to the step */
+function stepClicked(nodeId: number | null) {
+    if (nodeId === activeNodeId.value) {
+        scrollStepToView();
     }
 }
 </script>
@@ -222,8 +169,8 @@ function toggleActiveStep(stepId: number) {
             <BAlert v-else show variant="danger"> Unknown Error </BAlert>
         </div>
         <div v-else-if="steps && datatypesMapper">
-            <div ref="invocationContainer" class="d-flex">
-                <div v-if="!hideGraph" class="position-relative w-100">
+            <div class="d-flex">
+                <div class="position-relative w-100">
                     <BCard no-body>
                         <WorkflowGraph
                             class="invocation-graph"
@@ -234,93 +181,49 @@ function toggleActiveStep(stepId: number) {
                             :show-minimap="props.showMinimap"
                             :show-zoom-controls="props.showZoomControls"
                             is-invocation
-                            readonly />
+                            readonly
+                            @stepClicked="stepClicked" />
                     </BCard>
-                    <BButton
-                        class="position-absolute text-decoration-none m-2"
-                        style="top: 0; right: 0"
-                        data-description="hide invocation graph"
-                        size="sm"
-                        @click="hideGraph = true">
-                        <FontAwesomeIcon :icon="faTimes" class="mr-1" />
-                        <span v-localize>Hide Graph</span>
-                    </BButton>
                 </div>
-                <BButton
-                    v-else
-                    v-b-tooltip.noninteractive.hover.right="'Show Graph'"
-                    size="sm"
-                    class="p-0"
-                    style="width: min-content"
-                    @click="hideGraph = false">
-                    <FontAwesomeIcon :icon="faSitemap" />
-                    <div v-localize>Show Graph</div>
-                </BButton>
-                <component
-                    :is="!hideGraph ? FlexPanel : 'div'"
-                    v-if="containerWidth"
-                    side="right"
-                    :collapsible="false"
-                    class="ml-2"
-                    :class="{ 'w-100': hideGraph }"
-                    :min-width="minWidth"
-                    :max-width="maxWidth"
-                    :default-width="containerWidth * 0.4">
-                    <WorkflowInvocationSteps
-                        class="graph-steps-aside"
-                        :class="{ 'steps-fixed-height': !hideGraph }"
-                        :steps="steps"
-                        :store-id="storeId"
-                        :invocation="invocationRef"
-                        :workflow="props.workflow"
-                        :is-full-page="props.isFullPage"
-                        :hide-graph="hideGraph"
-                        :showing-job-id="showingJobId || ''"
-                        :active-node-id="activeNodeId !== null ? activeNodeId : undefined"
-                        @update:showing-job-id="(jobId) => (showingJobId = jobId)"
-                        @focus-on-step="toggleActiveStep" />
-                </component>
             </div>
-            <BCard v-if="!hideGraph" ref="jobCard" class="mt-1" no-body>
-                <BCardHeader class="d-flex justify-content-between align-items-center">
-                    <Heading inline size="md">
-                        <span v-if="showingJobId">
-                            Showing Job Details for
-                            <ExternalLink :href="withPrefix(`/jobs/${showingJobId}/view`)">
-                                <code>{{ showingJobId }}</code>
-                            </ExternalLink>
-                        </span>
-                        <span v-else>No Job Selected</span>
+            <BCard ref="stepCard" class="mt-1" no-body>
+                <BCardHeader
+                    class="d-flex justify-content-between align-items-center"
+                    :class="activeNodeId !== null ? steps[activeNodeId]?.headerClass : ''">
+                    <Heading inline size="sm" class="w-100 mr-2">
+                        <WorkflowInvocationStepHeader
+                            v-if="activeNodeId !== null"
+                            class="w-100"
+                            :workflow-step="props.workflow.steps[activeNodeId]"
+                            :graph-step="steps[activeNodeId]"
+                            :invocation-step="props.invocation.steps[activeNodeId]" />
+                        <span v-else>No Step Selected</span>
                     </Heading>
-                    <div>
+                    <div class="d-flex flex-gapx-1">
                         <BButton
-                            v-if="showingJobId"
-                            v-b-tooltip.hover.noninteractive
-                            title="Scroll to Job"
-                            @click="scrollJobToView()">
+                            v-if="activeNodeId !== null"
+                            title="Scroll to Step"
+                            size="sm"
+                            @click="scrollStepToView()">
                             <FontAwesomeIcon :icon="faArrowDown" />
                         </BButton>
-                        <BButton
-                            v-if="showingJobId"
-                            v-b-tooltip.hover.noninteractive
-                            title="Hide Job"
-                            @click="showingJobId = undefined">
+                        <BButton v-if="activeNodeId !== null" title="Hide Step" size="sm" @click="activeNodeId = null">
                             <FontAwesomeIcon :icon="faTimes" />
                         </BButton>
                     </div>
                 </BCardHeader>
                 <BCardBody>
-                    <JobProvider v-if="showingJobId" :id="showingJobId" v-slot="{ item, loading }">
-                        <BAlert v-if="loading" show>
-                            <LoadingSpan message="Loading Job Information" />
-                        </BAlert>
-                        <div v-else ref="loadedJobInfo">
-                            <JobInformation v-if="item" :job_id="item.id" />
-                            <p></p>
-                            <JobParameters v-if="item" :job-id="item.id" :include-title="false" />
-                        </div>
-                    </JobProvider>
-                    <BAlert v-else show>Select a job from a step in the invocation to view its details here.</BAlert>
+                    <WorkflowInvocationStep
+                        v-if="activeNodeId !== null"
+                        ref="loadedJobInfo"
+                        :key="activeNodeId"
+                        :invocation="props.invocation"
+                        :workflow="props.workflow"
+                        :workflow-step="props.workflow.steps[activeNodeId]"
+                        in-graph-view
+                        :graph-step="steps[activeNodeId]"
+                        expanded />
+                    <BAlert v-else show>Click on a step in the invocation to view its details here.</BAlert>
                 </BCardBody>
             </BCard>
         </div>
diff --git a/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue b/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
index 458d87aab8ad..b481ece4beec 100644
--- a/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
+++ b/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
@@ -2,84 +2,52 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronDown, faChevronUp, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { computed, nextTick, ref, watch } from "vue";
+import { BAlert } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, ref } from "vue";
 
 import type { WorkflowInvocationElementView } from "@/api/invocations";
 import { isWorkflowInput } from "@/components/Workflow/constants";
-import type { GraphStep } from "@/composables/useInvocationGraph";
-import type { Workflow } from "@/stores/workflowStore";
+import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
+import { useInvocationStore } from "@/stores/invocationStore";
 
+import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowInvocationStep from "@/components/WorkflowInvocationState/WorkflowInvocationStep.vue";
 
 library.add(faChevronDown, faChevronUp, faSignInAlt);
 
-interface Props {
-    /** The steps for the invocation graph */
-    steps: { [index: string]: GraphStep };
+const props = defineProps<{
     /** The store id for the invocation graph */
     storeId: string;
     /** The invocation to display */
     invocation: WorkflowInvocationElementView;
-    /** The workflow which was run */
-    workflow: Workflow;
-    /** Whether the invocation graph is hidden */
-    hideGraph?: boolean;
-    /** The id for the currently shown job */
-    showingJobId: string;
     /** Whether the steps are being rendered on the dedicated invocation page/route */
     isFullPage?: boolean;
-    /** The active node on the graph */
-    activeNodeId?: number;
-}
-
-const emit = defineEmits<{
-    (e: "focus-on-step", stepId: number): void;
-    (e: "update:showing-job-id", value: string | undefined): void;
 }>();
 
-const props = withDefaults(defineProps<Props>(), {
-    hideGraph: true,
-    activeNodeId: undefined,
-});
+const invocationStore = useInvocationStore();
+const { graphStepsByStoreId } = storeToRefs(invocationStore);
+const graphSteps = computed(() => graphStepsByStoreId.value[props.storeId]);
 
 const stepsDiv = ref<HTMLDivElement>();
 
-const workflowInputSteps = Object.values(props.workflow.steps).filter((step) => isWorkflowInput(step.type));
+const { workflow, loading, error } = useWorkflowInstance(props.invocation.workflow_id);
+
+const workflowInputSteps = workflow.value
+    ? Object.values(workflow.value.steps).filter((step) => isWorkflowInput(step.type))
+    : [];
 const oneOrNoInput = computed(() => workflowInputSteps.length <= 1);
 const expandInvocationInputs = ref(oneOrNoInput.value);
-
-watch(
-    () => [props.activeNodeId, stepsDiv.value],
-    async ([nodeId, card]) => {
-        // if the active node id is an input step, expand the inputs section if not already expanded
-        if (!expandInvocationInputs.value) {
-            const isAnInput = workflowInputSteps.findIndex((step) => step.id === props.activeNodeId) !== -1;
-            expandInvocationInputs.value = isAnInput;
-        }
-
-        await nextTick();
-
-        // on full page view, scroll to the active step card in the steps section
-        if (props.isFullPage) {
-            if (nodeId !== undefined && card) {
-                // scroll to the active step card
-                const stepCard = stepsDiv.value?.querySelector(`[data-index="${props.activeNodeId}"]`);
-                stepCard?.scrollIntoView({ block: "nearest", inline: "start" });
-            }
-        }
-        // clear any job being shown
-        emit("update:showing-job-id", undefined);
-    },
-    { immediate: true }
-);
-
-function showJob(jobId: string | undefined) {
-    emit("update:showing-job-id", jobId);
-}
 </script>
 
 <template>
-    <div ref="stepsDiv" class="d-flex flex-column w-100">
+    <BAlert v-if="loading" variant="info" show>
+        <LoadingSpan message="Loading workflow" />
+    </BAlert>
+    <BAlert v-else-if="error" variant="danger" show>
+        {{ error }}
+    </BAlert>
+    <div v-else-if="graphSteps && workflow" ref="stepsDiv" class="d-flex flex-column w-100">
         <!-- Input Steps grouped in a separate portlet -->
         <div v-if="!oneOrNoInput" class="ui-portlet-section w-100">
             <div
@@ -97,20 +65,16 @@ function showJob(jobId: string | undefined) {
                 <FontAwesomeIcon class="float-right" :icon="expandInvocationInputs ? faChevronUp : faChevronDown" />
             </div>
         </div>
-        <div v-for="step in props.workflow.steps" :key="step.id">
+        <div v-for="step in workflow.steps" :key="step.id">
             <WorkflowInvocationStep
                 v-if="!isWorkflowInput(step.type) || (isWorkflowInput(step.type) && expandInvocationInputs)"
                 :class="{ 'mx-1': !oneOrNoInput && isWorkflowInput(step.type) }"
                 :data-index="step.id"
                 :invocation="props.invocation"
-                :workflow="props.workflow"
+                :workflow="workflow"
                 :workflow-step="step"
-                :in-graph-view="!props.hideGraph"
-                :graph-step="steps[step.id]"
-                :expanded="props.hideGraph ? undefined : props.activeNodeId === step.id"
-                :showing-job-id="props.showingJobId"
-                @show-job="showJob"
-                @update:expanded="emit('focus-on-step', step.id)" />
+                :graph-step="graphSteps[step.id]" />
         </div>
     </div>
+    <BAlert v-else variant="info" show> There are no steps to display. </BAlert>
 </template>
diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
index 0e78c686650f..f42dd3b858ed 100644
--- a/client/src/components/Workflow/Invocation/InvocationScrollList.vue
+++ b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -32,6 +32,8 @@ const props = withDefaults(defineProps<Props>(), {
     limit: 20,
 });
 
+const emit = defineEmits(["invocation-clicked"]);
+
 library.add(faEye, faArrowDown, faInfoCircle);
 
 const stateClasses: Record<string, string> = {
@@ -97,6 +99,7 @@ function cardClicked(invocation: WorkflowInvocation) {
     let path = `/workflows/invocations/${invocation.id}`;
     if (props.inPanel) {
         path += "?from_panel=true";
+        emit("invocation-clicked");
     }
     router.push(path);
 }
diff --git a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
index 4beabd2a4f04..13d9d6cb8b55 100644
--- a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
@@ -1,102 +1,59 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+
+import type { WorkflowInvocation } from "@/api/invocations";
+import { useHistoryStore } from "@/stores/historyStore";
+import { refreshContentsWrapper } from "@/utils/data";
+import Webhooks from "@/utils/webhooks";
+
+import GridInvocation from "@/components/Grid/GridInvocation.vue";
+import WorkflowInvocationState from "@/components/WorkflowInvocationState/WorkflowInvocationState.vue";
+
+const props = defineProps<{
+    workflowName: string;
+    invocations: WorkflowInvocation[];
+}>();
+
+onMounted(() => {
+    new Webhooks.WebhookView({
+        type: "workflow",
+        toolId: null,
+        toolVersion: null,
+    });
+    refreshContentsWrapper();
+});
+
+const historyStore = useHistoryStore();
+
+const targetHistories = props.invocations.reduce((histories, invocation) => {
+    if (invocation.history_id && !histories.includes(invocation.history_id)) {
+        histories.push(invocation.history_id);
+    }
+    return histories;
+}, [] as string[]);
+const wasNewHistoryTarget =
+    props.invocations.length > 0 &&
+    props.invocations[0]?.history_id &&
+    historyStore.currentHistoryId !== props.invocations[0].history_id;
+</script>
+
 <template>
     <div>
         <div class="donemessagelarge">
-            <p>
-                Successfully invoked workflow <b>{{ workflowName }}</b>
-                <em v-if="multipleInvocations"> - {{ timesExecuted }} times</em>.
-            </p>
-
-            <p v-if="multipleHistoryTargets">
+            Successfully invoked workflow <b>{{ props.workflowName }}</b>
+            <em v-if="props.invocations.length > 1"> - {{ props.invocations.length }} times</em>.
+            <span v-if="targetHistories.length > 1">
                 This workflow will generate results in multiple histories. You can observe progress in the
                 <router-link to="/histories/view_multiple">history multi-view</router-link>.
-            </p>
-            <p v-else-if="wasNewHistoryTarget">
-                This workflow will generate results in a new history.
-                <a class="workflow-new-history-target-link" href="javascript:void(0)" @click="switchHistory"
-                    >Switch to that history now</a
-                >.
-            </p>
-            <p v-else>You can check the status of queued jobs and view the resulting data the History panel.</p>
-            <p>
-                View all of your workflow invocations in the
-                <router-link to="/workflows/invocations">Invocations List</router-link>.
-            </p>
+            </span>
         </div>
+        <GridInvocation v-if="props.invocations.length > 1" :invocations-list="props.invocations" />
         <WorkflowInvocationState
-            v-for="(invocation, index) in invocations"
-            :key="invocation.id"
-            :index="index"
-            :invocation-id="invocation.id"
-            full-page />
+            v-else-if="props.invocations.length === 1 && props.invocations[0]"
+            :invocation-id="props.invocations[0].id"
+            :new-history-target="wasNewHistoryTarget ? props.invocations[0].history_id : undefined"
+            is-full-page
+            success />
         <div id="webhook-view"></div>
     </div>
 </template>
-
-<script>
-import WorkflowInvocationState from "components/WorkflowInvocationState/WorkflowInvocationState";
-import { getAppRoot } from "onload/loadConfig";
-import { mapActions, mapState } from "pinia";
-import { refreshContentsWrapper } from "utils/data";
-import Webhooks from "utils/webhooks";
-
-import { useHistoryStore } from "@/stores/historyStore";
-
-export default {
-    components: {
-        WorkflowInvocationState,
-    },
-    props: {
-        workflowName: {
-            type: String,
-            required: true,
-        },
-        invocations: {
-            type: Array,
-            required: true,
-        },
-    },
-    computed: {
-        ...mapState(useHistoryStore, ["currentHistoryId"]),
-        timesExecuted() {
-            return this.invocations.length;
-        },
-        multipleInvocations() {
-            return this.timesExecuted > 1;
-        },
-        multipleHistoryTargets() {
-            return this.targetHistories.length > 1;
-        },
-        targetHistories() {
-            return this.invocations.reduce((histories, invocation) => {
-                if (invocation.history_id && !histories.includes(invocation.history_id)) {
-                    histories.push(invocation.history_id);
-                }
-                return histories;
-            }, []);
-        },
-        multiHistoryView() {
-            return `${getAppRoot()}histories/view_multiple`;
-        },
-        wasNewHistoryTarget() {
-            if (this.invocations.length < 1) {
-                return false;
-            }
-            return this.invocations[0].history_id && this.currentHistoryId != this.invocations[0].history_id;
-        },
-    },
-    mounted() {
-        new Webhooks.WebhookView({
-            type: "workflow",
-            toolId: null,
-            toolVersion: null,
-        });
-        refreshContentsWrapper();
-    },
-    methods: {
-        ...mapActions(useHistoryStore, ["setCurrentHistory"]),
-        async switchHistory() {
-            await this.setCurrentHistory(this.invocations[0].history_id);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Workflow/WorkflowRunButton.vue b/client/src/components/Workflow/WorkflowRunButton.vue
index 2b1957246cae..8d23de3c65c8 100644
--- a/client/src/components/Workflow/WorkflowRunButton.vue
+++ b/client/src/components/Workflow/WorkflowRunButton.vue
@@ -13,6 +13,7 @@ interface Props {
     title?: string;
     disabled?: boolean;
     version?: number;
+    force?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -20,6 +21,12 @@ const props = defineProps<Props>();
 const runPath = computed(
     () => `/workflows/run?id=${props.id}${props.version !== undefined ? `&version=${props.version}` : ""}`
 );
+
+function forceRunPath() {
+    if (props.force) {
+        window.open(runPath.value);
+    }
+}
 </script>
 
 <template>
@@ -31,7 +38,8 @@ const runPath = computed(
         variant="primary"
         size="sm"
         :disabled="disabled"
-        :to="runPath">
+        :to="runPath"
+        @click="forceRunPath">
         <FontAwesomeIcon :icon="faPlay" fixed-width />
 
         <span v-if="full" v-localize>Run</span>
diff --git a/client/src/components/WorkflowInvocationState/JobStep.test.js b/client/src/components/WorkflowInvocationState/JobStep.test.js
deleted file mode 100644
index b11420459940..000000000000
--- a/client/src/components/WorkflowInvocationState/JobStep.test.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { createLocalVue, mount } from "@vue/test-utils";
-import BootstrapVue from "bootstrap-vue";
-
-import JobStep from "./JobStep";
-import jobs from "./test/json/jobs.json";
-
-// create an extended `Vue` constructor
-const localVue = createLocalVue();
-
-// install plugins as normal
-localVue.use(BootstrapVue);
-
-describe("DatasetUIWrapper.vue with Dataset", () => {
-    let wrapper;
-    let propsData;
-
-    beforeEach(async () => {
-        propsData = {
-            jobs: jobs,
-        };
-        wrapper = mount(JobStep, {
-            localVue,
-            propsData,
-            stubs: {
-                JobProvider: { template: "<div class='expanded'>I am expanded</div>" },
-            },
-        });
-    });
-    test("it renders a table with 2 jobs", async () => {
-        expect(wrapper.find("tbody").findAll("tr").length).toBe(2);
-    });
-    test("it expands on row click", async () => {
-        // verify no item is expanded
-        expect(wrapper.vm.toggledItems["1"]).toBe(undefined);
-        expect(wrapper.find(".expanded").exists()).toBeFalsy();
-        // expand
-        await wrapper.find("tbody").find("tbody").find("tr").trigger("click");
-        expect(wrapper.vm.toggledItems["1"]).toBeTruthy();
-        expect(wrapper.find(".expanded").exists()).toBeTruthy();
-        await wrapper.find("tbody").find("tbody").find("tr").trigger("click");
-        // close again
-        expect(wrapper.vm.toggledItems["1"]).toBeFalsy();
-        expect(wrapper.find(".expanded").exists()).toBeFalsy();
-    });
-    test("it sustains expanded on prop update", async () => {
-        // verify no item is expanded
-        expect(wrapper.vm.toggledItems["1"]).toBe(undefined);
-        expect(wrapper.find(".expanded").exists()).toBeFalsy();
-        // expand
-        await wrapper.find("tbody").find("tbody").find("tr").trigger("click");
-        expect(wrapper.vm.toggledItems["1"]).toBeTruthy();
-        expect(wrapper.find(".expanded").exists()).toBeTruthy();
-        // 2 collapsed rows, plus 1 expanded row
-        expect(countVisibleRows(wrapper)).toBe(3);
-        // update data
-        const additionalJob = { ...jobs[0], id: 3 };
-        await wrapper.setProps({ jobs: [...jobs, additionalJob] });
-        // verify new data is displayed
-        expect(countVisibleRows(wrapper)).toBe(4);
-        // verify first row is still expanded
-        expect(wrapper.vm.toggledItems["1"]).toBeTruthy();
-        expect(wrapper.find(".expanded").exists()).toBeTruthy();
-    });
-});
-
-/** When expanding a row, a hidden `<tr>` may be added like:
- * ```
- * <tr aria-hidden="true" role="presentation" class="d-none"></tr>
- * ```
- * and this function will count rows other than these hidden ones.
- */
-function countVisibleRows(wrapper) {
-    const rows = wrapper.find("tbody").find("tbody").findAll("tr");
-    const visibleRows = rows.filter((row) => {
-        // only count rows that are not hidden
-        return !(row.attributes("aria-hidden") && row.attributes("aria-hidden") === "true");
-    });
-    return visibleRows.length;
-}
diff --git a/client/src/components/WorkflowInvocationState/JobStep.test.ts b/client/src/components/WorkflowInvocationState/JobStep.test.ts
new file mode 100644
index 000000000000..65ba2af0fcfd
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/JobStep.test.ts
@@ -0,0 +1,145 @@
+import { createTestingPinia } from "@pinia/testing";
+import { createLocalVue, mount, type Wrapper } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+
+import { HttpResponse, useServerMock } from "@/api/client/__mocks__";
+import type { JobDisplayParametersSummary, ShowFullJobResponse } from "@/api/jobs";
+import paramResponse from "@/components/JobParameters/parameters-response.json";
+
+import jobs from "./test/json/jobs.json";
+
+import JobStep from "./JobStep.vue";
+
+const localVue = createLocalVue();
+
+const { server, http } = useServerMock();
+
+const SELECTORS = {
+    JOB_TABS_LIST: ".nav-pills",
+    JOB_TAB: ".nav-link",
+    JOB_CONTENT: "[data-description='workflow invocation job'] > .card-body",
+};
+
+describe("DatasetUIWrapper.vue with Dataset", () => {
+    let wrapper: Wrapper<Vue>;
+    let propsData;
+    let iteration: "base" | "state_change" = "base";
+    const pinia = createTestingPinia();
+
+    function getSummary(job_id: string) {
+        let summary = jobs.find((s) => s.id === job_id);
+        if (summary && iteration === "state_change" && job_id === "1") {
+            summary.state = "running";
+        }
+        if (job_id === "3") {
+            summary = { ...(jobs[0] as any), id: "3" };
+        }
+        return summary as ShowFullJobResponse;
+    }
+
+    beforeEach(async () => {
+        server.use(
+            http.get("/api/jobs/{job_id}", ({ response, params }) => {
+                const { job_id } = params;
+                const summary = getSummary(job_id);
+                if (!summary) {
+                    return response("4XX").json({ err_msg: "Job not found", err_code: 404 }, { status: 404 });
+                }
+                return response(200).json(summary);
+            })
+        );
+        server.use(
+            http.get("/api/invocations", ({ response }) => {
+                return response(200).json([]);
+            })
+        );
+        server.use(
+            http.get("/api/jobs/{job_id}/parameters_display", ({ response }) => {
+                return response(200).json(paramResponse as JobDisplayParametersSummary);
+            })
+        );
+        server.use(
+            http.get("/api/datasets/{dataset_id}", ({ response, params }) => {
+                const { dataset_id } = params;
+                // We need to use untyped here because this endpoint is not
+                // described in the OpenAPI spec due to its complexity for now.
+                return response.untyped(
+                    HttpResponse.json({
+                        id: dataset_id,
+                        creating_job: `job-${dataset_id}`,
+                    })
+                );
+            })
+        );
+
+        propsData = {
+            jobs: jobs,
+        };
+        wrapper = mount(JobStep as object, {
+            localVue,
+            propsData,
+            stubs: {
+                BPopover: true,
+                ContentItem: true,
+                FontAwesomeIcon: true,
+                JobInformation: true,
+                JobParameters: true,
+                BTooltip: true,
+                LoadingSpan: true,
+            },
+            pinia,
+        });
+        await flushPromises();
+    });
+    test("shows as many tabs as jobs and clicking tab changes shown job", async () => {
+        // it renders 2 jobs in 2 tabs with states
+        const ulTabs = wrapper.find(SELECTORS.JOB_TABS_LIST);
+        const liTabs = ulTabs.findAll(SELECTORS.JOB_TAB);
+        expect(liTabs.length).toBe(jobs.length);
+
+        const jobsContents = wrapper.findAll(SELECTORS.JOB_CONTENT);
+        expect(jobsContents.length).toBe(jobs.length);
+
+        liTabs.wrappers.forEach((liTab, i) => {
+            expect(jobs[i]).toBeTruthy();
+            expect(liTab.text()).toEqual(jobs[i]?.state);
+            // expect the first job to be shown and rest to be hidden
+            expect(liTab.attributes("aria-selected")).toEqual(i === 0 ? "true" : "false");
+            expect(jobsContents.at(i).attributes("style")).toEqual(i === 0 ? "" : "display: none;");
+        });
+
+        // click on the second tab
+        await liTabs.at(1).trigger("click");
+        await flushPromises();
+
+        // expect the second job to be shown and rest to be hidden
+        jobsContents.wrappers.forEach((jobContent, i) => {
+            expect(jobContent.attributes("style")).toEqual(i === 1 ? "" : "display: none;");
+            expect(liTabs.at(i).attributes("aria-selected")).toEqual(i === 1 ? "true" : "false");
+        });
+    });
+    test("it reacts to prop update", async () => {
+        // verify initial data is displayed for first tab
+        expect(wrapper.find(SELECTORS.JOB_TAB).text()).toBe("new");
+
+        // update first job to change state from 'new' to 'running'
+        iteration = "state_change";
+        // technically, we only need to trigger a prop update, the state
+        // change is handled by the mock server in `getSummary`
+        const updatedJob = { ...jobs[0], state: "running" };
+        await wrapper.setProps({ jobs: [updatedJob, ...jobs.slice(1)] });
+        await flushPromises();
+
+        // verify new data is displayed
+        expect(wrapper.find(SELECTORS.JOB_TAB).text()).toBe("running");
+
+        // update data
+        const additionalJob = { ...jobs[0], id: "3" };
+        await wrapper.setProps({ jobs: [...jobs, additionalJob] });
+        await flushPromises();
+        // verify new data is displayed
+        const ulTabs = wrapper.find(SELECTORS.JOB_TABS_LIST);
+        const liTabs = ulTabs.findAll(SELECTORS.JOB_TAB);
+        expect(liTabs.length).toBe(jobs.length + 1);
+    });
+});
diff --git a/client/src/components/WorkflowInvocationState/JobStep.vue b/client/src/components/WorkflowInvocationState/JobStep.vue
index 694d6304e2ab..321ae5c3c7dc 100644
--- a/client/src/components/WorkflowInvocationState/JobStep.vue
+++ b/client/src/components/WorkflowInvocationState/JobStep.vue
@@ -1,144 +1,94 @@
-<template>
-    <b-card v-if="jobs">
-        <b-table
-            small
-            caption-top
-            :items="jobsProvider"
-            :fields="fields"
-            primary-key="id"
-            :tbody-tr-class="showingJobCls"
-            :striped="!invocationGraph"
-            @row-clicked="rowClicked">
-            <template v-slot:cell(showing_job)="data">
-                <span v-if="showingJobId === data.item.id || data.item._showDetails">
-                    <FontAwesomeIcon v-if="!invocationGraph" icon="caret-down" size="lg" />
-                    <span v-else>
-                        <FontAwesomeIcon class="text-primary" icon="fa-eye" />
-                    </span>
-                </span>
-                <span v-else>
-                    <FontAwesomeIcon v-if="!invocationGraph" icon="caret-right" size="lg" />
-                    <span v-else>
-                        <FontAwesomeIcon icon="fa-eye" />
-                    </span>
-                </span>
-            </template>
-            <template v-slot:row-details="row">
-                <JobProvider :id="row.item.id" v-slot="{ item, loading }">
-                    <div v-if="loading"><b-spinner label="Loading Job..."></b-spinner></div>
-                    <div v-else>
-                        <b-card>
-                            <JobInformation v-if="item" :job_id="item.id" />
-                            <p></p>
-                            <JobParameters v-if="item" :job-id="item.id" :include-title="false" />
-                        </b-card>
-                    </div>
-                </JobProvider>
-            </template>
-            <template v-slot:cell(create_time)="data">
-                <UtcDate :date="data.value" mode="elapsed" />
-            </template>
-            <template v-slot:cell(update_time)="data">
-                <UtcDate :date="data.value" mode="elapsed" />
-            </template>
-        </b-table>
-    </b-card>
-</template>
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
+<script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import BootstrapVue from "bootstrap-vue";
-import JobInformation from "components/JobInformation/JobInformation";
-import JobParameters from "components/JobParameters/JobParameters";
-import { JobProvider } from "components/providers";
-import UtcDate from "components/UtcDate";
-import Vue from "vue";
+import { BAlert, BTab, BTabs } from "bootstrap-vue";
+import Vue, { computed, ref, watch } from "vue";
 
-Vue.use(BootstrapVue);
-library.add(faCaretDown, faCaretRight);
+import { GalaxyApi } from "@/api";
+import { type JobBaseModel, type JobDetails } from "@/api/jobs";
+import { getHeaderClass, iconClasses } from "@/composables/useInvocationGraph";
+import { rethrowSimple } from "@/utils/simple-error";
 
-export default {
-    components: {
-        FontAwesomeIcon,
-        UtcDate,
-        JobProvider,
-        JobParameters,
-        JobInformation,
-    },
-    props: {
-        jobs: { type: Array, required: true },
-        invocationGraph: { type: Boolean, default: false },
-        showingJobId: { type: String, default: null },
-    },
-    data() {
-        return {
-            fields: [
-                { key: "showing_job", label: "", sortable: false },
-                { key: "state", sortable: true },
-                { key: "update_time", label: "Updated", sortable: true },
-                { key: "create_time", label: "Created", sortable: true },
-            ],
-            toggledItems: {},
-        };
-    },
-    methods: {
-        jobsProvider(ctx, callback) {
-            // It may seem unnecessary to use a provider here, since the jobs prop
-            // is being updated externally. However we need to keep track of the
-            // _showDetails attribute which determines whether the row is shown as expanded
-            this.$watch(
-                "jobs",
-                function () {
-                    // update new jobs array with current state
-                    const toggledJobs = this.jobs.map((e) => {
-                        return { ...e, _showDetails: !!this.toggledItems[e.id] };
-                    });
-                    callback(toggledJobs);
+import JobDetailsDisplayed from "../JobInformation/JobDetails.vue";
+import LoadingSpan from "../LoadingSpan.vue";
+
+interface Props {
+    jobs: JobBaseModel[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    jobs: () => [],
+});
+
+const loading = ref(true);
+const initialLoading = ref(true);
+const jobsDetails = ref<{ [key: string]: JobDetails }>({});
+
+watch(
+    () => props.jobs,
+    async (propJobs: JobBaseModel[]) => {
+        loading.value = true;
+        for (const job of propJobs) {
+            const { data, error } = await GalaxyApi().GET("/api/jobs/{job_id}", {
+                params: {
+                    path: { job_id: job.id },
+                    query: { full: true },
                 },
-                { immediate: true }
-            );
-            return null;
-        },
-        toggleDetails(item) {
-            // toggle item
-            item._showDetails = !item._showDetails;
-            // update state
-            this.toggledItems[item.id] = item._showDetails;
-        },
-        rowClicked(item) {
-            if (this.invocationGraph) {
-                this.$emit("row-clicked", item.id);
-            } else {
-                this.toggleDetails(item);
-            }
-        },
-        showingJobCls(item, type) {
-            let cls = "job-tr-class cursor-pointer unselectable";
-            if (this.showingJobId === item.id) {
-                cls += " showing-job";
+            });
+            Vue.set(jobsDetails.value, job.id, data);
+            if (error) {
+                rethrowSimple(error);
             }
-            return cls;
-        },
+        }
+        if (initialLoading.value) {
+            initialLoading.value = false;
+        }
+        loading.value = false;
     },
-};
-</script>
+    { immediate: true }
+);
+
+const firstJob = computed(() => Object.values(jobsDetails.value)[0]);
+const jobCount = computed(() => Object.keys(jobsDetails.value).length);
 
-<style lang="scss">
-// NOTE: Couldn't use scoped style due to it not working for the BTable class rows
-@import "theme/blue.scss";
-@import "base.scss";
+function getIcon(job: JobDetails) {
+    return iconClasses[job.state];
+}
 
-// Table row class
-.job-tr-class {
-    &:hover {
-        background-color: $brand-secondary;
-    }
-    &.showing-job {
-        background-color: darken($brand-secondary, 10%);
-    }
-    &:not(.showing-job) {
-        border-top: 0.2rem solid $brand-secondary;
-    }
+function getTabClass(job: JobDetails) {
+    return {
+        ...getHeaderClass(job.state),
+        "d-flex": true,
+        "text-center": true,
+    };
 }
-</style>
+</script>
+
+<template>
+    <BAlert v-if="initialLoading" variant="info" show>
+        <LoadingSpan message="Loading Jobs" />
+    </BAlert>
+    <BAlert v-else-if="!jobsDetails || !jobCount" variant="info" show> No jobs found for this step. </BAlert>
+    <div v-else-if="jobCount === 1 && firstJob">
+        <JobDetailsDisplayed :job="firstJob" />
+    </div>
+    <BTabs v-else vertical pills card nav-class="p-0" active-tab-class="p-0">
+        <BTab
+            v-for="job in jobsDetails"
+            :key="job.id"
+            data-description="workflow invocation job"
+            :title-item-class="getTabClass(job)"
+            title-link-class="w-100">
+            <template v-slot:title>
+                {{ job.state }}
+                <FontAwesomeIcon
+                    v-if="getIcon(job)"
+                    :class="getIcon(job)?.class"
+                    :icon="getIcon(job)?.icon"
+                    :spin="getIcon(job)?.spin" />
+            </template>
+            <div>
+                <JobDetailsDisplayed :job="job" />
+            </div>
+        </BTab>
+    </BTabs>
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts
index 6964145c03b6..eaabaad4015d 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts
@@ -75,7 +75,12 @@ async function mountWorkflowInvocationHeader(ownsWorkflow = true, hasReturnBtn =
                 ...sampleInvocation,
                 workflow_id: !unimportableWorkflow ? sampleInvocation.workflow_id : UNIMPORTABLE_WORKFLOW_INSTANCE_ID,
             },
+            invocationState: "scheduled",
+            isFullPage: true,
+            jobStatesSummary: {},
             fromPanel: !hasReturnBtn,
+            invocationSchedulingTerminal: true,
+            invocationAndJobTerminal: true,
         },
         localVue,
         pinia: createTestingPinia(),
@@ -102,12 +107,6 @@ describe("WorkflowInvocationHeader renders", () => {
         expect(runButton.attributes("title")).toContain(SAMPLE_WORKFLOW.name);
     });
 
-    it("return to invocations list button if not from panel", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader(false, true);
-        const returnButton = wrapper.find(SELECTORS.RETURN_TO_INVOCATIONS_LIST_BUTTON);
-        expect(returnButton.text()).toBe("Invocations List");
-    });
-
     it("edit button if user owns the workflow", async () => {
         const { wrapper } = await mountWorkflowInvocationHeader();
         const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue
index 93b47c32b4f5..9009597e72ad 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue
@@ -1,32 +1,48 @@
 <script setup lang="ts">
 import { faClock } from "@fortawesome/free-regular-svg-icons";
-import { faArrowLeft, faEdit, faHdd, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faEdit, faExclamation, faHdd, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
+import { BAlert, BBadge, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { RouterLink } from "vue-router";
 
 import { isRegisteredUser } from "@/api";
-import type { WorkflowInvocationElementView } from "@/api/invocations";
+import type { InvocationJobsSummary, InvocationStep, WorkflowInvocationElementView } from "@/api/invocations";
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
+import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 import type { Workflow } from "@/stores/workflowStore";
 import localize from "@/utils/localization";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import { copyWorkflow } from "../Workflow/workflows.services";
+import {
+    errorCount as jobStatesSummaryErrorCount,
+    jobCount as jobStatesSummaryJobCount,
+    numTerminal,
+    okCount as jobStatesSummaryOkCount,
+    runningCount as jobStatesSummaryRunningCount,
+} from "./util";
 
 import AsyncButton from "../Common/AsyncButton.vue";
 import Heading from "../Common/Heading.vue";
 import SwitchToHistoryLink from "../History/SwitchToHistoryLink.vue";
+import ProgressBar from "../ProgressBar.vue";
 import UtcDate from "../UtcDate.vue";
 import WorkflowInvocationsCount from "../Workflow/WorkflowInvocationsCount.vue";
 import WorkflowRunButton from "../Workflow/WorkflowRunButton.vue";
 
 interface Props {
+    isFullPage?: boolean;
     invocation: WorkflowInvocationElementView;
+    invocationState: string;
     fromPanel?: boolean;
+    jobStatesSummary: InvocationJobsSummary;
+    invocationSchedulingTerminal: boolean;
+    invocationAndJobTerminal: boolean;
+    success?: boolean;
+    newHistoryTarget?: string;
 }
 
 const props = defineProps<Props>();
@@ -60,6 +76,62 @@ async function onImport() {
 function getWorkflowName(): string {
     return workflow.value?.name || "...";
 }
+
+type StepStateType = { [state: string]: number };
+
+const stepStates = computed<StepStateType>(() => {
+    const stepStates: StepStateType = {};
+    const steps: InvocationStep[] = props.invocation.steps || [];
+    for (const step of steps) {
+        if (!step) {
+            continue;
+        }
+        // the API defined state here allowing null and undefined is odd...
+        const stepState: string = step.state || "unknown";
+        if (!stepStates[stepState]) {
+            stepStates[stepState] = 1;
+        } else {
+            stepStates[stepState] += 1;
+        }
+    }
+    return stepStates;
+});
+
+const stepCount = computed<number>(() => {
+    return props.invocation.steps.length || 0;
+});
+
+const stepStatesStr = computed<string>(() => {
+    return `${stepStates.value?.scheduled || 0} of ${stepCount.value} steps successfully scheduled.`;
+});
+
+const okCount = computed<number>(() => {
+    return jobStatesSummaryOkCount(props.jobStatesSummary);
+});
+
+const runningCount = computed<number>(() => {
+    return jobStatesSummaryRunningCount(props.jobStatesSummary);
+});
+
+const jobCount = computed<number>(() => {
+    return jobStatesSummaryJobCount(props.jobStatesSummary);
+});
+
+const errorCount = computed<number>(() => {
+    return jobStatesSummaryErrorCount(props.jobStatesSummary);
+});
+
+const newCount = computed<number>(() => {
+    return jobCount.value - okCount.value - runningCount.value - errorCount.value;
+});
+
+const jobStatesStr = computed(() => {
+    let jobStr = `${numTerminal(props.jobStatesSummary) || 0} of ${jobCount.value} jobs complete`;
+    if (!props.invocationSchedulingTerminal) {
+        jobStr += " (total number of jobs will change until all steps fully scheduled)";
+    }
+    return `${jobStr}.`;
+});
 </script>
 
 <template>
@@ -74,7 +146,7 @@ function getWorkflowName(): string {
             <RouterLink to="/workflows/list">Click here</RouterLink> to view the imported workflow in the workflows
             list.
         </BAlert>
-        <div class="d-flex flex-gapx-1">
+        <div v-if="!props.success && props.isFullPage" class="d-flex flex-gapx-1">
             <Heading h1 separator inline truncate size="xl" class="flex-grow-1">
                 Invoked Workflow: "{{ getWorkflowName() }}"
             </Heading>
@@ -92,8 +164,8 @@ function getWorkflowName(): string {
                 </BButton>
             </div>
         </div>
-        <div class="py-2 pl-3 d-flex justify-content-between align-items-center">
-            <div>
+        <div class="py-2 pl-3 d-flex justify-content-between align-items-center flex-nowrap">
+            <div v-if="props.isFullPage">
                 <i>
                     <FontAwesomeIcon :icon="faClock" class="mr-1" />invoked
                     <UtcDate :date="props.invocation.update_time" mode="elapsed" />
@@ -101,8 +173,50 @@ function getWorkflowName(): string {
                 <span class="d-flex flex-gapx-1 align-items-center">
                     <FontAwesomeIcon :icon="faHdd" />History:
                     <SwitchToHistoryLink :history-id="props.invocation.history_id" />
+                    <BBadge
+                        v-if="props.newHistoryTarget && useHistoryStore().currentHistoryId !== props.newHistoryTarget"
+                        v-b-tooltip.hover.noninteractive
+                        data-description="new history badge"
+                        role="button"
+                        variant="info"
+                        title="Results generated in a new history. Click on history name to switch to that history.">
+                        <FontAwesomeIcon :icon="faExclamation" />
+                    </BBadge>
                 </span>
             </div>
+            <div class="progress-bars mx-1">
+                <ProgressBar
+                    v-if="!stepCount"
+                    note="Loading step state summary..."
+                    :loading="true"
+                    class="steps-progress" />
+                <ProgressBar
+                    v-else-if="invocationState == 'cancelled'"
+                    note="Invocation scheduling cancelled - expected jobs and outputs may not be generated."
+                    :error-count="1"
+                    class="steps-progress" />
+                <ProgressBar
+                    v-else-if="invocationState == 'failed'"
+                    note="Invocation scheduling failed - Galaxy administrator may have additional details in logs."
+                    :error-count="1"
+                    class="steps-progress" />
+                <ProgressBar
+                    v-else
+                    :note="stepStatesStr"
+                    :total="stepCount"
+                    :ok-count="stepStates.scheduled"
+                    :loading="!invocationSchedulingTerminal"
+                    class="steps-progress" />
+                <ProgressBar
+                    :note="jobStatesStr"
+                    :total="jobCount"
+                    :ok-count="okCount"
+                    :running-count="runningCount"
+                    :new-count="newCount"
+                    :error-count="errorCount"
+                    :loading="!invocationAndJobTerminal"
+                    class="jobs-progress" />
+            </div>
             <div v-if="workflow" class="d-flex flex-gapx-1 align-items-center">
                 <div class="d-flex flex-column align-items-end mr-2">
                     <span v-if="workflow.version !== undefined" class="mb-1">
@@ -147,9 +261,26 @@ function getWorkflowName(): string {
                         "
                         :disabled="workflow.deleted"
                         full
+                        force
                         :version="workflow.version" />
                 </BButtonGroup>
             </div>
         </div>
     </div>
 </template>
+
+<style scoped lang="scss">
+.progress-bars {
+    // progress bar shrinks to fit divs on either side
+    flex-grow: 1;
+    flex-shrink: 1;
+    max-width: 50%;
+
+    .steps-progress,
+    .jobs-progress {
+        // truncate text in progress bars
+        white-space: nowrap;
+        overflow: hidden;
+    }
+}
+</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js
index ab154ae17813..8637fc6b8d5f 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js
@@ -44,61 +44,6 @@ jest.mock("@/stores/workflowStore", () => {
     };
 });
 
-describe("WorkflowInvocationOverview.vue with terminal invocation", () => {
-    let wrapper;
-    let propsData;
-
-    beforeEach(async () => {
-        propsData = {
-            invocation: invocationData,
-            invocationAndJobTerminal: true,
-            invocationSchedulingTerminal: true,
-            jobStatesSummary: {},
-        };
-        wrapper = shallowMount(WorkflowInvocationOverview, {
-            propsData,
-            localVue,
-            pinia: createTestingPinia(),
-        });
-    });
-
-    it("displays pdf report links", async () => {
-        expect(wrapper.find(".invocation-pdf-link").exists()).toBeTruthy();
-    });
-
-    it("doesn't show cancel invocation button", async () => {
-        expect(wrapper.find(".cancel-workflow-scheduling").exists()).toBeFalsy();
-    });
-});
-
-describe("WorkflowInvocationOverview.vue with invocation scheduling running", () => {
-    let wrapper;
-    let propsData;
-    let store;
-
-    beforeEach(async () => {
-        propsData = {
-            invocation: invocationData,
-            invocationAndJobTerminal: false,
-            invocationSchedulingTerminal: false,
-            jobStatesSummary: {},
-        };
-        wrapper = shallowMount(WorkflowInvocationOverview, {
-            store,
-            propsData,
-            localVue,
-        });
-    });
-
-    it("does not display pdf report links", async () => {
-        expect(wrapper.find(".invocation-pdf-link").exists()).toBeFalsy();
-    });
-
-    it("shows cancel invocation button", async () => {
-        expect(wrapper.find(".cancel-workflow-scheduling").exists()).toBeTruthy();
-    });
-});
-
 describe("WorkflowInvocationOverview.vue for a valid/invalid workflow", () => {
     async function loadWrapper(invocationData) {
         const propsData = {
@@ -110,6 +55,7 @@ describe("WorkflowInvocationOverview.vue for a valid/invalid workflow", () => {
         const wrapper = shallowMount(WorkflowInvocationOverview, {
             propsData,
             localVue,
+            pinia: createTestingPinia(),
         });
         await flushPromises();
         return wrapper;
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
index 20084eb4ff58..d076e639daf0 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
@@ -1,155 +1,34 @@
 <script setup lang="ts">
-import { BAlert, BButton } from "bootstrap-vue";
+import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
-import { type InvocationJobsSummary, type InvocationStep, type WorkflowInvocationElementView } from "@/api/invocations";
+import { type WorkflowInvocationElementView } from "@/api/invocations";
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
-import { getRootFromIndexLink } from "@/onload";
 import { withPrefix } from "@/utils/redirect";
 
-import {
-    errorCount as jobStatesSummaryErrorCount,
-    jobCount as jobStatesSummaryJobCount,
-    numTerminal,
-    okCount as jobStatesSummaryOkCount,
-    runningCount as jobStatesSummaryRunningCount,
-} from "./util";
-
 import ExternalLink from "../ExternalLink.vue";
 import HelpText from "../Help/HelpText.vue";
 import InvocationGraph from "../Workflow/Invocation/Graph/InvocationGraph.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;
     invocationAndJobTerminal: boolean;
     invocationSchedulingTerminal: boolean;
     isFullPage?: boolean;
-    jobStatesSummary: InvocationJobsSummary;
-    index?: number;
     isSubworkflow?: boolean;
 }
 
 const props = defineProps<Props>();
 
-const generatePdfTooltip = "Generate PDF report for this workflow invocation";
-
 const { workflow, loading, error } = useWorkflowInstance(props.invocation.workflow_id);
 
-const invocationId = computed<string | undefined>(() => props.invocation.id);
-
-const indexStr = computed(() => {
-    if (props.index == undefined) {
-        return "";
-    } else {
-        return `${props.index + 1}`;
-    }
-});
-
-const invocationState = computed(() => {
-    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 = {};
-    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 invocationPdfLink = computed<string | null>(() => {
-    const id = invocationId.value;
-    if (id) {
-        return getUrl(`api/invocations/${id}/report.pdf`);
-    } else {
-        return null;
-    }
-});
-
 const uniqueMessages = computed(() => {
     const messages = props.invocation.messages || [];
     const uniqueMessagesSet = new Set(messages.map((message) => JSON.stringify(message)));
     return Array.from(uniqueMessagesSet).map((message) => JSON.parse(message)) as typeof messages;
 });
-
-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 emit = defineEmits<{
-    (e: "invocation-cancelled"): void;
-}>();
-
-function onCancel() {
-    emit("invocation-cancelled");
-}
 </script>
 
 <template>
@@ -160,75 +39,14 @@ function onCancel() {
             <ExternalLink :href="withPrefix(`/workflows/invocations/${invocation.id}`)"> Click here </ExternalLink>
             to view this subworkflow in graph view.
         </BAlert>
-        <div v-if="!invocationAndJobTerminal">
-            <BAlert variant="info" show>
-                <LoadingSpan :message="`Waiting to complete invocation ${indexStr}`" />
-            </BAlert>
-            <BButton
-                v-b-tooltip.noninteractive.hover
-                class="cancel-workflow-scheduling"
-                title="Cancel scheduling of workflow invocation"
-                size="sm"
-                @click="onCancel">
-                <span class="fa fa-times mr-1" /> Cancel
-            </BButton>
-        </div>
-        <div class="d-flex align-items-center">
-            <div v-if="invocationAndJobTerminal" class="mr-1" :class="{ 'd-flex': !uniqueMessages.length }">
-                <BButton
-                    v-b-tooltip.hover
-                    :title="invocationStateSuccess ? generatePdfTooltip : disabledReportTooltip"
-                    :disabled="!invocationStateSuccess"
-                    size="sm"
-                    class="invocation-pdf-link text-nowrap w-100"
-                    :class="{ 'mt-1': uniqueMessages.length }"
-                    :href="invocationPdfLink"
-                    target="_blank">
-                    Generate PDF
-                </BButton>
-            </div>
-            <div class="w-100">
-                <ProgressBar
-                    v-if="!stepCount"
-                    note="Loading step state summary..."
-                    :loading="true"
-                    class="steps-progress" />
-                <template v-if="uniqueMessages.length">
-                    <InvocationMessage
-                        v-for="message in uniqueMessages"
-                        :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
-                    v-else
-                    :note="stepStatesStr"
-                    :total="stepCount"
-                    :ok-count="stepStates.scheduled"
-                    :loading="!invocationSchedulingTerminal"
-                    class="steps-progress" />
-                <ProgressBar
-                    :note="jobStatesStr"
-                    :total="jobCount"
-                    :ok-count="okCount"
-                    :running-count="runningCount"
-                    :new-count="newCount"
-                    :error-count="errorCount"
-                    :loading="!invocationAndJobTerminal"
-                    class="jobs-progress" />
-            </div>
+        <div v-if="uniqueMessages.length" class="d-flex align-items-center">
+            <InvocationMessage
+                v-for="message in uniqueMessages"
+                :key="message.reason"
+                class="steps-progress my-1 w-100"
+                :invocation-message="message"
+                :invocation="invocation">
+            </InvocationMessage>
         </div>
         <!-- Once the workflow for the invocation has been loaded, display the graph -->
         <BAlert v-if="loading" variant="info" show>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index bbc3d4a4f443..33af070b8c88 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { BAlert, BTab, BTabs } from "bootstrap-vue";
+import { faDownload, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BNavItem, BTab, BTabs } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import { type InvocationJobsSummary, type WorkflowInvocationElementView } from "@/api/invocations";
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
+import { getRootFromIndexLink } from "@/onload";
 import { useInvocationStore } from "@/stores/invocationStore";
 import { useWorkflowStore } from "@/stores/workflowStore";
 import { errorMessageAsString } from "@/utils/simple-error";
@@ -11,6 +14,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import { cancelWorkflowScheduling } from "./services";
 import { isTerminal, jobCount, runningCount } from "./util";
 
+import WorkflowInvocationSteps from "../Workflow/Invocation/Graph/WorkflowInvocationSteps.vue";
 import InvocationReport from "../Workflow/InvocationReport.vue";
 import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
 import WorkflowInvocationHeader from "./WorkflowInvocationHeader.vue";
@@ -21,15 +25,16 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
     invocationId: string;
-    index?: number;
     isSubworkflow?: boolean;
     isFullPage?: boolean;
     fromPanel?: boolean;
+    success?: boolean;
+    newHistoryTarget?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    index: undefined,
     isSubworkflow: false,
+    newHistoryTarget: undefined,
 });
 
 const emit = defineEmits<{
@@ -55,6 +60,24 @@ watch(
     }
 );
 
+// Report and PDF generation
+const generatePdfTooltip = "Generate PDF report for this workflow invocation";
+const invocationPdfLink = computed<string | null>(
+    () => getRootFromIndexLink() + `api/invocations/${props.invocationId}/report.pdf`
+);
+const disabledReportTooltip = computed(() => {
+    const state = invocationState.value;
+    if (state != "scheduled") {
+        return `This workflow is not currently scheduled. The current state is ${state}. Once the workflow is fully scheduled and jobs have complete this option will become available.`;
+    } else if (runningCount(jobStatesSummary.value) != 0) {
+        return `The workflow invocation still contains ${runningCount(
+            jobStatesSummary.value
+        )} running job(s). Once these jobs have completed this option will become available.`;
+    } else {
+        return "Steps for this workflow are still running. A report will be available once complete.";
+    }
+});
+
 const invocationTabs = ref<BTabs>();
 const scrollableDiv = computed(() => invocationTabs.value?.$el.querySelector(".tab-content") as HTMLElement);
 const isScrollable = ref(false);
@@ -116,6 +139,8 @@ watch(
     { immediate: true }
 );
 
+const storeId = computed(() => (invocation.value ? `invocation-${invocation.value.id}` : undefined));
+
 onUnmounted(() => {
     clearTimeout(stepStatesInterval.value);
     clearTimeout(jobStatesInterval.value);
@@ -145,8 +170,17 @@ function cancelWorkflowSchedulingLocal() {
 </script>
 
 <template>
-    <div v-if="invocation" class="d-flex flex-column w-100">
-        <WorkflowInvocationHeader v-if="props.isFullPage" :invocation="invocation" :from-panel="props.fromPanel" />
+    <div v-if="invocation" class="d-flex flex-column w-100" data-description="workflow invocation state">
+        <WorkflowInvocationHeader
+            :is-full-page="props.isFullPage"
+            :invocation="invocation"
+            :invocation-state="invocationState"
+            :from-panel="props.fromPanel"
+            :job-states-summary="jobStatesSummary"
+            :success="props.success"
+            :new-history-target="props.newHistoryTarget"
+            :invocation-scheduling-terminal="invocationSchedulingTerminal"
+            :invocation-and-job-terminal="invocationAndJobTerminal" />
         <BTabs
             ref="invocationTabs"
             class="mt-1 d-flex flex-column overflow-auto"
@@ -155,14 +189,19 @@ function cancelWorkflowSchedulingLocal() {
                 <WorkflowInvocationOverview
                     class="invocation-overview"
                     :invocation="invocation"
-                    :index="index"
                     :is-full-page="props.isFullPage"
                     :invocation-and-job-terminal="invocationAndJobTerminal"
                     :invocation-scheduling-terminal="invocationSchedulingTerminal"
-                    :job-states-summary="jobStatesSummary"
                     :is-subworkflow="isSubworkflow"
                     @invocation-cancelled="cancelWorkflowSchedulingLocal" />
             </BTab>
+            <BTab v-if="!isSubworkflow" title="Steps" lazy>
+                <WorkflowInvocationSteps
+                    v-if="invocation && storeId"
+                    :invocation="invocation"
+                    :store-id="storeId"
+                    :is-full-page="props.isFullPage" />
+            </BTab>
             <WorkflowInvocationInputOutputTabs :invocation="invocation" />
             <!-- <BTab title="Workflow Overview">
                 <p>TODO: Insert readonly version of workflow editor here</p>
@@ -189,6 +228,37 @@ function cancelWorkflowSchedulingLocal() {
             <BTab title="Metrics" :lazy="true">
                 <WorkflowInvocationMetrics :invocation-id="invocation.id"></WorkflowInvocationMetrics>
             </BTab>
+            <template v-slot:tabs-end>
+                <BNavItem v-if="!invocationAndJobTerminal" class="ml-auto alert-info mr-1">
+                    <LoadingSpan message="Waiting to complete invocation" />
+                    <BButton
+                        v-b-tooltip.noninteractive.hover
+                        title="Cancel scheduling of workflow invocation"
+                        data-description="cancel invocation button"
+                        size="sm"
+                        variant="danger"
+                        @click="onCancel">
+                        <FontAwesomeIcon :icon="faTimes" fixed-width />
+                        Cancel Workflow
+                    </BButton>
+                </BNavItem>
+                <li
+                    role="presentation"
+                    class="nav-item align-self-center mr-2"
+                    :class="{ 'ml-auto': invocationAndJobTerminal }"
+                    data-description="generate pdf report button">
+                    <BButton
+                        v-b-tooltip.hover.bottom.noninteractive
+                        :title="invocationStateSuccess ? generatePdfTooltip : disabledReportTooltip"
+                        :disabled="!invocationStateSuccess"
+                        :href="invocationPdfLink"
+                        size="sm"
+                        target="_blank">
+                        <FontAwesomeIcon :icon="faDownload" fixed-width />
+                        Generate PDF
+                    </BButton>
+                </li>
+            </template>
         </BTabs>
     </div>
     <BAlert v-else-if="errorMessage" variant="danger" show>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index 243c44d428d1..547da1281165 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -1,30 +1,20 @@
 <template>
     <div class="d-flex" :data-step="workflowStep.id">
-        <div class="ui-portlet-section" style="width: 100%">
+        <div :class="{ 'ui-portlet-section': !inGraphView }" style="width: 100%">
             <div
+                v-if="!inGraphView"
                 class="portlet-header portlet-operations cursor-pointer"
                 :class="graphStep?.headerClass"
                 role="button"
                 tabindex="0"
                 @keyup.enter="toggleStep"
                 @click="toggleStep">
-                <span :id="`step-icon-${workflowStep.id}`">
-                    <WorkflowStepIcon class="portlet-title-icon" :step-type="workflowStepType" />
-                </span>
-                <ToolLinkPopover :target="`step-icon-${workflowStep.id}`" v-bind="toolProps(workflowStep.id)" />
-                <span class="portlet-title-text">
-                    <u class="step-title">
-                        <WorkflowStepTitle v-bind="titleProps(workflowStep.id)" />
-                    </u>
-                </span>
-                <span class="float-right">
-                    <FontAwesomeIcon
-                        v-if="graphStep?.headerIcon"
-                        class="mr-1"
-                        :icon="graphStep.headerIcon"
-                        :spin="graphStep.headerIconSpin" />
-                    <FontAwesomeIcon :icon="computedExpanded ? 'fa-chevron-up' : 'fa-chevron-down'" />
-                </span>
+                <WorkflowInvocationStepHeader
+                    :workflow-step="workflowStep"
+                    :graph-step="graphStep"
+                    :invocation-step="step"
+                    can-expand
+                    :expanded="computedExpanded" />
             </div>
             <div v-if="computedExpanded" class="portlet-content">
                 <InvocationStepProvider
@@ -35,43 +25,33 @@
                     <div style="min-width: 1">
                         <LoadingSpan v-if="loading" :message="`Loading invocation step details`"> </LoadingSpan>
                         <div v-else>
-                            <details
-                                v-if="Object.values(stepDetails.outputs).length > 0"
-                                class="invocation-step-output-details"
-                                :open="!isDataStep && inGraphView">
-                                <summary><b>Output Datasets</b></summary>
+                            <div
+                                v-if="!isDataStep && Object.values(stepDetails.outputs).length > 0"
+                                class="invocation-step-output-details">
+                                <Heading size="md" separator>Output Datasets</Heading>
                                 <div v-for="(value, name) in stepDetails.outputs" :key="value.id">
                                     <b>{{ name }}</b>
                                     <GenericHistoryItem :item-id="value.id" :item-src="value.src" />
                                 </div>
-                            </details>
-                            <details
-                                v-if="Object.values(stepDetails.output_collections).length > 0"
-                                class="invocation-step-output-collection-details"
-                                :open="!isDataStep && inGraphView">
-                                <summary><b>Output Dataset Collections</b></summary>
+                            </div>
+                            <div
+                                v-if="!isDataStep && Object.values(stepDetails.output_collections).length > 0"
+                                class="invocation-step-output-collection-details">
+                                <Heading size="md" separator>Output Dataset Collections</Heading>
                                 <div v-for="(value, name) in stepDetails.output_collections" :key="value.id">
                                     <b>{{ name }}</b>
                                     <GenericHistoryItem :item-id="value.id" :item-src="value.src" />
                                 </div>
-                            </details>
+                            </div>
                             <div class="portlet-body" style="width: 100%; overflow-x: auto">
-                                <details
+                                <div
                                     v-if="workflowStepType == 'tool'"
                                     class="invocation-step-job-details"
                                     :open="inGraphView">
-                                    <summary>
-                                        <b>Jobs <i>(Click on any job to view its details)</i></b>
-                                    </summary>
-                                    <JobStep
-                                        v-if="stepDetails.jobs?.length"
-                                        :key="inGraphView"
-                                        :jobs="stepDetails.jobs"
-                                        :invocation-graph="inGraphView"
-                                        :showing-job-id="showingJobId"
-                                        @row-clicked="showJob" />
+                                    <Heading size="md" separator>{{ jobStepHeading(stepDetails) }}</Heading>
+                                    <JobStep v-if="stepDetails.jobs?.length" class="mt-1" :jobs="stepDetails.jobs" />
                                     <b-alert v-else v-localize variant="info" show>This step has no jobs</b-alert>
-                                </details>
+                                </div>
                                 <ParameterStep
                                     v-else-if="workflowStepType == 'parameter_input'"
                                     :parameters="[getParamInput(stepDetails)]" />
@@ -118,34 +98,29 @@
     </div>
 </template>
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import GenericHistoryItem from "components/History/Content/GenericItem";
 import LoadingSpan from "components/LoadingSpan";
 import { InvocationStepProvider } from "components/providers";
-import ToolLinkPopover from "components/Tool/ToolLinkPopover";
 import { mapActions, mapState } from "pinia";
 import { useToolStore } from "stores/toolStore";
 import { useWorkflowStore } from "stores/workflowStore";
 
-import JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
-import WorkflowStepIcon from "./WorkflowStepIcon";
 import WorkflowStepTitle from "./WorkflowStepTitle";
 
-library.add(faChevronUp, faChevronDown);
+import Heading from "../Common/Heading.vue";
+import JobStep from "./JobStep.vue";
+import WorkflowInvocationStepHeader from "./WorkflowInvocationStepHeader.vue";
 
 export default {
     components: {
         LoadingSpan,
-        FontAwesomeIcon,
+        Heading,
         JobStep,
         ParameterStep,
         InvocationStepProvider,
         GenericHistoryItem,
-        ToolLinkPopover,
-        WorkflowStepIcon,
+        WorkflowInvocationStepHeader,
         WorkflowStepTitle,
         WorkflowInvocationState: () => import("components/WorkflowInvocationState/WorkflowInvocationState"),
     },
@@ -155,7 +130,6 @@ export default {
         workflow: Object,
         graphStep: { type: Object, default: undefined },
         expanded: { type: Boolean, default: undefined },
-        showingJobId: { type: String, default: null },
         inGraphView: { type: Boolean, default: false },
     },
     data() {
@@ -214,19 +188,18 @@ export default {
                 (param) => param.workflow_step_id === stepDetails.workflow_step_id
             );
         },
-        showJob(id) {
-            this.$emit("show-job", id);
+        jobStepHeading(stepDetails) {
+            if (stepDetails.jobs?.length > 1) {
+                return "Jobs (Click on any job to view its details)";
+            } else if (stepDetails.jobs?.length === 1) {
+                return "Job";
+            } else {
+                return "No jobs";
+            }
         },
         toggleStep() {
             this.computedExpanded = !this.computedExpanded;
         },
-        toolProps(stepIndex) {
-            const workflowStep = this.workflow.steps[stepIndex];
-            return {
-                toolId: workflowStep.tool_id,
-                toolVersion: workflowStep.tool_version,
-            };
-        },
         titleProps(stepIndex) {
             const invocationStep = this.invocation.steps[stepIndex];
             const workflowStep = this.workflow.steps[stepIndex];
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStepHeader.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStepHeader.vue
new file mode 100644
index 000000000000..ccd53e785920
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStepHeader.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faChevronDown, faChevronUp, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import type { InvocationStep } from "@/api/invocations";
+import { isWorkflowInput } from "@/components/Workflow/constants";
+import { type GraphStep, statePlaceholders } from "@/composables/useInvocationGraph";
+import type { Step } from "@/stores/workflowStepStore";
+
+import ToolLinkPopover from "../Tool/ToolLinkPopover.vue";
+import WorkflowStepIcon from "./WorkflowStepIcon.vue";
+import WorkflowStepTitle from "./WorkflowStepTitle.vue";
+
+library.add(faChevronDown, faChevronUp, faSignInAlt);
+
+interface Props {
+    workflowStep: Step;
+    graphStep?: GraphStep;
+    invocationStep?: InvocationStep;
+    canExpand?: boolean;
+    expanded?: boolean;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <div class="d-flex justify-content-between">
+        <div>
+            <span :id="`step-icon-${props.workflowStep.id}`">
+                <WorkflowStepIcon class="portlet-title-icon" :step-type="workflowStep.type" />
+            </span>
+            <ToolLinkPopover
+                :target="`step-icon-${props.workflowStep.id}`"
+                :tool-id="props.workflowStep.tool_id"
+                :tool-version="props.workflowStep.tool_version" />
+            <span class="portlet-title-text">
+                <u class="step-title">
+                    <WorkflowStepTitle
+                        :step-index="props.workflowStep.id"
+                        :step-label="props.invocationStep?.workflow_step_label"
+                        :step-type="props.workflowStep.type"
+                        :step-tool-id="props.workflowStep.tool_id"
+                        :step-subworkflow-id="props.workflowStep.workflow_id" />
+                </u>
+            </span>
+        </div>
+
+        <span v-if="props.graphStep">
+            <span v-if="isWorkflowInput(props.workflowStep.type)">
+                <i>workflow input</i>
+                <FontAwesomeIcon class="ml-1" :icon="faSignInAlt" />
+            </span>
+            <span v-else-if="props.graphStep.state">
+                <i>{{ statePlaceholders[props.graphStep.state] || props.graphStep.state }}</i>
+                <FontAwesomeIcon
+                    v-if="props.graphStep.headerIcon"
+                    class="ml-1"
+                    :icon="props.graphStep.headerIcon"
+                    :spin="props.graphStep.headerIconSpin" />
+            </span>
+            <FontAwesomeIcon v-if="props.canExpand" class="ml-1" :icon="props.expanded ? faChevronUp : faChevronDown" />
+        </span>
+    </div>
+</template>
diff --git a/client/src/components/WorkflowInvocationState/test/json/jobs.json b/client/src/components/WorkflowInvocationState/test/json/jobs.json
index daacfc2e5b5b..35d0dde725d1 100644
--- a/client/src/components/WorkflowInvocationState/test/json/jobs.json
+++ b/client/src/components/WorkflowInvocationState/test/json/jobs.json
@@ -13,7 +13,7 @@
     {
         "model_class": "Job",
         "id": "2",
-        "state": "new",
+        "state": "running",
         "exit_code": 0,
         "update_time": "2021-01-15T10:38:36.015269",
         "create_time": "2021-01-15T10:38:21.462106",
diff --git a/client/src/composables/useInvocationGraph.ts b/client/src/composables/useInvocationGraph.ts
index 4b870e56a36f..89e3570ce459 100644
--- a/client/src/composables/useInvocationGraph.ts
+++ b/client/src/composables/useInvocationGraph.ts
@@ -8,13 +8,18 @@ import {
     faSpinner,
     faTrash,
 } from "@fortawesome/free-solid-svg-icons";
+import { storeToRefs } from "pinia";
 import { computed, type Ref, ref, set } from "vue";
 
 import { GalaxyApi } from "@/api";
+import { fetchCollectionDetails } from "@/api/datasetCollections";
+import { fetchDatasetDetails } from "@/api/datasets";
 import { type InvocationStep, type StepJobSummary, type WorkflowInvocationElementView } from "@/api/invocations";
+import { getContentItemState } from "@/components/History/Content/model/states";
 import { isWorkflowInput } from "@/components/Workflow/constants";
 import { fromSimple } from "@/components/Workflow/Editor/modules/model";
 import { getWorkflowFull } from "@/components/Workflow/workflows.services";
+import { useInvocationStore } from "@/stores/invocationStore";
 import { type Step } from "@/stores/workflowStepStore";
 import { type Workflow } from "@/stores/workflowStore";
 import { rethrowSimple } from "@/utils/simple-error";
@@ -39,6 +44,7 @@ export interface GraphStep extends Step {
     headerClass?: Record<string, boolean>;
     headerIcon?: IconDefinition;
     headerIconSpin?: boolean;
+    nodeText?: string | boolean;
 }
 interface InvocationGraph extends Workflow {
     steps: { [index: number]: GraphStep };
@@ -57,6 +63,11 @@ export const iconClasses: Record<string, { icon: IconDefinition; spin?: boolean;
     skipped: { icon: faForward, class: "text-warning" },
 };
 
+export const statePlaceholders: Record<string, string> = {
+    ok: "successful",
+    error: "failed",
+};
+
 /** Only one job needs to be in one of these states for the graph step to be in that state */
 const SINGLE_INSTANCE_STATES = ["error", "running", "paused"];
 /** All jobs need to be in one of these states for the graph step to be in that state */
@@ -78,6 +89,8 @@ export function useInvocationGraph(
     const storeId = computed(() => `invocation-${invocation.value.id}`);
 
     const lastStepsJobsSummary = ref<StepJobSummary[]>([]);
+    const invocationStore = useInvocationStore();
+    const { graphStepsByStoreId } = storeToRefs(invocationStore);
 
     /** The full invocation mapped onto the original workflow */
     const invocationGraph = ref<InvocationGraph | null>(null);
@@ -120,20 +133,13 @@ export function useInvocationGraph(
                 rethrowSimple(error);
             }
 
-            // if the steps have not been populated or the job states have changed, update the steps
-            // TODO: What if the state of something not in the stepsJobsSummary has changed? (e.g.: subworkflows...)
-            if (
-                !stepsPopulated.value ||
-                JSON.stringify(stepsJobsSummary) !== JSON.stringify(lastStepsJobsSummary.value)
-            ) {
-                updateSteps(stepsJobsSummary);
-
-                // Load the invocation graph into the editor the first time
-                if (!stepsPopulated.value) {
-                    invocationGraph.value!.steps = { ...steps.value };
-                    await fromSimple(storeId.value, invocationGraph.value as any);
-                    stepsPopulated.value = true;
-                }
+            await updateSteps(stepsJobsSummary);
+
+            // Load the invocation graph into the editor the first time
+            if (!stepsPopulated.value) {
+                invocationGraph.value!.steps = { ...steps.value };
+                await fromSimple(storeId.value, invocationGraph.value as any);
+                stepsPopulated.value = true;
             }
         } catch (e) {
             rethrowSimple(e);
@@ -144,7 +150,7 @@ export function useInvocationGraph(
      * if they haven't been populated yet.
      * @param stepsJobsSummary - The job summary for each step in the invocation
      * */
-    function updateSteps(stepsJobsSummary: StepJobSummary[]) {
+    async function updateSteps(stepsJobsSummary: StepJobSummary[]) {
         /** Initialize with the original steps of the workflow, else update the existing graph steps */
         const fullSteps: Record<string, Step | GraphStep> = !stepsPopulated.value
             ? { ...loadedWorkflow.value.steps }
@@ -163,7 +169,13 @@ export function useInvocationGraph(
             /** The raw invocation step */
             const invocationStep = invocation.value.steps[i];
 
-            if (!isWorkflowInput(graphStepFromWfStep.type)) {
+            // TODO: What if the state of something not in the stepsJobsSummary has changed? (e.g.: subworkflows...)
+            /** if the steps have not been populated or the job states have changed, update the step */
+            const updateNonInputStep =
+                !stepsPopulated.value ||
+                JSON.stringify(stepsJobsSummary) !== JSON.stringify(lastStepsJobsSummary.value);
+
+            if (updateNonInputStep && !isWorkflowInput(graphStepFromWfStep.type)) {
                 let invocationStepSummary: StepJobSummary | undefined;
                 if (invocationStep) {
                     invocationStepSummary = stepsJobsSummary.find((stepJobSummary: StepJobSummary) => {
@@ -175,12 +187,18 @@ export function useInvocationGraph(
                     });
                 }
                 updateStep(graphStepFromWfStep, invocationStep, invocationStepSummary);
+            } else if (invocationStep && graphStepFromWfStep.nodeText === undefined) {
+                await initializeGraphInput(graphStepFromWfStep, invocationStep);
             }
 
             // add the graph step to the steps object if it doesn't exist yet
             if (!steps.value[i]) {
                 set(steps.value, i, graphStepFromWfStep);
             }
+
+            // update the invocation store's graph steps object
+            // TODO: Find a better way of doing this, instead of using two separate objects...?
+            set(graphStepsByStoreId.value, storeId.value, steps.value);
         }
 
         lastStepsJobsSummary.value = stepsJobsSummary;
@@ -262,19 +280,7 @@ export function useInvocationGraph(
         // if the state has changed, update the graph step
         if (graphStep.state !== newState) {
             graphStep.state = newState;
-
-            /** Setting the header class for the graph step */
-            graphStep.headerClass = {
-                "node-header-invocation": true,
-                [`header-${graphStep.state}`]: !!graphStep.state,
-            };
-            // TODO: maybe a different one for inputs? Currently they have no state either.
-
-            /** Setting the header icon for the graph step */
-            if (graphStep.state) {
-                graphStep.headerIcon = iconClasses[graphStep.state]?.icon;
-                graphStep.headerIconSpin = iconClasses[graphStep.state]?.spin;
-            }
+            setHeaderClass(graphStep);
         }
     }
 
@@ -298,19 +304,47 @@ export function useInvocationGraph(
         return undefined;
     }
 
-    // TODO: Maybe we can use this to layout the graph after the steps are loaded (for neatness)?
-    // async function layoutGraph() {
-    //     const newSteps = await autoLayout(storeId.value, steps.value);
-    //     if (newSteps) {
-    //         newSteps?.map((step: any) => stepStore.updateStep(step));
-    //         // Object.assign(steps.value, {...steps.value, ...stepStore.steps});
-    //         Object.keys(steps.value).forEach((key) => {
-    //             steps.value[key] = { ...steps.value[key], ...(stepStore.steps[key] as GraphStep) };
-    //         });
-    //     }
-    //     invocationGraph.value!.steps = steps.value;
-    //     await fromSimple(storeId.value, invocationGraph.value as any);
-    // }
+    function setHeaderClass(graphStep: GraphStep) {
+        /** Setting the header class for the graph step */
+        graphStep.headerClass = getHeaderClass(graphStep.state as string);
+
+        /** Setting the header icon for the graph step */
+        if (graphStep.state) {
+            graphStep.headerIcon = iconClasses[graphStep.state]?.icon;
+            graphStep.headerIconSpin = iconClasses[graphStep.state]?.spin;
+        }
+    }
+
+    async function initializeGraphInput(graphStep: GraphStep, invocationStep: InvocationStep) {
+        const inputItem = invocation.value.inputs[graphStep.id];
+        const inputParam = getWorkflowInputParam(invocation.value, invocationStep);
+        if (inputItem && inputItem?.id !== undefined && inputItem?.id !== null) {
+            if (inputItem.src === "hda") {
+                const hda = await fetchDatasetDetails({ id: inputItem.id });
+                // TODO: There is a type mismatch for `hda.state` and `GraphStep["state"]`
+                set(graphStep, "state", getContentItemState(hda));
+                set(graphStep, "nodeText", `${hda.hid}: <b>${hda.name}</b>`);
+            } else {
+                const hdca = await fetchCollectionDetails({ id: inputItem.id });
+                // TODO: Same type mismatch as above
+                set(graphStep, "state", getContentItemState(hdca));
+                set(graphStep, "nodeText", `${hdca.hid}: <b>${hdca.name}</b>`);
+            }
+        } else if (inputParam) {
+            if (typeof inputParam.parameter_value === "boolean") {
+                set(graphStep, "nodeText", inputParam.parameter_value);
+            } else {
+                set(graphStep, "nodeText", `<b>${inputParam.parameter_value}</b>`);
+            }
+        }
+        setHeaderClass(graphStep);
+    }
+
+    function getWorkflowInputParam(invocation: WorkflowInvocationElementView, invocationStep: InvocationStep) {
+        return Object.values(invocation.input_step_parameters).find(
+            (param) => param.workflow_step_id === invocationStep.workflow_step_id
+        );
+    }
 
     return {
         /** An id used to scope the store to the invocation's id */
@@ -323,3 +357,10 @@ export function useInvocationGraph(
         loadInvocationGraph,
     };
 }
+
+export function getHeaderClass(state: string) {
+    return {
+        "node-header-invocation": true,
+        [`header-${state}`]: !!state,
+    };
+}
diff --git a/client/src/stores/invocationStore.ts b/client/src/stores/invocationStore.ts
index ba4dedbb0016..0ce8a6337fba 100644
--- a/client/src/stores/invocationStore.ts
+++ b/client/src/stores/invocationStore.ts
@@ -1,11 +1,17 @@
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
 import { GalaxyApi } from "@/api";
 import { type InvocationJobsSummary, type InvocationStep, type WorkflowInvocation } from "@/api/invocations";
 import { type FetchParams, useKeyedCache } from "@/composables/keyedCache";
+import type { GraphStep } from "@/composables/useInvocationGraph";
 import { rethrowSimple } from "@/utils/simple-error";
 
+type GraphSteps = { [index: string]: GraphStep };
+
 export const useInvocationStore = defineStore("invocationStore", () => {
+    const graphStepsByStoreId = ref<{ [index: string]: GraphSteps }>({});
+
     async function fetchInvocationDetails(params: FetchParams): Promise<WorkflowInvocation> {
         const { data, error } = await GalaxyApi().GET("/api/invocations/{invocation_id}", {
             params: { path: { invocation_id: params.id } },
@@ -52,5 +58,6 @@ export const useInvocationStore = defineStore("invocationStore", () => {
         fetchInvocationJobsSummaryForId,
         getInvocationStepById,
         fetchInvocationStepById,
+        graphStepsByStoreId,
     };
 });
diff --git a/client/src/stores/jobMetricsStore.ts b/client/src/stores/jobMetricsStore.ts
index e0979cba99d6..fe31aaed0dde 100644
--- a/client/src/stores/jobMetricsStore.ts
+++ b/client/src/stores/jobMetricsStore.ts
@@ -2,16 +2,9 @@ import axios from "axios";
 import { defineStore } from "pinia";
 import Vue, { computed, ref } from "vue";
 
+import type { JobMetric } from "@/api/jobs";
 import { prependPath } from "@/utils/redirect";
 
-interface JobMetric {
-    title: string;
-    value: string;
-    plugin: string;
-    name: string;
-    raw_value: string;
-}
-
 export const useJobMetricsStore = defineStore("jobMetricsStore", () => {
     const jobMetricsByHdaId = ref<Record<string, JobMetric[]>>({});
     const jobMetricsByLddaId = ref<Record<string, JobMetric[]>>({});
diff --git a/client/src/stores/workflowStepStore.ts b/client/src/stores/workflowStepStore.ts
index ff2d1f6b97a5..dcb0547c9d7b 100644
--- a/client/src/stores/workflowStepStore.ts
+++ b/client/src/stores/workflowStepStore.ts
@@ -101,12 +101,14 @@ export interface NewStep {
     outputs: Array<OutputTerminalSource>;
     position?: StepPosition;
     post_job_actions?: PostJobActions;
+    tool_id?: string;
     tool_state: Record<string, unknown>;
     tool_version?: string;
     tooltip?: string | null;
     type: "tool" | "data_input" | "data_collection_input" | "subworkflow" | "parameter_input" | "pause";
     uuid?: string;
     when?: string | null;
+    workflow_id?: string;
     workflow_outputs?: WorkflowOutput[];
 }
 
diff --git a/client/src/stores/workflowStore.ts b/client/src/stores/workflowStore.ts
index adcb5e78fe5b..f1bc4a606c71 100644
--- a/client/src/stores/workflowStore.ts
+++ b/client/src/stores/workflowStore.ts
@@ -2,6 +2,7 @@ import axios from "axios";
 import { defineStore } from "pinia";
 import { computed, ref, set } from "vue";
 
+// import type { StoredWorkflowDetailed } from "@/api/workflows"; // TODO: use this instead of locally defined type
 import { getAppRoot } from "@/onload/loadConfig";
 import { type Steps } from "@/stores/workflowStepStore";
 
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 199c1884d61a..e69d4072f86a 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -683,7 +683,8 @@ workflow_run:
     validation_error: ".validation-error"
     expand_form_link: '.workflow-expand-form-link'
     expanded_form: '.workflow-expanded-form'
-    new_history_target_link: '.workflow-new-history-target-link'
+    new_history_badge: '[data-description="new history badge"]'
+    history_target_link: '[data-description="switch to history link"]'
     runtime_setting_button: '.workflow-run-settings'
     runtime_setting_target: '.workflow-run-settings-target'
     simplified_input:
@@ -851,6 +852,8 @@ invocations:
     activity_expand: ".activity-panel-footer"
     invocations_table: '#invocations-grid .grid-table'
     invocations_table_rows: '#invocations-grid .grid-table [data-description="grid item"]'
+    invocations_panel_list: '[data-description="Workflow Invocations"] .scroll-list'
+    invocations_panel_list_items: '[data-description="Workflow Invocations"] .scroll-list button.panel-item'
     pager: '[data-description="grid pager"]'
     pager_page: '[data-description="grid pager"] .gx-grid-pager-page [aria-posinset=${page}]'
     pager_page_next: '[data-description="grid pager"] .gx-grid-pager-next button'
@@ -858,11 +861,9 @@ invocations:
     pager_page_first: '[data-description="grid pager"] .gx-grid-pager-first button'
     pager_page_previous: '[data-description="grid pager"] .gx-grid-pager-prev button'
     pager_page_active: '[data-description="grid pager"] .gx-grid-pager-page.active button'
-    state_details: '.workflow-invocation-state-component'
-    toggle_invocation_details: '[data-description="toggle row details"]'
-    progress_steps_note: '.workflow-invocation-state-component .steps-progress .progressNote'
-    progress_jobs_note: '.workflow-invocation-state-component .jobs-progress .progressNote'
-    hide_invocation_graph: '.workflow-invocation-state-component [data-description="hide invocation graph"]'
+    state_details: '[data-description="workflow invocation state"]'
+    progress_steps_note: '[data-description="workflow invocation state"] .steps-progress .progress-note'
+    progress_jobs_note: '[data-description="workflow invocation state"] .jobs-progress .progress-note'
     invocation_tab:
       type: xpath
       selector: '//a[text()="${label}"]'
@@ -874,16 +875,14 @@ invocations:
     step_title: '[data-step="${order_index}"] .step-title'
     step_details: '[data-step="${order_index}"] .portlet-operations'
     step_output_collection: '[data-step="${order_index}"] .invocation-step-output-collection-details'
-    step_output_collection_toggle: '[data-step="${order_index}"] .invocation-step-output-collection-details .name'
+    step_output_collection_toggle: '[data-step="${order_index}"] .invocation-step-output-collection-details .content-title'
     step_output_collection_element_identifier:
       type: xpath
       selector: '//span[contains(@class, "content-title name")][text()="${element_identifier}"]'
     step_output_collection_element_datatype: '[data-step="${order_index}"] .invocation-step-output-collection-details .not-loading .datatype .value'
     step_job_details: '[data-step="${order_index}"] .invocation-step-job-details'
-    step_job_table: '[data-step="${order_index}"] .invocation-step-job-details table'
-    step_job_table_rows: '[data-step="${order_index}"] .invocation-step-job-details table tbody tr'
-    step_job_information: '[data-step="${order_index}"] .invocation-step-job-details table tbody .b-table-details .info_data_table'
-    step_job_information_tool_id: '[data-step="${order_index}"] .invocation-step-job-details table tbody .b-table-details .info_data_table #galaxy-tool-id'
+    step_job_information: '[data-step="${order_index}"] .invocation-step-job-details .info_data_table'
+    step_job_information_tool_id: '[data-step="${order_index}"] .invocation-step-job-details .info_data_table #galaxy-tool-id'
 
 tour:
   popover:
diff --git a/client/src/utils/navigation/schema.ts b/client/src/utils/navigation/schema.ts
index fc30e089ee3f..12dc5489e6fb 100644
--- a/client/src/utils/navigation/schema.ts
+++ b/client/src/utils/navigation/schema.ts
@@ -418,7 +418,8 @@ interface Rootworkflow_run extends Component {
     validation_error: SelectorTemplate;
     expand_form_link: SelectorTemplate;
     expanded_form: SelectorTemplate;
-    new_history_target_link: SelectorTemplate;
+    new_history_badge: SelectorTemplate;
+    history_target_link: SelectorTemplate;
     runtime_setting_button: SelectorTemplate;
     runtime_setting_target: SelectorTemplate;
     input_select_field: SelectorTemplate;
@@ -479,6 +480,8 @@ interface Rootworkflow_show extends Component {
 interface Rootinvocations extends Component {
     invocations_table: SelectorTemplate;
     invocations_table_rows: SelectorTemplate;
+    invocations_panel_list: SelectorTemplate;
+    invocations_panel_list_items: SelectorTemplate;
     pager: SelectorTemplate;
     pager_page: SelectorTemplate;
     pager_page_next: SelectorTemplate;
@@ -487,10 +490,8 @@ interface Rootinvocations extends Component {
     pager_page_previous: SelectorTemplate;
     pager_page_active: SelectorTemplate;
     state_details: SelectorTemplate;
-    toggle_invocation_details: SelectorTemplate;
     progress_steps_note: SelectorTemplate;
     progress_jobs_note: SelectorTemplate;
-    hide_invocation_graph: SelectorTemplate;
     invocation_tab: SelectorTemplate;
     invocation_details_tab: SelectorTemplate;
     input_details_title: SelectorTemplate;
@@ -502,8 +503,6 @@ interface Rootinvocations extends Component {
     step_output_collection_element_identifier: SelectorTemplate;
     step_output_collection_element_datatype: SelectorTemplate;
     step_job_details: SelectorTemplate;
-    step_job_table: SelectorTemplate;
-    step_job_table_rows: SelectorTemplate;
     step_job_information: SelectorTemplate;
     step_job_information_tool_id: SelectorTemplate;
 }
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 118248fe0d66..555b12ea002c 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1257,7 +1257,7 @@ def navigate_to_user_preferences(self):
         self.components.masthead.user.wait_for_and_click()
         self.components.masthead.preferences.wait_for_and_click()
 
-    def navigate_to_invocations(self):
+    def navigate_to_invocations_grid(self):
         self.home()
         self.components.invocations.activity.wait_for_and_click()
         self.components.invocations.activity_expand.wait_for_and_click()
diff --git a/lib/galaxy_test/selenium/test_invocation_grid.py b/lib/galaxy_test/selenium/test_invocation_grid.py
index 5316b1740e13..48c17d2e447a 100644
--- a/lib/galaxy_test/selenium/test_invocation_grid.py
+++ b/lib/galaxy_test/selenium/test_invocation_grid.py
@@ -21,7 +21,7 @@ def test_grid(self):
             wait=True,
             invocations=30,
         )
-        gx_selenium_context.navigate_to_invocations()
+        gx_selenium_context.navigate_to_invocations_grid()
         invocations = gx_selenium_context.components.invocations
         invocations.invocations_table.wait_for_visible()
 
diff --git a/lib/galaxy_test/selenium/test_workflow_invocation_details.py b/lib/galaxy_test/selenium/test_workflow_invocation_details.py
index 6d98905b8528..6d9f3a7acb05 100644
--- a/lib/galaxy_test/selenium/test_workflow_invocation_details.py
+++ b/lib/galaxy_test/selenium/test_workflow_invocation_details.py
@@ -16,25 +16,31 @@ def test_job_details(self):
         gx_selenium_context.workflow_populator.run_workflow(
             WORKFLOW_WITH_OUTPUT_COLLECTION, history_id=history_id, assert_ok=True, wait=True
         )
-        gx_selenium_context.navigate_to_invocations()
+
+        # open invocations panel
+        self.home()
+        gx_selenium_context.components.invocations.activity.wait_for_and_click()
+
         invocations = gx_selenium_context.components.invocations
-        invocations.invocations_table.wait_for_visible()
+        invocations.invocations_panel_list.wait_for_visible()
 
         @retry_assertion_during_transitions
         def assert_has_row():
-            invocations.invocations_table_rows.wait_for_visible()
-            invocation_rows = invocations.invocations_table_rows.all()
+            invocations.invocations_panel_list_items.wait_for_visible()
+            invocation_rows = invocations.invocations_panel_list_items.all()
             assert len(invocation_rows) > 0
             return invocation_rows[0]
 
         assert_has_row()
 
         invocations.state_details.assert_absent()
-        invocations.toggle_invocation_details.wait_for_visible()
-        details = invocations.toggle_invocation_details.all()[0]
+        details = invocations.invocations_panel_list_items.all()[0]
         details.click()
         invocations.state_details.wait_for_visible()
 
+        # close invocations panel
+        gx_selenium_context.components.invocations.activity.wait_for_and_click()
+
         @retry_assertion_during_transitions
         def assert_progress_steps_note_contains(text):
             assert text in invocations.progress_steps_note.wait_for_visible().text
@@ -46,23 +52,16 @@ def assert_progress_steps_note_contains(text):
         invocations.input_details_title(label="text_input").wait_for_visible()
         assert "Test_Dataset" in invocations.input_details_name(label="text_input").wait_for_visible().text
 
-        invocations.invocation_tab(label="Overview").wait_for_and_click()
-        invocations.hide_invocation_graph.wait_for_and_click()
+        invocations.invocation_tab(label="Steps").wait_for_and_click()
         assert "Step 1: text_input" in invocations.step_title(order_index="0").wait_for_visible().text
         assert "Step 2: split_up" in invocations.step_title(order_index="1").wait_for_visible().text
         assert "Step 3: paired" in invocations.step_title(order_index="2").wait_for_visible().text
 
         invocations.step_details(order_index="1").wait_for_and_click()
-        invocations.step_job_details(order_index="1").wait_for_and_click()
-        invocations.step_job_table(order_index="1").wait_for_visible()
-        invocations.step_job_table_rows(order_index="1").wait_for_visible()
-        job_rows = invocations.step_job_table_rows(order_index="1").all()
-        assert len(job_rows) == 1
-
-        invocations.step_job_information(order_index="1").assert_absent()
-        job_rows[0].click()
+        invocations.step_job_details(order_index="1").wait_for_visible()
+
         self.sleep_for(self.wait_types.UX_RENDER)
-        self.screenshot("invocations_job_table")
+        self.screenshot("invocation_step_jobs")
 
         invocations.step_job_information(order_index="1").wait_for_visible()
         assert (
@@ -70,7 +69,7 @@ def assert_progress_steps_note_contains(text):
             in invocations.step_job_information_tool_id(order_index="1").wait_for_visible().text
         )
 
-        invocations.step_output_collection(order_index="1").wait_for_and_click()
+        invocations.step_output_collection(order_index="1").wait_for_visible()
         invocations.step_output_collection_toggle(order_index="1").wait_for_and_click()
         invocations.step_output_collection_element_identifier(element_identifier="forward").wait_for_and_click()
         datatype = invocations.step_output_collection_element_datatype(order_index="1").wait_for_text()
diff --git a/test/integration_selenium/test_workflow_run_target.py b/test/integration_selenium/test_workflow_run_target.py
index b078d3e0de7a..1e47aee98d30 100644
--- a/test/integration_selenium/test_workflow_run_target.py
+++ b/test/integration_selenium/test_workflow_run_target.py
@@ -38,9 +38,10 @@ def test_execution_to_new_history(self):
         workflow_run.expanded_form.wait_for_absent_or_hidden()
         self.workflow_run_submit()
         self.sleep_for(self.wait_types.UX_TRANSITION)
-        workflow_run.new_history_target_link.wait_for_and_click()
+        workflow_run.new_history_badge.wait_for_visible()
+        workflow_run.history_target_link.wait_for_and_click()
         self.sleep_for(self.wait_types.UX_TRANSITION)
-        workflow_run.new_history_target_link.wait_for_absent_or_hidden()
+        workflow_run.new_history_badge.wait_for_absent_or_hidden()
         self.workflow_run_wait_for_ok(hid=2, expand=True)
         self.assert_item_summary_includes(2, "2 sequences")
 
@@ -63,7 +64,7 @@ def test_execution_in_current_history(self):
         workflow_run.expanded_form.wait_for_absent_or_hidden()
         self.workflow_run_submit()
         self.sleep_for(self.wait_types.UX_TRANSITION)
-        workflow_run.new_history_target_link.wait_for_absent_or_hidden()
+        workflow_run.new_history_badge.wait_for_absent_or_hidden()
         self.sleep_for(self.wait_types.UX_TRANSITION)
         self.workflow_run_wait_for_ok(hid=2, expand=True)
         self.assert_item_summary_includes(2, "2 sequences")
@@ -92,8 +93,9 @@ def test_execution_in_current_history(self):
         workflow_run.runtime_setting_target.wait_for_absent_or_hidden()
         self.workflow_run_submit()
         self.sleep_for(self.wait_types.UX_TRANSITION)
-        workflow_run.new_history_target_link.wait_for_and_click()
+        workflow_run.new_history_badge.wait_for_visible()
+        workflow_run.history_target_link.wait_for_and_click()
         self.sleep_for(self.wait_types.UX_TRANSITION)
-        workflow_run.new_history_target_link.wait_for_absent_or_hidden()
+        workflow_run.new_history_badge.wait_for_absent_or_hidden()
         self.workflow_run_wait_for_ok(hid=2, expand=True)
         self.assert_item_summary_includes(2, "2 sequences")