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()">
+
+
+ @if (execution()!.simulationAvailable === true) {
+
+ }
- @if (execution()!.simulationAvailable === true) {
-
- }