diff --git a/client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue b/client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue
new file mode 100644
index 000000000000..dd74936ca879
--- /dev/null
+++ b/client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { UrlDataProvider } from "@/components/providers/UrlDataProvider.js";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+interface HistoryDatasetAsTableProps {
+    historyDatasetId: string;
+    compact: boolean;
+    showColumnHeaders: boolean;
+    title?: string;
+    footer?: string;
+}
+
+const props = withDefaults(defineProps<HistoryDatasetAsTableProps>(), {
+    compact: false,
+    showColumnHeaders: true,
+    title: undefined,
+    footer: undefined,
+});
+
+const itemUrl = computed(() => {
+    return `/api/datasets/${props.historyDatasetId}/get_content_as_text`;
+});
+
+const metaUrl = computed(() => {
+    return `/api/datasets/${props.historyDatasetId}`;
+});
+
+const expanded = false;
+
+const contentClass = computed(() => {
+    if (expanded) {
+        return "embedded-dataset-expanded";
+    } else {
+        return "embedded-dataset";
+    }
+});
+
+function getFields(metaData: any) {
+    const fields = [];
+    const columnNames = metaData.metadata_column_names || [];
+    const columnCount = metaData.metadata_columns;
+    for (let i = 0; i < columnCount; i++) {
+        fields.push({
+            key: `${i}`,
+            label: columnNames[i] || i,
+            sortable: true,
+        });
+    }
+    return fields;
+}
+
+function getItems(textData: any, metaData: any) {
+    const tableData: object[] = [];
+    const delimiter: string = metaData.metadata_delimiter || "\t";
+    const comments: number = metaData.metadata_comment_lines || 0;
+    const lines = textData.split("\n");
+    lines.forEach((line: string, i: number) => {
+        if (i >= comments) {
+            const tabs = line.split(delimiter);
+            const rowData: string[] = [];
+            let hasData = false;
+            tabs.forEach((cellData: string, j: number) => {
+                const cellDataTrimmed = cellData.trim();
+                if (cellDataTrimmed) {
+                    hasData = true;
+                }
+                rowData[j] = cellDataTrimmed;
+            });
+            if (hasData) {
+                tableData.push(rowData);
+            }
+        }
+    });
+    return tableData;
+}
+</script>
+
+<template>
+    <b-card :no-body="props.compact">
+        <b-card-title v-if="title">
+            <b>{{ title }}</b>
+        </b-card-title>
+        <UrlDataProvider v-slot="{ result: itemContent, loading, error }" :url="itemUrl">
+            <LoadingSpan v-if="loading" message="Loading Dataset" />
+            <div v-else-if="error">{{ error }}</div>
+            <div v-else :class="contentClass">
+                <div v-if="itemContent.item_data">
+                    <div>
+                        <UrlDataProvider
+                            v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
+                            :url="metaUrl">
+                            <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
+                            <div v-else-if="metaError">{{ metaError }}</div>
+                            <b-table
+                                v-else
+                                :thead-class="props.showColumnHeaders ? '' : 'd-none'"
+                                striped
+                                hover
+                                :fields="getFields(metaData)"
+                                :items="getItems(itemContent.item_data, metaData)" />
+                        </UrlDataProvider>
+                    </div>
+                </div>
+                <div v-else>No content found.</div>
+                <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
+            </div>
+        </UrlDataProvider>
+        <b-card-footer v-if="footer">
+            {{ footer }}
+        </b-card-footer>
+    </b-card>
+</template>
+
+<style scoped>
+.embedded-dataset {
+    max-height: 20rem;
+    overflow-y: auto;
+}
+.embedded-dataset-expanded {
+    max-height: 40rem;
+    overflow-y: auto;
+}
+</style>
diff --git a/client/src/components/Markdown/Elements/JobMetrics.vue b/client/src/components/Markdown/Elements/JobMetrics.vue
index 03aab3ffa538..1f6bd4e66d5c 100644
--- a/client/src/components/Markdown/Elements/JobMetrics.vue
+++ b/client/src/components/Markdown/Elements/JobMetrics.vue
@@ -1,26 +1,55 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+
+import { useJobStore } from "@/stores/jobStore";
+
+import JobMetrics from "@/components/JobMetrics/JobMetrics.vue";
+import ToolLinkPopover from "@/components/Tool/ToolLinkPopover.vue";
+
+interface JobMetricsProps {
+    jobId: string;
+    title?: string;
+    footer?: string;
+}
+
+const props = withDefaults(defineProps<JobMetricsProps>(), {
+    title: undefined,
+    footer: undefined,
+});
+
+const jobStore = useJobStore();
+
+const toolId = computed(() => {
+    return jobStore.getJob(props.jobId)?.tool_id;
+});
+const toolVersion = computed(() => {
+    return jobStore.getJob(props.jobId)?.tool_version;
+});
+
+watch(
+    props,
+    () => {
+        jobStore.fetchJob(props.jobId);
+    },
+    { immediate: true }
+);
+</script>
+
 <template>
     <b-card nobody>
+        <b-card-title v-if="title">
+            <b>{{ title }}</b>
+            <icon ref="info" icon="info-circle" size="sm" />
+            <ToolLinkPopover :target="() => $refs.info" :tool-id="toolId" :tool-version="toolVersion" />
+        </b-card-title>
         <JobMetrics
             class="job-metrics"
-            :job-id="args.job_id"
+            :job-id="jobId"
             :should-show-aws-estimate="false"
             :should-show-carbon-emissions-estimates="false"
             :include-title="false" />
+        <b-card-footer v-if="footer">
+            {{ footer }}
+        </b-card-footer>
     </b-card>
 </template>
-
-<script>
-import JobMetrics from "components/JobMetrics/JobMetrics";
-
-export default {
-    components: {
-        JobMetrics,
-    },
-    props: {
-        args: {
-            type: Object,
-            default: null,
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Markdown/Elements/JobParameters.vue b/client/src/components/Markdown/Elements/JobParameters.vue
index 2b19ab0e9594..804671429f44 100644
--- a/client/src/components/Markdown/Elements/JobParameters.vue
+++ b/client/src/components/Markdown/Elements/JobParameters.vue
@@ -1,21 +1,52 @@
-<template>
-    <b-card nobody>
-        <JobParameters class="job-parameters" :job-id="args.job_id" :param="args.param" :include-title="false" />
-    </b-card>
-</template>
+<script setup lang="ts">
+import { computed, watch } from "vue";
 
-<script>
-import JobParameters from "components/JobParameters/JobParameters";
+import { useJobStore } from "@/stores/jobStore";
 
-export default {
-    components: {
-        JobParameters,
-    },
-    props: {
-        args: {
-            type: Object,
-            default: null,
-        },
+import JobParameters from "@/components/JobParameters/JobParameters.vue";
+import ToolLinkPopover from "@/components/Tool/ToolLinkPopover.vue";
+
+interface JobParametersProps {
+    jobId: string;
+    param?: string;
+    title?: string;
+    footer?: string;
+}
+
+const props = withDefaults(defineProps<JobParametersProps>(), {
+    param: undefined,
+    title: undefined,
+    footer: undefined,
+});
+
+const jobStore = useJobStore();
+
+const toolId = computed(() => {
+    return jobStore.getJob(props.jobId)?.tool_id;
+});
+const toolVersion = computed(() => {
+    return jobStore.getJob(props.jobId)?.tool_version;
+});
+
+watch(
+    props,
+    () => {
+        jobStore.fetchJob(props.jobId);
     },
-};
+    { immediate: true }
+);
 </script>
+
+<template>
+    <b-card nobody>
+        <b-card-title v-if="title">
+            <b>{{ title }}</b>
+            <icon ref="info" icon="info-circle" size="sm" />
+            <ToolLinkPopover :target="() => $refs.info" :tool-id="toolId" :tool-version="toolVersion" />
+        </b-card-title>
+        <JobParameters class="job-parameters" :job-id="jobId" :param="param" :include-title="false" />
+        <b-card-footer v-if="footer">
+            {{ footer }}
+        </b-card-footer>
+    </b-card>
+</template>
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
index 329af572b8a0..9a6db0d60771 100644
--- a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
+++ b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
@@ -7,6 +7,9 @@ import { isEmpty } from "@/utils/utils";
 
 import WorkflowTree from "./WorkflowTree.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
+import ToolLinkPopover from "@/components/Tool/ToolLinkPopover.vue";
+import WorkflowStepIcon from "@/components/WorkflowInvocationState/WorkflowStepIcon.vue";
+import WorkflowStepTitle from "@/components/WorkflowInvocationState/WorkflowStepTitle.vue";
 
 interface WorkflowDisplayProps {
     workflowId: string;
@@ -102,7 +105,20 @@ onMounted(async () => {
                 </b-alert>
                 <div v-if="itemContent !== null">
                     <div v-for="step in itemContent?.steps" :key="step.order_index" class="mb-2">
-                        <div>Step {{ step.order_index + 1 }}: {{ step.label }}</div>
+                        <span :id="`step-icon-${step.order_index}`">
+                            <WorkflowStepIcon v-if="step.type" :step-type="step.type" />
+                        </span>
+                        <ToolLinkPopover
+                            v-if="step.type == 'tool'"
+                            :target="`step-icon-${step.order_index}`"
+                            :tool-id="step.tool_id"
+                            :tool-version="step.tool_version" />
+                        <WorkflowStepTitle
+                            :step-tool-id="step.tool_id"
+                            :step-subworkflow-id="step.subworkflow_id"
+                            :step-label="step.label"
+                            :step-type="step.type"
+                            :step-index="step.order_index" />
                         <WorkflowTree :input="step" :skip-head="true" />
                     </div>
                 </div>
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index c338743a39e2..a76c465c10d0 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -4,6 +4,7 @@ import { computed, ref } from "vue";
 import { useConfig } from "@/composables/config";
 
 import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
+import HistoryDatasetAsTable from "./Elements/HistoryDatasetAsTable.vue";
 import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay.vue";
 import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails.vue";
 import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay.vue";
@@ -68,6 +69,17 @@ const props = defineProps({
 
 const isCollapsible = computed(() => props.args.collapse !== undefined);
 const isVisible = computed(() => !isCollapsible.value || toggle.value);
+
+function argToBoolean(args, name, booleanDefault) {
+    const valueAsString = args[name];
+    if (valueAsString == "true") {
+        return true;
+    } else if (valueAsString == "false") {
+        return false;
+    } else {
+        return booleanDefault;
+    }
+}
 </script>
 
 <template>
@@ -126,11 +138,27 @@ const isVisible = computed(() => !isCollapsible.value || toggle.value);
             </InstanceUrl>
             <HistoryLink v-else-if="name == 'history_link'" :args="args" :histories="histories" />
             <HistoryDatasetAsImage v-else-if="name == 'history_dataset_as_image'" :args="args" />
+            <HistoryDatasetAsTable
+                v-else-if="name == 'history_dataset_as_table'"
+                :history-dataset-id="args.history_dataset_id"
+                :compact="argToBoolean(args, 'compact', false)"
+                :show-column-headers="argToBoolean(args, 'show_column_headers', true)"
+                :title="args.title"
+                :footer="args.footer" />
             <HistoryDatasetLink v-else-if="name == 'history_dataset_link'" :args="args" />
             <HistoryDatasetIndex v-else-if="name == 'history_dataset_index'" :args="args" />
             <InvocationTime v-else-if="name == 'invocation_time'" :args="args" :invocations="invocations" />
-            <JobMetrics v-else-if="name == 'job_metrics'" :args="args" />
-            <JobParameters v-else-if="name == 'job_parameters'" :args="args" />
+            <JobMetrics
+                v-else-if="name == 'job_metrics'"
+                :job-id="args.job_id"
+                :title="args.title"
+                :footer="args.footer" />
+            <JobParameters
+                v-else-if="name == 'job_parameters'"
+                :job-id="args.job_id"
+                :param="args.param || undefined"
+                :title="args.title"
+                :footer="args.footer" />
             <WorkflowDisplay
                 v-else-if="name == 'workflow_display'"
                 :workflow-id="args.workflow_id"
diff --git a/client/src/components/Markdown/MarkdownToolBox.vue b/client/src/components/Markdown/MarkdownToolBox.vue
index cad2605a50f5..e7f2d7c6b1ca 100644
--- a/client/src/components/Markdown/MarkdownToolBox.vue
+++ b/client/src/components/Markdown/MarkdownToolBox.vue
@@ -77,6 +77,11 @@ const historySharedElements = [
         name: "Embedded Dataset",
         emitter: "onHistoryDatasetId",
     },
+    {
+        id: "history_dataset_as_table",
+        name: "Embedded Dataset (as table)",
+        emitter: "onHistoryDatasetId",
+    },
     {
         id: "history_dataset_type",
         name: "Dataset Type",
diff --git a/client/src/components/Tool/ToolLink.vue b/client/src/components/Tool/ToolLink.vue
new file mode 100644
index 000000000000..f50104dd4cb3
--- /dev/null
+++ b/client/src/components/Tool/ToolLink.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+
+import { useToolStore } from "@/stores/toolStore";
+
+const toolStore = useToolStore();
+
+interface ToolLinkProps {
+    toolId: string;
+    toolVersion: string;
+}
+
+const props = defineProps<ToolLinkProps>();
+
+const toolName = computed(() => {
+    if (props.toolId) {
+        return toolStore.getToolNameById(props.toolId);
+    }
+    return "";
+});
+
+const toolLink = computed(() => {
+    return `/root?tool_id=${props.toolId}&tool_version=${props.toolVersion}`;
+});
+
+watch(
+    props,
+    () => {
+        if (props.toolId && !toolStore.getToolForId(props.toolId)) {
+            toolStore.fetchToolForId(props.toolId);
+        }
+    },
+    { immediate: true }
+);
+</script>
+
+<template>
+    <router-link :to="toolLink">
+        <b>{{ toolName || toolId }}</b> (Galaxy Version {{ toolVersion }})
+    </router-link>
+</template>
diff --git a/client/src/components/Tool/ToolLinkPopover.vue b/client/src/components/Tool/ToolLinkPopover.vue
new file mode 100644
index 000000000000..f14d5f94d744
--- /dev/null
+++ b/client/src/components/Tool/ToolLinkPopover.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import ToolLink from "./ToolLink.vue";
+
+interface ToolLinkPopoverProps {
+    target: string | Function;
+    toolId?: string;
+    toolVersion?: string;
+}
+
+withDefaults(defineProps<ToolLinkPopoverProps>(), {
+    toolId: undefined,
+    toolVersion: undefined,
+});
+
+// default boundary of scrollParent doesn't work well at all in the workflow display list
+const boundary = "window";
+</script>
+
+<template>
+    <b-popover v-if="toolId" :boundary="boundary" :target="target" triggers="hover">
+        Tool:
+        <ToolLink :tool-id="toolId" :tool-version="toolVersion || 'latest'" />
+    </b-popover>
+</template>
diff --git a/client/src/components/Workflow/icons.js b/client/src/components/Workflow/icons.js
index 69401bcd581f..fda447092b49 100644
--- a/client/src/components/Workflow/icons.js
+++ b/client/src/components/Workflow/icons.js
@@ -1,8 +1,14 @@
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faFile } from "@fortawesome/free-regular-svg-icons";
+import { faFolderOpen, faPause, faPencilAlt, faSitemap, faWrench } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faWrench, faFile, faSitemap, faPencilAlt, faPause, faFolderOpen);
+
 export default {
     tool: "fa-wrench",
-    data_input: "fa-file-o",
-    data_collection_input: "fa-folder-o",
+    data_input: "fa-file-o fa-file", // fa-file-o for older FontAwesome, fa-file is the only thing I could find newer font awesome
+    data_collection_input: "fa-folder-o fa-folder-open",
     subworkflow: "fa-sitemap fa-rotate-270",
-    parameter_input: "fa-pencil",
+    parameter_input: "fa-pencil-alt", // fa-pencil for older FontAwesome, fa-pencil-alt for newer
     pause: "fa-pause",
 };
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index d37e6fa1580b..bab804b2d879 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -2,9 +2,14 @@
     <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">
-                <i :class="'portlet-title-icon fa mr-1 ' + stepIcon"></i>
+                <span :id="`step-icon-${workflowStep.id}`">
+                    <WorkflowStepIcon class="portlet-title-icon" :step-type="workflowStepType" />
+                </span>
+                <ToolLinkPopover :target="`step-icon-${workflowStep.id}`" v-bind="toolProps(workflowStep.id)" />
                 <span class="portlet-title-text">
-                    <u class="step-title">{{ stepLabel }}</u>
+                    <u class="step-title">
+                        <WorkflowStepTitle v-bind="titleProps(workflowStep.id)" />
+                    </u>
                 </span>
                 <FontAwesomeIcon class="float-right" :icon="expanded ? 'fa-chevron-up' : 'fa-chevron-down'" />
             </div>
@@ -61,7 +66,7 @@
                                             <li
                                                 v-for="stepInput in Object.values(workflowStep.input_steps)"
                                                 :key="stepInput.source_step">
-                                                {{ labelForWorkflowStep(stepInput.source_step) }}
+                                                <WorkflowStepTitle v-bind="titleProps(stepInput.source_step)" />
                                             </li>
                                         </ul>
                                     </div>
@@ -91,13 +96,15 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import GenericHistoryItem from "components/History/Content/GenericItem";
 import LoadingSpan from "components/LoadingSpan";
 import { InvocationStepProvider } from "components/providers";
-import WorkflowIcons from "components/Workflow/icons";
+import ToolLinkPopover from "components/Tool/ToolLinkPopover";
 import { mapActions, mapState } from "pinia";
 import { useToolStore } from "stores/toolStore";
 import { useWorkflowStore } from "stores/workflowStore";
 
 import JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
+import WorkflowStepIcon from "./WorkflowStepIcon";
+import WorkflowStepTitle from "./WorkflowStepTitle";
 
 library.add(faChevronUp, faChevronDown);
 
@@ -109,6 +116,9 @@ export default {
         ParameterStep,
         InvocationStepProvider,
         GenericHistoryItem,
+        ToolLinkPopover,
+        WorkflowStepIcon,
+        WorkflowStepTitle,
         WorkflowInvocationState: () => import("components/WorkflowInvocationState/WorkflowInvocationState"),
     },
     props: {
@@ -140,16 +150,6 @@ export default {
         isDataStep() {
             return ["data_input", "data_collection_input"].includes(this.workflowStepType);
         },
-        stepIcon() {
-            return WorkflowIcons[this.workflowStepType];
-        },
-        stepLabel() {
-            return this.labelForWorkflowStep(this.workflowStep.id);
-        },
-    },
-    created() {
-        this.fetchTool();
-        this.fetchSubworkflow();
     },
     methods: {
         ...mapActions(useWorkflowStore, ["fetchWorkflowForInstanceId"]),
@@ -167,31 +167,24 @@ export default {
         toggleStep() {
             this.expanded = !this.expanded;
         },
-        labelForWorkflowStep(stepIndex) {
+        toolProps(stepIndex) {
+            const workflowStep = this.workflow.steps[stepIndex];
+            return {
+                toolId: workflowStep.tool_id,
+                toolVersion: workflowStep.tool_version,
+            };
+        },
+        titleProps(stepIndex) {
             const invocationStep = this.invocation.steps[stepIndex];
             const workflowStep = this.workflow.steps[stepIndex];
-            const oneBasedStepIndex = stepIndex + 1;
-            if (invocationStep && invocationStep.workflow_step_label) {
-                return `Step ${oneBasedStepIndex}: ${invocationStep.workflow_step_label}`;
-            }
-            const workflowStepType = workflowStep.type;
-            switch (workflowStepType) {
-                case "tool":
-                    return `Step ${oneBasedStepIndex}: ${this.getToolNameById(workflowStep.tool_id)}`;
-                case "subworkflow": {
-                    const subworkflow = this.getStoredWorkflowByInstanceId(workflowStep.workflow_id);
-                    const label = subworkflow ? subworkflow.name : "Subworkflow";
-                    return `Step ${oneBasedStepIndex}: ${label}`;
-                }
-                case "parameter_input":
-                    return `Step ${oneBasedStepIndex}: Parameter input`;
-                case "data_input":
-                    return `Step ${oneBasedStepIndex}: Data input`;
-                case "data_collection_input":
-                    return `Step ${oneBasedStepIndex}: Data collection input`;
-                default:
-                    return `Step ${oneBasedStepIndex}: Unknown step type '${workflowStepType}'`;
-            }
+            const rval = {
+                stepIndex: stepIndex,
+                stepLabel: invocationStep && invocationStep.workflow_step_label,
+                stepType: workflowStep.type,
+                stepToolId: workflowStep.tool_id,
+                stepSubworkflowId: workflowStep.workflow_id,
+            };
+            return rval;
         },
     },
 };
diff --git a/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue b/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
new file mode 100644
index 000000000000..7b103f3d27cd
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed } from "vue";
+
+import WorkflowIcons from "@/components/Workflow/icons";
+
+interface WorkflowStepIconProps {
+    stepType: "tool" | "data_input" | "data_collection_input" | "subworkflow" | "parameter_input" | "pause";
+}
+
+const props = defineProps<WorkflowStepIconProps>();
+
+const stepIcon = computed(() => {
+    return WorkflowIcons[props.stepType];
+});
+</script>
+
+<template>
+    <FontAwesomeIcon class="mr-1" :icon="stepIcon" />
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue b/client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue
new file mode 100644
index 000000000000..1253d73e3e40
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+
+import { useToolStore } from "@/stores/toolStore";
+import { useWorkflowStore } from "@/stores/workflowStore";
+
+interface WorkflowInvocationStepTitleProps {
+    stepIndex: number;
+    stepLabel?: string;
+    stepType: string;
+    stepToolId?: string;
+    stepSubworkflowId?: string;
+}
+
+const props = defineProps<WorkflowInvocationStepTitleProps>();
+
+const workflowStore = useWorkflowStore();
+const toolStore = useToolStore();
+
+const subWorkflow = computed(() => {
+    if (props.stepSubworkflowId) {
+        return workflowStore.getStoredWorkflowByInstanceId(props.stepSubworkflowId);
+    }
+    return null;
+});
+const toolName = computed(() => {
+    if (props.stepToolId) {
+        return toolStore.getToolNameById(props.stepToolId);
+    }
+    return "";
+});
+
+const title = computed(() => {
+    const oneBasedStepIndex = props.stepIndex + 1;
+    if (props.stepLabel) {
+        return `Step ${oneBasedStepIndex}: ${props.stepLabel}`;
+    }
+    const workflowStepType = props.stepType;
+    switch (workflowStepType) {
+        case "tool":
+            return `Step ${oneBasedStepIndex}: ${toolName.value}`;
+        case "subworkflow": {
+            const subworkflow = subWorkflow.value;
+            const label = subworkflow ? subworkflow.name : "Subworkflow";
+            return `Step ${oneBasedStepIndex}: ${label}`;
+        }
+        case "parameter_input":
+            return `Step ${oneBasedStepIndex}: Parameter input`;
+        case "data_input":
+            return `Step ${oneBasedStepIndex}: Data input`;
+        case "data_collection_input":
+            return `Step ${oneBasedStepIndex}: Data collection input`;
+        default:
+            return `Step ${oneBasedStepIndex}: Unknown step type '${workflowStepType}'`;
+    }
+});
+
+function initStores() {
+    if (props.stepToolId && !toolStore.getToolForId(props.stepToolId)) {
+        toolStore.fetchToolForId(props.stepToolId);
+    }
+
+    if (props.stepSubworkflowId) {
+        workflowStore.fetchWorkflowForInstanceId(props.stepSubworkflowId);
+    }
+}
+
+watch(
+    props,
+    () => {
+        initStores();
+    },
+    { immediate: true }
+);
+</script>
+
+<template>
+    <span>{{ title }}</span>
+</template>
diff --git a/client/src/stores/jobStore.ts b/client/src/stores/jobStore.ts
index 8cb0dc3317b7..0de68bde3507 100644
--- a/client/src/stores/jobStore.ts
+++ b/client/src/stores/jobStore.ts
@@ -12,6 +12,8 @@ import { getAppRoot } from "@/onload/loadConfig";
 /* interfaces */
 interface Job {
     id: string;
+    tool_id: string;
+    tool_version: string;
 }
 interface JobDef {
     tool_id: string;
diff --git a/lib/galaxy/managers/markdown_parse.py b/lib/galaxy/managers/markdown_parse.py
index ae70de230f91..4d0f20b5d2ca 100644
--- a/lib/galaxy/managers/markdown_parse.py
+++ b/lib/galaxy/managers/markdown_parse.py
@@ -30,6 +30,16 @@ class DynamicArguments:
     "history_dataset_display": ["input", "output", "history_dataset_id"],
     "history_dataset_embedded": ["input", "output", "history_dataset_id"],
     "history_dataset_as_image": ["input", "output", "history_dataset_id", "path"],
+    "history_dataset_as_table": [
+        "input",
+        "output",
+        "history_dataset_id",
+        "path",
+        "title",
+        "footer",
+        "show_column_headers",
+        "compact",
+    ],
     "history_dataset_peek": ["input", "output", "history_dataset_id"],
     "history_dataset_info": ["input", "output", "history_dataset_id"],
     "history_dataset_link": ["input", "output", "history_dataset_id", "path", "label"],
diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index 3523031283cf..9ef57141375e 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -137,6 +137,10 @@ def _remap(container, line):
                 _check_object(object_id, line)
                 hda = hda_manager.get_accessible(object_id, trans.user)
                 rval = self.handle_dataset_as_image(line, hda)
+            elif container == "history_dataset_as_table":
+                _check_object(object_id, line)
+                hda = hda_manager.get_accessible(object_id, trans.user)
+                rval = self.handle_dataset_as_table(line, hda)
             elif container == "history_dataset_peek":
                 _check_object(object_id, line)
                 hda = hda_manager.get_accessible(object_id, trans.user)
@@ -251,6 +255,10 @@ def handle_dataset_display(self, line, hda):
     def handle_dataset_as_image(self, line, hda):
         pass
 
+    @abc.abstractmethod
+    def handle_dataset_as_table(self, line, hda):
+        pass
+
     @abc.abstractmethod
     def handle_dataset_peek(self, line, hda):
         pass
@@ -411,6 +419,9 @@ def handle_history_link(self, line, history):
     def handle_dataset_as_image(self, line, hda):
         pass
 
+    def handle_dataset_as_table(self, line, hda):
+        pass
+
     def handle_job_metrics(self, line, job):
         pass
 
@@ -538,6 +549,14 @@ def _embed_image(self, name: str, image_type: str, image_data: bytes):
         base64_image_data = base64.b64encode(image_data).decode("utf-8")
         return f"![{name}](data:image/{image_type};base64,{base64_image_data})"
 
+    def handle_dataset_as_table(self, line, hda):
+        # TODO: this form of the rendering doesn't do anything special with advanced
+        # options yet but could easily be modified in the future. show_column_headers,
+        # compact, title, and footer should be handled in here to bring the PDF and the
+        # web rendering closer.
+        rval = self.handle_dataset_embedded(line, hda)
+        return rval
+
     def handle_history_link(self, line, history):
         if history:
             content = literal_via_fence(history.name)
diff --git a/lib/galaxy/managers/workflows.py b/lib/galaxy/managers/workflows.py
index 8bbc703056b0..e882f424c214 100644
--- a/lib/galaxy/managers/workflows.py
+++ b/lib/galaxy/managers/workflows.py
@@ -1129,6 +1129,7 @@ def do_inputs(inputs, values, prefix, step, other_values=None):
         for step in workflow.steps:
             step_dict = {}
             step_dict["order_index"] = step.order_index
+            step_dict["type"] = step.type
             if step.annotations:
                 step_dict["annotation"] = step.annotations[0].annotation
             try:
@@ -1139,6 +1140,8 @@ def do_inputs(inputs, values, prefix, step, other_values=None):
                 continue
             if step.type == "tool":
                 tool = trans.app.toolbox.get_tool(step.tool_id, step.tool_version)
+                step_dict["tool_id"] = step.tool_id
+                step_dict["tool_version"] = step.tool_version
                 step_dict["label"] = step.label or tool.name
                 step_dict["inputs"] = do_inputs(tool.inputs, step.state.inputs, "", step)
             elif step.type == "subworkflow":
diff --git a/lib/galaxy/model/__init__.py b/lib/galaxy/model/__init__.py
index 8a90c78ffb11..f341dd308073 100644
--- a/lib/galaxy/model/__init__.py
+++ b/lib/galaxy/model/__init__.py
@@ -1822,6 +1822,7 @@ def to_dict(self, view="collection", system_details=False):
         else:
             rval = super().to_dict(view=view)
         rval["tool_id"] = self.tool_id
+        rval["tool_version"] = self.tool_version
         rval["history_id"] = self.history_id
         if system_details or view == "admin_job_list":
             # System level details that only admins should have.