tools.spec.ts

import type { Locator, Page } from "@playwright/test";
import { test, expect, MOCK_CSRF_TOKEN } from "./fixtures/api-mock";
import { APP } from "./utils/paths";
import type { Tool } from "../src/types/tool";

/** Payload the create form POSTs to `/tools` (see useToolForm.getFormData). */
interface CreateToolPayload {
  tool: Record<string, unknown>;
  team_id?: string;
}

/** Flat payload the edit form PUTs to `/tools/{id}` (see useToolForm.handleSubmit). */
interface UpdateToolPayload {
  name?: string;
  url?: string;
  customName?: string;
  [key: string]: unknown;
}

interface JsonRpcRequest {
  jsonrpc?: string;
  id?: string | number | null;
  method?: string;
  params?: Record<string, unknown>;
}

/** Stub the tools list endpoint (`/tools?limit=0&include_inactive=true`). */
async function routeToolsList(page: Page, tools: Tool[]) {
  await page.route("**/tools?*", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify(tools),
    });
  });
}

async function showDefinitionTab(panel: Locator) {
  await panel.getByRole("tab", { name: "Definition" }).click();
}

async function openAddToolForm(page: Page) {
  await page.getByText("Add tools").click();
  await expect(page.getByRole("heading", { name: "Add tool" })).toBeVisible();
}

async function fillToolBasics(page: Page, name: string, url: string) {
  await page.locator("#tool-name").fill(name);
  await page.locator("#tool-url").fill(url);
}

async function openToolDetails(page: Page, gatewaySlug: string) {
  await page.getByRole("button", { name: `More options for ${gatewaySlug}` }).click();
  await page.getByRole("menuitem", { name: "View details" }).click();

  const panel = page.getByRole("region", { name: new RegExp(`Tools for ${gatewaySlug}`, "i") });
  await expect(panel).toBeVisible();
  return panel;
}

function makeTool(id: string, gatewaySlug: string, overrides: Partial<Tool> = {}): Tool {
  return {
    id,
    name: id,
    originalName: id,
    description: `Description for ${id}`,
    originalDescription: `Original description for ${id}`,
    title: `${id} Title`,
    gatewayId: `gw-${gatewaySlug}`,
    gatewaySlug,
    customName: id,
    customNameSlug: id.toLowerCase(),
    enabled: true,
    reachable: true,
    deprecated: false,
    executionCount: 0,
    tags: [],
    integrationType: "mcp",
    requestType: "http",
    url: `https://example.com/${id}`,
    headers: {},
    inputSchema: { type: "object", properties: {} },
    annotations: {},
    jsonpathFilter: null,
    auth: null,
    createdAt: "2026-04-10T10:00:00Z",
    updatedAt: "2026-04-10T10:00:00Z",
    ...overrides,
  };
}

const TOOL_A1 = makeTool("get_issues", "github-server");
const TOOL_A2 = makeTool("create_issue", "github-server");
const TOOL_B1 = makeTool("send_message", "slack-server");

test.describe("Tools page", () => {
  test.beforeEach(async ({ page, apiMock }) => {
    await apiMock.mockSession();
    await apiMock.mockPermissions();

    await page.addInitScript(() => {
      sessionStorage.setItem("mcpgateway_token", "mock-token-12345");
    });
  });

  test("shows Add tools card when no tools exist", async ({ page }) => {
    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([]),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await expect(page.getByText("Add tools")).toBeVisible();
    await expect(
      page.getByText(/Tools will appear automatically when you connect a MCP server/i),
    ).toBeVisible();
  });

  test("hides Add tools card when the caller lacks tools.create", async ({ page, apiMock }) => {
    await apiMock.mockPermissions({ permissions: ["tools.read"] });
    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([]),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await expect(page.getByRole("heading", { name: "Tools" })).toBeVisible();
    await expect(page.getByText("Add tools")).not.toBeVisible();
  });

  test("Add tools card opens the tool form", async ({ page }) => {
    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([]),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    // Click the Add tools card
    await page.getByText("Add tools").click();

    await expect(page.getByRole("heading", { name: "Add tool" })).toBeVisible();
  });

  test("shows tools grouped by gateway slug", async ({ page }) => {
    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([TOOL_A1, TOOL_A2, TOOL_B1]),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await expect(page.getByRole("heading", { name: "Tools" })).toBeVisible();

    await expect(page.getByText("github-server")).toBeVisible();
    await expect(page.getByText("slack-server")).toBeVisible();

    await expect(page.getByText("get_issues")).toBeVisible();
    await expect(page.getByText("create_issue")).toBeVisible();
    await expect(page.getByText("send_message")).toBeVisible();

    await expect(page.getByText("2 tools")).toBeVisible();
    await expect(page.getByText("1 tool")).toBeVisible();
  });

  test("shows error alert when tools API fails", async ({ page }) => {
    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 500,
        contentType: "application/json",
        body: JSON.stringify({ detail: "Internal server error" }),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await expect(page.getByRole("alert")).toBeVisible();
    await expect(page.getByText("Error loading tools")).toBeVisible();
  });

  test("caps badge display at 8 and shows +N overflow tag", async ({ page }) => {
    const manyTools: Tool[] = Array.from({ length: 10 }, (_, i) =>
      makeTool(`tool_${i + 1}`, "big-gateway"),
    );

    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify(manyTools),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await expect(page.getByText("big-gateway")).toBeVisible();
    await expect(page.getByText("10 tools")).toBeVisible();

    await expect(page.getByText("tool_1")).toBeVisible();
    await expect(page.getByText("tool_8")).toBeVisible();

    await expect(page.getByText("tool_9")).not.toBeVisible();
    await expect(page.getByText("tool_10")).not.toBeVisible();
    await expect(page.getByText("+2")).toBeVisible();
  });

  test("truncates a long gateway name and keeps the overflow menu visible", async ({ page }) => {
    // A gateway slug long enough to overflow the card at the default viewport.
    const longSlug =
      "openzeppelin-stylus-contracts-enterprise-edition-extended-long-server-name-instance";
    const tools: Tool[] = [makeTool("stylus_erc20", longSlug), makeTool("stylus_erc721", longSlug)];

    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify(tools),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    // The kebab menu for the long-named group must stay visible.
    const kebab = page.getByRole("button", { name: `More options for ${longSlug}` });
    await expect(kebab).toBeVisible();

    const card = page.locator('[data-slot="card"]').filter({ has: kebab });
    const title = card.locator('[data-slot="card-header"] span.truncate').first();

    // The title is actually clipped (its content is wider than the box) and
    // carries a native tooltip so the full name stays discoverable on hover.
    const isTruncated = await title.evaluate((el) => el.scrollWidth > el.clientWidth);
    expect(isTruncated).toBe(true);
    await expect(title).toHaveAttribute("title", longSlug);

    // The kebab is not pushed past the card's right edge (it was clipped before).
    const cardBox = await card.boundingBox();
    const kebabBox = await kebab.boundingBox();
    expect(cardBox).not.toBeNull();
    expect(kebabBox).not.toBeNull();
    expect(kebabBox!.x + kebabBox!.width).toBeLessThanOrEqual(cardBox!.x + cardBox!.width + 1);

    // And it remains functional.
    await kebab.click();
    await expect(page.getByRole("menuitem", { name: "View details" })).toBeVisible();
  });

  test("opens more options dropdown and shows View Details item", async ({ page }) => {
    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([TOOL_A1]),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for github-server" }).click();

    await expect(page.getByRole("menuitem", { name: "View details" })).toBeVisible();
  });

  test("opens details panel when View Details is clicked", async ({ page }) => {
    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([TOOL_A1, TOOL_A2]),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for github-server" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for github-server/i });
    await expect(panel).toBeVisible();

    await expect(panel.getByText("get_issues").first()).toBeVisible();
    await expect(panel.getByText("create_issue").first()).toBeVisible();
  });

  test("previews a tool with schema arguments and allowed passthrough headers", async ({
    page,
  }) => {
    const previewTool = makeTool("search_issues", "github-server", {
      description: "Search repository issues",
      inputSchema: {
        type: "object",
        required: ["query"],
        properties: {
          query: { type: "string", description: "Search query" },
          limit: { type: "integer" },
        },
      },
      annotations: { readOnlyHint: true },
    });
    let previewBody: unknown = null;
    let previewHeaders: Record<string, string> = {};

    await routeToolsList(page, [previewTool]);
    await page.route("**/v1/tools/preview/search_issues", async (route) => {
      previewBody = route.request().postDataJSON();
      previewHeaders = route.request().headers();
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({
          validated: true,
          target: { kind: "local" },
          resolvedArguments: { query: "cloudflare", limit: 5 },
          annotations: { readOnlyHint: true },
          preHooksRun: [],
          warnings: [
            {
              code: "elicitation_skipped",
              hook: "approval_hook",
              message:
                "Approval hook skipped during preview; live invocation may prompt for input.",
            },
          ],
        }),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for github-server" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for github-server/i });
    await expect(panel.getByRole("heading", { name: "Tools", exact: true })).toBeVisible();
    // Read-only/destructive annotation badges aren't part of the design here
    // (they stay in use to gate live invocation, just not shown as badges).
    await expect(panel.getByText("Read-only")).not.toBeVisible();

    const previewButton = panel.getByRole("button", { name: "Preview" });
    await expect(previewButton).toBeEnabled();
    await previewButton.click();
    await expect(panel.getByLabel("query")).toHaveAttribute("aria-invalid", "true");
    await expect(panel.getByText("Required")).toBeVisible();
    expect(previewBody).toBeNull();

    await panel.getByLabel("query").fill("cloudflare");
    await panel.getByLabel("limit").fill("5");
    await panel.getByRole("button", { name: "Add header" }).click();
    await panel.getByLabel("Header 1 name").fill("X-Tenant-Id");
    await panel.getByLabel("Header 1 value").fill("team-a");
    await expect(previewButton).toBeEnabled();
    await previewButton.click();

    await expect(panel.getByText("Preview 200")).toBeVisible();
    await expect(panel.getByText("Warnings", { exact: true }).first()).toBeVisible();
    await expect(
      panel
        .getByText("Approval hook skipped during preview; live invocation may prompt for input.")
        .first(),
    ).toBeVisible();
    await expect(panel.getByText("Resolved arguments")).toHaveCount(0);
    await expect(panel.getByLabel("Copy raw preview response")).toBeVisible();
    await expect(panel.locator("pre").filter({ hasText: "resolvedArguments" })).toContainText(
      "cloudflare",
    );
    expect(previewBody).toEqual({ arguments: { query: "cloudflare", limit: 5 } });
    expect(previewHeaders["x-tenant-id"]).toBe("team-a");
  });

  test("live invokes a read-only tool with JSON-RPC args and passthrough headers", async ({
    page,
    apiMock,
  }) => {
    const liveTool = makeTool("search_issues", "github-server", {
      description: "Search repository issues",
      inputSchema: {
        type: "object",
        required: ["query"],
        properties: {
          query: { type: "string", description: "Search query" },
          limit: { type: "integer" },
        },
      },
      annotations: { readOnlyHint: true },
    });
    let rpcBody: JsonRpcRequest | null = null;
    let rpcHeaders: Record<string, string> = {};

    await routeToolsList(page, [liveTool]);
    await page.route("**/api/rpc", async (route) => {
      rpcBody = route.request().postDataJSON() as JsonRpcRequest;
      rpcHeaders = route.request().headers();
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({
          jsonrpc: "2.0",
          id: rpcBody.id ?? "invoke-1",
          result: {
            content: [{ type: "text", text: "Live result from gateway", mimeType: "text/plain" }],
            structured_output: { total: 1 },
          },
        }),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");
    const panel = await openToolDetails(page, "github-server");

    await expect(panel.getByText("MCP version 2025-11-25")).toBeVisible();
    await panel.getByRole("switch", { name: "Live invocation" }).click();
    const invokeButton = panel.getByRole("button", { name: "Invoke tool" });
    await expect(invokeButton).toBeEnabled();
    await invokeButton.click();
    await expect(panel.getByLabel("query")).toHaveAttribute("aria-invalid", "true");
    await expect(panel.getByText("Required")).toBeVisible();
    expect(rpcBody).toBeNull();

    await panel.getByLabel("query").fill("cloudflare");
    await panel.getByLabel("limit").fill("5");
    await panel.getByRole("button", { name: "Add header" }).click();
    await panel.getByLabel("Header 1 name").fill("X-Tenant-Id");
    await panel.getByLabel("Header 1 value").fill("team-a");

    await invokeButton.click();

    await expect(panel.getByText("Live invoke 200")).toBeVisible();
    await expect(panel.getByText("Live result from gateway").first()).toBeVisible();
    await expect(panel.getByText("Structured output")).toBeVisible();
    expect(rpcBody).toMatchObject({
      jsonrpc: "2.0",
      method: "tools/call",
      params: {
        name: "search_issues",
        arguments: { query: "cloudflare", limit: 5 },
      },
    });
    expect(rpcBody).not.toHaveProperty("params.server_id");
    expect(rpcHeaders["x-tenant-id"]).toBe("team-a");
    // Real mode gets a real, randomly-generated token from the real login.
    expect(rpcHeaders["x-csrf-token"]).toBe((await apiMock.getRealCsrfToken()) ?? MOCK_CSRF_TOKEN);
  });

  test("confirms destructive local live invoke before calling /rpc", async ({ page }) => {
    const destructiveTool = makeTool("delete_issue", "local-gateway", {
      gatewayId: null,
      annotations: { destructiveHint: true },
      inputSchema: { type: "object", properties: {} },
    });
    let rpcRequestCount = 0;

    await routeToolsList(page, [destructiveTool]);
    await page.route("**/api/rpc", async (route) => {
      rpcRequestCount += 1;
      const body = route.request().postDataJSON() as JsonRpcRequest;
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({
          jsonrpc: "2.0",
          id: body.id ?? "invoke-1",
          result: { content: [{ type: "text", text: "Deleted", mimeType: "text/plain" }] },
        }),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");
    const panel = await openToolDetails(page, "local-gateway");
    await panel.getByRole("switch", { name: "Live invocation" }).click();

    await panel.getByRole("button", { name: "Invoke tool" }).click();
    const dialog = page.getByRole("alertdialog", { name: "Invoke destructive tool" });
    await expect(dialog).toBeVisible();
    await dialog.getByRole("button", { name: "Cancel" }).click();
    await expect(dialog).not.toBeVisible();
    expect(rpcRequestCount).toBe(0);

    await panel.getByRole("button", { name: "Invoke tool" }).click();
    await page
      .getByRole("alertdialog", { name: "Invoke destructive tool" })
      .getByRole("button", { name: "Invoke tool" })
      .click();

    await expect.poll(() => rpcRequestCount).toBe(1);
    await expect(panel.getByText("Live invoke 200")).toBeVisible();
    await expect(panel.getByText("Deleted").first()).toBeVisible();
  });

  test("sends MCP cancellation when cancelling live invoke", async ({ page }) => {
    const slowTool = makeTool("slow_search", "github-server", {
      annotations: { readOnlyHint: true },
      inputSchema: { type: "object", properties: {} },
    });
    const rpcBodies: JsonRpcRequest[] = [];
    let releaseInvoke: (() => void) | undefined;
    const releaseInvokePromise = new Promise<void>((resolve) => {
      releaseInvoke = resolve;
    });

    await routeToolsList(page, [slowTool]);
    await page.route("**/api/rpc", async (route) => {
      const body = route.request().postDataJSON() as JsonRpcRequest;
      rpcBodies.push(body);

      if (body.method === "notifications/cancelled") {
        releaseInvoke?.();
        await route.fulfill({
          status: 200,
          contentType: "application/json",
          body: JSON.stringify({ jsonrpc: "2.0", id: body.id ?? "cancel-1", result: {} }),
        });
        return;
      }

      await releaseInvokePromise;
      try {
        await route.fulfill({
          status: 200,
          contentType: "application/json",
          body: JSON.stringify({
            jsonrpc: "2.0",
            id: body.id ?? "invoke-1",
            result: { content: [{ type: "text", text: "Finished", mimeType: "text/plain" }] },
          }),
        });
      } catch {
        // The browser request is expected to be aborted after cancellation.
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");
    const panel = await openToolDetails(page, "github-server");
    await panel.getByRole("switch", { name: "Live invocation" }).click();

    await panel.getByRole("button", { name: "Invoke tool" }).click();
    await expect(panel.getByRole("button", { name: "Cancel request" })).not.toBeVisible();
    await expect(panel.getByRole("button", { name: "Cancel request" })).toBeVisible();
    await panel.getByRole("button", { name: "Cancel request" }).click();

    await expect
      .poll(() => rpcBodies.some((body) => body.method === "notifications/cancelled"))
      .toBe(true);
    const invokeBody = rpcBodies.find((body) => body.method === "tools/call");
    const cancelBody = rpcBodies.find((body) => body.method === "notifications/cancelled");

    expect(invokeBody?.id).toEqual(expect.stringMatching(/^tool-live-/));
    expect(cancelBody).toMatchObject({
      jsonrpc: "2.0",
      method: "notifications/cancelled",
      params: {
        requestId: String(invokeBody?.id),
        reason: "user",
      },
    });
  });

  test("hides live invoke when tools.execute is missing", async ({ page, apiMock }) => {
    await apiMock.mockPermissions({ permissions: ["tools.read", "servers.use"] });
    const liveTool = makeTool("search_issues", "github-server", {
      annotations: { readOnlyHint: true },
      inputSchema: { type: "object", properties: {} },
    });

    await routeToolsList(page, [liveTool]);
    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");
    const panel = await openToolDetails(page, "github-server");

    await expect(panel.getByRole("button", { name: "Preview", exact: true })).toBeVisible();
    await expect(panel.getByRole("switch", { name: "Live invocation" })).toHaveCount(0);
    await expect(panel.getByText("Live invocation", { exact: true })).toHaveCount(0);
  });

  test("hides live invoke when servers.use is missing", async ({ page, apiMock }) => {
    await apiMock.mockPermissions({ permissions: ["tools.read", "tools.execute"] });
    const liveTool = makeTool("search_issues", "github-server", {
      annotations: { readOnlyHint: true },
      inputSchema: { type: "object", properties: {} },
    });

    await routeToolsList(page, [liveTool]);
    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");
    const panel = await openToolDetails(page, "github-server");

    await expect(panel.getByRole("button", { name: "Preview", exact: true })).toBeVisible();
    await expect(panel.getByRole("switch", { name: "Live invocation" })).toHaveCount(0);
    await expect(panel.getByText("Live invocation", { exact: true })).toHaveCount(0);
  });

  test("does not offer live invoke for federated tools without readOnlyHint", async ({ page }) => {
    const federatedTool = makeTool("create_issue", "github-server", {
      annotations: { destructiveHint: true },
      inputSchema: { type: "object", properties: {} },
    });

    await routeToolsList(page, [federatedTool]);
    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");
    const panel = await openToolDetails(page, "github-server");

    await expect(
      panel.getByText("Live invoke is not offered for federated tools without readOnlyHint."),
    ).toBeVisible();
    await expect(panel.getByRole("switch", { name: "Live invocation" })).toBeDisabled();
    await expect(panel.getByRole("button", { name: "Preview", exact: true })).toBeEnabled();
  });

  test("warns for denied passthrough headers and excludes them from preview", async ({ page }) => {
    const previewTool = makeTool("search_issues", "github-server", {
      inputSchema: {
        type: "object",
        required: ["query"],
        properties: { query: { type: "string" } },
      },
    });
    let previewHeaders: Record<string, string> = {};

    await routeToolsList(page, [previewTool]);
    await page.route("**/v1/tools/preview/search_issues", async (route) => {
      previewHeaders = route.request().headers();
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({
          validated: true,
          target: { kind: "local" },
          resolvedArguments: { query: "cloudflare" },
          annotations: {},
        }),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for github-server" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for github-server/i });
    await panel.getByLabel("query").fill("cloudflare");
    await panel.getByRole("button", { name: "Add header" }).click();
    await panel.getByLabel("Header 1 name").fill("Authorization");
    await panel.getByLabel("Header 1 value").fill("Bearer typed-token");

    await expect(panel.getByText("This header is not forwardable from the web UI.")).toBeVisible();
    await expect(panel.getByRole("button", { name: "Preview", exact: true })).toBeDisabled();

    await panel.getByLabel("Header 1 name").fill("X-Api-Key");
    await panel.getByRole("button", { name: "Preview", exact: true }).click();

    await expect(panel.getByText("Preview 200")).toBeVisible();
    expect(previewHeaders.authorization).toBeUndefined();
    expect(previewHeaders["x-api-key"]).toBe("Bearer typed-token");
  });

  test("closes details panel via close button", async ({ page }) => {
    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([TOOL_A1]),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for github-server" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for github-server/i });
    await expect(panel).toBeVisible();

    await page.getByLabel("Close tool details").click();

    await expect(panel).not.toBeVisible();
  });

  test("optimistically removes tool on delete confirmation and shows success toast", async ({
    page,
  }) => {
    let deleteRequestCount = 0;

    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([TOOL_A1, TOOL_A2]),
      });
    });
    await page.route(`**/tools/${TOOL_A1.id}`, async (route) => {
      if (route.request().method() === "DELETE") {
        deleteRequestCount += 1;
        await route.fulfill({ status: 204 });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for github-server" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for github-server/i });
    await expect(panel).toBeVisible();

    await expect(panel.getByText("get_issues").first()).toBeVisible();
    await showDefinitionTab(panel);

    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Delete" }).click();

    const dialog = page.getByRole("dialog", { name: "Delete tool" });
    await expect(dialog).toBeVisible();
    await expect(dialog.getByText(/Are you sure you want to delete "get_issues"/i)).toBeVisible();

    await dialog.getByRole("button", { name: "Delete" }).click();

    await expect.poll(() => deleteRequestCount).toBe(1);
    await expect(
      page.locator("[data-sonner-toast]").filter({ hasText: /Tool.*get_issues.*deleted/i }),
    ).toBeVisible();
  });

  test("rolls back optimistic delete and shows error toast when delete API fails", async ({
    page,
  }) => {
    let deleteRequestCount = 0;

    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([TOOL_A1, TOOL_A2]),
      });
    });
    await page.route(`**/tools/${TOOL_A1.id}`, async (route) => {
      if (route.request().method() === "DELETE") {
        deleteRequestCount += 1;
        await route.fulfill({
          status: 403,
          contentType: "application/json",
          body: JSON.stringify({ detail: "Forbidden" }),
        });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for github-server" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for github-server/i });
    await expect(panel).toBeVisible();
    await showDefinitionTab(panel);

    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Delete" }).click();

    const dialog = page.getByRole("dialog", { name: "Delete tool" });
    await dialog.getByRole("button", { name: "Delete" }).click();

    await expect.poll(() => deleteRequestCount).toBe(1);

    await expect(
      page.locator("[data-sonner-toast]").filter({ hasText: /Forbidden/i }),
    ).toBeVisible();

    await expect(panel.getByText("get_issues").first()).toBeVisible();
  });

  test("cancels delete dialog and keeps tool in details panel", async ({ page }) => {
    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([TOOL_A1, TOOL_A2]),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for github-server" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for github-server/i });
    await showDefinitionTab(panel);
    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Delete" }).click();

    const dialog = page.getByRole("dialog", { name: "Delete tool" });
    await expect(dialog).toBeVisible();

    await dialog.getByRole("button", { name: "Cancel" }).click();

    await expect(dialog).not.toBeVisible();
    await expect(panel.getByText("get_issues").first()).toBeVisible();
  });

  test("details panel closes immediately when the only tool in a group is deleted", async ({
    page,
  }) => {
    const SOLO = makeTool("solo_tool", "solo-gateway");

    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([SOLO]),
      });
    });
    await page.route(`**/tools/${SOLO.id}`, async (route) => {
      if (route.request().method() === "DELETE") {
        await route.fulfill({ status: 204 });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for solo-gateway" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for solo-gateway/i });
    await expect(panel).toBeVisible();
    await showDefinitionTab(panel);

    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Delete" }).click();

    await page
      .getByRole("dialog", { name: "Delete tool" })
      .getByRole("button", { name: "Delete" })
      .click();

    await expect(panel).not.toBeVisible();
  });

  test("details panel stays open and deleted row is gone while remaining tool stays visible", async ({
    page,
  }) => {
    const TOOL_1 = makeTool("alpha_tool", "multi-gw");
    const TOOL_2 = makeTool("beta_tool", "multi-gw");

    let resolveDelete!: () => void;
    const deleteHeld = new Promise<void>((res) => {
      resolveDelete = res;
    });

    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([TOOL_1, TOOL_2]),
      });
    });
    await page.route(`**/tools/${TOOL_1.id}`, async (route) => {
      if (route.request().method() === "DELETE") {
        await deleteHeld;
        await route.fulfill({ status: 204 });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for multi-gw" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for multi-gw/i });
    await expect(panel).toBeVisible();
    await showDefinitionTab(panel);
    await expect(panel.getByText("alpha_tool").first()).toBeVisible();
    await expect(panel.getByText("beta_tool").first()).toBeVisible();

    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Delete" }).click();
    await page
      .getByRole("dialog", { name: "Delete tool" })
      .getByRole("button", { name: "Delete" })
      .click();

    await expect(panel.getByText("alpha_tool")).not.toBeVisible();
    await expect(panel.getByText("beta_tool").first()).toBeVisible();

    resolveDelete();
    await expect(
      page.locator("[data-sonner-toast]").filter({ hasText: /alpha_tool/i }),
    ).toBeVisible();
  });

  test("details panel re-opens with all tools restored after rollback", async ({ page }) => {
    const TOOL_1 = makeTool("rollback_tool_1", "rb-gateway");
    const TOOL_2 = makeTool("rollback_tool_2", "rb-gateway");

    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([TOOL_1, TOOL_2]),
      });
    });
    await page.route(`**/tools/${TOOL_1.id}`, async (route) => {
      if (route.request().method() === "DELETE") {
        await route.fulfill({
          status: 403,
          contentType: "application/json",
          body: JSON.stringify({ detail: "Forbidden" }),
        });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for rb-gateway" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for rb-gateway/i });
    await expect(panel).toBeVisible();
    await showDefinitionTab(panel);

    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Delete" }).click();
    await page
      .getByRole("dialog", { name: "Delete tool" })
      .getByRole("button", { name: "Delete" })
      .click();

    await expect(
      page.locator("[data-sonner-toast]").filter({ hasText: /Forbidden/i }),
    ).toBeVisible();

    await expect(panel).toBeVisible();
    await expect(panel.getByText("rollback_tool_1").first()).toBeVisible();
    await expect(panel.getByText("rollback_tool_2").first()).toBeVisible();
  });

  test("card group disappears from grid when its only tool is deleted", async ({ page }) => {
    const SOLO = makeTool("lone_tool", "lone-gateway");
    let toolDeleted = false;

    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify(toolDeleted ? [TOOL_A1] : [SOLO, TOOL_A1]),
      });
    });
    await page.route(`**/tools/${SOLO.id}`, async (route) => {
      if (route.request().method() === "DELETE") {
        toolDeleted = true;
        await route.fulfill({ status: 204 });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await expect(page.getByText("lone-gateway")).toBeVisible();
    await expect(page.getByText("github-server")).toBeVisible();

    await page.getByRole("button", { name: "More options for lone-gateway" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for lone-gateway/i });
    await expect(panel).toBeVisible();
    await showDefinitionTab(panel);

    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Delete" }).click();
    await page
      .getByRole("dialog", { name: "Delete tool" })
      .getByRole("button", { name: "Delete" })
      .click();

    await expect(page.getByText("lone-gateway")).not.toBeVisible();

    await expect(page.getByText("github-server")).toBeVisible();
  });

  test("Add tools card is keyboard accessible via Enter", async ({ page }) => {
    await page.route("**/tools?*", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify([]),
      });
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    const addToolsCard = page.getByRole("button").filter({ hasText: "Add tools" });
    await addToolsCard.focus();
    await page.keyboard.press("Enter");

    await expect(page.getByRole("heading", { name: "Add tool" })).toBeVisible();
  });

  // ---------------------------------------------------------------------------
  // Create
  // ---------------------------------------------------------------------------

  test("creates a REST tool and POSTs the expected payload", async ({ page }) => {
    let createBody: CreateToolPayload | null = null;

    await routeToolsList(page, []);
    await page.route("**/tools", async (route) => {
      if (route.request().method() === "POST") {
        createBody = route.request().postDataJSON() as CreateToolPayload;
        await route.fulfill({
          status: 201,
          contentType: "application/json",
          body: JSON.stringify({ id: "list_users" }),
        });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await openAddToolForm(page);
    await fillToolBasics(page, "list_users", "https://api.example.com/users");

    await page.getByRole("button", { name: "Add tool" }).click();

    await expect.poll(() => createBody).not.toBeNull();
    const tool = createBody!.tool;
    expect(tool.name).toBe("list_users");
    expect(tool.url).toBe("https://api.example.com/users");
    expect(tool.integration_type).toBe("REST");
    expect(tool.request_type).toBe("POST");
    expect(tool.auth_type).toBeUndefined();

    // Form closes and returns to the grid on success.
    await expect(page.getByRole("heading", { name: "Tools" })).toBeVisible();
    await expect(page.getByRole("heading", { name: "Add tool" })).not.toBeVisible();
  });

  test("chosen request type is sent in the create payload", async ({ page }) => {
    let createBody: CreateToolPayload | null = null;

    await routeToolsList(page, []);
    await page.route("**/tools", async (route) => {
      if (route.request().method() === "POST") {
        createBody = route.request().postDataJSON() as CreateToolPayload;
        await route.fulfill({ status: 201, contentType: "application/json", body: "{}" });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await openAddToolForm(page);
    await fillToolBasics(page, "get_user", "https://api.example.com/users/1");

    // The request-type segmented control is a radiogroup of GET/POST/PUT/PATCH/DELETE.
    await page.locator('label[for="request-GET"]').click();
    await page.getByRole("button", { name: "Add tool" }).click();

    await expect.poll(() => createBody).not.toBeNull();
    expect(createBody!.tool.request_type).toBe("GET");
  });

  test("shows a submit error when the create API fails", async ({ page }) => {
    await routeToolsList(page, []);
    await page.route("**/tools", async (route) => {
      if (route.request().method() === "POST") {
        await route.fulfill({
          status: 403,
          contentType: "application/json",
          body: JSON.stringify({ message: "You do not have permission to create tools" }),
        });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await openAddToolForm(page);
    await fillToolBasics(page, "denied_tool", "https://api.example.com/denied");
    await page.getByRole("button", { name: "Add tool" }).click();

    await expect(page.getByText(/You do not have permission to create tools/i)).toBeVisible();
    // Stays on the form so the user can correct/retry.
    await expect(page.getByRole("heading", { name: "Add tool" })).toBeVisible();
  });

  // ---------------------------------------------------------------------------
  // Create — authentication types
  // ---------------------------------------------------------------------------

  const authScenarios: Array<{
    label: string;
    authLabelFor: string | null;
    fillCreds: (page: Page) => Promise<void>; // pragma: allowlist secret
    expectAuth: (tool: Record<string, unknown>) => void; // pragma: allowlist secret
  }> = [
    {
      label: "no authentication",
      authLabelFor: null,
      fillCreds: async () => {}, // pragma: allowlist secret
      expectAuth: (tool) => {
        expect(tool.auth_type).toBeUndefined();
      },
    },
    {
      label: "basic authentication",
      authLabelFor: "auth-basic",
      // prettier-ignore
      fillCreds: async (page) => { // pragma: allowlist secret
        await page.locator("#basic-auth-username").fill("api_user");
        await page.locator("#basic-auth-password").fill("s3cret_pass");
      },
      expectAuth: (tool) => {
        expect(tool.auth_type).toBe("basic");
        expect(tool.auth_username).toBe("api_user");
        expect(tool.auth_password).toBe("s3cret_pass");
      },
    },
    {
      label: "bearer token authentication",
      authLabelFor: "auth-bearer",
      // prettier-ignore
      fillCreds: async (page) => { // pragma: allowlist secret
        await page.locator("#bearer-token").fill("tok_abc123");
      },
      expectAuth: (tool) => {
        expect(tool.auth_type).toBe("bearer");
        expect(tool.auth_token).toBe("tok_abc123");
      },
    },
    {
      label: "custom header authentication",
      authLabelFor: "auth-custom",
      // prettier-ignore
      fillCreds: async (page) => { // pragma: allowlist secret
        await page.getByRole("button", { name: "Add header" }).click();
        await page.locator("#header-key-0").fill("X-API-Key");
        await page.locator("#header-value-0").fill("key_value_123");
      },
      expectAuth: (tool) => {
        expect(tool.auth_type).toBe("authheaders");
        expect(tool.auth_header_key).toBe("X-API-Key");
        expect(tool.auth_header_value).toBe("key_value_123");
      },
    },
  ];

  for (const scenario of authScenarios) {
    test(`creates a tool with ${scenario.label}`, async ({ page }) => {
      let createBody: CreateToolPayload | null = null;

      await routeToolsList(page, []);
      await page.route("**/tools", async (route) => {
        if (route.request().method() === "POST") {
          createBody = route.request().postDataJSON() as CreateToolPayload;
          await route.fulfill({ status: 201, contentType: "application/json", body: "{}" });
        } else {
          await route.fallback();
        }
      });

      await page.goto(APP.TOOLS);
      await page.waitForLoadState("networkidle");

      await openAddToolForm(page);
      await fillToolBasics(page, "auth_tool", "https://api.example.com/secure");

      if (scenario.authLabelFor) {
        await page.getByRole("button", { name: "Advanced settings" }).click();
        await page.locator(`label[for="${scenario.authLabelFor}"]`).click();
        await scenario.fillCreds(page);
      }

      await page.getByRole("button", { name: "Add tool" }).click();

      await expect.poll(() => createBody).not.toBeNull();
      scenario.expectAuth(createBody!.tool);
    });
  }

  // ---------------------------------------------------------------------------
  // Edit
  // ---------------------------------------------------------------------------

  test("edits a tool and PUTs the updated fields", async ({ page }) => {
    const TOOL = makeTool("editable_tool", "edit-gw", {
      integrationType: "REST",
      requestType: "POST",
      inputSchema: { type: "object", properties: {} },
    });
    let putBody: UpdateToolPayload | null = null;

    await routeToolsList(page, [TOOL]);
    await page.route(`**/tools/${TOOL.id}`, async (route) => {
      const method = route.request().method();
      if (method === "GET") {
        await route.fulfill({
          status: 200,
          contentType: "application/json",
          body: JSON.stringify(TOOL),
        });
      } else if (method === "PUT") {
        putBody = route.request().postDataJSON() as UpdateToolPayload;
        await route.fulfill({
          status: 200,
          contentType: "application/json",
          body: JSON.stringify({ ...TOOL, customName: putBody.customName }),
        });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for edit-gw" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for edit-gw/i });
    await expect(panel).toBeVisible();
    await showDefinitionTab(panel);

    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Edit" }).click();

    await expect(page.getByRole("heading", { name: "Edit tool" })).toBeVisible();

    const nameInput = page.locator("#tool-name");
    await expect(nameInput).toHaveValue("editable_tool");
    await nameInput.fill("editable_tool_renamed");

    await page.getByRole("button", { name: "Update tool" }).click();

    await expect.poll(() => putBody).not.toBeNull();
    expect(putBody!.name).toBe("editable_tool_renamed");
    expect(putBody!.customName).toBe("editable_tool_renamed");

    // Form closes back to the grid on success.
    await expect(page.getByRole("heading", { name: "Tools" })).toBeVisible();
  });

  // ---------------------------------------------------------------------------
  // View schema
  // ---------------------------------------------------------------------------

  test("view schema dialog shows input and output schemas", async ({ page }) => {
    const TOOL = makeTool("schema_tool", "schema-gw", {
      inputSchema: { type: "object", properties: { query: { type: "string" } } },
      outputSchema: { type: "object", properties: { result: { type: "string" } } },
    });

    await routeToolsList(page, [TOOL]);

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for schema-gw" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for schema-gw/i });
    await expect(panel).toBeVisible();
    await showDefinitionTab(panel);

    await panel.getByRole("button", { name: "View schema" }).first().click();

    const dialog = page.getByRole("dialog");
    await expect(dialog.getByText("Tool schema")).toBeVisible();
    await expect(dialog.getByRole("heading", { name: "Input" })).toBeVisible();
    await expect(dialog.getByRole("heading", { name: "Output" })).toBeVisible();
    await expect(dialog.locator("pre").first()).toContainText("query");
    await expect(dialog.locator("pre").nth(1)).toContainText("result");

    await dialog.getByRole("button", { name: "Close" }).first().click();
    await expect(dialog).not.toBeVisible();
  });

  // ---------------------------------------------------------------------------
  // Activate / Deactivate
  // ---------------------------------------------------------------------------

  test("deactivates an active tool and reflects the inactive status", async ({ page }) => {
    const TOOL = makeTool("toggle_tool", "toggle-gw", { enabled: true, reachable: true });
    let activateParam: string | null = null;

    await routeToolsList(page, [TOOL]);
    await page.route(`**/tools/${TOOL.id}/state*`, async (route) => {
      if (route.request().method() === "POST") {
        activateParam = new URL(route.request().url()).searchParams.get("activate");
        await route.fulfill({ status: 200, contentType: "application/json", body: "{}" });
      } else {
        await route.fallback();
      }
    });
    await page.route(`**/tools/${TOOL.id}`, async (route) => {
      if (route.request().method() === "GET") {
        await route.fulfill({
          status: 200,
          contentType: "application/json",
          body: JSON.stringify({ ...TOOL, enabled: false, reachable: false }),
        });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for toggle-gw" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for toggle-gw/i });
    await expect(panel).toBeVisible();
    await showDefinitionTab(panel);
    await expect(panel.getByText("Active", { exact: true })).toBeVisible();

    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Deactivate" }).click();

    await expect(
      page.locator("[data-sonner-toast]").filter({ hasText: /toggle_tool.*deactivated/i }),
    ).toBeVisible();
    await expect.poll(() => activateParam).toBe("false");
    await expect(panel.getByText("Inactive", { exact: true })).toBeVisible();

    // The menu now offers re-activation.
    await panel.getByRole("button", { name: "More options" }).first().click();
    await expect(page.getByRole("menuitem", { name: "Activate" })).toBeVisible();
  });

  test("activates an inactive tool and reflects the active status", async ({ page }) => {
    const TOOL = makeTool("inactive_tool", "activate-gw", { enabled: false, reachable: false });
    let activateParam: string | null = null;

    await routeToolsList(page, [TOOL]);
    await page.route(`**/tools/${TOOL.id}/state*`, async (route) => {
      if (route.request().method() === "POST") {
        activateParam = new URL(route.request().url()).searchParams.get("activate");
        await route.fulfill({ status: 200, contentType: "application/json", body: "{}" });
      } else {
        await route.fallback();
      }
    });
    await page.route(`**/tools/${TOOL.id}`, async (route) => {
      if (route.request().method() === "GET") {
        await route.fulfill({
          status: 200,
          contentType: "application/json",
          body: JSON.stringify({ ...TOOL, enabled: true, reachable: true }),
        });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for activate-gw" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for activate-gw/i });
    await expect(panel).toBeVisible();
    await showDefinitionTab(panel);
    await expect(panel.getByText("Inactive", { exact: true })).toBeVisible();

    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Activate" }).click();

    await expect(
      page.locator("[data-sonner-toast]").filter({ hasText: /inactive_tool.*activated/i }),
    ).toBeVisible();
    await expect.poll(() => activateParam).toBe("true");
    await expect(panel.getByText("Active", { exact: true })).toBeVisible();
  });

  test("shows an error toast and keeps status when activation fails", async ({ page }) => {
    const TOOL = makeTool("toggle_fail_tool", "fail-gw", { enabled: true, reachable: true });
    let getCount = 0;

    await routeToolsList(page, [TOOL]);
    await page.route(`**/tools/${TOOL.id}/state*`, async (route) => {
      if (route.request().method() === "POST") {
        await route.fulfill({
          status: 403,
          contentType: "application/json",
          body: JSON.stringify({ detail: "Forbidden" }),
        });
      } else {
        await route.fallback();
      }
    });
    await page.route(`**/tools/${TOOL.id}`, async (route) => {
      if (route.request().method() === "GET") {
        getCount += 1;
        await route.fulfill({
          status: 200,
          contentType: "application/json",
          body: JSON.stringify(TOOL),
        });
      } else {
        await route.fallback();
      }
    });

    await page.goto(APP.TOOLS);
    await page.waitForLoadState("networkidle");

    await page.getByRole("button", { name: "More options for fail-gw" }).click();
    await page.getByRole("menuitem", { name: "View details" }).click();

    const panel = page.getByRole("region", { name: /Tools for fail-gw/i });
    await expect(panel).toBeVisible();
    await showDefinitionTab(panel);

    await panel.getByRole("button", { name: "More options" }).first().click();
    await page.getByRole("menuitem", { name: "Deactivate" }).click();

    await expect(
      page.locator("[data-sonner-toast]").filter({ hasText: /Forbidden/i }),
    ).toBeVisible();

    // A failed toggle never re-fetches the tool and leaves the status untouched.
    await expect(panel.getByText("Active", { exact: true })).toBeVisible();
    expect(getCount).toBe(0);
  });
});