From 52bb12edaed0a02bf9b1f61d4fe279cc6f41a17c Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Fri, 24 Apr 2026 12:18:48 +0200
Subject: [PATCH] Reposition task execution controls into graph action rail

---
 .../task-execution-viewer.css                 | 94 +++++++++++++++++++
 .../task-execution-viewer.html                | 88 ++++++++---------
 2 files changed, 138 insertions(+), 44 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 bc924fe..55d66bb 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.css
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.css
@@ -3,6 +3,100 @@
   height: 100%;
 }
 
+.execution-header-main {
+  display: block;
+}
+
+.execution-header-details {
+  min-width: 0;
+}
+
+.execution-graph-body {
+  position: relative;
+}
+
+.execution-graph-actions {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 4;
+  display: inline-flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.execution-action-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 0;
+  transition: filter 120ms ease, opacity 120ms ease, transform 120ms ease;
+  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
+}
+
+.execution-graph-action-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.execution-action-button mat-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+}
+
+.execution-action-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.execution-action-button-play {
+  background: #15803d;
+  border-color: #166534;
+  color: #ffffff;
+}
+
+.execution-action-button-play:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.execution-action-button-stop {
+  background: #dc2626;
+  border-color: #b91c1c;
+  color: #ffffff;
+}
+
+.execution-action-button-stop:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+
+.execution-action-button-resume {
+  background: #4f46e5;
+  border-color: #4338ca;
+  color: #ffffff;
+}
+
+.execution-action-button-resume:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.execution-action-button-simulate {
+  background: #0c4a6e;
+  border-color: #075985;
+  color: #e0f2fe;
+}
+
+.execution-action-button-simulate:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
 .execution-rete-readonly {
   pointer-events: auto;
 }
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 af2d899..a4c56c9 100644
--- a/src/app/shared/task-execution-viewer/task-execution-viewer.html
+++ b/src/app/shared/task-execution-viewer/task-execution-viewer.html
@@ -2,8 +2,8 @@
   @if (execution()) {
   <div class="h-full bg-white border border-slate-200 rounded-md flex flex-col overflow-hidden">
     <div class="px-5 pt-2 border-b border-slate-200 bg-slate-50">
-      <div class="flex items-stretch justify-between gap-3">
-        <div>
+      <div class="execution-header-main">
+        <div class="execution-header-details">
           <h2 class="text-base font-semibold text-slate-900">{{ execution()!.name }}</h2>
           <p class="text-sm text-slate-500">Execution ID: {{ execution()!.id }}</p>
           @if (isSimulatedExecution()) {
@@ -13,46 +13,6 @@
           }
           }
         </div>
-        <div class="flex items-stretch gap-2">
-          @if (execution()!.simulationAvailable === true) {
-          <button
-            type="button"
-            class="self-stretch h-full rounded-md border border-sky-300 bg-sky-50 px-3 text-sky-700 hover:bg-sky-100 disabled:opacity-40 disabled:cursor-not-allowed"
-            matTooltip="Simulate execution"
-            aria-label="Simulate execution"
-            [disabled]="!canSimulateExecution()"
-            (click)="simulateExecution()">
-            Simulate
-          </button>
-          }
-          <button
-            type="button"
-            class="self-stretch h-full rounded-md border border-violet-300 bg-violet-50 px-3 text-violet-700 hover:bg-violet-100 disabled:opacity-40 disabled:cursor-not-allowed"
-            matTooltip="Resume execution"
-            aria-label="Resume execution"
-            [disabled]="!canResumeExecution()"
-            (click)="resumeExecution()">
-            Resume
-          </button>
-          <button
-            type="button"
-            class="self-stretch h-full w-10 rounded-md border border-rose-300 bg-rose-50 text-rose-600 hover:bg-rose-100 disabled:opacity-40 disabled:cursor-not-allowed"
-            matTooltip="Cancel execution"
-            aria-label="Cancel execution"
-            [disabled]="!canCancelExecution()"
-            (click)="cancelExecution()">
-            <mat-icon fontIcon="stop"></mat-icon>
-          </button>
-          <button
-            type="button"
-            class="self-stretch h-full w-10 rounded-md border border-emerald-300 bg-emerald-50 text-emerald-600 hover:bg-emerald-100 disabled:opacity-40 disabled:cursor-not-allowed"
-            matTooltip="Start execution"
-            aria-label="Start execution"
-            [disabled]="!canStartExecution() || startInProgress()"
-            (click)="startExecution()">
-            <mat-icon fontIcon="play_arrow"></mat-icon>
-          </button>
-        </div>
       </div>
     </div>
 
@@ -90,9 +50,49 @@
     </div>
     }
     <div class="flex-1 min-h-0 flex gap-2 p-1">
-      <div class="flex-1 border border-slate-200 rounded-md bg-slate-50 min-h-0 overflow-hidden">
+      <div class="execution-graph-shell flex-1 border border-slate-200 rounded-md bg-slate-50 min-h-0 overflow-hidden">
         <div class="px-3 py-2 text-xs font-semibold text-slate-600 border-b border-slate-200 bg-white">Execution Graph (read-only)</div>
-        <div class="h-[calc(100%-33px)] execution-rete-readonly">
+        <div class="execution-graph-body h-[calc(100%-33px)] execution-rete-readonly">
+          <div class="execution-graph-actions">
+            <button
+              type="button"
+              class="execution-action-button execution-graph-action-button execution-action-button-play"
+              matTooltip="Start execution"
+              aria-label="Start execution"
+              [disabled]="!canStartExecution() || startInProgress()"
+              (click)="startExecution()">
+              <mat-icon fontIcon="play_arrow"></mat-icon>
+            </button>
+            <button
+              type="button"
+              class="execution-action-button execution-graph-action-button execution-action-button-stop"
+              matTooltip="Cancel execution"
+              aria-label="Cancel execution"
+              [disabled]="!canCancelExecution()"
+              (click)="cancelExecution()">
+              <mat-icon fontIcon="stop"></mat-icon>
+            </button>
+            <button
+              type="button"
+              class="execution-action-button execution-graph-action-button execution-action-button-resume"
+              matTooltip="Resume execution"
+              aria-label="Resume execution"
+              [disabled]="!canResumeExecution()"
+              (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>
+            }
+          </div>
           <app-rete-editor
             [flowId]="execution()!.id"
             [flowData]="executionFlowData()"