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/elements/AnnotationBadge/AnnotationBadge.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { AnnotationBadge } from "./AnnotationBadge";
+
+describe("AnnotationBadge", () => {
+  it("renders audience labels", () => {
+    renderWithMantine(<AnnotationBadge facet="audience" value={["user"]} />);
+    expect(screen.getByText("audience: user")).toBeInTheDocument();
+  });
+
+  it("joins multiple audience entries", () => {
+    renderWithMantine(
+      <AnnotationBadge facet="audience" value={["user", "assistant"]} />,
+    );
+    expect(screen.getByText("audience: user, assistant")).toBeInTheDocument();
+  });
+
+  it.each([
+    [0.9, "priority: high"],
+    [0.5, "priority: medium"],
+    [0.2, "priority: low"],
+  ])("maps priority %s to %s", (value, label) => {
+    renderWithMantine(<AnnotationBadge facet="priority" value={value} />);
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+
+  it.each([
+    ["readOnlyHint", "read-only"],
+    ["destructiveHint", "destructive"],
+    ["idempotentHint", "idempotent"],
+    ["openWorldHint", "open-world"],
+    ["longRunHint", "long-running"],
+  ] as const)("renders hint label for %s", (facet, label) => {
+    renderWithMantine(<AnnotationBadge facet={facet} value={true} />);
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/CapabilityItem/CapabilityItem.test.tsx

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { CapabilityItem } from "./CapabilityItem";
+
+describe("CapabilityItem", () => {
+  it("renders the supported check mark", () => {
+    renderWithMantine(<CapabilityItem capability="tools" supported />);
+    expect(screen.getByText("✓")).toBeInTheDocument();
+    expect(screen.getByText("Tools")).toBeInTheDocument();
+  });
+
+  it("renders the unsupported cross mark", () => {
+    renderWithMantine(
+      <CapabilityItem capability="prompts" supported={false} />,
+    );
+    expect(screen.getByText("✗")).toBeInTheDocument();
+    expect(screen.getByText("Prompts")).toBeInTheDocument();
+  });
+
+  it("appends the count when provided", () => {
+    renderWithMantine(
+      <CapabilityItem capability="resources" supported count={5} />,
+    );
+    expect(screen.getByText("Resources (5)")).toBeInTheDocument();
+  });
+
+  it("falls back to capability key for unknown labels", () => {
+    renderWithMantine(
+      <CapabilityItem capability={"custom" as never} supported />,
+    );
+    expect(screen.getByText("custom")).toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.test.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import userEvent from "@testing-library/user-event";
+import { ConnectionToggle } from "./ConnectionToggle";
+
+describe("ConnectionToggle", () => {
+  it("is unchecked when disconnected", () => {
+    renderWithMantine(
+      <ConnectionToggle status="disconnected" onToggle={() => {}} />,
+    );
+    expect(screen.getByRole("switch")).not.toBeChecked();
+  });
+
+  it("is checked when connected", () => {
+    renderWithMantine(
+      <ConnectionToggle status="connected" onToggle={() => {}} />,
+    );
+    expect(screen.getByRole("switch")).toBeChecked();
+  });
+
+  it("is checked but disabled while connecting", () => {
+    renderWithMantine(
+      <ConnectionToggle status="connecting" onToggle={() => {}} />,
+    );
+    const sw = screen.getByRole("switch");
+    expect(sw).toBeChecked();
+    expect(sw).toBeDisabled();
+  });
+
+  it("respects external disabled prop", () => {
+    renderWithMantine(
+      <ConnectionToggle status="disconnected" disabled onToggle={() => {}} />,
+    );
+    expect(screen.getByRole("switch")).toBeDisabled();
+  });
+
+  it("invokes onToggle when clicked", async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    renderWithMantine(
+      <ConnectionToggle status="disconnected" onToggle={onToggle} />,
+    );
+    await user.click(screen.getByRole("switch"));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+});

clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx

@@ -0,0 +1,107 @@
+import { describe, it, expect } from "vitest";
+import type { ContentBlock } from "@modelcontextprotocol/sdk/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { ContentViewer } from "./ContentViewer";
+
+describe("ContentViewer", () => {
+  it("renders text content as-is when not JSON", () => {
+    const block: ContentBlock = { type: "text", text: "hello world" };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.getByText("hello world")).toBeInTheDocument();
+  });
+
+  it("pretty-prints JSON text", () => {
+    const block: ContentBlock = { type: "text", text: '{"a":1}' };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.getByText(/"a": 1/)).toBeInTheDocument();
+  });
+
+  it("falls back to raw text when JSON is malformed", () => {
+    const block: ContentBlock = { type: "text", text: "{ broken" };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.getByText("{ broken")).toBeInTheDocument();
+  });
+
+  it("renders a copy overlay when copyable", () => {
+    const block: ContentBlock = { type: "text", text: "hello" };
+    renderWithMantine(<ContentViewer block={block} copyable />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("does not render a copy overlay by default", () => {
+    const block: ContentBlock = { type: "text", text: "hello" };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("renders an image block", () => {
+    const block: ContentBlock = {
+      type: "image",
+      mimeType: "image/png",
+      data: "AAAA",
+    };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.getByRole("img")).toHaveAttribute(
+      "src",
+      "data:image/png;base64,AAAA",
+    );
+  });
+
+  it("renders an audio block", () => {
+    const block: ContentBlock = {
+      type: "audio",
+      mimeType: "audio/mp3",
+      data: "BBBB",
+    };
+    const { container } = renderWithMantine(<ContentViewer block={block} />);
+    const source = container.querySelector("source");
+    expect(source).toHaveAttribute("src", "data:audio/mp3;base64,BBBB");
+  });
+
+  it("renders a text resource block", () => {
+    const block: ContentBlock = {
+      type: "resource",
+      resource: { uri: "file:///foo", text: "embedded text" },
+    };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.getByText("embedded text")).toBeInTheDocument();
+  });
+
+  it("renders a blob resource block with placeholder", () => {
+    const block: ContentBlock = {
+      type: "resource",
+      resource: {
+        uri: "file:///bar",
+        blob: "abc",
+        mimeType: "application/octet-stream",
+      },
+    };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.getByText("[blob: file:///bar]")).toBeInTheDocument();
+  });
+
+  it("renders a resource_link with name", () => {
+    const block: ContentBlock = {
+      type: "resource_link",
+      uri: "ui://app",
+      name: "Cool App",
+    };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.getByText("Cool App")).toBeInTheDocument();
+  });
+
+  it("falls back to URI when resource_link has no name", () => {
+    const block = {
+      type: "resource_link",
+      uri: "ui://app",
+    } as unknown as ContentBlock;
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.getByText("ui://app")).toBeInTheDocument();
+  });
+
+  it("renders nothing for unknown block types", () => {
+    renderWithMantine(<ContentViewer block={{ type: "unknown" } as never} />);
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/CopyButton/CopyButton.test.tsx

@@ -0,0 +1,19 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import userEvent from "@testing-library/user-event";
+import { CopyButton } from "./CopyButton";
+
+describe("CopyButton", () => {
+  it("renders the copy glyph by default", () => {
+    renderWithMantine(<CopyButton value="hello" />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+    expect(screen.getByText("⎘")).toBeInTheDocument();
+  });
+
+  it("triggers a click without throwing when clipboard is unavailable", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<CopyButton value="hello" />);
+    await user.click(screen.getByRole("button"));
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/InlineError/InlineError.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import userEvent from "@testing-library/user-event";
+import { InlineError } from "./InlineError";
+
+describe("InlineError", () => {
+  it("renders the error message", () => {
+    renderWithMantine(<InlineError error={{ message: "boom" }} />);
+    expect(screen.getByText("boom")).toBeInTheDocument();
+  });
+
+  it("renders retry attempt count without max", () => {
+    renderWithMantine(
+      <InlineError error={{ message: "boom" }} retryCount={2} />,
+    );
+    expect(screen.getByText("Retry attempt 2")).toBeInTheDocument();
+  });
+
+  it("renders retry attempt count with max", () => {
+    renderWithMantine(
+      <InlineError error={{ message: "boom" }} retryCount={2} maxRetries={5} />,
+    );
+    expect(screen.getByText("Retry attempt 2 of 5")).toBeInTheDocument();
+  });
+
+  it("does not show expand button when there is nothing to expand", () => {
+    renderWithMantine(<InlineError error={{ message: "boom" }} />);
+    expect(screen.queryByText("Show more")).not.toBeInTheDocument();
+  });
+
+  it("expands details on click", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <InlineError error={{ message: "boom", data: "extra" }} />,
+    );
+    await user.click(screen.getByRole("button", { name: "Show more" }));
+    expect(
+      screen.getByRole("button", { name: "Show less" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("extra")).toBeInTheDocument();
+  });
+
+  it("formats non-string data as JSON", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <InlineError error={{ message: "boom", data: { code: 42 } }} />,
+    );
+    await user.click(screen.getByRole("button", { name: "Show more" }));
+    expect(screen.getByText(/"code": 42/)).toBeInTheDocument();
+  });
+
+  it("renders a doc link button when docLink is provided and expanded", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <InlineError
+        error={{ message: "boom" }}
+        docLink="https://example.com/docs"
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Show more" }));
+    const link = screen.getByRole("link", { name: /Troubleshooting/ });
+    expect(link).toHaveAttribute("href", "https://example.com/docs");
+  });
+});

clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import userEvent from "@testing-library/user-event";
+import { ListChangedIndicator } from "./ListChangedIndicator";
+
+describe("ListChangedIndicator", () => {
+  it("renders nothing when not visible", () => {
+    renderWithMantine(
+      <ListChangedIndicator visible={false} onRefresh={() => {}} />,
+    );
+    expect(screen.queryByText("List updated")).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Refresh" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders the message and refresh button when visible", () => {
+    renderWithMantine(<ListChangedIndicator visible onRefresh={() => {}} />);
+    expect(screen.getByText("List updated")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Refresh" })).toBeInTheDocument();
+  });
+
+  it("invokes onRefresh on click", async () => {
+    const user = userEvent.setup();
+    const onRefresh = vi.fn();
+    renderWithMantine(<ListChangedIndicator visible onRefresh={onRefresh} />);
+    await user.click(screen.getByRole("button", { name: "Refresh" }));
+    expect(onRefresh).toHaveBeenCalledTimes(1);
+  });
+});

clients/web/src/components/elements/ListToggle/ListToggle.test.tsx

@@ -0,0 +1,36 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import userEvent from "@testing-library/user-event";
+import { ListToggle } from "./ListToggle";
+
+describe("ListToggle", () => {
+  it("renders a Button by default", () => {
+    renderWithMantine(<ListToggle compact onToggle={() => {}} />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("renders an ActionIcon for the subtle variant", () => {
+    renderWithMantine(
+      <ListToggle compact variant="subtle" onToggle={() => {}} />,
+    );
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("invokes onToggle when clicked (default variant)", async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    renderWithMantine(<ListToggle compact onToggle={onToggle} />);
+    await user.click(screen.getByRole("button"));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes onToggle when clicked (subtle variant)", async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    renderWithMantine(
+      <ListToggle compact={false} variant="subtle" onToggle={onToggle} />,
+    );
+    await user.click(screen.getByRole("button"));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+});

clients/web/src/components/elements/LogEntry/LogEntry.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { LogEntry, type LogEntryData } from "./LogEntry";
+
+const baseEntry = (
+  overrides: Partial<LogEntryData["params"]>,
+): LogEntryData => ({
+  receivedAt: new Date("2024-01-01T00:00:00Z"),
+  params: { level: "info", data: "hello", ...overrides },
+});
+
+describe("LogEntry", () => {
+  it("renders the message text", () => {
+    renderWithMantine(<LogEntry entry={baseEntry({ data: "the message" })} />);
+    expect(screen.getByText("the message")).toBeInTheDocument();
+  });
+
+  it("renders the level badge", () => {
+    renderWithMantine(<LogEntry entry={baseEntry({ level: "error" })} />);
+    expect(screen.getByText("error")).toBeInTheDocument();
+  });
+
+  it("renders the logger name when present", () => {
+    renderWithMantine(<LogEntry entry={baseEntry({ logger: "transport" })} />);
+    expect(screen.getByText("[transport]")).toBeInTheDocument();
+  });
+
+  it("formats object data as JSON", () => {
+    renderWithMantine(<LogEntry entry={baseEntry({ data: { code: 42 } })} />);
+    expect(screen.getByText('{"code":42}')).toBeInTheDocument();
+  });
+
+  it("renders empty string for null data", () => {
+    const { container } = renderWithMantine(
+      <LogEntry entry={baseEntry({ data: null })} />,
+    );
+    expect(container.textContent).toContain("info");
+  });
+});

clients/web/src/components/elements/LogLevelBadge/LogLevelBadge.test.tsx

@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest";
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { LogLevelBadge } from "./LogLevelBadge";
+
+describe("LogLevelBadge", () => {
+  const levels: LoggingLevel[] = [
+    "debug",
+    "info",
+    "notice",
+    "warning",
+    "error",
+    "critical",
+    "alert",
+    "emergency",
+  ];
+
+  it.each(levels)("renders the %s level label", (level) => {
+    renderWithMantine(<LogLevelBadge level={level} />);
+    expect(screen.getByText(level)).toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/MessageBubble/MessageBubble.test.tsx

@@ -0,0 +1,100 @@
+import { describe, it, expect } from "vitest";
+import type {
+  PromptMessage,
+  SamplingMessage,
+} from "@modelcontextprotocol/sdk/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { MessageBubble } from "./MessageBubble";
+
+describe("MessageBubble", () => {
+  it("renders a text sampling message", () => {
+    const message: SamplingMessage = {
+      role: "user",
+      content: { type: "text", text: "hello" },
+    };
+    renderWithMantine(<MessageBubble index={0} message={message} />);
+    expect(screen.getByText("[0] role: user")).toBeInTheDocument();
+    expect(screen.getByText('"hello"')).toBeInTheDocument();
+  });
+
+  it("renders a copy button when there is text", () => {
+    const message: SamplingMessage = {
+      role: "user",
+      content: { type: "text", text: "hello" },
+    };
+    renderWithMantine(<MessageBubble index={0} message={message} />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("renders an image content block", () => {
+    const message: SamplingMessage = {
+      role: "user",
+      content: { type: "image", mimeType: "image/png", data: "AAA" },
+    };
+    renderWithMantine(<MessageBubble index={1} message={message} />);
+    expect(screen.getByRole("img")).toHaveAttribute(
+      "src",
+      "data:image/png;base64,AAA",
+    );
+  });
+
+  it("renders an audio content block", () => {
+    const message: SamplingMessage = {
+      role: "assistant",
+      content: { type: "audio", mimeType: "audio/mp3", data: "BBB" },
+    };
+    const { container } = renderWithMantine(
+      <MessageBubble index={2} message={message} />,
+    );
+    expect(container.querySelector("source")).toHaveAttribute(
+      "src",
+      "data:audio/mp3;base64,BBB",
+    );
+  });
+
+  it("renders embedded resource text from a prompt message array", () => {
+    const message: PromptMessage = {
+      role: "user",
+      content: {
+        type: "resource",
+        resource: { uri: "file:///x", text: "embedded" },
+      },
+    };
+    renderWithMantine(<MessageBubble index={3} message={message} />);
+    expect(screen.getByText('"embedded"')).toBeInTheDocument();
+  });
+
+  it("renders blob resource placeholder", () => {
+    const message: PromptMessage = {
+      role: "user",
+      content: {
+        type: "resource",
+        resource: {
+          uri: "file:///b",
+          blob: "abc",
+          mimeType: "application/octet-stream",
+        },
+      },
+    };
+    renderWithMantine(<MessageBubble index={4} message={message} />);
+    expect(screen.getByText('"[resource: file:///b]"')).toBeInTheDocument();
+  });
+
+  it("renders resource_link content", () => {
+    const message = {
+      role: "user",
+      content: { type: "resource_link", uri: "ui://app" },
+    } as unknown as PromptMessage;
+    renderWithMantine(<MessageBubble index={5} message={message} />);
+    expect(screen.getByText('"[resource: ui://app]"')).toBeInTheDocument();
+  });
+
+  it("renders fallback for unknown content types", () => {
+    const message = {
+      role: "user",
+      content: { type: "weird" },
+    } as unknown as SamplingMessage;
+    renderWithMantine(<MessageBubble index={6} message={message} />);
+    expect(screen.getByText('"[weird]"')).toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { ProgressDisplay } from "./ProgressDisplay";
+
+describe("ProgressDisplay", () => {
+  it("computes percentage from progress and total", () => {
+    renderWithMantine(
+      <ProgressDisplay params={{ progress: 25, total: 100 }} />,
+    );
+    expect(screen.getByText("25%")).toBeInTheDocument();
+  });
+
+  it("falls back to raw progress when total is missing", () => {
+    renderWithMantine(<ProgressDisplay params={{ progress: 42 }} />);
+    expect(screen.getByText("42%")).toBeInTheDocument();
+  });
+
+  it("falls back to raw progress when total is zero", () => {
+    renderWithMantine(<ProgressDisplay params={{ progress: 30, total: 0 }} />);
+    expect(screen.getByText("30%")).toBeInTheDocument();
+  });
+
+  it("renders the label when message is provided", () => {
+    renderWithMantine(
+      <ProgressDisplay
+        params={{ progress: 50, total: 100, message: "Loading" }}
+      />,
+    );
+    expect(screen.getByText("Loading")).toBeInTheDocument();
+  });
+
+  it("renders elapsed when provided", () => {
+    renderWithMantine(
+      <ProgressDisplay params={{ progress: 1 }} elapsed="3s" />,
+    );
+    expect(screen.getByText("3s")).toBeInTheDocument();
+  });
+
+  it("renders the underlying progress bar", () => {
+    renderWithMantine(
+      <ProgressDisplay params={{ progress: 60, total: 100 }} />,
+    );
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { ServerStatusIndicator } from "./ServerStatusIndicator";
+
+describe("ServerStatusIndicator", () => {
+  it("renders the connected label with latency", () => {
+    renderWithMantine(
+      <ServerStatusIndicator status="connected" latencyMs={120} showLabel />,
+    );
+    expect(screen.getByText("Connected (120ms)")).toBeInTheDocument();
+  });
+
+  it("renders just 'Connected' when latency is missing", () => {
+    renderWithMantine(<ServerStatusIndicator status="connected" showLabel />);
+    expect(screen.getByText("Connected")).toBeInTheDocument();
+  });
+
+  it("renders the connecting label", () => {
+    renderWithMantine(<ServerStatusIndicator status="connecting" showLabel />);
+    expect(screen.getByText("Connecting...")).toBeInTheDocument();
+  });
+
+  it("renders the disconnected label", () => {
+    renderWithMantine(
+      <ServerStatusIndicator status="disconnected" showLabel />,
+    );
+    expect(screen.getByText("Disconnected")).toBeInTheDocument();
+  });
+
+  it("renders the error label with retry count", () => {
+    renderWithMantine(
+      <ServerStatusIndicator status="error" retryCount={3} showLabel />,
+    );
+    expect(screen.getByText("Error (3)")).toBeInTheDocument();
+  });
+
+  it("renders just 'Error' without a retry count", () => {
+    renderWithMantine(<ServerStatusIndicator status="error" showLabel />);
+    expect(screen.getByText("Error")).toBeInTheDocument();
+  });
+
+  it("hides label and uses title when showLabel is false", () => {
+    renderWithMantine(
+      <ServerStatusIndicator
+        status="connected"
+        latencyMs={50}
+        showLabel={false}
+      />,
+    );
+    expect(screen.queryByText("Connected (50ms)")).not.toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/SubscribeButton/SubscribeButton.test.tsx

@@ -0,0 +1,32 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import userEvent from "@testing-library/user-event";
+import { SubscribeButton } from "./SubscribeButton";
+
+describe("SubscribeButton", () => {
+  it("renders 'Subscribe' when not subscribed", () => {
+    renderWithMantine(
+      <SubscribeButton subscribed={false} onToggle={() => {}} />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Subscribe" }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders 'Unsubscribe' when subscribed", () => {
+    renderWithMantine(<SubscribeButton subscribed onToggle={() => {}} />);
+    expect(
+      screen.getByRole("button", { name: "Unsubscribe" }),
+    ).toBeInTheDocument();
+  });
+
+  it("invokes onToggle on click", async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    renderWithMantine(
+      <SubscribeButton subscribed={false} onToggle={onToggle} />,
+    );
+    await user.click(screen.getByRole("button", { name: "Subscribe" }));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+});

clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.test.tsx

@@ -0,0 +1,19 @@
+import { describe, it, expect } from "vitest";
+import type { TaskStatus } from "@modelcontextprotocol/sdk/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { TaskStatusBadge } from "./TaskStatusBadge";
+
+describe("TaskStatusBadge", () => {
+  const cases: Array<[TaskStatus, string]> = [
+    ["working", "working"],
+    ["input_required", "input required"],
+    ["completed", "completed"],
+    ["failed", "failed"],
+    ["cancelled", "cancelled"],
+  ];
+
+  it.each(cases)("renders the label for %s", (status, label) => {
+    renderWithMantine(<TaskStatusBadge status={status} />);
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/TransportBadge/TransportBadge.test.tsx

@@ -0,0 +1,20 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { TransportBadge } from "./TransportBadge";
+
+describe("TransportBadge", () => {
+  it("renders STDIO label", () => {
+    renderWithMantine(<TransportBadge transport="stdio" />);
+    expect(screen.getByText("STDIO")).toBeInTheDocument();
+  });
+
+  it("renders HTTP label for sse transport", () => {
+    renderWithMantine(<TransportBadge transport="sse" />);
+    expect(screen.getByText("HTTP")).toBeInTheDocument();
+  });
+
+  it("renders HTTP label for streamable-http transport", () => {
+    renderWithMantine(<TransportBadge transport="streamable-http" />);
+    expect(screen.getByText("HTTP")).toBeInTheDocument();
+  });
+});