test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269)

* test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245)

Establishes the unit-test runtime AGENTS.md mandates: a vitest "unit"
project alongside the existing storybook project, RTL + jest-dom +
happy-dom, a Mantine-aware render helper, and a 90%-line per-file
coverage gate enforced by CI. Adds 66 test files covering all 62
components under elements/groups/screens/views, plus core/mcp and
clients/web/src/utils. Total: 577 tests, 98.7% line coverage globally.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test(coverage): address PR #1269 review feedback

- AGENTS.md: correct coverage gate description (lines ≥ 90, statements ≥ 85,
  functions ≥ 80, branches ≥ 50) with rationale for the relaxed branch
  threshold
- InspectorView.test.tsx: document what the Math.random() mock values
  (0.1 / 0.99) control vs. STUB_SUCCESS_RATE in InspectorView.tsx
- vite.config.ts / tsconfig.test.json: drop unused `globals: true` and the
  `vitest/globals` type now that every test file imports describe/it/expect/vi
  explicitly; manual `afterEach(cleanup)` in setup.ts remains required because
  testing-library auto-cleanup relies on globalThis.afterEach

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type { MessageEntry } from "@inspector/core/mcp/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { HistoryScreen } from "./HistoryScreen";
+
+const sampleEntries: MessageEntry[] = [
+  {
+    id: "1",
+    timestamp: new Date(),
+    direction: "request",
+    message: { jsonrpc: "2.0", id: 1, method: "tools/list" },
+  },
+  {
+    id: "2",
+    timestamp: new Date(),
+    direction: "response",
+    message: { jsonrpc: "2.0", id: 1, result: {} },
+  },
+];
+
+const baseProps = {
+  entries: sampleEntries,
+  pinnedIds: new Set<string>(),
+  onClearAll: vi.fn(),
+  onExport: vi.fn(),
+  onReplay: vi.fn(),
+  onTogglePin: vi.fn(),
+};
+
+describe("HistoryScreen", () => {
+  it("renders the controls and panel", () => {
+    renderWithMantine(<HistoryScreen {...baseProps} />);
+    expect(screen.getByText("History")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+  });
+
+  it("renders empty state when there are no entries", () => {
+    renderWithMantine(<HistoryScreen {...baseProps} entries={[]} />);
+    expect(screen.getByText("History")).toBeInTheDocument();
+  });
+
+  it("invokes onClearAll when clear is triggered", async () => {
+    const user = userEvent.setup();
+    const onClearAll = vi.fn();
+    renderWithMantine(<HistoryScreen {...baseProps} onClearAll={onClearAll} />);
+    const clearButton = screen.getByRole("button", { name: /Clear/ });
+    await user.click(clearButton);
+    expect(onClearAll).toHaveBeenCalled();
+  });
+});

clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { LoggingScreen } from "./LoggingScreen";
+
+const baseProps = {
+  entries: [],
+  currentLevel: "info" as const,
+  onSetLevel: vi.fn(),
+  onClear: vi.fn(),
+  onExport: vi.fn(),
+  autoScroll: true,
+  onToggleAutoScroll: vi.fn(),
+  onCopyAll: vi.fn(),
+};
+
+describe("LoggingScreen", () => {
+  it("renders the log stream panel", () => {
+    renderWithMantine(<LoggingScreen {...baseProps} />);
+    expect(screen.getByText("Log Stream")).toBeInTheDocument();
+    expect(screen.getByText("No log entries")).toBeInTheDocument();
+  });
+
+  it("renders log entries", () => {
+    const entries = [
+      {
+        receivedAt: new Date(),
+        params: { level: "info" as const, data: "hello" },
+      },
+    ];
+    renderWithMantine(<LoggingScreen {...baseProps} entries={entries} />);
+    expect(screen.getByText("hello")).toBeInTheDocument();
+  });
+
+  it("invokes onClear when clear is clicked", async () => {
+    const user = userEvent.setup();
+    const onClear = vi.fn();
+    renderWithMantine(<LoggingScreen {...baseProps} onClear={onClear} />);
+    await user.click(screen.getByRole("button", { name: "Clear" }));
+    expect(onClear).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes onCopyAll when Copy All is clicked", async () => {
+    const user = userEvent.setup();
+    const onCopyAll = vi.fn();
+    renderWithMantine(<LoggingScreen {...baseProps} onCopyAll={onCopyAll} />);
+    await user.click(screen.getByRole("button", { name: "Copy All" }));
+    expect(onCopyAll).toHaveBeenCalledTimes(1);
+  });
+
+  it("toggles a single level on level button click", async () => {
+    const user = userEvent.setup();
+    const entries = [
+      { receivedAt: new Date(), params: { level: "info" as const, data: "x" } },
+    ];
+    renderWithMantine(<LoggingScreen {...baseProps} entries={entries} />);
+    expect(screen.getByText("x")).toBeInTheDocument();
+    const debugButton = screen.getByRole("button", { name: "info" });
+    await user.click(debugButton);
+    expect(screen.queryByText("x")).not.toBeInTheDocument();
+  });
+
+  it("Deselect All hides all entries; Select All restores them", async () => {
+    const user = userEvent.setup();
+    const entries = [
+      { receivedAt: new Date(), params: { level: "info" as const, data: "x" } },
+    ];
+    renderWithMantine(<LoggingScreen {...baseProps} entries={entries} />);
+    await user.click(screen.getByRole("button", { name: "Deselect All" }));
+    expect(screen.queryByText("x")).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Select All" }));
+    expect(screen.getByText("x")).toBeInTheDocument();
+  });
+
+  it("filters log text via the search input", async () => {
+    const user = userEvent.setup();
+    const entries = [
+      {
+        receivedAt: new Date(),
+        params: { level: "info" as const, data: "alpha" },
+      },
+      {
+        receivedAt: new Date(),
+        params: { level: "info" as const, data: "beta" },
+      },
+    ];
+    renderWithMantine(<LoggingScreen {...baseProps} entries={entries} />);
+    await user.type(screen.getByPlaceholderText("Search..."), "alpha");
+    expect(screen.getByText("alpha")).toBeInTheDocument();
+    expect(screen.queryByText("beta")).not.toBeInTheDocument();
+  });
+
+  it("invokes onSetLevel via the Set button", async () => {
+    const user = userEvent.setup();
+    const onSetLevel = vi.fn();
+    renderWithMantine(<LoggingScreen {...baseProps} onSetLevel={onSetLevel} />);
+    await user.click(screen.getByRole("button", { name: "Set" }));
+    expect(onSetLevel).toHaveBeenCalledWith("info");
+  });
+});

clients/web/src/components/screens/PromptsScreen/PromptsScreen.test.tsx

@@ -0,0 +1,120 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { PromptsScreen } from "./PromptsScreen";
+
+const prompts: Prompt[] = [
+  { name: "summarize", description: "Summarize text" },
+  { name: "translate", description: "Translate text" },
+];
+
+const baseProps = {
+  prompts,
+  listChanged: false,
+  onRefreshList: vi.fn(),
+  onGetPrompt: vi.fn(),
+};
+
+describe("PromptsScreen", () => {
+  it("renders the empty state when no prompt is selected", () => {
+    renderWithMantine(<PromptsScreen {...baseProps} />);
+    expect(
+      screen.getByText("Select a prompt to view details"),
+    ).toBeInTheDocument();
+  });
+
+  it("shows prompt arguments when a prompt is selected", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<PromptsScreen {...baseProps} />);
+    await user.click(screen.getByText("summarize"));
+    expect(
+      screen.getByRole("button", { name: "Get Prompt" }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows pending state", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <PromptsScreen {...baseProps} getPromptState={{ status: "pending" }} />,
+    );
+    await user.click(screen.getByText("summarize"));
+    expect(screen.getByText("Loading prompt...")).toBeInTheDocument();
+  });
+
+  it("shows error state", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <PromptsScreen
+        {...baseProps}
+        getPromptState={{ status: "error", error: "Bad prompt" }}
+      />,
+    );
+    await user.click(screen.getByText("summarize"));
+    expect(screen.getByText("Prompt Error")).toBeInTheDocument();
+    expect(screen.getByText("Bad prompt")).toBeInTheDocument();
+  });
+
+  it("renders fallback error when error message is missing", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <PromptsScreen {...baseProps} getPromptState={{ status: "error" }} />,
+    );
+    await user.click(screen.getByText("summarize"));
+    expect(screen.getByText("Failed to get prompt")).toBeInTheDocument();
+  });
+
+  it("shows messages when result is provided", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <PromptsScreen
+        {...baseProps}
+        getPromptState={{
+          status: "ok",
+          result: {
+            messages: [{ role: "user", content: { type: "text", text: "hi" } }],
+          },
+        }}
+      />,
+    );
+    await user.click(screen.getByText("summarize"));
+    expect(screen.getByText("Messages")).toBeInTheDocument();
+  });
+
+  it("updates argument values and calls onGetPrompt", async () => {
+    const user = userEvent.setup();
+    const onGetPrompt = vi.fn();
+    const promptsWithArgs: Prompt[] = [
+      {
+        name: "ask",
+        arguments: [{ name: "topic", required: true }],
+      },
+    ];
+    renderWithMantine(
+      <PromptsScreen
+        {...baseProps}
+        prompts={promptsWithArgs}
+        onGetPrompt={onGetPrompt}
+      />,
+    );
+    await user.click(screen.getByText("ask"));
+    await user.type(screen.getByPlaceholderText("Enter topic..."), "math");
+    await user.click(screen.getByRole("button", { name: "Get Prompt" }));
+    expect(onGetPrompt).toHaveBeenCalledWith("ask", { topic: "math" });
+  });
+
+  it("resets argument values when switching prompts", async () => {
+    const user = userEvent.setup();
+    const promptsWithArgs: Prompt[] = [
+      { name: "alpha", arguments: [{ name: "x" }] },
+      { name: "beta", arguments: [{ name: "y" }] },
+    ];
+    renderWithMantine(
+      <PromptsScreen {...baseProps} prompts={promptsWithArgs} />,
+    );
+    await user.click(screen.getByText("alpha"));
+    await user.type(screen.getByPlaceholderText("Enter x..."), "value");
+    await user.click(screen.getByText("beta"));
+    expect(screen.getByPlaceholderText("Enter y...")).toHaveValue("");
+  });
+});

clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx

@@ -0,0 +1,167 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type {
+  Resource,
+  ResourceTemplate,
+  ReadResourceResult,
+} from "@modelcontextprotocol/sdk/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { ResourcesScreen } from "./ResourcesScreen";
+
+const resources: Resource[] = [
+  { uri: "file:///x", name: "x.txt" },
+  { uri: "file:///y", name: "y.txt" },
+];
+
+const templates: ResourceTemplate[] = [
+  { uriTemplate: "file:///{path}", name: "files" },
+];
+
+const baseProps = {
+  resources,
+  templates,
+  subscriptions: [],
+  listChanged: false,
+  onRefreshList: vi.fn(),
+  onReadResource: vi.fn(),
+  onSubscribeResource: vi.fn(),
+  onUnsubscribeResource: vi.fn(),
+};
+
+const okResult: ReadResourceResult = {
+  contents: [{ uri: "file:///x", text: "embedded contents" }],
+};
+
+describe("ResourcesScreen", () => {
+  it("renders empty preview state when nothing is selected", () => {
+    renderWithMantine(<ResourcesScreen {...baseProps} />);
+    expect(
+      screen.getByText("Select a resource to preview"),
+    ).toBeInTheDocument();
+  });
+
+  it("shows the read error alert when error and a resource is selected", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ResourcesScreen
+        {...baseProps}
+        readState={{ status: "error", error: "boom" }}
+      />,
+    );
+    await user.click(screen.getByText("x.txt"));
+    expect(screen.getByText("Read Error")).toBeInTheDocument();
+    expect(screen.getByText("boom")).toBeInTheDocument();
+  });
+
+  it("falls back to default error when error message is missing", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ResourcesScreen {...baseProps} readState={{ status: "error" }} />,
+    );
+    await user.click(screen.getByText("x.txt"));
+    expect(screen.getByText("Failed to read resource")).toBeInTheDocument();
+  });
+
+  it("shows the loading state when reading", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ResourcesScreen {...baseProps} readState={{ status: "pending" }} />,
+    );
+    await user.click(screen.getByText("x.txt"));
+    expect(screen.getByText("Reading resource...")).toBeInTheDocument();
+  });
+
+  it("renders the preview panel when readState has a result", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ResourcesScreen
+        {...baseProps}
+        readState={{
+          status: "ok",
+          uri: "file:///x",
+          result: okResult,
+        }}
+      />,
+    );
+    await user.click(screen.getByText("x.txt"));
+    expect(screen.getByText("embedded contents")).toBeInTheDocument();
+  });
+
+  it("synthesizes a Resource for template-expanded URIs not in the list", () => {
+    renderWithMantine(
+      <ResourcesScreen
+        {...baseProps}
+        resources={[]}
+        readState={{
+          status: "ok",
+          uri: "file:///synthetic",
+          result: { contents: [{ uri: "file:///synthetic", text: "syn" }] },
+        }}
+      />,
+    );
+    expect(
+      screen.getByText("Select a resource to preview"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the template panel when a template is selected", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<ResourcesScreen {...baseProps} />);
+    await user.click(screen.getByText("Templates (1)"));
+    await user.click(screen.getByText("files"));
+    expect(
+      screen.getByText("Enter a URI and click Read to preview"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders empty state when a resource is selected but no readState", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<ResourcesScreen {...baseProps} />);
+    await user.click(screen.getByText("x.txt"));
+    expect(screen.getByText("Click to read this resource")).toBeInTheDocument();
+  });
+
+  it("forwards refresh and subscribe events from the preview panel", async () => {
+    const user = userEvent.setup();
+    const onReadResource = vi.fn();
+    const onSubscribeResource = vi.fn();
+    renderWithMantine(
+      <ResourcesScreen
+        {...baseProps}
+        onReadResource={onReadResource}
+        onSubscribeResource={onSubscribeResource}
+        readState={{
+          status: "ok",
+          uri: "file:///x",
+          result: okResult,
+          isSubscribed: false,
+        }}
+      />,
+    );
+    await user.click(screen.getByText("x.txt"));
+    await user.click(screen.getByRole("button", { name: "Refresh" }));
+    expect(onReadResource).toHaveBeenCalledWith("file:///x");
+    await user.click(screen.getByRole("button", { name: "Subscribe" }));
+    expect(onSubscribeResource).toHaveBeenCalledWith("file:///x");
+  });
+
+  it("invokes onUnsubscribeResource when already subscribed", async () => {
+    const user = userEvent.setup();
+    const onUnsubscribeResource = vi.fn();
+    renderWithMantine(
+      <ResourcesScreen
+        {...baseProps}
+        onUnsubscribeResource={onUnsubscribeResource}
+        readState={{
+          status: "ok",
+          uri: "file:///x",
+          result: okResult,
+          isSubscribed: true,
+        }}
+      />,
+    );
+    await user.click(screen.getByText("x.txt"));
+    await user.click(screen.getByRole("button", { name: "Unsubscribe" }));
+    expect(onUnsubscribeResource).toHaveBeenCalledWith("file:///x");
+  });
+});

clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type { ServerEntry } from "@inspector/core/mcp/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { ServerListScreen } from "./ServerListScreen";
+
+const servers: ServerEntry[] = [
+  {
+    id: "alpha",
+    name: "Alpha",
+    config: { type: "stdio", command: "echo" },
+    connection: { status: "disconnected" },
+  },
+];
+
+const baseProps = {
+  servers,
+  onAddManually: vi.fn(),
+  onImportConfig: vi.fn(),
+  onImportServerJson: vi.fn(),
+  onToggleConnection: vi.fn(),
+  onServerInfo: vi.fn(),
+  onSettings: vi.fn(),
+  onEdit: vi.fn(),
+  onClone: vi.fn(),
+  onRemove: vi.fn(),
+};
+
+describe("ServerListScreen", () => {
+  it("renders the server card", () => {
+    renderWithMantine(<ServerListScreen {...baseProps} />);
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+  });
+
+  it("renders the empty state with no servers", () => {
+    renderWithMantine(<ServerListScreen {...baseProps} servers={[]} />);
+    expect(
+      screen.getByText("No servers configured. Add a server to get started."),
+    ).toBeInTheDocument();
+  });
+
+  it("toggles compact mode when the list toggle is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<ServerListScreen {...baseProps} />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons.length).toBeGreaterThan(0);
+    await user.click(buttons[0]);
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+  });
+});

clients/web/src/components/screens/TasksScreen/TasksScreen.test.tsx

@@ -0,0 +1,43 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type { Task } from "@modelcontextprotocol/sdk/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { TasksScreen } from "./TasksScreen";
+
+const tasks: Task[] = [
+  {
+    taskId: "t1",
+    status: "working",
+    createdAt: new Date().toISOString(),
+    lastUpdatedAt: new Date().toISOString(),
+    pollInterval: 1000,
+    ttl: 60000,
+  },
+];
+
+const baseProps = {
+  tasks,
+  onRefresh: vi.fn(),
+  onClearCompleted: vi.fn(),
+  onCancel: vi.fn(),
+};
+
+describe("TasksScreen", () => {
+  it("renders the controls and list", () => {
+    renderWithMantine(<TasksScreen {...baseProps} />);
+    expect(screen.getAllByText("Tasks").length).toBeGreaterThan(0);
+  });
+
+  it("renders an empty list when no tasks are provided", () => {
+    renderWithMantine(<TasksScreen {...baseProps} tasks={[]} />);
+    expect(screen.getAllByText("Tasks").length).toBeGreaterThan(0);
+  });
+
+  it("invokes onRefresh when refresh is clicked", async () => {
+    const user = userEvent.setup();
+    const onRefresh = vi.fn();
+    renderWithMantine(<TasksScreen {...baseProps} onRefresh={onRefresh} />);
+    await user.click(screen.getByRole("button", { name: "Refresh" }));
+    expect(onRefresh).toHaveBeenCalledTimes(1);
+  });
+});

clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx

@@ -0,0 +1,116 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { ToolsScreen } from "./ToolsScreen";
+
+const tools: Tool[] = [
+  { name: "alpha", inputSchema: { type: "object" } },
+  { name: "beta", inputSchema: { type: "object" } },
+];
+
+const baseProps = {
+  tools,
+  listChanged: false,
+  onRefreshList: vi.fn(),
+  onCallTool: vi.fn(),
+};
+
+describe("ToolsScreen", () => {
+  it("renders the empty selection state", () => {
+    renderWithMantine(<ToolsScreen {...baseProps} />);
+    expect(
+      screen.getByText("Select a tool to view details"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Results will appear here")).toBeInTheDocument();
+  });
+
+  it("shows the detail panel when a tool is selected", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<ToolsScreen {...baseProps} />);
+    await user.click(screen.getByText("alpha"));
+    expect(
+      screen.queryByText("Select a tool to view details"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders the result panel when callState has a result", () => {
+    renderWithMantine(
+      <ToolsScreen
+        {...baseProps}
+        callState={{
+          status: "ok",
+          result: { content: [{ type: "text", text: "ok" }] },
+        }}
+      />,
+    );
+    expect(screen.getByText("Results")).toBeInTheDocument();
+  });
+
+  it("invokes onCallTool with form values on Execute", async () => {
+    const user = userEvent.setup();
+    const onCallTool = vi.fn();
+    renderWithMantine(<ToolsScreen {...baseProps} onCallTool={onCallTool} />);
+    await user.click(screen.getByText("alpha"));
+    await user.click(screen.getByRole("button", { name: /Execute/ }));
+    expect(onCallTool).toHaveBeenCalledWith("alpha", {});
+  });
+
+  it("invokes onClearResult when Clear is clicked on the result panel", async () => {
+    const user = userEvent.setup();
+    const onClearResult = vi.fn();
+    renderWithMantine(
+      <ToolsScreen
+        {...baseProps}
+        onClearResult={onClearResult}
+        callState={{
+          status: "ok",
+          result: { content: [{ type: "text", text: "ok" }] },
+        }}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Clear" }));
+    expect(onClearResult).toHaveBeenCalledTimes(1);
+  });
+
+  it("treats pending callState as executing", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ToolsScreen {...baseProps} callState={{ status: "pending" }} />,
+    );
+    await user.click(screen.getByText("alpha"));
+    expect(screen.getByRole("button", { name: /Cancel/ })).toBeInTheDocument();
+  });
+
+  it("invokes onCancelCall when Cancel is clicked", async () => {
+    const user = userEvent.setup();
+    const onCancelCall = vi.fn();
+    renderWithMantine(
+      <ToolsScreen
+        {...baseProps}
+        onCancelCall={onCancelCall}
+        callState={{ status: "pending" }}
+      />,
+    );
+    await user.click(screen.getByText("alpha"));
+    await user.click(screen.getByRole("button", { name: /Cancel/ }));
+    expect(onCancelCall).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not crash when onClearResult/onCancelCall are undefined", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ToolsScreen
+        {...baseProps}
+        onCancelCall={undefined}
+        onClearResult={undefined}
+        callState={{
+          status: "ok",
+          result: { content: [{ type: "text", text: "ok" }] },
+        }}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Clear" }));
+    expect(screen.getByText("Results")).toBeInTheDocument();
+  });
+});