From bf4ed026b29c43b39af32b72c35635faf98d8452 Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Fri, 4 Sep 2026 09:26:49 +0200
Subject: [PATCH] Tell the two run buttons apart by who answers the human steps

A green play and a flask said nothing about the one thing that separates them:
whether you answer the flow's chat and decision steps, or an LLM answers them for
you. The flask was actively misleading - "experiment" is the bias experiments'
word, so it pointed at a different feature.

Both buttons now keep the play, and a small badge carries the difference: a
person, or a robot. A gear was the first thought and is the wrong glyph - it is
the settings icon everywhere else in the product, so on a run button it reads as
"configure this run" rather than "a machine runs it".

They also sit next to each other now. Stop and resume used to separate them, so
each had to be understood alone - which is precisely the job a 17px badge cannot
do. Side by side they are one choice, and each is what makes the other legible.

The tooltips stop repeating the button and say who answers: "Run - you answer the
human steps", "Run simulated - an LLM answers the human steps". That is the
sentence the icon can only gesture at.

557 frontend tests green.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../task-execution-viewer.css                 | 35 +++++++++++++++++++
 .../task-execution-viewer.html                | 25 +++++++------
 .../task-execution-viewer.ts                  |  4 ++-
 3 files changed, 52 insertions(+), 12 deletions(-)

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 b896bde..ed5d88f 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.css
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.css
@@ -95,6 +95,41 @@
   line-height: 20px;
 }
 
+/* The button has to be a positioning context for the badge, and must not clip it. */
+.execution-action-button {
+  position: relative;
+  overflow: visible;
+}
+
+/*
+ * Who answers the flow's human steps - you, or an LLM - is the only difference between the two run
+ * buttons, so both keep the play and the badge carries that difference. It is small on purpose: it
+ * qualifies the play rather than competing with it, and the two sit side by side, which is what
+ * makes either one legible.
+ */
+.execution-action-badge {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 17px;
+  height: 17px;
+  border-radius: 999px;
+  border: 1px solid currentColor;
+  background: #ffffff;
+  color: inherit;
+}
+
+.execution-action-badge mat-icon {
+  font-size: 11px;
+  width: 11px;
+  height: 11px;
+  line-height: 11px;
+  color: #0f172a;
+}
+
 .execution-action-button:disabled {
   opacity: 0.4;
   cursor: not-allowed;
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 5c25be8..929b15e 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.html
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.html
@@ -181,7 +181,21 @@
               [disabled]="!canStartExecution() || startInProgress()"
               (click)="startExecution()">
               <mat-icon fontIcon="play_arrow"></mat-icon>
+              <!-- Both run buttons keep the play; the badge carries the one thing that differs. -->
+              <span class="execution-action-badge"><mat-icon fontIcon="person"></mat-icon></span>
             </button>
+            @if (execution()!.simulationAvailable === true) {
+            <button
+              type="button"
+              class="execution-action-button execution-graph-action-button execution-action-button-simulate"
+              matTooltip="Run simulated - an LLM answers the human steps"
+              aria-label="Run simulated - an LLM answers the human steps"
+              [disabled]="!canSimulateExecution()"
+              (click)="simulateExecution()">
+              <mat-icon fontIcon="play_arrow"></mat-icon>
+              <span class="execution-action-badge"><mat-icon fontIcon="smart_toy"></mat-icon></span>
+            </button>
+            }
             <button
               type="button"
               class="execution-action-button execution-graph-action-button execution-action-button-stop"
@@ -200,17 +214,6 @@
               (click)="resumeExecution()">
               <mat-icon fontIcon="restart_alt"></mat-icon>
             </button>
-            @if (execution()!.simulationAvailable === true) {
-            <button
-              type="button"
-              class="execution-action-button execution-graph-action-button execution-action-button-simulate"
-              matTooltip="Simulate execution"
-              aria-label="Simulate execution"
-              [disabled]="!canSimulateExecution()"
-              (click)="simulateExecution()">
-              <mat-icon fontIcon="science"></mat-icon>
-            </button>
-            }
             <button
               type="button"
               class="execution-action-button execution-graph-action-button execution-graph-action-button-bias"
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 274f8b3..d7116ab 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.ts
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.ts
@@ -699,7 +699,9 @@ export class TaskExecutionViewerComponent implements OnDestroy {
     const gate = this.authorizationGate();
     if (gate.missingProviders.length) return `Missing provider credential: ${gate.missingProviders.join(', ')}`;
     if (gate.runtime.length) return 'Missing provider authorization';
-    return 'Start execution';
+    // Names who answers the flow's human steps, which is the only thing that separates this from
+    // the simulated run beside it - and the part an icon can only gesture at.
+    return 'Run - you answer the human steps';
   });
 
   readonly cancelExecutionTooltip = computed(() =>