diff --git a/src/api/servers.ts b/src/api/servers.ts
index b131491..4f7b6b9 100644
--- a/src/api/servers.ts
+++ b/src/api/servers.ts
@@ -140,6 +140,9 @@ export const serversApi = {
    *
    * Tries the stateless server/discover method (MCP 2026-07-28+) first and
    * falls back to a stateful initialize round-trip for earlier specs.
+   *
+   * Calls POST /v1/mcp-servers/test-handshake. Returns a structured
+   * GatewayHandshakeResponse describing the negotiation outcome.
    */
   testHandshake: (
     request: GatewayHandshakeRequest,
diff --git a/src/components/gateways/VirtualServerDetailsPanel.test.tsx b/src/components/gateways/VirtualServerDetailsPanel.test.tsx
index 63db860..38c7e4d 100644
--- a/src/components/gateways/VirtualServerDetailsPanel.test.tsx
+++ b/src/components/gateways/VirtualServerDetailsPanel.test.tsx
@@ -399,3 +399,149 @@ describe("VirtualServerDetailsPanel render variants", () => {
     expect(allTab).toHaveAttribute("aria-selected", "true");
   });
 });
+
+describe("VirtualServerDetailsPanel test connection tab", () => {
+  const HANDSHAKE_ENDPOINT = "*/v1/mcp-servers/test-handshake";
+
+  beforeEach(() => {
+    mswServer.use(
+      http.get("*/servers/:id/tools", () => HttpResponse.json({ tools: [] })),
+      http.get("*/servers/:id/resources", () => HttpResponse.json({ resources: [] })),
+      http.get("*/servers/:id/prompts", () => HttpResponse.json({ prompts: [] })),
+    );
+  });
+
+  it("renders the Components and Test connection top-level tabs", async () => {
+    render(
+      <VirtualServerDetailsPanel
+        server={makeServer()}
+        error={null}
+        open
+        onClose={vi.fn()}
+        onAddSources={vi.fn()}
+      />,
+    );
+
+    expect(await screen.findByRole("tab", { name: "Components" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Test connection" })).toBeInTheDocument();
+  });
+
+  it("switches to the test panel and shows the handshake form", async () => {
+    const user = userEvent.setup();
+    render(
+      <VirtualServerDetailsPanel
+        server={makeServer()}
+        error={null}
+        open
+        onClose={vi.fn()}
+        onAddSources={vi.fn()}
+      />,
+    );
+
+    await user.click(await screen.findByRole("tab", { name: "Test connection" }));
+
+    expect(screen.getByRole("button", { name: /^test connection$/i })).toBeInTheDocument();
+    expect(screen.getByText(/run a test to see the result here/i)).toBeInTheDocument();
+  });
+
+  it("runs a handshake and displays a successful result", async () => {
+    const user = userEvent.setup();
+    mswServer.use(
+      http.post(HANDSHAKE_ENDPOINT, () =>
+        HttpResponse.json({
+          success: true,
+          latencyMs: 42,
+          serverName: "Test MCP",
+        }),
+      ),
+    );
+
+    render(
+      <VirtualServerDetailsPanel
+        server={makeServer()}
+        error={null}
+        open
+        onClose={vi.fn()}
+        onAddSources={vi.fn()}
+      />,
+    );
+
+    await user.click(await screen.findByRole("tab", { name: "Test connection" }));
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/handshake succeeded/i)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/latency: 42 ms/i)).toBeInTheDocument();
+  });
+
+  it("flags a component-count mismatch using the panel's own aggregated counts", async () => {
+    const user = userEvent.setup();
+    mswServer.use(
+      http.get("*/servers/:id/tools", () =>
+        HttpResponse.json({ tools: [{ id: "t1", name: "tool-1", originalName: "tool-1" }] }),
+      ),
+      http.post(HANDSHAKE_ENDPOINT, () =>
+        HttpResponse.json({
+          success: true,
+          latencyMs: 10,
+          componentCounts: { tools: 0 },
+        }),
+      ),
+    );
+
+    render(
+      <VirtualServerDetailsPanel
+        server={makeServer()}
+        error={null}
+        open
+        onClose={vi.fn()}
+        onAddSources={vi.fn()}
+      />,
+    );
+
+    await user.click(await screen.findByRole("tab", { name: "Test connection" }));
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/handshake succeeded/i)).toBeInTheDocument();
+    });
+    expect(
+      await screen.findByText(/counts don.t match the virtual server.s aggregate/i),
+    ).toBeInTheDocument();
+  });
+
+  it("resets to the components tab when a new server is selected", async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(
+      <VirtualServerDetailsPanel
+        server={makeServer({ id: "s1" })}
+        error={null}
+        open
+        onClose={vi.fn()}
+        onAddSources={vi.fn()}
+      />,
+    );
+
+    await user.click(await screen.findByRole("tab", { name: "Test connection" }));
+    expect(screen.getByRole("button", { name: /^test connection$/i })).toBeInTheDocument();
+
+    // Simulate opening a different server — the panel resets to Components.
+    rerender(
+      <VirtualServerDetailsPanel
+        server={makeServer({ id: "s2" })}
+        error={null}
+        open
+        onClose={vi.fn()}
+        onAddSources={vi.fn()}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole("tab", { name: "Components" })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+    });
+  });
+});
diff --git a/src/components/gateways/VirtualServerDetailsPanel.tsx b/src/components/gateways/VirtualServerDetailsPanel.tsx
index 39dce7a..a244d03 100644
--- a/src/components/gateways/VirtualServerDetailsPanel.tsx
+++ b/src/components/gateways/VirtualServerDetailsPanel.tsx
@@ -12,6 +12,8 @@ import {
   Search,
   Wrench,
 } from "lucide-react";
+import { HandshakeTestPanel } from "@/components/servers/HandshakeTestPanel";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   VisibilityInfoPopover,
   getVisibilityIcon,
@@ -42,6 +44,12 @@ const COMPONENT_FILTER_OPTIONS: Array<{ value: ComponentFilter; labelId: string
   { value: "prompts", labelId: "gateways.details.filter.prompts" },
 ];
 
+type TopTab = "components" | "test";
+
+// Segmented-control styling shared with MCPServerDetailsPanel
+const SEGMENTED_TRIGGER_CLASS =
+  "flex-1 rounded-sm px-3 py-1.5 font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm";
+
 interface Tool {
   id: string;
   name: string;
@@ -142,6 +150,7 @@ export function VirtualServerDetailsPanel({
   const tagFallback = intl.formatMessage({ id: "gateways.details.tagFallback" });
   const notSyncedYet = intl.formatMessage({ id: "gateways.card.notSyncedYet" });
   const tags = (server?.tags ?? []).map((tag, index) => getTagDisplay(tag, index, tagFallback));
+  const [topTab, setTopTab] = useState<TopTab>("components");
   const [sourceFilter, setSourceFilter] = useState<SourceFilter>("all");
   const [componentFilter, setComponentFilter] = useState<ComponentFilter>("all");
   const [searchQuery, setSearchQuery] = useState("");
@@ -272,6 +281,16 @@ export function VirtualServerDetailsPanel({
 
   const allComponents = fetchedComponents.length > 0 ? fetchedComponents : fallbackComponents;
 
+  // The virtual server's own aggregated component counts, used to flag a
+  // mismatch against what the handshake test itself reports.
+  const aggregatedComponentCounts = useMemo(() => {
+    const counts: Record<string, number> = { tools: 0, resources: 0, prompts: 0 };
+    for (const component of allComponents) {
+      counts[component.type] = (counts[component.type] ?? 0) + 1;
+    }
+    return counts;
+  }, [allComponents]);
+
   const sourceIds = useMemo(
     () =>
       Array.from(
@@ -309,9 +328,10 @@ export function VirtualServerDetailsPanel({
 
   const componentsLoading = toolsLoading || resourcesLoading || promptsLoading;
 
-  // Reset filter and search when the panel opens or the selected server changes.
+  // Reset tab, filter and search when the panel opens or the selected server changes.
   useEffect(() => {
     if (!open) return;
+    setTopTab("components");
     setSourceFilter("all");
     setComponentFilter("all");
     setSearchQuery("");
@@ -440,196 +460,226 @@ export function VirtualServerDetailsPanel({
 
               <div className="my-8 h-px bg-border" />
 
-              {(sourcesLoading || sourceTabs.length > 0) && (
-                <div
-                  role="tablist"
-                  aria-label={intl.formatMessage({ id: "gateways.details.filterSources" })}
-                  className="flex max-w-full items-center overflow-x-auto rounded-md bg-muted p-1"
-                >
-                  {[
-                    {
-                      id: "all",
-                      label: intl.formatMessage({ id: "gateways.details.filter.allSources" }),
-                    },
-                    ...sourceTabs,
-                  ].map((source, index, sources) => {
-                    const isSelected = sourceFilter === source.id;
+              <Tabs
+                value={topTab}
+                onValueChange={(v) => setTopTab(v as TopTab)}
+                aria-label="Virtual server details view"
+              >
+                <TabsList className="inline-flex h-10 w-[280px] items-center gap-0 rounded-md bg-muted p-1">
+                  <TabsTrigger value="components" className={SEGMENTED_TRIGGER_CLASS}>
+                    {intl.formatMessage({ id: "gateways.details.components" })}
+                  </TabsTrigger>
+                  <TabsTrigger value="test" className={SEGMENTED_TRIGGER_CLASS}>
+                    {intl.formatMessage({ id: "gateways.card.testConnection" })}
+                  </TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="test" className="mt-8">
+                  <HandshakeTestPanel
+                    key={server.id}
+                    serverUrl={endpoint}
+                    aggregatedCounts={aggregatedComponentCounts}
+                  />
+                </TabsContent>
+
+                <TabsContent value="components" className="mt-8">
+                  {(sourcesLoading || sourceTabs.length > 0) && (
+                    <div
+                      role="tablist"
+                      aria-label={intl.formatMessage({ id: "gateways.details.filterSources" })}
+                      className="flex max-w-full items-center overflow-x-auto rounded-md bg-muted p-1"
+                    >
+                      {[
+                        {
+                          id: "all",
+                          label: intl.formatMessage({ id: "gateways.details.filter.allSources" }),
+                        },
+                        ...sourceTabs,
+                      ].map((source, index, sources) => {
+                        const isSelected = sourceFilter === source.id;
+
+                        return (
+                          <Button
+                            key={source.id}
+                            id={`source-tab-${index}`}
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            role="tab"
+                            aria-selected={isSelected}
+                            tabIndex={isSelected ? 0 : -1}
+                            className={cn(
+                              "h-8 shrink-0 rounded-sm px-4 text-sm font-medium transition-colors",
+                              isSelected
+                                ? "bg-background text-foreground shadow-sm"
+                                : "text-muted-foreground hover:text-foreground",
+                            )}
+                            onClick={() => setSourceFilter(source.id)}
+                            onKeyDown={(e) => handleSourceTabKeyDown(e, index, sources.length)}
+                          >
+                            {source.label}
+                          </Button>
+                        );
+                      })}
+                    </div>
+                  )}
 
-                    return (
+                  <div className="mt-8 flex items-center justify-between gap-4">
+                    <div
+                      role="tablist"
+                      aria-label="Filter components"
+                      className="flex min-w-0 items-center gap-6"
+                    >
+                      {COMPONENT_FILTER_OPTIONS.map((option) => (
+                        <Button
+                          key={option.value}
+                          id={`tab-${option.value}`}
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          role="tab"
+                          aria-selected={componentFilter === option.value}
+                          tabIndex={componentFilter === option.value ? 0 : -1}
+                          className={`text-sm font-semibold transition-colors ${
+                            componentFilter === option.value
+                              ? "text-foreground"
+                              : "text-muted-foreground hover:text-foreground"
+                          }`}
+                          onClick={() => setComponentFilter(option.value)}
+                          onKeyDown={(e) => handleTabKeyDown(e, option.value)}
+                        >
+                          {intl.formatMessage({ id: option.labelId })}
+                        </Button>
+                      ))}
+                    </div>
+                    <div className="flex items-center gap-2">
                       <Button
-                        key={source.id}
-                        id={`source-tab-${index}`}
                         type="button"
                         variant="ghost"
-                        size="sm"
-                        role="tab"
-                        aria-selected={isSelected}
-                        tabIndex={isSelected ? 0 : -1}
-                        className={cn(
-                          "h-8 shrink-0 rounded-sm px-4 text-sm font-medium transition-colors",
-                          isSelected
-                            ? "bg-background text-foreground shadow-sm"
-                            : "text-muted-foreground hover:text-foreground",
-                        )}
-                        onClick={() => setSourceFilter(source.id)}
-                        onKeyDown={(e) => handleSourceTabKeyDown(e, index, sources.length)}
+                        size="icon-xs"
+                        onClick={() => searchInputRef.current?.focus()}
+                        className="size-8 rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                        aria-label="Search components"
                       >
-                        {source.label}
+                        <Search className="size-4" />
                       </Button>
-                    );
-                  })}
-                </div>
-              )}
-
-              <div className="mt-8 flex items-center justify-between gap-4">
-                <div
-                  role="tablist"
-                  aria-label="Filter components"
-                  className="flex min-w-0 items-center gap-6"
-                >
-                  {COMPONENT_FILTER_OPTIONS.map((option) => (
-                    <Button
-                      key={option.value}
-                      id={`tab-${option.value}`}
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      role="tab"
-                      aria-selected={componentFilter === option.value}
-                      tabIndex={componentFilter === option.value ? 0 : -1}
-                      className={`text-sm font-semibold transition-colors ${
-                        componentFilter === option.value
-                          ? "text-foreground"
-                          : "text-muted-foreground hover:text-foreground"
-                      }`}
-                      onClick={() => setComponentFilter(option.value)}
-                      onKeyDown={(e) => handleTabKeyDown(e, option.value)}
-                    >
-                      {intl.formatMessage({ id: option.labelId })}
-                    </Button>
-                  ))}
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon-xs"
-                    onClick={() => searchInputRef.current?.focus()}
-                    className="size-8 rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-                    aria-label="Search components"
-                  >
-                    <Search className="size-4" />
-                  </Button>
-                  <Input
-                    ref={searchInputRef}
-                    type="search"
-                    tabIndex={isSearchExpanded || searchQuery.length > 0 ? 0 : -1}
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    onFocus={() => setIsSearchExpanded(true)}
-                    onBlur={() => setIsSearchExpanded(searchQuery.length > 0)}
-                    placeholder={isSearchExpanded || searchQuery.length > 0 ? "Search..." : ""}
-                    className={cn(
-                      "h-8 rounded-md border-border bg-muted/50 text-sm shadow-none transition-[width,padding,color,background-color,border-color] duration-200 ease-out placeholder:text-muted-foreground focus-visible:bg-background",
-                      isSearchExpanded || searchQuery.length > 0
-                        ? "w-48 px-3 text-foreground"
-                        : "w-0 px-0 text-transparent caret-foreground border-transparent",
-                    )}
-                  />
-                </div>
-              </div>
-
-              {error && (
-                <div
-                  role="alert"
-                  className="mt-6 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive"
-                >
-                  {error.message}
-                </div>
-              )}
-
-              <div
-                role="tabpanel"
-                aria-labelledby={`tab-${componentFilter}`}
-                aria-live="polite"
-                className="mt-5 divide-y divide-transparent"
-              >
-                {componentsLoading && (
-                  <div role="status" className="flex items-center gap-2 py-8 text-muted-foreground">
-                    <Loader2 className="size-4 animate-spin" aria-hidden="true" />
-                    <span>Loading components...</span>
+                      <Input
+                        ref={searchInputRef}
+                        type="search"
+                        tabIndex={isSearchExpanded || searchQuery.length > 0 ? 0 : -1}
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        onFocus={() => setIsSearchExpanded(true)}
+                        onBlur={() => setIsSearchExpanded(searchQuery.length > 0)}
+                        placeholder={isSearchExpanded || searchQuery.length > 0 ? "Search..." : ""}
+                        className={cn(
+                          "h-8 rounded-md border-border bg-muted/50 text-sm shadow-none transition-[width,padding,color,background-color,border-color] duration-200 ease-out placeholder:text-muted-foreground focus-visible:bg-background",
+                          isSearchExpanded || searchQuery.length > 0
+                            ? "w-48 px-3 text-foreground"
+                            : "w-0 px-0 text-transparent caret-foreground border-transparent",
+                        )}
+                      />
+                    </div>
                   </div>
-                )}
 
-                {!componentsLoading &&
-                  visibleComponents.map((component) => {
-                    const title = component.title;
-                    const identifier = getComponentIdentifier(component);
+                  {error && (
+                    <div
+                      role="alert"
+                      className="mt-6 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive"
+                    >
+                      {error.message}
+                    </div>
+                  )}
 
-                    return (
+                  <div
+                    role="tabpanel"
+                    aria-labelledby={`tab-${componentFilter}`}
+                    aria-live="polite"
+                    className="mt-5 divide-y divide-transparent"
+                  >
+                    {componentsLoading && (
                       <div
-                        key={`${component.type}-${component.id}`}
-                        className="grid min-h-10 grid-cols-[128px_minmax(0,1fr)_minmax(180px,0.9fr)_24px] items-center gap-4 py-1 text-sm"
+                        role="status"
+                        className="flex items-center gap-2 py-8 text-muted-foreground"
                       >
-                        <Badge
-                          variant="draft"
-                          className="w-fit rounded-md px-2 py-0.5 text-[12px] font-medium text-muted-foreground"
-                        >
-                          <span className="mr-1.5 inline-flex">
-                            {getComponentIcon(component.type)}
-                          </span>
-                          {getComponentLabel(component.type)}
-                        </Badge>
-                        {title ? (
-                          <>
-                            <span className="min-w-0 truncate text-muted-foreground">{title}</span>
-                            <span className="flex min-w-0 items-center gap-2 font-mono text-[13px] text-muted-foreground">
-                              <span className="truncate">{identifier}</span>
-                              <CopyButton
-                                value={identifier}
-                                label={intl.formatMessage(
-                                  { id: "common.copyValue" },
-                                  { label: title },
-                                )}
-                                className="size-5 text-muted-foreground"
-                              />
-                            </span>
-                          </>
-                        ) : (
-                          <>
-                            <span className="flex min-w-0 items-center gap-2 font-mono text-[13px] text-muted-foreground">
-                              <span className="truncate">{identifier}</span>
-                              <CopyButton
-                                value={identifier}
-                                label={intl.formatMessage(
-                                  { id: "common.copyValue" },
-                                  { label: identifier },
-                                )}
-                                className="size-5 text-muted-foreground"
-                              />
-                            </span>
-                            <span aria-hidden="true" />
-                          </>
-                        )}
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon-xs"
-                          aria-label={`Actions for ${title ?? identifier}`}
-                          className="justify-self-end text-muted-foreground"
-                        >
-                          <EllipsisVertical className="size-4" />
-                        </Button>
+                        <Loader2 className="size-4 animate-spin" aria-hidden="true" />
+                        <span>Loading components...</span>
                       </div>
-                    );
-                  })}
+                    )}
 
-                {!componentsLoading && visibleComponents.length === 0 && (
-                  <div className="py-8 text-sm text-muted-foreground">
-                    No {componentFilter === "all" ? "components" : componentFilter} found
+                    {!componentsLoading &&
+                      visibleComponents.map((component) => {
+                        const title = component.title;
+                        const identifier = getComponentIdentifier(component);
+
+                        return (
+                          <div
+                            key={`${component.type}-${component.id}`}
+                            className="grid min-h-10 grid-cols-[128px_minmax(0,1fr)_minmax(180px,0.9fr)_24px] items-center gap-4 py-1 text-sm"
+                          >
+                            <Badge
+                              variant="draft"
+                              className="w-fit rounded-md px-2 py-0.5 text-[12px] font-medium text-muted-foreground"
+                            >
+                              <span className="mr-1.5 inline-flex">
+                                {getComponentIcon(component.type)}
+                              </span>
+                              {getComponentLabel(component.type)}
+                            </Badge>
+                            {title ? (
+                              <>
+                                <span className="min-w-0 truncate text-muted-foreground">
+                                  {title}
+                                </span>
+                                <span className="flex min-w-0 items-center gap-2 font-mono text-[13px] text-muted-foreground">
+                                  <span className="truncate">{identifier}</span>
+                                  <CopyButton
+                                    value={identifier}
+                                    label={intl.formatMessage(
+                                      { id: "common.copyValue" },
+                                      { label: title },
+                                    )}
+                                    className="size-5 text-muted-foreground"
+                                  />
+                                </span>
+                              </>
+                            ) : (
+                              <>
+                                <span className="flex min-w-0 items-center gap-2 font-mono text-[13px] text-muted-foreground">
+                                  <span className="truncate">{identifier}</span>
+                                  <CopyButton
+                                    value={identifier}
+                                    label={intl.formatMessage(
+                                      { id: "common.copyValue" },
+                                      { label: identifier },
+                                    )}
+                                    className="size-5 text-muted-foreground"
+                                  />
+                                </span>
+                                <span aria-hidden="true" />
+                              </>
+                            )}
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon-xs"
+                              aria-label={`Actions for ${title ?? identifier}`}
+                              className="justify-self-end text-muted-foreground"
+                            >
+                              <EllipsisVertical className="size-4" />
+                            </Button>
+                          </div>
+                        );
+                      })}
+
+                    {!componentsLoading && visibleComponents.length === 0 && (
+                      <div className="py-8 text-sm text-muted-foreground">
+                        No {componentFilter === "all" ? "components" : componentFilter} found
+                      </div>
+                    )}
                   </div>
-                )}
-              </div>
+                </TabsContent>
+              </Tabs>
             </div>
 
             <aside className="relative border-t border-border bg-popover lg:border-l lg:border-t-0">
diff --git a/src/components/servers/HandshakeTestPanel.test.tsx b/src/components/servers/HandshakeTestPanel.test.tsx
new file mode 100644
index 0000000..ff17116
--- /dev/null
+++ b/src/components/servers/HandshakeTestPanel.test.tsx
@@ -0,0 +1,376 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { server } from "@/test/mocks/server";
+import { renderWithProviders as render } from "@/test/test-utils";
+import { HandshakeTestPanel } from "./HandshakeTestPanel";
+
+const TEST_ENDPOINT = "*/v1/mcp-servers/test-handshake";
+
+describe("HandshakeTestPanel", () => {
+  const defaultProps = {
+    serverUrl: "https://mcp.example.com/mcp",
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders with the initial idle state", () => {
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    expect(screen.getByDisplayValue("https://mcp.example.com/mcp")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /^test connection$/i })).toBeInTheDocument();
+    expect(screen.getByText(/run a test to see the result here/i)).toBeInTheDocument();
+  });
+
+  it("displays URL and headers form fields", () => {
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    expect(screen.getByLabelText(/^url/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/headers/i)).toBeInTheDocument();
+  });
+
+  it("calls the handshake endpoint and shows a successful result", async () => {
+    const user = userEvent.setup();
+    let requestBody: Record<string, unknown> | undefined;
+    server.use(
+      http.post(TEST_ENDPOINT, async ({ request }) => {
+        requestBody = (await request.json()) as Record<string, unknown>;
+        return HttpResponse.json({
+          success: true,
+          latencyMs: 55,
+          negotiationPath: "initialize",
+          protocolVersion: "2024-11-05",
+          serverName: "My MCP Server",
+          serverVersion: "1.2.3",
+          componentCounts: { tools: 3, prompts: 1 },
+          countsPartial: false,
+        });
+      }),
+    );
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/handshake succeeded/i)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/latency: 55 ms/i)).toBeInTheDocument();
+    expect(screen.getByText(/initialize/)).toBeInTheDocument();
+    expect(screen.getByText(/My MCP Server/)).toBeInTheDocument();
+
+    // Component count badges
+    expect(screen.getByText("3")).toBeInTheDocument();
+    expect(screen.getByText("tools")).toBeInTheDocument();
+
+    // The wire request carries the expected fields.
+    expect(requestBody).toEqual(
+      expect.objectContaining({ baseUrl: "https://mcp.example.com/mcp" }),
+    );
+  });
+
+  it("renders a failed handshake as an error", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post(TEST_ENDPOINT, () =>
+        HttpResponse.json({
+          success: false,
+          latencyMs: 12,
+          failureClass: "transport",
+          error: "Connection refused",
+        }),
+      ),
+    );
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Connection refused/i)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/transport/i)).toBeInTheDocument();
+  });
+
+  it("surfaces a thrown API error", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post(TEST_ENDPOINT, () => HttpResponse.json({ detail: "Forbidden" }, { status: 403 })),
+    );
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/forbidden/i)).toBeInTheDocument();
+    });
+  });
+
+  it("forwards headers as a JSON object", async () => {
+    const user = userEvent.setup();
+    let requestBody: Record<string, unknown> | undefined;
+    server.use(
+      http.post(TEST_ENDPOINT, async ({ request }) => {
+        requestBody = (await request.json()) as Record<string, unknown>;
+        return HttpResponse.json({ success: true, latencyMs: 10 });
+      }),
+    );
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    await user.type(screen.getByLabelText(/headers/i), '{{"Authorization":"Bearer tok"}');
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/handshake succeeded/i)).toBeInTheDocument();
+    });
+    expect(requestBody).toEqual(
+      expect.objectContaining({ headers: { Authorization: "Bearer tok" } }),
+    );
+  });
+
+  it("requires a URL before running", async () => {
+    const user = userEvent.setup();
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    const urlField = screen.getByLabelText(/^url/i);
+    await user.clear(urlField);
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/url is required/i)).toBeInTheDocument();
+    });
+  });
+
+  it("rejects an invalid URL", async () => {
+    const user = userEvent.setup();
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    const urlField = screen.getByLabelText(/^url/i);
+    await user.clear(urlField);
+    await user.type(urlField, "not-a-url");
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/url must start with http/i)).toBeInTheDocument();
+    });
+  });
+
+  it("validates JSON in the headers field before running", async () => {
+    const user = userEvent.setup();
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    await user.type(screen.getByLabelText(/headers/i), "invalid json");
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/invalid headers json/i)).toBeInTheDocument();
+    });
+  });
+
+  it("shows a Cancel button during a test and aborts on click", async () => {
+    const user = userEvent.setup();
+    let aborted = false;
+    server.use(
+      http.post(TEST_ENDPOINT, async ({ request }) => {
+        await new Promise<void>((resolve) => {
+          request.signal.addEventListener("abort", () => {
+            aborted = true;
+            resolve();
+          });
+        });
+        return HttpResponse.json({ success: true, latencyMs: 1 });
+      }),
+    );
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    const cancelButton = await screen.findByRole("button", { name: /^cancel$/i });
+    await user.click(cancelButton);
+
+    await waitFor(() => expect(aborted).toBe(true));
+    expect(screen.getByText(/run a test to see the result here/i)).toBeInTheDocument();
+  });
+
+  it("cancels the in-flight request when the panel unmounts", async () => {
+    const user = userEvent.setup();
+    let aborted = false;
+    server.use(
+      http.post(TEST_ENDPOINT, async ({ request }) => {
+        await new Promise<void>((resolve) => {
+          request.signal.addEventListener("abort", () => {
+            aborted = true;
+            resolve();
+          });
+        });
+        return HttpResponse.json({ success: true, latencyMs: 1 });
+      }),
+    );
+    const { unmount } = render(<HandshakeTestPanel {...defaultProps} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+    unmount();
+
+    await waitFor(() => expect(aborted).toBe(true));
+  });
+
+  it("clears the URL error as soon as the field is edited", async () => {
+    const user = userEvent.setup();
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    const urlField = screen.getByLabelText(/^url/i);
+    await user.clear(urlField);
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+    await waitFor(() => expect(screen.getByText(/url is required/i)).toBeInTheDocument());
+
+    await user.type(urlField, "https://mcp.example.com/mcp");
+    expect(screen.queryByText(/url is required/i)).not.toBeInTheDocument();
+  });
+
+  it("shows the advertised capabilities", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post(TEST_ENDPOINT, () =>
+        HttpResponse.json({
+          success: true,
+          latencyMs: 20,
+          capabilities: { tools: {}, resources: {}, logging: {} },
+        }),
+      ),
+    );
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/handshake succeeded/i)).toBeInTheDocument();
+    });
+    expect(screen.getByText("tools")).toBeInTheDocument();
+    expect(screen.getByText("resources")).toBeInTheDocument();
+    expect(screen.getByText("logging")).toBeInTheDocument();
+  });
+
+  it("shows the credential source used for the handshake", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post(TEST_ENDPOINT, () =>
+        HttpResponse.json({ success: true, latencyMs: 20, credentialSource: "form" }),
+      ),
+    );
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/handshake succeeded/i)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/headers entered in this form/i)).toBeInTheDocument();
+  });
+
+  it("shows actionable copy for the failure class", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post(TEST_ENDPOINT, () =>
+        HttpResponse.json({
+          success: false,
+          latencyMs: 12,
+          failureClass: "auth",
+          error: "401 Unauthorized",
+        }),
+      ),
+    );
+    render(<HandshakeTestPanel {...defaultProps} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/401 Unauthorized/i)).toBeInTheDocument();
+    });
+    expect(
+      screen.getByText(/authentication failed\. check the credentials or headers/i),
+    ).toBeInTheDocument();
+  });
+
+  it("flags a mismatch between the handshake counts and the virtual server's aggregate", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post(TEST_ENDPOINT, () =>
+        HttpResponse.json({
+          success: true,
+          latencyMs: 20,
+          componentCounts: { tools: 1, resources: 2 },
+        }),
+      ),
+    );
+    render(<HandshakeTestPanel {...defaultProps} aggregatedCounts={{ tools: 3, resources: 2 }} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/handshake succeeded/i)).toBeInTheDocument();
+    });
+    expect(
+      screen.getByText(/counts don.t match the virtual server.s aggregate/i),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTitle("Handshake reported 1; the virtual server aggregates 3."),
+    ).toBeInTheDocument();
+  });
+
+  it("does not show count badges or a mismatch banner when the handshake never returned counts", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post(TEST_ENDPOINT, () =>
+        // Real shape returned when the backend blocks the URL before
+        // attempting a connection (egress allowlist / test policy).
+        HttpResponse.json({
+          success: false,
+          latencyMs: 1,
+          negotiationPath: null,
+          protocolVersion: null,
+          serverName: null,
+          serverVersion: null,
+          capabilities: null,
+          componentCounts: null,
+          countsPartial: false,
+          credentialSource: "none",
+          failureClass: "transport",
+          error: "The MCP server URL is not allowed for testing.",
+          rawPreview: null,
+        }),
+      ),
+    );
+    render(<HandshakeTestPanel {...defaultProps} aggregatedCounts={{ tools: 3, resources: 1 }} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/not allowed for testing/i)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/none — no credential sent/i)).toBeInTheDocument();
+    expect(screen.queryByText(/expected/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/counts don.t match/i)).not.toBeInTheDocument();
+  });
+
+  it("does not flag a mismatch when the handshake counts match the aggregate", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post(TEST_ENDPOINT, () =>
+        HttpResponse.json({
+          success: true,
+          latencyMs: 20,
+          componentCounts: { tools: 3 },
+        }),
+      ),
+    );
+    render(<HandshakeTestPanel {...defaultProps} aggregatedCounts={{ tools: 3 }} />);
+
+    await user.click(screen.getByRole("button", { name: /^test connection$/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/handshake succeeded/i)).toBeInTheDocument();
+    });
+    expect(screen.queryByText(/counts don.t match/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/servers/HandshakeTestPanel.tsx b/src/components/servers/HandshakeTestPanel.tsx
new file mode 100644
index 0000000..58ba7b0
--- /dev/null
+++ b/src/components/servers/HandshakeTestPanel.tsx
@@ -0,0 +1,507 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { z } from "zod";
+import { CircleCheck, CircleAlert, Info, Loader2, TriangleAlert } from "lucide-react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Textarea } from "../ui/textarea";
+import { JsonHighlighter } from "../ui/json-highlighter";
+import { serversApi } from "@/api/servers";
+import type {
+  GatewayHandshakeResponse,
+  GatewayHandshakeResponseFailureClass,
+} from "@/generated/types";
+import { parseApiError } from "@/lib/errorUtils";
+import { cn } from "@/lib/utils";
+
+interface HandshakeTestPanelProps {
+  serverUrl: string;
+  /**
+   * The virtual server's own aggregated component counts (e.g.
+   * `{ tools: 3, resources: 1, prompts: 0 }`), used to flag a mismatch
+   * against the counts the handshake itself reports. A federated source
+   * being unreachable, or filtering having diverged, shows up as a
+   * mismatch here.
+   */
+  aggregatedCounts?: Record<string, number>;
+}
+
+type TestStatus = "idle" | "testing" | "success" | "error";
+
+// Same URL validation as TestConnectionPanel
+const testUrlSchema = z
+  .string()
+  .trim()
+  .min(1, "URL is required.")
+  .refine(
+    (value) => {
+      try {
+        const parsed = new URL(value);
+        return parsed.protocol === "http:" || parsed.protocol === "https:";
+      } catch {
+        return false;
+      }
+    },
+    { message: "URL must start with http:// or https://." },
+  );
+
+type FieldErrors = {
+  url?: string;
+  headers?: string;
+};
+
+function validateUrl(value: string): string | undefined {
+  const result = testUrlSchema.safeParse(value);
+  return result.success ? undefined : result.error.issues[0].message;
+}
+
+function validateHeaders(value: string): string | undefined {
+  if (!value.trim()) return undefined;
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+      return "Headers must be a JSON object.";
+    }
+  } catch (e) {
+    return `Invalid headers JSON: ${e instanceof Error ? e.message : "Parse error"}`;
+  }
+  return undefined;
+}
+
+// Per-class actionable copy. Keys match GatewayHandshakeResponseFailureClass.
+const FAILURE_CLASS_COPY: Record<string, string> = {
+  transport:
+    "Could not reach the server. Check the URL and that the endpoint is publicly reachable.",
+  protocol:
+    "The server responded, but MCP protocol negotiation failed. Check that the URL points to an MCP endpoint.",
+  auth: "Authentication failed. Check the credentials or headers being sent.",
+  invalid_response:
+    "The server returned a response that couldn't be parsed as a valid MCP handshake.",
+};
+
+// Keys match GatewayHandshakeResponseCredentialSource.
+const CREDENTIAL_SOURCE_COPY: Record<string, string> = {
+  stored: "Stored server credential",
+  form: "Headers entered in this form",
+  none: "None — no credential sent",
+};
+
+function FieldLabel({
+  htmlFor,
+  children,
+  required,
+  hint,
+}: {
+  htmlFor?: string;
+  children: React.ReactNode;
+  required?: boolean;
+  hint?: string;
+}) {
+  return (
+    <Label htmlFor={htmlFor} className="flex items-center gap-1 text-sm font-medium">
+      <span>
+        {children}
+        {required && <span className="ml-0.5 text-destructive">*</span>}
+      </span>
+      {hint && (
+        <Info className="size-3.5 text-muted-foreground">
+          <title>{hint}</title>
+        </Info>
+      )}
+    </Label>
+  );
+}
+
+function CountBadge({
+  label,
+  count,
+  expected,
+}: {
+  label: string;
+  count: number;
+  expected?: number;
+}) {
+  const mismatch = expected !== undefined && expected !== count;
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs",
+        mismatch
+          ? "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300"
+          : "bg-muted text-muted-foreground",
+      )}
+      title={
+        mismatch
+          ? `Handshake reported ${count}; the virtual server aggregates ${expected}.`
+          : undefined
+      }
+    >
+      <span className={cn("font-medium", mismatch ? "" : "text-foreground")}>{count}</span>
+      {label}
+      {expected !== undefined && (
+        <span className="text-[10px] opacity-75">/ {expected} expected</span>
+      )}
+      {mismatch && <TriangleAlert className="size-3" aria-hidden="true" />}
+    </span>
+  );
+}
+
+function getCountMismatchKeys(
+  componentCounts: Record<string, number> | null | undefined,
+  aggregatedCounts: Record<string, number> | undefined,
+): string[] {
+  if (!aggregatedCounts) return [];
+  const keys = new Set([...Object.keys(componentCounts ?? {}), ...Object.keys(aggregatedCounts)]);
+  return Array.from(keys).filter((key) => (componentCounts?.[key] ?? 0) !== aggregatedCounts[key]);
+}
+
+function HandshakeResultPanel({
+  status,
+  result,
+  error,
+  aggregatedCounts,
+}: {
+  status: TestStatus;
+  result: GatewayHandshakeResponse;
+  error: string;
+  aggregatedCounts?: Record<string, number>;
+}) {
+  if (status === "idle") {
+    return (
+      <div className="flex flex-1 items-center justify-center p-6 text-center">
+        <p className="text-sm text-muted-foreground">Run a test to see the result here.</p>
+      </div>
+    );
+  }
+
+  if (status === "testing") {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center gap-3 p-6">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">Running handshake…</p>
+      </div>
+    );
+  }
+
+  const succeeded = status === "success";
+  // Only compare against the aggregate when the handshake actually returned
+  // counts — a transport/auth failure that never reached the server has
+  // nothing to compare, and showing "0 / N" badges there would just restate
+  // the failure as a misleading mismatch.
+  const hasHandshakeCounts = result?.componentCounts != null;
+  const mismatchKeys = hasHandshakeCounts
+    ? getCountMismatchKeys(result.componentCounts, aggregatedCounts)
+    : [];
+  const allCountKeys = hasHandshakeCounts
+    ? Array.from(
+        new Set([
+          ...Object.keys(result.componentCounts ?? {}),
+          ...Object.keys(aggregatedCounts ?? {}),
+        ]),
+      )
+    : [];
+
+  return (
+    <div
+      className="relative flex flex-1 flex-col gap-3 overflow-auto p-4"
+      role={succeeded ? "status" : "alert"}
+      aria-live="polite"
+    >
+      {/* Headline */}
+      <div className="flex items-start gap-2">
+        {succeeded ? (
+          <CircleCheck className="mt-0.5 size-4 shrink-0 text-green-500" />
+        ) : (
+          <CircleAlert className="mt-0.5 size-4 shrink-0 text-destructive" />
+        )}
+        <span className="text-sm font-medium text-foreground">
+          {succeeded ? "Handshake succeeded" : (result?.error ?? error ?? "Handshake failed")}
+        </span>
+      </div>
+
+      {/* Credential used — always shown, per security requirement */}
+      {result?.credentialSource && (
+        <p className="pl-6 text-[13px] text-muted-foreground">
+          Credential:{" "}
+          <span className="text-foreground">
+            {CREDENTIAL_SOURCE_COPY[result.credentialSource] ?? result.credentialSource}
+          </span>
+        </p>
+      )}
+
+      {result && (
+        <>
+          {/* Latency */}
+          <p className="pl-6 text-[13px] text-muted-foreground">Latency: {result.latencyMs} ms</p>
+
+          {/* Negotiation path */}
+          {result.negotiationPath && (
+            <p className="pl-6 text-[13px] text-muted-foreground">
+              Path: <span className="font-mono">{result.negotiationPath}</span>
+            </p>
+          )}
+
+          {/* Server identity */}
+          {(result.serverName ?? result.serverVersion ?? result.protocolVersion) && (
+            <div className="space-y-0.5 pl-6 text-[13px] text-muted-foreground">
+              {result.serverName && (
+                <p>
+                  Server: <span className="text-foreground">{result.serverName}</span>
+                  {result.serverVersion && (
+                    <span className="ml-1 text-muted-foreground">v{result.serverVersion}</span>
+                  )}
+                </p>
+              )}
+              {result.protocolVersion && (
+                <p>
+                  Protocol:{" "}
+                  <span className="font-mono text-foreground">{result.protocolVersion}</span>
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Capabilities */}
+          {result.capabilities && Object.keys(result.capabilities).length > 0 && (
+            <div className="pl-6 text-[13px] text-muted-foreground">
+              <p>Capabilities:</p>
+              <div className="mt-1 flex flex-wrap gap-1.5">
+                {Object.keys(result.capabilities).map((capability) => (
+                  <span
+                    key={capability}
+                    className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 font-mono text-xs text-foreground"
+                  >
+                    {capability}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Component counts, cross-checked against the virtual server's own aggregate */}
+          {allCountKeys.length > 0 && (
+            <div className="pl-6">
+              <div className="flex flex-wrap gap-1.5">
+                {allCountKeys.map((key) => (
+                  <CountBadge
+                    key={key}
+                    label={key}
+                    count={result.componentCounts?.[key] ?? 0}
+                    expected={aggregatedCounts?.[key]}
+                  />
+                ))}
+                {result.countsPartial && (
+                  <span className="self-center text-[11px] text-muted-foreground">(partial)</span>
+                )}
+              </div>
+              {mismatchKeys.length > 0 && (
+                <p className="mt-1.5 flex items-start gap-1.5 text-[13px] text-amber-700 dark:text-amber-400">
+                  <TriangleAlert className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+                  <span>
+                    Component counts don&apos;t match the virtual server&apos;s aggregate
+                    {result.countsPartial
+                      ? " (handshake counts are a paginated lower bound, so this may not be a real mismatch)"
+                      : ""}
+                    . This can mean a federated source is unreachable or filtering has diverged.
+                  </span>
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Failure class + actionable copy */}
+          {!succeeded && result.failureClass && (
+            <div className="pl-6 text-[13px] text-muted-foreground">
+              <p>
+                Failure class: <span className="font-mono">{result.failureClass}</span>
+              </p>
+              <p className="mt-0.5 text-foreground">
+                {FAILURE_CLASS_COPY[
+                  result.failureClass as GatewayHandshakeResponseFailureClass & string
+                ] ?? "Check the server URL, credentials, and that it speaks MCP."}
+              </p>
+            </div>
+          )}
+
+          {/* Raw preview */}
+          {result.rawPreview && (
+            <div className="mt-1 space-y-1">
+              <p className="text-[13px] text-muted-foreground">Raw preview:</p>
+              <pre className="max-h-[320px] overflow-auto text-[13px] leading-relaxed break-words whitespace-pre-wrap text-foreground">
+                <code className="break-words">
+                  <JsonHighlighter text={result.rawPreview} />
+                </code>
+              </pre>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function HandshakeTestPanel({ serverUrl, aggregatedCounts }: HandshakeTestPanelProps) {
+  const [status, setStatus] = useState<TestStatus>("idle");
+  const [url, setUrl] = useState<string>(serverUrl);
+  const [headers, setHeaders] = useState<string>("");
+  const [result, setResult] = useState<GatewayHandshakeResponse>(null);
+  const [error, setError] = useState<string>("");
+  const [errors, setErrors] = useState<FieldErrors>({});
+  const abortRef = useRef<AbortController | null>(null);
+
+  const clearError = useCallback((field: keyof FieldErrors) => {
+    setErrors((prev) => (prev[field] ? { ...prev, [field]: undefined } : prev));
+  }, []);
+
+  useEffect(() => () => abortRef.current?.abort(), []);
+
+  const handleTest = useCallback(async () => {
+    setResult(null);
+    setError("");
+
+    const nextErrors: FieldErrors = {
+      url: validateUrl(url),
+      headers: validateHeaders(headers),
+    };
+    setErrors(nextErrors);
+    if (nextErrors.url || nextErrors.headers) {
+      return;
+    }
+
+    const parsedHeaders: Record<string, string> | undefined = headers.trim()
+      ? (JSON.parse(headers) as Record<string, string>)
+      : undefined;
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setStatus("testing");
+    try {
+      const res = await serversApi.testHandshake(
+        {
+          baseUrl: url.trim(),
+          ...(parsedHeaders ? { headers: parsedHeaders } : {}),
+        },
+        controller.signal,
+      );
+      if (controller.signal.aborted) return;
+      setResult(res);
+      setStatus(res?.success ? "success" : "error");
+    } catch (e) {
+      if (controller.signal.aborted) return;
+      setResult(null);
+      setStatus("error");
+      setError(parseApiError(e, "Handshake test failed. Please try again."));
+    }
+  }, [url, headers]);
+
+  const handleCancel = useCallback(() => {
+    abortRef.current?.abort();
+    setStatus("idle");
+  }, []);
+
+  const isTesting = status === "testing";
+  const hasResult = status === "success" || status === "error";
+
+  return (
+    <div className="@container space-y-6">
+      <div className="grid gap-6 @3xl:grid-cols-2">
+        {/* Left column — request form */}
+        <div className="space-y-4">
+          {/* URL */}
+          <div className="space-y-2">
+            <FieldLabel htmlFor="handshake-url" required hint="The MCP server URL to test.">
+              URL
+            </FieldLabel>
+            <Input
+              id="handshake-url"
+              value={url}
+              onChange={(e) => {
+                setUrl(e.target.value);
+                clearError("url");
+              }}
+              onBlur={() => setErrors((prev) => ({ ...prev, url: validateUrl(url) }))}
+              placeholder="https://mcp.example.com/mcp"
+              disabled={isTesting}
+              aria-invalid={!!errors.url}
+              aria-describedby={errors.url ? "handshake-url-error" : undefined}
+              className="bg-transparent dark:bg-transparent"
+            />
+            {errors.url && (
+              <p id="handshake-url-error" className="text-sm text-red-500">
+                {errors.url}
+              </p>
+            )}
+          </div>
+
+          {/* Headers */}
+          <div className="space-y-2">
+            <FieldLabel
+              htmlFor="handshake-headers"
+              hint="Optional headers as a JSON object (e.g. Authorization)."
+            >
+              Headers
+            </FieldLabel>
+            <Textarea
+              id="handshake-headers"
+              value={headers}
+              onChange={(e) => {
+                setHeaders(e.target.value);
+                clearError("headers");
+              }}
+              onBlur={() => setErrors((prev) => ({ ...prev, headers: validateHeaders(headers) }))}
+              placeholder='{"Authorization": "Bearer …"}'
+              className="min-h-[96px] bg-transparent font-mono text-sm focus-visible:ring-1 focus-visible:ring-offset-0"
+              disabled={isTesting}
+              aria-invalid={!!errors.headers}
+              aria-describedby={errors.headers ? "handshake-headers-error" : undefined}
+            />
+            {errors.headers && (
+              <p id="handshake-headers-error" className="text-sm text-red-500">
+                {errors.headers}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Right column — action button + result panel */}
+        <div className="flex flex-col gap-2">
+          <div className="flex h-5 items-end justify-end gap-3">
+            {isTesting && (
+              <Button variant="ghost" onClick={handleCancel}>
+                Cancel
+              </Button>
+            )}
+            <Button onClick={handleTest} disabled={isTesting}>
+              {isTesting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Running test…
+                </>
+              ) : hasResult ? (
+                "Re-test connection"
+              ) : (
+                "Test connection"
+              )}
+            </Button>
+          </div>
+
+          <div
+            className={cn(
+              "flex min-h-[200px] flex-1 flex-col overflow-hidden rounded-md border border-input bg-transparent",
+            )}
+          >
+            <HandshakeResultPanel
+              status={status}
+              result={result}
+              error={error}
+              aggregatedCounts={aggregatedCounts}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}