@agent-native/toolkit 0.227.0 → 0.228.0-nightly-20261111004142

package/src/app/resources/McpAccessSettings.spec.tsx

@@ -1,12 +1,41 @@
 // @vitest-environment happy-dom
-
+// oracle-change: MCP setup now opens client detail pages from a list instead of switching tabs.
 import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
+import { queryByRole } from "@testing-library/react";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { renderToString } from "react-dom/server";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { McpAccessSettings } from "./McpAccessSettings.js";
+import {
+  McpAccessSettings,
+  type McpAccessSettingsProps,
+} from "./McpAccessSettings.js";
+
+const statusQuery = vi.hoisted(() => ({
+  data: {
+    connections: [
+      "claude",
+      "chatgpt",
+      "cursor",
+      "vscode",
+      "claude-code",
+      "codex",
+      "grok",
+      "other",
+    ].map((client) => ({
+      client,
+      status: "disconnected",
+      lastUsedAt: null as number | null,
+    })),
+  },
+  isPending: false,
+  isError: false,
+  refetch: vi.fn(),
+}));
+vi.mock("@agent-native/core/client/use-action", () => ({
+  useActionQuery: () => statusQuery,
+}));
 
 const IDENTITY = {
   serverName: "beta-agent-native-content",
@@ -16,354 +45,401 @@ const IDENTITY = {
   environment: "beta",
   connect: true,
 };
-
-function stubFetch(identity: { ok: boolean; body?: unknown }) {
-  const fetchMock = vi.fn(async (input: RequestInfo | URL) => {
-    if (String(input).endsWith("/mcp/connect/identity")) {
-      return identity.ok
-        ? { ok: true, status: 200, json: async () => identity.body }
-        : { ok: false, status: 500, json: async () => ({}) };
-    }
-    return { ok: false, status: 404 };
-  });
+function stubFetch(body: unknown = IDENTITY, ok = true) {
+  const fetchMock = vi.fn(async (input: RequestInfo | URL) =>
+    String(input).endsWith("/mcp/connect/identity")
+      ? { ok, status: ok ? 200 : 500, json: async () => body }
+      : { ok: false, status: 404 },
+  );
   vi.stubGlobal("fetch", fetchMock);
   return fetchMock;
 }
 
-async function waitForGuides(container: HTMLElement) {
-  await vi.waitFor(() =>
-    expect(container.querySelector("#mcp-guide-tab-claude")).not.toBeNull(),
-  );
-}
-
-// Radix tabs activate on mousedown, not click.
-function selectTab(tab: HTMLButtonElement | null) {
-  tab?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
-}
-
-describe("McpAccessSettings localization", () => {
+describe("MCP client setup", () => {
   let container: HTMLDivElement;
   let root: Root;
-
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
-    stubFetch({ ok: true, body: IDENTITY });
+    stubFetch();
+    statusQuery.isError = false;
+    statusQuery.isPending = false;
+    statusQuery.refetch.mockClear();
+    statusQuery.data.connections.forEach((row) => {
+      row.status = "disconnected";
+      row.lastUsedAt = null;
+    });
     window.history.replaceState({}, "", "/settings/mcp");
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
   });
-
   afterEach(() => {
     act(() => root.unmount());
     container.remove();
+    vi.restoreAllMocks();
     vi.unstubAllGlobals();
   });
-
-  it("renders the MCP chrome in the selected locale", async () => {
-    await act(async () => {
+  async function render(props: McpAccessSettingsProps = {}, locale = "en-US") {
+    await act(async () =>
       root.render(
         <AgentNativeI18nProvider
-          initialLocale="es-ES"
-          initialPreference="es-ES"
+          initialLocale={locale}
+          initialPreference={locale}
           persistPreference={false}
         >
-          <McpAccessSettings appName="Mail" />
+          <McpAccessSettings hideHeader {...props} />
         </AgentNativeI18nProvider>,
-      );
-    });
-    await vi.waitFor(() =>
-      expect(container.textContent).toContain(
-        "Conecta esta app con Claude, ChatGPT, Cursor, Codex u otro host MCP.",
       ),
     );
-
-    expect(container.textContent).toContain(
-      "Conecta esta app con Claude, ChatGPT, Cursor, Codex u otro host MCP.",
+    await vi.waitFor(() =>
+      expect(container.querySelector("[aria-busy=true]")).toBeNull(),
     );
-    expect(container.textContent).toContain("URL del servidor MCP");
-    expect(container.textContent).toContain("Conectar un host de IA");
-    expect(container.textContent).not.toContain("MCP server URL");
-    expect(container.textContent).toContain("Abre Customize → Connectors");
-
-    const claudeTab = container.querySelector<HTMLButtonElement>(
-      "#mcp-guide-tab-claude",
+  }
+  function link(name: string) {
+    return (
+      queryByRole<HTMLAnchorElement>(container, "link", {
+        name,
+        exact: true,
+      }) ?? undefined
     );
-    expect(claudeTab).not.toBeNull();
-    expect(claudeTab?.getAttribute("aria-selected")).toBe("true");
-
-    const connectLink = Array.from(container.querySelectorAll("a")).find(
-      (link) => link.textContent?.includes("Abrir página completa de conexión"),
+  }
+  async function open(name: string) {
+    const target = link(name);
+    expect(target).toBeDefined();
+    await act(async () => target?.click());
+  }
+
+  it("shows server-backed connection status and activity", async () => {
+    const row = statusQuery.data.connections.find(
+      (row) => row.client === "codex",
     );
-    expect(connectLink?.getAttribute("href")).toContain("locale=es-ES");
+    if (!row) throw new Error("Missing Codex fixture");
+    row.status = "connected";
+    row.lastUsedAt = 1_800_000_000_000;
+    await render({ guideId: "codex" });
+    expect(container.textContent).toContain("Connected");
+    expect(container.textContent).toContain("Last used");
+    expect(container.textContent).not.toContain("No activity recorded");
+    expect(
+      queryByRole<HTMLButtonElement>(container, "button", {
+        name: "Copy prompt",
+        exact: true,
+      })?.disabled,
+    ).toBe(false);
   });
 
-  it("uses the app title metadata when no app name is provided", async () => {
-    const meta = document.createElement("meta");
-    meta.name = "apple-mobile-web-app-title";
-    meta.content = "Mail";
-    document.head.appendChild(meta);
-
-    await act(async () => {
-      root.render(
-        <AgentNativeI18nProvider
-          initialLocale="en-US"
-          initialPreference="en-US"
-          persistPreference={false}
-        >
-          <McpAccessSettings />
-        </AgentNativeI18nProvider>,
-      );
+  it("shows connection status directly in the client list", async () => {
+    statusQuery.data.connections[0].status = "connected";
+    statusQuery.data.connections[0].lastUsedAt = 1_800_000_000_000;
+    await render();
+    const claude = queryByRole<HTMLAnchorElement>(container, "link", {
+      name: /^Claude Last used/,
     });
-
-    try {
-      await waitForGuides(container);
-      const claudeTab = container.querySelector<HTMLButtonElement>(
-        "#mcp-guide-tab-claude",
-      );
-      expect(claudeTab).not.toBeNull();
-      await act(async () => selectTab(claudeTab));
-      expect(container.textContent).toContain("name it Mail");
-    } finally {
-      meta.remove();
-    }
+    expect(claude?.textContent).toContain("Connected");
+    expect(claude?.textContent).toContain("Last used");
+    expect(link("ChatGPT")).toBeDefined();
   });
 
-  it("selects the guide requested by the integrations handoff", async () => {
-    window.history.replaceState({}, "", "/settings/mcp?guide=grok");
-
-    await act(async () => {
-      root.render(
-        <AgentNativeI18nProvider
-          initialLocale="en-US"
-          initialPreference="en-US"
-          persistPreference={false}
-        >
-          <McpAccessSettings appName="Content" />
-        </AgentNativeI18nProvider>,
-      );
+  it("reports a failed check instead of showing stale Connected metadata", async () => {
+    statusQuery.data.connections[0].status = "connected";
+    statusQuery.isError = true;
+    await render({ guideId: "claude" });
+    expect(container.textContent).toContain("Status unavailable");
+    expect(container.textContent).not.toContain("Connected");
+    const retry = queryByRole<HTMLButtonElement>(container, "button", {
+      name: "Try again",
     });
-    await waitForGuides(container);
-
-    expect(
-      container
-        .querySelector("#mcp-guide-tab-grok")
-        ?.getAttribute("aria-selected"),
-    ).toBe("true");
-    expect(container.textContent).toContain("grok.com/connectors");
+    expect(retry).not.toBeNull();
+    await act(async () => retry?.click());
+    expect(statusQuery.refetch).toHaveBeenCalledOnce();
   });
 
-  it("synchronizes the guide after browser navigation", async () => {
-    window.history.replaceState({}, "", "/settings/mcp?guide=grok");
-
-    await act(async () => {
-      root.render(
-        <AgentNativeI18nProvider
-          initialLocale="en-US"
-          initialPreference="en-US"
-          persistPreference={false}
-        >
-          <McpAccessSettings appName="Content" />
-        </AgentNativeI18nProvider>,
-      );
-    });
-    await waitForGuides(container);
-
-    await act(async () => {
-      window.history.pushState({}, "", "/settings/mcp?guide=cursor");
-      window.dispatchEvent(new PopStateEvent("popstate"));
-    });
-
-    expect(
-      container
-        .querySelector("#mcp-guide-tab-cursor")
-        ?.getAttribute("aria-selected"),
-    ).toBe("true");
+  it("keeps unverifiable older credentials distinct from disconnected", async () => {
+    statusQuery.data.connections[0].status = "unknown";
+    await render({ guideId: "claude" });
+    expect(container.textContent).toContain("Status unavailable");
+    expect(container.textContent).toContain("Older credentials");
+    expect(container.textContent).not.toContain("Not connected");
   });
 
-  it("keeps a selected guide in the URL and restores it on navigation", async () => {
-    window.history.replaceState(
-      {},
-      "",
-      "/settings/mcp?guide=grok&section=access",
+  it("starts with a client list, a useful outcome, and no configuration form", async () => {
+    await render();
+    expect(container.textContent).toContain(
+      "Use Claude, ChatGPT, or another AI app to read and update data in Content.",
     );
-
-    await act(async () => {
-      root.render(
-        <AgentNativeI18nProvider
-          initialLocale="en-US"
-          initialPreference="en-US"
-          persistPreference={false}
-        >
-          <McpAccessSettings appName="Content" />
-        </AgentNativeI18nProvider>,
-      );
+    for (const name of [
+      "Claude",
+      "ChatGPT",
+      "Cursor",
+      "VS Code",
+      "Claude Code",
+      "Codex CLI",
+      "Grok",
+      "Other",
+    ])
+      expect(link(name)).toBeDefined();
+    expect(container.querySelector("[role=combobox]")).toBeNull();
+    expect(container.textContent).not.toContain("MCP server URL");
+    expect(container.textContent).not.toContain("Generate a static token");
+    expect(container.querySelectorAll("img")).toHaveLength(7);
+    expect(link("Cursor")?.querySelector("img")?.getAttribute("src")).toMatch(
+      /^data:image\/png;base64,/,
+    );
+    expect(link("Grok")?.querySelector("img")?.getAttribute("src")).toMatch(
+      /^data:image\/svg\+xml;base64,/,
+    );
+  });
+  it("opens the chosen client while preserving unrelated query parameters", async () => {
+    window.history.replaceState({}, "", "/settings/mcp?section=access");
+    await render();
+    await open("Cursor");
+    expect(window.location.search).toContain("guide=cursor");
+    expect(window.location.search).toContain("section=access");
+    const install = link("Add to Cursor");
+    expect(install?.target).toBe("_blank");
+    const url = new URL(install?.href ?? "");
+    expect(url.origin + url.pathname).toBe("https://cursor.com/install-mcp");
+    expect(url.searchParams.get("name")).toBe(IDENTITY.serverName);
+    expect(JSON.parse(atob(url.searchParams.get("config") ?? ""))).toEqual({
+      url: IDENTITY.mcpUrl,
     });
-    await waitForGuides(container);
-
-    await act(async () => {
-      selectTab(
-        container.querySelector<HTMLButtonElement>("#mcp-guide-tab-cursor"),
-      );
+    expect(container.textContent).not.toContain(IDENTITY.mcpUrl);
+    expect(container.textContent).not.toContain("mcp.json");
+    await act(async () =>
+      [...container.querySelectorAll("button")]
+        .find((item) => item.textContent === "Manual setup")
+        ?.click(),
+    );
+    expect(container.textContent).toContain(IDENTITY.mcpUrl);
+    expect(container.textContent).toContain("mcp.json");
+    expect(container.textContent).toContain("approve the MCP scopes");
+  });
+  it("exposes real hrefs and preserves modified clicks", async () => {
+    const select = vi.fn();
+    await render({
+      guideId: null,
+      onSelectGuide: select,
+      guideHref: (id) => `/settings/mcp/${id}`,
     });
-    expect(new URLSearchParams(window.location.search).get("guide")).toBe(
-      "cursor",
+    const cursor = link("Cursor");
+    expect(cursor?.getAttribute("href")).toBe("/settings/mcp/cursor");
+    await act(async () =>
+      cursor?.dispatchEvent(
+        new MouseEvent("click", {
+          bubbles: true,
+          cancelable: true,
+          ctrlKey: true,
+        }),
+      ),
     );
-    expect(new URLSearchParams(window.location.search).get("section")).toBe(
-      "access",
+    expect(select).not.toHaveBeenCalled();
+    await act(async () =>
+      cursor?.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true }),
+      ),
     );
-
+    expect(select).toHaveBeenCalledWith("cursor");
+  });
+  it("restores the chosen client on browser navigation", async () => {
+    await render();
+    await open("Cursor");
     await act(async () => {
+      window.history.replaceState({}, "", "/settings/mcp?guide=grok");
       window.dispatchEvent(new PopStateEvent("popstate"));
     });
-    expect(
-      container
-        .querySelector("#mcp-guide-tab-cursor")
-        ?.getAttribute("aria-selected"),
-    ).toBe("true");
-  });
-
-  it("names the server and builds install links from the app's connect identity", async () => {
-    window.history.replaceState({}, "", "/settings/mcp?guide=claude-code");
-
+    expect(container.textContent).toContain("grok.com/connectors");
+    expect(link("Add to Cursor")).toBeUndefined();
     await act(async () => {
-      root.render(
-        <AgentNativeI18nProvider
-          initialLocale="en-US"
-          initialPreference="en-US"
-          persistPreference={false}
-        >
-          <McpAccessSettings appName="Content" />
-        </AgentNativeI18nProvider>,
-      );
+      window.history.replaceState({}, "", "/settings/mcp");
+      window.dispatchEvent(new PopStateEvent("popstate"));
     });
-    await waitForGuides(container);
-
+    expect(link("Codex CLI")).toBeDefined();
+    expect(container.textContent).not.toContain("MCP server URL");
+  });
+  it("honors a direct CLI handoff and uses the server identity in the command", async () => {
+    window.history.replaceState({}, "", "/settings/mcp?guide=codex");
+    await render();
     expect(container.textContent).toContain(
-      "claude mcp add --transport http beta-agent-native-content https://beta.content.agent-native.com/mcp",
-    );
-
-    await act(async () => {
-      selectTab(
-        container.querySelector<HTMLButtonElement>("#mcp-guide-tab-cursor"),
-      );
-    });
-    const cursorLink = Array.from(container.querySelectorAll("a")).find(
-      (link) => link.textContent?.includes("Add to Cursor"),
-    );
-    const cursorHref = new URL(cursorLink?.getAttribute("href") ?? "");
-    expect(cursorHref.origin + cursorHref.pathname).toBe(
-      "https://cursor.com/install-mcp",
+      `codex mcp add ${IDENTITY.serverName} --url ${IDENTITY.mcpUrl}`,
     );
-    expect(cursorHref.searchParams.get("name")).toBe(
-      "beta-agent-native-content",
+    expect(container.textContent).toContain(
+      `codex mcp login ${IDENTITY.serverName}`,
     );
-    expect(
-      JSON.parse(atob(cursorHref.searchParams.get("config") ?? "")),
-    ).toEqual({ url: "https://beta.content.agent-native.com/mcp" });
-    expect(cursorLink?.getAttribute("target")).toBe("_blank");
-
-    await act(async () => {
-      selectTab(
-        container.querySelector<HTMLButtonElement>("#mcp-guide-tab-vscode"),
-      );
+    expect(container.querySelector("h1")).toBeNull();
+    expect(container.textContent).not.toContain("Try it in Codex.");
+  });
+  it("opens the web client from its setup stage and copies the URL separately with failure feedback", async () => {
+    const write = vi
+      .spyOn(navigator.clipboard, "writeText")
+      .mockRejectedValueOnce(new Error("denied"))
+      .mockResolvedValue(undefined);
+    await render({ guideId: "chatgpt" });
+    const action = link("Open ChatGPT");
+    expect(action?.href).toBe("https://chatgpt.com/plugins");
+    expect(action?.target).toBe("_blank");
+    const copy = queryByRole<HTMLButtonElement>(container, "button", {
+      name: "Copy URL",
+      exact: true,
     });
-    const vscodeHrefs = Array.from(container.querySelectorAll("a"))
-      .filter((link) => link.textContent?.startsWith("Add to VS Code"))
-      .map((link) => ({
-        href: link.getAttribute("href") ?? "",
-        target: link.getAttribute("target"),
-      }));
-    expect(vscodeHrefs.map(({ href }) => href.split("?")[0])).toEqual([
-      "vscode:mcp/install",
-      "vscode-insiders:mcp/install",
-    ]);
-    expect(vscodeHrefs.every(({ target }) => target === null)).toBe(true);
+    expect(copy).not.toBeNull();
+    await act(async () => copy?.click());
+    expect(write).toHaveBeenCalledWith(IDENTITY.mcpUrl);
+    expect(container.textContent).toContain("Copy failed");
+    await act(async () => copy?.click());
+    expect(container.textContent).not.toContain("Copy failed");
+    expect(
+      [...container.querySelectorAll("[role=status]")].some(
+        (item) => item.textContent === "Copied",
+      ),
+    ).toBe(true);
+  });
+  it("places the install action in the opening setup stage", async () => {
+    await render({ guideId: "cursor" });
+    const install = link("Add to Cursor");
+    expect(install?.closest("li")?.textContent).toContain("Add the MCP server");
+    expect(
+      container.querySelectorAll('a[href^="https://cursor.com/install-mcp"]'),
+    ).toHaveLength(1);
     expect(
-      JSON.parse(decodeURIComponent(vscodeHrefs[0].href.split("?")[1])),
-    ).toEqual({
-      name: "beta-agent-native-content",
+      queryByRole<HTMLButtonElement>(container, "button", {
+        name: "Copy prompt",
+        exact: true,
+      })?.disabled,
+    ).toBe(false);
+  });
+  it("localizes the client list and detail controls", async () => {
+    await render({}, "es-ES");
+    await vi.waitFor(() =>
+      expect(container.textContent).toContain(
+        "leer y actualizar datos en Content",
+      ),
+    );
+    await open("Claude");
+    expect(container.textContent).toContain("herramientas de Agent-Native");
+    expect(container.textContent).toContain("URL del servidor");
+    expect(container.textContent).toContain(
+      "En Claude, ve a Customize → Connectors.",
+    );
+    expect(container.textContent).not.toContain("MCP server URL");
+  });
+  it("keeps the VS Code installation transport and environment-specific server name", async () => {
+    await render({ guideId: "vscode" });
+    const url = link("Add to VS Code")?.getAttribute("href") ?? "";
+    expect(url.startsWith("vscode:mcp/install?")).toBe(true);
+    expect(link("Add to VS Code")?.target).toBe("");
+    expect(JSON.parse(decodeURIComponent(url.split("?")[1]))).toEqual({
+      name: IDENTITY.serverName,
       type: "http",
-      url: "https://beta.content.agent-native.com/mcp",
+      url: IDENTITY.mcpUrl,
     });
   });
-
-  it("shows only the MCP URL when the server has no connect routes", async () => {
-    stubFetch({ ok: true, body: { ...IDENTITY, connect: false } });
-    window.history.replaceState({}, "", "/settings/mcp?guide=cursor");
-
-    await act(async () => {
-      root.render(
-        <AgentNativeI18nProvider
-          initialLocale="en-US"
-          initialPreference="en-US"
-          persistPreference={false}
-        >
-          <McpAccessSettings appName="Content" />
-        </AgentNativeI18nProvider>,
-      );
-    });
-    await vi.waitFor(() =>
-      expect(container.textContent).toContain(IDENTITY.mcpUrl),
+  it("keeps manual JSON readable and token fallback behind advanced disclosure", async () => {
+    await render({ guideId: "other" });
+    expect(container.querySelector("pre")?.textContent).toContain(
+      '"mcpServers"',
     );
-
-    expect(container.querySelector("#mcp-guide-tab-claude")).toBeNull();
-    expect(
-      Array.from(container.querySelectorAll("a")).filter(
-        (link) =>
-          link.textContent?.includes("Add to Cursor") ||
-          link.getAttribute("href")?.includes("/mcp/connect"),
-      ),
-    ).toEqual([]);
+    expect(container.textContent).not.toContain("Generate a static token");
+    await act(async () =>
+      [...container.querySelectorAll("button")]
+        .find((item) => item.textContent === "Advanced options")
+        ?.click(),
+    );
+    const target = link("Open full connect page")?.getAttribute("href");
+    expect(target).toContain("guide=other");
+    expect(target).toContain("locale=en-US");
+    expect(container.textContent).toContain("Generate a static token");
   });
-
-  it("shows a retryable error instead of guessing a server name when the identity fails", async () => {
-    stubFetch({ ok: false });
-
-    await act(async () => {
-      root.render(
-        <AgentNativeI18nProvider
-          initialLocale="en-US"
-          initialPreference="en-US"
-          persistPreference={false}
-        >
-          <McpAccessSettings appName="Content" />
-        </AgentNativeI18nProvider>,
-      );
+  it("does not offer setup routes when OAuth and token routes are unavailable", async () => {
+    stubFetch({ ...IDENTITY, connect: false });
+    await render();
+    const field = queryByRole<HTMLInputElement>(container, "textbox", {
+      name: "MCP server URL",
+      exact: true,
     });
-
-    await vi.waitFor(() =>
-      expect(container.querySelector('[role="alert"]')?.textContent).toContain(
-        "Couldn't load this app's connection details.",
-      ),
+    expect(field?.value).toBe(IDENTITY.mcpUrl);
+    expect(field?.readOnly).toBe(true);
+    expect(link("Claude")).toBeUndefined();
+    expect(link("Open full connect page")).toBeUndefined();
+  });
+  it("offers retry after a failed identity read without guessing the server URL", async () => {
+    stubFetch(undefined, false);
+    await render();
+    expect(container.querySelector("[role=alert]")?.textContent).toContain(
+      "Couldn't load this app's connection details.",
     );
-    expect(container.querySelector("#mcp-guide-tab-claude")).toBeNull();
-
-    const fetchMock = stubFetch({ ok: true, body: IDENTITY });
-    const retry = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent === "Try again",
+    expect(container.textContent).not.toContain(IDENTITY.mcpUrl);
+    const fetch = stubFetch();
+    await act(async () =>
+      [...container.querySelectorAll("button")]
+        .find((item) => item.textContent === "Try again")
+        ?.click(),
     );
-    await act(async () => retry?.click());
-    await waitForGuides(container);
-    expect(fetchMock).toHaveBeenCalled();
-    expect(container.textContent).toContain(
-      "https://beta.content.agent-native.com/mcp",
+    await vi.waitFor(() => expect(link("Claude")).toBeDefined());
+    expect(fetch).toHaveBeenCalled();
+  });
+  it("announces new tabs and desktop launches without adding navigation arrows to copy actions", async () => {
+    await render({ guideId: "vscode" });
+    const install = link("Add to VS Code");
+    expect(install?.target).toBe("");
+    expect(
+      document.getElementById(install?.getAttribute("aria-describedby") ?? "")
+        ?.textContent,
+    ).toBe("Opens the desktop app");
+    expect(
+      install?.querySelector(".tabler-icon-device-desktop"),
+    ).not.toBeNull();
+    expect(install?.querySelector(".tabler-icon-external-link")).toBeNull();
+
+    const docs = link("Setup guide");
+    expect(docs?.target).toBe("_blank");
+    expect(
+      document.getElementById(docs?.getAttribute("aria-describedby") ?? "")
+        ?.textContent,
+    ).toBe("Opens in a new tab");
+    expect(docs?.querySelector(".tabler-icon-external-link")).not.toBeNull();
+
+    await act(async () =>
+      [...container.querySelectorAll("button")]
+        .find((button) => button.textContent === "Manual setup")
+        ?.click(),
     );
+    const insiders = link("Add to VS Code Insiders");
+    expect(insiders?.target).toBe("");
+    expect(
+      document.getElementById(insiders?.getAttribute("aria-describedby") ?? "")
+        ?.textContent,
+    ).toBe("Opens the desktop app");
+
+    await render({ guideId: "cursor" });
+    const cursor = link("Add to Cursor");
+    expect(cursor?.target).toBe("_blank");
+    expect(
+      document.getElementById(cursor?.getAttribute("aria-describedby") ?? "")
+        ?.textContent,
+    ).toBe("Opens in a new tab");
+    expect(cursor?.querySelector(".tabler-icon-external-link")).not.toBeNull();
+
+    await render({ guideId: "codex" });
+    const copy = queryByRole(container, "button", {
+      name: "Copy command",
+      exact: true,
+    });
+    expect(copy).not.toBeNull();
+    expect(copy?.querySelector("svg")).toBeNull();
+    expect(copy?.hasAttribute("aria-describedby")).toBe(false);
   });
 
-  it("renders the default guide without a browser during SSR", () => {
+  it("renders an impersonal loading shell without a browser", () => {
     const browserWindow = window;
-    vi.stubGlobal("window", undefined);
-
     try {
+      vi.stubGlobal("window", undefined);
       expect(() =>
         renderToString(
           <AgentNativeI18nProvider
             initialLocale="en-US"
-            initialPreference="en-US"
             persistPreference={false}
           >
-            <McpAccessSettings appName="Content" />
+            <McpAccessSettings />
           </AgentNativeI18nProvider>,
         ),
       ).not.toThrow();