From 2a70ac443fd970f29a88afcaaf3c033c817a96eb Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 16 Mar 2026 18:24:12 -0500
Subject: [PATCH 1/5] make workflow invocation view step header sticky

---
 .../Workflow/Invocation/Graph/InvocationGraph.vue    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
index c60ec44282d..efe45508675 100644
--- a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
+++ b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -241,7 +241,7 @@ function toggleDetailedView() {
             </div>
             <BCard v-if="activeNodeId !== null && activeStep" ref="stepCard" class="invocation-step-card mt-2" no-body>
                 <BCardHeader
-                    class="d-flex justify-content-between align-items-center px-3 py-1"
+                    class="invocation-step-header"
                     :class="activeNodeId !== null ? steps[activeNodeId]?.headerClass : ''">
                     <WorkflowInvocationStepHeader
                         class="w-100 pr-2"
@@ -340,4 +340,14 @@ function toggleDetailedView() {
     z-index: 150;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
+
+.invocation-step-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing) var(--spacing-4);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
 </style>

From 5eae4f1420058f5656382291c50a6a964d2ef5be Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 31 Mar 2026 12:53:30 -0500
Subject: [PATCH 2/5] add step config (just like in the editor) to
 `WorkflowInvocationStep`

---
 .../WorkflowInvocationStep.vue                | 71 ++++++++++++++++++-
 1 file changed, 70 insertions(+), 1 deletion(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index b7d0f232b3c..d15f58b1a0d 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { faTimesCircle } from "@fortawesome/free-regular-svg-icons";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { faInfoCircle, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import axios from "axios";
 import { BAlert } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import type { WorkflowInvocationElementView } from "@/api/invocations";
 import type { WorkflowStepTyped } from "@/api/workflows";
+import { useDatatypesMapper } from "@/composables/datatypesMapper";
 import type { GraphStep } from "@/composables/useInvocationGraph";
+import { getAppRoot } from "@/onload/loadConfig";
 import { useInvocationStore } from "@/stores/invocationStore";
 
 import Heading from "../Common/Heading.vue";
@@ -20,6 +23,8 @@ import GTab from "@/components/BaseComponents/GTab.vue";
 import GTabs from "@/components/BaseComponents/GTabs.vue";
 import GenericHistoryItem from "@/components/History/Content/GenericItem.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
+import FormDefault from "@/components/Workflow/Editor/Forms/FormDefault.vue";
+import FormTool from "@/components/Workflow/Editor/Forms/FormTool.vue";
 
 const TERMINAL_JOB_STATES = ["ok", "error", "deleted", "paused"];
 
@@ -41,8 +46,11 @@ const emit = defineEmits<{
 }>();
 
 const invocationStore = useInvocationStore();
+const { datatypes } = useDatatypesMapper();
 
 const localExpanded = ref(Boolean(props.expanded));
+const stepConfigData = ref<Record<string, any> | null>(null);
+const loadingStepConfig = ref(false);
 const stepFetchInterval = ref<any>(undefined);
 
 const computedExpanded = computed({
@@ -143,6 +151,37 @@ const jobsTabTitle = computed(() => {
     return "No jobs";
 });
 
+const activeStepWithConfig = computed(() => {
+    if (!stepConfigData.value) {
+        return null;
+    }
+    const step = props.workflowStep as any;
+    return {
+        ...step,
+        config_form: stepConfigData.value.config_form,
+        inputs: stepConfigData.value.inputs ?? step.inputs,
+        outputs: stepConfigData.value.outputs ?? step.outputs,
+    } as any;
+});
+
+async function fetchStepConfig() {
+    if (stepConfigData.value || loadingStepConfig.value) {
+        return;
+    }
+    loadingStepConfig.value = true;
+    try {
+        const step = props.workflowStep as any;
+        const { data } = await axios.post(`${getAppRoot()}api/workflows/build_module`, {
+            type: step.type,
+            content_id: step.content_id ?? step.tool_id,
+            tool_state: step.tool_state ?? "{}",
+        });
+        stepConfigData.value = data;
+    } finally {
+        loadingStepConfig.value = false;
+    }
+}
+
 function toggleStep() {
     computedExpanded.value = !computedExpanded.value;
 }
@@ -278,6 +317,27 @@ onUnmounted(() => {
                                             </div>
                                         </div>
                                     </GTab>
+
+                                    <GTab
+                                        :class="{ 'invocation-view-step-config': props.inGraphView }"
+                                        lazy
+                                        @click="fetchStepConfig">
+                                        <template v-slot:title>
+                                            <FontAwesomeIcon :icon="faWrench" />
+                                            <span v-localize>Step Config</span>
+                                        </template>
+                                        <BAlert v-if="loadingStepConfig" show>
+                                            <LoadingSpan message="Loading step configuration" />
+                                        </BAlert>
+                                        <FormTool
+                                            v-else-if="workflowStepType === 'tool' && activeStepWithConfig"
+                                            :step="activeStepWithConfig"
+                                            :datatypes="datatypes" />
+                                        <FormDefault
+                                            v-else-if="workflowStepType !== 'tool' && activeStepWithConfig"
+                                            :step="activeStepWithConfig"
+                                            :datatypes="datatypes" />
+                                    </GTab>
                                 </GTabs>
                             </div>
                         </div>
@@ -302,4 +362,13 @@ onUnmounted(() => {
         opacity: 0.8;
     }
 }
+
+.invocation-view-step-config {
+    :deep(.tool-header) {
+        position: unset;
+    }
+    :deep(.ui-form-header-underlay) {
+        display: none;
+    }
+}
 </style>

From db46d96f0572ce6aa3ca9caca14cc31188edf605 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 31 Mar 2026 13:53:05 -0500
Subject: [PATCH 3/5] make invocation view step config readonly via a disabled
 fieldset

---
 .../WorkflowInvocationState/WorkflowInvocationStep.vue   | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index d15f58b1a0d..432cb6f2c5f 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -329,14 +329,13 @@ onUnmounted(() => {
                                         <BAlert v-if="loadingStepConfig" show>
                                             <LoadingSpan message="Loading step configuration" />
                                         </BAlert>
+                                        <fieldset v-else-if="activeStepWithConfig" disabled>
                                         <FormTool
-                                            v-else-if="workflowStepType === 'tool' && activeStepWithConfig"
-                                            :step="activeStepWithConfig"
-                                            :datatypes="datatypes" />
-                                        <FormDefault
-                                            v-else-if="workflowStepType !== 'tool' && activeStepWithConfig"
+                                                v-if="workflowStepType === 'tool'"
                                             :step="activeStepWithConfig"
                                             :datatypes="datatypes" />
+                                            <FormDefault v-else :step="activeStepWithConfig" :datatypes="datatypes" />
+                                        </fieldset>
                                     </GTab>
                                 </GTabs>
                             </div>

From 1296dc926ba13cc5d7beb11b01f40776407dae5b Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 31 Mar 2026 13:58:41 -0500
Subject: [PATCH 4/5] show step annotation in `WorkflowInvocationStep`

---
 .../WorkflowInvocationStep.vue                      | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index 432cb6f2c5f..e8551cbd8ed 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -213,6 +213,13 @@ onUnmounted(() => {
             </div>
 
             <div v-if="computedExpanded" class="portlet-content">
+                <div
+                    v-if="props.workflowStep.annotation"
+                    class="mb-2 bg-light rounded p-2"
+                    :class="{ 'mt-2': !props.inGraphView }">
+                    {{ props.workflowStep.annotation }}
+                </div>
+
                 <div v-if="isReady && invocationStepId !== undefined">
                     <div style="min-width: 1">
                         <BAlert v-if="loading" variant="info" show>
@@ -330,10 +337,10 @@ onUnmounted(() => {
                                             <LoadingSpan message="Loading step configuration" />
                                         </BAlert>
                                         <fieldset v-else-if="activeStepWithConfig" disabled>
-                                        <FormTool
+                                            <FormTool
                                                 v-if="workflowStepType === 'tool'"
-                                            :step="activeStepWithConfig"
-                                            :datatypes="datatypes" />
+                                                :step="activeStepWithConfig"
+                                                :datatypes="datatypes" />
                                             <FormDefault v-else :step="activeStepWithConfig" :datatypes="datatypes" />
                                         </fieldset>
                                     </GTab>

From 4be0e12e00bf0e331791435cc6e5046bfeafa0dc Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 31 Mar 2026 14:43:01 -0500
Subject: [PATCH 5/5] use editor-format graphStep directly for step config form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `graphStep` passed to `WorkflowInvocationStep` is already the full editor-format step loaded via `getWorkflowFull` (style=editor) in `useInvocationGraph`. It already has `config_form` populated with the correct parameter values, as well as `label`, `tool_state`, and `post_job_actions` — so there is no need to call `build_module` at all in the graph view.

`activeStepWithConfig` now returns `graphStep` directly when its `config_form` is present, rendering the form immediately with no network roundtrip and showing the actual values set in the workflow. The `build_module` fetch is kept as a fallback for non-graph contexts where `graphStep` is absent or incomplete, using `tool_state` (the proper editor-format) instead of the previously used `tool_inputs`.
---
 .../WorkflowInvocationStep.vue                   | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index e8551cbd8ed..87f5fbb75b2 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -152,10 +152,15 @@ const jobsTabTitle = computed(() => {
 });
 
 const activeStepWithConfig = computed(() => {
+    // graphStep is the full editor-format step (already has config_form with correct values)
+    if (props.graphStep?.config_form) {
+        return props.graphStep as any;
+    }
+    // If the graphStep doesn't have config_form, we may be able to get it from stepConfigData (fetched when user clicks on Step Config tab)
     if (!stepConfigData.value) {
         return null;
     }
-    const step = props.workflowStep as any;
+    const step = props.graphStep ?? (props.workflowStep as any);
     return {
         ...step,
         config_form: stepConfigData.value.config_form,
@@ -165,16 +170,17 @@ const activeStepWithConfig = computed(() => {
 });
 
 async function fetchStepConfig() {
-    if (stepConfigData.value || loadingStepConfig.value) {
+    // graphStep already has config_form — no fetch needed
+    if (props.graphStep?.config_form || stepConfigData.value || loadingStepConfig.value) {
         return;
     }
     loadingStepConfig.value = true;
     try {
-        const step = props.workflowStep as any;
+        const step = props.graphStep ?? props.workflowStep;
         const { data } = await axios.post(`${getAppRoot()}api/workflows/build_module`, {
             type: step.type,
-            content_id: step.content_id ?? step.tool_id,
-            tool_state: step.tool_state ?? "{}",
+            content_id: "content_id" in step ? step.content_id : step.tool_id,
+            tool_state: "tool_state" in step ? step.tool_state : {},
         });
         stepConfigData.value = data;
     } finally {