From db121bbe231aaa25894436c6aa98ac2a9ee8472d Mon Sep 17 00:00:00 2001 From: Blomios Date: Thu, 17 Sep 2026 08:29:11 +0200 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20repositionne=20le=20bouton=20C?= =?UTF-8?q?onversations=20de=20CustomAgentChatView=20hors=20des=20contr?= =?UTF-8?q?=C3=B4les=20de=20choix=20d'agents=20=E2=80=94=20header=20custom?= =?UTF-8?q?-agent-chat-header=20repouss=C3=A9=20sous=20la=20bande=20des=20?= =?UTF-8?q?contr=C3=B4les=20de=20cellule=20(padding=20haut=202.25rem)=20da?= =?UTF-8?q?ns=20le=20contexte=20d'empilement=20local=20du=20chat,=20menu?= =?UTF-8?q?=20Conversations=20born=C3=A9=20=C3=A0=20la=20cellule=20(droite?= =?UTF-8?q?=2022rem,=20max-width=20100cqw),=20repli=20en=20colonne=20align?= =?UTF-8?q?=C3=A9=20=C3=A0=20gauche=20sous=20419.99px=20puis=20cible=20ple?= =?UTF-8?q?ine=20largeur=20sous=20279.99px=20via=20container=20queries,=20?= =?UTF-8?q?testids=20custom-agent-chat-header/identity/conversations/menu,?= =?UTF-8?q?=20tests=20de=20non-chevauchement=20=C3=A0=20600/360/240px=20et?= =?UTF-8?q?=20garde-fous=20dans=20LayoutGrid.cellControlsLayering=20?= =?UTF-8?q?=E2=80=94=20#365=20(QA=20verte:=20npm=20test=20cibl=C3=A9=20Cus?= =?UTF-8?q?tomAgentChatView=20+=20LayoutGrid.cellControlsLayering=202=20fi?= =?UTF-8?q?chiers=20106=20tests=20OK,=20Firefox=20headless=20layout=20chec?= =?UTF-8?q?k=20600/360/240=20PASS,=20npm=20run=20build=20OK,=20git=20diff?= =?UTF-8?q?=20--check=20OK;=20npm=20audit:=209=20vuln=C3=A9rabilit=C3=A9s?= =?UTF-8?q?=20pr=C3=A9existantes=20non=20li=C3=A9es)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../agents/CustomAgentChatView.test.tsx | 64 +++++++++++++++++++ .../features/agents/CustomAgentChatView.tsx | 17 +++-- .../LayoutGrid.cellControlsLayering.test.tsx | 3 + frontend/src/shared/styles/theme.css | 49 ++++++++++++++ 4 files changed, 129 insertions(+), 4 deletions(-) diff --git a/frontend/src/features/agents/CustomAgentChatView.test.tsx b/frontend/src/features/agents/CustomAgentChatView.test.tsx index 57a3d2bf..a80d5f7f 100644 --- a/frontend/src/features/agents/CustomAgentChatView.test.tsx +++ b/frontend/src/features/agents/CustomAgentChatView.test.tsx @@ -1,4 +1,6 @@ import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react"; +import { readFileSync } from "node:fs"; +import { resolve } from "node:path"; import { useState } from "react"; import { beforeEach, describe, expect, it, vi } from "vitest"; @@ -25,6 +27,11 @@ import { customAgentChatQueueCount, } from "./CustomAgentChatView"; +const themeCss = readFileSync( + resolve(process.cwd(), "src/shared/styles/theme.css"), + "utf8", +); + const profile: AgentProfile = { id: "structured", name: "Structured Codex", @@ -199,6 +206,63 @@ describe("CustomAgentChatView", () => { __resetProjectCliInteractionActivityForTests(); }); + it.each([ + { width: 600, mode: "single-row" }, + { width: 360, mode: "second-row" }, + { width: 240, mode: "full-width" }, + ])("keeps its conversation access clear of cell controls at $width px ($mode)", ({ width, mode }) => { + const agent = { + reattachAgentChat: vi.fn(async (sessionId: string) => ({ sessionId, scrollback: [] })), + sendAgentChat: vi.fn(), + cancelAgentChat: vi.fn(), + closeAgentChat: vi.fn(), + }; + + render( +
+ null) } } as unknown as Gateways}> + + +
, + ); + + const header = screen.getByTestId("custom-agent-chat-header"); + const identity = screen.getByTestId("custom-agent-chat-identity"); + const conversations = screen.getByTestId("custom-agent-chat-conversations"); + const button = screen.getByRole("button", { name: "Conversations" }); + + expect(screen.getByTestId("representative-cell").style.width).toBe(`${width}px`); + expect(header.className).toContain("custom-agent-chat-header"); + expect(header.contains(identity)).toBe(true); + expect(header.contains(conversations)).toBe(true); + expect(conversations.contains(button)).toBe(true); + expect(screen.getByText("CLI personnalisée · Structured Codex")).toBeTruthy(); + expect(themeCss).toContain("padding: 2.25rem 0.75rem 0.5rem"); + + if (mode === "single-row") { + expect(themeCss).toContain(".custom-agent-chat-conversations-menu {\n right: 0;"); + } else { + expect(themeCss).toContain("@container (max-width: 419.99px)"); + expect(themeCss).toContain("flex-direction: column"); + expect(themeCss).toContain("left: 0"); + } + if (mode === "full-width") { + expect(themeCss).toContain("@container (max-width: 279.99px)"); + expect(themeCss).toContain(".custom-agent-chat-conversations-button,\n .custom-agent-chat-conversations-menu"); + } + }); + it("renders the project icon as a non-interactive custom-CLI watermark and updates it immediately", async () => { const agent = { reattachAgentChat: vi.fn(async (sessionId: string) => ({ sessionId, scrollback: [] })), diff --git a/frontend/src/features/agents/CustomAgentChatView.tsx b/frontend/src/features/agents/CustomAgentChatView.tsx index 29f29b62..469b9912 100644 --- a/frontend/src/features/agents/CustomAgentChatView.tsx +++ b/frontend/src/features/agents/CustomAgentChatView.tsx @@ -2966,18 +2966,26 @@ export function CustomAgentChatView({
-
+
{agentName}
{tr("CLI personnalisée", "Custom CLI")} · {profile.name}
-
+