fix(layout): barre supérieure CLI custom cliquable — stacking context du corps de leaf

Le corps d'une leaf (layout-leaf-body) crée désormais son propre stacking context (z-index 0). Les vues CLI custom peuvent comporter des enfants à haut z local (toolbar z-20) qui restaient au-dessus des contrôles de cellule (CELL_Z 5) et captaient les clics ; ils restent désormais sous les contrôles. Test de layering dédié ajouté dans LayoutGrid.cellControlsLayering.test.tsx.
This commit is contained in:
2026-08-06 21:57:48 +02:00
parent bbcb303061
commit a3d94d4d5e
2 changed files with 29 additions and 0 deletions

View File

@ -206,6 +206,29 @@ describe("LayoutGrid — ticket #48 cell control layering", () => {
expect(controls.style.overflow).toBe("hidden");
});
it("keeps cell controls above the custom CLI view stacking context", async () => {
const setup = await makeSplitAgentGrid();
window.localStorage.setItem(`idea.agent-cell-mode.p1.${setup.bId}`, "custom");
renderGrid(setup.gateways);
await screen.findByTestId("custom-agent-chat-view");
window.localStorage.removeItem(`idea.agent-cell-mode.p1.${setup.bId}`);
const leafBody = screen.getAllByTestId("layout-leaf-body").find((element) =>
element.closest(`[data-node-id="${setup.bId}"]`),
) as HTMLElement;
const customToolbar = screen.getByRole("toolbar", {
name: "custom agent chat actions",
});
const { controls } = controlsFor(setup.bId);
expect(leafBody).toBeTruthy();
expect(leafBody.style.position).toBe("relative");
expect(leafBody.style.zIndex).toBe("0");
expect(customToolbar.className).toContain("z-20");
expect(controls.style.zIndex).toBe("5");
});
it("keeps busy Cancel above persistent cell controls and removes History (#151, #160)", async () => {
const setup = await makeSplitAgentGrid();
await setup.layout.mutateLayout("p1", {

View File

@ -338,6 +338,10 @@ function goToCell(nodeId: string): void {
* full-cell veils 4 (write-portal + F3 overlays; mutually exclusive)
* cell controls 5 (always on top and clickable)
* turn actions 6 (busy-state actions; Cancel must stay visible)
*
* The terminal/chat body must create its own z-index 0 stacking context. Custom
* CLI views can legitimately contain local high-z children (for example their
* own toolbar), but those children must stay below the cell controls.
*/
const CELL_Z = {
banner: 3,
@ -1300,8 +1304,10 @@ function LeafView({
navigating. The agent cell passes its {@link WritePortal} so keystroke
counting + injection suspension are wired; a plain cell passes none. */}
<div
data-testid="layout-leaf-body"
style={{
position: "relative",
zIndex: 0,
width: "100%",
height: "100%",
minHeight: 0,