fix(ui): honest extension-token clipboard toasts and Copy button (#6932)

Create token no longer swallows clipboard failures then claims success.
Add a manual Copy affordance beside the truncated token display.

Closes #6824

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: RealDiligent

apps/loopover-ui/src/routes/extension.test.tsx

@@ -0,0 +1,98 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// #6824: create-token used to swallow clipboard rejections and still toast success. Mock the toast
+// and api layers so the regression can assert the exact success/failure branch without a live API.
+const { success, error } = vi.hoisted(() => ({ success: vi.fn(), error: vi.fn() }));
+vi.mock("sonner", () => ({ toast: { success, error } }));
+
+const { apiFetch } = vi.hoisted(() => ({ apiFetch: vi.fn() }));
+vi.mock("@/lib/api/request", () => ({
+  apiFetch: (...args: unknown[]) => apiFetch(...args),
+}));
+vi.mock("@/lib/api/origin", () => ({
+  getApiOrigin: () => "https://api.example.test",
+}));
+
+import { ExtensionTokenButton } from "./extension";
+
+const TOKEN = "ext_test_token_6824";
+
+function mockClipboard(writeText: () => Promise<void>) {
+  const spy = vi.fn(writeText);
+  Object.defineProperty(navigator, "clipboard", {
+    value: { writeText: spy },
+    configurable: true,
+    writable: true,
+  });
+  return spy;
+}
+
+describe("ExtensionTokenButton clipboard honesty (#6824)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    apiFetch.mockResolvedValue({
+      ok: true,
+      data: { token: TOKEN },
+      status: 200,
+      durationMs: 1,
+      message: undefined,
+    });
+  });
+
+  it("toasts success only when the auto-copy after create actually writes", async () => {
+    const writeText = mockClipboard(() => Promise.resolve());
+    render(<ExtensionTokenButton />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Create extension token" }));
+
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith(TOKEN));
+    await waitFor(() =>
+      expect(success).toHaveBeenCalledWith("Extension token created", {
+        description: "Copied to clipboard.",
+      }),
+    );
+    expect(error).not.toHaveBeenCalled();
+    expect(screen.getByTestId("extension-token-value").textContent).toBe(TOKEN);
+    expect(screen.getByRole("button", { name: "Copy extension token" })).toBeTruthy();
+  });
+
+  it("does not claim clipboard success when writeText rejects after create", async () => {
+    // The exact gap: `.catch(() => undefined)` discarded the rejection, then success still fired.
+    mockClipboard(() => Promise.reject(new Error("denied")));
+    render(<ExtensionTokenButton />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Create extension token" }));
+
+    await waitFor(() =>
+      expect(error).toHaveBeenCalledWith("Couldn't copy extension token", expect.any(Object)),
+    );
+    expect(success).not.toHaveBeenCalled();
+    // Token must still render so the user can recover via the manual copy button.
+    expect(screen.getByTestId("extension-token-value").textContent).toBe(TOKEN);
+    expect(screen.getByRole("button", { name: "Copy extension token" })).toBeTruthy();
+  });
+
+  it("manual Copy button copies the displayed token and reports failure honestly", async () => {
+    mockClipboard(() => Promise.resolve());
+    render(<ExtensionTokenButton />);
+    fireEvent.click(screen.getByRole("button", { name: "Create extension token" }));
+    await waitFor(() => screen.getByRole("button", { name: "Copy extension token" }));
+    vi.clearAllMocks();
+
+    const writeText = mockClipboard(() => Promise.resolve());
+    fireEvent.click(screen.getByRole("button", { name: "Copy extension token" }));
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith(TOKEN));
+    await waitFor(() =>
+      expect(success).toHaveBeenCalledWith("Extension token copied", expect.any(Object)),
+    );
+
+    vi.clearAllMocks();
+    mockClipboard(() => Promise.reject(new Error("denied")));
+    fireEvent.click(screen.getByRole("button", { name: "Copy extension token" }));
+    await waitFor(() =>
+      expect(error).toHaveBeenCalledWith("Couldn't copy extension token", expect.any(Object)),
+    );
+    expect(success).not.toHaveBeenCalled();
+  });
+});

apps/loopover-ui/src/routes/extension.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Download, Lock, Shield, GitPullRequestArrow } from "lucide-react";
+import { Copy, Download, Lock, Shield, GitPullRequestArrow } from "lucide-react";
 import { useState } from "react";
 import { motion } from "motion/react";
 import { toast } from "sonner";
@@ -11,6 +11,14 @@ import { apiFetch } from "@/lib/api/request";
 import { getApiOrigin } from "@/lib/api/origin";
 import { cn } from "@/lib/utils";
 
+/** Write `text` to the clipboard or throw when the Clipboard API is missing / rejects. */
+async function writeClipboardText(text: string): Promise<void> {
+  if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+    throw new Error("Clipboard API unavailable");
+  }
+  await navigator.clipboard.writeText(text);
+}
+
 export const Route = createFileRoute("/extension")({
   head: () => ({
     meta: [
@@ -145,9 +153,31 @@ const EXTENSION_PANELS = [
   },
 ] as const;
 
-function ExtensionTokenButton() {
+// Exported for unit tests — the create-token path used to swallow clipboard failures and report
+// false success (#6824). Keeping the button extractable lets the regression suite drive it without
+// mounting the full marketing page / router.
+export function ExtensionTokenButton() {
   const [token, setToken] = useState("");
   const [busy, setBusy] = useState(false);
+
+  const copyToken = async (value: string, { created }: { created: boolean }) => {
+    try {
+      await writeClipboardText(value);
+      toast.success(created ? "Extension token created" : "Extension token copied", {
+        description: created
+          ? "Copied to clipboard."
+          : "The token is ready to paste into the extension.",
+      });
+    } catch {
+      // Match the app.runs / CodeBlock copy-fail channel: never claim success when writeText rejected.
+      toast.error("Couldn't copy extension token", {
+        description: created
+          ? "Token was created — use the Copy button next to it, or select the token and copy manually."
+          : "Select the token and copy it manually.",
+      });
+    }
+  };
+
   return (
     <div className="flex max-w-full flex-col gap-2">
       <button
@@ -175,17 +205,29 @@ function ExtensionTokenButton() {
             return;
           }
           setToken(result.data.token);
-          await navigator.clipboard?.writeText(result.data.token).catch(() => undefined);
-          toast.success("Extension token created", { description: "Copied to clipboard." });
+          await copyToken(result.data.token, { created: true });
         }}
         className="inline-flex items-center gap-2 rounded-token border border-border bg-transparent px-4 py-2 text-token-sm font-medium hover:border-foreground/30 disabled:cursor-not-allowed disabled:opacity-60"
       >
         {busy ? "Creating token…" : "Create extension token"}
       </button>
       {token && (
-        <code className="max-w-[320px] truncate rounded-token border border-border bg-background/60 px-2 py-1 font-mono text-token-2xs text-muted-foreground">
-          {token}
-        </code>
+        <div className="flex max-w-full items-center gap-1.5">
+          <code
+            data-testid="extension-token-value"
+            className="max-w-[320px] truncate rounded-token border border-border bg-background/60 px-2 py-1 font-mono text-token-2xs text-muted-foreground"
+          >
+            {token}
+          </code>
+          <button
+            type="button"
+            aria-label="Copy extension token"
+            onClick={() => void copyToken(token, { created: false })}
+            className="inline-flex size-7 shrink-0 items-center justify-center rounded-token border border-border text-muted-foreground hover:border-foreground/30 hover:text-foreground"
+          >
+            <Copy className="size-3.5" aria-hidden />
+          </button>
+        </div>
       )}
     </div>
   );