diff --git a/client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue b/client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue
index 962262095e3d..9610656b71c6 100644
--- a/client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue
+++ b/client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue
@@ -12,7 +12,6 @@ import {
     runningCount as jobStatesSummaryRunningCount,
 } from "./util";
 
-
 interface Props {
     jobStatesSummary: InvocationJobsSummary;
     invocationSchedulingTerminal: boolean;
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
index 4ff1fc0e9960..21bc1cbdcda7 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
@@ -14,7 +14,7 @@ import InvocationJobsProgressBar from "./InvocationJobsProgressBar.vue";
 import InvocationStepsProgressBar from "./InvocationStepsProgressBar.vue";
 
 interface Props {
-    invocation?: WorkflowInvocationElementView;
+    invocation: WorkflowInvocationElementView;
     invocationAndJobTerminal: boolean;
     invocationSchedulingTerminal: boolean;
     jobStatesSummary: InvocationJobsSummary;
@@ -23,7 +23,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const invocationId = computed<string | undefined>(() => props.invocation?.id);
+const invocationId = computed<string>(() => props.invocation.id);
 
 const indexStr = computed(() => {
     if (props.index == undefined) {
@@ -34,7 +34,7 @@ const indexStr = computed(() => {
 });
 
 const invocationState = computed(() => {
-    return props.invocation?.state || "new";
+    return props.invocation.state || "new";
 });
 
 const invocationStateSuccess = computed(() => {
@@ -45,6 +45,10 @@ const runningCount = computed<number>(() => {
     return jobStatesSummaryRunningCount(props.jobStatesSummary);
 });
 
+const messages = computed(() => {
+    return props.invocation.messages;
+});
+
 const emit = defineEmits<{
     (e: "invocation-cancelled"): void;
 }>();
@@ -72,9 +76,9 @@ function onCancel() {
                 title="Cancel scheduling of workflow invocation"
                 @click="onCancel"></span>
         </div>
-        <template v-if="invocation.messages?.length">
+        <template v-if="messages?.length">
             <InvocationMessage
-                v-for="message in invocation.messages"
+                v-for="message in messages"
                 :key="message.reason"
                 class="steps-progress my-1"
                 :invocation-message="message"