Make the outcomes section collapsible

An outcome payload is often a generated document - the local example is a full
rejection email - which pushed the execution graph down the page. The section now
collapses.

It starts open, because this is the flow's answer and it was invisible until a
moment ago. Collapsed, the header keeps the outcome codes, so the conclusion is
never hidden entirely: only the payload folds away.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

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;

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>
     }
 

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));