merge(ui): intègre fix/batch-151-157-cli-ui — fixes #151 #157 (Cluster A, QA verte)

#151: z-order du bouton Cancel en état busy (LayoutGrid). #157: arrêt du spinner Progress à l'état terminal (CustomAgentChatView). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-08-06 14:29:49 +02:00
parent 0f60f625a1 57ced6801b
commit 102c003405
4 changed files with 144 additions and 29 deletions
--- a/frontend/src/features/agents/CustomAgentChatView.test.tsx
+++ b/frontend/src/features/agents/CustomAgentChatView.test.tsx
@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";

@ -296,6 +296,90 @@ describe("CustomAgentChatView", () => {
    await screen.findByText("done");
  });

+  it("stops animating running progress rows once the turn reaches a final chunk", async () => {
+    let emitChunk: ((chunk: unknown) => void) | null = null;
+    const agent = {
+      launchAgentChat: vi.fn(),
+      reattachAgentChat: vi.fn(async (sessionId: string) => ({
+        sessionId,
+        scrollback: [],
+      })),
+      sendAgentChat: vi.fn(
+        (_sessionId: string, _prompt: string, onChunk: (chunk: unknown) => void) =>
+          new Promise<void>((resolve) => {
+            emitChunk = (chunk: unknown) => {
+              onChunk(chunk);
+              if ((chunk as { kind?: string }).kind === "final") resolve();
+            };
+          }),
+      ),
+      cancelAgentChat: vi.fn(async () => {}),
+      closeAgentChat: vi.fn(async () => {}),
+    };
+
+    render(
+      <DIProvider
+        gateways={{
+          agent,
+          system: { pickFile: vi.fn(async () => null) },
+        } as unknown as Gateways}
+      >
+        <CustomAgentChatView
+          projectId="project-1"
+          agentId="agent-1"
+          agentName="Worker"
+          profile={profile}
+          cwd="/repo"
+          nodeId="node-1"
+          sessionId="chat-session-1"
+          conversationId="conversation-1"
+          onSessionId={vi.fn()}
+          onConversationId={vi.fn()}
+        />
+      </DIProvider>,
+    );
+
+    await waitFor(() =>
+      expect(agent.reattachAgentChat).toHaveBeenCalledWith(
+        "chat-session-1",
+        expect.any(Function),
+      ),
+    );
+
+    fireEvent.change(screen.getByLabelText(/message CLI custom/), {
+      target: { value: "ship progress UI" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Envoyer" }));
+    await waitFor(() => expect(emitChunk).not.toBeNull());
+
+    act(() => {
+      emitChunk?.({
+        kind: "progress",
+        progress: {
+          source: "providerNative",
+          kind: "message",
+          stage: "delta",
+          label: "Analyse",
+          text: "Lecture du contexte disponible.",
+        },
+      });
+    });
+
+    expect(screen.getAllByRole("status", { name: "Loading" }).length).toBeGreaterThan(0);
+    expect(screen.getByText("Progress").parentElement?.textContent).toContain("running");
+
+    act(() => {
+      emitChunk?.({ kind: "final", content: "done" });
+    });
+
+    await screen.findByText("done");
+    await waitFor(() =>
+      expect(screen.queryByRole("status", { name: "Loading" })).toBeNull(),
+    );
+    expect(screen.getByText("Lecture du contexte disponible.")).toBeTruthy();
+    expect(screen.getByText("Progress").parentElement?.textContent).toContain("done");
+  });
+
  it("pastes a clipboard image as a removable preview chip", async () => {
    const agent = {
      launchAgentChat: vi.fn(),
--- a/frontend/src/features/agents/CustomAgentChatView.tsx
+++ b/frontend/src/features/agents/CustomAgentChatView.tsx
@ -191,6 +191,24 @@ function appendProgress(turns: ChatTurn[], progress: ReplyProgress): ChatTurn[]
  return [...turns, { role: "progress", progress }];
 }

+function completeRunningProgress(turns: ChatTurn[]): ChatTurn[] {
+  return turns.map((turn) => {
+    if (
+      turn.role !== "progress" ||
+      (turn.progress.stage !== "started" && turn.progress.stage !== "delta")
+    ) {
+      return turn;
+    }
+    return {
+      ...turn,
+      progress: {
+        ...turn.progress,
+        stage: "completed",
+      },
+    };
+  });
+}
+
 function fileExtension(mime: string): string {
  if (mime === "image/png") return "png";
  if (mime === "image/jpeg") return "jpg";
@ -257,14 +275,14 @@ function foldChunk(turns: ChatTurn[], raw: unknown): ChatTurn[] {
    }
    case "final": {
      const content = String(raw.content ?? "");
-      const next = [...turns];
+      const next = completeRunningProgress(turns);
      const last = next[next.length - 1];
      if (last?.role === "agent") next[next.length - 1] = { ...last, pending: false };
      next.push({ role: "final", text: content });
      return next;
    }
    case "error": {
-      const next = [...turns];
+      const next = completeRunningProgress(turns);
      const last = next[next.length - 1];
      if (last?.role === "agent") next[next.length - 1] = { ...last, pending: false };
      next.push({ role: "error", text: String(raw.message ?? "Erreur agent") });
--- 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();
--- 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