From 4f12ae02174eea33b08dee5248ef546a5f5f8ad5 Mon Sep 17 00:00:00 2001
From: Jared <865332676@qq.com>
Date: Thu, 6 Aug 2026 11:57:04 +0800
Subject: [PATCH] fix(web): avoid Windows focus loss after team deletion

---
 .../src/hooks/workspace/useAgentController.ts |  4 --
 .../TeamDetailPane/TeamDetailPane.tsx         | 70 ++++++++++++++++++-
 .../tests/components/TeamDetailPane.test.tsx  | 43 ++++++++++++
 .../tests/hooks/useAgentController.test.tsx   | 34 ++++++++-
 4 files changed, 144 insertions(+), 7 deletions(-)
 create mode 100644 web/app/tests/components/TeamDetailPane.test.tsx

diff --git a/web/app/src/hooks/workspace/useAgentController.ts b/web/app/src/hooks/workspace/useAgentController.ts
index a6854cf3..5afe2397 100644
--- a/web/app/src/hooks/workspace/useAgentController.ts
+++ b/web/app/src/hooks/workspace/useAgentController.ts
@@ -2183,10 +2183,6 @@ export function useAgentController({
     if (!teamID || teamActionBusy) {
       return false;
     }
-    const teamTitle = item ? displayTeam(item) : teamID;
-    if (!window.confirm(t("teamDeleteConfirm", { title: teamTitle }))) {
-      return false;
-    }
     setTeamActionBusy(true);
     setTeamActionError("");
     try {
diff --git a/web/app/src/pages/TeamPage/components/TeamDetailPane/TeamDetailPane.tsx b/web/app/src/pages/TeamPage/components/TeamDetailPane/TeamDetailPane.tsx
index 30ec2b93..5d152943 100644
--- a/web/app/src/pages/TeamPage/components/TeamDetailPane/TeamDetailPane.tsx
+++ b/web/app/src/pages/TeamPage/components/TeamDetailPane/TeamDetailPane.tsx
@@ -3,7 +3,17 @@ import type { ReactNode } from "react";
 import { AgentAvatarContent, RoomAvatar } from "@/components/business";
 import { ListChecks, Trash2, UserPlus, Users } from "lucide-react";
 import { TaskSubtaskIndicator } from "@/components/business";
-import { Button } from "@/components/ui";
+import {
+  Button,
+  DialogBody,
+  DialogCloseButton,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+} from "@/components/ui";
 import { isAgentRunning } from "@/models/agents";
 import type { AgentLike } from "@/models/agents";
 import type { IMUser, TranslateFn, UsersById } from "@/models/conversations";
@@ -56,6 +66,17 @@ export function TeamDetailPane({
   onSelectTask = () => {},
 }: TeamDetailPaneProps) {
   const [activeTab, setActiveTab] = useState<ActiveTeamTab>("members");
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  async function handleDeleteTeam(): Promise<void> {
+    if (!team) {
+      return;
+    }
+    const deleted = await onDeleteTeam(team);
+    if (deleted !== false) {
+      setDeleteDialogOpen(false);
+    }
+  }
 
   if (!team) {
     return (
@@ -107,7 +128,7 @@ export function TeamDetailPane({
             variant="outlineDanger"
             size="md"
             disabled={teamActionBusy}
-            onClick={() => void onDeleteTeam(team)}
+            onClick={() => setDeleteDialogOpen(true)}
           >
             <Trash2 size={16} aria-hidden="true" />
             {t("teamDelete")}
@@ -115,6 +136,51 @@ export function TeamDetailPane({
         </div>
       </header>
 
+      <DialogRoot
+        open={deleteDialogOpen}
+        onOpenChange={(open) => {
+          if (!teamActionBusy) {
+            setDeleteDialogOpen(open);
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <div>
+              <DialogTitle>{t("teamDelete")}</DialogTitle>
+              <DialogDescription>{t("teamDeleteConfirm", { title: displayTeam(team) })}</DialogDescription>
+            </div>
+            <DialogCloseButton label={t("close")} size="sm" variant="tertiaryGray" disabled={teamActionBusy} />
+          </DialogHeader>
+          {teamActionError ? (
+            <DialogBody>
+              <div className="form-error" role="alert">
+                {teamActionError}
+              </div>
+            </DialogBody>
+          ) : null}
+          <DialogFooter>
+            <Button
+              variant="secondaryGray"
+              size="md"
+              disabled={teamActionBusy}
+              onClick={() => setDeleteDialogOpen(false)}
+            >
+              {t("cancel")}
+            </Button>
+            <Button
+              variant="danger"
+              size="md"
+              loading={teamActionBusy}
+              loadingLabel={t("teamSaving")}
+              onClick={() => void handleDeleteTeam()}
+            >
+              {t("teamDelete")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </DialogRoot>
+
       {teamActionError ? (
         <div className={classNames("form-error", styles.contentWidth, styles.teamDetailActionError)} role="alert">
           {teamActionError}
diff --git a/web/app/tests/components/TeamDetailPane.test.tsx b/web/app/tests/components/TeamDetailPane.test.tsx
new file mode 100644
index 00000000..14034fa7
--- /dev/null
+++ b/web/app/tests/components/TeamDetailPane.test.tsx
@@ -0,0 +1,43 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TeamDetailPane } from "@/pages/TeamPage/components";
+import type { TranslateFn } from "@/models/conversations";
+import type { WorkspaceTeam } from "@/models/tasks";
+
+const t: TranslateFn = (key) => key;
+
+const team: WorkspaceTeam = {
+  id: "team-1",
+  title: "Windows team",
+  lead_agent_id: "u-manager",
+  member_agent_ids: [],
+  status: "active",
+  created_at: "2026-08-01T00:00:00Z",
+  updated_at: "2026-08-01T00:00:00Z",
+};
+
+describe("TeamDetailPane", () => {
+  it("confirms team deletion in-app without opening a native browser dialog", async () => {
+    const user = userEvent.setup();
+    const onDeleteTeam = vi.fn().mockResolvedValue(true);
+    const confirmSpy = vi.spyOn(window, "confirm");
+
+    try {
+      render(<TeamDetailPane team={team} t={t} onDeleteTeam={onDeleteTeam} />);
+
+      await user.click(screen.getByRole("button", { name: "teamDelete" }));
+
+      const dialog = screen.getByRole("dialog", { name: "teamDelete" });
+      expect(within(dialog).getByText("teamDeleteConfirm")).toBeInTheDocument();
+      expect(onDeleteTeam).not.toHaveBeenCalled();
+      expect(confirmSpy).not.toHaveBeenCalled();
+
+      await user.click(within(dialog).getByRole("button", { name: "teamDelete" }));
+
+      await waitFor(() => expect(onDeleteTeam).toHaveBeenCalledWith(team));
+      expect(confirmSpy).not.toHaveBeenCalled();
+    } finally {
+      confirmSpy.mockRestore();
+    }
+  });
+});
diff --git a/web/app/tests/hooks/useAgentController.test.tsx b/web/app/tests/hooks/useAgentController.test.tsx
index effb3a9a..6b1b8470 100644
--- a/web/app/tests/hooks/useAgentController.test.tsx
+++ b/web/app/tests/hooks/useAgentController.test.tsx
@@ -30,7 +30,7 @@ import {
 import { createUserRequest } from "@/api/im";
 import { patchCsgclawUserRequest } from "@/api/participants";
 import { fetchSkills } from "@/api/skills";
-import { createTeamRequest, fetchTeams } from "@/api/tasks";
+import { createTeamRequest, deleteTeamRequest, fetchTeams } from "@/api/tasks";
 import { useAgentController } from "@/hooks/workspace/useAgentController";
 import { WorkspacePaneTypes } from "@/models/routing";
 import type { WorkspacePane } from "@/models/routing";
@@ -39,6 +39,7 @@ import type { IMConversation, IMData, TranslateFn } from "@/models/conversations
 import type { MCPServer } from "@/models/mcp";
 import { normalizeModelProviderCatalog } from "@/models/modelProviders";
 import type { ModelProviderCatalog } from "@/models/modelProviders";
+import type { WorkspaceTeam } from "@/models/tasks";
 import type { ApiError } from "@/api/client";
 import { AGENT_AVATAR_OPTIONS } from "@/shared/avatarOptions";
 import { ACTION_REBUILD_MANAGER } from "@/shared/constants/messages";
@@ -60,6 +61,7 @@ vi.mock("@/api/tasks", async () => {
   return {
     ...actual,
     createTeamRequest: vi.fn(),
+    deleteTeamRequest: vi.fn(),
     fetchTeams: vi.fn(async () => []),
   };
 });
@@ -307,6 +309,7 @@ describe("useAgentController", () => {
     vi.mocked(deleteFeishuParticipantRequest).mockReset();
     vi.mocked(finalizeFeishuRegistrationRequest).mockReset();
     vi.mocked(createTeamRequest).mockReset();
+    vi.mocked(deleteTeamRequest).mockReset();
     vi.mocked(fetchTeams).mockReset();
     vi.mocked(runAgentActionRequest).mockReset();
     vi.mocked(startFeishuRegistrationRequest).mockReset();
@@ -378,6 +381,7 @@ describe("useAgentController", () => {
       title: "Untitled Team",
       updated_at: "2026-06-10T00:00:00Z",
     });
+    vi.mocked(deleteTeamRequest).mockResolvedValue(undefined);
     vi.mocked(fetchTeams).mockResolvedValue([]);
     vi.mocked(runAgentActionRequest).mockResolvedValue({
       ...oldAgent,
@@ -1683,6 +1687,34 @@ describe("useAgentController", () => {
     });
   });
 
+  it("deletes teams after in-app confirmation without opening a native browser dialog", async () => {
+    const team: WorkspaceTeam = {
+      id: "team-1",
+      title: "Windows team",
+      lead_agent_id: "u-manager",
+      member_agent_ids: ["u-manager"],
+      status: "active",
+      created_at: "2026-08-01T00:00:00Z",
+      updated_at: "2026-08-01T00:00:00Z",
+    };
+    const confirmSpy = vi.spyOn(window, "confirm").mockReturnValue(true);
+
+    try {
+      const { result } = renderHook(() => useAgentControllerHarness().controller, { wrapper: createWrapper() });
+      let deleted = false;
+
+      await act(async () => {
+        deleted = await result.current.deleteTeam(team);
+      });
+
+      expect(deleted).toBe(true);
+      expect(deleteTeamRequest).toHaveBeenCalledWith("team-1");
+      expect(confirmSpy).not.toHaveBeenCalled();
+    } finally {
+      confirmSpy.mockRestore();
+    }
+  });
+
   it("starts Feishu connection by storing the pending registration and opening Feishu", async () => {
     const openSpy = vi.spyOn(window, "open").mockImplementation(() => null);
     const workerAgent: AgentLike = {