feat(web): migrate worktree delete confirm dialog

Author: pallyoung

packages/web/src/components/ui/MIGRATION.md

@@ -14,7 +14,7 @@
 | Spinner | 🟢 complete | `.animate-spin` | 0 | 2026-05-09 |
 | Switch | 🟢 complete | new | 0 | 2026-05-09 |
 | Modal | 🟢 complete | `.modal-overlay .modal-card .modal-*` | 0 | 2026-05-09 |
-| ConfirmDialog | 🟡 partial | modal convenience wrapper | richer confirm/auth flows remain on raw `Modal` | 2026-05-09 |
+| ConfirmDialog | 🟡 partial | modal convenience wrapper | file-tree delete, git sync confirm dialogs, and worktree-manager delete confirmation covered; richer confirm/auth flows remain on raw `Modal` | 2026-05-09 |
 | Toast | 🟢 complete | `.toast*` | 0 | 2026-05-09 |
 | Tooltip | 🟢 complete | native `title` hover labels | 0 | 2026-05-09 |
 | ProgressBar | 🟢 complete | `--progress-height` patterns | 0 | 2026-05-09 |
@@ -57,7 +57,7 @@
 
 `Modal` now completes the legacy raw modal-shell migration inventory: the file tree create flow, the objective dialog, the git sync auth flow, the desktop worktree modal, and the desktop worktree manager surface all use the shared primitive from the public UI barrel while preserving the legacy `modal-*` compatibility classes emitted by the primitive itself.
 
-`ConfirmDialog` now covers the bounded confirm-action slice used by the file tree delete flow and git sync confirm dialogs. The row remains partial because richer auth and action-confirmation flows still live on direct `Modal` composition by design.
+`ConfirmDialog` now covers the bounded confirm-action slice used by the file tree delete flow, git sync confirm dialogs, and the worktree-manager delete confirmation. The row remains partial because richer auth and action-confirmation flows still live on direct `Modal` composition by design.
 
 `Toast` now covers the bounded notification presenter in `features/notifications/toast-container.tsx`. The shared primitive owns the generic shell and compatibility classes, while Jotai queue state, auto-dismiss timing, icon selection, and workspace/session navigation remain in the feature layer by design.
 

packages/web/src/features/workspace/views/shared/worktree-manager-surface.test.tsx

@@ -272,7 +272,9 @@ describe("WorktreeManagerSurface", () => {
     );
 
     fireEvent.click(screen.getByRole("button", { name: "Remove feature/x" }));
+    expect(screen.getByRole("dialog", { name: "Delete" })).toBeInTheDocument();
     expect(screen.getByText("Force remove dirty worktree?")).toBeInTheDocument();
+    expect(screen.getByText("/repo/feature-x")).toHaveClass("worktree-manager__confirm-path");
     fireEvent.click(screen.getByRole("button", { name: "Force Remove" }));
 
     await waitFor(() => {
@@ -288,6 +290,83 @@ describe("WorktreeManagerSurface", () => {
     });
   });
 
+  it("uses the shared confirm dialog copy for clean worktree removal and returns to list on cancel", () => {
+    const cleanRemovableWorktrees: WorktreeInfo[] = [
+      worktrees[0]!,
+      {
+        name: "feature/y",
+        path: "/repo/feature-y",
+        branch: "feature/y",
+        commit: "ghi9012",
+        status: "clean",
+      },
+    ];
+
+    render(
+      <Provider store={buildManagerStore(vi.fn(), cleanRemovableWorktrees, "/repo/main")}>
+        <WorktreeManagerSurface workspaceId="ws-1" openView="list" onClose={vi.fn()} />
+      </Provider>
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove feature/y" }));
+
+    expect(screen.getByRole("dialog", { name: "Delete" })).toBeInTheDocument();
+    expect(screen.getByText("Remove worktree?")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Delete" })).toBeInTheDocument();
+    expect(screen.getByText("/repo/feature-y")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(screen.queryByRole("dialog", { name: "Delete" })).toBeNull();
+    expect(screen.getByText("feature/y")).toBeInTheDocument();
+  });
+
+  it("keeps removal errors visible inside the shared confirm dialog until dismissed", async () => {
+    const sendCommand = vi.fn().mockImplementation(async (op: string) => {
+      if (op === "worktree.remove") {
+        throw new Error("permission denied");
+      }
+
+      return {};
+    });
+
+    render(
+      <Provider store={buildManagerStore(sendCommand, worktrees, "/repo/main")}>
+        <WorktreeManagerSurface workspaceId="ws-1" openView="list" onClose={vi.fn()} />
+      </Provider>
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove feature/x" }));
+    fireEvent.click(screen.getByRole("button", { name: "Force Remove" }));
+
+    const dialog = await screen.findByRole("dialog", { name: "Delete" });
+    expect(dialog).toBeInTheDocument();
+    expect(screen.getByText("permission denied")).toBeInTheDocument();
+    expect(screen.getByText("Force remove dirty worktree?")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(screen.queryByRole("dialog", { name: "Delete" })).toBeNull();
+    expect(screen.getByText("feature/x")).toBeInTheDocument();
+  });
+
+  it("keeps mobile worktree removal inside the shared sheet instead of opening a dialog", () => {
+    viewportMocks.viewport = "mobile";
+
+    render(
+      <Provider store={buildManagerStore(vi.fn(), worktrees, "/repo/main")}>
+        <WorktreeManagerSurface workspaceId="ws-1" openView="list" onClose={vi.fn()} />
+      </Provider>
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove feature/x" }));
+
+    expect(screen.queryByRole("dialog", { name: "Delete" })).toBeNull();
+    expect(screen.getByRole("region", { name: "Worktrees sheet" })).toBeInTheDocument();
+    expect(screen.getByText("Force remove dirty worktree?")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Force Remove" })).toBeInTheDocument();
+  });
+
   it("does not retry worktree.list in a loop after an initial load failure", async () => {
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "worktree.list") {

packages/web/src/features/workspace/views/shared/worktree-manager-surface.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
   Button,
+  ConfirmDialog,
   EmptyState,
   Input,
   Modal,
@@ -134,6 +135,11 @@ export function WorktreeManagerSurface({
   const canSubmit =
     branchDraft.trim().length > 0 && /^(?:\/|[A-Za-z]:[\\/]|\\\\)/.test(pathDraft.trim());
   const pathHintId = `worktree-path-hint-${workspaceId}`;
+  const closeDeleteConfirm = () => {
+    setRemoveError(null);
+    setDeleteTargetPath(null);
+    setView("list");
+  };
 
   const openCreate = () => {
     resetCreateForm();
@@ -143,6 +149,22 @@ export function WorktreeManagerSurface({
     setView("create");
   };
 
+  const submitDeleteConfirm = () => {
+    if (!deleteTarget) {
+      return;
+    }
+
+    setRemoveError(null);
+    void removeWorktreeByPath(deleteTarget.path, deleteTarget.status === "dirty").then((result) => {
+      if (result.ok) {
+        closeDeleteConfirm();
+        return;
+      }
+
+      setRemoveError(result.error);
+    });
+  };
+
   const body =
     view === "detail" && selected ? (
       <div className={isMobile ? "mobile-worktree-sheet" : undefined}>
@@ -222,31 +244,13 @@ export function WorktreeManagerSurface({
         </p>
         <code className="worktree-manager__confirm-path">{deleteTarget.path}</code>
         <div className="worktree-manager__confirm-actions">
-          <Button
-            variant="secondary"
-            onClick={() => {
-              setRemoveError(null);
-              setDeleteTargetPath(null);
-              setView("list");
-            }}
-          >
+          <Button variant="secondary" onClick={closeDeleteConfirm}>
             {t("action.cancel")}
           </Button>
           <Button
             variant="danger"
             onClick={() => {
-              setRemoveError(null);
-              void removeWorktreeByPath(deleteTarget.path, deleteTarget.status === "dirty").then(
-                (result) => {
-                  if (result.ok) {
-                    setDeleteTargetPath(null);
-                    setView("list");
-                    return;
-                  }
-
-                  setRemoveError(result.error);
-                }
-              );
+              submitDeleteConfirm();
             }}
           >
             {deleteTarget.status === "dirty" ? t("worktree.force_remove") : t("common.delete")}
@@ -327,6 +331,39 @@ export function WorktreeManagerSurface({
       </div>
     );
 
+  if (!isMobile && view === "confirm-delete" && deleteTarget) {
+    return (
+      <ConfirmDialog
+        open
+        className="worktree-manager-surface"
+        title={t("common.delete")}
+        description={
+          <div className="worktree-manager__confirm">
+            {removeError ? <div className="worktree-error">{removeError}</div> : null}
+            <p>
+              {deleteTarget.status === "dirty"
+                ? t("worktree.remove_force_confirm")
+                : t("worktree.remove_confirm")}
+            </p>
+            <code className="worktree-manager__confirm-path">{deleteTarget.path}</code>
+          </div>
+        }
+        cancelText={t("action.cancel")}
+        closeLabel={t("action.close")}
+        confirmText={
+          deleteTarget.status === "dirty" ? t("worktree.force_remove") : t("common.delete")
+        }
+        onOpenChange={(open) => {
+          if (!open) {
+            closeDeleteConfirm();
+          }
+        }}
+        onConfirm={submitDeleteConfirm}
+        tone="danger"
+      />
+    );
+  }
+
   return isMobile ? (
     <Sheet
       kicker={t("worktree.title").toUpperCase()}