fix(web): show clipboard errors in anchored copy notifications

apps/web/src/components/DiffFilePathCopyButton.browser.test.tsx

@@ -0,0 +1,30 @@
+import { expect, it, vi } from "vite-plus/test";
+import { page } from "vite-plus/test/browser";
+
+import { render } from "../../test/render";
+import { DiffFilePathCopyButton } from "./DiffFilePathCopyButton";
+import { AnchoredToastProvider } from "./ui/toast";
+
+it("explains a denied clipboard write and lets the same path be copied again", async () => {
+  await using screen = await render(
+    <AnchoredToastProvider timeout={0}>
+      <DiffFilePathCopyButton filePath="apps/web/src/index.ts" />
+    </AnchoredToastProvider>,
+  );
+  using write = vi
+    .spyOn(navigator.clipboard, "writeText")
+    .mockRejectedValueOnce(new DOMException("Clipboard access denied", "NotAllowedError"))
+    .mockResolvedValue(undefined);
+  using _console = vi.spyOn(console, "error").mockImplementation(() => undefined);
+
+  const copy = screen.getByRole("button", { name: "Copy file path" });
+  await copy.click();
+
+  await expect.element(page.getByText("Failed to copy text to the clipboard.")).toBeVisible();
+  await page.getByRole("button", { name: "Dismiss notification" }).click();
+  await copy.click();
+
+  await expect.element(page.getByText("Copied!", { exact: true })).toBeVisible();
+  expect(write).toHaveBeenCalledTimes(2);
+  expect(write).toHaveBeenLastCalledWith("apps/web/src/index.ts");
+});

apps/web/src/components/chat/MessageCopyButton.browser.test.tsx

@@ -0,0 +1,30 @@
+import { expect, it, vi } from "vite-plus/test";
+import { page } from "vite-plus/test/browser";
+
+import { render } from "../../../test/render";
+import { AnchoredToastProvider } from "../ui/toast";
+import { MessageCopyButton } from "./MessageCopyButton";
+
+it("explains a denied clipboard write and lets the same message be copied again", async () => {
+  await using screen = await render(
+    <AnchoredToastProvider timeout={0}>
+      <MessageCopyButton text="A message to copy" />
+    </AnchoredToastProvider>,
+  );
+  using _write = vi
+    .spyOn(navigator.clipboard, "writeText")
+    .mockRejectedValueOnce(new DOMException("Clipboard access denied", "NotAllowedError"))
+    .mockResolvedValue(undefined);
+  using _console = vi.spyOn(console, "error").mockImplementation(() => undefined);
+
+  const copy = screen.getByRole("button", { name: "Copy message" });
+  await copy.click();
+
+  await expect.element(page.getByText("Failed to copy text to the clipboard.")).toBeVisible();
+  await expect.element(copy).toBeEnabled();
+  await page.getByRole("button", { name: "Dismiss notification" }).click();
+  await copy.click();
+
+  await expect.element(page.getByText("Copied!", { exact: true })).toBeVisible();
+  await expect.element(copy).toBeDisabled();
+});

apps/web/src/components/ui/anchoredCopyToast.ts

@@ -20,13 +20,10 @@ export function showAnchoredCopySuccessToast(ref: RefObject<HTMLButtonElement |
 export function showAnchoredCopyErrorToast(ref: RefObject<HTMLButtonElement | null>, error: Error) {
   if (!ref.current) return;
   anchoredToastManager.add({
-    data: {
-      tooltipStyle: true,
-    },
+    type: "error",
     positionerProps: {
       anchor: ref.current,
     },
-    timeout: ANCHORED_COPY_TOAST_TIMEOUT_MS,
     title: "Failed to copy",
     description: error.message,
   });