diff --git a/e2e/agents.spec.ts b/e2e/agents.spec.ts
index 37acac83..9eeb2ed3 100644
--- a/e2e/agents.spec.ts
+++ b/e2e/agents.spec.ts
@@ -63,6 +63,70 @@ async function mockAgentMutation(
   );
 }
 
+const FOUND_CARD = {
+  found: true,
+  outcome: "found",
+  detectedVersion: "1.0",
+  card: {
+    name: "Visual Router",
+    description: "Routes visual-production briefs to vendors.",
+    version: "1.1.0",
+    supportedInterfaces: [
+      { url: "https://agent.example.com/rpc", protocolBinding: "JSONRPC", protocolVersion: "1.0" },
+    ],
+    skills: [
+      { id: "fit", name: "Vendor-fit routing" },
+      { id: "hybrid", name: "Hybrid production routing" },
+    ],
+    securitySchemes: { bearerAuth: { httpAuthSecurityScheme: { scheme: "bearer" } } },
+    securityRequirements: [{ schemes: { bearerAuth: {} } }],
+  },
+  suggestedAgent: {
+    name: "Visual Router",
+    description: "Routes visual-production briefs to vendors.",
+    endpoint_url: "https://agent.example.com/rpc",
+    protocol_version: "1.0",
+    version: "1.1.0",
+    auth_type: "bearer",
+  },
+  warnings: [],
+};
+
+/** Stubs POST <anything>/a2a/fetch-card and records the request bodies. */
+async function mockFetchCard(page: Page, result: unknown, status = 200) {
+  const bodies: unknown[] = [];
+  await page.route(
+    (url) => url.pathname.endsWith("/a2a/fetch-card"),
+    async (route) => {
+      bodies.push(route.request().postDataJSON());
+      await json(route, result, status);
+    },
+  );
+  return bodies;
+}
+
+/** Stubs POST <anything>/a2a (register) and records the request bodies. */
+async function mockRegisterAgent(page: Page, respond: (route: Route) => Promise<void> | void) {
+  const bodies: Array<Record<string, unknown>> = [];
+  await page.route(
+    (url) => /\/a2a\/?$/.test(url.pathname),
+    async (route) => {
+      if (route.request().method() !== "POST") return route.fallback();
+      bodies.push(route.request().postDataJSON());
+      return respond(route);
+    },
+  );
+  return bodies;
+}
+
+async function startConnect(page: Page, url = "https://agent.example.com") {
+  await page.getByRole("button", { name: /Connect agent/ }).click();
+  await page.getByPlaceholder("Add URL for a running agent...").fill(url);
+  await page.getByRole("button", { name: "Continue" }).click();
+}
+
+const CARD_UNAVAILABLE = "Agent card not available: add the details for a running agent manually.";
+
 const toast = (page: Page, text: RegExp) =>
   page.locator("[data-sonner-toast]").filter({ hasText: text });
 
@@ -116,6 +180,278 @@ test.describe("Agents page", () => {
     });
   });
 
+  test.describe("connect an agent that publishes a card", () => {
+    test("reads the card, collects the key and registers the agent", async ({ page }) => {
+      let registered = false;
+      await mockAgentList(page, () =>
+        registered ? [makeAgent("visual-router", { name: "Visual Router" })] : [],
+      );
+      const fetchBodies = await mockFetchCard(page, FOUND_CARD);
+      const createBodies = await mockRegisterAgent(page, async (route) => {
+        registered = true;
+        await json(route, makeAgent("visual-router", { name: "Visual Router" }), 201);
+      });
+
+      await page.goto(APP.AGENTS);
+      await startConnect(page);
+
+      // Review: what the card declares
+      await expect(page.getByRole("heading", { name: "Visual Router" })).toBeVisible();
+      await expect(page.getByText("agent v1.1.0")).toBeVisible();
+      await expect(page.getByText("Skills (2)")).toBeVisible();
+      await expect(page.getByText("Vendor-fit routing")).toBeVisible();
+      await expect(page.getByText("agent.example.com", { exact: true })).toBeVisible();
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      // Authenticate and register
+      await expect(page.getByRole("heading", { name: "Authenticate agent" })).toBeVisible();
+      await page.getByLabel(/Bearer token/i).fill("s3cret");
+      await page.getByRole("button", { name: "Connect" }).click();
+
+      await expect(toast(page, /Connected Visual Router/)).toBeVisible();
+      await expect(page.getByText("Visual Router", { exact: true })).toBeVisible();
+      await expect(page.getByPlaceholder("Add URL for a running agent...")).toBeHidden();
+
+      expect(fetchBodies).toEqual([{ baseUrl: "https://agent.example.com" }]);
+      expect(createBodies).toHaveLength(1);
+      expect(createBodies[0]).toMatchObject({
+        agent: {
+          name: "Visual Router",
+          endpoint_url: "https://agent.example.com/rpc",
+          auth_type: "bearer",
+          auth_token: "s3cret",
+        },
+        visibility: "public",
+      });
+    });
+
+    test("does not register until the required key is entered", async ({ page }) => {
+      await mockAgentList(page, []);
+      await mockFetchCard(page, FOUND_CARD);
+      const createBodies = await mockRegisterAgent(page, (route) => json(route, {}, 201));
+
+      await page.goto(APP.AGENTS);
+      await startConnect(page);
+      await page.getByRole("button", { name: "Continue" }).click();
+      await page.getByRole("button", { name: "Connect" }).click();
+
+      await expect(page.getByText("Enter the credentials the agent requires.")).toBeVisible();
+      expect(createBodies).toHaveLength(0);
+    });
+
+    test("shows the server's reason and keeps the form when registration fails", async ({
+      page,
+    }) => {
+      await mockAgentList(page, []);
+      await mockFetchCard(page, FOUND_CARD);
+      await mockRegisterAgent(page, (route) =>
+        json(route, { detail: "Agent name already exists" }, 409),
+      );
+
+      await page.goto(APP.AGENTS);
+      await startConnect(page);
+      await page.getByRole("button", { name: "Continue" }).click();
+      await page.getByLabel(/Bearer token/i).fill("s3cret");
+      await page.getByRole("button", { name: "Connect" }).click();
+
+      await expect(page.getByText("Agent name already exists")).toBeVisible();
+      await expect(page.getByRole("heading", { name: "Authenticate agent" })).toBeVisible();
+    });
+
+    test("goes back from the review to the URL step with the URL kept", async ({ page }) => {
+      await mockAgentList(page, []);
+      await mockFetchCard(page, FOUND_CARD);
+
+      await page.goto(APP.AGENTS);
+      await startConnect(page, "https://agent.example.com");
+      await expect(page.getByRole("heading", { name: "Visual Router" })).toBeVisible();
+      await page.getByRole("button", { name: "Back" }).click();
+
+      await expect(page.getByPlaceholder("Add URL for a running agent...")).toHaveValue(
+        "https://agent.example.com",
+      );
+    });
+
+    test("returns to the list on Cancel without registering anything", async ({ page }) => {
+      await mockAgentList(page, [ALPHA]);
+      const createBodies = await mockRegisterAgent(page, (route) => json(route, {}, 201));
+
+      await page.goto(APP.AGENTS);
+      await page.getByRole("button", { name: /Connect agent/ }).click();
+      await page.getByRole("button", { name: "Cancel" }).click();
+
+      await expect(page.getByText("Agent alpha")).toBeVisible();
+      expect(createBodies).toHaveLength(0);
+    });
+
+    test("rejects a URL that is not http(s) without calling the gateway", async ({ page }) => {
+      await mockAgentList(page, []);
+      const fetchBodies = await mockFetchCard(page, FOUND_CARD);
+
+      await page.goto(APP.AGENTS);
+      await startConnect(page, "ftp://agent.example.com");
+
+      await expect(page.getByText("Enter a valid http or https URL.")).toBeVisible();
+      expect(fetchBodies).toHaveLength(0);
+    });
+
+    for (const [name, respond] of [
+      ["publishes no card", (route: Route) => json(route, { found: false, outcome: "no_card" })],
+      [
+        "needs credentials to read its card",
+        (route: Route) =>
+          json(route, { found: false, outcome: "auth_required", authScheme: "Bearer" }),
+      ],
+      [
+        "cannot be reached",
+        (route: Route) => json(route, { found: false, outcome: "unreachable" }),
+      ],
+      [
+        "is refused by the gateway",
+        (route: Route) => json(route, { detail: "Insufficient permissions" }, 403),
+      ],
+    ] as const) {
+      test(`says the card is not available and opens manual entry when the agent ${name}`, async ({
+        page,
+      }) => {
+        await mockAgentList(page, []);
+        await page.route(
+          (url) => url.pathname.endsWith("/a2a/fetch-card"),
+          (route) => respond(route),
+        );
+
+        await page.goto(APP.AGENTS);
+        await startConnect(page);
+
+        await expect(page.getByText(CARD_UNAVAILABLE)).toBeVisible();
+        await expect(page.getByRole("button", { name: "Enter manually" })).toHaveAttribute(
+          "aria-expanded",
+          "true",
+        );
+        await expect(page.getByPlaceholder("Add an agent name")).toBeVisible();
+      });
+    }
+  });
+
+  test.describe("enter an agent manually", () => {
+    const fillRequired = async (page: Page) => {
+      await page.getByPlaceholder("Add an agent name").fill("Echo agent");
+      await page.getByPlaceholder("https://agents.example.com/a2a").fill("http://127.0.0.1:9100");
+    };
+
+    test("is collapsed until expanded", async ({ page }) => {
+      await mockAgentList(page, []);
+
+      await page.goto(APP.AGENTS);
+      await page.getByRole("button", { name: /Connect agent/ }).click();
+
+      const toggle = page.getByRole("button", { name: "Enter manually" });
+      await expect(toggle).toHaveAttribute("aria-expanded", "false");
+      await expect(page.getByPlaceholder("Add an agent name")).toBeHidden();
+
+      await toggle.click();
+
+      await expect(page.getByPlaceholder("Add an agent name")).toBeVisible();
+      await expect(page.getByRole("radio", { name: "JSON-RPC" })).toBeChecked();
+      await expect(page.getByRole("radio", { name: "A2A 1.0" })).toBeChecked();
+      await expect(page.getByRole("radio", { name: "None" })).toBeChecked();
+    });
+
+    test("registers an agent from the details, with credentials", async ({ page }) => {
+      let registered = false;
+      await mockAgentList(page, () =>
+        registered ? [makeAgent("echo", { name: "Echo agent" })] : [],
+      );
+      const fetchBodies = await mockFetchCard(page, { found: false, outcome: "no_card" });
+      const createBodies = await mockRegisterAgent(page, async (route) => {
+        registered = true;
+        await json(route, makeAgent("echo", { name: "Echo agent" }), 201);
+      });
+
+      await page.goto(APP.AGENTS);
+      await startConnect(page, "https://agent.example.com/agent.json");
+      await expect(page.getByText(CARD_UNAVAILABLE)).toBeVisible();
+
+      await fillRequired(page);
+      await page.getByRole("radio", { name: "A2A 0.3" }).click();
+      // The radio is visually hidden; users click its tab label.
+      await page.locator('label[for="agent-auth-bearer"]').click();
+      await page.getByPlaceholder("Paste bearer token...").fill("s3cret");
+      await page.getByPlaceholder("Add optional tags separated with commas").fill("testing, echo");
+      await page.getByPlaceholder("Add an optional description...").fill("Echoes text back");
+      await page.getByRole("button", { name: "Connect" }).click();
+
+      await expect(toast(page, /Connected Echo agent/)).toBeVisible();
+      await expect(page.getByText("Echo agent", { exact: true })).toBeVisible();
+
+      expect(fetchBodies).toHaveLength(1);
+      expect(createBodies).toHaveLength(1);
+      expect(createBodies[0]).toMatchObject({
+        agent: {
+          name: "Echo agent",
+          endpoint_url: "http://127.0.0.1:9100",
+          protocol_version: "0.3",
+          auth_type: "bearer",
+          auth_token: "s3cret",
+          description: "Echoes text back",
+          tags: ["testing", "echo"],
+        },
+        visibility: "public",
+      });
+    });
+
+    test("registers without reading a card or needing the URL", async ({ page }) => {
+      await mockAgentList(page, []);
+      const fetchBodies = await mockFetchCard(page, FOUND_CARD);
+      const createBodies = await mockRegisterAgent(page, (route) =>
+        json(route, makeAgent("echo", { name: "Echo agent" }), 201),
+      );
+
+      await page.goto(APP.AGENTS);
+      await page.getByRole("button", { name: /Connect agent/ }).click();
+      await page.getByRole("button", { name: "Enter manually" }).click();
+      await fillRequired(page);
+      await page.getByRole("button", { name: "Connect" }).click();
+
+      await expect(toast(page, /Connected Echo agent/)).toBeVisible();
+      expect(fetchBodies).toHaveLength(0);
+      expect(createBodies).toHaveLength(1);
+    });
+
+    test("needs a name and a valid endpoint before registering", async ({ page }) => {
+      await mockAgentList(page, []);
+      const createBodies = await mockRegisterAgent(page, (route) => json(route, {}, 201));
+
+      await page.goto(APP.AGENTS);
+      await page.getByRole("button", { name: /Connect agent/ }).click();
+      await page.getByRole("button", { name: "Enter manually" }).click();
+      await page.getByPlaceholder("https://agents.example.com/a2a").fill("ftp://nope");
+      await page.getByRole("button", { name: "Connect" }).click();
+
+      await expect(page.getByText("Enter a name for the agent.")).toBeVisible();
+      await expect(page.getByText("Enter a valid http or https endpoint URL.")).toBeVisible();
+      expect(createBodies).toHaveLength(0);
+    });
+
+    test("shows the server's reason and keeps the form when registration fails", async ({
+      page,
+    }) => {
+      await mockAgentList(page, []);
+      await mockRegisterAgent(page, (route) =>
+        json(route, { detail: "Agent name already exists" }, 409),
+      );
+
+      await page.goto(APP.AGENTS);
+      await page.getByRole("button", { name: /Connect agent/ }).click();
+      await page.getByRole("button", { name: "Enter manually" }).click();
+      await fillRequired(page);
+      await page.getByRole("button", { name: "Connect" }).click();
+
+      await expect(page.getByText("Agent name already exists")).toBeVisible();
+      await expect(page.getByPlaceholder("Add an agent name")).toHaveValue("Echo agent");
+    });
+  });
+
   test.describe("list", () => {
     test("renders a card per agent with its status indicator", async ({ page }) => {
       await mockAgentList(page, [ALPHA, BETA]);
@@ -128,6 +464,34 @@ test.describe("Agents page", () => {
       await expect(page.getByRole("img", { name: "Inactive", exact: true })).toHaveCount(1);
     });
 
+    test("shows the agent's skills with a count, and not its tags", async ({ page }) => {
+      await mockAgentList(page, [
+        makeAgent("skilled", {
+          name: "Skilled agent",
+          tags: [{ id: "billing", label: "billing" }],
+          capabilities: {
+            skills: [
+              { id: "echo", name: "Echo" },
+              { id: "route", name: "Route" },
+            ],
+          },
+        }),
+        makeAgent("plain", { name: "Plain agent", tags: [{ id: "ops", label: "ops" }] }),
+      ]);
+
+      await page.goto(APP.AGENTS);
+
+      const skilled = page.locator('[data-slot="card"]').filter({ hasText: "Skilled agent" });
+      await expect(skilled.getByText("2 skills")).toBeVisible();
+      await expect(skilled.getByText("Echo")).toBeVisible();
+      await expect(skilled.getByText("Route")).toBeVisible();
+      await expect(page.getByText("billing")).toBeHidden();
+      await expect(page.getByText("ops", { exact: true })).toBeHidden();
+
+      const plain = page.locator('[data-slot="card"]').filter({ hasText: "Plain agent" });
+      await expect(plain.getByText(/skills?$/)).toBeHidden();
+    });
+
     test("requests disabled agents too (include_inactive=true)", async ({ page }) => {
       let requestedUrl = "";
       await page.route(
diff --git a/src/api/agents.test.ts b/src/api/agents.test.ts
new file mode 100644
index 00000000..edf33a7e
--- /dev/null
+++ b/src/api/agents.test.ts
@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { agentsApi } from "./agents";
+import { setCsrfToken } from "./client";
+
+const json = (body: unknown, status = 200) =>
+  new Response(JSON.stringify(body), { status, headers: { "Content-Type": "application/json" } });
+
+describe("agentsApi", () => {
+  const mockFetch = vi.fn();
+
+  beforeEach(() => {
+    vi.stubGlobal("fetch", mockFetch);
+    vi.clearAllMocks();
+    setCsrfToken("test-csrf-token");
+  });
+
+  afterEach(() => {
+    setCsrfToken(null);
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  describe("fetchCard", () => {
+    it("POSTs the URL as baseUrl to /v1/a2a/fetch-card and returns the result", async () => {
+      const result = { found: false, outcome: "no_card" };
+      mockFetch.mockResolvedValueOnce(json(result));
+
+      await expect(agentsApi.fetchCard("https://agent.example.com")).resolves.toEqual(result);
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.stringContaining("/api/v1/a2a/fetch-card"),
+        expect.objectContaining({
+          method: "POST",
+          body: JSON.stringify({ baseUrl: "https://agent.example.com" }),
+        }),
+      );
+    });
+  });
+
+  describe("create", () => {
+    it("POSTs the embedded body (agent, visibility, team_id) to /v1/a2a", async () => {
+      const body = {
+        agent: { name: "Alpha", endpoint_url: "https://agent.example.com/rpc" },
+        visibility: "team",
+        team_id: "team-1",
+      };
+      mockFetch.mockResolvedValueOnce(json({ id: "a1", name: "Alpha" }, 201));
+
+      await agentsApi.create(body);
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.stringMatching(/\/api\/v1\/a2a$/),
+        expect.objectContaining({ method: "POST", body: JSON.stringify(body) }),
+      );
+    });
+  });
+
+  describe("setState / delete", () => {
+    it("POSTs /v1/a2a/:id/state with the activate flag", async () => {
+      mockFetch.mockResolvedValueOnce(json({ id: "a1", enabled: false }));
+
+      await agentsApi.setState("a1", false);
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.stringContaining("/api/v1/a2a/a1/state?activate=false"),
+        expect.objectContaining({ method: "POST" }),
+      );
+    });
+
+    it("DELETEs /v1/a2a/:id", async () => {
+      mockFetch.mockResolvedValueOnce(json({ status: "success" }));
+
+      await agentsApi.delete("a1");
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.stringMatching(/\/api\/v1\/a2a\/a1$/),
+        expect.objectContaining({ method: "DELETE" }),
+      );
+    });
+
+    it.each([
+      ["", "Invalid agent ID"],
+      ["../etc", "Invalid agent ID format"],
+      ["a/b", "Invalid agent ID format"],
+    ])("rejects the unsafe id %j before any request", (id, message) => {
+      expect(() => agentsApi.delete(id)).toThrow(message);
+      expect(() => agentsApi.setState(id, true)).toThrow(message);
+      expect(mockFetch).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/api/agents.ts b/src/api/agents.ts
index 7de454f7..85d35098 100644
--- a/src/api/agents.ts
+++ b/src/api/agents.ts
@@ -3,7 +3,8 @@
  */
 
 import { api } from "./client";
-import type { A2AAgentRead } from "@/generated/types";
+import type { A2AAgentRead, BodyCreateA2aAgentV1A2aPost } from "@/generated/types";
+import type { FetchCardResult } from "@/types/agentCard";
 
 /**
  * Validates an agent ID to prevent path traversal and injection attacks
@@ -28,6 +29,25 @@ function validateAgentId(id: string): string {
 }
 
 export const agentsApi = {
+  /**
+   * Read an Agent Card from an endpoint that is not registered yet.
+   *
+   * A reachable host that publishes no card, one that wants credentials, and an
+   * unreachable one all come back as 200 with a distinct `outcome`; only a
+   * missing permission or a malformed request is an error.
+   */
+  fetchCard: (baseUrl: string): Promise<FetchCardResult> => {
+    return api.post("/v1/a2a/fetch-card", { baseUrl });
+  },
+
+  /**
+   * Register an agent. The route embeds its body parameters, so the agent
+   * fields travel under `agent` beside `team_id` and `visibility`.
+   */
+  create: (body: BodyCreateA2aAgentV1A2aPost): Promise<A2AAgentRead> => {
+    return api.post("/v1/a2a", body);
+  },
+
   /**
    * Enable or disable an agent. Returns the agent as stored after the change.
    */
diff --git a/src/components/agents/ConnectAgentForm.test.tsx b/src/components/agents/ConnectAgentForm.test.tsx
new file mode 100644
index 00000000..9f6225b7
--- /dev/null
+++ b/src/components/agents/ConnectAgentForm.test.tsx
@@ -0,0 +1,704 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+vi.mock("@/auth/AuthContext", () => ({
+  useAuthContext: () => ({
+    user: { email: "test@example.com", is_admin: true, is_active: true },
+    isAuthenticated: true,
+    isLoading: false,
+    selectedTeamId: null,
+    login: vi.fn(),
+    logout: vi.fn(),
+    setSelectedTeamId: vi.fn(),
+    hasPermission: () => true,
+    permissionsLoading: false,
+  }),
+}));
+
+import userEvent from "@testing-library/user-event";
+import { screen, waitFor } from "@testing-library/react";
+import { http, HttpResponse } from "msw";
+import { server } from "@/test/mocks/server";
+import { renderWithProviders } from "@/test/test-utils";
+import { ConnectAgentForm } from "./ConnectAgentForm";
+import type { FetchCardResult, SuggestedAgent } from "@/types/agentCard";
+
+const CARD_URL = "https://agent.example.com";
+const URL_PLACEHOLDER = "Add URL for a running agent...";
+const CARD_UNAVAILABLE = "Agent card not available: add the details for a running agent manually.";
+const NAME_PLACEHOLDER = "Add an agent name";
+const ENDPOINT_PLACEHOLDER = "https://agents.example.com/a2a";
+
+function foundResult(suggested: SuggestedAgent = {}, warnings: string[] = []): FetchCardResult {
+  return {
+    found: true,
+    outcome: "found",
+    sourceUrl: `${CARD_URL}/.well-known/agent-card.json`,
+    detectedVersion: "1.0",
+    card: {
+      name: "Visual Router",
+      description: "Routes briefs to vendors.",
+      version: "1.1.0",
+      supportedInterfaces: [
+        {
+          url: "https://agent.example.com/rpc",
+          protocolBinding: "JSONRPC",
+          protocolVersion: "1.0",
+        },
+        {
+          url: "https://agent.example.com/http",
+          protocolBinding: "HTTP+JSON",
+          protocolVersion: "1.0",
+        },
+      ],
+      skills: [
+        { id: "fit", name: "Vendor-fit routing" },
+        { id: "hybrid", name: "Hybrid production routing" },
+      ],
+      securitySchemes: { bearerAuth: { httpAuthSecurityScheme: { scheme: "bearer" } } },
+      securityRequirements: [{ schemes: { bearerAuth: {} } }],
+    },
+    suggestedAgent: {
+      name: "Visual Router",
+      description: "Routes briefs to vendors.",
+      endpoint_url: "https://agent.example.com/rpc",
+      protocol_version: "1.0",
+      version: "1.1.0",
+      capabilities: { streaming: false, skills: [] },
+      ...suggested,
+    },
+    warnings,
+  };
+}
+
+function mockFetchCard(result: FetchCardResult | (() => Response)) {
+  server.use(
+    http.post("/api/v1/a2a/fetch-card", () =>
+      typeof result === "function" ? result() : HttpResponse.json(result),
+    ),
+  );
+}
+
+/** Captures the body of POST /api/v1/a2a. */
+function mockCreate(
+  respond: () => Response = () =>
+    HttpResponse.json({ id: "a1", name: "Visual Router" }, { status: 201 }),
+) {
+  const captured: { body?: Record<string, unknown>; count: number } = { count: 0 };
+  server.use(
+    http.post("/api/v1/a2a", async ({ request }) => {
+      captured.count += 1;
+      captured.body = (await request.json()) as Record<string, unknown>;
+      return respond();
+    }),
+  );
+  return captured;
+}
+
+async function submitUrl(user: ReturnType<typeof userEvent.setup>, url = CARD_URL) {
+  await user.type(await screen.findByPlaceholderText(URL_PLACEHOLDER), url);
+  await user.click(screen.getByRole("button", { name: "Continue" }));
+}
+
+describe("ConnectAgentForm", () => {
+  const onCancel = vi.fn();
+  const onCreated = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  function setup() {
+    renderWithProviders(<ConnectAgentForm onCancel={onCancel} onCreated={onCreated} />);
+    return userEvent.setup();
+  }
+
+  describe("URL step", () => {
+    it("rejects a value that is not an http(s) URL without calling the API", async () => {
+      let fetched = false;
+      server.use(
+        http.post("/api/v1/a2a/fetch-card", () => {
+          fetched = true;
+          return HttpResponse.json({});
+        }),
+      );
+      const user = setup();
+
+      await submitUrl(user, "ftp://agent.example.com");
+
+      expect(await screen.findByText("Enter a valid http or https URL.")).toBeInTheDocument();
+      expect(fetched).toBe(false);
+    });
+
+    it("sends the trimmed URL as baseUrl", async () => {
+      let body: unknown;
+      server.use(
+        http.post("/api/v1/a2a/fetch-card", async ({ request }) => {
+          body = await request.json();
+          return HttpResponse.json(foundResult());
+        }),
+      );
+      const user = setup();
+
+      await submitUrl(user, `  ${CARD_URL}  `);
+
+      await screen.findByText("Visual Router");
+      expect(body).toEqual({ baseUrl: CARD_URL });
+    });
+
+    it.each([
+      ["no card is published", () => HttpResponse.json({ found: false, outcome: "no_card" })],
+      [
+        "credentials are needed to read it",
+        () => HttpResponse.json({ found: false, outcome: "auth_required", authScheme: "Bearer" }),
+      ],
+      [
+        "the agent is unreachable",
+        () => HttpResponse.json({ found: false, outcome: "unreachable" }),
+      ],
+      [
+        "the request is refused",
+        () => HttpResponse.json({ detail: "Insufficient permissions" }, { status: 403 }),
+      ],
+      ["the gateway errors", () => HttpResponse.json({ detail: "boom" }, { status: 500 })],
+    ])("says the card is not available and opens manual entry when %s", async (_name, respond) => {
+      mockFetchCard(respond);
+      const user = setup();
+
+      await submitUrl(user);
+
+      expect(await screen.findByText(CARD_UNAVAILABLE)).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Enter manually" })).toHaveAttribute(
+        "aria-expanded",
+        "true",
+      );
+      expect(screen.getByPlaceholderText(NAME_PLACEHOLDER)).toBeVisible();
+      expect(screen.queryByText("Visual Router")).not.toBeInTheDocument();
+      // The server's own wording is not shown; the message is the same for every failure.
+      expect(screen.queryByText("Insufficient permissions")).not.toBeInTheDocument();
+    });
+
+    it("clears the message once the URL is edited, but keeps manual entry open", async () => {
+      mockFetchCard({ found: false, outcome: "no_card" });
+      const user = setup();
+
+      await submitUrl(user);
+      await screen.findByText(CARD_UNAVAILABLE);
+      await user.type(screen.getByPlaceholderText(URL_PLACEHOLDER), "/x");
+
+      expect(screen.queryByText(CARD_UNAVAILABLE)).not.toBeInTheDocument();
+      expect(screen.getByPlaceholderText(NAME_PLACEHOLDER)).toBeVisible();
+    });
+
+    it("leaves the form from Cancel and from Back", async () => {
+      const user = setup();
+
+      await user.click(await screen.findByRole("button", { name: "Cancel" }));
+      await user.click(screen.getByRole("button", { name: "Back" }));
+
+      expect(onCancel).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("review step", () => {
+    it("shows what the card declares", async () => {
+      mockFetchCard(foundResult());
+      const user = setup();
+
+      await submitUrl(user);
+
+      expect(await screen.findByText("Visual Router")).toBeInTheDocument();
+      expect(screen.getByText("agent v1.1.0")).toBeInTheDocument();
+      expect(screen.getByText("Routes briefs to vendors.")).toBeInTheDocument();
+      expect(screen.getByText("Skills (2)")).toBeInTheDocument();
+      expect(screen.getByText("Vendor-fit routing")).toBeInTheDocument();
+      expect(screen.getByText("A2A v1.0")).toBeInTheDocument();
+      expect(screen.getByText("agent.example.com")).toBeInTheDocument();
+      expect(screen.getByText("JSONRPC 1.0 (preferred), HTTP+JSON 1.0")).toBeInTheDocument();
+      expect(screen.getByText("bearer")).toBeInTheDocument();
+    });
+
+    it("lists the card's warnings under View more", async () => {
+      mockFetchCard(
+        foundResult({}, ["Security scheme 'oauth' is an alternative that was not selected."]),
+      );
+      const user = setup();
+
+      await submitUrl(user);
+      await user.click(await screen.findByRole("button", { name: "View more" }));
+
+      expect(
+        await screen.findByText("Security scheme 'oauth' is an alternative that was not selected."),
+      ).toBeInTheDocument();
+    });
+
+    it("goes back to the URL step with the URL kept", async () => {
+      mockFetchCard(foundResult());
+      const user = setup();
+
+      await submitUrl(user);
+      await screen.findByText("Visual Router");
+      await user.click(screen.getByRole("button", { name: "Back" }));
+
+      expect(await screen.findByPlaceholderText(URL_PLACEHOLDER)).toHaveValue(CARD_URL);
+      expect(onCancel).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("authenticate step", () => {
+    async function toAuthStep(user: ReturnType<typeof userEvent.setup>) {
+      await submitUrl(user);
+      await user.click(await screen.findByRole("button", { name: "Continue" }));
+    }
+
+    it("registers a bearer agent with the key, defaulting to internal visibility", async () => {
+      mockFetchCard(foundResult({ auth_type: "bearer" }));
+      const created = mockCreate();
+      const user = setup();
+
+      await toAuthStep(user);
+      expect(await screen.findByText("Authenticate agent")).toBeInTheDocument();
+      await user.type(screen.getByLabelText(/Bearer token/i), "s3cret");
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalledTimes(1));
+      expect(created.body).toEqual({
+        agent: expect.objectContaining({
+          name: "Visual Router",
+          endpoint_url: "https://agent.example.com/rpc",
+          protocol_version: "1.0",
+          auth_type: "bearer",
+          auth_token: "s3cret",
+        }),
+        visibility: "public",
+      });
+    });
+
+    it("blocks registration until the required credentials are entered", async () => {
+      mockFetchCard(foundResult({ auth_type: "bearer" }));
+      const created = mockCreate();
+      const user = setup();
+
+      await toAuthStep(user);
+      await user.click(await screen.findByRole("button", { name: "Connect" }));
+
+      expect(
+        await screen.findByText("Enter the credentials the agent requires."),
+      ).toBeInTheDocument();
+      expect(created.count).toBe(0);
+    });
+
+    it("sends username and password for basic auth", async () => {
+      mockFetchCard(foundResult({ auth_type: "basic" }));
+      const created = mockCreate();
+      const user = setup();
+
+      await toAuthStep(user);
+      await user.type(await screen.findByLabelText(/Username/i), "alice");
+      await user.type(screen.getByLabelText(/Password/i), "pw");
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalled());
+      expect((created.body?.agent as Record<string, unknown>).auth_username).toBe("alice");
+      expect((created.body?.agent as Record<string, unknown>).auth_password).toBe("pw");
+    });
+
+    it("prefills the header name for an API key sent in a header", async () => {
+      mockFetchCard(foundResult({ auth_type: "authheaders", auth_header_key: "X-API-Key" }));
+      const created = mockCreate();
+      const user = setup();
+
+      await toAuthStep(user);
+      expect(await screen.findByDisplayValue("X-API-Key")).toBeInTheDocument();
+      await user.type(screen.getByPlaceholderText("Add header value..."), "k-123");
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalled());
+      expect((created.body?.agent as Record<string, unknown>).auth_headers).toEqual([
+        { key: "X-API-Key", value: "k-123" },
+      ]);
+    });
+
+    it("needs no credentials when the card declares none", async () => {
+      mockFetchCard(foundResult({ auth_type: null }));
+      const created = mockCreate();
+      const user = setup();
+
+      await toAuthStep(user);
+      expect(await screen.findByText("Agent settings")).toBeInTheDocument();
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalled());
+      const agent = created.body?.agent as Record<string, unknown>;
+      expect(agent).not.toHaveProperty("auth_token");
+      expect(agent).not.toHaveProperty("auth_password");
+    });
+
+    it("cannot register an OAuth 2.0 agent from this form", async () => {
+      mockFetchCard(
+        foundResult({ auth_type: "oauth", oauth_config: { grant_type: "client_credentials" } }),
+      );
+      const created = mockCreate();
+      const user = setup();
+
+      await toAuthStep(user);
+
+      expect(
+        await screen.findByText(/uses OAuth 2.0, which can't be set up from this form yet/),
+      ).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Connect" })).toBeDisabled();
+      expect(created.count).toBe(0);
+    });
+
+    it("sends the chosen visibility", async () => {
+      mockFetchCard(foundResult({ auth_type: null }));
+      const created = mockCreate();
+      const user = setup();
+
+      await toAuthStep(user);
+      await user.click(await screen.findByRole("combobox", { name: /Visibility/ }));
+      await user.click(await screen.findByRole("option", { name: "Private" }));
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalled());
+      expect(created.body?.visibility).toBe("private");
+      expect(created.body).not.toHaveProperty("team_id");
+    });
+
+    it("keeps the form and shows the server's reason when registration fails", async () => {
+      mockFetchCard(foundResult({ auth_type: null }));
+      mockCreate(() => HttpResponse.json({ detail: "Agent name already exists" }, { status: 409 }));
+      const user = setup();
+
+      await toAuthStep(user);
+      await user.click(await screen.findByRole("button", { name: "Connect" }));
+
+      expect(await screen.findByText("Agent name already exists")).toBeInTheDocument();
+      expect(onCreated).not.toHaveBeenCalled();
+      expect(screen.getByRole("button", { name: "Connect" })).toBeEnabled();
+    });
+  });
+  describe("manual entry", () => {
+    async function openManual(user: ReturnType<typeof userEvent.setup>) {
+      await user.click(await screen.findByRole("button", { name: "Enter manually" }));
+      await screen.findByPlaceholderText(NAME_PLACEHOLDER);
+    }
+
+    async function fillRequired(user: ReturnType<typeof userEvent.setup>) {
+      await user.type(screen.getByPlaceholderText(NAME_PLACEHOLDER), "Echo agent");
+      await user.type(screen.getByPlaceholderText(ENDPOINT_PLACEHOLDER), "http://127.0.0.1:9100");
+    }
+
+    const agentOf = (created: { body?: Record<string, unknown> }) =>
+      created.body?.agent as Record<string, unknown>;
+
+    it("is collapsed until expanded", async () => {
+      const user = setup();
+
+      const toggle = await screen.findByRole("button", { name: "Enter manually" });
+      expect(toggle).toHaveAttribute("aria-expanded", "false");
+      expect(screen.queryByPlaceholderText(NAME_PLACEHOLDER)).not.toBeInTheDocument();
+
+      await user.click(toggle);
+
+      expect(await screen.findByPlaceholderText(NAME_PLACEHOLDER)).toBeVisible();
+      expect(screen.getByRole("button", { name: "Connect" })).toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: "Continue" })).not.toBeInTheDocument();
+    });
+
+    it("registers an agent from just a name and an endpoint, without reading a card", async () => {
+      let fetched = false;
+      server.use(
+        http.post("/api/v1/a2a/fetch-card", () => {
+          fetched = true;
+          return HttpResponse.json({});
+        }),
+      );
+      const created = mockCreate();
+      const user = setup();
+
+      await openManual(user);
+      await fillRequired(user);
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalledTimes(1));
+      expect(fetched).toBe(false);
+      expect(created.body).toEqual({
+        agent: {
+          name: "Echo agent",
+          endpoint_url: "http://127.0.0.1:9100",
+          protocol_version: "1.0",
+        },
+        visibility: "public",
+      });
+    });
+
+    it("needs a name and a valid endpoint, and does not register until both are given", async () => {
+      const created = mockCreate();
+      const user = setup();
+
+      await openManual(user);
+      await user.type(screen.getByPlaceholderText(ENDPOINT_PLACEHOLDER), "ftp://nope");
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      expect(await screen.findByText("Enter a name for the agent.")).toBeInTheDocument();
+      expect(screen.getByText("Enter a valid http or https endpoint URL.")).toBeInTheDocument();
+      expect(created.count).toBe(0);
+    });
+
+    it("does not need the card URL", async () => {
+      const created = mockCreate();
+      const user = setup();
+
+      await openManual(user);
+      await fillRequired(user);
+      expect(screen.getByPlaceholderText(URL_PLACEHOLDER)).toHaveValue("");
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(created.count).toBe(1));
+    });
+
+    it("sends the optional description and tags, trimming and de-duplicating the tags", async () => {
+      const created = mockCreate();
+      const user = setup();
+
+      await openManual(user);
+      await fillRequired(user);
+      await user.type(
+        screen.getByPlaceholderText("Add optional tags separated with commas"),
+        " testing, echo ,, testing ",
+      );
+      await user.type(
+        screen.getByPlaceholderText("Add an optional description..."),
+        "  Echoes text back  ",
+      );
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalled());
+      expect(agentOf(created)).toMatchObject({
+        description: "Echoes text back",
+        tags: ["testing", "echo"],
+      });
+    });
+
+    it("leaves description and tags out when they are blank", async () => {
+      const created = mockCreate();
+      const user = setup();
+
+      await openManual(user);
+      await fillRequired(user);
+      await user.type(
+        screen.getByPlaceholderText("Add optional tags separated with commas"),
+        " , ",
+      );
+      await user.type(screen.getByPlaceholderText("Add an optional description..."), "   ");
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalled());
+      expect(agentOf(created)).not.toHaveProperty("description");
+      expect(agentOf(created)).not.toHaveProperty("tags");
+    });
+
+    it("labels the description for screen readers", async () => {
+      const user = setup();
+
+      await openManual(user);
+
+      expect(screen.getByLabelText("Description")).toBe(
+        screen.getByPlaceholderText("Add an optional description..."),
+      );
+    });
+
+    it("sends the chosen protocol version", async () => {
+      const created = mockCreate();
+      const user = setup();
+
+      await openManual(user);
+      await fillRequired(user);
+      await user.click(screen.getByRole("radio", { name: "A2A 0.3" }));
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalled());
+      expect(agentOf(created).protocol_version).toBe("0.3");
+    });
+
+    it("offers JSON-RPC only, since HTTP+JSON is not supported yet", async () => {
+      const user = setup();
+
+      await openManual(user);
+
+      expect(screen.getByRole("radio", { name: "JSON-RPC" })).toBeChecked();
+      expect(screen.getByRole("radio", { name: "HTTP+JSON" })).toBeDisabled();
+    });
+
+    it("sends the chosen visibility", async () => {
+      const created = mockCreate();
+      const user = setup();
+
+      await openManual(user);
+      await fillRequired(user);
+      await user.click(screen.getByRole("combobox", { name: /Visibility/ }));
+      await user.click(await screen.findByRole("option", { name: "Private" }));
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalled());
+      expect(created.body?.visibility).toBe("private");
+    });
+
+    describe("authentication", () => {
+      it("starts on None and sends no credentials", async () => {
+        const created = mockCreate();
+        const user = setup();
+
+        await openManual(user);
+        expect(screen.getByRole("radio", { name: "None" })).toBeChecked();
+        await fillRequired(user);
+        await user.click(screen.getByRole("button", { name: "Connect" }));
+
+        await waitFor(() => expect(onCreated).toHaveBeenCalled());
+        expect(agentOf(created)).not.toHaveProperty("auth_type");
+      });
+
+      it("sends a bearer token, and needs it", async () => {
+        const created = mockCreate();
+        const user = setup();
+
+        await openManual(user);
+        await fillRequired(user);
+        await user.click(screen.getByRole("radio", { name: "Bearer token" }));
+        await user.click(screen.getByRole("button", { name: "Connect" }));
+        expect(await screen.findByText("Enter the credentials the agent requires.")).toBeVisible();
+        expect(created.count).toBe(0);
+
+        await user.type(screen.getByPlaceholderText("Paste bearer token..."), "s3cret");
+        await user.click(screen.getByRole("button", { name: "Connect" }));
+
+        await waitFor(() => expect(onCreated).toHaveBeenCalled());
+        expect(agentOf(created)).toMatchObject({ auth_type: "bearer", auth_token: "s3cret" });
+      });
+
+      it("sends basic credentials", async () => {
+        const created = mockCreate();
+        const user = setup();
+
+        await openManual(user);
+        await fillRequired(user);
+        await user.click(screen.getByRole("radio", { name: "Basic" }));
+        await user.type(screen.getByLabelText(/Username/i), "alice");
+        await user.type(screen.getByLabelText(/Password/i), "pw");
+        await user.click(screen.getByRole("button", { name: "Connect" }));
+
+        await waitFor(() => expect(onCreated).toHaveBeenCalled());
+        expect(agentOf(created)).toMatchObject({
+          auth_type: "basic",
+          auth_username: "alice",
+          auth_password: "pw", // pragma: allowlist secret
+        });
+      });
+
+      it("starts custom headers with one empty row and sends the header", async () => {
+        const created = mockCreate();
+        const user = setup();
+
+        await openManual(user);
+        await fillRequired(user);
+        await user.click(screen.getByRole("radio", { name: "Custom headers" }));
+        await user.type(screen.getByPlaceholderText("e.g. X-API-Key..."), "X-API-Key");
+        await user.type(screen.getByPlaceholderText("Add header value..."), "k-123");
+        await user.click(screen.getByRole("button", { name: "Connect" }));
+
+        await waitFor(() => expect(onCreated).toHaveBeenCalled());
+        expect(agentOf(created)).toMatchObject({
+          auth_type: "authheaders",
+          auth_headers: [{ key: "X-API-Key", value: "k-123" }],
+        });
+      });
+
+      it("sends a query parameter key", async () => {
+        const created = mockCreate();
+        const user = setup();
+
+        await openManual(user);
+        await fillRequired(user);
+        await user.click(screen.getByRole("radio", { name: "Query parameter" }));
+        await user.type(screen.getByPlaceholderText("e.g. api_key..."), "api_key");
+        await user.type(screen.getByPlaceholderText("e.g. a1b2c3d4e5f6789..."), "k-123");
+        await user.click(screen.getByRole("button", { name: "Connect" }));
+
+        await waitFor(() => expect(onCreated).toHaveBeenCalled());
+        expect(agentOf(created)).toMatchObject({
+          auth_type: "query_param",
+          auth_query_param_key: "api_key",
+          auth_query_param_value: "k-123",
+        });
+      });
+
+      it("sends an OAuth 2.0 client-credentials configuration", async () => {
+        const created = mockCreate();
+        const user = setup();
+
+        await openManual(user);
+        await fillRequired(user);
+        await user.click(screen.getByRole("radio", { name: "OAuth 2.0" }));
+        await user.type(screen.getByLabelText(/Token URL/), "https://auth.example.com/token");
+        await user.type(screen.getByLabelText(/Client ID/), "client-1");
+        await user.type(screen.getByLabelText(/Client secret/), "shh");
+        await user.type(screen.getByLabelText("Scopes"), "read, write");
+        await user.click(screen.getByRole("button", { name: "Connect" }));
+
+        await waitFor(() => expect(onCreated).toHaveBeenCalled());
+        expect(agentOf(created)).toMatchObject({
+          auth_type: "oauth",
+          oauth_config: {
+            grant_type: "client_credentials",
+            client_id: "client-1",
+            client_secret: "shh", // pragma: allowlist secret
+            token_url: "https://auth.example.com/token",
+            scopes: ["read", "write"],
+          },
+        });
+      });
+
+      it("sends only the credentials of the tab that is selected", async () => {
+        const created = mockCreate();
+        const user = setup();
+
+        await openManual(user);
+        await fillRequired(user);
+        await user.click(screen.getByRole("radio", { name: "Bearer token" }));
+        await user.type(screen.getByPlaceholderText("Paste bearer token..."), "s3cret");
+        await user.click(screen.getByRole("radio", { name: "None" }));
+        await user.click(screen.getByRole("button", { name: "Connect" }));
+
+        await waitFor(() => expect(onCreated).toHaveBeenCalled());
+        expect(agentOf(created)).not.toHaveProperty("auth_token");
+      });
+    });
+
+    it("keeps the form and shows the server's reason when registration fails", async () => {
+      mockCreate(() => HttpResponse.json({ detail: "Agent name already exists" }, { status: 409 }));
+      const user = setup();
+
+      await openManual(user);
+      await fillRequired(user);
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      expect(await screen.findByText("Agent name already exists")).toBeInTheDocument();
+      expect(onCreated).not.toHaveBeenCalled();
+      expect(screen.getByRole("button", { name: "Connect" })).toBeEnabled();
+    });
+
+    it("can be used after the card could not be read", async () => {
+      mockFetchCard({ found: false, outcome: "no_card" });
+      const created = mockCreate();
+      const user = setup();
+
+      await submitUrl(user);
+      await screen.findByText(CARD_UNAVAILABLE);
+      await fillRequired(user);
+      await user.click(screen.getByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(onCreated).toHaveBeenCalledTimes(1));
+      expect(agentOf(created)).toMatchObject({ name: "Echo agent" });
+    });
+  });
+});
diff --git a/src/components/agents/ConnectAgentForm.tsx b/src/components/agents/ConnectAgentForm.tsx
new file mode 100644
index 00000000..cc8820e0
--- /dev/null
+++ b/src/components/agents/ConnectAgentForm.tsx
@@ -0,0 +1,424 @@
+import type { ReactNode } from "react";
+import { useIntl } from "react-intl";
+import { Loader2 } from "lucide-react";
+import { AgentIcon } from "@/components/icons/AgentIcon";
+import { BasicAuth } from "@/components/mcp-servers/BasicAuth";
+import { BearerTokenAuth } from "@/components/mcp-servers/BearerTokenAuth";
+import { CustomHeadersAuth } from "@/components/mcp-servers/CustomHeadersAuth";
+import { QueryParameterAuth } from "@/components/mcp-servers/QueryParameterAuth";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { BackButton } from "@/components/ui/back-button";
+import { Button } from "@/components/ui/button";
+import { Callout } from "@/components/ui/callout";
+import { Card, CardContent } from "@/components/ui/card";
+import { Field } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { TagInput } from "@/components/ui/tag-input";
+import { useConnectAgentForm } from "@/hooks/useConnectAgentForm";
+import { useTagSuggestions } from "@/hooks/useTagSuggestions";
+import { MAX_TAGS } from "@/utils/tags";
+import type { A2AAgentRead } from "@/generated/types";
+import { ManualAgentFields } from "./ManualAgentFields";
+import { VisibilityFields } from "./VisibilityFields";
+import { summarizeEndpoint, summarizeInterfaces, summarizeRequirements } from "./agentCardSummary";
+
+interface ConnectAgentFormProps {
+  /** Leave the form without registering anything. */
+  onCancel: () => void;
+  /** The agent was registered. */
+  onCreated: (agent: A2AAgentRead) => void;
+}
+
+const INPUT_CLASS =
+  "rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500";
+
+function StepHeader({ title, badge }: { title: string; badge?: ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-agent-icon-bg">
+        <AgentIcon className="h-3.5 w-3.5 text-black" aria-hidden="true" />
+      </div>
+      <h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">{title}</h2>
+      {badge}
+    </div>
+  );
+}
+
+function ExpandableSection({
+  label,
+  children,
+  open,
+  onOpenChange,
+}: {
+  label: string;
+  children: ReactNode;
+  /** Controlled when given; otherwise the section manages itself. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const controlled = open !== undefined;
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className="rounded-md border border-border"
+      {...(controlled
+        ? {
+            value: open ? "section" : "",
+            onValueChange: (value: string) => onOpenChange?.(value === "section"),
+          }
+        : {})}
+    >
+      <AccordionItem value="section" className="border-b-0">
+        <AccordionTrigger className="px-3 py-2.5 text-sm font-normal text-muted-foreground hover:no-underline">
+          {label}
+        </AccordionTrigger>
+        <AccordionContent className="space-y-5 px-3">{children}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+function ViewMore({ children }: { children: ReactNode }) {
+  const intl = useIntl();
+  return (
+    <ExpandableSection label={intl.formatMessage({ id: "agents.connect.viewMore" })}>
+      {children}
+    </ExpandableSection>
+  );
+}
+
+function FormActions({
+  onCancel,
+  onContinue,
+  continueLabel,
+  isBusy = false,
+  continueDisabled = false,
+}: {
+  onCancel: () => void;
+  onContinue: () => void;
+  continueLabel: string;
+  isBusy?: boolean;
+  continueDisabled?: boolean;
+}) {
+  const intl = useIntl();
+  return (
+    <div className="flex items-center justify-end gap-3 pt-2">
+      <Button type="button" variant="ghost" size="sm" onClick={onCancel} disabled={isBusy}>
+        {intl.formatMessage({ id: "common.button.cancel" })}
+      </Button>
+      <Button
+        type="submit"
+        size="sm"
+        onClick={onContinue}
+        disabled={isBusy || continueDisabled}
+        aria-busy={isBusy}
+      >
+        {isBusy && <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />}
+        {continueLabel}
+      </Button>
+    </div>
+  );
+}
+
+export function ConnectAgentForm({ onCancel, onCreated }: ConnectAgentFormProps) {
+  const intl = useIntl();
+  const form = useConnectAgentForm({ onCreated });
+  const tagSuggestions = useTagSuggestions();
+  const card = form.result?.card;
+
+  const handleBack = () => {
+    if (!form.goBack()) onCancel();
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-[728px] pt-10">
+      <BackButton onClick={handleBack} />
+
+      {form.step === "url" && (
+        <Card>
+          <CardContent>
+            <form
+              className="space-y-4"
+              noValidate
+              onSubmit={(event) => {
+                event.preventDefault();
+                // With "Enter manually" open the form registers the details typed
+                // there; otherwise it reads the card at the URL.
+                void (form.manualOpen ? form.submitManual() : form.submitUrl());
+              }}
+            >
+              <StepHeader title={intl.formatMessage({ id: "agents.connect.title" })} />
+              <p className="text-xs leading-relaxed text-muted-foreground">
+                {intl.formatMessage({ id: "agents.connect.url.intro" })}
+              </p>
+
+              <Field
+                id="agent-url"
+                required
+                info={intl.formatMessage({ id: "agents.connect.url.info" })}
+                error={form.errors.url}
+                label={intl.formatMessage({ id: "agents.connect.url.label" })}
+                labelProps={{ className: "inline-flex items-center gap-0.5" }}
+              >
+                {(controlProps) => (
+                  <Input
+                    {...controlProps}
+                    type="url"
+                    inputMode="url"
+                    autoComplete="off"
+                    autoFocus
+                    value={form.url}
+                    onChange={(event) => form.setUrl(event.target.value)}
+                    placeholder={intl.formatMessage({ id: "agents.connect.url.placeholder" })}
+                    className={INPUT_CLASS}
+                  />
+                )}
+              </Field>
+
+              {form.cardUnavailable && (
+                <Callout severity="warning">
+                  {intl.formatMessage({ id: "agents.connect.outcome.noCard" })}
+                </Callout>
+              )}
+
+              <ExpandableSection
+                label={intl.formatMessage({ id: "agents.connect.manual.toggle" })}
+                open={form.manualOpen}
+                onOpenChange={form.setManualOpen}
+              >
+                <ManualAgentFields form={form} />
+              </ExpandableSection>
+
+              {form.manualOpen && form.errors.submit && (
+                <div
+                  role="alert"
+                  aria-live="assertive"
+                  className="rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-900/50 dark:bg-red-950/50"
+                >
+                  <p className="text-sm text-red-600 dark:text-red-400">{form.errors.submit}</p>
+                </div>
+              )}
+
+              <FormActions
+                onCancel={onCancel}
+                onContinue={() => undefined}
+                continueLabel={intl.formatMessage({
+                  id: form.manualOpen
+                    ? form.isSubmitting
+                      ? "agents.connect.auth.submitting"
+                      : "agents.connect.auth.submit"
+                    : form.isFetching
+                      ? "agents.connect.checking"
+                      : "agents.connect.continue",
+                })}
+                isBusy={form.isFetching || form.isSubmitting}
+              />
+            </form>
+          </CardContent>
+        </Card>
+      )}
+
+      {form.step === "review" && card && (
+        <Card>
+          <CardContent className="space-y-4">
+            <StepHeader
+              title={card.name}
+              badge={
+                card.version ? (
+                  <span className="rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground">
+                    {intl.formatMessage(
+                      { id: "agents.connect.review.badge" },
+                      { version: card.version },
+                    )}
+                  </span>
+                ) : undefined
+              }
+            />
+            {card.description && (
+              <p className="text-xs leading-relaxed text-muted-foreground">{card.description}</p>
+            )}
+
+            {(card.skills?.length ?? 0) > 0 && (
+              <section aria-labelledby="agent-review-skills" className="space-y-2">
+                <h3 id="agent-review-skills" className="text-xs font-semibold text-foreground">
+                  {intl.formatMessage(
+                    { id: "agents.connect.review.skills" },
+                    { count: card.skills?.length ?? 0 },
+                  )}
+                </h3>
+                <ul className="space-y-1.5 text-xs text-muted-foreground">
+                  {card.skills?.map((skill, index) => (
+                    <li key={`${skill.id ?? skill.name}-${index}`}>{skill.name}</li>
+                  ))}
+                </ul>
+              </section>
+            )}
+
+            <dl className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5 border-t border-border pt-4 text-xs">
+              {(
+                [
+                  [
+                    "agents.connect.review.version",
+                    form.result?.detectedVersion
+                      ? intl.formatMessage(
+                          { id: "agents.connect.review.a2aVersion" },
+                          { version: form.result.detectedVersion },
+                        )
+                      : "",
+                  ],
+                  ["agents.connect.review.endpoint", summarizeEndpoint(card)],
+                  ["agents.connect.review.interfaces", summarizeInterfaces(card)],
+                  ["agents.connect.review.requires", summarizeRequirements(card)],
+                ] as const
+              )
+                .filter(([, value]) => value)
+                .map(([labelId, value]) => (
+                  <div key={labelId} className="contents">
+                    <dt className="font-semibold text-foreground">
+                      {intl.formatMessage({ id: labelId })}
+                    </dt>
+                    <dd className="min-w-0 break-words text-muted-foreground">{value}</dd>
+                  </div>
+                ))}
+            </dl>
+
+            {(form.result?.warnings?.length ?? 0) > 0 && (
+              <ViewMore>
+                <ul className="list-disc space-y-1 pl-4 text-xs text-muted-foreground">
+                  {form.result?.warnings?.map((warning) => (
+                    <li key={warning}>{warning}</li>
+                  ))}
+                </ul>
+              </ViewMore>
+            )}
+
+            <FormActions
+              onCancel={onCancel}
+              onContinue={form.goToAuth}
+              continueLabel={intl.formatMessage({ id: "agents.connect.continue" })}
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      {form.step === "auth" && (
+        <Card>
+          <CardContent>
+            <form
+              className="space-y-4"
+              noValidate
+              onSubmit={(event) => {
+                event.preventDefault();
+                void form.submit();
+              }}
+            >
+              <StepHeader
+                title={intl.formatMessage({
+                  id: form.authType ? "agents.connect.auth.title" : "agents.connect.auth.titleNone",
+                })}
+              />
+              <p className="text-xs leading-relaxed text-muted-foreground">
+                {intl.formatMessage({
+                  id: form.authType ? "agents.connect.auth.intro" : "agents.connect.auth.introNone",
+                })}
+              </p>
+
+              {!form.isAuthSupported && (
+                <Callout severity="warning">
+                  {intl.formatMessage({ id: "agents.connect.auth.unsupported" })}
+                </Callout>
+              )}
+
+              {form.authType === "bearer" && (
+                <BearerTokenAuth token={form.token} onTokenChange={form.setToken} />
+              )}
+              {form.authType === "basic" && (
+                <BasicAuth
+                  username={form.username}
+                  password={form.password}
+                  onUsernameChange={form.setUsername}
+                  onPasswordChange={form.setPassword}
+                />
+              )}
+              {form.authType === "authheaders" && (
+                <CustomHeadersAuth
+                  headers={form.headers}
+                  onHeadersChange={form.setHeaders}
+                  maxHeaders={1}
+                />
+              )}
+              {form.authType === "query_param" && (
+                <QueryParameterAuth
+                  parameterName={form.queryParamName}
+                  apiKey={form.queryParamValue}
+                  onParameterNameChange={form.setQueryParamName}
+                  onApiKeyChange={form.setQueryParamValue}
+                />
+              )}
+              {form.errors.credentials && (
+                <p role="alert" className="text-sm text-destructive">
+                  {form.errors.credentials}
+                </p>
+              )}
+
+              <VisibilityFields
+                visibility={form.visibility}
+                onVisibilityChange={form.setVisibility}
+                teams={form.teams}
+                teamId={form.teamId}
+                onTeamChange={form.setTeamId}
+                teamError={form.errors.teamId}
+              />
+
+              <ViewMore>
+                <Field
+                  id="agent-tags"
+                  label={intl.formatMessage({ id: "agents.connect.auth.tags" })}
+                >
+                  {(controlProps) => (
+                    <TagInput
+                      {...controlProps}
+                      value={form.tags}
+                      onChange={form.setTags}
+                      suggestions={tagSuggestions}
+                      maxTags={MAX_TAGS}
+                      placeholder={intl.formatMessage({ id: "common.tagInput.placeholder" })}
+                    />
+                  )}
+                </Field>
+              </ViewMore>
+
+              {form.errors.submit && (
+                <div
+                  role="alert"
+                  aria-live="assertive"
+                  className="rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-900/50 dark:bg-red-950/50"
+                >
+                  <p className="text-sm text-red-600 dark:text-red-400">{form.errors.submit}</p>
+                </div>
+              )}
+
+              <FormActions
+                onCancel={onCancel}
+                onContinue={() => undefined}
+                continueLabel={intl.formatMessage({
+                  id: form.isSubmitting
+                    ? "agents.connect.auth.submitting"
+                    : "agents.connect.auth.submit",
+                })}
+                isBusy={form.isSubmitting}
+                continueDisabled={!form.isAuthSupported}
+              />
+            </form>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/agents/ManualAgentFields.tsx b/src/components/agents/ManualAgentFields.tsx
new file mode 100644
index 00000000..54ab76b6
--- /dev/null
+++ b/src/components/agents/ManualAgentFields.tsx
@@ -0,0 +1,351 @@
+import { useIntl } from "react-intl";
+import { BasicAuth } from "@/components/mcp-servers/BasicAuth";
+import { BearerTokenAuth } from "@/components/mcp-servers/BearerTokenAuth";
+import { CustomHeadersAuth } from "@/components/mcp-servers/CustomHeadersAuth";
+import { QueryParameterAuth } from "@/components/mcp-servers/QueryParameterAuth";
+import { Field } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Textarea } from "@/components/ui/textarea";
+import type { ConnectAgentFormState } from "@/hooks/useConnectAgentForm";
+import { VisibilityFields } from "./VisibilityFields";
+import {
+  AGENT_AUTH_TYPES,
+  PROTOCOL_VERSIONS,
+  type AgentAuthType,
+  type ProtocolVersion,
+} from "./manualAgent";
+
+const INPUT_CLASS =
+  "rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500";
+
+/** Tab label ids reuse the MCP server form's, so the two forms word the auth types alike. */
+const AUTH_TAB_LABEL_IDS: Record<AgentAuthType, string> = {
+  none: "mcpServer.advanced.authType.none",
+  basic: "mcpServer.advanced.authType.basic",
+  bearer: "mcpServer.advanced.authType.bearer",
+  authheaders: "mcpServer.advanced.authType.custom",
+  oauth: "mcpServer.advanced.authType.oauth", // pragma: allowlist secret
+  query_param: "mcpServer.advanced.authType.query",
+};
+
+function AuthTypeTabs({
+  value,
+  onChange,
+}: {
+  value: AgentAuthType;
+  onChange: (value: AgentAuthType) => void;
+}) {
+  const intl = useIntl();
+  return (
+    <div className="flex flex-col gap-2.5">
+      <Label id="agent-auth-type-label">
+        {intl.formatMessage({ id: "mcpServer.advanced.authTypeLabel" })}
+      </Label>
+      <div
+        role="radiogroup"
+        aria-labelledby="agent-auth-type-label"
+        className="flex w-full flex-nowrap gap-1 overflow-x-auto rounded-md bg-neutral-100 p-1 dark:bg-neutral-800"
+      >
+        {AGENT_AUTH_TYPES.map((type) => (
+          <div
+            key={type}
+            className={
+              type === "authheaders" || type === "query_param"
+                ? "min-w-fit flex-[1.3]"
+                : "min-w-fit flex-1"
+            }
+          >
+            <input
+              type="radio"
+              id={`agent-auth-${type}`}
+              name="agent-auth-type"
+              value={type}
+              checked={value === type}
+              onChange={() => onChange(type)}
+              className="peer sr-only"
+            />
+            <label
+              htmlFor={`agent-auth-${type}`}
+              className="flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-2 py-2 text-center text-sm font-medium text-neutral-500 transition hover:bg-neutral-200 hover:text-neutral-700 peer-checked:bg-neutral-800 peer-checked:text-white peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-neutral-300 dark:peer-checked:bg-neutral-950 dark:peer-checked:text-white"
+            >
+              {intl.formatMessage({ id: AUTH_TAB_LABEL_IDS[type] })}
+            </label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TextField({
+  id,
+  label,
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+  required,
+  error,
+  info,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  type?: string;
+  required?: boolean;
+  error?: string;
+  info?: string;
+}) {
+  return (
+    <Field
+      id={id}
+      label={label}
+      required={required}
+      error={error}
+      info={info}
+      labelProps={info ? { className: "inline-flex items-center gap-0.5" } : undefined}
+    >
+      {(controlProps) => (
+        <Input
+          {...controlProps}
+          type={type}
+          autoComplete="off"
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder={placeholder}
+          className={INPUT_CLASS}
+        />
+      )}
+    </Field>
+  );
+}
+
+function OAuthClientCredentialsFields({ form }: { form: ConnectAgentFormState }) {
+  const intl = useIntl();
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-neutral-600 dark:text-neutral-400">
+        {intl.formatMessage({ id: "agents.connect.manual.oauth.intro" })}
+      </p>
+      <TextField
+        id="agent-oauth-token-url"
+        required
+        type="url"
+        label={intl.formatMessage({ id: "agents.connect.manual.oauth.tokenUrl" })}
+        placeholder="https://auth.example.com/oauth/token"
+        value={form.oauthTokenUrl}
+        onChange={form.setOauthTokenUrl}
+      />
+      <div className="grid gap-4 sm:grid-cols-2">
+        <TextField
+          id="agent-oauth-client-id"
+          required
+          label={intl.formatMessage({ id: "agents.connect.manual.oauth.clientId" })}
+          placeholder={intl.formatMessage({
+            id: "agents.connect.manual.oauth.clientIdPlaceholder",
+          })}
+          value={form.oauthClientId}
+          onChange={form.setOauthClientId}
+        />
+        <TextField
+          id="agent-oauth-client-secret"
+          required
+          type="password"
+          label={intl.formatMessage({ id: "agents.connect.manual.oauth.clientSecret" })}
+          placeholder={intl.formatMessage({
+            id: "agents.connect.manual.oauth.clientSecretPlaceholder",
+          })}
+          value={form.oauthClientSecret}
+          onChange={form.setOauthClientSecret}
+        />
+      </div>
+      <TextField
+        id="agent-oauth-scopes"
+        label={intl.formatMessage({ id: "agents.connect.manual.oauth.scopes" })}
+        placeholder={intl.formatMessage({ id: "agents.connect.manual.oauth.scopesPlaceholder" })}
+        value={form.oauthScopes}
+        onChange={form.setOauthScopes}
+      />
+    </div>
+  );
+}
+
+/** The fields for registering an agent that publishes no Agent Card. */
+export function ManualAgentFields({ form }: { form: ConnectAgentFormState }) {
+  const intl = useIntl();
+
+  const renderAuth = () => {
+    switch (form.manualAuthType) {
+      case "basic":
+        return (
+          <BasicAuth
+            username={form.username}
+            password={form.password}
+            onUsernameChange={form.setUsername}
+            onPasswordChange={form.setPassword}
+          />
+        );
+      case "bearer":
+        return <BearerTokenAuth token={form.token} onTokenChange={form.setToken} />;
+      case "authheaders":
+        return <CustomHeadersAuth headers={form.headers} onHeadersChange={form.setHeaders} />;
+      case "oauth":
+        return <OAuthClientCredentialsFields form={form} />;
+      case "query_param":
+        return (
+          <QueryParameterAuth
+            parameterName={form.queryParamName}
+            apiKey={form.queryParamValue}
+            onParameterNameChange={form.setQueryParamName}
+            onApiKeyChange={form.setQueryParamValue}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="space-y-5">
+      <TextField
+        id="agent-manual-name"
+        required
+        label={intl.formatMessage({ id: "agents.connect.manual.name.label" })}
+        placeholder={intl.formatMessage({ id: "agents.connect.manual.name.placeholder" })}
+        value={form.manualName}
+        onChange={(value) => {
+          form.setManualName(value);
+          form.clearError("name");
+        }}
+        error={form.errors.name}
+      />
+
+      <VisibilityFields
+        idPrefix="agent-manual"
+        visibility={form.visibility}
+        onVisibilityChange={form.setVisibility}
+        teams={form.teams}
+        teamId={form.teamId}
+        onTeamChange={form.setTeamId}
+        teamError={form.errors.teamId}
+      />
+
+      <TextField
+        id="agent-manual-endpoint"
+        required
+        type="url"
+        label={intl.formatMessage({ id: "agents.connect.manual.endpoint.label" })}
+        info={intl.formatMessage({ id: "agents.connect.manual.endpoint.info" })}
+        placeholder={intl.formatMessage({ id: "agents.connect.manual.endpoint.placeholder" })}
+        value={form.manualEndpoint}
+        onChange={(value) => {
+          form.setManualEndpoint(value);
+          form.clearError("endpoint");
+        }}
+        error={form.errors.endpoint}
+      />
+
+      <div className="flex flex-wrap gap-x-10 gap-y-4">
+        <fieldset className="space-y-2">
+          <legend className="mb-2.5 text-sm font-medium text-foreground">
+            {intl.formatMessage({ id: "agents.connect.manual.binding.label" })}
+            <span className="text-destructive" aria-hidden="true">
+              *
+            </span>
+          </legend>
+          <RadioGroup
+            value="JSONRPC"
+            aria-label={intl.formatMessage({ id: "agents.connect.manual.binding.label" })}
+          >
+            <div className="flex items-center gap-2">
+              <RadioGroupItem value="JSONRPC" id="agent-binding-jsonrpc" />
+              <Label htmlFor="agent-binding-jsonrpc" className="font-normal">
+                {intl.formatMessage({ id: "agents.connect.manual.binding.jsonrpc" })}
+              </Label>
+            </div>
+            <div className="flex items-center gap-2">
+              {/* TODO(IBM/mcp-context-forge#7383): disabled because the API stores no protocol
+                  binding yet, so a selection would be dropped on save. Enable this option, send
+                  `protocol_binding` ("jsonrpc" | "http_json") and drop the note below once that
+                  column exists in the generated client. */}
+              <RadioGroupItem value="HTTP+JSON" id="agent-binding-http" disabled />
+              <Label htmlFor="agent-binding-http" className="font-normal text-muted-foreground">
+                {intl.formatMessage({ id: "agents.connect.manual.binding.http" })}
+              </Label>
+            </div>
+          </RadioGroup>
+        </fieldset>
+
+        <fieldset className="space-y-2">
+          <legend className="mb-2.5 text-sm font-medium text-foreground">
+            {intl.formatMessage({ id: "agents.connect.manual.version.label" })}
+            <span className="text-destructive" aria-hidden="true">
+              *
+            </span>
+          </legend>
+          <RadioGroup
+            value={form.protocolVersion}
+            onValueChange={(value) => form.setProtocolVersion(value as ProtocolVersion)}
+            aria-label={intl.formatMessage({ id: "agents.connect.manual.version.label" })}
+          >
+            {PROTOCOL_VERSIONS.map((version) => (
+              <div key={version} className="flex items-center gap-2">
+                <RadioGroupItem value={version} id={`agent-version-${version}`} />
+                <Label htmlFor={`agent-version-${version}`} className="font-normal">
+                  {intl.formatMessage({ id: "agents.connect.manual.version.option" }, { version })}
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        </fieldset>
+
+        {/* TODO(IBM/mcp-context-forge#7383): temporary note. Remove it, and the
+            `agents.connect.manual.binding.httpUnsupported` strings, once HTTP+JSON can be saved. */}
+        <p className="w-full text-xs text-muted-foreground">
+          {intl.formatMessage({ id: "agents.connect.manual.binding.httpUnsupported" })}
+        </p>
+      </div>
+
+      <AuthTypeTabs value={form.manualAuthType} onChange={form.setManualAuthType} />
+      {renderAuth()}
+      {form.errors.credentials && (
+        <p role="alert" className="text-sm text-destructive">
+          {form.errors.credentials}
+        </p>
+      )}
+
+      <div className="space-y-4">
+        <TextField
+          id="agent-manual-tags"
+          label={intl.formatMessage({ id: "agents.connect.manual.tags.label" })}
+          placeholder={intl.formatMessage({ id: "agents.connect.manual.tags.placeholder" })}
+          value={form.manualTags}
+          onChange={form.setManualTags}
+        />
+
+        {/* The design shows the description without a visible label; keep one for screen readers. */}
+        <Field
+          id="agent-manual-description"
+          label={intl.formatMessage({ id: "agents.connect.manual.description.label" })}
+          labelProps={{ className: "sr-only" }}
+        >
+          {(controlProps) => (
+            <Textarea
+              {...controlProps}
+              value={form.manualDescription}
+              onChange={(event) => form.setManualDescription(event.target.value)}
+              placeholder={intl.formatMessage({
+                id: "agents.connect.manual.description.placeholder",
+              })}
+              className="min-h-20 rounded-md border-neutral-300 px-4 text-sm shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 dark:border-neutral-700"
+            />
+          )}
+        </Field>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/agents/VisibilityFields.tsx b/src/components/agents/VisibilityFields.tsx
new file mode 100644
index 00000000..a5574ee3
--- /dev/null
+++ b/src/components/agents/VisibilityFields.tsx
@@ -0,0 +1,84 @@
+import { useIntl } from "react-intl";
+import { TeamSelect } from "@/components/common/TeamSelect";
+import { VisibilityInfoContent } from "@/components/common/VisibilityInfoPopover";
+import { Field } from "@/components/ui/field";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { Team } from "@/types/team";
+import type { Visibility } from "@/types/server";
+
+interface VisibilityFieldsProps {
+  visibility: Visibility;
+  onVisibilityChange: (value: Visibility) => void;
+  teams: Team[];
+  teamId?: string;
+  onTeamChange: (teamId: string) => void;
+  teamError?: string;
+  /** Distinguishes the ids when more than one of these is on a page. */
+  idPrefix?: string;
+}
+
+/** Visibility select, plus the team picker once "Team" is chosen. */
+export function VisibilityFields({
+  visibility,
+  onVisibilityChange,
+  teams,
+  teamId,
+  onTeamChange,
+  teamError,
+  idPrefix = "agent",
+}: VisibilityFieldsProps) {
+  const intl = useIntl();
+
+  return (
+    <>
+      <Field
+        id={`${idPrefix}-visibility`}
+        required
+        info={<VisibilityInfoContent />}
+        label={intl.formatMessage({ id: "agents.connect.auth.visibility" })}
+        labelProps={{ className: "inline-flex items-center gap-0.5" }}
+      >
+        {(controlProps) => (
+          <Select
+            value={visibility}
+            onValueChange={(value) => onVisibilityChange(value as Visibility)}
+          >
+            <SelectTrigger
+              {...controlProps}
+              className="rounded-md border-neutral-300 text-sm shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 dark:border-neutral-700"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="public">
+                {intl.formatMessage({ id: "common.visibility.internal" })}
+              </SelectItem>
+              <SelectItem value="private">
+                {intl.formatMessage({ id: "common.visibility.private" })}
+              </SelectItem>
+              <SelectItem value="team">
+                {intl.formatMessage({ id: "common.visibility.team" })}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        )}
+      </Field>
+
+      {visibility === "team" && (
+        <TeamSelect
+          id={`${idPrefix}-team`}
+          teams={teams}
+          value={teamId}
+          onChange={onTeamChange}
+          error={teamError}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/components/agents/agentCardSummary.test.ts b/src/components/agents/agentCardSummary.test.ts
new file mode 100644
index 00000000..2628e8c4
--- /dev/null
+++ b/src/components/agents/agentCardSummary.test.ts
@@ -0,0 +1,102 @@
+import { describe, it, expect } from "vitest";
+import { summarizeEndpoint, summarizeInterfaces, summarizeRequirements } from "./agentCardSummary";
+import type { AgentCard } from "@/types/agentCard";
+
+const card = (overrides: Partial<AgentCard> = {}): AgentCard => ({ name: "Agent", ...overrides });
+
+describe("summarizeInterfaces", () => {
+  it("marks the first of several interfaces as preferred", () => {
+    expect(
+      summarizeInterfaces(
+        card({
+          supportedInterfaces: [
+            { url: "https://a/rpc", protocolBinding: "JSONRPC", protocolVersion: "1.0" },
+            { url: "https://a/http", protocolBinding: "HTTP+JSON", protocolVersion: "1.0" },
+          ],
+        }),
+      ),
+    ).toBe("JSONRPC 1.0 (preferred), HTTP+JSON 1.0");
+  });
+
+  it("does not call a lone interface preferred", () => {
+    expect(
+      summarizeInterfaces(
+        card({
+          supportedInterfaces: [
+            { url: "https://a/rpc", protocolBinding: "JSONRPC", protocolVersion: "1.0" },
+          ],
+        }),
+      ),
+    ).toBe("JSONRPC 1.0");
+  });
+
+  it("falls back to the url when binding and version are missing, and to empty with none", () => {
+    expect(summarizeInterfaces(card({ supportedInterfaces: [{ url: "https://a/rpc" }] }))).toBe(
+      "https://a/rpc",
+    );
+    expect(summarizeInterfaces(card())).toBe("");
+  });
+});
+
+describe("summarizeEndpoint", () => {
+  it("returns the host of the first interface", () => {
+    expect(
+      summarizeEndpoint(
+        card({ supportedInterfaces: [{ url: "https://agent.example.com:8443/rpc" }] }),
+      ),
+    ).toBe("agent.example.com:8443");
+  });
+
+  it("returns the raw value when it is not a URL and empty when there is none", () => {
+    expect(summarizeEndpoint(card({ supportedInterfaces: [{ url: "not a url" }] }))).toBe(
+      "not a url",
+    );
+    expect(summarizeEndpoint(card())).toBe("");
+  });
+});
+
+describe("summarizeRequirements", () => {
+  const schemes: AgentCard["securitySchemes"] = {
+    bearerAuth: { httpAuthSecurityScheme: { scheme: "Bearer" } },
+    oauth: { oauth2SecurityScheme: { flows: {} } },
+    key: { apiKeySecurityScheme: { name: "X-Key", location: "header" } },
+  };
+
+  it("joins alternative requirements with 'or'", () => {
+    expect(
+      summarizeRequirements(
+        card({
+          securitySchemes: schemes,
+          securityRequirements: [{ schemes: { bearerAuth: {} } }, { schemes: { oauth: {} } }],
+        }),
+      ),
+    ).toBe("bearer or OAuth 2.0");
+  });
+
+  it("joins schemes that must all be met with 'and'", () => {
+    expect(
+      summarizeRequirements(
+        card({
+          securitySchemes: schemes,
+          securityRequirements: [{ schemes: { bearerAuth: {}, key: {} } }], // pragma: allowlist secret
+        }),
+      ),
+    ).toBe("bearer and API key");
+  });
+
+  it("drops duplicates and schemes it cannot name, and is empty with no requirements", () => {
+    expect(
+      summarizeRequirements(
+        card({
+          securitySchemes: schemes,
+          securityRequirements: [
+            { schemes: { bearerAuth: {} } },
+            { schemes: { bearerAuth: {} } },
+            { schemes: { missing: {} } },
+          ],
+        }),
+      ),
+    ).toBe("bearer");
+    expect(summarizeRequirements(card())).toBe("");
+  });
+});
diff --git a/src/components/agents/agentCardSummary.ts b/src/components/agents/agentCardSummary.ts
new file mode 100644
index 00000000..986546c7
--- /dev/null
+++ b/src/components/agents/agentCardSummary.ts
@@ -0,0 +1,65 @@
+import type { AgentCard, AgentCardInterface } from "@/types/agentCard";
+
+/** Human-readable name for each oneof key a 1.0 card wraps a security scheme in. */
+const SCHEME_LABELS: Record<string, string> = {
+  apiKeySecurityScheme: "API key",
+  oauth2SecurityScheme: "OAuth 2.0",
+  openIdConnectSecurityScheme: "OpenID Connect",
+  mtlsSecurityScheme: "mTLS",
+};
+
+function describeInterface(item: AgentCardInterface): string {
+  return [item.protocolBinding, item.protocolVersion].filter(Boolean).join(" ") || item.url;
+}
+
+/** "JSONRPC 1.0 (preferred), HTTP+JSON 1.0". The first interface is the card's preferred one. */
+export function summarizeInterfaces(card: AgentCard): string {
+  const interfaces = card.supportedInterfaces ?? [];
+  return interfaces
+    .map((item, index) =>
+      index === 0 && interfaces.length > 1
+        ? `${describeInterface(item)} (preferred)`
+        : describeInterface(item),
+    )
+    .join(", ");
+}
+
+/** The host of the card's first interface, which is where the agent is called. */
+export function summarizeEndpoint(card: AgentCard): string {
+  const url = card.supportedInterfaces?.[0]?.url;
+  if (!url) return "";
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+}
+
+function labelScheme(wrapped: Record<string, Record<string, unknown>> | undefined): string | null {
+  if (!wrapped) return null;
+  const [key, body] = Object.entries(wrapped)[0] ?? [];
+  if (!key) return null;
+  if (key === "httpAuthSecurityScheme") {
+    const scheme = body?.scheme;
+    return typeof scheme === "string" && scheme ? scheme.toLowerCase() : "HTTP";
+  }
+  return SCHEME_LABELS[key] ?? null;
+}
+
+/**
+ * The credential kinds a card asks for, e.g. "bearer or OAuth 2.0". Requirements
+ * are alternatives, so they are joined with "or"; schemes inside one requirement
+ * must all be met, so they are joined with "and". Empty when the card declares none.
+ */
+export function summarizeRequirements(card: AgentCard): string {
+  const schemes = card.securitySchemes ?? {};
+  const alternatives = (card.securityRequirements ?? [])
+    .map((requirement) =>
+      Object.keys(requirement.schemes ?? {})
+        .map((name) => labelScheme(schemes[name]))
+        .filter((label): label is string => Boolean(label))
+        .join(" and "),
+    )
+    .filter(Boolean);
+  return [...new Set(alternatives)].join(" or ");
+}
diff --git a/src/components/agents/agentSkills.test.ts b/src/components/agents/agentSkills.test.ts
new file mode 100644
index 00000000..b7ad715f
--- /dev/null
+++ b/src/components/agents/agentSkills.test.ts
@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { getAgentSkillNames } from "./agentSkills";
+
+describe("getAgentSkillNames", () => {
+  it("reads names from the top-level skills list", () => {
+    expect(
+      getAgentSkillNames({
+        skills: [
+          { id: "a", name: "Echo" },
+          { id: "b", name: "Route" },
+        ],
+      }),
+    ).toEqual(["Echo", "Route"]);
+  });
+
+  it("falls back to capabilities.skills for agents without a top-level list", () => {
+    expect(getAgentSkillNames({ capabilities: { skills: [{ name: "Echo" }] } })).toEqual(["Echo"]);
+  });
+
+  it("prefers the top-level list over capabilities.skills", () => {
+    expect(
+      getAgentSkillNames({
+        skills: [{ name: "New" }],
+        capabilities: { skills: [{ name: "Old" }] },
+      }),
+    ).toEqual(["New"]);
+  });
+
+  it("uses the id when a skill has no name, and accepts plain strings", () => {
+    expect(getAgentSkillNames({ skills: [{ id: "echo" }, "Route"] })).toEqual(["echo", "Route"]);
+  });
+
+  it("drops blank names and entries it cannot read", () => {
+    expect(
+      getAgentSkillNames({ skills: [{ name: "  " }, null, 42, {}, { name: " Echo " }] }),
+    ).toEqual(["Echo"]);
+  });
+
+  it.each([
+    ["nothing", {}],
+    ["a null capabilities", { capabilities: null }],
+    ["a non-array skills value", { skills: "echo", capabilities: { skills: "echo" } }],
+    ["empty lists", { skills: [], capabilities: { skills: [] } }],
+  ])("returns no skills for %s", (_name, agent) => {
+    expect(getAgentSkillNames(agent)).toEqual([]);
+  });
+});
diff --git a/src/components/agents/agentSkills.ts b/src/components/agents/agentSkills.ts
new file mode 100644
index 00000000..d55735c3
--- /dev/null
+++ b/src/components/agents/agentSkills.ts
@@ -0,0 +1,31 @@
+/**
+ * The skills an agent advertises, as display names.
+ *
+ * The API exposes them as a top-level `skills` list (IBM/mcp-context-forge#7433)
+ * and, for agents stored before that field existed, inside
+ * `capabilities.skills`. The top-level list wins when both are present.
+ * Entries are skill objects (`name`, falling back to `id`) or plain strings;
+ * anything else, and blank names, are dropped.
+ */
+export function getAgentSkillNames(agent: { skills?: unknown; capabilities?: unknown }): string[] {
+  const capabilities = agent.capabilities;
+  const nested =
+    capabilities && typeof capabilities === "object"
+      ? (capabilities as { skills?: unknown }).skills
+      : undefined;
+  const source = Array.isArray(agent.skills) ? agent.skills : nested;
+  if (!Array.isArray(source)) return [];
+
+  return source
+    .map((entry): string => {
+      if (typeof entry === "string") return entry;
+      if (entry && typeof entry === "object") {
+        const { name, id } = entry as { name?: unknown; id?: unknown };
+        if (typeof name === "string") return name;
+        if (typeof id === "string") return id;
+      }
+      return "";
+    })
+    .map((name) => name.trim())
+    .filter(Boolean);
+}
diff --git a/src/components/agents/manualAgent.test.ts b/src/components/agents/manualAgent.test.ts
new file mode 100644
index 00000000..d3062860
--- /dev/null
+++ b/src/components/agents/manualAgent.test.ts
@@ -0,0 +1,112 @@
+import { describe, it, expect } from "vitest";
+import {
+  credentialFields,
+  hasRequiredCredentials,
+  parseList,
+  type AgentAuthValues,
+} from "./manualAgent";
+
+const makeValues = (overrides: Partial<AgentAuthValues> = {}): AgentAuthValues => ({
+  token: "",
+  username: "",
+  password: "", // pragma: allowlist secret
+  headers: [],
+  queryParamName: "",
+  queryParamValue: "",
+  oauthTokenUrl: "",
+  oauthClientId: "",
+  oauthClientSecret: "", // pragma: allowlist secret
+  oauthScopes: "",
+  ...overrides,
+});
+
+describe("parseList", () => {
+  it("splits on commas, trims and drops blanks", () => {
+    expect(parseList(" a, b ,, c ")).toEqual(["a", "b", "c"]);
+  });
+
+  it("also splits on whitespace when asked", () => {
+    expect(parseList("read write,admin")).toEqual(["read write", "admin"]);
+    expect(parseList("read write,admin", true)).toEqual(["read", "write", "admin"]);
+  });
+});
+
+describe("hasRequiredCredentials", () => {
+  it("needs nothing for none or no type", () => {
+    expect(hasRequiredCredentials("none", makeValues())).toBe(true);
+    expect(hasRequiredCredentials(null, makeValues())).toBe(true);
+  });
+
+  it.each([
+    ["bearer", makeValues({ token: "t" }), makeValues()],
+    ["basic", makeValues({ username: "u", password: "p" }), makeValues({ username: "u" })],
+    [
+      "authheaders",
+      makeValues({ headers: [{ id: "1", key: "X-Key", value: "v" }] }),
+      makeValues({ headers: [{ id: "1", key: "X-Key", value: "" }] }),
+    ],
+    [
+      "query_param",
+      makeValues({ queryParamName: "k", queryParamValue: "v" }),
+      makeValues({ queryParamName: "k" }),
+    ],
+    [
+      "oauth",
+      makeValues({ oauthTokenUrl: "https://t", oauthClientId: "id", oauthClientSecret: "s" }),
+      makeValues({ oauthTokenUrl: "https://t", oauthClientId: "id" }),
+    ],
+  ] as const)("%s needs its fields filled", (type, complete, incomplete) => {
+    expect(hasRequiredCredentials(type, complete)).toBe(true);
+    expect(hasRequiredCredentials(type, incomplete)).toBe(false);
+  });
+});
+
+describe("credentialFields", () => {
+  it("is empty for none", () => {
+    expect(credentialFields("none", makeValues())).toEqual({});
+  });
+
+  it("maps each type onto its A2AAgentCreate fields", () => {
+    expect(credentialFields("bearer", makeValues({ token: " t " }))).toEqual({
+      auth_type: "bearer",
+      auth_token: "t",
+    });
+    expect(credentialFields("basic", makeValues({ username: " u ", password: "p" }))).toEqual({
+      auth_type: "basic",
+      auth_username: "u",
+      auth_password: "p",
+    });
+    expect(
+      credentialFields(
+        "authheaders",
+        makeValues({ headers: [{ id: "1", key: " X-Key ", value: "v" }] }),
+      ),
+    ).toEqual({ auth_type: "authheaders", auth_headers: [{ key: "X-Key", value: "v" }] });
+    expect(
+      credentialFields("query_param", makeValues({ queryParamName: " k ", queryParamValue: "v" })),
+    ).toEqual({ auth_type: "query_param", auth_query_param_key: "k", auth_query_param_value: "v" });
+  });
+
+  it("builds a client-credentials oauth config with scopes split on commas or spaces", () => {
+    expect(
+      credentialFields(
+        "oauth",
+        makeValues({
+          oauthTokenUrl: " https://auth.example.com/token ",
+          oauthClientId: " id ",
+          oauthClientSecret: "s",
+          oauthScopes: "read, write admin",
+        }),
+      ),
+    ).toEqual({
+      auth_type: "oauth",
+      oauth_config: {
+        grant_type: "client_credentials",
+        client_id: "id",
+        client_secret: "s",
+        token_url: "https://auth.example.com/token",
+        scopes: ["read", "write", "admin"],
+      },
+    });
+  });
+});
diff --git a/src/components/agents/manualAgent.ts b/src/components/agents/manualAgent.ts
new file mode 100644
index 00000000..68dd420a
--- /dev/null
+++ b/src/components/agents/manualAgent.ts
@@ -0,0 +1,95 @@
+import type { A2AAgentCreate } from "@/generated/types";
+import type { CustomHeader } from "@/components/mcp-servers/CustomHeadersAuth";
+
+/** Authentication types, named as the API names them in `auth_type`. */
+export type AgentAuthType = "none" | "basic" | "bearer" | "authheaders" | "oauth" | "query_param";
+
+/** Order of the tabs in the manual form. */
+export const AGENT_AUTH_TYPES: AgentAuthType[] = [
+  "none",
+  "basic",
+  "bearer",
+  "authheaders",
+  "oauth",
+  "query_param",
+];
+
+/** Protocol versions the manual form offers; the API stores the value as `protocol_version`. */
+export const PROTOCOL_VERSIONS = ["1.0", "0.3"] as const;
+export type ProtocolVersion = (typeof PROTOCOL_VERSIONS)[number];
+
+export interface AgentAuthValues {
+  token: string;
+  username: string;
+  password: string; // pragma: allowlist secret
+  headers: CustomHeader[];
+  queryParamName: string;
+  queryParamValue: string;
+  oauthTokenUrl: string;
+  oauthClientId: string;
+  oauthClientSecret: string;
+  oauthScopes: string;
+}
+
+/** "a, b ,, c" → ["a", "b", "c"]. Splits on commas or whitespace when `whitespace` is set. */
+export function parseList(value: string, whitespace = false): string[] {
+  return value
+    .split(whitespace ? /[\s,]+/ : ",")
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+/** Whether the credentials the chosen type needs are all there. */
+export function hasRequiredCredentials(type: AgentAuthType | null, c: AgentAuthValues): boolean {
+  switch (type) {
+    case "bearer":
+      return Boolean(c.token.trim());
+    case "basic":
+      return Boolean(c.username.trim() && c.password);
+    case "authheaders":
+      return c.headers.length > 0 && c.headers.every((h) => h.key.trim() && h.value);
+    case "query_param":
+      return Boolean(c.queryParamName.trim() && c.queryParamValue);
+    case "oauth":
+      return Boolean(c.oauthTokenUrl.trim() && c.oauthClientId.trim() && c.oauthClientSecret);
+    default:
+      return true;
+  }
+}
+
+/** The `A2AAgentCreate` auth fields for the chosen type; empty for none. */
+export function credentialFields(
+  type: AgentAuthType | null,
+  c: AgentAuthValues,
+): Partial<A2AAgentCreate> {
+  switch (type) {
+    case "bearer":
+      return { auth_type: "bearer", auth_token: c.token.trim() };
+    case "basic":
+      return { auth_type: "basic", auth_username: c.username.trim(), auth_password: c.password }; // pragma: allowlist secret
+    case "authheaders":
+      return {
+        auth_type: "authheaders",
+        auth_headers: c.headers.map(({ key, value }) => ({ key: key.trim(), value })),
+      };
+    case "query_param":
+      return {
+        auth_type: "query_param",
+        auth_query_param_key: c.queryParamName.trim(),
+        auth_query_param_value: c.queryParamValue,
+      };
+    case "oauth":
+      return {
+        auth_type: "oauth",
+        oauth_config: {
+          grant_type: "client_credentials",
+          client_id: c.oauthClientId.trim(),
+          client_secret: c.oauthClientSecret, // pragma: allowlist secret
+          token_url: c.oauthTokenUrl.trim(),
+          scopes: parseList(c.oauthScopes, true),
+        },
+      };
+    default:
+      return {};
+  }
+}
diff --git a/src/hooks/useConnectAgentForm.ts b/src/hooks/useConnectAgentForm.ts
new file mode 100644
index 00000000..8efd613b
--- /dev/null
+++ b/src/hooks/useConnectAgentForm.ts
@@ -0,0 +1,392 @@
+import { useCallback, useMemo, useState } from "react";
+import { useIntl } from "react-intl";
+import { useAuth } from "@/auth/useAuth";
+import { agentsApi } from "@/api/agents";
+import { ApiError } from "@/api/client";
+import {
+  credentialFields,
+  hasRequiredCredentials,
+  parseList,
+  type AgentAuthType,
+  type AgentAuthValues,
+  type ProtocolVersion,
+} from "@/components/agents/manualAgent";
+import type { CustomHeader } from "@/components/mcp-servers/CustomHeadersAuth";
+import { resolveTeamId, useTeams } from "@/hooks/useTeams";
+import { extractApiErrorDetail } from "@/utils/errors";
+import type { A2AAgentCreate, A2AAgentRead, BodyCreateA2aAgentV1A2aPost } from "@/generated/types";
+import type { Visibility } from "@/types/server";
+import type { FetchCardResult, SuggestedAgent } from "@/types/agentCard";
+
+export type ConnectAgentStep = "url" | "review" | "auth";
+
+/** Auth types the card flow can collect credentials for. Anything else blocks registration. */
+const SUPPORTED_CARD_AUTH_TYPES = new Set(["bearer", "basic", "authheaders", "query_param"]);
+
+export function isHttpUrl(value: string): boolean {
+  try {
+    const { protocol } = new URL(value);
+    return protocol === "http:" || protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+export interface ConnectAgentErrors {
+  url?: string;
+  name?: string;
+  endpoint?: string;
+  credentials?: string;
+  teamId?: string;
+  submit?: string;
+}
+
+interface UseConnectAgentFormOptions {
+  onCreated: (agent: A2AAgentRead) => void;
+}
+
+export function useConnectAgentForm({ onCreated }: UseConnectAgentFormOptions) {
+  const intl = useIntl();
+  const { selectedTeamId } = useAuth();
+  const { teams } = useTeams();
+
+  const [step, setStep] = useState<ConnectAgentStep>("url");
+  const [url, setUrlState] = useState("");
+  const [isFetching, setIsFetching] = useState(false);
+  /** The card could not be read, for whatever reason: no card, credentials needed, unreachable or an error. */
+  const [cardUnavailable, setCardUnavailable] = useState(false);
+  const [result, setResult] = useState<FetchCardResult | null>(null);
+
+  // Credentials are shared by the card flow and the manual form; only one is ever in use.
+  const [token, setToken] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [headers, setHeaders] = useState<CustomHeader[]>([]);
+  const [queryParamName, setQueryParamName] = useState("");
+  const [queryParamValue, setQueryParamValue] = useState("");
+  const [oauthTokenUrl, setOauthTokenUrl] = useState("");
+  const [oauthClientId, setOauthClientId] = useState("");
+  const [oauthClientSecret, setOauthClientSecret] = useState("");
+  const [oauthScopes, setOauthScopes] = useState("");
+
+  const [visibility, setVisibilityState] = useState<Visibility>("public");
+  const [chosenTeamId, setChosenTeamId] = useState<string | undefined>(undefined);
+  const [tags, setTags] = useState<string[]>([]);
+
+  // "Enter manually": for agents that publish no card.
+  const [manualOpen, setManualOpen] = useState(false);
+  const [manualName, setManualName] = useState("");
+  const [manualEndpoint, setManualEndpoint] = useState("");
+  const [manualDescription, setManualDescription] = useState("");
+  /** Comma-separated, as typed. */
+  const [manualTags, setManualTags] = useState("");
+  const [protocolVersion, setProtocolVersion] = useState<ProtocolVersion>("1.0");
+  const [manualAuthType, setManualAuthTypeState] = useState<AgentAuthType>("none");
+
+  const [errors, setErrors] = useState<ConnectAgentErrors>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const suggested: SuggestedAgent = useMemo(() => result?.suggestedAgent ?? {}, [result]);
+  const authType = (suggested.auth_type ?? null) as AgentAuthType | null;
+  const isAuthSupported = !authType || SUPPORTED_CARD_AUTH_TYPES.has(authType);
+  const teamId =
+    visibility === "team" ? resolveTeamId(teams, selectedTeamId, chosenTeamId) : undefined;
+
+  const authValues: AgentAuthValues = useMemo(
+    () => ({
+      token,
+      username,
+      password,
+      headers,
+      queryParamName,
+      queryParamValue,
+      oauthTokenUrl,
+      oauthClientId,
+      oauthClientSecret,
+      oauthScopes,
+    }),
+    [
+      token,
+      username,
+      password,
+      headers,
+      queryParamName,
+      queryParamValue,
+      oauthTokenUrl,
+      oauthClientId,
+      oauthClientSecret,
+      oauthScopes,
+    ],
+  );
+
+  const clearError = useCallback((key: keyof ConnectAgentErrors) => {
+    setErrors((prev) => (prev[key] ? { ...prev, [key]: undefined } : prev));
+  }, []);
+
+  const setUrl = useCallback(
+    (value: string) => {
+      setUrlState(value);
+      setCardUnavailable(false);
+      clearError("url");
+    },
+    [clearError],
+  );
+
+  const setVisibility = useCallback(
+    (value: Visibility) => {
+      setVisibilityState(value);
+      clearError("teamId");
+    },
+    [clearError],
+  );
+
+  const setTeamId = useCallback(
+    (value: string) => {
+      setChosenTeamId(value);
+      clearError("teamId");
+    },
+    [clearError],
+  );
+
+  const setManualAuthType = useCallback(
+    (value: AgentAuthType) => {
+      setManualAuthTypeState(value);
+      // The "custom headers" tab starts with one empty row, as in the design.
+      if (value === "authheaders") {
+        setHeaders((prev) =>
+          prev.length > 0 ? prev : [{ id: crypto.randomUUID(), key: "", value: "" }],
+        );
+      }
+      clearError("credentials");
+    },
+    [clearError],
+  );
+
+  const resetAuthValues = useCallback((next: SuggestedAgent) => {
+    setToken("");
+    setUsername("");
+    setPassword("");
+    setHeaders(
+      next.auth_type === "authheaders"
+        ? [{ id: crypto.randomUUID(), key: next.auth_header_key ?? "", value: "" }]
+        : [],
+    );
+    setQueryParamName(next.auth_query_param_key ?? "");
+    setQueryParamValue("");
+  }, []);
+
+  /** Step 1: read the card. Only a found card advances; anything else opens manual entry. */
+  const submitUrl = useCallback(async () => {
+    const trimmed = url.trim();
+    if (!isHttpUrl(trimmed)) {
+      setErrors((prev) => ({
+        ...prev,
+        url: intl.formatMessage({ id: "agents.connect.url.invalid" }),
+      }));
+      return;
+    }
+
+    setIsFetching(true);
+    setCardUnavailable(false);
+    try {
+      const fetched = await agentsApi.fetchCard(trimmed);
+      if (fetched.outcome === "found" && fetched.card && fetched.suggestedAgent) {
+        setResult(fetched);
+        resetAuthValues(fetched.suggestedAgent);
+        setStep("review");
+      } else {
+        setCardUnavailable(true);
+        setManualOpen(true);
+      }
+    } catch {
+      setCardUnavailable(true);
+      setManualOpen(true);
+    } finally {
+      setIsFetching(false);
+    }
+  }, [url, intl, resetAuthValues]);
+
+  const goToAuth = useCallback(() => setStep("auth"), []);
+
+  /** One step back. From the first step the caller leaves the form instead. */
+  const goBack = useCallback((): boolean => {
+    if (step === "auth") {
+      setStep("review");
+      return true;
+    }
+    if (step === "review") {
+      setStep("url");
+      return true;
+    }
+    return false;
+  }, [step]);
+
+  const missingAuthValues = useCallback(
+    (type: AgentAuthType | null): string | undefined =>
+      hasRequiredCredentials(type, authValues)
+        ? undefined
+        : intl.formatMessage({ id: "agents.connect.auth.credentialsRequired" }),
+    [authValues, intl],
+  );
+
+  const create = useCallback(
+    async (payload: BodyCreateA2aAgentV1A2aPost) => {
+      setIsSubmitting(true);
+      try {
+        const created = await agentsApi.create(payload);
+        onCreated(created);
+      } catch (err) {
+        const detail = err instanceof ApiError ? extractApiErrorDetail(err.body) : null;
+        setErrors({ submit: detail || intl.formatMessage({ id: "agents.connect.error.create" }) });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [onCreated, intl],
+  );
+
+  /** Step 3 of the card flow: register the agent the card described. */
+  const submit = useCallback(async () => {
+    const next: ConnectAgentErrors = {};
+    if (!isAuthSupported) {
+      next.submit = intl.formatMessage({ id: "agents.connect.auth.unsupported" });
+    }
+    next.credentials = missingAuthValues(authType);
+    if (visibility === "team" && !teamId) {
+      next.teamId = intl.formatMessage({ id: "agents.connect.auth.teamRequired" });
+    }
+    setErrors(next);
+    if (next.submit || next.credentials || next.teamId) return;
+
+    if (!suggested.name || !suggested.endpoint_url) {
+      setErrors({ submit: intl.formatMessage({ id: "agents.connect.error.incompleteCard" }) });
+      return;
+    }
+
+    // Everything the card yielded, plus only what a card cannot contain.
+    const agent: A2AAgentCreate = {
+      ...(suggested as unknown as A2AAgentCreate),
+      name: suggested.name,
+      endpoint_url: suggested.endpoint_url,
+      ...(tags.length > 0 ? { tags } : {}),
+      ...credentialFields(authType, authValues),
+    };
+    await create({ agent, visibility, ...(teamId ? { team_id: teamId } : {}) });
+  }, [
+    isAuthSupported,
+    missingAuthValues,
+    authType,
+    visibility,
+    teamId,
+    suggested,
+    tags,
+    authValues,
+    create,
+    intl,
+  ]);
+
+  /** Registers an agent from the manually entered details. No card is stored for it. */
+  const submitManual = useCallback(async () => {
+    const next: ConnectAgentErrors = {};
+    const name = manualName.trim();
+    const endpoint = manualEndpoint.trim();
+    if (!name) next.name = intl.formatMessage({ id: "agents.connect.manual.name.required" });
+    if (!isHttpUrl(endpoint)) {
+      next.endpoint = intl.formatMessage({ id: "agents.connect.manual.endpoint.invalid" });
+    }
+    next.credentials = missingAuthValues(manualAuthType);
+    if (visibility === "team" && !teamId) {
+      next.teamId = intl.formatMessage({ id: "agents.connect.auth.teamRequired" });
+    }
+    setErrors(next);
+    if (Object.values(next).some(Boolean)) return;
+
+    const description = manualDescription.trim();
+    const manualTagList = [...new Set(parseList(manualTags))];
+    const agent: A2AAgentCreate = {
+      name,
+      endpoint_url: endpoint,
+      protocol_version: protocolVersion,
+      // TODO(IBM/mcp-context-forge#7383): also send the protocol binding once the API stores one.
+      ...(description ? { description } : {}),
+      ...(manualTagList.length > 0 ? { tags: manualTagList } : {}),
+      ...credentialFields(manualAuthType, authValues),
+    };
+    await create({ agent, visibility, ...(teamId ? { team_id: teamId } : {}) });
+  }, [
+    manualName,
+    manualEndpoint,
+    manualDescription,
+    manualTags,
+    manualAuthType,
+    protocolVersion,
+    visibility,
+    teamId,
+    authValues,
+    missingAuthValues,
+    create,
+    intl,
+  ]);
+
+  return {
+    step,
+    url,
+    setUrl,
+    isFetching,
+    cardUnavailable,
+    result,
+    submitUrl,
+    goToAuth,
+    goBack,
+    authType,
+    isAuthSupported,
+    token,
+    setToken,
+    username,
+    setUsername,
+    password,
+    setPassword,
+    headers,
+    setHeaders,
+    queryParamName,
+    setQueryParamName,
+    queryParamValue,
+    setQueryParamValue,
+    oauthTokenUrl,
+    setOauthTokenUrl,
+    oauthClientId,
+    setOauthClientId,
+    oauthClientSecret,
+    setOauthClientSecret,
+    oauthScopes,
+    setOauthScopes,
+    visibility,
+    setVisibility,
+    teams,
+    teamId,
+    setTeamId,
+    tags,
+    setTags,
+    manualOpen,
+    setManualOpen,
+    manualName,
+    setManualName,
+    manualEndpoint,
+    setManualEndpoint,
+    manualDescription,
+    setManualDescription,
+    manualTags,
+    setManualTags,
+    protocolVersion,
+    setProtocolVersion,
+    manualAuthType,
+    setManualAuthType,
+    submitManual,
+    errors,
+    clearError,
+    isSubmitting,
+    submit,
+  };
+}
+
+export type ConnectAgentFormState = ReturnType<typeof useConnectAgentForm>;
diff --git a/src/i18n/locales/en-US/agents.json b/src/i18n/locales/en-US/agents.json
index 8e2e0752..af586215 100644
--- a/src/i18n/locales/en-US/agents.json
+++ b/src/i18n/locales/en-US/agents.json
@@ -20,5 +20,62 @@
   "agents.delete.success": "Deleted {name}",
   "agents.delete.error": "Failed to delete {name}",
   "agents.connect.title": "Connect agent",
-  "agents.connect.description": "Connect an agent over the A2A protocol"
+  "agents.connect.description": "Connect an agent over the A2A protocol",
+  "agents.connect.success": "Connected {name}",
+  "agents.connect.url.intro": "ContextForge will read the agent's Agent Card to discover its skills, capabilities, and authentication requirements. If the agent doesn't publish a card, enter its details manually. The agent should be running.",
+  "agents.connect.url.label": "URL",
+  "agents.connect.url.info": "The agent's base URL, or the direct URL of its Agent Card (for example https://agent.example.com/.well-known/agent-card.json).",
+  "agents.connect.url.placeholder": "Add URL for a running agent...",
+  "agents.connect.url.invalid": "Enter a valid http or https URL.",
+  "agents.connect.continue": "Continue",
+  "agents.connect.checking": "Checking agent...",
+  "agents.connect.viewMore": "View more",
+  "agents.connect.outcome.noCard": "Agent card not available: add the details for a running agent manually.",
+  "agents.connect.review.badge": "agent v{version}",
+  "agents.connect.review.skills": "Skills ({count})",
+  "agents.connect.review.version": "Version",
+  "agents.connect.review.a2aVersion": "A2A v{version}",
+  "agents.connect.review.endpoint": "Endpoint",
+  "agents.connect.review.interfaces": "Interfaces",
+  "agents.connect.review.requires": "Requires",
+  "agents.connect.auth.title": "Authenticate agent",
+  "agents.connect.auth.titleNone": "Agent settings",
+  "agents.connect.auth.intro": "Add the required credentials from the agent provider to connect the agent.",
+  "agents.connect.auth.introNone": "This agent doesn't require credentials. Choose who can see it.",
+  "agents.connect.auth.visibility": "Visibility",
+  "agents.connect.auth.tags": "Tags",
+  "agents.connect.auth.credentialsRequired": "Enter the credentials the agent requires.",
+  "agents.connect.auth.teamRequired": "Choose a team for this agent.",
+  "agents.connect.auth.unsupported": "This agent uses OAuth 2.0, which can't be set up from this form yet.",
+  "agents.connect.auth.submit": "Connect",
+  "agents.connect.auth.submitting": "Connecting...",
+  "agents.connect.error.incompleteCard": "The Agent Card is missing a name or endpoint, so the agent can't be registered.",
+  "agents.connect.error.create": "Failed to connect the agent. Try again.",
+  "agents.card.skills.count": "{count, plural, one {# skill} other {# skills}}",
+  "agents.connect.manual.toggle": "Enter manually",
+  "agents.connect.manual.name.label": "Name",
+  "agents.connect.manual.name.placeholder": "Add an agent name",
+  "agents.connect.manual.name.required": "Enter a name for the agent.",
+  "agents.connect.manual.endpoint.label": "Endpoint URL",
+  "agents.connect.manual.endpoint.info": "The address ContextForge sends requests to when it calls this agent.",
+  "agents.connect.manual.endpoint.placeholder": "https://agents.example.com/a2a",
+  "agents.connect.manual.endpoint.invalid": "Enter a valid http or https endpoint URL.",
+  "agents.connect.manual.binding.label": "Protocol binding",
+  "agents.connect.manual.binding.jsonrpc": "JSON-RPC",
+  "agents.connect.manual.binding.http": "HTTP+JSON",
+  "agents.connect.manual.binding.httpUnsupported": "ContextForge calls agents over JSON-RPC. HTTP+JSON isn't supported yet.",
+  "agents.connect.manual.version.label": "Protocol version",
+  "agents.connect.manual.oauth.intro": "ContextForge gets a token with the OAuth 2.0 client credentials flow.",
+  "agents.connect.manual.oauth.tokenUrl": "Token URL",
+  "agents.connect.manual.oauth.clientId": "Client ID",
+  "agents.connect.manual.oauth.clientIdPlaceholder": "Add the client ID...",
+  "agents.connect.manual.oauth.clientSecret": "Client secret",
+  "agents.connect.manual.oauth.clientSecretPlaceholder": "Add the client secret...",
+  "agents.connect.manual.oauth.scopes": "Scopes",
+  "agents.connect.manual.oauth.scopesPlaceholder": "Add scopes separated with commas or spaces...",
+  "agents.connect.manual.version.option": "A2A {version}",
+  "agents.connect.manual.tags.label": "Tags",
+  "agents.connect.manual.tags.placeholder": "Add optional tags separated with commas",
+  "agents.connect.manual.description.label": "Description",
+  "agents.connect.manual.description.placeholder": "Add an optional description..."
 }
diff --git a/src/i18n/locales/es-ES/agents.json b/src/i18n/locales/es-ES/agents.json
index 17463b0e..5141f785 100644
--- a/src/i18n/locales/es-ES/agents.json
+++ b/src/i18n/locales/es-ES/agents.json
@@ -20,5 +20,62 @@
   "agents.delete.success": "{name} eliminado",
   "agents.delete.error": "No se pudo eliminar {name}",
   "agents.connect.title": "Conectar agente",
-  "agents.connect.description": "Conecta un agente mediante el protocolo A2A"
+  "agents.connect.description": "Conecta un agente mediante el protocolo A2A",
+  "agents.connect.success": "{name} conectado",
+  "agents.connect.url.intro": "ContextForge leerá la Agent Card del agente para descubrir sus habilidades, capacidades y requisitos de autenticación. Si el agente no publica una tarjeta, introduce sus datos manualmente. El agente debe estar en ejecución.",
+  "agents.connect.url.label": "URL",
+  "agents.connect.url.info": "La URL base del agente, o la URL directa de su Agent Card (por ejemplo https://agent.example.com/.well-known/agent-card.json).",
+  "agents.connect.url.placeholder": "Agrega la URL de un agente en ejecución...",
+  "agents.connect.url.invalid": "Introduce una URL http o https válida.",
+  "agents.connect.continue": "Continuar",
+  "agents.connect.checking": "Comprobando agente...",
+  "agents.connect.viewMore": "Ver más",
+  "agents.connect.outcome.noCard": "Agent Card no disponible: agrega manualmente los datos de un agente en ejecución.",
+  "agents.connect.review.badge": "agente v{version}",
+  "agents.connect.review.skills": "Habilidades ({count})",
+  "agents.connect.review.version": "Versión",
+  "agents.connect.review.a2aVersion": "A2A v{version}",
+  "agents.connect.review.endpoint": "Endpoint",
+  "agents.connect.review.interfaces": "Interfaces",
+  "agents.connect.review.requires": "Requiere",
+  "agents.connect.auth.title": "Autenticar agente",
+  "agents.connect.auth.titleNone": "Ajustes del agente",
+  "agents.connect.auth.intro": "Agrega las credenciales requeridas del proveedor del agente para conectarlo.",
+  "agents.connect.auth.introNone": "Este agente no requiere credenciales. Elige quién puede verlo.",
+  "agents.connect.auth.visibility": "Visibilidad",
+  "agents.connect.auth.tags": "Etiquetas",
+  "agents.connect.auth.credentialsRequired": "Introduce las credenciales que requiere el agente.",
+  "agents.connect.auth.teamRequired": "Elige un equipo para este agente.",
+  "agents.connect.auth.unsupported": "Este agente usa OAuth 2.0, que aún no se puede configurar desde este formulario.",
+  "agents.connect.auth.submit": "Conectar",
+  "agents.connect.auth.submitting": "Conectando...",
+  "agents.connect.error.incompleteCard": "A la Agent Card le falta el nombre o el endpoint, por lo que no se puede registrar el agente.",
+  "agents.connect.error.create": "No se pudo conectar el agente. Inténtalo de nuevo.",
+  "agents.card.skills.count": "{count, plural, one {# habilidad} other {# habilidades}}",
+  "agents.connect.manual.toggle": "Introducir manualmente",
+  "agents.connect.manual.name.label": "Nombre",
+  "agents.connect.manual.name.placeholder": "Agrega un nombre para el agente",
+  "agents.connect.manual.name.required": "Introduce un nombre para el agente.",
+  "agents.connect.manual.endpoint.label": "URL del endpoint",
+  "agents.connect.manual.endpoint.info": "La dirección a la que ContextForge envía las solicitudes cuando llama a este agente.",
+  "agents.connect.manual.endpoint.placeholder": "https://agents.example.com/a2a",
+  "agents.connect.manual.endpoint.invalid": "Introduce una URL de endpoint http o https válida.",
+  "agents.connect.manual.binding.label": "Enlace de protocolo",
+  "agents.connect.manual.binding.jsonrpc": "JSON-RPC",
+  "agents.connect.manual.binding.http": "HTTP+JSON",
+  "agents.connect.manual.binding.httpUnsupported": "ContextForge llama a los agentes mediante JSON-RPC. HTTP+JSON aún no se admite.",
+  "agents.connect.manual.version.label": "Versión del protocolo",
+  "agents.connect.manual.oauth.intro": "ContextForge obtiene un token con el flujo de credenciales de cliente de OAuth 2.0.",
+  "agents.connect.manual.oauth.tokenUrl": "URL del token",
+  "agents.connect.manual.oauth.clientId": "ID de cliente",
+  "agents.connect.manual.oauth.clientIdPlaceholder": "Agrega el ID de cliente...",
+  "agents.connect.manual.oauth.clientSecret": "Secreto de cliente",
+  "agents.connect.manual.oauth.clientSecretPlaceholder": "Agrega el secreto de cliente...",
+  "agents.connect.manual.oauth.scopes": "Ámbitos",
+  "agents.connect.manual.oauth.scopesPlaceholder": "Agrega ámbitos separados por comas o espacios...",
+  "agents.connect.manual.version.option": "A2A {version}",
+  "agents.connect.manual.tags.label": "Etiquetas",
+  "agents.connect.manual.tags.placeholder": "Agrega etiquetas opcionales separadas por comas",
+  "agents.connect.manual.description.label": "Descripción",
+  "agents.connect.manual.description.placeholder": "Agrega una descripción opcional..."
 }
diff --git a/src/i18n/locales/pt-BR/agents.json b/src/i18n/locales/pt-BR/agents.json
index afd9dd9d..cd984d3f 100644
--- a/src/i18n/locales/pt-BR/agents.json
+++ b/src/i18n/locales/pt-BR/agents.json
@@ -20,5 +20,62 @@
   "agents.delete.success": "{name} excluído",
   "agents.delete.error": "Falha ao excluir {name}",
   "agents.connect.title": "Conectar agente",
-  "agents.connect.description": "Conecte um agente pelo protocolo A2A"
+  "agents.connect.description": "Conecte um agente pelo protocolo A2A",
+  "agents.connect.success": "{name} conectado",
+  "agents.connect.url.intro": "O ContextForge lerá o Agent Card do agente para descobrir suas habilidades, capacidades e requisitos de autenticação. Se o agente não publicar um card, informe os detalhes manualmente. O agente deve estar em execução.",
+  "agents.connect.url.label": "URL",
+  "agents.connect.url.info": "A URL base do agente ou a URL direta do seu Agent Card (por exemplo https://agent.example.com/.well-known/agent-card.json).",
+  "agents.connect.url.placeholder": "Adicione a URL de um agente em execução...",
+  "agents.connect.url.invalid": "Informe uma URL http ou https válida.",
+  "agents.connect.continue": "Continuar",
+  "agents.connect.checking": "Verificando agente...",
+  "agents.connect.viewMore": "Ver mais",
+  "agents.connect.outcome.noCard": "Agent Card indisponível: adicione manualmente os detalhes de um agente em execução.",
+  "agents.connect.review.badge": "agente v{version}",
+  "agents.connect.review.skills": "Habilidades ({count})",
+  "agents.connect.review.version": "Versão",
+  "agents.connect.review.a2aVersion": "A2A v{version}",
+  "agents.connect.review.endpoint": "Endpoint",
+  "agents.connect.review.interfaces": "Interfaces",
+  "agents.connect.review.requires": "Requer",
+  "agents.connect.auth.title": "Autenticar agente",
+  "agents.connect.auth.titleNone": "Configurações do agente",
+  "agents.connect.auth.intro": "Adicione as credenciais exigidas pelo provedor do agente para conectá-lo.",
+  "agents.connect.auth.introNone": "Este agente não exige credenciais. Escolha quem pode vê-lo.",
+  "agents.connect.auth.visibility": "Visibilidade",
+  "agents.connect.auth.tags": "Tags",
+  "agents.connect.auth.credentialsRequired": "Informe as credenciais exigidas pelo agente.",
+  "agents.connect.auth.teamRequired": "Escolha uma equipe para este agente.",
+  "agents.connect.auth.unsupported": "Este agente usa OAuth 2.0, que ainda não pode ser configurado neste formulário.",
+  "agents.connect.auth.submit": "Conectar",
+  "agents.connect.auth.submitting": "Conectando...",
+  "agents.connect.error.incompleteCard": "O Agent Card não tem nome ou endpoint, então o agente não pode ser registrado.",
+  "agents.connect.error.create": "Falha ao conectar o agente. Tente novamente.",
+  "agents.card.skills.count": "{count, plural, one {# habilidade} other {# habilidades}}",
+  "agents.connect.manual.toggle": "Inserir manualmente",
+  "agents.connect.manual.name.label": "Nome",
+  "agents.connect.manual.name.placeholder": "Adicione um nome para o agente",
+  "agents.connect.manual.name.required": "Informe um nome para o agente.",
+  "agents.connect.manual.endpoint.label": "URL do endpoint",
+  "agents.connect.manual.endpoint.info": "O endereço para o qual o ContextForge envia solicitações ao chamar este agente.",
+  "agents.connect.manual.endpoint.placeholder": "https://agents.example.com/a2a",
+  "agents.connect.manual.endpoint.invalid": "Informe uma URL de endpoint http ou https válida.",
+  "agents.connect.manual.binding.label": "Vínculo de protocolo",
+  "agents.connect.manual.binding.jsonrpc": "JSON-RPC",
+  "agents.connect.manual.binding.http": "HTTP+JSON",
+  "agents.connect.manual.binding.httpUnsupported": "O ContextForge chama agentes por JSON-RPC. HTTP+JSON ainda não é suportado.",
+  "agents.connect.manual.version.label": "Versão do protocolo",
+  "agents.connect.manual.oauth.intro": "O ContextForge obtém um token com o fluxo de credenciais de cliente do OAuth 2.0.",
+  "agents.connect.manual.oauth.tokenUrl": "URL do token",
+  "agents.connect.manual.oauth.clientId": "ID do cliente",
+  "agents.connect.manual.oauth.clientIdPlaceholder": "Adicione o ID do cliente...",
+  "agents.connect.manual.oauth.clientSecret": "Segredo do cliente",
+  "agents.connect.manual.oauth.clientSecretPlaceholder": "Adicione o segredo do cliente...",
+  "agents.connect.manual.oauth.scopes": "Escopos",
+  "agents.connect.manual.oauth.scopesPlaceholder": "Adicione escopos separados por vírgulas ou espaços...",
+  "agents.connect.manual.version.option": "A2A {version}",
+  "agents.connect.manual.tags.label": "Tags",
+  "agents.connect.manual.tags.placeholder": "Adicione tags opcionais separadas por vírgulas",
+  "agents.connect.manual.description.label": "Descrição",
+  "agents.connect.manual.description.placeholder": "Adicione uma descrição opcional..."
 }
diff --git a/src/pages/Agents.test.tsx b/src/pages/Agents.test.tsx
index e73955ed..bfb6e283 100644
--- a/src/pages/Agents.test.tsx
+++ b/src/pages/Agents.test.tsx
@@ -161,48 +161,87 @@ describe("Agents", () => {
     expect(await screen.findByRole("img", { name: "Inactive" })).toBeInTheDocument();
   });
 
-  it("renders tag chips for an agent's tags", async () => {
+  it("renders a chip per skill with a skills count, and no tag chips", async () => {
     const mockAgents = [
-      createMockAgent(1, { tags: [{ label: "billing" }, { label: "internal" }] }),
+      createMockAgent(1, {
+        tags: [{ id: "billing", label: "billing" }],
+        capabilities: {
+          skills: [
+            { id: "echo", name: "Echo" },
+            { id: "route", name: "Route" },
+          ],
+        },
+      }),
     ];
     server.use(http.get("/api/v1/a2a", () => HttpResponse.json(mockAgents)));
 
     renderWithProviders(<Agents />);
 
-    await waitFor(() => {
-      expect(screen.getByText("billing")).toBeInTheDocument();
-    });
-    expect(screen.getByText("internal")).toBeInTheDocument();
+    expect(await screen.findByText("Echo")).toBeInTheDocument();
+    expect(screen.getByText("Route")).toBeInTheDocument();
+    expect(screen.getByText("2 skills")).toBeInTheDocument();
+    expect(screen.queryByText("billing")).not.toBeInTheDocument();
+  });
+
+  it("uses the singular for a single skill", async () => {
+    const mockAgents = [createMockAgent(1, { capabilities: { skills: [{ name: "Echo" }] } })];
+    server.use(http.get("/api/v1/a2a", () => HttpResponse.json(mockAgents)));
+
+    renderWithProviders(<Agents />);
+
+    expect(await screen.findByText("1 skill")).toBeInTheDocument();
+  });
+
+  it("reads skills from the top-level list when the API provides it", async () => {
+    const agent = {
+      ...createMockAgent(1),
+      skills: [{ id: "echo", name: "Echo", description: "d", tags: [] }],
+    };
+    server.use(http.get("/api/v1/a2a", () => HttpResponse.json([agent])));
+
+    renderWithProviders(<Agents />);
+
+    expect(await screen.findByText("Echo")).toBeInTheDocument();
+    expect(screen.getByText("1 skill")).toBeInTheDocument();
   });
 
-  it("caps visible tags at 8 and shows a +N overflow chip", async () => {
+  it("caps visible skills at 8 and shows a +N overflow chip", async () => {
     const mockAgents = [
       createMockAgent(1, {
-        tags: Array.from({ length: 10 }, (_, i) => ({ label: `tag-${i + 1}` })),
+        capabilities: {
+          skills: Array.from({ length: 10 }, (_, i) => ({ name: `skill-${i + 1}` })),
+        },
       }),
     ];
     server.use(http.get("/api/v1/a2a", () => HttpResponse.json(mockAgents)));
 
     renderWithProviders(<Agents />);
 
-    await waitFor(() => {
-      expect(screen.getByText("tag-1")).toBeInTheDocument();
-    });
-    expect(screen.getByText("tag-8")).toBeInTheDocument();
-    expect(screen.queryByText("tag-9")).not.toBeInTheDocument();
+    expect(await screen.findByText("skill-1")).toBeInTheDocument();
+    expect(screen.getByText("skill-8")).toBeInTheDocument();
+    expect(screen.queryByText("skill-9")).not.toBeInTheDocument();
     expect(screen.getByText("+2")).toBeInTheDocument();
+    expect(screen.getByText("10 skills")).toBeInTheDocument();
   });
 
-  it("renders without tags when the field is omitted entirely", async () => {
+  it("shows no skills count or chips for an agent without skills", async () => {
+    server.use(http.get("/api/v1/a2a", () => HttpResponse.json([createMockAgent(1)])));
+
+    renderWithProviders(<Agents />);
+
+    expect(await screen.findByText("Agent 1")).toBeInTheDocument();
+    expect(screen.queryByText(/skills?$/)).not.toBeInTheDocument();
+  });
+
+  it("renders when tags and capabilities are omitted entirely", async () => {
     const agent = createMockAgent(1);
     delete (agent as Partial<Agent>).tags;
+    delete (agent as Partial<Agent>).capabilities;
     server.use(http.get("/api/v1/a2a", () => HttpResponse.json([agent])));
 
     renderWithProviders(<Agents />);
 
-    await waitFor(() => {
-      expect(screen.getByText("Agent 1")).toBeInTheDocument();
-    });
+    expect(await screen.findByText("Agent 1")).toBeInTheDocument();
   });
 
   it("ignores null entries returned by the API", async () => {
@@ -289,6 +328,67 @@ describe("Agents", () => {
       ).toBeTruthy();
     });
 
+    it("opens the connect form from the card, and Cancel returns to the list", async () => {
+      mockHasPermission.mockImplementation(() => true);
+      server.use(http.get("/api/v1/a2a", () => HttpResponse.json([createMockAgent(1)])));
+      const user = userEvent.setup();
+
+      renderWithProviders(<Agents />);
+      await user.click(await screen.findByRole("button", { name: /Connect agent/ }));
+
+      expect(
+        await screen.findByPlaceholderText("Add URL for a running agent..."),
+      ).toBeInTheDocument();
+      expect(screen.queryByText("Agent 1")).not.toBeInTheDocument();
+
+      await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+      expect(await screen.findByText("Agent 1")).toBeInTheDocument();
+    });
+
+    it("registers an agent from its card and shows it in the refreshed list", async () => {
+      mockHasPermission.mockImplementation(() => true);
+      let registered = false;
+      server.use(
+        http.get("/api/v1/a2a", () =>
+          HttpResponse.json(registered ? [createMockAgent(1, { name: "Visual Router" })] : []),
+        ),
+        http.post("/api/v1/a2a/fetch-card", () =>
+          HttpResponse.json({
+            found: true,
+            outcome: "found",
+            detectedVersion: "1.0",
+            card: { name: "Visual Router", skills: [] },
+            suggestedAgent: {
+              name: "Visual Router",
+              endpoint_url: "https://agent.example.com/rpc",
+              protocol_version: "1.0",
+            },
+            warnings: [],
+          }),
+        ),
+        http.post("/api/v1/a2a", () => {
+          registered = true;
+          return HttpResponse.json({ id: "agent-1", name: "Visual Router" }, { status: 201 });
+        }),
+      );
+      const user = userEvent.setup();
+
+      renderWithProviders(<Agents />);
+      await user.click(await screen.findByRole("button", { name: /Connect agent/ }));
+      await user.type(
+        await screen.findByPlaceholderText("Add URL for a running agent..."),
+        "https://agent.example.com",
+      );
+      await user.click(screen.getByRole("button", { name: "Continue" }));
+      await user.click(await screen.findByRole("button", { name: "Continue" }));
+      await user.click(await screen.findByRole("button", { name: "Connect" }));
+
+      await waitFor(() => expect(toast.success).toHaveBeenCalledWith("Connected Visual Router"));
+      expect(await screen.findByRole("img", { name: "Active" })).toBeInTheDocument();
+      expect(screen.getByText("Visual Router")).toBeInTheDocument();
+    });
+
     it("hides the Connect agent card without a2a.create", async () => {
       server.use(http.get("/api/v1/a2a", () => HttpResponse.json([createMockAgent(1)])));
 
diff --git a/src/pages/Agents.tsx b/src/pages/Agents.tsx
index 15c5d463..46be4ec4 100644
--- a/src/pages/Agents.tsx
+++ b/src/pages/Agents.tsx
@@ -7,7 +7,6 @@ import { useQuery } from "@/hooks/useQuery";
 import { agentsApi } from "@/api/agents";
 import { ApiError } from "@/api/client";
 import { extractApiErrorDetail } from "@/utils/errors";
-import { getTagLabels } from "@/utils/tags";
 import type { Agent } from "@/types/agent";
 import type { A2AAgentRead } from "@/generated/types";
 import { Button } from "@/components/ui/button";
@@ -22,6 +21,8 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { ConfirmDialog } from "@/components/servers/ConfirmDialog";
+import { ConnectAgentForm } from "@/components/agents/ConnectAgentForm";
+import { getAgentSkillNames } from "@/components/agents/agentSkills";
 
 // Only the fields the card actually renders — `Agent` also carries credential
 // fields (authToken, authPassword, ...) that must never reach the UI. Typing
@@ -29,8 +30,11 @@ import { ConfirmDialog } from "@/components/servers/ConfirmDialog";
 // stray `{agent.authToken}` into a type error instead of a silent leak.
 type AgentCardFields = Pick<
   Agent,
-  "id" | "name" | "description" | "enabled" | "reachable" | "tags"
->;
+  "id" | "name" | "description" | "enabled" | "reachable" | "capabilities"
+> & {
+  /** Top-level skills list (IBM/mcp-context-forge#7433), not in the generated type yet. */
+  skills?: unknown;
+};
 
 interface AgentCardProps {
   agent: AgentCardFields;
@@ -41,11 +45,11 @@ interface AgentCardProps {
 
 function AgentCard({ agent, onToggle, onDelete }: AgentCardProps) {
   const intl = useIntl();
-  const MAX_VISIBLE_TAGS = 8;
+  const MAX_VISIBLE_SKILLS = 8;
   const isActive = agent.enabled && agent.reachable;
-  const tags = getTagLabels(agent.tags ?? []);
-  const visibleTags = tags.slice(0, MAX_VISIBLE_TAGS);
-  const remainingCount = tags.length - MAX_VISIBLE_TAGS;
+  const skills = getAgentSkillNames(agent);
+  const visibleSkills = skills.slice(0, MAX_VISIBLE_SKILLS);
+  const remainingCount = skills.length - MAX_VISIBLE_SKILLS;
 
   return (
     <Card size="sm">
@@ -69,6 +73,11 @@ function AgentCard({ agent, onToggle, onDelete }: AgentCardProps) {
               })}
               className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${isActive ? "bg-tool-status-active" : "bg-tool-status-inactive"}`}
             />
+            {skills.length > 0 && (
+              <span className="flex-shrink-0 text-sm font-semibold text-muted-foreground">
+                {intl.formatMessage({ id: "agents.card.skills.count" }, { count: skills.length })}
+              </span>
+            )}
           </div>
 
           {agent.id && (onToggle || onDelete) && (
@@ -116,12 +125,11 @@ function AgentCard({ agent, onToggle, onDelete }: AgentCardProps) {
             {agent.description}
           </Typography>
         )}
-        {tags.length > 0 && (
+        {skills.length > 0 && (
           <div className="flex flex-wrap gap-1">
-            {visibleTags.map((tag, index) => (
-              // Index in the key too: labels aren't guaranteed unique, and the
-              // label alone would collide for a repeated tag on one agent.
-              <CardTag key={`${tag}-${index}`}>{tag}</CardTag>
+            {visibleSkills.map((skill, index) => (
+              // Index in the key too: skill names aren't guaranteed unique on one agent.
+              <CardTag key={`${skill}-${index}`}>{skill}</CardTag>
             ))}
             {remainingCount > 0 && <CardTag>+{remainingCount}</CardTag>}
           </div>
@@ -131,12 +139,23 @@ function AgentCard({ agent, onToggle, onDelete }: AgentCardProps) {
   );
 }
 
-// Styled like the Tools page's "Add tools" card. The connect form isn't built
-// yet, so the card is shown but not actionable.
-function ConnectAgentCard() {
+// Styled like the Tools page's "Add tools" card.
+function ConnectAgentCard({ onConnect }: { onConnect: () => void }) {
   const intl = useIntl();
   return (
-    <Card size="sm">
+    <Card
+      size="sm"
+      role="button"
+      tabIndex={0}
+      className="cursor-pointer transition-opacity hover:opacity-90"
+      onClick={onConnect}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onConnect();
+        }
+      }}
+    >
       <CardHeader>
         <div className="flex items-center gap-3">
           <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-tool-add-icon-bg shadow-sm">
@@ -165,11 +184,13 @@ export function Agents() {
   const headingRef = useRef<HTMLHeadingElement>(null);
   const [deleteTarget, setDeleteTarget] = useState<{ id: string; name: string } | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
   const {
     data: agentsData,
     error,
     isLoading,
     setData: setAgentsData,
+    refetch,
   } = useQuery<A2AAgentRead[]>("/v1/a2a?limit=0&include_inactive=true");
 
   const agents = useMemo(
@@ -249,6 +270,25 @@ export function Agents() {
     }
   }, [deleteTarget, setAgentsData, intl]);
 
+  const handleConnected = useCallback(
+    (created: A2AAgentRead) => {
+      setIsConnecting(false);
+      toast.success(intl.formatMessage({ id: "agents.connect.success" }, { name: created?.name }));
+      // The list is the source of truth for what the gateway now holds; a failed
+      // refresh must not undo a registration that already succeeded.
+      refetch().catch(() => {});
+    },
+    [intl, refetch],
+  );
+
+  if (isConnecting) {
+    return (
+      <div className="p-6">
+        <ConnectAgentForm onCancel={() => setIsConnecting(false)} onCreated={handleConnected} />
+      </div>
+    );
+  }
+
   return (
     <div className="p-6">
       <h1 ref={headingRef} tabIndex={-1} className="mb-6 text-base font-semibold text-foreground">
@@ -293,7 +333,7 @@ export function Agents() {
 
       {!isLoading && !error && (agents.length > 0 || canCreate) && (
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3">
-          {canCreate && <ConnectAgentCard />}
+          {canCreate && <ConnectAgentCard onConnect={() => setIsConnecting(true)} />}
           {agents.map((agent, index) => (
             // `A2AAgentRead.id` types as string | null | undefined; fall back
             // to index so a null/missing id can't collide with another card.
diff --git a/src/types/agentCard.ts b/src/types/agentCard.ts
new file mode 100644
index 00000000..4b98be56
--- /dev/null
+++ b/src/types/agentCard.ts
@@ -0,0 +1,82 @@
+/**
+ * Types for `POST /v1/a2a/fetch-card`, which reads an A2A Agent Card from an
+ * endpoint that is not registered yet.
+ *
+ * Hand-written on purpose: the route is added by IBM/mcp-context-forge#7377 and
+ * is not in the generated client yet. Replace these with the generated types
+ * once `openapi.json` is regenerated from a gateway that includes it.
+ *
+ * Top-level keys are camelCase like the rest of the API. `suggestedAgent` is a
+ * plain mapping onto `A2AAgentCreate`, so its keys are that schema's snake_case
+ * field names.
+ */
+
+export type FetchCardOutcome = "found" | "no_card" | "auth_required" | "unreachable";
+
+export interface AgentCardSkill {
+  id?: string;
+  name: string;
+  description?: string;
+  tags?: string[];
+}
+
+export interface AgentCardInterface {
+  url: string;
+  protocolBinding?: string;
+  protocolVersion?: string;
+}
+
+export interface AgentCardProvider {
+  organization?: string;
+  url?: string;
+}
+
+/** An Agent Card normalized to the A2A 1.0 shape. Only the fields the UI reads are typed. */
+export interface AgentCard {
+  name: string;
+  description?: string;
+  version?: string;
+  provider?: AgentCardProvider;
+  documentationUrl?: string;
+  supportedInterfaces?: AgentCardInterface[];
+  skills?: AgentCardSkill[];
+  /**
+   * Keyed by scheme name. Each value wraps its body under one oneof key such as
+   * `httpAuthSecurityScheme`, `apiKeySecurityScheme` or `oauth2SecurityScheme`.
+   */
+  securitySchemes?: Record<string, Record<string, Record<string, unknown>>>;
+  /** Alternatives: any one requirement, each naming schemes (with scopes) that must all be satisfied. */
+  securityRequirements?: Array<{ schemes?: Record<string, { list?: string[] }> }>;
+  capabilities?: Record<string, unknown>;
+}
+
+/** Credential-free `A2AAgentCreate` fields derived from a card. */
+export interface SuggestedAgent {
+  name?: string;
+  description?: string;
+  endpoint_url?: string;
+  protocol_version?: string;
+  version?: string;
+  capabilities?: Record<string, unknown>;
+  auth_type?: string | null;
+  auth_query_param_key?: string;
+  auth_header_key?: string;
+  oauth_config?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+export interface FetchCardResult {
+  found: boolean;
+  outcome: FetchCardOutcome;
+  reason?: string | null;
+  /** `WWW-Authenticate` scheme name. Set only when `outcome` is `auth_required`. */
+  authScheme?: string | null;
+  sourceUrl?: string | null;
+  /** Card format version detected: "1.0" or "0.3". */
+  detectedVersion?: string | null;
+  card?: AgentCard | null;
+  rawCard?: Record<string, unknown> | null;
+  suggestedAgent?: SuggestedAgent | null;
+  /** Card content ContextForge could not map. */
+  warnings?: string[];
+}