From 3fbfe305bf798d54ca4e5a87ca237e9e0277f1e0 Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <rhys@rhyssullivan.com>
Date: Sun, 14 Jun 2026 15:20:18 -0700
Subject: [PATCH 1/2] Fix copy buttons on non-secure origins; move API keys
 into the sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The copy buttons (API key, MCP install command, tool IDs, …) called
navigator.clipboard.writeText with no fallback. navigator.clipboard only
exists in a secure context (HTTPS or localhost), so on a self-hosted console
served over plain HTTP on a LAN host/IP the property is undefined and the
click threw and was swallowed — copy silently did nothing.

Add a shared copyToClipboard helper (@executor-js/react lib/clipboard) that
tries the async Clipboard API and falls back to selecting a hidden node via a
document Range + execCommand("copy"). The Range path does NOT move focus, so
it still works inside a focus trap such as the dialog that shows a freshly
created API key (focusing a throwaway <textarea> there gets yanked straight
back, copying nothing). Route CopyButton, the code blocks, and the app update
card through it.

Move the API keys link out of the account dropdown and into the main sidebar
nav for the hosts that serve keys in-app (self-host + cloud). Cloudflare
manages API keys in Access, so it keeps the default nav without the item.

Add selfhost browser e2e guards for both: API keys is a first-class sidebar
item, and the copy button copies a new key on a simulated plain-HTTP origin.
---
 apps/cloud/src/web/shell.tsx                  |   7 +-
 apps/host-cloudflare/web/routes/__root.tsx    |   6 +-
 apps/host-selfhost/web/routes/__root.tsx      |  12 +-
 e2e/selfhost/api-keys-feedback.test.ts        | 148 ++++++++++++++++++
 packages/app/src/web/shell.tsx                |   4 +-
 packages/react/src/components/code-block.tsx  |   4 +-
 packages/react/src/components/copy-button.tsx |   4 +-
 .../src/components/expandable-code-block.tsx  |   4 +-
 packages/react/src/lib/clipboard.ts           |  68 ++++++++
 packages/react/src/multiplayer/shell.tsx      |  25 +--
 10 files changed, 248 insertions(+), 34 deletions(-)
 create mode 100644 e2e/selfhost/api-keys-feedback.test.ts
 create mode 100644 packages/react/src/lib/clipboard.ts

diff --git a/apps/cloud/src/web/shell.tsx b/apps/cloud/src/web/shell.tsx
index 260405a0e..f796c5865 100644
--- a/apps/cloud/src/web/shell.tsx
+++ b/apps/cloud/src/web/shell.tsx
@@ -13,12 +13,14 @@ import { SupportSlot } from "./components/support-slot";
 //   - nav items         defaults + Organization + Billing (cloud-only sections)
 //   - org menu slot     multi-org switcher + create-org dialog (cloud-only)
 //   - support slot      the "Get support" dialog button (cloud-only)
-// The shared shell already renders the account dropdown frame, API-keys link,
-// and sign-out; `orgMenuSlot` is injected above the API-keys link.
+// API keys live in the main sidebar nav (via `defaultShellNavItems`); the
+// shared shell renders the account dropdown frame and sign-out, with
+// `orgMenuSlot` injected at the top of the dropdown.
 // ---------------------------------------------------------------------------
 
 const navItems = [
   ...defaultShellNavItems.filter((item) => item.to !== "/secrets"),
+  { to: "/api-keys", label: "API keys" },
   { to: "/org", label: "Organization" },
   { to: "/billing", label: "Billing" },
 ];
@@ -34,7 +36,6 @@ export function Shell(props: { readonly content?: React.ReactNode }) {
     <SharedShell
       onSignOut={signOut}
       navItems={navItems}
-      apiKeysTo="/api-keys"
       orgMenuSlot={<OrgMenuSlot />}
       supportSlot={<SupportSlot />}
       content={props.content}
diff --git a/apps/host-cloudflare/web/routes/__root.tsx b/apps/host-cloudflare/web/routes/__root.tsx
index c3bbda707..eaf4e356a 100644
--- a/apps/host-cloudflare/web/routes/__root.tsx
+++ b/apps/host-cloudflare/web/routes/__root.tsx
@@ -20,8 +20,8 @@ import { plugins as clientPlugins } from "virtual:executor/plugins-client";
 // resolves to authenticated; the unauthenticated branch can only happen when
 // Access isn't in front yet (or a JWT expired) — we bounce to the Access login.
 //
-// API keys + members are managed in Cloudflare Access, not in-app, so the
-// API-keys footer is hidden (`apiKeysTo={null}`) and the nav is the default set.
+// API keys + members are managed in Cloudflare Access, not in-app, so this host
+// omits the API-keys nav item and just uses the default set.
 // ---------------------------------------------------------------------------
 
 export const Route = createRootRoute({
@@ -66,7 +66,7 @@ function AuthenticatedApp() {
   // slug. There's only ever one org, so no other slug is reachable.
   const gated = (
     <>
-      <Shell onSignOut={signOut} navItems={defaultShellNavItems} apiKeysTo={null} />
+      <Shell onSignOut={signOut} navItems={defaultShellNavItems} />
       <Toaster />
     </>
   );
diff --git a/apps/host-selfhost/web/routes/__root.tsx b/apps/host-selfhost/web/routes/__root.tsx
index c20d4bb93..dbd77f875 100644
--- a/apps/host-selfhost/web/routes/__root.tsx
+++ b/apps/host-selfhost/web/routes/__root.tsx
@@ -27,10 +27,14 @@ export const Route = createRootRoute({
   component: RootComponent,
 });
 
-// Self-host adds the instance Admin page (members + invite links) to the shared
-// nav. The page and its API gate to owner/admin, so a non-admin who opens it
-// just sees the access notice.
-const selfHostNavItems = [...defaultShellNavItems, { to: "/admin", label: "Admin" }];
+// Self-host adds the account's API keys and the instance Admin page (members +
+// invite links) to the shared nav. The Admin page and its API gate to
+// owner/admin, so a non-admin who opens it just sees the access notice.
+const selfHostNavItems = [
+  ...defaultShellNavItems,
+  { to: "/api-keys", label: "API keys" },
+  { to: "/admin", label: "Admin" },
+];
 
 const signOut = async () => {
   await authClient.signOut();
diff --git a/e2e/selfhost/api-keys-feedback.test.ts b/e2e/selfhost/api-keys-feedback.test.ts
new file mode 100644
index 000000000..6f6ea18ad
--- /dev/null
+++ b/e2e/selfhost/api-keys-feedback.test.ts
@@ -0,0 +1,148 @@
+// Selfhost-only (browser): guards two pieces of user feedback about the
+// API-keys experience on a self-hosted instance —
+//
+//   1. the copy-API-key buttons work even on a plain-HTTP (non-secure) origin,
+//      and
+//   2. the API keys page is reachable from the main sidebar.
+//
+// Selfhost is the right target for (1): a self-hosted console is typically
+// served over plain HTTP on a LAN host/IP — a NON-secure origin, where the
+// browser does not expose `navigator.clipboard`. There the copy buttons fall
+// back to `document.execCommand("copy")` (see @executor-js/react `lib/clipboard`).
+// The harness runs on http://localhost, which IS a secure context, so the copy
+// test drops `navigator.clipboard` to reproduce the real deployment and records
+// what the page copies through the fallback.
+import { randomBytes } from "node:crypto";
+
+import { expect } from "@effect/vitest";
+import { Effect } from "effect";
+import { AccountHttpApi } from "@executor-js/api";
+
+import { scenario } from "../src/scenario";
+import { Api, Browser, Target } from "../src/services";
+
+declare global {
+  interface Window {
+    // The copy test stashes the text the page copied (via the execCommand
+    // fallback) here, so it can be read back out of the browser context.
+    __e2eCopied?: Array<string>;
+  }
+}
+
+scenario(
+  "API keys · the page is reachable from the main sidebar",
+  {},
+  Effect.gen(function* () {
+    const target = yield* Target;
+    const browser = yield* Browser;
+    const identity = yield* target.newIdentity();
+
+    yield* browser.session(identity, async ({ page, step }) => {
+      await step("Land on the dashboard", async () => {
+        await page.goto("/", { waitUntil: "networkidle" });
+        // The shared shell's main nav lists the workspace sections.
+        await page.locator("nav").getByRole("link", { name: "Integrations" }).first().waitFor();
+      });
+
+      await step("The main sidebar links straight to API keys", async () => {
+        // Feedback: "the api keys link should be in the main sidebar." Today the
+        // link lives only in the account dropdown at the bottom of the sidebar
+        // (a closed popover that isn't even mounted), so there is no API-keys
+        // link in the main <nav>. Scoping to <nav> is what makes this the repro:
+        // it ignores the dropdown and asserts a first-class sidebar item. The
+        // failure message lists the items the sidebar actually has today.
+        const navLinks = await page.locator("nav").getByRole("link").allInnerTexts();
+        expect(navLinks, "API keys should be a first-class item in the main sidebar nav").toContain(
+          "API keys",
+        );
+      });
+    });
+  }),
+);
+
+scenario(
+  "API keys · the copy button copies a new key on a plain-HTTP self-host",
+  {},
+  Effect.gen(function* () {
+    const target = yield* Target;
+    const browser = yield* Browser;
+    const { client: apiClient } = yield* Api;
+    const identity = yield* target.newIdentity();
+    const client = yield* apiClient(AccountHttpApi, identity);
+
+    // Selfhost is single-tenant, so name the key uniquely and revoke it after.
+    const keyName = `copy-repro-${randomBytes(3).toString("hex")}`;
+
+    yield* browser
+      .session(identity, async ({ page, step }) => {
+        // Recreate the real self-host deployment: a plain-HTTP, non-secure
+        // origin. There the browser does not expose `navigator.clipboard`, so
+        // the page must fall back to `document.execCommand("copy")` (the
+        // universal insecure-context copy path). We drop the Clipboard API
+        // exactly as a non-secure origin does, and record what the page copies
+        // through the fallback so we can assert the key actually reached the
+        // clipboard. (The harness itself runs on http://localhost, which IS a
+        // secure context — without this it would mask the bug entirely.)
+        await page.addInitScript(() => {
+          Object.defineProperty(navigator, "clipboard", {
+            configurable: true,
+            get: () => undefined,
+          });
+          const copied: Array<string> = [];
+          window.__e2eCopied = copied;
+          const exec = document.execCommand?.bind(document);
+          document.execCommand = (command, ...rest) => {
+            if (String(command).toLowerCase() === "copy") {
+              // execCommand("copy") copies the current selection — capture it.
+              const selected = window.getSelection ? String(window.getSelection()) : "";
+              const active = document.activeElement;
+              const fromField =
+                active && "value" in active && typeof active.value === "string" ? active.value : "";
+              copied.push(selected || fromField);
+            }
+            return exec ? exec(command, ...rest) : false;
+          };
+        });
+
+        await step("Open the API keys page", async () => {
+          await page.goto("/api-keys", { waitUntil: "networkidle" });
+          await page.getByRole("heading", { name: "API keys", exact: true }).waitFor();
+        });
+
+        await step("Create a new key", async () => {
+          await page.getByRole("button", { name: "New key" }).click();
+          const dialog = page.getByRole("dialog");
+          await dialog.getByLabel("Name").fill(keyName);
+          await dialog.getByRole("button", { name: "Create key" }).click();
+          // The one-time secret panel renders once the key exists.
+          await dialog.getByText("It is only shown once").waitFor();
+        });
+
+        await step("Copy the key with the copy button", async () => {
+          const dialog = page.getByRole("dialog");
+          // The exact secret the copy button should place on the clipboard.
+          const keyValue = await dialog.locator("input[readonly]").first().inputValue();
+          expect(keyValue, "the one-time secret is shown to copy").not.toBe("");
+
+          // The copy button must place the key on the clipboard even here, where
+          // navigator.clipboard is unavailable — it falls back to
+          // execCommand("copy"), which has to survive the dialog's focus trap.
+          await dialog.getByRole("button", { name: "Copy" }).first().click();
+
+          const copied = await page.evaluate(() => window.__e2eCopied ?? []);
+          expect(copied, "clicking copy should put the key on the clipboard").toContain(keyValue);
+        });
+      })
+      .pipe(
+        // Revoke the key whether the copy assertion passed or failed, so the
+        // shared single-tenant instance is left clean.
+        Effect.ensuring(
+          Effect.gen(function* () {
+            const list = yield* client.account.listApiKeys();
+            const mine = list.apiKeys.find((key) => key.name === keyName);
+            if (mine) yield* client.account.revokeApiKey({ params: { apiKeyId: mine.id } });
+          }).pipe(Effect.ignore),
+        ),
+      );
+  }),
+);
diff --git a/packages/app/src/web/shell.tsx b/packages/app/src/web/shell.tsx
index 43da58b48..d5ba80156 100644
--- a/packages/app/src/web/shell.tsx
+++ b/packages/app/src/web/shell.tsx
@@ -11,6 +11,7 @@ import {
   toolsAllAtom,
 } from "@executor-js/react/api/atoms";
 import { Button } from "@executor-js/react/components/button";
+import { copyToClipboard } from "@executor-js/react/lib/clipboard";
 import { integrationPresetIconUrl } from "@executor-js/react/components/integration-favicon";
 import { IntegrationIconWithAccount } from "@executor-js/react/components/integration-icon-with-account";
 import { CommandPalette } from "@executor-js/react/components/command-palette";
@@ -134,7 +135,8 @@ function UpdateCard(props: { latestVersion: string; channel: UpdateChannel }) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(() => {
-    void navigator.clipboard.writeText(command).then(() => {
+    void copyToClipboard(command).then((ok) => {
+      if (!ok) return;
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     });
diff --git a/packages/react/src/components/code-block.tsx b/packages/react/src/components/code-block.tsx
index 5d53d701f..60a862c60 100644
--- a/packages/react/src/components/code-block.tsx
+++ b/packages/react/src/components/code-block.tsx
@@ -9,6 +9,7 @@ import {
   type ShikiThemeProp,
 } from "../lib/shiki";
 import { cn } from "../lib/utils";
+import { copyToClipboard } from "../lib/clipboard";
 import { Button } from "./button";
 
 // ---------------------------------------------------------------------------
@@ -102,7 +103,8 @@ export function CodeBlock(props: {
   const maxH = !expanded && isLong ? (props.maxHeight ?? "24rem") : undefined;
 
   const handleCopy = useCallback(() => {
-    void navigator.clipboard.writeText(code).then(() => {
+    void copyToClipboard(code).then((ok) => {
+      if (!ok) return;
       setCopied(true);
       onCopy?.();
       setTimeout(() => setCopied(false), 1500);
diff --git a/packages/react/src/components/copy-button.tsx b/packages/react/src/components/copy-button.tsx
index 48537a740..6ad484712 100644
--- a/packages/react/src/components/copy-button.tsx
+++ b/packages/react/src/components/copy-button.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Copy, Check } from "lucide-react";
 import { Button } from "./button";
 import { cn } from "../lib/utils";
+import { copyToClipboard } from "../lib/clipboard";
 
 function CopyButton({
   value,
@@ -18,7 +19,8 @@ function CopyButton({
   const [copied, setCopied] = useState(false);
 
   const handleCopy = () => {
-    void navigator.clipboard.writeText(value).then(() => {
+    void copyToClipboard(value).then((ok) => {
+      if (!ok) return;
       setCopied(true);
       onCopy?.();
       setTimeout(() => setCopied(false), 1500);
diff --git a/packages/react/src/components/expandable-code-block.tsx b/packages/react/src/components/expandable-code-block.tsx
index 8617942fa..a54f49adc 100644
--- a/packages/react/src/components/expandable-code-block.tsx
+++ b/packages/react/src/components/expandable-code-block.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState, type CSSProperties } from "react";
 import { dualThemeOptions, getHighlighter, type ShikiThemeProp } from "../lib/shiki";
 import { cn } from "../lib/utils";
+import { copyToClipboard } from "../lib/clipboard";
 import { Button } from "./button";
 import type { ThemedToken } from "shiki/core";
 
@@ -358,7 +359,8 @@ export function ExpandableCodeBlock(props: {
   }, []);
 
   const handleCopy = useCallback(() => {
-    void navigator.clipboard.writeText(displayCode).then(() => {
+    void copyToClipboard(displayCode).then((ok) => {
+      if (!ok) return;
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     });
diff --git a/packages/react/src/lib/clipboard.ts b/packages/react/src/lib/clipboard.ts
new file mode 100644
index 000000000..a7e9db5a4
--- /dev/null
+++ b/packages/react/src/lib/clipboard.ts
@@ -0,0 +1,68 @@
+// Copy text to the clipboard, working in BOTH secure and non-secure origins.
+//
+// `navigator.clipboard` only exists in a secure context (HTTPS, or localhost).
+// A self-hosted console is commonly served over plain HTTP on a LAN host/IP —
+// a non-secure origin — where `navigator.clipboard` is `undefined`, so a bare
+// `navigator.clipboard.writeText(...)` throws and the copy silently does
+// nothing. Fall back to a legacy `document.execCommand("copy")` path so the
+// copy buttons work everywhere.
+//
+// Returns whether the copy succeeded, so callers only show their "copied"
+// confirmation when the value actually reached the clipboard.
+export async function copyToClipboard(text: string): Promise<boolean> {
+  // Preferred path: the async Clipboard API (secure contexts).
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    // oxlint-disable-next-line executor/no-try-catch-or-throw -- boundary: the Clipboard API rejects (permission denied, blur) and we recover via the legacy path
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // Permission denied / document not focused — fall through to the legacy
+      // path rather than failing the copy.
+    }
+  }
+
+  return legacyCopy(text);
+}
+
+// Legacy fallback for non-secure origins (plain-HTTP self-host). Select the text
+// via a document Range on a hidden node, then `execCommand("copy")`.
+//
+// Crucially this selects a Range WITHOUT moving focus. A throwaway <textarea>
+// that we `.focus()` would be yanked straight back by a focus trap (e.g. the
+// Radix dialog that shows a freshly created API key), leaving nothing selected
+// when the copy fires. A document selection survives the focus trap, so the
+// copy works wherever the button lives.
+function legacyCopy(text: string): boolean {
+  if (typeof document === "undefined" || !document.body) return false;
+  const selection = document.getSelection();
+  if (!selection) return false;
+
+  const node = document.createElement("span");
+  node.textContent = text;
+  node.style.whiteSpace = "pre"; // preserve spaces/newlines exactly
+  node.style.userSelect = "text";
+  node.style.position = "fixed";
+  node.style.top = "0";
+  node.style.left = "0";
+  node.style.opacity = "0";
+  node.style.pointerEvents = "none";
+  document.body.appendChild(node);
+
+  const previousRange = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+  const range = document.createRange();
+  range.selectNodeContents(node);
+  selection.removeAllRanges();
+  selection.addRange(range);
+
+  // oxlint-disable-next-line executor/no-try-catch-or-throw -- boundary: execCommand can throw in restricted DOM contexts; selection + node must be restored regardless
+  try {
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    selection.removeAllRanges();
+    if (previousRange) selection.addRange(previousRange);
+    document.body.removeChild(node);
+  }
+}
diff --git a/packages/react/src/multiplayer/shell.tsx b/packages/react/src/multiplayer/shell.tsx
index 2a5421c8f..8bd7ae262 100644
--- a/packages/react/src/multiplayer/shell.tsx
+++ b/packages/react/src/multiplayer/shell.tsx
@@ -11,7 +11,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../components/dropdown-menu";
 import {
@@ -41,7 +40,9 @@ import { useAuth } from "./auth-context";
 export type ShellNavItem = { readonly to: string; readonly label: string };
 
 /** Integrations lives at "/", plus the standard tool-management sections. Hosts
- *  spread this and append their own (e.g. Organization, Billing). */
+ *  spread this and append their own (e.g. API keys, Organization, Billing). A
+ *  host only adds API keys if it actually serves them in-app (Cloudflare manages
+ *  them in Access, so it omits the link). */
 export const defaultShellNavItems: ReadonlyArray<ShellNavItem> = [
   { to: "/", label: "Integrations" },
   { to: "/secrets", label: "Providers" },
@@ -71,8 +72,6 @@ export interface ShellProps {
   readonly onSignOut: () => void | Promise<void>;
   /** Nav sections; defaults to {@link defaultShellNavItems}. */
   readonly navItems?: ReadonlyArray<ShellNavItem>;
-  /** Where the "API keys" footer link goes; null hides it. Default "/api-keys". */
-  readonly apiKeysTo?: string | null;
   /** Injected into the account dropdown — cloud's org switcher / create-org. */
   readonly orgMenuSlot?: ReactNode;
   /** Injected support button above the account footer (cloud). */
@@ -207,11 +206,9 @@ function Avatar(props: { url: string | null; name: string | null; email: string
 
 // ── UserFooter ──────────────────────────────────────────────────────────
 
-function UserFooter(props: Pick<ShellProps, "onSignOut" | "apiKeysTo" | "orgMenuSlot">) {
+function UserFooter(props: Pick<ShellProps, "onSignOut" | "orgMenuSlot">) {
   const auth = useAuth();
   if (auth.status !== "authenticated") return null;
-  const apiKeysTo = props.apiKeysTo === undefined ? "/api-keys" : props.apiKeysTo;
-  const apiKeysScopedTo = apiKeysTo == null ? null : orgScopedTo(apiKeysTo);
 
   return (
     <div className="shrink-0 border-t border-sidebar-border px-3 py-2.5">
@@ -248,14 +245,6 @@ function UserFooter(props: Pick<ShellProps, "onSignOut" | "apiKeysTo" | "orgMenu
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" side="top" className="w-64">
           {props.orgMenuSlot}
-          {apiKeysScopedTo && (
-            <>
-              <DropdownMenuItem asChild className="text-xs">
-                <Link to={apiKeysScopedTo}>API keys</Link>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-            </>
-          )}
           <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
             Signed in as
           </DropdownMenuLabel>
@@ -316,11 +305,7 @@ function SidebarContent(
 
       {props.supportSlot && <div className="shrink-0 px-2 pb-2">{props.supportSlot}</div>}
 
-      <UserFooter
-        onSignOut={props.onSignOut}
-        apiKeysTo={props.apiKeysTo}
-        orgMenuSlot={props.orgMenuSlot}
-      />
+      <UserFooter onSignOut={props.onSignOut} orgMenuSlot={props.orgMenuSlot} />
     </>
   );
 }

From 5f56924ed60c473506472cecb7270be1721e738e Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <rhys@rhyssullivan.com>
Date: Sun, 14 Jun 2026 15:52:34 -0700
Subject: [PATCH 2/2] Toast on copy failure instead of failing silently

When a copy genuinely can't happen (no navigator.clipboard AND execCommand
refuses), copyToClipboard returns false. Show a "Failed to copy to clipboard"
error toast on that path across every copy site (CopyButton, the code blocks,
the app update card) rather than doing nothing.

Add a selfhost e2e guard that forces both copy paths to fail and asserts the
toast surfaces.
---
 e2e/selfhost/api-keys-feedback.test.ts        | 52 +++++++++++++++++++
 packages/app/src/web/shell.tsx                |  6 ++-
 packages/react/src/components/code-block.tsx  |  6 ++-
 packages/react/src/components/copy-button.tsx |  6 ++-
 .../src/components/expandable-code-block.tsx  |  6 ++-
 5 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/e2e/selfhost/api-keys-feedback.test.ts b/e2e/selfhost/api-keys-feedback.test.ts
index 6f6ea18ad..eee5fde72 100644
--- a/e2e/selfhost/api-keys-feedback.test.ts
+++ b/e2e/selfhost/api-keys-feedback.test.ts
@@ -146,3 +146,55 @@ scenario(
       );
   }),
 );
+
+scenario(
+  "API keys · a copy that can't reach the clipboard surfaces an error toast",
+  {},
+  Effect.gen(function* () {
+    const target = yield* Target;
+    const browser = yield* Browser;
+    const { client: apiClient } = yield* Api;
+    const identity = yield* target.newIdentity();
+    const client = yield* apiClient(AccountHttpApi, identity);
+
+    const keyName = `copy-fail-${randomBytes(3).toString("hex")}`;
+
+    yield* browser
+      .session(identity, async ({ page, step }) => {
+        // Simulate a context where the copy genuinely can't happen: no
+        // navigator.clipboard (non-secure origin) AND execCommand("copy")
+        // refuses (some browsers/extensions block it). The copy then truly
+        // fails, and the button must say so rather than silently doing nothing.
+        await page.addInitScript(() => {
+          Object.defineProperty(navigator, "clipboard", {
+            configurable: true,
+            get: () => undefined,
+          });
+          document.execCommand = (command) => String(command).toLowerCase() !== "copy";
+        });
+
+        await step("Create a new key", async () => {
+          await page.goto("/api-keys", { waitUntil: "networkidle" });
+          await page.getByRole("button", { name: "New key" }).click();
+          const dialog = page.getByRole("dialog");
+          await dialog.getByLabel("Name").fill(keyName);
+          await dialog.getByRole("button", { name: "Create key" }).click();
+          await dialog.getByText("It is only shown once").waitFor();
+        });
+
+        await step("A failed copy tells the user instead of failing silently", async () => {
+          await page.getByRole("dialog").getByRole("button", { name: "Copy" }).first().click();
+          await page.getByText("Failed to copy to clipboard").waitFor();
+        });
+      })
+      .pipe(
+        Effect.ensuring(
+          Effect.gen(function* () {
+            const list = yield* client.account.listApiKeys();
+            const mine = list.apiKeys.find((key) => key.name === keyName);
+            if (mine) yield* client.account.revokeApiKey({ params: { apiKeyId: mine.id } });
+          }).pipe(Effect.ignore),
+        ),
+      );
+  }),
+);
diff --git a/packages/app/src/web/shell.tsx b/packages/app/src/web/shell.tsx
index d5ba80156..a2e5c6852 100644
--- a/packages/app/src/web/shell.tsx
+++ b/packages/app/src/web/shell.tsx
@@ -11,6 +11,7 @@ import {
   toolsAllAtom,
 } from "@executor-js/react/api/atoms";
 import { Button } from "@executor-js/react/components/button";
+import { toast } from "@executor-js/react/components/sonner";
 import { copyToClipboard } from "@executor-js/react/lib/clipboard";
 import { integrationPresetIconUrl } from "@executor-js/react/components/integration-favicon";
 import { IntegrationIconWithAccount } from "@executor-js/react/components/integration-icon-with-account";
@@ -136,7 +137,10 @@ function UpdateCard(props: { latestVersion: string; channel: UpdateChannel }) {
 
   const handleCopy = useCallback(() => {
     void copyToClipboard(command).then((ok) => {
-      if (!ok) return;
+      if (!ok) {
+        toast.error("Failed to copy to clipboard");
+        return;
+      }
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     });
diff --git a/packages/react/src/components/code-block.tsx b/packages/react/src/components/code-block.tsx
index 60a862c60..2135affcf 100644
--- a/packages/react/src/components/code-block.tsx
+++ b/packages/react/src/components/code-block.tsx
@@ -8,6 +8,7 @@ import {
   resolveLang,
   type ShikiThemeProp,
 } from "../lib/shiki";
+import { toast } from "sonner";
 import { cn } from "../lib/utils";
 import { copyToClipboard } from "../lib/clipboard";
 import { Button } from "./button";
@@ -104,7 +105,10 @@ export function CodeBlock(props: {
 
   const handleCopy = useCallback(() => {
     void copyToClipboard(code).then((ok) => {
-      if (!ok) return;
+      if (!ok) {
+        toast.error("Failed to copy to clipboard");
+        return;
+      }
       setCopied(true);
       onCopy?.();
       setTimeout(() => setCopied(false), 1500);
diff --git a/packages/react/src/components/copy-button.tsx b/packages/react/src/components/copy-button.tsx
index 6ad484712..e9f408098 100644
--- a/packages/react/src/components/copy-button.tsx
+++ b/packages/react/src/components/copy-button.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Copy, Check } from "lucide-react";
+import { toast } from "sonner";
 import { Button } from "./button";
 import { cn } from "../lib/utils";
 import { copyToClipboard } from "../lib/clipboard";
@@ -20,7 +21,10 @@ function CopyButton({
 
   const handleCopy = () => {
     void copyToClipboard(value).then((ok) => {
-      if (!ok) return;
+      if (!ok) {
+        toast.error("Failed to copy to clipboard");
+        return;
+      }
       setCopied(true);
       onCopy?.();
       setTimeout(() => setCopied(false), 1500);
diff --git a/packages/react/src/components/expandable-code-block.tsx b/packages/react/src/components/expandable-code-block.tsx
index a54f49adc..0e5a866a2 100644
--- a/packages/react/src/components/expandable-code-block.tsx
+++ b/packages/react/src/components/expandable-code-block.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState, type CSSProperties } from "react";
 import { dualThemeOptions, getHighlighter, type ShikiThemeProp } from "../lib/shiki";
+import { toast } from "sonner";
 import { cn } from "../lib/utils";
 import { copyToClipboard } from "../lib/clipboard";
 import { Button } from "./button";
@@ -360,7 +361,10 @@ export function ExpandableCodeBlock(props: {
 
   const handleCopy = useCallback(() => {
     void copyToClipboard(displayCode).then((ok) => {
-      if (!ok) return;
+      if (!ok) {
+        toast.error("Failed to copy to clipboard");
+        return;
+      }
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     });