diff --git a/src/app/shared/task-execution-viewer/task-execution-viewer.css b/src/app/shared/task-execution-viewer/task-execution-viewer.css
index b94e311..3c5a1ea 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.css
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.css
@@ -522,12 +522,28 @@
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  margin-bottom: 0.375rem;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
   color: #166534;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.02em;
+  cursor: pointer;
+  text-align: left;
+}
+
+/* Collapsed, the codes stand in for the payload so the conclusion is never hidden entirely. */
+.execution-outcomes-summary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #15803d;
+  font-weight: 700;
+  text-transform: none;
 }
 
 .execution-outcomes-title .mat-icon {
@@ -537,6 +553,10 @@
   line-height: 16px;
 }
 
+.execution-outcome:first-of-type {
+  margin-top: 0.375rem;
+}
+
 .execution-outcome + .execution-outcome {
   margin-top: 0.5rem;
   padding-top: 0.5rem;
diff --git a/src/app/shared/task-execution-viewer/task-execution-viewer.html b/src/app/shared/task-execution-viewer/task-execution-viewer.html
index 5485b68..e346bb8 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.html
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.html
@@ -97,11 +97,20 @@
     }
     @if (outcomes().length) {
     <div class="execution-outcomes">
-      <div class="execution-outcomes-title">
+      <button
+        type="button"
+        class="execution-outcomes-title"
+        [attr.aria-expanded]="outcomesOpen()"
+        (click)="toggleOutcomes()">
+        <mat-icon [fontIcon]="outcomesOpen() ? 'expand_less' : 'expand_more'"></mat-icon>
         <mat-icon fontIcon="flag"></mat-icon>
         <span>{{ outcomes().length === 1 ? 'Outcome' : 'Outcomes' }}</span>
-      </div>
+        @if (!outcomesOpen()) {
+        <span class="execution-outcomes-summary">{{ outcomeCodes() }}</span>
+        }
+      </button>
 
+      @if (outcomesOpen()) {
       @for (outcome of outcomes(); track outcome.stepId + outcome.timestamp) {
       <div class="execution-outcome">
         <div class="execution-outcome-head">
@@ -125,6 +134,7 @@
         }
       </div>
       }
+      }
     </div>
     }
 
diff --git a/src/app/shared/task-execution-viewer/task-execution-viewer.ts b/src/app/shared/task-execution-viewer/task-execution-viewer.ts
index 318a4d8..6da19e7 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.ts
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.ts
@@ -540,6 +540,19 @@ export class TaskExecutionViewerComponent implements OnDestroy {
    */
   readonly outcomes = computed(() => this.execution()?.context.outcomes ?? []);
 
+  /**
+   * Open by default: this is the flow's answer, and it was invisible until now. Collapsing gives
+   * the graph its height back when the payload is a long document.
+   */
+  readonly outcomesOpen = signal(true);
+
+  /** Kept in the header so the conclusion is still readable while collapsed. */
+  readonly outcomeCodes = computed(() => this.outcomes().map((outcome) => outcome.code).join(', '));
+
+  toggleOutcomes() {
+    this.outcomesOpen.update((open) => !open);
+  }
+
   readonly hasOutcomePayload = computed(() =>
     this.outcomes().some((outcome) => outcome.payload !== null && outcome.payload !== undefined));