From a9346476ee3a884ab81d3e0e1df198f83c110439 Mon Sep 17 00:00:00 2001
From: Blomios <blomios@gmail.com>
Date: Thu, 6 Aug 2026 14:29:31 +0200
Subject: [PATCH] =?UTF-8?q?fix(layout):=20bouton=20Cancel=20en=20z-order?=
 =?UTF-8?q?=20propre=20pendant=20un=20tour=20agent=20=E2=80=94=20#151=20(Q?=
 =?UTF-8?q?A=20verte)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extrait le bouton Cancel du banner inline et le rend en position absolue
(top:24, right:20) avec zIndex CELL_Z.turnActions. Le banner de statut est
décalé (right:76 en état busy) et rétrogradé en CELL_Z.banner, afin que
Cancel reste au premier plan et cliquable sans recouvrement en état busy.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../LayoutGrid.cellControlsLayering.test.tsx  | 13 +++--
 frontend/src/features/layout/LayoutGrid.tsx   | 52 +++++++++++--------
 2 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/frontend/src/features/layout/LayoutGrid.cellControlsLayering.test.tsx b/frontend/src/features/layout/LayoutGrid.cellControlsLayering.test.tsx
index 8797d5e..a871167 100644
--- a/frontend/src/features/layout/LayoutGrid.cellControlsLayering.test.tsx
+++ b/frontend/src/features/layout/LayoutGrid.cellControlsLayering.test.tsx
@@ -232,12 +232,19 @@ describe("LayoutGrid — ticket #48 cell control layering", () => {
     const cancel = await screen.findByRole("button", {
       name: `cancel current turn ${setup.bId}`,
     });
-    const status = cancel.parentElement as HTMLElement;
+    const status = screen
+      .getAllByRole("status")
+      .find((element) => element.textContent === "Busy") as HTMLElement;
     const { controls } = controlsFor(setup.bId);
 
+    expect(status).toBeTruthy();
+    expect(cancel.style.position).toBe("absolute");
     expect(status.style.top).toBe("24px");
-    expect(status.style.zIndex).toBe("6");
-    expect(Number(status.style.zIndex)).toBeGreaterThan(Number(controls.style.zIndex));
+    expect(status.style.zIndex).toBe("3");
+    expect(cancel.style.top).toBe("24px");
+    expect(cancel.style.right).toBe("20px");
+    expect(cancel.style.zIndex).toBe("6");
+    expect(Number(cancel.style.zIndex)).toBeGreaterThan(Number(controls.style.zIndex));
     expect(screen.queryByRole("button", {
       name: `open cell conversation ${setup.bId}`,
     })).toBeNull();
diff --git a/frontend/src/features/layout/LayoutGrid.tsx b/frontend/src/features/layout/LayoutGrid.tsx
index c04cf0e..0c3bd30 100644
--- a/frontend/src/features/layout/LayoutGrid.tsx
+++ b/frontend/src/features/layout/LayoutGrid.tsx
@@ -1172,6 +1172,32 @@ function LeafView({
           </button>
         )}
       </div>
+      {agentId && busyByWorkState && (
+        <button
+          type="button"
+          aria-label={`cancel current turn ${id}`}
+          title="Cancel current turn"
+          onClick={() => void interruptCurrentTurn()}
+          disabled={!input}
+          style={{
+            position: "absolute",
+            top: 24,
+            right: 20,
+            zIndex: CELL_Z.turnActions,
+            flexShrink: 0,
+            border: "1px solid var(--color-danger, #d45a5a)",
+            borderRadius: 3,
+            background: "var(--color-surface, #1e1e1e)",
+            color: "var(--color-danger, #d45a5a)",
+            cursor: input ? "pointer" : "default",
+            fontSize: 11,
+            padding: "1px 6px",
+            pointerEvents: "auto",
+          }}
+        >
+          Cancel
+        </button>
+      )}
       {agentId && (busyByWorkState || inboxDepth > 0 || completedBackgroundTasks.length > 0) && (
         <div
           role="status"
@@ -1180,9 +1206,10 @@ function LeafView({
             position: "absolute",
             top: 24,
             left: 4,
-            zIndex: busyByWorkState ? CELL_Z.turnActions : CELL_Z.banner,
+            right: busyByWorkState ? 76 : undefined,
+            zIndex: CELL_Z.banner,
             display: "flex",
-            maxWidth: "calc(100% - 8px)",
+            maxWidth: busyByWorkState ? undefined : "calc(100% - 8px)",
             alignItems: "center",
             gap: 4,
             overflow: "hidden",
@@ -1265,27 +1292,6 @@ function LeafView({
               Task done {completedBackgroundTasks.length}
             </span>
           )}
-          {busyByWorkState && (
-            <button
-              type="button"
-              aria-label={`cancel current turn ${id}`}
-              title="Cancel current turn"
-              onClick={() => void interruptCurrentTurn()}
-              disabled={!input}
-              style={{
-                flexShrink: 0,
-                border: "1px solid var(--color-danger, #d45a5a)",
-                borderRadius: 3,
-                background: "var(--color-surface, #1e1e1e)",
-                color: "var(--color-danger, #d45a5a)",
-                cursor: input ? "pointer" : "default",
-                fontSize: 11,
-                padding: "1px 6px",
-              }}
-            >
-              Cancel
-            </button>
-          )}
         </div>
       )}
       {/* Option 1 (Terminal + MCP): every cell — plain or agent — renders the