diff --git a/client/src/api/invocations.ts b/client/src/api/invocations.ts
index 88c34695fb8c..2196f9a9254e 100644
--- a/client/src/api/invocations.ts
+++ b/client/src/api/invocations.ts
@@ -9,8 +9,18 @@ export type WorkflowInvocationCollectionView = components["schemas"]["WorkflowIn
 export type InvocationJobsSummary = components["schemas"]["InvocationJobsResponse"];
 export type InvocationStep = components["schemas"]["InvocationStep"];
 
+export type StepJobSummary =
+    | components["schemas"]["InvocationStepJobsResponseStepModel"]
+    | components["schemas"]["InvocationStepJobsResponseJobModel"]
+    | components["schemas"]["InvocationStepJobsResponseCollectionJobsModel"];
+
 export const invocationsFetcher = fetcher.path("/api/invocations").method("get").create();
 
+export const stepJobsSummaryFetcher = fetcher
+    .path("/api/invocations/{invocation_id}/step_jobs_summary")
+    .method("get")
+    .create();
+
 export type WorkflowInvocation = WorkflowInvocationElementView | WorkflowInvocationCollectionView;
 
 export interface WorkflowInvocationJobsSummary {
diff --git a/client/src/api/schema/schema.ts b/client/src/api/schema/schema.ts
index 482ec3912ddb..e1cbfe76f583 100644
--- a/client/src/api/schema/schema.ts
+++ b/client/src/api/schema/schema.ts
@@ -7963,6 +7963,11 @@ export interface components {
              * @example 0123456789ABCDEF
              */
             id: string;
+            /**
+             * Implicit Collection Jobs ID
+             * @description The implicit collection job ID associated with the workflow invocation step.
+             */
+            implicit_collection_jobs_id?: string | null;
             /** Job Id */
             job_id: string | null;
             /**
@@ -8049,7 +8054,7 @@ export interface components {
         InvocationStepJobsResponseCollectionJobsModel: {
             /**
              * ID
-             * @description The encoded ID of the workflow invocation.
+             * @description The encoded ID of the collection job.
              * @example 0123456789ABCDEF
              */
             id: string;
@@ -8076,7 +8081,7 @@ export interface components {
         InvocationStepJobsResponseJobModel: {
             /**
              * ID
-             * @description The encoded ID of the workflow invocation.
+             * @description The encoded ID of the job.
              * @example 0123456789ABCDEF
              */
             id: string;
diff --git a/client/src/api/workflows.ts b/client/src/api/workflows.ts
index 0082f1db63f9..e532b4499c1b 100644
--- a/client/src/api/workflows.ts
+++ b/client/src/api/workflows.ts
@@ -1,4 +1,6 @@
-import { fetcher } from "@/api/schema";
+import { components, fetcher } from "@/api/schema";
+
+export type StoredWorkflowDetailed = components["schemas"]["StoredWorkflowDetailed"];
 
 export const workflowsFetcher = fetcher.path("/api/workflows").method("get").create();
 
diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index dbbc5565ce63..7e7ccc8bf024 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
+library.add(faAngleDoubleDown, faAngleDoubleUp);
+
 interface Props {
     h1?: boolean;
     h2?: boolean;
@@ -14,17 +18,20 @@ interface Props {
     inline?: boolean;
     size?: "xl" | "lg" | "md" | "sm" | "text";
     icon?: string | [string, string];
+    truncate?: boolean;
     collapse?: "open" | "closed" | "none";
 }
 
 const props = withDefaults(defineProps<Props>(), {
     collapse: "none",
+    icon: "",
+    size: "lg",
 });
 
 defineEmits(["click"]);
 
 const sizeClass = computed(() => {
-    return `h-${props.size ?? "lg"}`;
+    return `h-${props.size}`;
 });
 
 const collapsible = computed(() => {
@@ -54,7 +61,12 @@ const element = computed(() => {
         <div v-else class="stripe"></div>
         <component
             :is="element"
-            :class="[sizeClass, props.bold ? 'font-weight-bold' : '', collapsible ? 'collapsible' : '']"
+            :class="[
+                sizeClass,
+                props.bold ? 'font-weight-bold' : '',
+                collapsible ? 'collapsible' : '',
+                props.truncate ? 'truncate' : '',
+            ]"
             @click="$emit('click')">
             <slot />
         </component>
@@ -89,7 +101,9 @@ const element = computed(() => {
 
 // prettier-ignore
 h1, h2, h3, h4, h5, h6 {
-    display: flex;
+    &:not(.truncate) {
+        display: flex;
+    }
     align-items: center;
     gap: 0.4em;
 
@@ -97,6 +111,12 @@ h1, h2, h3, h4, h5, h6 {
         display: inline-flex;
         margin-bottom: 0;
     }
+
+    &.truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 
 .collapsible {
diff --git a/client/src/components/History/SwitchToHistoryLink.vue b/client/src/components/History/SwitchToHistoryLink.vue
index 96149ac48bcc..4087ccecd27c 100644
--- a/client/src/components/History/SwitchToHistoryLink.vue
+++ b/client/src/components/History/SwitchToHistoryLink.vue
@@ -58,8 +58,13 @@ function viewHistoryInNewTab(history: HistorySummary) {
 <template>
     <div>
         <LoadingSpan v-if="!history" />
-        <div v-else v-b-tooltip.hover.top.html :title="`<b>${actionText}</b><br>${history.name}`" class="history-link">
-            <BLink class="truncate" href="#" @click.stop="onClick(history)">
+        <div v-else class="history-link">
+            <BLink
+                v-b-tooltip.hover.top.noninteractive.html
+                class="truncate"
+                href="#"
+                :title="`<b>${actionText}</b><br>${history.name}`"
+                @click.stop="onClick(history)">
                 {{ history.name }}
             </BLink>
 
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 0b5d6d9b2830..921a668a1460 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -3,7 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useDebounce, useDraggable } from "@vueuse/core";
-import { computed, type PropType, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { useTimeoutThrottle } from "@/composables/throttle";
 
@@ -13,25 +13,25 @@ const { throttle } = useTimeoutThrottle(10);
 
 library.add(faChevronLeft, faChevronRight);
 
-const props = defineProps({
-    collapsible: {
-        type: Boolean,
-        default: true,
-    },
-    side: {
-        type: String as PropType<"left" | "right">,
-        default: "right",
-    },
+interface Props {
+    collapsible?: boolean;
+    side?: "left" | "right";
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+}
+const props = withDefaults(defineProps<Props>(), {
+    collapsible: true,
+    side: "right",
+    minWidth: 200,
+    maxWidth: 800,
+    defaultWidth: 300,
 });
 
-const minWidth = 200;
-const maxWidth = 800;
-const defaultWidth = 300;
-
 const draggable = ref<HTMLElement | null>(null);
 const root = ref<HTMLElement | null>(null);
 
-const panelWidth = ref(defaultWidth);
+const panelWidth = ref(props.defaultWidth);
 const show = ref(true);
 
 const { position, isDragging } = useDraggable(draggable, {
@@ -79,10 +79,39 @@ watch(position, () => {
 
         const rectRoot = root.value.getBoundingClientRect();
         const rectDraggable = draggable.value.getBoundingClientRect();
-        panelWidth.value = determineWidth(rectRoot, rectDraggable, minWidth, maxWidth, props.side, position.value.x);
+        panelWidth.value = determineWidth(
+            rectRoot,
+            rectDraggable,
+            props.minWidth,
+            props.maxWidth,
+            props.side,
+            position.value.x
+        );
     });
 });
 
+/** If the the `maxWidth` changes, prevent the panel from exceeding it */
+watch(
+    () => props.maxWidth,
+    (newVal) => {
+        if (newVal && panelWidth.value > newVal) {
+            panelWidth.value = props.maxWidth;
+        }
+    },
+    { immediate: true }
+);
+
+/** If the `minWidth` changes, ensure the panel width is at least the `minWidth` */
+watch(
+    () => props.minWidth,
+    (newVal) => {
+        if (newVal && panelWidth.value < newVal) {
+            panelWidth.value = newVal;
+        }
+    },
+    { immediate: true }
+);
+
 function onKeyLeft() {
     if (props.side === "left") {
         decreaseWidth();
@@ -100,11 +129,11 @@ function onKeyRight() {
 }
 
 function increaseWidth(by = 50) {
-    panelWidth.value = Math.min(panelWidth.value + by, maxWidth);
+    panelWidth.value = Math.min(panelWidth.value + by, props.maxWidth);
 }
 
 function decreaseWidth(by = 50) {
-    panelWidth.value = Math.max(panelWidth.value - by, minWidth);
+    panelWidth.value = Math.max(panelWidth.value - by, props.minWidth);
 }
 
 const sideClasses = computed(() => ({
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index 3b29ed433f27..3bdec78513e5 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -12,8 +12,10 @@
         :disabled="readonly"
         @move="onMoveTo"
         @pan-by="onPanBy">
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
         <div
-            class="node-header unselectable clearfix card-header py-1 px-2"
+            class="unselectable clearfix card-header py-1 px-2"
+            :class="headerClass"
             @click="makeActive"
             @keyup.enter="makeActive">
             <b-button-group class="float-right">
@@ -74,6 +76,12 @@
                 >{{ step.id + 1 }}:
             </span>
             <span class="node-title">{{ title }}</span>
+            <span class="float-right">
+                <FontAwesomeIcon
+                    v-if="isInvocation && invocationStep.headerIcon"
+                    :icon="invocationStep.headerIcon"
+                    :spin="invocationStep.headerIconSpin" />
+            </span>
         </div>
         <b-alert
             v-if="!!errors"
@@ -83,11 +91,19 @@
             @click="makeActive">
             {{ errors }}
         </b-alert>
-        <div v-else class="node-body card-body p-0 mx-2" @click="makeActive" @keyup.enter="makeActive">
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+        <div
+            v-else
+            class="node-body position-relative card-body p-0 mx-2"
+            :class="{ 'cursor-pointer': isInvocation }"
+            @click="makeActive"
+            @keyup.enter="makeActive">
             <NodeInput
                 v-for="(input, index) in inputs"
                 :key="`in-${index}-${input.name}`"
+                :class="isInvocation && 'position-absolute'"
                 :input="input"
+                :blank="isInvocation"
                 :step-id="id"
                 :datatypes-mapper="datatypesMapper"
                 :step-position="step.position ?? { top: 0, left: 0 }"
@@ -97,13 +113,16 @@
                 :parent-node="elHtml"
                 :readonly="readonly"
                 @onChange="onChange" />
-            <div v-if="showRule" class="rule" />
+            <div v-if="!isInvocation && showRule" class="rule" />
+            <NodeInvocationText v-if="isInvocation" :invocation-step="invocationStep" />
             <NodeOutput
                 v-for="(output, index) in outputs"
                 :key="`out-${index}-${output.name}`"
+                :class="isInvocation && 'invocation-node-output'"
                 :output="output"
                 :workflow-outputs="workflowOutputs"
                 :post-job-actions="postJobActions"
+                :blank="isInvocation"
                 :step-id="id"
                 :step-type="step.type"
                 :step-position="step.position ?? { top: 0, left: 0 }"
@@ -133,6 +152,7 @@ import { getGalaxyInstance } from "@/app";
 import { DatatypesMapperModel } from "@/components/Datatypes/model";
 import { useNodePosition } from "@/components/Workflow/Editor/composables/useNodePosition";
 import WorkflowIcons from "@/components/Workflow/icons";
+import type { GraphStep } from "@/composables/useInvocationGraph";
 import { useWorkflowStores } from "@/composables/workflowStores";
 import type { TerminalPosition, XYPosition } from "@/stores/workflowEditorStateStore";
 import type { Step } from "@/stores/workflowStepStore";
@@ -142,6 +162,7 @@ import type { OutputTerminals } from "./modules/terminals";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import DraggableWrapper from "@/components/Workflow/Editor/DraggablePan.vue";
 import NodeInput from "@/components/Workflow/Editor/NodeInput.vue";
+import NodeInvocationText from "@/components/Workflow/Editor/NodeInvocationText.vue";
 import NodeOutput from "@/components/Workflow/Editor/NodeOutput.vue";
 import Recommendations from "@/components/Workflow/Editor/Recommendations.vue";
 
@@ -153,7 +174,7 @@ const props = defineProps({
     id: { type: Number, required: true },
     contentId: { type: String as PropType<string | null>, default: null },
     name: { type: String as PropType<string | null>, default: null },
-    step: { type: Object as PropType<Step>, required: true },
+    step: { type: Object as PropType<Step | GraphStep>, required: true },
     datatypesMapper: { type: DatatypesMapperModel, required: true },
     activeNodeId: {
         type: null as unknown as PropType<number | null>,
@@ -164,6 +185,7 @@ const props = defineProps({
     scroll: { type: Object as PropType<UseScrollReturn>, required: true },
     scale: { type: Number, default: 1 },
     highlight: { type: Boolean, default: false },
+    isInvocation: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
 });
 
@@ -219,6 +241,14 @@ const style = computed(() => {
     return { top: props.step.position!.top + "px", left: props.step.position!.left + "px" };
 });
 const errors = computed(() => props.step.errors || stateStore.getStepLoadingState(props.id)?.error);
+const headerClass = computed(() => {
+    return {
+        ...invocationStep.value.headerClass,
+        "cursor-pointer": props.isInvocation,
+        "node-header": !props.isInvocation || invocationStep.value.headerClass === undefined,
+        "cursor-move": !props.readonly && !props.isInvocation,
+    };
+});
 const inputs = computed(() => {
     const connections = connectionStore.getConnectionsForStep(props.id);
     const extraStepInputs = stepStore.getStepExtraInputs(props.id);
@@ -247,6 +277,7 @@ const invalidOutputs = computed(() => {
         return { name, optional: false, datatypes: [], valid: false };
     });
 });
+const invocationStep = computed(() => props.step as GraphStep);
 const outputs = computed(() => {
     return [...props.step.outputs, ...invalidOutputs.value];
 });
@@ -317,12 +348,21 @@ function makeActive() {
     }
 
     .node-header {
-        cursor: move;
         background: $brand-primary;
         color: $white;
+        &.cursor-move {
+            cursor: move;
+        }
     }
 
     .node-body {
+        .invocation-node-output {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+        }
         .rule {
             height: 0;
             border: none;
diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index b4ab0ac1962b..19b45f24fe1b 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -70,6 +70,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    blank: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 onBeforeUnmount(() => {
@@ -145,7 +149,7 @@ const label = computed(() => props.input.label || props.input.name);
 const hasConnections = computed(() => connections.value.length > 0);
 const rowClass = computed(() => {
     const classes = ["form-row", "dataRow", "input-data-row"];
-    if (props.input?.valid === false) {
+    if (!props.blank && props.input?.valid === false) {
         classes.push("form-row-error");
     }
     return classes;
@@ -242,7 +246,7 @@ watch(
             @click="onRemove">
             <FontAwesomeIcon class="delete-button-icon" icon="fa-minus-square" />
         </button>
-        {{ label }}
+        <span v-if="!blank">{{ label }}</span>
         <span
             v-if="!input.optional && !hasTerminals"
             v-b-tooltip.hover
diff --git a/client/src/components/Workflow/Editor/NodeInvocationText.vue b/client/src/components/Workflow/Editor/NodeInvocationText.vue
new file mode 100644
index 000000000000..acc3dd31f555
--- /dev/null
+++ b/client/src/components/Workflow/Editor/NodeInvocationText.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import { isWorkflowInput } from "@/components/Workflow/constants";
+import { type GraphStep, iconClasses } from "@/composables/useInvocationGraph";
+
+const props = defineProps<{
+    invocationStep: GraphStep;
+}>();
+
+const statePlaceholders: Record<string, string> = {
+    ok: "successful",
+    error: "failed",
+};
+</script>
+<template>
+    <div class="p-1 unselectable">
+        <div v-if="props.invocationStep.jobs">
+            <div v-for="(value, key) in props.invocationStep.jobs" :key="key">
+                <span v-if="value !== undefined" class="d-flex align-items-center">
+                    <FontAwesomeIcon
+                        v-if="iconClasses[key]"
+                        :icon="iconClasses[key]?.icon"
+                        :class="iconClasses[key]?.class"
+                        :spin="iconClasses[key]?.spin"
+                        size="sm"
+                        class="mr-1" />
+                    {{ value }} job{{ value > 1 ? "s" : "" }} {{ statePlaceholders[key] || key }}.
+                </span>
+            </div>
+        </div>
+        <div v-else-if="isWorkflowInput(props.invocationStep.type)">
+            <!-- TODO: Maybe put a ContentItem here? -->
+            This is an input
+        </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>
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index cac8dba4a5ac..641c8d8c38f7 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -51,6 +51,7 @@ const props = defineProps<{
     datatypesMapper: DatatypesMapperModel;
     parentNode: HTMLElement | null;
     readonly: boolean;
+    blank: boolean;
 }>();
 
 const emit = defineEmits(["pan-by", "stopDragging", "onDragConnector"]);
@@ -341,7 +342,7 @@ const removeTagsAction = computed(() => {
 
 <template>
     <div class="node-output" :class="rowClass" :data-output-name="output.name">
-        <div class="d-flex flex-column w-100">
+        <div v-if="!props.blank" class="d-flex flex-column w-100">
             <div class="node-output-buttons">
                 <button
                     v-if="showCalloutActiveOutput"
@@ -398,9 +399,9 @@ const removeTagsAction = computed(() => {
         <DraggableWrapper
             :id="id"
             ref="terminalComponent"
-            v-b-tooltip.hover="outputDetails"
+            v-b-tooltip.hover="!props.blank ? outputDetails : ''"
             class="output-terminal prevent-zoom"
-            :class="{ 'mapped-over': isMultiple }"
+            :class="{ 'mapped-over': isMultiple, 'blank-output': props.blank }"
             :output-name="output.name"
             :root-offset="rootOffset"
             :prevent-default="false"
@@ -450,12 +451,14 @@ const removeTagsAction = computed(() => {
 .output-terminal {
     @include node-terminal-style(right);
 
-    &:hover {
-        color: $brand-success;
-    }
+    &:not(.blank-output) {
+        &:hover {
+            color: $brand-success;
+        }
 
-    button:focus + .terminal-icon {
-        color: $brand-success;
+        button:focus + .terminal-icon {
+            color: $brand-success;
+        }
     }
 }
 
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 467ad460dd29..44cdcabb733e 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -7,7 +7,13 @@
             @onZoom="onZoom"
             @update:pan="panBy" />
         <ToolBar v-if="!readonly" />
-        <div id="canvas-container" ref="canvas" class="canvas-content" @drop.prevent @dragover.prevent>
+        <div
+            id="canvas-container"
+            ref="canvas"
+            class="canvas-content"
+            :class="props.isInvocation ? 'fixed-window-height' : 'h-100'"
+            @drop.prevent
+            @dragover.prevent>
             <AdaptiveGrid
                 :viewport-bounds="elementBounding"
                 :viewport-bounding-box="viewportBoundingBox"
@@ -31,6 +37,7 @@
                     :scroll="scroll"
                     :scale="scale"
                     :readonly="readonly"
+                    :is-invocation="props.isInvocation"
                     @pan-by="panBy"
                     @stopDragging="onStopDragging"
                     @onDragConnector="onDragConnector"
@@ -91,6 +98,7 @@ const props = defineProps({
     scrollToId: { type: Number as PropType<number | null>, default: null },
     readonly: { type: Boolean, default: false },
     initialPosition: { type: Object as PropType<{ x: number; y: number }>, default: () => ({ x: 50, y: 20 }) },
+    isInvocation: { type: Boolean, default: false },
     showMinimap: { type: Boolean, default: true },
     showZoomControls: { type: Boolean, default: true },
 });
@@ -198,11 +206,15 @@ const { comments } = storeToRefs(commentStore);
 
     .canvas-content {
         width: 100%;
-        height: 100%;
         position: relative;
         left: 0px;
         top: 0px;
         overflow: hidden;
+
+        /* TODO: w/out this, canvas height = 0 when width goes beyond a point (invocation graph) */
+        &.fixed-window-height {
+            height: 60vh;
+        }
     }
 
     .node-area {
diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
new file mode 100644
index 000000000000..987782991e20
--- /dev/null
+++ b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+    faArrowDown,
+    faChevronDown,
+    faChevronUp,
+    faSignInAlt,
+    faSitemap,
+    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";
+
+library.add(faArrowDown, faChevronDown, faChevronUp, faSignInAlt, faSitemap, faTimes);
+
+interface Props {
+    /** The invocation to display */
+    invocation: WorkflowInvocationElementView;
+    /** The workflow which was run */
+    workflow: Workflow;
+    /** Whether the invocation is terminal */
+    isTerminal: boolean;
+    /** Whether the invocation is scheduled */
+    isScheduled: boolean;
+    /** The zoom level for the graph */
+    zoom?: number;
+    /** Whether to show the minimap */
+    showMinimap?: boolean;
+    /** Whether to show the zoom controls */
+    showZoomControls?: boolean;
+    /** The initial x position for the graph */
+    initialX?: number;
+    /** The initial y position for the graph */
+    initialY?: number;
+    /** Whether the graph is being rendered on the dedicated invocation page/route */
+    isFullPage?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    zoom: 0.75,
+    showMinimap: true,
+    showZoomControls: true,
+    initialX: -40,
+    initialY: -40,
+    visible: true,
+    isFullPage: false,
+});
+
+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 invocationRef = computed(() => props.invocation);
+
+const { datatypesMapper } = useDatatypesMapper();
+
+const workflowId = computed(() => props.workflow?.id);
+const workflowVersion = computed(() => props.workflow?.version);
+
+const { steps, storeId, loadInvocationGraph } = useInvocationGraph(
+    invocationRef,
+    workflowId.value,
+    workflowVersion.value
+);
+
+// Equivalent to onMounted; this is where the graph is initialized, and the polling is started
+watch(
+    () => workflowId.value,
+    async (wfId) => {
+        if (wfId) {
+            await pollInvocationGraph();
+        }
+    },
+    { immediate: true }
+);
+
+const stateStore = useWorkflowStateStore(storeId.value);
+const { activeNodeId } = storeToRefs(stateStore);
+
+watch(
+    () => props.zoom,
+    () => (stateStore.scale = props.zoom),
+    { 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);
+});
+
+const initialPosition = computed(() => ({
+    x: -props.initialX * props.zoom,
+    y: -props.initialY * props.zoom,
+}));
+
+/** Updates and loads the invocation graph */
+async function loadGraph() {
+    loadingGraph.value = true;
+    errored.value = false;
+    errorMessage.value = "";
+
+    try {
+        await loadInvocationGraph();
+        errored.value = false;
+    } catch (error: any) {
+        if (error.response?.data.err_msg) {
+            errorMessage.value = error.response.data.err_msg;
+        } else {
+            errorMessage.value = error as string;
+        }
+        errored.value = true;
+    } finally {
+        loadingGraph.value = false;
+        if (initialLoading.value) {
+            initialLoading.value = false;
+        }
+    }
+}
+
+/** Poll and load the invocation graph until the invocation is terminal */
+async function pollInvocationGraph() {
+    await loadGraph();
+    if (!props.isTerminal) {
+        pollTimeout.value = setTimeout(pollInvocationGraph, 3000);
+    } else {
+        clearTimeout(pollTimeout.value);
+    }
+}
+
+function scrollJobToView() {
+    const jobCardHeader = jobCard.value?.querySelector(".card-header");
+    jobCardHeader?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+function toggleActiveStep(stepId: number) {
+    if (activeNodeId.value === stepId) {
+        activeNodeId.value = null;
+    } else {
+        activeNodeId.value = stepId;
+    }
+}
+</script>
+
+<template>
+    <div>
+        <BAlert v-if="initialLoading" show variant="info">
+            <LoadingSpan message="Loading Invocation Graph" />
+        </BAlert>
+        <div v-else-if="errored">
+            <BAlert v-if="errorMessage" show variant="danger">
+                {{ errorMessage }}
+            </BAlert>
+            <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">
+                    <BCard no-body>
+                        <WorkflowGraph
+                            :steps="steps"
+                            :datatypes-mapper="datatypesMapper"
+                            :initial-position="initialPosition"
+                            :scroll-to-id="activeNodeId"
+                            :show-minimap="props.showMinimap"
+                            :show-zoom-controls="props.showZoomControls"
+                            is-invocation
+                            readonly />
+                    </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>
+                    </Heading>
+                    <div>
+                        <BButton
+                            v-if="showingJobId"
+                            v-b-tooltip.hover.noninteractive
+                            title="Scroll to Job"
+                            @click="scrollJobToView()">
+                            <FontAwesomeIcon :icon="faArrowDown" />
+                        </BButton>
+                        <BButton
+                            v-if="showingJobId"
+                            v-b-tooltip.hover.noninteractive
+                            title="Hide Job"
+                            @click="showingJobId = undefined">
+                            <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>
+                </BCardBody>
+            </BCard>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.container-root {
+    container-type: inline-size;
+}
+
+.portlet-header {
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+.graph-steps-aside {
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    &.steps-fixed-height {
+        max-height: 60vh;
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue b/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
new file mode 100644
index 000000000000..febb69008e06
--- /dev/null
+++ b/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
@@ -0,0 +1,131 @@
+<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 { computed, ref, watch } 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 WorkflowInvocationStep from "@/components/WorkflowInvocationState/WorkflowInvocationStep.vue";
+
+library.add(faChevronDown, faChevronUp, faSignInAlt);
+
+interface Props {
+    /** The steps for the invocation graph */
+    steps: { [index: string]: GraphStep };
+    /** 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 stepsDiv = ref<HTMLDivElement>();
+const expandInvocationInputs = ref(false);
+
+const workflowInputSteps = Object.values(props.workflow.steps).filter((step) => isWorkflowInput(step.type));
+const hasSingularInput = computed(() => workflowInputSteps.length === 1);
+const workflowRemainingSteps = hasSingularInput.value
+    ? Object.values(props.workflow.steps)
+    : Object.values(props.workflow.steps).filter((step) => !isWorkflowInput(step.type));
+
+watch(
+    () => [props.activeNodeId, stepsDiv.value],
+    async ([nodeId, card]) => {
+        // if the active node id is an input step, expand the inputs section, else, collapse it
+        const isAnInput = workflowInputSteps.findIndex((step) => step.id === props.activeNodeId) !== -1;
+        expandInvocationInputs.value = isAnInput;
+
+        // 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}"]`);
+                const portletHeaderDiv = stepCard?.querySelector(".portlet-header");
+                stepsDiv.value?.scrollTo({ top: portletHeaderDiv?.getBoundingClientRect().top });
+            }
+        }
+        // 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">
+        <!-- Input Steps grouped in a separate portlet -->
+        <div v-if="workflowInputSteps.length > 1" class="ui-portlet-section w-100">
+            <div
+                class="portlet-header portlet-operations"
+                role="button"
+                tabindex="0"
+                @keyup.enter="expandInvocationInputs = !expandInvocationInputs"
+                @click="expandInvocationInputs = !expandInvocationInputs">
+                <span :id="`step-icon-invocation-inputs-section`">
+                    <FontAwesomeIcon class="portlet-title-icon" :icon="faSignInAlt" />
+                </span>
+                <span class="portlet-title-text">
+                    <u v-localize class="step-title ml-2">Workflow Inputs</u>
+                </span>
+                <FontAwesomeIcon class="float-right" :icon="expandInvocationInputs ? faChevronUp : faChevronDown" />
+            </div>
+
+            <div v-if="expandInvocationInputs" class="portlet-content m-1">
+                <WorkflowInvocationStep
+                    v-for="step in workflowInputSteps"
+                    :key="step.id"
+                    :data-index="step.id"
+                    :invocation="props.invocation"
+                    :workflow="props.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)" />
+            </div>
+        </div>
+        <!-- Non-Input (Tool/Subworkflow) Steps -->
+        <WorkflowInvocationStep
+            v-for="step in workflowRemainingSteps"
+            :key="step.id"
+            :data-index="step.id"
+            :invocation="props.invocation"
+            :workflow="props.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)" />
+    </div>
+</template>
diff --git a/client/src/components/Workflow/InvocationsList.vue b/client/src/components/Workflow/InvocationsList.vue
index ce962d036388..6de58e97143b 100644
--- a/client/src/components/Workflow/InvocationsList.vue
+++ b/client/src/components/Workflow/InvocationsList.vue
@@ -1,8 +1,19 @@
 <template>
     <div class="invocations-list" aria-labelledby="invocations-title">
-        <h1 id="invocations-title" class="mb-3 h-lg">
-            {{ title }}
-        </h1>
+        <div class="grid-header d-flex justify-content-between pb-2 flex-column">
+            <div class="d-flex">
+                <Heading
+                    id="invocations-title"
+                    h1
+                    separator
+                    inline
+                    size="xl"
+                    class="flex-grow-1 m-0"
+                    data-description="grid title">
+                    <span v-localize>{{ title }}</span>
+                </Heading>
+            </div>
+        </div>
         <b-alert v-if="headerMessage" variant="info" show>
             {{ headerMessage }}
         </b-alert>
@@ -21,12 +32,17 @@
             </template>
             <template v-slot:row-details="row">
                 <b-card>
-                    <small class="float-right" :data-invocation-id="row.item.id">
+                    <small
+                        class="float-right position-absolute mr-4"
+                        style="right: 0"
+                        :data-invocation-id="row.item.id">
                         <b>Last updated: <UtcDate :date="row.item.update_time" mode="elapsed" />;</b>
-                        <b
-                            >Invocation ID:
-                            <router-link :to="invocationLink(row.item)">{{ row.item.id }}</router-link></b
-                        >
+                        <b>
+                            Invocation ID:
+                            <a :href="invocationLink(row.item)" @click.prevent="(e) => openInvocation(e, row)">{{
+                                row.item.id
+                            }}</a>
+                        </b>
                     </small>
                     <WorkflowInvocationState :invocation-id="row.item.id" @invocation-cancelled="refresh" />
                 </b-card>
@@ -46,13 +62,14 @@
                     @click.stop="swapRowDetails(data)" />
             </template>
             <template v-slot:cell(workflow_id)="data">
-                <div
-                    v-b-tooltip.hover.top
-                    :title="getStoredWorkflowNameByInstanceId(data.item.workflow_id)"
-                    class="truncate">
-                    <b-link href="#" @click.stop="swapRowDetails(data)">
+                <div class="truncate">
+                    <a
+                        v-b-tooltip.hover.html
+                        :title="`<b>View run for</b><br />${getStoredWorkflowNameByInstanceId(data.item.workflow_id)}`"
+                        :href="invocationLink(data.item)"
+                        @click="(e) => openInvocation(e, data)">
                         {{ getStoredWorkflowNameByInstanceId(data.item.workflow_id) }}
-                    </b-link>
+                    </a>
                 </div>
             </template>
             <template v-slot:cell(history_id)="data">
@@ -67,6 +84,18 @@
             <template v-slot:cell(state)="data">
                 <HelpText :uri="`galaxy.invocations.states.${data.value}`" :text="data.value" />
             </template>
+            <template v-slot:cell(view)="data">
+                <BButton
+                    id="invocation-view-button"
+                    v-b-tooltip.hover.top.noninteractive
+                    title="Go to invocation overview"
+                    :data-invocation-view="data.item.id"
+                    variant="primary"
+                    size="sm"
+                    :to="invocationLink(data.item)">
+                    <span class="fa fa-eye" />
+                </BButton>
+            </template>
             <template v-slot:cell(execute)="data">
                 <WorkflowRunButton
                     v-if="getStoredWorkflowIdByInstanceId(data.item.workflow_id)"
@@ -88,17 +117,20 @@ import { invocationsProvider } from "components/providers/InvocationsProvider";
 import UtcDate from "components/UtcDate";
 import WorkflowInvocationState from "components/WorkflowInvocationState/WorkflowInvocationState";
 import { mapActions, mapState } from "pinia";
+import Vue from "vue";
 
 import { useHistoryStore } from "@/stores/historyStore";
 import { useWorkflowStore } from "@/stores/workflowStore";
 
 import paginationMixin from "./paginationMixin";
 
+import Heading from "../Common/Heading.vue";
 import WorkflowRunButton from "./WorkflowRunButton.vue";
 import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
 
 export default {
     components: {
+        Heading,
         HelpText,
         UtcDate,
         WorkflowInvocationState,
@@ -120,6 +152,8 @@ export default {
         const fields = [{ key: "expand", label: "", class: "col-button" }];
         if (!this.storedWorkflowId) {
             fields.push({ key: "workflow_id", label: "Workflow", class: "col-name" });
+        } else {
+            fields.push({ key: "view", label: "View", class: "col-button" });
         }
         if (!this.historyId) {
             fields.push({ key: "history_id", label: "History", class: "col-history" });
@@ -203,6 +237,28 @@ export default {
         invocationLink(item) {
             return `/workflows/invocations/${item.id}`;
         },
+        openInvocation(e, row) {
+            if (e.ctrlKey || e.metaKey) {
+                // open in new tab and ignore toggling details
+                return;
+            }
+            // otherwise, manually toggle details and navigate
+            e.preventDefault();
+            const { item, detailsShowing } = row;
+            if (detailsShowing) {
+                // If you route when an invocation is expanded, somehow the workflowStores are not disposed
+                // entirely when you get to the full page view
+
+                // therefore, we close the details
+                row.toggleDetails();
+                // and then wait for stores to be disposed before routing
+                Vue.nextTick(() => {
+                    this.$router.push(this.invocationLink(item));
+                });
+            } else {
+                this.$router.push(this.invocationLink(item));
+            }
+        },
     },
 };
 </script>
diff --git a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
index f7bc8cecb1b9..4beabd2a4f04 100644
--- a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
@@ -8,19 +8,26 @@
 
             <p v-if="multipleHistoryTargets">
                 This workflow will generate results in multiple histories. You can observe progress in the
-                <a :href="multiHistoryView">history multi-view</a>.
+                <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="newHistoryTarget">Switch to that history now</a>.
+                <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>
         </div>
         <WorkflowInvocationState
             v-for="(invocation, index) in invocations"
             :key="invocation.id"
             :index="index"
-            :invocation-id="invocation.id" />
+            :invocation-id="invocation.id"
+            full-page />
         <div id="webhook-view"></div>
     </div>
 </template>
@@ -28,7 +35,7 @@
 <script>
 import WorkflowInvocationState from "components/WorkflowInvocationState/WorkflowInvocationState";
 import { getAppRoot } from "onload/loadConfig";
-import { mapState } from "pinia";
+import { mapActions, mapState } from "pinia";
 import { refreshContentsWrapper } from "utils/data";
 import Webhooks from "utils/webhooks";
 
@@ -70,9 +77,6 @@ export default {
         multiHistoryView() {
             return `${getAppRoot()}histories/view_multiple`;
         },
-        newHistoryTarget() {
-            return `${getAppRoot()}history/switch_to_history?hist_id=${this.invocations[0].history_id}`;
-        },
         wasNewHistoryTarget() {
             if (this.invocations.length < 1) {
                 return false;
@@ -88,5 +92,11 @@ export default {
         });
         refreshContentsWrapper();
     },
+    methods: {
+        ...mapActions(useHistoryStore, ["setCurrentHistory"]),
+        async switchHistory() {
+            await this.setCurrentHistory(this.invocations[0].history_id);
+        },
+    },
 };
 </script>
diff --git a/client/src/components/Workflow/constants.js b/client/src/components/Workflow/constants.ts
similarity index 68%
rename from client/src/components/Workflow/constants.js
rename to client/src/components/Workflow/constants.ts
index 71dda07248c3..75cbb7a469f3 100644
--- a/client/src/components/Workflow/constants.js
+++ b/client/src/components/Workflow/constants.ts
@@ -1,5 +1,5 @@
 const WorkflowInputs = ["data_input", "data_collection_input", "parameter_input"];
 
-export function isWorkflowInput(stepType) {
+export function isWorkflowInput(stepType: string): boolean {
     return WorkflowInputs.includes(stepType);
 }
diff --git a/client/src/components/Workflow/workflows.services.ts b/client/src/components/Workflow/workflows.services.ts
index 775d6d193d59..2eb5b113ad47 100644
--- a/client/src/components/Workflow/workflows.services.ts
+++ b/client/src/components/Workflow/workflows.services.ts
@@ -77,8 +77,12 @@ export async function createWorkflow(workflowName: string, workflowAnnotation: s
     return data;
 }
 
-export async function getWorkflowFull(workflowId: string) {
-    const { data } = await axios.get(withPrefix(`/workflow/load_workflow?_=true&id=${workflowId}`));
+export async function getWorkflowFull(workflowId: string, version?: number) {
+    let url = `/workflow/load_workflow?_=true&id=${workflowId}`;
+    if (version !== undefined) {
+        url += `&version=${version}`;
+    }
+    const { data } = await axios.get(withPrefix(url));
     return data;
 }
 
diff --git a/client/src/components/WorkflowInvocationState/JobStep.test.js b/client/src/components/WorkflowInvocationState/JobStep.test.js
index a22ad555d243..b11420459940 100644
--- a/client/src/components/WorkflowInvocationState/JobStep.test.js
+++ b/client/src/components/WorkflowInvocationState/JobStep.test.js
@@ -51,14 +51,29 @@ describe("DatasetUIWrapper.vue with Dataset", () => {
         expect(wrapper.vm.toggledItems["1"]).toBeTruthy();
         expect(wrapper.find(".expanded").exists()).toBeTruthy();
         // 2 collapsed rows, plus 1 expanded row
-        expect(wrapper.find("tbody").findAll("tr").length).toBe(3);
+        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(wrapper.find("tbody").findAll("tr").length).toBe(4);
+        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.vue b/client/src/components/WorkflowInvocationState/JobStep.vue
index 2dfa002231ea..694d6304e2ab 100644
--- a/client/src/components/WorkflowInvocationState/JobStep.vue
+++ b/client/src/components/WorkflowInvocationState/JobStep.vue
@@ -1,13 +1,37 @@
 <template>
     <b-card v-if="jobs">
-        <b-table small caption-top :items="jobsProvider" :fields="fields" primary-key="id" @row-clicked="toggleDetails">
+        <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>
-                        <JobInformation v-if="item" :job_id="item.id" />
-                        <p></p>
-                        <JobParameters v-if="item" :job-id="item.id" :include-title="false" />
+                        <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>
@@ -21,6 +45,9 @@
     </b-card>
 </template>
 <script>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
 import JobInformation from "components/JobInformation/JobInformation";
 import JobParameters from "components/JobParameters/JobParameters";
@@ -29,9 +56,11 @@ import UtcDate from "components/UtcDate";
 import Vue from "vue";
 
 Vue.use(BootstrapVue);
+library.add(faCaretDown, faCaretRight);
 
 export default {
     components: {
+        FontAwesomeIcon,
         UtcDate,
         JobProvider,
         JobParameters,
@@ -39,10 +68,13 @@ export default {
     },
     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 },
@@ -74,6 +106,39 @@ export default {
             // 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";
+            }
+            return cls;
+        },
     },
 };
 </script>
+
+<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";
+
+// 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;
+    }
+}
+</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
deleted file mode 100644
index d53391b83d21..000000000000
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
-
-import ParameterStep from "./ParameterStep.vue";
-import WorkflowInvocationStep from "./WorkflowInvocationStep.vue";
-import GenericHistoryItem from "components/History/Content/GenericItem.vue";
-
-const props = defineProps({
-    invocation: {
-        type: Object,
-        required: true,
-    },
-});
-
-interface HasSrc {
-    src: string;
-}
-
-const { workflow } = useWorkflowInstance(props.invocation.workflow_id);
-
-function dataInputStepLabel(key: number, input: HasSrc) {
-    const invocationStep = props.invocation.steps[key];
-    let label = invocationStep && invocationStep.workflow_step_label;
-    if (!label) {
-        if (input.src === "hda" || input.src === "ldda") {
-            label = "Input dataset";
-        } else if (input.src === "hdca") {
-            label = "Input dataset collection";
-        }
-    }
-    return label;
-}
-</script>
-<template>
-    <div v-if="invocation">
-        <b-tabs lazy>
-            <b-tab v-if="Object.keys(invocation.input_step_parameters).length" title="Parameters">
-                <ParameterStep :parameters="Object.values(invocation.input_step_parameters)" />
-            </b-tab>
-            <b-tab v-if="Object.keys(invocation.inputs).length" title="Inputs">
-                <div
-                    v-for="(input, key) in invocation.inputs"
-                    :key="input.id"
-                    :data-label="dataInputStepLabel(key, input)">
-                    <b>{{ dataInputStepLabel(key, input) }}</b>
-                    <GenericHistoryItem :item-id="input.id" :item-src="input.src" />
-                </div>
-            </b-tab>
-            <b-tab v-if="Object.keys(invocation.outputs).length" title="Outputs">
-                <div v-for="(output, key) in invocation.outputs" :key="output.id">
-                    <b>{{ key }}:</b>
-                    <GenericHistoryItem :item-id="output.id" :item-src="output.src" />
-                </div>
-            </b-tab>
-            <b-tab v-if="Object.keys(invocation.output_collections).length" title="Output Collections">
-                <div v-for="(output, key) in invocation.output_collections" :key="output.id">
-                    <b>{{ key }}:</b>
-                    <GenericHistoryItem :item-id="output.id" :item-src="output.src" />
-                </div>
-            </b-tab>
-            <b-tab v-if="workflow" title="Steps">
-                <WorkflowInvocationStep
-                    v-for="step in Object.values(workflow.steps)"
-                    :key="step.id"
-                    :invocation="invocation"
-                    :workflow="workflow"
-                    :workflow-step="step" />
-            </b-tab>
-        </b-tabs>
-    </div>
-</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationInputOutputTabs.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationInputOutputTabs.vue
new file mode 100644
index 000000000000..82901ff11a69
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationInputOutputTabs.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { BTab } from "bootstrap-vue";
+
+import ParameterStep from "./ParameterStep.vue";
+import GenericHistoryItem from "components/History/Content/GenericItem.vue";
+
+const props = defineProps({
+    invocation: {
+        type: Object,
+        required: true,
+    },
+});
+
+interface HasSrc {
+    src: string;
+}
+
+function dataInputStepLabel(key: number, input: HasSrc) {
+    const invocationStep = props.invocation.steps[key];
+    let label = invocationStep && invocationStep.workflow_step_label;
+    if (!label) {
+        if (input.src === "hda" || input.src === "ldda") {
+            label = "Input dataset";
+        } else if (input.src === "hdca") {
+            label = "Input dataset collection";
+        }
+    }
+    return label;
+}
+</script>
+<template>
+    <span v-if="invocation">
+        <BTab v-if="Object.keys(invocation.input_step_parameters).length" title="Parameters" lazy>
+            <ParameterStep :parameters="Object.values(invocation.input_step_parameters)" />
+        </BTab>
+        <BTab v-if="Object.keys(invocation.inputs).length" title="Inputs" lazy>
+            <div v-for="(input, key) in invocation.inputs" :key="input.id" :data-label="dataInputStepLabel(key, input)">
+                <b>{{ dataInputStepLabel(key, input) }}</b>
+                <GenericHistoryItem :item-id="input.id" :item-src="input.src" />
+            </div>
+        </BTab>
+        <BTab v-if="Object.keys(invocation.outputs).length" title="Outputs" lazy>
+            <div v-for="(output, key) in invocation.outputs" :key="output.id">
+                <b>{{ key }}:</b>
+                <GenericHistoryItem :item-id="output.id" :item-src="output.src" />
+            </div>
+        </BTab>
+        <BTab v-if="Object.keys(invocation.output_collections).length" title="Output Collections" lazy>
+            <div v-for="(output, key) in invocation.output_collections" :key="output.id">
+                <b>{{ key }}:</b>
+                <GenericHistoryItem :item-id="output.id" :item-src="output.src" />
+            </div>
+        </BTab>
+    </span>
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js
similarity index 67%
rename from client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
rename to client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js
index eafa5a84b1a0..f4e069fb3cc7 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js
@@ -1,12 +1,13 @@
+import { createTestingPinia } from "@pinia/testing";
 import { shallowMount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
 import invocationData from "../Workflow/test/json/invocation.json";
-import WorkflowInvocationSummary from "./WorkflowInvocationSummary";
+import WorkflowInvocationOverview from "./WorkflowInvocationOverview";
 
 const localVue = getLocalVue();
 
-describe("WorkflowInvocationSummary.vue with terminal invocation", () => {
+describe("WorkflowInvocationOverview.vue with terminal invocation", () => {
     let wrapper;
     let propsData;
 
@@ -15,16 +16,17 @@ describe("WorkflowInvocationSummary.vue with terminal invocation", () => {
             invocation: invocationData,
             invocationAndJobTerminal: true,
             invocationSchedulingTerminal: true,
+            jobStatesSummary: {},
         };
-        wrapper = shallowMount(WorkflowInvocationSummary, {
+        wrapper = shallowMount(WorkflowInvocationOverview, {
             propsData,
             localVue,
+            pinia: createTestingPinia(),
         });
     });
 
-    it("displays report links", async () => {
+    it("displays pdf report links", async () => {
         expect(wrapper.find(".invocation-pdf-link").exists()).toBeTruthy();
-        expect(wrapper.find(".invocation-report-link").exists()).toBeTruthy();
     });
 
     it("doesn't show cancel invocation button", async () => {
@@ -32,7 +34,7 @@ describe("WorkflowInvocationSummary.vue with terminal invocation", () => {
     });
 });
 
-describe("WorkflowInvocationSummary.vue with invocation scheduling running", () => {
+describe("WorkflowInvocationOverview.vue with invocation scheduling running", () => {
     let wrapper;
     let propsData;
     let store;
@@ -42,17 +44,17 @@ describe("WorkflowInvocationSummary.vue with invocation scheduling running", ()
             invocation: invocationData,
             invocationAndJobTerminal: false,
             invocationSchedulingTerminal: false,
+            jobStatesSummary: {},
         };
-        wrapper = shallowMount(WorkflowInvocationSummary, {
+        wrapper = shallowMount(WorkflowInvocationOverview, {
             store,
             propsData,
             localVue,
         });
     });
 
-    it("does not display report links", async () => {
+    it("does not display pdf report links", async () => {
         expect(wrapper.find(".invocation-pdf-link").exists()).toBeFalsy();
-        expect(wrapper.find(".invocation-report-link").exists()).toBeFalsy();
     });
 
     it("shows cancel invocation button", async () => {
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
similarity index 54%
rename from client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
rename to client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
index 28ddeaa0eae1..f327d03a6ed1 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { BAlert, BButton } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { InvocationJobsSummary, InvocationStep, WorkflowInvocationElementView } from "@/api/invocations";
+import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import { getRootFromIndexLink } from "@/onload";
+import { withPrefix } from "@/utils/redirect";
 
 import {
     errorCount as jobStatesSummaryErrorCount,
@@ -12,6 +15,9 @@ import {
     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";
@@ -24,15 +30,18 @@ interface Props {
     invocation?: WorkflowInvocationElementView;
     invocationAndJobTerminal: boolean;
     invocationSchedulingTerminal: boolean;
+    isFullPage?: boolean;
     jobStatesSummary: InvocationJobsSummary;
     index?: number;
+    isSubworkflow?: boolean;
 }
 
 const props = defineProps<Props>();
 
-const reportTooltip = "View report for this workflow invocation";
 const generatePdfTooltip = "Generate PDF report for this workflow invocation";
 
+const { workflow } = useWorkflowInstance(props.invocation?.workflow_id ?? "");
+
 const invocationId = computed<string | undefined>(() => props.invocation?.id);
 
 const indexStr = computed(() => {
@@ -90,15 +99,6 @@ const stepStates = computed<StepStateType>(() => {
     return stepStates;
 });
 
-const invocationLink = computed<string | null>(() => {
-    const id = invocationId.value;
-    if (id) {
-        return getUrl(`workflows/invocations/report?id=${id}`);
-    } else {
-        return null;
-    }
-});
-
 const invocationPdfLink = computed<string | null>(() => {
     const id = invocationId.value;
     if (id) {
@@ -108,6 +108,10 @@ const invocationPdfLink = computed<string | null>(() => {
     }
 });
 
+const hasMessages = computed<boolean>(() => {
+    return props.invocation?.messages.length ? true : false;
+});
+
 const stepStatesStr = computed<string>(() => {
     return `${stepStates.value?.scheduled || 0} of ${stepCount.value} steps successfully scheduled.`;
 });
@@ -151,74 +155,93 @@ function onCancel() {
 
 <template>
     <div class="mb-3 workflow-invocation-state-component">
-        <div v-if="invocationAndJobTerminal">
-            <span>
-                <b-button
-                    v-b-tooltip.hover
-                    :title="invocationStateSuccess ? reportTooltip : disabledReportTooltip"
-                    :disabled="!invocationStateSuccess"
-                    size="sm"
-                    class="invocation-report-link"
-                    :href="invocationLink">
-                    View Report
-                </b-button>
-                <b-button
+        <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': !hasMessages }">
+                <BButton
                     v-b-tooltip.hover
                     :title="invocationStateSuccess ? generatePdfTooltip : disabledReportTooltip"
                     :disabled="!invocationStateSuccess"
                     size="sm"
-                    class="invocation-pdf-link"
+                    class="invocation-pdf-link text-nowrap w-100"
+                    :class="{ 'mt-1': hasMessages }"
                     :href="invocationPdfLink"
                     target="_blank">
                     Generate PDF
-                </b-button>
-            </span>
+                </BButton>
+            </div>
+            <div class="w-100">
+                <ProgressBar
+                    v-if="!stepCount"
+                    note="Loading step state summary..."
+                    :loading="true"
+                    class="steps-progress" />
+                <template v-if="invocation && hasMessages">
+                    <InvocationMessage
+                        v-for="message in invocation.messages"
+                        :key="message.reason"
+                        class="steps-progress my-1"
+                        :invocation-message="message"
+                        :invocation="invocation">
+                    </InvocationMessage>
+                </template>
+                <ProgressBar
+                    v-else-if="invocationState == 'cancelled'"
+                    note="Invocation scheduling cancelled - expected jobs and outputs may not be generated."
+                    :error-count="1"
+                    class="steps-progress" />
+                <ProgressBar
+                    v-else-if="invocationState == 'failed'"
+                    note="Invocation scheduling failed - Galaxy administrator may have additional details in logs."
+                    :error-count="1"
+                    class="steps-progress" />
+                <ProgressBar
+                    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>
-        <div v-else-if="!invocationAndJobTerminal">
-            <b-alert variant="info" show>
-                <LoadingSpan :message="`Waiting to complete invocation ${indexStr}`" />
-            </b-alert>
-            <span
-                v-b-tooltip.hover
-                class="fa fa-times cancel-workflow-scheduling"
-                title="Cancel scheduling of workflow invocation"
-                @click="onCancel"></span>
+        <!-- An invocation has been loaded, display the graph -->
+        <div v-if="invocation">
+            <div v-if="workflow && !isSubworkflow">
+                <InvocationGraph
+                    class="mt-1"
+                    :invocation="invocation"
+                    :workflow="workflow"
+                    :is-terminal="invocationAndJobTerminal"
+                    :is-scheduled="invocationSchedulingTerminal"
+                    :is-full-page="isFullPage" />
+            </div>
+            <BAlert v-else-if="isSubworkflow" variant="secondary" show>
+                This subworkflow is
+                <HelpText :uri="`galaxy.invocations.states.${invocation.state}`" :text="invocation.state" />.
+                <ExternalLink :href="withPrefix(`/workflows/invocations/${invocation.id}`)"> Click here </ExternalLink>
+                to view this subworkflow in graph view.
+            </BAlert>
         </div>
-        <ProgressBar v-if="!stepCount" note="Loading step state summary..." :loading="true" class="steps-progress" />
-        <template v-if="invocation.messages?.length">
-            <InvocationMessage
-                v-for="message in invocation.messages"
-                :key="message.reason"
-                class="steps-progress my-1"
-                :invocation-message="message"
-                :invocation="invocation">
-            </InvocationMessage>
-        </template>
-        <ProgressBar
-            v-else-if="invocationState == 'cancelled'"
-            note="Invocation scheduling cancelled - expected jobs and outputs may not be generated."
-            :error-count="1"
-            class="steps-progress" />
-        <ProgressBar
-            v-else-if="invocationState == 'failed'"
-            note="Invocation scheduling failed - Galaxy administrator may have additional details in logs."
-            :error-count="1"
-            class="steps-progress" />
-        <ProgressBar
-            v-else
-            :note="stepStatesStr"
-            :total="stepCount"
-            :ok-count="stepStates.scheduled"
-            :loading="!invocationSchedulingTerminal"
-            class="steps-progress" />
-        <ProgressBar
-            :note="jobStatesStr"
-            :total="jobCount"
-            :ok-count="okCount"
-            :running-count="runningCount"
-            :new-count="newCount"
-            :error-count="errorCount"
-            :loading="!invocationAndJobTerminal"
-            class="jobs-progress" />
     </div>
 </template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
index 751bdc5dd32a..a57261db8110 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
@@ -1,72 +1,175 @@
 import { createTestingPinia } from "@pinia/testing";
-import { shallowMount, Wrapper } from "@vue/test-utils";
+import { mount, shallowMount, Wrapper } from "@vue/test-utils";
 import flushPromises from "flush-promises";
-import { setActivePinia } from "pinia";
+import { PiniaVuePlugin, setActivePinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 
-import type { WorkflowInvocation } from "@/api/invocations";
-
 import invocationData from "../Workflow/test/json/invocation.json";
 
 import WorkflowInvocationState from "./WorkflowInvocationState.vue";
 
 const localVue = getLocalVue();
+localVue.use(PiniaVuePlugin);
 
 const selectors = {
-    invocationSummary: ".invocation-summary",
+    invocationSummary: ".invocation-overview",
 };
 
-const invocationJobsSummaryById = {
-    id: "d9833097445452b0",
+/** Invocation data to be expected in the store */
+const invocationById = {
+    [invocationData.id]: invocationData,
+    "not-fetched-invocation": null,
+    "non-terminal-id": {
+        ...invocationData,
+        id: "non-terminal-id",
+        state: "new",
+    },
+    "non-terminal-jobs": {
+        ...invocationData,
+        id: "non-terminal-jobs",
+    },
+};
+
+// Jobs summary constants
+const invocationDataJobsSummary = {
     model: "WorkflowInvocation",
     states: {},
     populated_state: "ok",
 };
+const invocationJobsSummaryById = {
+    [invocationData.id]: invocationDataJobsSummary,
+    "not-fetched-invocation": null,
+    "non-terminal-id": invocationDataJobsSummary,
+    "non-terminal-jobs": {
+        ...invocationDataJobsSummary,
+        states: {
+            running: 1,
+        },
+    },
+};
 
-async function mountWorkflowInvocationState(invocation: WorkflowInvocation | null) {
+// Mock the invocation store to return the expected invocation data given the invocation ID
+jest.mock("@/stores/invocationStore", () => {
+    const originalModule = jest.requireActual("@/stores/invocationStore");
+    const mockFetchInvocationForId = jest.fn();
+    const mockFetchInvocationJobsSummaryForId = jest.fn();
+    return {
+        ...originalModule,
+        useInvocationStore: () => ({
+            ...originalModule.useInvocationStore(),
+            getInvocationById: jest.fn().mockImplementation((invocationId) => {
+                return invocationById[invocationId];
+            }),
+            getInvocationJobsSummaryById: jest.fn().mockImplementation((invocationId) => {
+                return invocationJobsSummaryById[invocationId];
+            }),
+            fetchInvocationForId: mockFetchInvocationForId,
+            fetchInvocationJobsSummaryForId: mockFetchInvocationJobsSummaryForId,
+        }),
+        mockFetchInvocationForId,
+        mockFetchInvocationJobsSummaryForId,
+    };
+});
+
+/** Mount the WorkflowInvocationState component with the given invocation ID
+ * @param invocationId The invocation ID to be passed as a prop
+ * @returns The mounted wrapper
+ */
+async function mountWorkflowInvocationState(invocationId: string, shallow = true) {
     const pinia = createTestingPinia();
     setActivePinia(pinia);
 
-    const wrapper = shallowMount(WorkflowInvocationState, {
-        propsData: {
-            invocationId: invocationData.id,
-        },
-        computed: {
-            invocation: () => invocation,
-            jobStatesSummary: () => invocationJobsSummaryById,
-        },
-        pinia,
-        localVue,
-    });
+    let wrapper;
+    if (shallow) {
+        wrapper = shallowMount(WorkflowInvocationState as object, {
+            propsData: {
+                invocationId,
+            },
+            pinia,
+            localVue,
+        });
+    } else {
+        wrapper = mount(WorkflowInvocationState as object, {
+            propsData: {
+                invocationId,
+            },
+            pinia,
+            localVue,
+        });
+    }
     await flushPromises();
     return wrapper;
 }
 
-describe("WorkflowInvocationState.vue", () => {
+describe("WorkflowInvocationState check invocation and job terminal states", () => {
     it("determines that invocation and job states are terminal with terminal invocation", async () => {
-        const wrapper = await mountWorkflowInvocationState(invocationData as WorkflowInvocation);
+        const wrapper = await mountWorkflowInvocationState(invocationData.id);
         expect(isInvocationAndJobTerminal(wrapper)).toBe(true);
+
+        // Neither the invocation nor the jobs summary should be fetched for terminal invocations
+        assertInvocationFetched(0);
+        assertJobsSummaryFetched(0);
     });
 
-    it("determines that invocation and job states are not terminal with no invocation", async () => {
-        const wrapper = await mountWorkflowInvocationState(null);
+    it("determines that invocation and job states are not terminal with no fetched invocation", async () => {
+        const wrapper = await mountWorkflowInvocationState("not-fetched-invocation");
         expect(isInvocationAndJobTerminal(wrapper)).toBe(false);
+
+        // Both, the invocation and jobs summary should be fetched once if the invocation is not in the store
+        assertInvocationFetched(1);
+        assertJobsSummaryFetched(1);
     });
 
-    it("determines that invocation and job states are not terminal with non-terminal invocation", async () => {
-        const invocation = {
-            ...invocationData,
-            state: "new",
-        } as WorkflowInvocation;
-        const wrapper = await mountWorkflowInvocationState(invocation);
+    it("determines that invocation is not terminal with non-terminal state", async () => {
+        const wrapper = await mountWorkflowInvocationState("non-terminal-id");
         expect(isInvocationAndJobTerminal(wrapper)).toBe(false);
+
+        // Only the invocation should be fetched for non-terminal invocations
+        assertInvocationFetched(1);
+        assertJobsSummaryFetched(0);
+    });
+
+    it("determines that job states are not terminal with non-terminal jobs but scheduled invocation", async () => {
+        const wrapper = await mountWorkflowInvocationState("non-terminal-jobs");
+        expect(isInvocationAndJobTerminal(wrapper)).toBe(false);
+
+        // Only the jobs summary should be fetched, not the invocation since it is in scheduled/terminal state
+        assertInvocationFetched(0);
+        assertJobsSummaryFetched(1);
     });
 });
 
+describe("WorkflowInvocationState check 'Report' tab disabled state", () => {
+    it("determines that 'Report' tab is disabled for non-terminal invocation", async () => {
+        const wrapper = await mountWorkflowInvocationState("non-terminal-id", false);
+        const reportTab = wrapper.find(".invocation-report-tab").find(".nav-link");
+        expect(reportTab.classes()).toContain("disabled");
+    });
+    it("determines that 'Report' tab is not disabled for terminal invocation", async () => {
+        const wrapper = await mountWorkflowInvocationState(invocationData.id, false);
+        const reportTab = wrapper.find(".invocation-report-tab").find(".nav-link");
+        expect(reportTab.classes()).not.toContain("disabled");
+    });
+});
+
+/**
+ * This is a somewhat hacky way to determine if the invocation and job states are terminal without
+ * exposing the internals of the component. This is just to restore the previous behavior of the test
+ * and it only uses the wrapper to check the props of the invocation summary component.
+ */
 function isInvocationAndJobTerminal(wrapper: Wrapper<Vue>): boolean {
     const invocationSummary = wrapper.find(selectors.invocationSummary);
-    // This is a somewhat hacky way to determine if the invocation and job states are terminal without
-    // exposing the internals of the component. This is just to restore the previous behavior of the test
-    // but it would be better to test this in a more appropriate way.
     return invocationSummary.exists() && invocationSummary.html().includes('invocationandjobterminal="true"');
 }
+
+/** Asserts that the invocation was fetched in the store the given number of times */
+function assertInvocationFetched(count = 1) {
+    const { mockFetchInvocationForId } = jest.requireMock("@/stores/invocationStore");
+    expect(mockFetchInvocationForId).toHaveBeenCalledTimes(count);
+}
+
+/** Asserts that the jobs summary was fetched in the store the given number of times */
+function assertJobsSummaryFetched(count = 1) {
+    const { mockFetchInvocationJobsSummaryForId } = jest.requireMock("@/stores/invocationStore");
+    expect(mockFetchInvocationJobsSummaryForId).toHaveBeenCalledTimes(count);
+}
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 2b734f4bcfb2..628923665e33 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,135 +1,269 @@
-<template>
-    <b-tabs v-if="invocation">
-        <b-tab title="Summary" active>
-            <WorkflowInvocationSummary
-                class="invocation-summary"
-                :invocation="invocation"
-                :index="index"
-                :invocation-and-job-terminal="invocationAndJobTerminal"
-                :invocation-scheduling-terminal="invocationSchedulingTerminal"
-                :job-states-summary="jobStatesSummary"
-                @invocation-cancelled="cancelWorkflowScheduling" />
-        </b-tab>
-        <b-tab title="Details">
-            <WorkflowInvocationDetails :invocation="invocation" />
-        </b-tab>
-        <!-- <b-tab title="Workflow Overview">
-            <p>TODO: Insert readonly version of workflow editor here</p>
-        </b-tab> -->
-        <b-tab title="Export">
-            <div v-if="invocationAndJobTerminal">
-                <WorkflowInvocationExportOptions :invocation-id="invocation.id" />
-            </div>
-            <b-alert v-else variant="info" show>
-                <LoadingSpan message="Waiting to complete invocation" />
-            </b-alert>
-        </b-tab>
-    </b-tabs>
-    <b-alert v-else variant="info" show>
-        <LoadingSpan message="Loading invocation" />
-    </b-alert>
-</template>
-<script>
-import LoadingSpan from "components/LoadingSpan";
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faArrowLeft, faClock, faEdit, faEye, faHdd, faPlay, faSitemap } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BButtonGroup, BTab, BTabs } from "bootstrap-vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
+import { type InvocationJobsSummary, type WorkflowInvocationElementView } from "@/api/invocations";
+import type { StoredWorkflowDetailed } from "@/api/workflows";
+import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
 import { useInvocationStore } from "@/stores/invocationStore";
+import { useWorkflowStore } from "@/stores/workflowStore";
+import localize from "@/utils/localization";
 
 import { cancelWorkflowScheduling } from "./services";
-import { isTerminal, jobCount } from "./util";
+import { isTerminal, jobCount, runningCount } from "./util";
 
-import WorkflowInvocationDetails from "./WorkflowInvocationDetails.vue";
+import Heading from "../Common/Heading.vue";
+import SwitchToHistoryLink from "../History/SwitchToHistoryLink.vue";
+import UtcDate from "../UtcDate.vue";
+import InvocationReport from "../Workflow/InvocationReport.vue";
+import WorkflowInvocationsCount from "../Workflow/WorkflowInvocationsCount.vue";
 import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
-import WorkflowInvocationSummary from "./WorkflowInvocationSummary.vue";
-
-export default {
-    components: {
-        LoadingSpan,
-        WorkflowInvocationSummary,
-        WorkflowInvocationDetails,
-        WorkflowInvocationExportOptions,
-    },
-    props: {
-        invocationId: {
-            type: String,
-            required: true,
-        },
-        index: {
-            type: Number,
-            required: false,
-            default: null,
-        },
-    },
-    setup() {
-        const invocationStore = useInvocationStore();
-        return {
-            invocationStore,
-        };
-    },
-    data() {
-        return {
-            stepStatesInterval: null,
-            jobStatesInterval: null,
-        };
-    },
-    computed: {
-        invocation: function () {
-            return this.invocationStore.getInvocationById(this.invocationId);
-        },
-        invocationState: function () {
-            return this.invocation?.state || "new";
-        },
-        invocationAndJobTerminal: function () {
-            return !!(this.invocationSchedulingTerminal && this.jobStatesTerminal);
-        },
-        invocationSchedulingTerminal: function () {
-            return (
-                this.invocationState == "scheduled" ||
-                this.invocationState == "cancelled" ||
-                this.invocationState == "failed"
-            );
-        },
-        jobStatesTerminal: function () {
-            if (this.invocationSchedulingTerminal && jobCount(this.jobStatesSummary) === 0) {
-                // no jobs for this invocation (think subworkflow or just inputs)
-                return true;
-            }
-            return this.jobStatesSummary && isTerminal(this.jobStatesSummary);
-        },
-        jobStatesSummary() {
-            const jobsSummary = this.invocationStore.getInvocationJobsSummaryById(this.invocationId);
-            return !jobsSummary ? null : jobsSummary;
-        },
-    },
-    created: function () {
-        this.pollStepStatesUntilTerminal();
-        this.pollJobStatesUntilTerminal();
-    },
-    beforeDestroy: function () {
-        clearTimeout(this.jobStatesInterval);
-        clearTimeout(this.stepStatesInterval);
-    },
-    methods: {
-        pollStepStatesUntilTerminal: async function () {
-            if (!this.invocation || !this.invocationSchedulingTerminal) {
-                await this.invocationStore.fetchInvocationForId({ id: this.invocationId });
-                this.stepStatesInterval = setTimeout(this.pollStepStatesUntilTerminal, 3000);
-            }
-        },
-        pollJobStatesUntilTerminal: async function () {
-            if (!this.jobStatesTerminal) {
-                await this.invocationStore.fetchInvocationJobsSummaryForId({ id: this.invocationId });
-                this.jobStatesInterval = setTimeout(this.pollJobStatesUntilTerminal, 3000);
-            }
-        },
-        onError: function (e) {
-            console.error(e);
-        },
-        onCancel() {
-            this.$emit("invocation-cancelled");
-        },
-        cancelWorkflowScheduling: function () {
-            cancelWorkflowScheduling(this.invocationId).then(this.onCancel).catch(this.onError);
-        },
-    },
-};
+import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTabs.vue";
+import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+library.add(faArrowLeft, faClock, faEdit, faEye, faHdd, faPlay, faSitemap);
+
+interface Props {
+    invocationId: string;
+    index?: number;
+    isSubworkflow?: boolean;
+    isFullPage?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    index: undefined,
+    isSubworkflow: false,
+});
+
+const emit = defineEmits<{
+    (e: "invocation-cancelled"): void;
+}>();
+
+const invocationStore = useInvocationStore();
+
+const stepStatesInterval = ref<any>(undefined);
+const jobStatesInterval = ref<any>(undefined);
+
+// after the report tab is first activated, no longer lazy-render it from then on
+const reportActive = ref(false);
+const reportLazy = ref(true);
+watch(
+    () => reportActive.value,
+    (newValue) => {
+        if (newValue) {
+            reportLazy.value = false;
+        }
+    }
+);
+
+const invocationTabs = ref<BTabs>();
+const scrollableDiv = computed(() => invocationTabs.value?.$el.querySelector(".tab-content") as HTMLElement);
+const isScrollable = ref(false);
+useAnimationFrameResizeObserver(scrollableDiv, ({ clientSize, scrollSize }) => {
+    isScrollable.value = scrollSize.height >= clientSize.height + 1;
+});
+
+const invocation = computed(
+    () => invocationStore.getInvocationById(props.invocationId) as WorkflowInvocationElementView
+);
+const invocationState = computed(() => invocation.value?.state || "new");
+const invocationAndJobTerminal = computed(() => invocationSchedulingTerminal.value && jobStatesTerminal.value);
+const invocationSchedulingTerminal = computed(() => {
+    return (
+        invocationState.value == "scheduled" ||
+        invocationState.value == "cancelled" ||
+        invocationState.value == "failed"
+    );
+});
+const jobStatesTerminal = computed(() => {
+    if (invocationSchedulingTerminal.value && jobCount(jobStatesSummary.value as InvocationJobsSummary) === 0) {
+        // no jobs for this invocation (think subworkflow or just inputs)
+        return true;
+    }
+    return !!jobStatesSummary.value && isTerminal(jobStatesSummary.value as InvocationJobsSummary);
+});
+const jobStatesSummary = computed(() => {
+    const jobsSummary = invocationStore.getInvocationJobsSummaryById(props.invocationId);
+    return (!jobsSummary ? null : jobsSummary) as InvocationJobsSummary;
+});
+const invocationStateSuccess = computed(() => {
+    return (
+        invocationState.value == "scheduled" &&
+        runningCount(jobStatesSummary.value) === 0 &&
+        invocationAndJobTerminal.value
+    );
+});
+
+const workflowStore = useWorkflowStore();
+
+const isDeletedWorkflow = computed(() => getWorkflow()?.deleted === true);
+const workflowVersion = computed(() => getWorkflow()?.version);
+
+onMounted(() => {
+    pollStepStatesUntilTerminal();
+    pollJobStatesUntilTerminal();
+});
+
+onUnmounted(() => {
+    clearTimeout(stepStatesInterval.value);
+    clearTimeout(jobStatesInterval.value);
+});
+
+async function pollStepStatesUntilTerminal() {
+    if (!invocation.value || !invocationSchedulingTerminal.value) {
+        await invocationStore.fetchInvocationForId({ id: props.invocationId });
+        stepStatesInterval.value = setTimeout(pollStepStatesUntilTerminal, 3000);
+    }
+}
+async function pollJobStatesUntilTerminal() {
+    if (!jobStatesTerminal.value) {
+        await invocationStore.fetchInvocationJobsSummaryForId({ id: props.invocationId });
+        jobStatesInterval.value = setTimeout(pollJobStatesUntilTerminal, 3000);
+    }
+}
+function onError(e: any) {
+    console.error(e);
+}
+function onCancel() {
+    emit("invocation-cancelled");
+}
+function cancelWorkflowSchedulingLocal() {
+    cancelWorkflowScheduling(props.invocationId).then(onCancel).catch(onError);
+}
+
+function getWorkflow() {
+    return invocation.value?.workflow_id
+        ? (workflowStore.getStoredWorkflowByInstanceId(
+              invocation.value?.workflow_id
+          ) as unknown as StoredWorkflowDetailed)
+        : undefined;
+}
+
+function getWorkflowId() {
+    return invocation.value?.workflow_id
+        ? workflowStore.getStoredWorkflowIdByInstanceId(invocation.value?.workflow_id)
+        : undefined;
+}
+
+function getWorkflowName() {
+    return workflowStore.getStoredWorkflowNameByInstanceId(invocation.value?.workflow_id);
+}
 </script>
+
+<template>
+    <div v-if="invocation" class="d-flex flex-column w-100">
+        <div v-if="props.isFullPage" class="d-flex flex-gapx-1">
+            <Heading h1 separator inline truncate size="xl" class="flex-grow-1">
+                Invoked Workflow: "{{ getWorkflowName() }}"
+            </Heading>
+
+            <div>
+                <BButton
+                    v-b-tooltip.hover.noninteractive
+                    :title="localize('Return to Invocations List')"
+                    class="text-nowrap"
+                    size="sm"
+                    variant="outline-primary"
+                    to="/workflows/invocations">
+                    <FontAwesomeIcon :icon="faArrowLeft" class="mr-1" />
+                    <span v-localize>Invocations List</span>
+                </BButton>
+            </div>
+        </div>
+        <div v-if="props.isFullPage" class="py-2 pl-3 d-flex justify-content-between align-items-center">
+            <div>
+                <i>
+                    <FontAwesomeIcon :icon="faClock" class="mr-1" />invoked
+                    <UtcDate :date="invocation.update_time" mode="elapsed" />
+                </i>
+                <span class="d-flex flex-gapx-1 align-items-center">
+                    <FontAwesomeIcon :icon="faHdd" />History:
+                    <SwitchToHistoryLink :history-id="invocation.history_id" />
+                </span>
+            </div>
+            <div v-if="getWorkflow()" class="d-flex flex-gapx-1 align-items-center">
+                <div class="d-flex flex-column align-items-end mr-2">
+                    <span v-if="workflowVersion !== undefined" class="mb-1">
+                        <FontAwesomeIcon :icon="faSitemap" />
+                        Workflow Version: {{ workflowVersion + 1 }}
+                    </span>
+                    <WorkflowInvocationsCount class="float-right" :workflow="getWorkflow()" />
+                </div>
+                <BButtonGroup vertical>
+                    <BButton
+                        v-b-tooltip.hover.noninteractive.html
+                        :title="
+                            !isDeletedWorkflow
+                                ? `<b>Edit</b><br>${getWorkflowName()}`
+                                : 'This workflow has been deleted.'
+                        "
+                        size="sm"
+                        variant="secondary"
+                        :disabled="isDeletedWorkflow"
+                        :to="`/workflows/edit?id=${getWorkflowId()}`">
+                        <FontAwesomeIcon :icon="faEdit" />
+                        <span v-localize>Edit</span>
+                    </BButton>
+                    <BButton
+                        v-b-tooltip.hover.noninteractive.html
+                        :title="
+                            !isDeletedWorkflow
+                                ? `<b>Rerun</b><br>${getWorkflowName()}`
+                                : 'This workflow has been deleted.'
+                        "
+                        size="sm"
+                        variant="secondary"
+                        :disabled="isDeletedWorkflow"
+                        :to="`/workflows/run?id=${getWorkflowId()}`">
+                        <FontAwesomeIcon :icon="faPlay" />
+                        <span v-localize>Run</span>
+                    </BButton>
+                </BButtonGroup>
+            </div>
+        </div>
+        <BTabs
+            ref="invocationTabs"
+            class="mt-1 d-flex flex-column overflow-auto"
+            :content-class="['overflow-auto', isScrollable ? 'pr-2' : '']">
+            <BTab key="0" title="Overview" active>
+                <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>
+            <WorkflowInvocationInputOutputTabs :invocation="invocation" />
+            <!-- <BTab title="Workflow Overview">
+                <p>TODO: Insert readonly version of workflow editor here</p>
+            </BTab> -->
+            <BTab
+                title="Report"
+                title-item-class="invocation-report-tab"
+                :disabled="!invocationStateSuccess"
+                :lazy="reportLazy"
+                :active.sync="reportActive">
+                <InvocationReport v-if="invocationStateSuccess" :invocation-id="invocation.id" />
+            </BTab>
+            <BTab title="Export" lazy>
+                <div v-if="invocationAndJobTerminal">
+                    <WorkflowInvocationExportOptions :invocation-id="invocation.id" />
+                </div>
+                <BAlert v-else variant="info" show>
+                    <LoadingSpan message="Waiting to complete invocation" />
+                </BAlert>
+            </BTab>
+        </BTabs>
+    </div>
+    <BAlert v-else variant="info" show>
+        <LoadingSpan message="Loading invocation" />
+    </BAlert>
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index bab804b2d879..4678418e6f5d 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -1,7 +1,13 @@
 <template>
     <div class="d-flex" :data-step="workflowStep.id">
         <div class="ui-portlet-section" style="width: 100%">
-            <div class="portlet-header portlet-title portlet-operations cursor-pointer" @click="toggleStep">
+            <div
+                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>
@@ -11,9 +17,16 @@
                         <WorkflowStepTitle v-bind="titleProps(workflowStep.id)" />
                     </u>
                 </span>
-                <FontAwesomeIcon class="float-right" :icon="expanded ? 'fa-chevron-up' : 'fa-chevron-down'" />
+                <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>
             </div>
-            <div v-if="expanded" class="portlet-content">
+            <div v-if="computedExpanded" class="portlet-content">
                 <InvocationStepProvider
                     v-if="isReady && invocationStepId !== undefined"
                     :id="invocationStepId"
@@ -24,7 +37,8 @@
                         <div v-else>
                             <details
                                 v-if="Object.values(stepDetails.outputs).length > 0"
-                                class="invocation-step-output-details">
+                                class="invocation-step-output-details"
+                                :open="!isDataStep && inGraphView">
                                 <summary><b>Output Datasets</b></summary>
                                 <div v-for="(value, name) in stepDetails.outputs" :key="value.id">
                                     <b>{{ name }}</b>
@@ -33,7 +47,8 @@
                             </details>
                             <details
                                 v-if="Object.values(stepDetails.output_collections).length > 0"
-                                class="invocation-step-output-collection-details">
+                                class="invocation-step-output-collection-details"
+                                :open="!isDataStep && inGraphView">
                                 <summary><b>Output Dataset Collections</b></summary>
                                 <div v-for="(value, name) in stepDetails.output_collections" :key="value.id">
                                     <b>{{ name }}</b>
@@ -41,9 +56,21 @@
                                 </div>
                             </details>
                             <div class="portlet-body" style="width: 100%; overflow-x: auto">
-                                <details v-if="workflowStepType == 'tool'" class="invocation-step-job-details">
-                                    <summary><b>Jobs</b></summary>
-                                    <JobStep :jobs="stepDetails.jobs" />
+                                <details
+                                    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" />
+                                    <b-alert v-else v-localize variant="info" show>This step has no jobs</b-alert>
                                 </details>
                                 <ParameterStep
                                     v-else-if="workflowStepType == 'parameter_input'"
@@ -72,6 +99,7 @@
                                     </div>
                                     <WorkflowInvocationState
                                         v-else
+                                        is-subworkflow
                                         :invocation-id="stepDetails.subworkflow_invocation_id" />
                                 </div>
                             </div>
@@ -125,11 +153,15 @@ export default {
         invocation: Object,
         workflowStep: Object,
         workflow: Object,
+        graphStep: { type: Object, default: undefined },
+        expanded: { type: Boolean, default: undefined },
+        showingJobId: { type: String, default: null },
+        inGraphView: { type: Boolean, default: false },
     },
     data() {
         return {
-            expanded: false,
             polling: null,
+            localExpanded: this.expanded === undefined ? false : this.expanded,
         };
     },
     computed: {
@@ -138,6 +170,19 @@ export default {
         isReady() {
             return this.invocation.steps.length > 0;
         },
+        // a computed property that assesses whether we have an expanded prop
+        computedExpanded: {
+            get() {
+                return this.expanded === undefined ? this.localExpanded : this.expanded;
+            },
+            set(value) {
+                if (this.expanded === undefined) {
+                    this.localExpanded = value;
+                } else {
+                    this.$emit("update:expanded", value);
+                }
+            },
+        },
         invocationStepId() {
             return this.step?.id;
         },
@@ -164,8 +209,11 @@ export default {
                 this.fetchWorkflowForInstanceId(this.workflowStep.workflow_id);
             }
         },
+        showJob(id) {
+            this.$emit("show-job", id);
+        },
         toggleStep() {
-            this.expanded = !this.expanded;
+            this.computedExpanded = !this.computedExpanded;
         },
         toolProps(stepIndex) {
             const workflowStep = this.workflow.steps[stepIndex];
@@ -189,3 +237,11 @@ export default {
     },
 };
 </script>
+
+<style scoped lang="scss">
+.portlet-header {
+    &:hover {
+        opacity: 0.8;
+    }
+}
+</style>
diff --git a/client/src/composables/useInvocationGraph.ts b/client/src/composables/useInvocationGraph.ts
new file mode 100644
index 000000000000..f9416c471119
--- /dev/null
+++ b/client/src/composables/useInvocationGraph.ts
@@ -0,0 +1,267 @@
+import { type IconDefinition, library } from "@fortawesome/fontawesome-svg-core";
+import {
+    faCheckCircle,
+    faClock,
+    faExclamationTriangle,
+    faForward,
+    faPause,
+    faSpinner,
+    faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import Vue, { computed, type Ref, ref } from "vue";
+
+import { stepJobsSummaryFetcher, type StepJobSummary, type WorkflowInvocationElementView } from "@/api/invocations";
+import { isWorkflowInput } from "@/components/Workflow/constants";
+import { fromSimple } from "@/components/Workflow/Editor/modules/model";
+import { getWorkflowFull } from "@/components/Workflow/workflows.services";
+import type { Step } from "@/stores/workflowStepStore";
+import type { Workflow } from "@/stores/workflowStore";
+import { rethrowSimple } from "@/utils/simple-error";
+
+import { provideScopedWorkflowStores } from "./workflowStores";
+
+export interface GraphStep extends Step {
+    state?:
+        | "new"
+        | "upload"
+        | "waiting"
+        | "queued"
+        | "running"
+        | "ok"
+        | "error"
+        | "deleted"
+        | "hidden"
+        | "setting_metadata"
+        | "paused"
+        | "skipped";
+    jobs: StepJobSummary["states"];
+    headerClass?: Record<string, boolean>;
+    headerIcon?: IconDefinition;
+    headerIconSpin?: boolean;
+}
+interface InvocationGraph extends Workflow {
+    steps: { [index: number]: GraphStep };
+}
+
+/** Classes for states' icons */
+export const iconClasses: Record<string, { icon: IconDefinition; spin?: boolean; class?: string }> = {
+    ok: { icon: faCheckCircle, class: "text-success" },
+    error: { icon: faExclamationTriangle, class: "text-danger" },
+    paused: { icon: faPause, class: "text-primary" },
+    running: { icon: faSpinner, spin: true },
+    new: { icon: faClock },
+    waiting: { icon: faClock },
+    queued: { icon: faClock },
+    deleted: { icon: faTrash, class: "text-danger" },
+    skipped: { icon: faForward, class: "text-warning" },
+};
+
+/** 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 */
+const ALL_INSTANCES_STATES = ["deleted", "skipped", "new", "queued"];
+
+/** Composable that creates a readonly invocation graph and loads it onto a workflow editor canvas for display.
+ * @param invocation - The invocation to display in graph view
+ * @param workflowId - The id of the workflow that was invoked
+ */
+export function useInvocationGraph(
+    invocation: Ref<WorkflowInvocationElementView>,
+    workflowId: string | undefined,
+    workflowVersion: number | undefined
+) {
+    library.add(faCheckCircle, faClock, faExclamationTriangle, faForward, faPause, faSpinner, faTrash);
+
+    const steps = ref<{ [index: string]: GraphStep }>({});
+    const storeId = computed(() => `invocation-${invocation.value.id}`);
+
+    /** The full invocation mapped onto the original workflow */
+    const invocationGraph = ref<InvocationGraph | null>(null);
+
+    /** The workflow that was invoked */
+    const loadedWorkflow = ref<any>(null);
+
+    provideScopedWorkflowStores(storeId);
+
+    async function loadInvocationGraph() {
+        try {
+            if (!workflowId) {
+                throw new Error("Workflow Id is not defined");
+            }
+            if (workflowVersion === undefined) {
+                throw new Error("Workflow Version is not defined");
+            }
+
+            // initialize the original full workflow and invocation graph refs (only on the first load)
+            if (!loadedWorkflow.value) {
+                loadedWorkflow.value = await getWorkflowFull(workflowId, workflowVersion);
+            }
+            if (!invocationGraph.value) {
+                invocationGraph.value = {
+                    ...loadedWorkflow.value,
+                    id: storeId.value,
+                    steps: null,
+                };
+            }
+
+            // get the job summary for each step in the invocation
+            const { data: stepJobsSummary } = await stepJobsSummaryFetcher({ invocation_id: invocation.value.id });
+
+            /** The original steps of the workflow */
+            const originalSteps: Record<string, Step> = { ...loadedWorkflow.value.steps };
+
+            // for each step in the workflow, store the state and status of jobs
+            for (let i = 0; i < Object.keys(originalSteps).length; i++) {
+                /** An invocation graph step */
+                const graphStepFromWfStep = { ...originalSteps[i] } as GraphStep;
+
+                /** The type of the step (subworkflow, input, tool, etc.) */
+                let type;
+                if (graphStepFromWfStep.type === "subworkflow") {
+                    type = "subworkflow";
+                } else if (isWorkflowInput(graphStepFromWfStep.type)) {
+                    type = "input";
+                }
+
+                /** The raw invocation step */
+                const invocationStep = invocation.value.steps[i];
+
+                if (type !== "input") {
+                    // there is an invocation step for this workflow step
+                    if (invocationStep) {
+                        /** The `populated_state` for this graph step. (This may or may not be used to
+                         * derive the `state` for this invocation graph step) */
+                        let populatedState;
+
+                        if (type === "subworkflow") {
+                            // if the step is a subworkflow, get the populated state from the invocation step
+                            populatedState = invocationStep.state || undefined;
+
+                            /* TODO:
+                                Note that subworkflows are often in the `scheduled` state regardless of whether
+                                their output is successful or not. One good way to visually show if a subworkflow was
+                                successful is to set `graphStepFromWfStep.state = subworkflow.output?.state`.
+                            */
+                        }
+
+                        // First, try setting the state of the graph step based on its jobs' states or the populated state
+                        else {
+                            /** The step job summary for the invocation step (based on its job id) */
+                            const invocationStepSummary = stepJobsSummary.find((stepJobSummary: StepJobSummary) => {
+                                if (stepJobSummary.model === "ImplicitCollectionJobs") {
+                                    return stepJobSummary.id === invocationStep.implicit_collection_jobs_id;
+                                } else {
+                                    return stepJobSummary.id === invocationStep.job_id;
+                                }
+                            });
+
+                            if (invocationStepSummary) {
+                                // the step is not a subworkflow, get the populated state from the invocation step summary
+                                populatedState = invocationStepSummary.populated_state;
+
+                                if (invocationStepSummary.states) {
+                                    const statesForThisStep = Object.keys(invocationStepSummary.states);
+                                    // set the state of the graph step based on the job states for this step
+                                    graphStepFromWfStep.state = getStepStateFromJobStates(statesForThisStep);
+                                }
+                                // now store the job states for this step in the graph step
+                                graphStepFromWfStep.jobs = invocationStepSummary.states;
+                            } else {
+                                // TODO: There is no summary for this step's `job_id`; what does this mean?
+                                graphStepFromWfStep.state = "waiting";
+                            }
+                        }
+
+                        // If the state still hasn't been set, set it based on the populated state
+                        if (!graphStepFromWfStep.state) {
+                            if (populatedState === "scheduled" || populatedState === "ready") {
+                                graphStepFromWfStep.state = "queued";
+                            } else if (populatedState === "resubmitted") {
+                                graphStepFromWfStep.state = "new";
+                            } else if (populatedState === "failed") {
+                                graphStepFromWfStep.state = "error";
+                            } else if (populatedState === "deleting") {
+                                graphStepFromWfStep.state = "deleted";
+                            } else if (populatedState && !["stop", "stopped"].includes(populatedState)) {
+                                graphStepFromWfStep.state = populatedState as GraphStep["state"];
+                            }
+                        }
+                    }
+
+                    // there is no invocation step for this workflow step, it is probably queued
+                    else {
+                        graphStepFromWfStep.state = "queued";
+                    }
+
+                    /** Setting the header class for the graph step */
+                    graphStepFromWfStep.headerClass = {
+                        "node-header-invocation": true,
+                        [`header-${graphStepFromWfStep.state}`]: !!graphStepFromWfStep.state,
+                    };
+                    // TODO: maybe a different one for inputs? Currently they have no state either.
+
+                    /** Setting the header icon for the graph step */
+                    if (graphStepFromWfStep.state) {
+                        graphStepFromWfStep.headerIcon = iconClasses[graphStepFromWfStep.state]?.icon;
+                        graphStepFromWfStep.headerIconSpin = iconClasses[graphStepFromWfStep.state]?.spin;
+                    }
+                }
+
+                // update the invocation graph steps object
+                Vue.set(steps.value, i, graphStepFromWfStep);
+            }
+
+            invocationGraph.value!.steps = { ...steps.value };
+
+            // Load the invocation graph into the editor every time
+            await fromSimple(storeId.value, invocationGraph.value as any);
+        } catch (e) {
+            rethrowSimple(e);
+        }
+    }
+
+    /** Given the job states for a step, if the states fall into a single instance state
+     * or all instances state, return the state of the step.
+     * @param jobStates - The job states for a step
+     * @returns The state for the graph step or `undefined` if the states don't match any
+     *          single instance state or all instances state
+     * */
+    function getStepStateFromJobStates(jobStates: string[]): GraphStep["state"] | undefined {
+        for (const state of SINGLE_INSTANCE_STATES) {
+            if (jobStates.includes(state)) {
+                return state as GraphStep["state"];
+            }
+        }
+        for (const state of ALL_INSTANCES_STATES) {
+            if (jobStates.every((jobState) => jobState === state)) {
+                return state as GraphStep["state"];
+            }
+        }
+        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);
+    // }
+
+    return {
+        /** An id used to scope the store to the invocation's id */
+        storeId,
+        /** The steps of the invocation graph */
+        steps,
+        /** Fetches the original workflow structure (once) and the step job summaries for each step in the invocation,
+         * and displays the job states on the workflow graph steps.
+         */
+        loadInvocationGraph,
+    };
+}
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index dec661825916..0f5d17685574 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -545,7 +545,10 @@ export function getRouter(Galaxy) {
                     {
                         path: "workflows/invocations/:invocationId",
                         component: WorkflowInvocationState,
-                        props: true,
+                        props: (route) => ({
+                            invocationId: route.params.invocationId,
+                            isFullPage: true,
+                        }),
                     },
                     {
                         path: "workflows/list",
diff --git a/client/src/stores/workflowStore.ts b/client/src/stores/workflowStore.ts
index aca2e887f5e7..b757fe868b20 100644
--- a/client/src/stores/workflowStore.ts
+++ b/client/src/stores/workflowStore.ts
@@ -11,6 +11,7 @@ export interface Workflow {
     steps: Steps;
     step_count?: number;
     latest_id?: string;
+    version: number;
 }
 
 export const useWorkflowStore = defineStore("workflowStore", () => {
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 6532c64b2c8d..4cfacb2b380c 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -189,6 +189,21 @@ $galaxy-state-bg: (
     border-style: dotted;
 }
 
+.node-header-invocation {
+    color: $text-color;
+    @each $state in map-keys($galaxy-state-bg) {
+        &.header-#{$state} {
+            background-color: map-get($galaxy-state-bg, $state) !important;
+        }
+    }
+    &.header-paused {
+        background-color: $state-info-bg !important;
+    }
+    &.header-skipped {
+        background-color: map-get($galaxy-state-bg, "hidden") !important;
+    }
+}
+
 // Extra label colors
 .badge-beta {
     @extend .badge-warning;
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index bbd7621b5450..28aee0709b20 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -844,6 +844,7 @@ invocations:
     toggle_invocation_details: '.toggle-invocation-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"]'
     invocation_tab:
       type: xpath
       selector: '//a[text()="${label}"]'
diff --git a/client/src/utils/navigation/schema.ts b/client/src/utils/navigation/schema.ts
index 8fe3a0b8a4df..649462897c25 100644
--- a/client/src/utils/navigation/schema.ts
+++ b/client/src/utils/navigation/schema.ts
@@ -499,6 +499,7 @@ interface Rootinvocations extends Component {
     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;
diff --git a/lib/galaxy/model/__init__.py b/lib/galaxy/model/__init__.py
index ded3c626d14d..0afef8cf20f4 100644
--- a/lib/galaxy/model/__init__.py
+++ b/lib/galaxy/model/__init__.py
@@ -8779,6 +8779,7 @@ def to_dict(self, view="collection", value_mapper=None, step_details=False, lega
                         v["state"] = None
                         steps.append(v)
                 else:
+                    v["implicit_collection_jobs_id"] = step.implicit_collection_jobs_id
                     steps.append(v)
             rval["steps"] = steps
 
diff --git a/lib/galaxy/schema/invocation.py b/lib/galaxy/schema/invocation.py
index 44741831c8f1..55bb438ae531 100644
--- a/lib/galaxy/schema/invocation.py
+++ b/lib/galaxy/schema/invocation.py
@@ -379,6 +379,11 @@ class InvocationStep(Model, WithModelClass):
         title="Jobs",
         description="Jobs associated with the workflow invocation step.",
     )
+    implicit_collection_jobs_id: Optional[EncodedDatabaseIdField] = Field(
+        None,
+        title="Implicit Collection Jobs ID",
+        description="The implicit collection job ID associated with the workflow invocation step.",
+    )
 
 
 class InvocationReport(Model, WithModelClass):
@@ -581,10 +586,20 @@ class InvocationStepJobsResponseStepModel(InvocationJobsSummaryBaseModel):
 
 class InvocationStepJobsResponseJobModel(InvocationJobsSummaryBaseModel):
     model: JOB_MODEL_CLASS
+    id: EncodedDatabaseIdField = Field(
+        default=...,
+        title="ID",
+        description="The encoded ID of the job.",
+    )
 
 
 class InvocationStepJobsResponseCollectionJobsModel(InvocationJobsSummaryBaseModel):
     model: IMPLICIT_COLLECTION_JOBS_MODEL_CLASS
+    id: EncodedDatabaseIdField = Field(
+        default=...,
+        title="ID",
+        description="The encoded ID of the collection job.",
+    )
 
 
 class CreateInvocationFromStore(StoreContentSource):
diff --git a/lib/galaxy_test/selenium/test_workflow_invocation_details.py b/lib/galaxy_test/selenium/test_workflow_invocation_details.py
index 8062bfcba49c..6d98905b8528 100644
--- a/lib/galaxy_test/selenium/test_workflow_invocation_details.py
+++ b/lib/galaxy_test/selenium/test_workflow_invocation_details.py
@@ -42,12 +42,12 @@ def assert_progress_steps_note_contains(text):
         assert_progress_steps_note_contains("3 of 3 steps successfully scheduled.")
         assert "2 of 2 jobs complete." in invocations.progress_jobs_note.wait_for_visible().text
 
-        invocations.invocation_tab(label="Details").wait_for_and_click()
-        invocations.invocation_details_tab(label="Inputs").wait_for_and_click()
+        invocations.invocation_tab(label="Inputs").wait_for_and_click()
         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_details_tab(label="Steps").wait_for_and_click()
+        invocations.invocation_tab(label="Overview").wait_for_and_click()
+        invocations.hide_invocation_graph.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