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