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..eee5fde72
--- /dev/null
+++ b/e2e/selfhost/api-keys-feedback.test.ts
@@ -0,0 +1,200 @@
+// 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),
+        ),
+      );
+  }),
+);
+
+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 43da58b48..a2e5c6852 100644
--- a/packages/app/src/web/shell.tsx
+++ b/packages/app/src/web/shell.tsx
@@ -11,6 +11,8 @@ 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";
 import { CommandPalette } from "@executor-js/react/components/command-palette";
@@ -134,7 +136,11 @@ 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) {
+        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 5d53d701f..2135affcf 100644
--- a/packages/react/src/components/code-block.tsx
+++ b/packages/react/src/components/code-block.tsx
@@ -8,7 +8,9 @@ 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";
 
 // ---------------------------------------------------------------------------
@@ -102,7 +104,11 @@ 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) {
+        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 48537a740..e9f408098 100644
--- a/packages/react/src/components/copy-button.tsx
+++ b/packages/react/src/components/copy-button.tsx
@@ -1,7 +1,9 @@
 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";
 
 function CopyButton({
   value,
@@ -18,7 +20,11 @@ function CopyButton({
   const [copied, setCopied] = useState(false);
 
   const handleCopy = () => {
-    void navigator.clipboard.writeText(value).then(() => {
+    void copyToClipboard(value).then((ok) => {
+      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 8617942fa..0e5a866a2 100644
--- a/packages/react/src/components/expandable-code-block.tsx
+++ b/packages/react/src/components/expandable-code-block.tsx
@@ -1,6 +1,8 @@
 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";
 import type { ThemedToken } from "shiki/core";
 
@@ -358,7 +360,11 @@ export function ExpandableCodeBlock(props: {
   }, []);
 
   const handleCopy = useCallback(() => {
-    void navigator.clipboard.writeText(displayCode).then(() => {
+    void copyToClipboard(displayCode).then((ok) => {
+      if (!ok) {
+        toast.error("Failed to copy to clipboard");
+        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} />
     </>
   );
 }