Run playground requests without settings read access

# Conflicts:
#	src/layouts/Navigation.tsx

e2e/environment/.gitignore

@@ -1,6 +1,7 @@
 # Ignore zitadel environment
 .env
 Caddyfile
+agentgateway-stub.Caddyfile
 management.json
 turnserver.conf
 zitadel.env

e2e/environment/clean-test-env.sh

@@ -19,7 +19,7 @@ check_docker_compose() {
 DOCKER_COMPOSE_COMMAND=$(check_docker_compose)
 
 $DOCKER_COMPOSE_COMMAND down --volumes
-rm -f docker-compose.yml Caddyfile zitadel.env .env dashboard.env machinekey/zitadel-admin-sa.token turnserver.conf management.json proxy.env proxy-no-ports.env
+rm -f docker-compose.yml Caddyfile agentgateway-stub.Caddyfile zitadel.env .env dashboard.env machinekey/zitadel-admin-sa.token turnserver.conf management.json proxy.env proxy-no-ports.env
 rm -rf proxy-certs proxy-certs-no-ports
 rm -f ../../.test-config.json ../playwright.env.json
 rm -f ../fixtures/auth/owner.json ../fixtures/auth/user.json

e2e/environment/create-test-env.sh

@@ -532,7 +532,7 @@ initEnvironment() {
     echo "Generated files already exist, if you want to reinitialize the environment, please remove them first."
     echo "You can use the following commands:"
     echo "  $DOCKER_COMPOSE_COMMAND down --volumes # to remove all containers and volumes"
-    echo "  rm -f docker-compose.yml Caddyfile zitadel.env dashboard.env machinekey/zitadel-admin-sa.token turnserver.conf management.json proxy.env proxy-no-ports.env && rm -rf proxy-certs proxy-certs-no-ports"
+    echo "  rm -f docker-compose.yml Caddyfile agentgateway-stub.Caddyfile zitadel.env dashboard.env machinekey/zitadel-admin-sa.token turnserver.conf management.json proxy.env proxy-no-ports.env && rm -rf proxy-certs proxy-certs-no-ports"
     echo "Be aware that this will remove all data from the database, and you will have to reconfigure the dashboard."
     exit 1
   fi
@@ -540,6 +540,7 @@ initEnvironment() {
   echo Rendering initial files...
   renderDockerCompose > docker-compose.yml
   renderCaddyfile > Caddyfile
+  renderAgentGatewayStub > agentgateway-stub.Caddyfile
   renderZitadelEnv > zitadel.env
   echo "" > turnserver.conf
   echo "" > management.json
@@ -612,6 +613,30 @@ initEnvironment() {
   echo "Password: $ZITADEL_ADMIN_PASSWORD" | tee -a .env
 }
 
+# Saving an Agent Network provider makes management call the upstream and
+# refuses the save unless it answers a model listing, so a provider spec needs
+# a reachable OpenAI-compatible endpoint. agentgateway is self-hosted and has
+# no public one; this stub stands in for it, inside the compose network where
+# management can reach it and without depending on a vendor being up.
+renderAgentGatewayStub() {
+  cat <<'EOF'
+{
+	admin off
+	auto_https off
+}
+
+:8088 {
+	handle /v1/models {
+		header Content-Type application/json
+		respond `{"object":"list","data":[{"id":"agentgateway-e2e-model","object":"model","owned_by":"netbird-e2e"}]}` 200
+	}
+	handle {
+		respond 404
+	}
+}
+EOF
+}
+
 renderCaddyfile() {
   cat <<EOF
 {
@@ -818,6 +843,15 @@ services:
     volumes:
       - netbird_caddy_data:/data
       - ./Caddyfile:/etc/caddy/Caddyfile
+  # Stand-in upstream for the Agent Network provider specs: answers the model
+  # listing management probes before it accepts a provider save. Reachable
+  # only from inside the compose network, at http://agentgateway-stub:8088.
+  agentgateway-stub:
+    image: caddy
+    restart: unless-stopped
+    networks: [ netbird ]
+    volumes:
+      - ./agentgateway-stub.Caddyfile:/etc/caddy/Caddyfile
   # Management
   management:
     image: ghcr.io/netbirdio/management-cloud:${MANAGEMENT_IMAGE_TAG}

e2e/helpers/api.ts

@@ -46,8 +46,7 @@ async function getApiContext(
   ]);
 
   const request = response.request();
-  const authHeader =
-    (await request.allHeaders())["authorization"] || "";
+  const authHeader = (await request.allHeaders())["authorization"] || "";
   const token = authHeader.replace("Bearer ", "");
   const url = new URL(request.url());
   const origin = `${url.protocol}//${url.host}`;
@@ -76,15 +75,35 @@ async function apiDelete(page: Page, path: string): Promise<void> {
   });
 }
 
-async function apiPost<T>(page: Page, path: string, data: unknown): Promise<T> {
+async function apiPost<T>(page: Page, path: string, body: unknown): Promise<T> {
   const { token, origin } = await getApiContext(page);
   const resp = await page.request.post(`${origin}/api${path}`, {
     headers: { Authorization: `Bearer ${token}` },
-    data,
+    data: body,
   });
+  if (!resp.ok()) {
+    throw new Error(
+      `POST ${path} returned ${resp.status()}: ${await resp.text()}`,
+    );
+  }
   return resp.json();
 }
 
+async function apiPut<T>(page: Page, path: string, body: unknown): Promise<T> {
+  const { token, origin } = await getApiContext(page);
+  const resp = await page.request.put(`${origin}/api${path}`, {
+    headers: { Authorization: `Bearer ${token}` },
+    data: body,
+  });
+  if (!resp.ok()) {
+    throw new Error(
+      `PUT ${path} returned ${resp.status()}: ${await resp.text()}`,
+    );
+  }
+  return resp.json();
+}
+
+/** List all groups. */
 export async function listGroups(page: Page): Promise<Group[]> {
   return apiGet<Group[]>(page, "/groups");
 }
@@ -108,10 +127,12 @@ export async function deletePeersByPrefix(page: Page, prefix: string) {
   }
 }
 
+/** Create a group by name. */
 export async function createGroup(page: Page, name: string): Promise<Group> {
   return apiPost<Group>(page, "/groups", { name, peers: [] });
 }
 
+/** Delete a group by ID. */
 export async function deleteGroup(page: Page, groupId: string) {
   await apiDelete(page, `/groups/${groupId}`);
 }
@@ -259,7 +280,10 @@ export async function deleteRouteById(page: Page, routeId: string) {
   await apiDelete(page, `/routes/${routeId}`);
 }
 
-export async function deleteRoutesByNetworkIdPrefix(page: Page, prefix: string) {
+export async function deleteRoutesByNetworkIdPrefix(
+  page: Page,
+  prefix: string,
+) {
   const routes = await listRoutes(page);
   const toDelete = routes.filter((r) => r.network_id.startsWith(prefix));
   for (const r of toDelete) {
@@ -338,8 +362,13 @@ type NotificationChannel = {
   enabled: boolean;
 };
 
-export async function listNotificationChannels(page: Page): Promise<NotificationChannel[]> {
-  return apiGet<NotificationChannel[]>(page, "/integrations/notifications/channels");
+export async function listNotificationChannels(
+  page: Page,
+): Promise<NotificationChannel[]> {
+  return apiGet<NotificationChannel[]>(
+    page,
+    "/integrations/notifications/channels",
+  );
 }
 
 export async function deleteNotificationChannel(page: Page, channelId: string) {
@@ -353,7 +382,10 @@ export async function deleteAllNotificationChannels(page: Page) {
   }
 }
 
-export async function deleteNotificationChannelsByType(page: Page, type: string) {
+export async function deleteNotificationChannelsByType(
+  page: Page,
+  type: string,
+) {
   const channels = await listNotificationChannels(page);
   const toDelete = channels.filter((c) => c.type === type);
   for (const c of toDelete) {
@@ -368,7 +400,9 @@ type NameserverGroup = {
   name: string;
 };
 
-export async function listNameserverGroups(page: Page): Promise<NameserverGroup[]> {
+export async function listNameserverGroups(
+  page: Page,
+): Promise<NameserverGroup[]> {
   return apiGet<NameserverGroup[]>(page, "/dns/nameservers");
 }
 
@@ -376,7 +410,10 @@ export async function deleteNameserverGroupById(page: Page, id: string) {
   await apiDelete(page, `/dns/nameservers/${id}`);
 }
 
-export async function deleteNameserverGroupsByPrefix(page: Page, prefix: string) {
+export async function deleteNameserverGroupsByPrefix(
+  page: Page,
+  prefix: string,
+) {
   const groups = await listNameserverGroups(page);
   const toDelete = groups.filter((g) => g.name.startsWith(prefix));
   for (const g of toDelete) {
@@ -391,11 +428,16 @@ type ReverseProxyService = {
   name: string;
 };
 
-export async function listReverseProxyServices(page: Page): Promise<ReverseProxyService[]> {
+export async function listReverseProxyServices(
+  page: Page,
+): Promise<ReverseProxyService[]> {
   return apiGet<ReverseProxyService[]>(page, "/reverse-proxies/services");
 }
 
-export async function deleteReverseProxyServiceById(page: Page, serviceId: string) {
+export async function deleteReverseProxyServiceById(
+  page: Page,
+  serviceId: string,
+) {
   await apiDelete(page, `/reverse-proxies/services/${serviceId}`);
 }
 
@@ -449,7 +491,13 @@ export async function waitForProxyClustersOnline(
   throw new Error(
     `Proxy clusters not online after ${timeoutMs}ms. Expected ${addresses.join(
       ", ",
-    )}; got ${JSON.stringify(last.map((c) => ({ a: c.address, online: c.online, n: c.connected_proxies })))}`,
+    )}; got ${JSON.stringify(
+      last.map((c) => ({
+        a: c.address,
+        online: c.online,
+        n: c.connected_proxies,
+      })),
+    )}`,
   );
 }
 
@@ -461,6 +509,8 @@ type User = {
   name: string;
   role: string;
   status: string;
+  auto_groups: string[];
+  is_blocked: boolean;
   is_current: boolean;
 };
 
@@ -538,3 +588,85 @@ export async function supportsAgentNetworkSettingsBootstrap(
     !!settings && typeof settings === "object" && "proxy_address" in settings
   );
 }
+
+/**
+ * Whether the management build under test serves the caller-scoped
+ * GET /agent-network/agent-config answer that backs the Connect Agent page.
+ * The endpoint answers 200 for every authenticated caller (an unconfigured
+ * caller gets configured=false, never an error), so any non-OK status means
+ * the build predates it.
+ */
+export async function supportsAgentNetworkAgentConfig(
+  page: Page,
+): Promise<boolean> {
+  const { token, origin } = await getApiContext(page);
+  const resp = await page.request.get(
+    `${origin}/api/agent-network/agent-config`,
+    { headers: { Authorization: `Bearer ${token}` } },
+  );
+  return resp.ok();
+}
+
+type AgentNetworkPolicy = {
+  id: string;
+  name: string;
+};
+
+/** List Agent Network policies. */
+export async function listAgentNetworkPolicies(
+  page: Page,
+): Promise<AgentNetworkPolicy[]> {
+  return apiGet<AgentNetworkPolicy[]>(page, "/agent-network/policies");
+}
+
+/** Create an Agent Network policy. */
+export async function createAgentNetworkPolicy(
+  page: Page,
+  body: {
+    name: string;
+    source_groups: string[];
+    destination_provider_ids: string[];
+    enabled?: boolean;
+  },
+): Promise<AgentNetworkPolicy> {
+  return apiPost<AgentNetworkPolicy>(page, "/agent-network/policies", {
+    enabled: true,
+    ...body,
+  });
+}
+
+/** Delete all Agent Network policies whose name starts with the prefix. */
+export async function deleteAgentNetworkPoliciesByPrefix(
+  page: Page,
+  prefix: string,
+) {
+  const policies = await listAgentNetworkPolicies(page);
+  for (const p of policies) {
+    if (p.name.startsWith(prefix)) {
+      await apiDelete(page, `/agent-network/policies/${p.id}`);
+    }
+  }
+}
+
+/** The user the captured token belongs to. */
+export async function getCurrentUser(page: Page): Promise<User> {
+  const users = await apiGet<User[]>(page, "/users");
+  const current = users.find((u) => u.is_current);
+  if (!current) {
+    throw new Error("no is_current user in the /users answer");
+  }
+  return current;
+}
+
+/** Replace a user's auto-groups, keeping role and blocked state. */
+export async function updateUserAutoGroups(
+  page: Page,
+  user: User,
+  autoGroups: string[],
+): Promise<void> {
+  await apiPut(page, `/users/${user.id}`, {
+    role: user.role,
+    auto_groups: autoGroups,
+    is_blocked: !!user.is_blocked,
+  });
+}

e2e/helpers/control-center.ts

@@ -24,6 +24,31 @@ export async function openControlCenter(page: Page, tab?: FlowView) {
   await dismissBlockingOverlays(page);
 }
 
+/**
+ * Opens the groups view already showing `groupName`.
+ *
+ * The view picks its own group on first render (getFirstGroup: the highest
+ * peers_count that is a policy source), and that ranking runs over every group
+ * in the account — including ones a spec on the other worker seeded moments
+ * ago. Deleting the spec's own fixtures first is not enough to pin it, so
+ * select the group by name and let the view rebuild around it.
+ */
+export async function openGroupView(page: Page, groupName: string) {
+  await openControlCenter(page, "groups");
+  const selector = canvasNode(page, "select-group-node");
+  await expect(selector).toBeVisible();
+  // Unforced on purpose: the opening fitView animates the canvas, and the
+  // actionability check is what waits for the node to stop moving.
+  await selector.click();
+  await page.getByTestId("select-dropdown-search").fill(groupName);
+  await page
+    .locator('[role="option"]')
+    .filter({ hasText: groupName })
+    .first()
+    .click({ force: true });
+  await expect(selector).toContainText(groupName);
+}
+
 export async function switchFlowView(page: Page, view: FlowView) {
   await dismissBlockingOverlays(page);
   await page.getByTestId(`cc-flow-${view}`).click({ force: true });

e2e/playwright.config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
   },
   testDir: "./tests",
   webServer: {
-    command: "npx serve@latest out -p 1337 --no-request-logging",
+    command: "npx serve out -p 1337 --no-request-logging",
     port: 1337,
     reuseExistingServer: true,
     cwd: path.resolve(__dirname, ".."),

e2e/tests/agent-network-agentgateway-provider.spec.ts

@@ -0,0 +1,156 @@
+/**
+ * Agent Network agentgateway provider spec.
+ *
+ * Exercises the catalog-driven provider flow against a management build that
+ * includes the agentgateway catalog entry. Older builds skip the test.
+ */
+import {
+  deleteAgentNetworkProvidersByPrefix,
+  listAgentNetworkCatalog,
+  supportsAgentNetworkSettingsBootstrap,
+} from "../helpers/api";
+import { navigateTo } from "../helpers/auth";
+import { expect, test } from "../helpers/fixtures";
+import { generateRandomName } from "../helpers/utils";
+
+const AGENT_NETWORK_CONFIG_KEY = "netbird-test-agent-network";
+const AGENTGATEWAY_CATALOG_ID = "agentgateway";
+const PROVIDER_PREFIX = "e2e-agentgateway-";
+
+test.describe
+  .serial("Agent Network agentgateway provider @agent-network", () => {
+  test("connect agentgateway with its trusted identity mapping", async ({
+    dashboardAsOwner: page,
+  }) => {
+    await page.addInitScript(
+      ([key, value]) => {
+        try {
+          window.localStorage.setItem(key as string, value as string);
+        } catch {}
+      },
+      [AGENT_NETWORK_CONFIG_KEY, "enabled"],
+    );
+
+    const catalog = await listAgentNetworkCatalog(page);
+    test.skip(
+      !catalog.some((entry) => entry.id === AGENTGATEWAY_CATALOG_ID),
+      `management catalog has no ${AGENTGATEWAY_CATALOG_ID} entry`,
+    );
+    test.skip(
+      !(await supportsAgentNetworkSettingsBootstrap(page)),
+      "management build does not support Agent Network settings bootstrap",
+    );
+
+    await deleteAgentNetworkProvidersByPrefix(page, PROVIDER_PREFIX);
+    try {
+      await navigateTo(page, "/agent-network/providers");
+
+      await page
+        .getByTestId("connect-agent-network-provider")
+        .first()
+        .click({ force: true });
+      await page
+        .getByTestId("agent-network-provider-type")
+        .click({ force: true });
+      await page
+        .getByTestId("select-dropdown-search")
+        .fill(AGENTGATEWAY_CATALOG_ID);
+      await page
+        .getByTestId("agent-network-provider-option-agentgateway")
+        .click({ force: true });
+
+      // Saving a provider makes management call the upstream, and it refuses
+      // the save with a 422 unless the upstream answers a model listing — so a
+      // made-up host cannot be used here. agentgateway is self-hosted and has
+      // no public endpoint to point at, so create-test-env.sh runs a stub that
+      // answers that probe inside the compose network.
+      const upstreamURL = "http://agentgateway-stub:8088";
+      await page
+        .getByTestId("agent-network-provider-upstream-url")
+        .fill(upstreamURL);
+      await page
+        .getByTestId("agent-network-provider-api-key")
+        .fill("e2e-agentgateway-virtual-key");
+
+      const providerName = generateRandomName(PROVIDER_PREFIX);
+      await page.getByTestId("agent-network-provider-name").fill(providerName);
+
+      await page
+        .getByTestId("agent-network-provider-models-tab")
+        .click({ force: true });
+      await expect(
+        page.getByTestId("agent-network-provider-models-help"),
+      ).toContainText("Empty = all catalog models");
+      await page
+        .getByTestId("agent-network-provider-continue")
+        .click({ force: true });
+
+      await expect(
+        page.getByTestId("agent-network-provider-mappings-tab"),
+      ).toHaveAttribute("data-state", "active");
+      await expect(
+        page.getByTestId("agent-network-provider-user-mapping"),
+      ).toContainText("x-netbird-user-id");
+      await expect(
+        page.getByTestId("agent-network-provider-groups-mapping"),
+      ).toContainText("x-netbird-groups");
+      await expect(
+        page.getByTestId("agent-network-provider-groups-guidance"),
+      ).toContainText("must not be used as an agentgateway authorization claim");
+
+      const createResponse = page.waitForResponse(
+        (response) =>
+          response.url().includes("/agent-network/providers") &&
+          response.request().method() === "POST",
+        { timeout: 30_000 },
+      );
+      await page.getByTestId("agent-network-provider-submit").click({
+        force: true,
+      });
+      const created = await createResponse;
+      expect([200, 201]).toContain(created.status());
+
+      const body = created.request().postDataJSON();
+      expect(body).toMatchObject({
+        provider_id: AGENTGATEWAY_CATALOG_ID,
+        name: providerName,
+        upstream_url: upstreamURL,
+        models: [],
+        metadata_disabled: false,
+      });
+      expect(body).not.toHaveProperty("identity_header_user_id");
+      expect(body).not.toHaveProperty("identity_header_groups");
+      await expect(
+        page.getByTestId("agent-network-provider-modal"),
+      ).toBeHidden();
+
+      await expect(page.getByTestId(providerName)).toBeVisible();
+      await expect(
+        page.getByTestId(`provider-models-${providerName}`),
+      ).toHaveText("All Models");
+
+      await page.getByTestId(providerName).click({ force: true });
+      await expect(
+        page.getByTestId("agent-network-provider-modal"),
+      ).toBeVisible();
+      await expect(
+        page.getByTestId("agent-network-provider-upstream-url"),
+      ).toHaveValue(upstreamURL);
+      await page
+        .getByTestId("agent-network-provider-mappings-tab")
+        .click({ force: true });
+      await expect(
+        page.getByTestId("agent-network-provider-user-mapping"),
+      ).toContainText("x-netbird-user-id");
+      await expect(
+        page.getByTestId("agent-network-provider-groups-mapping"),
+      ).toContainText("x-netbird-groups");
+      await page
+        .getByTestId("agent-network-provider-modal")
+        .getByTestId("modal-close")
+        .click({ force: true });
+    } finally {
+      await deleteAgentNetworkProvidersByPrefix(page, PROVIDER_PREFIX);
+    }
+  });
+});

e2e/tests/agent-network-focused-view.spec.ts

@@ -12,7 +12,7 @@
  * item, which toggles purely on the focused-view flag and does not depend on
  * premium permission modules.
  */
-import { test, expect, type Browser, type Page } from "@playwright/test";
+import { type Browser, expect, type Page, test } from "@playwright/test";
 import { loginToApp, navigateTo } from "../helpers/auth";
 
 const SIGNUP_SOURCE_KEY = "netbird-signup-source";
@@ -149,6 +149,7 @@ const FOCUS_HIDDEN_NAV = ["Networks", "Reverse Proxy", "DNS", "Activity"];
 // Agent Network view routes that make up the focused surface.
 const AGENT_VIEW_PATHS = [
   "/agent-network/providers",
+  "/agent-network/playground",
   "/agent-network/policies",
   "/agent-network/usage",
   "/agent-network/configuration",

e2e/tests/agent-network-kimi-provider.spec.ts

@@ -3,9 +3,9 @@
  *
  * Walks the Kimi provider lifecycle end to end against the real backend:
  * pick kimi_api from the catalog (prefilled host, catalog models with
- * pricing), connect it, then verify the Kimi-gated config surfaces in the
- * "Configure Your Agent" modal (Kimi CLI tab, Kimi backend option in the
- * Claude Code tab) that only render when a Kimi provider is connected.
+ * pricing), connect it, then verify the Kimi-gated config surfaces on the
+ * Connect Agent page (Kimi CLI tab, Kimi backend option in the Claude Code
+ * tab) that only render when a Kimi provider is connected.
  *
  * The kimi_api catalog entry ships with newer management builds. When the
  * backend under test predates it, the whole suite skips instead of failing —
@@ -19,20 +19,57 @@
  * localStorage override (see testAgentNetworkOverride in utils/netbird.ts),
  * set via addInitScript on a dedicated context below.
  */
-import { test, expect, type Browser, type Page } from "@playwright/test";
+import { type Browser, expect, type Page,test } from "@playwright/test";
+import {
+  createAgentNetworkPolicy,
+  createGroup,
+  deleteAgentNetworkPoliciesByPrefix,
+  deleteAgentNetworkProvidersByPrefix,
+  deleteGroup,
+  getCurrentUser,
+  listAgentNetworkCatalog,
+  listGroups,
+  supportsAgentNetworkAgentConfig,
+  supportsAgentNetworkSettingsBootstrap,
+  updateUserAutoGroups,
+} from "../helpers/api";
 import { loginToApp } from "../helpers/auth";
 import { generateRandomName } from "../helpers/utils";
-import {
-  deleteAgentNetworkProvidersByPrefix,
-  listAgentNetworkCatalog,
-  supportsAgentNetworkSettingsBootstrap,
-} from "../helpers/api";
 
 const AGENT_NETWORK_CONFIG_KEY = "netbird-test-agent-network";
 const KIMI_CATALOG_ID = "kimi_api";
 const KIMI_CATALOG_NAME = "Kimi (Moonshot AI) API";
 const PROVIDER_PREFIX = "e2e-kimi-";
 
+/**
+ * Remove every fixture this spec creates: the policy granting the caller the
+ * provider, the group carrying that grant (detached from the caller first —
+ * a group referenced by a user's auto-groups refuses deletion), and the
+ * provider itself. Runs before the test too, so leftovers from an interrupted
+ * run never poison the next one.
+ */
+async function cleanupKimiFixtures(page: Page) {
+  await deleteAgentNetworkPoliciesByPrefix(page, PROVIDER_PREFIX);
+  const fixtureGroups = (await listGroups(page)).filter((g) =>
+    g.name.startsWith(PROVIDER_PREFIX),
+  );
+  if (fixtureGroups.length > 0) {
+    const fixtureGroupIds = new Set(fixtureGroups.map((g) => g.id));
+    const caller = await getCurrentUser(page);
+    if ((caller.auto_groups ?? []).some((id) => fixtureGroupIds.has(id))) {
+      await updateUserAutoGroups(
+        page,
+        caller,
+        (caller.auto_groups ?? []).filter((id) => !fixtureGroupIds.has(id)),
+      );
+    }
+    for (const g of fixtureGroups) {
+      await deleteGroup(page, g.id);
+    }
+  }
+  await deleteAgentNetworkProvidersByPrefix(page, PROVIDER_PREFIX);
+}
+
 async function newAgentNetworkPage(browser: Browser): Promise<{
   page: Page;
   close: () => Promise<void>;
@@ -71,8 +108,17 @@ test.describe.serial("Agent Network Kimi provider @agent-network", () => {
         "management build has no POST /agent-network/settings, so the " +
           "wizard cannot bootstrap the account before the first create",
       );
+      // The Kimi-gated config surfaces live on the Connect Agent page, whose
+      // caller-scoped GET /agent-network/agent-config answer ships with
+      // newer management builds. The suite starts running once the backend
+      // under test carries it.
+      test.skip(
+        !(await supportsAgentNetworkAgentConfig(page)),
+        "management build has no GET /agent-network/agent-config, so the " +
+          "Connect Agent page cannot render the agent config",
+      );
 
-      await deleteAgentNetworkProvidersByPrefix(page, PROVIDER_PREFIX);
+      await cleanupKimiFixtures(page);
 
       await page.goto("/agent-network/providers");
       await page.keyboard.press("Escape");
@@ -153,17 +199,36 @@ test.describe.serial("Agent Network Kimi provider @agent-network", () => {
         .click({ force: true });
       const created = await Promise.race([createResponse, bootstrapRejected]);
       expect([200, 201]).toContain(created.status());
+      const createdProvider = (await created.json()) as { id: string };
 
       // Row lands in the providers table.
       await expect(page.getByText(providerName).first()).toBeVisible();
 
       // ---- Kimi-gated agent config surfaces ----
-      await page
-        .getByRole("button", { name: "Agent Config" })
-        .click({ force: true });
+      // The agent config lives inline on the Connect Agent page — the
+      // providers page keeps only the endpoint URL and Copy. That page's
+      // answer is caller-scoped: it offers only providers the caller's own
+      // policies authorize, so grant the caller the new provider through a
+      // dedicated group + policy (removed again by cleanupKimiFixtures).
+      const caller = await getCurrentUser(page);
+      const grantGroup = await createGroup(page, `${PROVIDER_PREFIX}grant`);
+      await updateUserAutoGroups(page, caller, [
+        ...(caller.auto_groups ?? []),
+        grantGroup.id,
+      ]);
+      await createAgentNetworkPolicy(page, {
+        name: `${PROVIDER_PREFIX}policy`,
+        source_groups: [grantGroup.id],
+        destination_provider_ids: [createdProvider.id],
+      });
 
-      // Kimi CLI tab only renders when a kimi_api provider is connected.
-      await expect(page.getByRole("tab", { name: "Kimi CLI" })).toBeVisible();
+      await page.goto("/agent-network/connect");
+
+      // Kimi CLI tab only renders when a kimi_api provider is connected. The
+      // longer timeout covers the page's caller-scoped agent-config fetch.
+      await expect(page.getByRole("tab", { name: "Kimi CLI" })).toBeVisible({
+        timeout: 15_000,
+      });
 
       // Claude Code tab's backend dropdown offers (and, with Kimi as the only
       // Anthropic-shaped provider, pre-selects) Kimi — its settings.json
@@ -192,10 +257,8 @@ test.describe.serial("Agent Network Kimi provider @agent-network", () => {
       await expect(page.getByText('wire_api = "responses"')).toBeVisible();
       await expect(page.getByText('wire_api = "chat"')).not.toBeVisible();
 
-      await page.keyboard.press("Escape");
-
       // ---- cleanup ----
-      await deleteAgentNetworkProvidersByPrefix(page, PROVIDER_PREFIX);
+      await cleanupKimiFixtures(page);
     } finally {
       await close();
     }

e2e/tests/agent-network-playground.spec.ts

@@ -0,0 +1,426 @@
+import {
+  type Browser,
+  expect,
+  type Page,
+  type Route,
+  test,
+} from "@playwright/test";
+import { loginToApp } from "../helpers/auth";
+
+const AGENT_NETWORK_CONFIG_KEY = "netbird-test-agent-network";
+const ALLOW = { create: true, read: true, update: true, delete: true };
+const DENY = { create: false, read: false, update: false, delete: false };
+const SETTINGS = {
+  endpoint: "violet.proxy.example.com",
+  proxy_address: "proxy.example.com",
+  dedicated: false,
+  enable_log_collection: true,
+  enable_prompt_collection: false,
+  redact_pii: false,
+  access_log_retention_days: 30,
+};
+
+const ALICE = {
+  id: "user-alice",
+  email: "alice@example.com",
+  name: "Alice",
+  role: "user",
+  status: "active",
+  auto_groups: ["group-engineering"],
+  permissions: { is_restricted: false, modules: {} },
+};
+const BOB = {
+  ...ALICE,
+  id: "user-bob",
+  email: "bob@example.com",
+  name: "Bob",
+  auto_groups: [],
+};
+
+function currentUser(peerRead = true, groupRead = true) {
+  return {
+    ...ALICE,
+    id: "owner-1",
+    email: "owner@example.com",
+    name: "Owner",
+    role: "owner",
+    is_current: true,
+    permissions: {
+      is_restricted: false,
+      modules: {
+        services: ALLOW,
+        "agent_network.providers": ALLOW,
+        peers: peerRead ? ALLOW : DENY,
+        users: peerRead ? ALLOW : DENY,
+        groups: groupRead ? ALLOW : DENY,
+      },
+    },
+  };
+}
+
+async function fulfillJSON(route: Route, body: unknown) {
+  await route.fulfill({
+    status: 200,
+    contentType: "application/json",
+    body: JSON.stringify(body),
+  });
+}
+
+async function mockPlaygroundDependencies(
+  page: Page,
+  opts: { peerRead?: boolean; groupRead?: boolean } = {},
+) {
+  await page.route("**/api/users/current**", (route) =>
+    fulfillJSON(route, currentUser(opts.peerRead, opts.groupRead)),
+  );
+  await page.route("**/api/users?**", (route) => {
+    const serviceUser = new URL(route.request().url()).searchParams.get(
+      "service_user",
+    );
+    return fulfillJSON(route, serviceUser === "true" ? [] : [ALICE, BOB]);
+  });
+  await page.route("**/api/peers**", (route) =>
+    fulfillJSON(route, [
+      {
+        id: "peer-alice",
+        name: "Alice Laptop",
+        hostname: "alice-laptop",
+        ip: "100.64.0.10",
+        user_id: ALICE.id,
+      },
+      {
+        id: "peer-bob",
+        name: "Bob Laptop",
+        hostname: "bob-laptop",
+        ip: "100.64.0.11",
+        user_id: BOB.id,
+      },
+    ]),
+  );
+  await page.route("**/api/groups**", (route) =>
+    fulfillJSON(route, [
+      { id: "group-engineering", name: "Engineering", peers: [] },
+      { id: "group-sales", name: "Sales", peers: [] },
+    ]),
+  );
+  await page.route("**/api/agent-network/settings**", (route) =>
+    fulfillJSON(route, SETTINGS),
+  );
+  for (const path of ["providers", "policies", "guardrails", "budget-rules"]) {
+    await page.route(`**/api/agent-network/${path}**`, (route) =>
+      fulfillJSON(route, []),
+    );
+  }
+}
+
+async function openPlayground(
+  browser: Browser,
+  opts: { peerRead?: boolean; groupRead?: boolean } = {},
+) {
+  const context = await browser.newContext({
+    storageState: "e2e/fixtures/auth/owner.json",
+  });
+  await context.addInitScript(
+    ([key, value]) =>
+      window.localStorage.setItem(key as string, value as string),
+    [AGENT_NETWORK_CONFIG_KEY, "enabled"],
+  );
+  const page = await context.newPage();
+  await loginToApp(page, "owner");
+  await mockPlaygroundDependencies(page, opts);
+  await page.goto("/agent-network/playground");
+  return { page, close: () => context.close() };
+}
+
+async function selectAlicePeer(page: Page) {
+  await page.getByRole("button", { name: "Select a user..." }).click();
+  await page.getByText("Alice", { exact: true }).click();
+  const peerSelect = page.getByRole("combobox", { name: "Peer" });
+  await peerSelect.click();
+  const alicePeer = page.getByRole("option", { name: /Alice Laptop/ });
+  await expect(alicePeer).toBeVisible();
+  await expect(page.getByRole("option", { name: /Bob Laptop/ })).toHaveCount(0);
+  await alicePeer.click();
+}
+
+test.describe("Agent Network playground @agent-network", () => {
+  test("runs peer and synthetic group requests with raw result states", async ({
+    browser,
+  }) => {
+    const { page, close } = await openPlayground(browser);
+    const requests: unknown[] = [];
+    let call = 0;
+    await page.route("**/api/agent-network/playground", async (route) => {
+      requests.push(route.request().postDataJSON());
+      call += 1;
+      if (call === 1) {
+        return fulfillJSON(route, {
+          status_code: 200,
+          headers: [
+            { name: "Content-Type", values: ["text/event-stream"] },
+            { name: "X-Test", values: ["one", "two"] },
+          ],
+          body: 'data: {"delta":"pong"}\n\n',
+          body_encoding: "utf8",
+          body_truncated: true,
+          identity: {
+            user_id: ALICE.id,
+            user_email: ALICE.email,
+            group_ids: ["group-engineering"],
+            group_names: ["Engineering"],
+          },
+          policy: {
+            decision: "allow",
+            reason: "",
+            provider_surface: "openai",
+            model: "gpt-4o",
+            resolved_provider_id: "provider-1",
+            authorising_group_ids: ["group-engineering"],
+            selected_policy_id: "policy-1",
+            attribution_group_id: "group-engineering",
+          },
+        });
+      }
+      return fulfillJSON(route, {
+        status_code: 403,
+        headers: [{ name: "Content-Type", values: ["application/json"] }],
+        body: "/wA=",
+        body_encoding: "base64",
+        body_truncated: false,
+        identity: {
+          user_id: "",
+          user_email: "",
+          group_ids: ["group-sales"],
+          group_names: ["Sales"],
+        },
+        policy: {
+          decision: "deny",
+          reason: "no_authorised_provider",
+          provider_surface: "openai",
+          model: "gpt-4o",
+          resolved_provider_id: "",
+          authorising_group_ids: [],
+          selected_policy_id: "",
+          attribution_group_id: "",
+        },
+      });
+    });
+
+    try {
+      await expect(
+        page.getByRole("heading", { level: 1, name: "Playground" }),
+      ).toBeVisible();
+      await expect(
+        page.getByText(
+          "This sends a real provider request. It can incur cost and updates usage, budgets, and access logs for the emulated identity.",
+        ),
+      ).toBeVisible();
+      await selectAlicePeer(page);
+      await page.getByRole("button", { name: "Run live request" }).click();
+      const response = page.getByRole("region", {
+        name: "Response inspector",
+      });
+      await expect(response.getByText("HTTP 200")).toBeVisible();
+      await expect(response).toContainText('data: {"delta":"pong"}');
+      await expect(response.getByText(/Response exceeded 8 MiB/)).toBeVisible();
+      expect(requests[0]).toMatchObject({
+        principal: { kind: "peer", id: "peer-alice" },
+      });
+
+      await response.getByRole("tab", { name: /Headers/i }).click();
+      await expect(
+        response.getByText("Content-Type", { exact: true }),
+      ).toBeVisible();
+      await expect(response.getByText("one", { exact: true })).toBeVisible();
+      await expect(response.getByText("two", { exact: true })).toBeVisible();
+
+      await response.getByRole("tab", { name: /Details/i }).click();
+      await expect(
+        response.getByText(ALICE.email, { exact: true }),
+      ).toBeVisible();
+      await expect(
+        response.getByText("Engineering (group-engineering)", { exact: true }),
+      ).toBeVisible();
+      await expect(
+        response.getByText("provider-1", { exact: true }),
+      ).toBeVisible();
+      await expect(
+        response.getByText("policy-1", { exact: true }),
+      ).toBeVisible();
+
+      await page.getByRole("radio", { name: /Synthetic group/ }).click();
+      await page.getByRole("button", { name: "Select a group..." }).click();
+      await page.getByText("Sales", { exact: true }).click();
+      await expect(
+        page.getByText(
+          "Synthetic group identity: per-user limits do not apply.",
+        ),
+      ).toBeVisible();
+      await page.getByRole("button", { name: "Run live request" }).click();
+      await expect(response.getByText("HTTP 403")).toBeVisible();
+      await response.getByRole("tab", { name: /Body/i }).click();
+      const bodyPanel = response.getByRole("tabpanel", { name: /Body/i });
+      await expect(bodyPanel.getByText("base64")).toBeVisible();
+      await expect(bodyPanel.getByText("/wA=")).toBeVisible();
+      expect(requests[1]).toMatchObject({
+        principal: { kind: "group", id: "group-sales" },
+      });
+    } finally {
+      await close();
+    }
+  });
+
+  test("blocks protected headers and cancels an in-flight request", async ({
+    browser,
+  }) => {
+    const { page, close } = await openPlayground(browser);
+    await page.route("**/api/agent-network/playground", async (route) => {
+      await new Promise((resolve) => setTimeout(resolve, 2_000));
+      return fulfillJSON(route, {});
+    });
+    try {
+      await selectAlicePeer(page);
+      const headerName = page.getByLabel("Header 1 name");
+      await headerName.fill("Authorization");
+      await expect(page.getByText(/managed by NetBird/)).toBeVisible();
+      await expect(
+        page.getByRole("button", { name: "Run live request" }),
+      ).toBeDisabled();
+
+      await headerName.fill("Content-Type");
+      await page.getByRole("button", { name: "Run live request" }).click();
+      await expect(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+      await page.getByRole("button", { name: "Cancel" }).click();
+      await expect(page.getByRole("button", { name: "Cancel" })).toHaveCount(0);
+      await expect(
+        page.getByRole("region", { name: "Response inspector" }),
+      ).not.toContainText("Request failed");
+    } finally {
+      await close();
+    }
+  });
+
+  test("shows management failures with their request ID", async ({
+    browser,
+  }) => {
+    const { page, close } = await openPlayground(browser);
+    await page.route("**/api/agent-network/playground", (route) =>
+      route.fulfill({
+        status: 503,
+        headers: {
+          "Content-Type": "application/json",
+          "X-Request-Id": "request-503",
+          "Access-Control-Expose-Headers": "X-Request-Id",
+        },
+        body: JSON.stringify({
+          code: 503,
+          message: "No playground-capable proxy is connected.",
+        }),
+      }),
+    );
+
+    try {
+      await selectAlicePeer(page);
+      await page.getByRole("button", { name: "Run live request" }).click();
+
+      const response = page.getByRole("region", {
+        name: "Response inspector",
+      });
+      await expect(response.getByRole("alert")).toContainText(
+        "No playground-capable proxy is connected.",
+      );
+      await expect(response.getByRole("alert")).toContainText(
+        "Request ID: request-503",
+      );
+      await expect(response).not.toContainText("HTTP 503");
+    } finally {
+      await close();
+    }
+  });
+
+  test("keeps the request and response workspace responsive", async ({
+    browser,
+  }) => {
+    const { page, close } = await openPlayground(browser);
+
+    try {
+      const request = page.getByRole("region", { name: "Request builder" });
+      const response = page.getByRole("region", {
+        name: "Response inspector",
+      });
+
+      await page.setViewportSize({ width: 1440, height: 1000 });
+      await expect(request).toBeVisible();
+      await expect(response).toBeVisible();
+      const desktopRequest = await request.boundingBox();
+      const desktopResponse = await response.boundingBox();
+      expect(desktopRequest).not.toBeNull();
+      expect(desktopResponse).not.toBeNull();
+      expect(Math.abs(desktopRequest!.y - desktopResponse!.y)).toBeLessThan(4);
+      expect(desktopResponse!.x).toBeGreaterThanOrEqual(
+        desktopRequest!.x + desktopRequest!.width,
+      );
+
+      await page.setViewportSize({ width: 1024, height: 900 });
+      const narrowRequest = await request.boundingBox();
+      const narrowResponse = await response.boundingBox();
+      expect(narrowRequest).not.toBeNull();
+      expect(narrowResponse).not.toBeNull();
+      expect(narrowResponse!.y).toBeGreaterThanOrEqual(
+        narrowRequest!.y + narrowRequest!.height,
+      );
+      expect(
+        await page.evaluate(
+          () =>
+            document.documentElement.scrollWidth ===
+            document.documentElement.clientWidth,
+        ),
+      ).toBe(true);
+
+      await page.setViewportSize({ width: 390, height: 844 });
+      await expect(
+        page.getByRole("heading", { level: 1, name: "Playground" }),
+      ).toBeVisible();
+      await expect(
+        request.getByRole("button", { name: "Run live request" }),
+      ).toBeVisible();
+      await expect(request).toBeVisible();
+      await expect(response).toBeVisible();
+      const mobileRequest = await request.boundingBox();
+      const mobileResponse = await response.boundingBox();
+      expect(mobileRequest).not.toBeNull();
+      expect(mobileResponse).not.toBeNull();
+      expect(mobileResponse!.y).toBeGreaterThanOrEqual(
+        mobileRequest!.y + mobileRequest!.height,
+      );
+      expect(
+        await page.evaluate(
+          () =>
+            document.documentElement.scrollWidth ===
+            document.documentElement.clientWidth,
+        ),
+      ).toBe(true);
+    } finally {
+      await close();
+    }
+  });
+
+  test("disables only the principal mode without read permission", async ({
+    browser,
+  }) => {
+    const { page, close } = await openPlayground(browser, {
+      peerRead: false,
+      groupRead: true,
+    });
+    try {
+      await expect(
+        page.getByRole("radio", { name: /Peer-backed user/ }),
+      ).toBeDisabled();
+      await expect(
+        page.getByRole("radio", { name: /Synthetic group/ }),
+      ).toBeEnabled();
+    } finally {
+      await close();
+    }
+  });
+});

e2e/tests/agent-network-provider-save-refused.spec.ts

@@ -0,0 +1,195 @@
+/**
+ * Agent Network provider save: what the operator sees when the backend refuses.
+ *
+ * Saving a provider checks its upstream URL and credential against the vendor
+ * before storing anything, so a 422 naming the field to correct is an ordinary
+ * outcome of the form rather than a server fault. Four things have to hold,
+ * and each one has been wrong at some point:
+ *
+ *   - while the check runs the submit says so and refuses a second click. The
+ *     vendor call is the slow part and an unreachable upstream drags it out to
+ *     a timeout, which looked exactly like a button that had not registered
+ *     the first click.
+ *   - exactly ONE toast, the shared "Request failed with status code N", which
+ *     quotes the API's own sentence. A second toast from the save path said the
+ *     same thing under a vaguer title.
+ *   - the toast is styled as a failure. notify() renders green with a check
+ *     mark unless told otherwise, so a refusal announced itself as a success.
+ *   - the modal stays open with the typed values intact. The API never returns
+ *     an API key, so closing the form loses it with nowhere to retype it.
+ *
+ * The refusal is mocked rather than provoked: the backend check ships with a
+ * management build these tests do not pin, and what is under test here is the
+ * dashboard's handling of the response, not the vendor call that produces it.
+ *
+ * Like the other agent-network specs, this one builds its own context rather
+ * than taking the shared dashboardAsOwner fixture: the Agent Network menu is
+ * deployment-gated behind a localStorage override that has to be in place
+ * before the first navigation, which addInitScript on an own context is the
+ * way to do. The route interception below is a second reason — the shared page
+ * is worker-scoped, and a 422 left on it would follow every later test.
+ */
+import { type Browser, expect, type Page, test } from "@playwright/test";
+import { loginToApp, navigateTo } from "../helpers/auth";
+import { generateRandomName } from "../helpers/utils";
+
+const AGENT_NETWORK_CONFIG_KEY = "netbird-test-agent-network";
+const PROVIDERS_ENDPOINT = /\/api\/agent-network\/providers(\?|$)/;
+const PROVIDER_PREFIX = "e2e-refused-";
+const TITLE_TESTID = "notification-title";
+
+// The message a refused save carries: the backend names which of the two
+// fields is at fault, without a status code and without echoing the URL.
+const REFUSAL = "the upstream url could not be reached: no such host";
+
+// Matched case-insensitively on purpose. The backend lowercases its messages
+// (WriteError does, and the copy is written for it) while the toast uppercases
+// the first character before rendering. Asserting either spelling would pin
+// the test to that transform rather than to the sentence the operator reads.
+const REFUSAL_TEXT = new RegExp(
+  REFUSAL.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
+  "i",
+);
+
+async function newAgentNetworkPage(browser: Browser): Promise<{
+  page: Page;
+  close: () => Promise<void>;
+}> {
+  const context = await browser.newContext({
+    storageState: "e2e/fixtures/auth/owner.json",
+  });
+  await context.addInitScript(
+    ([key, value]) => {
+      try {
+        window.localStorage.setItem(key as string, value as string);
+      } catch (e) {}
+    },
+    [AGENT_NETWORK_CONFIG_KEY, "enabled"],
+  );
+  const page = await context.newPage();
+  await loginToApp(page, "owner");
+  return { page, close: () => context.close() };
+}
+
+// How long the mocked create takes to answer. The real check is a vendor round
+// trip, so a save is never instant; holding the response gives the in-flight
+// assertions a window to run in without racing the toast.
+const REFUSAL_DELAY_MS = 1500;
+
+// refuseProviderCreate answers the create with the 422 the credential check
+// produces. Only POST is intercepted: the page still lists providers, and the
+// settings bootstrap that may precede the create is left alone.
+async function refuseProviderCreate(page: Page) {
+  await page.route(PROVIDERS_ENDPOINT, async (route) => {
+    if (route.request().method() !== "POST") return route.continue();
+    const origin = route.request().headers()["origin"] || "*";
+    await new Promise((resolve) => setTimeout(resolve, REFUSAL_DELAY_MS));
+    await route.fulfill({
+      status: 422,
+      headers: {
+        "content-type": "application/json",
+        "access-control-allow-origin": origin,
+      },
+      body: JSON.stringify({ code: 422, message: REFUSAL }),
+    });
+  });
+}
+
+test.describe
+  .serial("Agent Network refused provider save @agent-network", () => {
+  test("reports the refusal once and keeps the form open", async ({
+    browser,
+  }) => {
+    const { page, close } = await newAgentNetworkPage(browser);
+    try {
+      await refuseProviderCreate(page);
+
+      // navigateTo rather than goto: it dismisses the setup modal that greets a
+      // fresh account and clears the scroll lock it leaves behind, either of
+      // which swallows the clicks below.
+      await navigateTo(page, "/agent-network/providers");
+
+      await page
+        .getByRole("button", { name: "Connect Provider" })
+        .first()
+        .click({ force: true });
+
+      const providerName = generateRandomName(PROVIDER_PREFIX);
+      await page
+        .getByTestId("agent-network-provider-name")
+        .fill(providerName);
+      await page
+        .getByTestId("agent-network-provider-api-key")
+        .fill("sk-e2e-refused-key");
+
+      // The submit lives on the Models tab — the Provider tab's primary button
+      // only advances to it.
+      await page.getByRole("tab", { name: "Models" }).click({ force: true });
+      const submit = page.getByTestId("agent-network-provider-submit");
+      await expect(submit).toBeEnabled();
+
+      const refusal = page.waitForResponse(
+        (resp) =>
+          PROVIDERS_ENDPOINT.test(resp.url()) &&
+          resp.request().method() === "POST",
+        { timeout: 30_000 },
+      );
+      await submit.click({ force: true });
+
+      // ---- the wait is visible while it lasts ----
+      // A second create is not idempotent, so the button has to say it is
+      // working and stop taking clicks rather than sit there looking untouched.
+      // Asserted before the response is awaited: the mock holds it open for
+      // exactly this window.
+      await expect(submit).toContainText("Connecting provider");
+      await expect(submit).toBeDisabled();
+
+      expect((await refusal).status()).toBe(422);
+
+      // ---- the toast says what the API said ----
+      const title = page.getByTestId(TITLE_TESTID).first();
+      await expect(title).toContainText("Request failed with status code 422");
+      await expect(
+        page.locator("[data-toast-notification]").first(),
+      ).toContainText(REFUSAL_TEXT);
+
+      // ---- and only that toast ----
+      // The save path used to add its own on top, so the count is the
+      // assertion rather than the presence of the right one.
+      await expect(page.locator("[data-toast-notification]")).toHaveCount(1);
+      await expect(page.getByText("Failed to connect provider")).toHaveCount(0);
+
+      // ---- styled as a failure, not a success ----
+      // notify() paints the icon tile green with a check unless the caller
+      // says otherwise, which is how a refusal once looked like a success.
+      //
+      // A failure reaches the tile two ways — notify()'s own error state, and
+      // a caller passing its own colour and icon, which is what the shared
+      // request-failed toast does — so what has to hold is the negative: this
+      // is not the default success tile.
+      const icon = page.getByTestId("notification-icon");
+      await expect(icon).toBeVisible();
+      await expect(icon).not.toHaveAttribute("data-variant", "success");
+
+      // ---- the form is still there, still holding what was typed ----
+      // The submit only exists while the modal is open, so its presence is the
+      // check that nothing closed underneath the toast. It also has to come
+      // back out of the in-flight state, or the retry the toast asks for is
+      // impossible.
+      await expect(submit).toBeVisible();
+      await expect(submit).toBeEnabled();
+      await expect(submit).toContainText("Connect Provider");
+      await page.getByRole("tab", { name: "Provider" }).click({ force: true });
+      await expect(
+        page.getByTestId("agent-network-provider-name"),
+      ).toHaveValue(providerName);
+      // The key matters most: the API never returns one, so a form that lost
+      // it leaves the operator with nothing to correct.
+      await expect(
+        page.getByTestId("agent-network-provider-api-key"),
+      ).toHaveValue("sk-e2e-refused-key");
+    } finally {
+      await close();
+    }
+  });
+});

e2e/tests/control-center-draft-matrix.spec.ts

@@ -364,13 +364,17 @@ test.describe.serial("Control Center Draft Matrix @control-center", () => {
   }) => {
     const group = await place(page, "group", 0.6, 0.5);
     await expectChangeCount(page, 1);
-    // React Flow ignores delete keys while an input is focused, and the panel's
-    // search takes focus on click, so blur it before pressing Backspace.
     await group.click();
     await expect(group).toHaveClass(/selected/);
-    await page.evaluate(
-      () => (document.activeElement as HTMLElement | null)?.blur(),
-    );
+    // React Flow ignores delete keys while an input is focused, and the panel
+    // the click opens takes focus into its search — from an effect, about
+    // 100ms later. Blurring before that lands leaves the input to claim focus
+    // afterwards and swallow the Backspace, so wait for the focus, then drop
+    // it.
+    const panelSearch = page.locator("#cc-group-panel input").first();
+    await expect(panelSearch).toBeFocused();
+    await panelSearch.blur();
+    await expect(panelSearch).not.toBeFocused();
     await page.keyboard.press("Backspace");
     await expect(canvasNode(page, "group-new-")).toHaveCount(0);
     await expectChangeCount(page, 0);

e2e/tests/control-center-draft-remove.spec.ts

@@ -19,6 +19,7 @@ import {
   dismissBlockingOverlays,
   enterDraft,
   openControlCenter,
+  openGroupView,
   resetDraftState,
   reviewButton,
 } from "../helpers/control-center";
@@ -37,7 +38,6 @@ test.describe
     await deleteGroupsByPrefix(page, PREFIX);
   });
 
-  // Clean-slated so the draft group view's auto-select is deterministic.
   async function seedPolicyGroupView(page: Page) {
     await deletePoliciesBySubstring(page, PREFIX);
     await deleteGroupsByPrefix(page, PREFIX);
@@ -49,7 +49,9 @@ test.describe
       src.id,
       dst.id,
     );
-    await openControlCenter(page, "groups");
+    // Selected by name: the view's own pick ranks every group in the account,
+    // so a peer-bearing group from another spec on the other worker wins it.
+    await openGroupView(page, src.name);
     await enterDraft(page);
     const policyNode = canvasNode(page, `policy-${policy.id}`);
     await expect(policyNode).toBeVisible({ timeout: 15_000 });

e2e/tests/control-center-live.spec.ts

@@ -18,6 +18,7 @@ import {
   clickContextMenuItem,
   dismissBlockingOverlays,
   openControlCenter,
+  openGroupView,
   resetDraftState,
   switchFlowView,
 } from "../helpers/control-center";
@@ -47,8 +48,6 @@ test.describe.serial("Control Center Live Mode @control-center", () => {
   });
 
   async function seedPolicyAndOpenGroupView(page: Page, enabled = true) {
-    // The group view auto-selects a group that HAS a policy, so stale policies
-    // would make the rendered group non-deterministic.
     await deletePoliciesBySubstring(page, PREFIX);
     await deleteGroupsByPrefix(page, PREFIX);
 
@@ -64,15 +63,10 @@ test.describe.serial("Control Center Live Mode @control-center", () => {
     );
 
     const policyNode = canvasNode(page, `policy-${policy.id}`);
-    // A stale SWR read or a build/fit race can fail to place the node.
-    for (let attempt = 0; attempt < 3; attempt++) {
-      await openControlCenter(page, "groups");
-      const shown = await policyNode
-        .waitFor({ state: "visible", timeout: 10_000 })
-        .then(() => true)
-        .catch(() => false);
-      if (shown) break;
-    }
+    // Selecting src by name rather than trusting the view's own pick: the
+    // auto-select ranks every group in the account, so a peer-bearing group
+    // another spec seeded on the other worker outranks this one.
+    await openGroupView(page, src.name);
     await expect(policyNode).toBeVisible({ timeout: 10_000 });
     return { src, dst, policy, policyNode };
   }
@@ -512,7 +506,6 @@ test.describe.serial("Control Center Live Mode @control-center", () => {
   test("Should save group resource membership in live mode (correct payload)", async ({
     dashboardAsOwner: page,
   }) => {
-    // Clean slate so the group view deterministically lands on our group.
     await deletePoliciesBySubstring(page, PREFIX);
     await deleteGroupsByPrefix(page, PREFIX);
 
@@ -529,7 +522,7 @@ test.describe.serial("Control Center Live Mode @control-center", () => {
       [],
     );
 
-    await openControlCenter(page, "groups");
+    await openGroupView(page, src.name);
     const groupNode = canvasNode(page, `group-${dst.id}`);
     await expect(groupNode).toBeVisible({ timeout: 15_000 });
 
@@ -610,7 +603,7 @@ test.describe.serial("Control Center Live Mode @control-center", () => {
     );
     await createPolicy(page, generateRandomName(PREFIX), src.id, d2.id);
 
-    await openControlCenter(page, "groups");
+    await openGroupView(page, src.name);
     const policyNode = canvasNode(page, `policy-${p1.id}`);
     await expect(policyNode).toBeVisible({ timeout: 15_000 });
     await expect(

e2e/tests/login.spec.ts

@@ -13,12 +13,80 @@ const credentials: Record<TestUser, { username: string; password: string }> = {
   user: { username: "user@localhost.test", password: "testMe123@" },
 };
 
+// Temporary: the CI failures for the user fixture report only which locator
+// timed out, which cannot distinguish a blank page from a rendered app with an
+// empty sidebar. Dump what the page actually holds, into the run log. Remove
+// once the user login is green again.
+async function reportPageState(
+  page: import("@playwright/test").Page,
+  user: TestUser,
+  pageErrors: string[],
+  failedRequests: string[],
+) {
+  console.log(`--- ${user}: page state after login ---`);
+  console.log(`url: ${page.url()}`);
+  try {
+    const body = (await page.locator("body").innerText()).trim();
+    console.log(`body text (${body.length} chars): ${body.slice(0, 500)}`);
+    console.log(
+      `nav items in dom: ${await page
+        .getByTestId("left-navigation-item")
+        .count()}`,
+    );
+  } catch (e) {
+    console.log(`could not read the body: ${String(e)}`);
+  }
+  if (pageErrors.length > 0) {
+    console.log(`page errors:\n${pageErrors.join("\n")}`);
+  } else {
+    console.log("page errors: none");
+  }
+  if (failedRequests.length > 0) {
+    console.log(`failed requests:\n${failedRequests.join("\n")}`);
+  }
+}
+
 async function loginAndSave(
   page: import("@playwright/test").Page,
   user: TestUser,
 ) {
   const { username, password } = credentials[user];
 
+  const pageErrors: string[] = [];
+  const failedRequests: string[] = [];
+  page.on("pageerror", (err) => {
+    // The message alone came back empty for the crash under investigation, so
+    // record what was actually thrown along with where it came from.
+    pageErrors.push(
+      `pageerror: ${String(err)}\n${(err.stack ?? "no stack").slice(0, 800)}`,
+    );
+  });
+  page.on("console", (msg) => {
+    if (msg.type() === "error") pageErrors.push(`console: ${msg.text()}`);
+  });
+  // The body of a rejected API call carries the reason (permission denied,
+  // blocked, pending approval), which is what separates a misprovisioned test
+  // user from a dashboard that cannot render one.
+  const bodies: Promise<void>[] = [];
+  page.on("response", (resp) => {
+    if (resp.status() < 400) return;
+    const line = `${resp.status()} ${resp.url()}`;
+    if (!resp.url().includes("/api/")) {
+      failedRequests.push(line);
+      return;
+    }
+    bodies.push(
+      resp
+        .text()
+        .then((body) => {
+          failedRequests.push(`${line}\n    body: ${body.slice(0, 200)}`);
+        })
+        .catch(() => {
+          failedRequests.push(`${line} (body unavailable)`);
+        }),
+    );
+  });
+
   await page.goto("/");
 
   await page.locator("input[id=loginName]").waitFor({ state: "visible" });
@@ -36,20 +104,33 @@ async function loginAndSave(
   const modal = page.getByTestId("setup-netbird-modal");
   const approval = page.getByText("User Approval Pending");
 
-  const after_login = await Promise.race([
-    skipButton.waitFor({ timeout: 15_000 }).then(() => "2fa" as const),
-    appNav.waitFor({ timeout: 15_000 }).then(() => "app" as const),
-    modal.waitFor({ timeout: 15_000 }).then(() => "modal" as const),
-    approval.waitFor({ timeout: 15_000 }).then(() => "approval" as const),
-  ]);
+  let after_login: "2fa" | "app" | "modal" | "approval";
+  try {
+    after_login = await Promise.race([
+      skipButton.waitFor({ timeout: 15_000 }).then(() => "2fa" as const),
+      appNav.waitFor({ timeout: 15_000 }).then(() => "app" as const),
+      modal.waitFor({ timeout: 15_000 }).then(() => "modal" as const),
+      approval.waitFor({ timeout: 15_000 }).then(() => "approval" as const),
+    ]);
+  } catch (e) {
+    await Promise.allSettled(bodies);
+    await reportPageState(page, user, pageErrors, failedRequests);
+    throw e;
+  }
 
   if (after_login === "2fa") {
     await skipButton.click();
-    await Promise.race([
-      appNav.waitFor({ timeout: 15_000 }),
-      modal.waitFor({ timeout: 15_000 }),
-      approval.waitFor({ timeout: 15_000 }),
-    ]);
+    try {
+      await Promise.race([
+        appNav.waitFor({ timeout: 15_000 }),
+        modal.waitFor({ timeout: 15_000 }),
+        approval.waitFor({ timeout: 15_000 }),
+      ]);
+    } catch (e) {
+      await Promise.allSettled(bodies);
+      await reportPageState(page, user, pageErrors, failedRequests);
+      throw e;
+    }
   }
 
   // Dismiss setup modal if present
@@ -105,7 +186,7 @@ test.describe("Global Setup", () => {
         25_000,
       );
     } catch (err) {
-      // eslint-disable-next-line no-console
+       
       console.warn(
         `[setup] proxy clusters not confirmed online; reverse-proxy specs may be affected: ${
           (err as Error).message

package.json

@@ -112,6 +112,7 @@
     "jsdom": "^29.1.1",
     "postcss": "^8",
     "prettier": "3.0.3",
+    "serve": "^14.2.6",
     "tailwindcss": "^3.4.17",
     "vitest": "^4.1.10"
   }

src/app/(dashboard)/agent-network/configuration/page.tsx

@@ -8,8 +8,8 @@ import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { VerticalTabs } from "@components/VerticalTabs";
 import * as Tabs from "@radix-ui/react-tabs";
 import { ExternalLinkIcon, Gauge, ScrollText, ServerIcon } from "lucide-react";
-import { useSearchParams } from "next/navigation";
-import React, { lazy, Suspense, useEffect, useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import React, { lazy, Suspense, useMemo } from "react";
 import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
 import GroupsProvider from "@/contexts/GroupsProvider";
 import PeersProvider from "@/contexts/PeersProvider";
@@ -38,15 +38,32 @@ export default function AgentNetworkConfigurationPage() {
   const { only: agentNetworkOnly } = useAgentNetworkMode();
   const queryParams = useSearchParams();
   const queryTab = queryParams.get("tab");
-  const [tab, setTab] = useState(queryTab ?? TAB_BUDGET_SETTINGS);
+  const router = useRouter();
+  const pathname = usePathname();
 
-  useEffect(() => {
-    if (queryTab) setTab(queryTab);
-  }, [queryTab]);
+  // Clusters is a reverse-proxy surface (its table and controls run on the
+  // services permission), so it stays hidden from roles that only hold
+  // agent_network.settings, e.g. agent_network_admin. Unknown ?tab= values
+  // fall back to the first tab so a matching content pane always renders.
+  const canReadClusters = !!permission?.services?.read;
+  const selectableTabs = useMemo(() => {
+    const tabs = new Set([TAB_BUDGET_SETTINGS, TAB_LOG_SETTINGS]);
+    if (canReadClusters) tabs.add(TAB_CLUSTERS);
+    return tabs;
+  }, [canReadClusters]);
+
+  // The ?tab= query is the single source of truth. Trigger clicks push it
+  // themselves; onChange covers Radix's keyboard navigation, which fires
+  // onValueChange without a click.
+  const tab =
+    queryTab && selectableTabs.has(queryTab) ? queryTab : TAB_BUDGET_SETTINGS;
+  const onTabChange = (value: string) => {
+    router.push(`${pathname}?tab=${value}`, { scroll: false });
+  };
 
   return (
     <PageContainer>
-      <VerticalTabs value={tab} onChange={setTab}>
+      <VerticalTabs value={tab} onChange={onTabChange}>
         <VerticalTabs.List>
           <VerticalTabs.Trigger value={TAB_BUDGET_SETTINGS}>
             <Gauge size={14} />
@@ -56,14 +73,16 @@ export default function AgentNetworkConfigurationPage() {
             <ScrollText size={14} />
             Log Collection
           </VerticalTabs.Trigger>
-          <VerticalTabs.Trigger value={TAB_CLUSTERS}>
-            <ServerIcon size={14} />
-            Clusters
-          </VerticalTabs.Trigger>
+          {canReadClusters && (
+            <VerticalTabs.Trigger value={TAB_CLUSTERS}>
+              <ServerIcon size={14} />
+              Clusters
+            </VerticalTabs.Trigger>
+          )}
         </VerticalTabs.List>
         <RestrictedAccess
           page={"Configuration"}
-          hasAccess={permission?.services?.read}
+          hasAccess={permission?.["agent_network.settings"]?.read}
         >
           <GroupsProvider>
             <PeersProvider>
@@ -96,26 +115,28 @@ export default function AgentNetworkConfigurationPage() {
                     </Suspense>
                   </Tabs.Content>
 
-                  <Tabs.Content value={TAB_CLUSTERS} className={"w-full"}>
-                    <ConfigTabHeader
-                      label={"Clusters"}
-                      href={"/agent-network/configuration?tab=clusters"}
-                    >
-                      {agentNetworkOnly
-                        ? "Proxy clusters route your agents' traffic to AI providers and run on your own infrastructure. Add multiple clusters to scale your environment."
-                        : "Proxy clusters route inbound traffic to your services. Shared clusters are run by the platform; account clusters (self-hosted) run on your own infrastructure."}{" "}
-                      <InlineLink
-                        href={REVERSE_PROXY_CLUSTERS_DOCS_LINK}
-                        target={"_blank"}
+                  {canReadClusters && (
+                    <Tabs.Content value={TAB_CLUSTERS} className={"w-full"}>
+                      <ConfigTabHeader
+                        label={"Clusters"}
+                        href={"/agent-network/configuration?tab=clusters"}
                       >
-                        Learn more
-                        <ExternalLinkIcon size={12} />
-                      </InlineLink>
-                    </ConfigTabHeader>
-                    <Suspense fallback={<SkeletonTable />}>
-                      <ClustersTable />
-                    </Suspense>
-                  </Tabs.Content>
+                        {agentNetworkOnly
+                          ? "Proxy clusters route your agents' traffic to AI providers and run on your own infrastructure. Add multiple clusters to scale your environment."
+                          : "Proxy clusters route inbound traffic to your services. Shared clusters are run by the platform; account clusters (self-hosted) run on your own infrastructure."}{" "}
+                        <InlineLink
+                          href={REVERSE_PROXY_CLUSTERS_DOCS_LINK}
+                          target={"_blank"}
+                        >
+                          Learn more
+                          <ExternalLinkIcon size={12} />
+                        </InlineLink>
+                      </ConfigTabHeader>
+                      <Suspense fallback={<SkeletonTable />}>
+                        <ClustersTable />
+                      </Suspense>
+                    </Tabs.Content>
+                  )}
                 </div>
               </AIProvidersProvider>
             </PeersProvider>

src/app/(dashboard)/agent-network/connect/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import React from "react";
+import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
+import PageContainer from "@/layouts/PageContainer";
+import { AgentConnectTabs } from "@/modules/agent-network/AgentConnectTabs";
+import EndpointBadge from "@/modules/agent-network/EndpointBadge";
+import ConnectProvidersTable from "@/modules/agent-network/table/ConnectProvidersTable";
+import {
+  APIMeSetup,
+  useMyAgentNetworkSetup,
+} from "@/modules/agent-network/useMyAgentNetworkSetup";
+
+// ConnectAgentPage is the caller-scoped self-service view: the endpoint to
+// configure tools with and the per-tool config that goes with it — the one
+// place the agent config lives — plus the providers and models the caller's
+// own policies allow. It needs no agent_network permission (the backing
+// endpoint answers for the caller only), so every role, including plain users
+// in the limited view, gets the same config. A caller no policy covers yet
+// still gets it, with an empty provider list carrying the explanation. The caller's own usage lives on the regular Usage & Logs page,
+// which the server scopes to them.
+export default function ConnectAgentPage() {
+  const { setup, isLoading } = useMyAgentNetworkSetup();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/agent-network/connect"}
+            label={"Agent Network"}
+            icon={<AgentNetworkIcon size={16} />}
+          />
+          <Breadcrumbs.Item
+            href={"/agent-network/connect"}
+            label={"Connect Agent"}
+            active
+          />
+        </Breadcrumbs>
+        <h1>Connect Your Agent</h1>
+        <Paragraph>
+          Point your agent at the NetBird endpoint as its base URL. No provider
+          API key is required on the client. NetBird authenticates you through
+          your identity provider and authorizes each request against your access
+          policies.
+        </Paragraph>
+
+        {isLoading ? (
+          <div className={"mt-4"}>
+            <SkeletonTable />
+          </div>
+        ) : (
+          <ConnectAgentSetup setup={setup} />
+        )}
+      </div>
+    </PageContainer>
+  );
+}
+
+function ConnectAgentSetup({ setup }: { setup?: APIMeSetup }) {
+  const providers = setup?.providers ?? [];
+  // EndpointBadge builds https:// URLs from a bare host.
+  const bareEndpoint = (setup?.endpoint ?? "").replace(/^https?:\/\//, "");
+  const providerIds = providers.map((provider) => provider.catalog_id);
+
+  return (
+    <>
+      {/* The server hands the endpoint to every member of an account that has
+          Agent Network set up, covered by a policy or not, so this renders for
+          everyone; it stays guarded because an account with no endpoint yet
+          has nothing to copy and no snippet that would work. */}
+      {bareEndpoint && (
+        <>
+          <div className={"mt-4"}>
+            <EndpointBadge endpoint={bareEndpoint} />
+          </div>
+
+          <div className={"max-w-3xl"}>
+            {/* Same 16px step the endpoint card sits below the description
+                by. */}
+            <AgentConnectTabs
+              endpoint={bareEndpoint}
+              className={"mt-4"}
+              listClassName={"px-0"}
+              contentClassName={"px-0 py-2"}
+              providerIds={providerIds}
+            />
+          </div>
+        </>
+      )}
+
+      <div className={"max-w-3xl"}>
+        <h2 className={"text-base mt-8 mb-0"}>Your Providers &amp; Models</h2>
+        <ConnectProvidersTable providers={providers} />
+      </div>
+    </>
+  );
+}

src/app/(dashboard)/agent-network/playground/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import Paragraph from "@components/Paragraph";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
+import PeersProvider from "@/contexts/PeersProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import PageContainer from "@/layouts/PageContainer";
+import AIProvidersProvider from "@/modules/agent-network/AIProvidersProvider";
+import AgentNetworkPlayground from "@/modules/agent-network/playground/AgentNetworkPlayground";
+
+function PlaygroundPageContent() {
+  const { permission } = usePermissions();
+  const canReadPrincipal = Boolean(
+    (permission?.peers?.read && permission?.users?.read) ||
+      permission?.groups?.read,
+  );
+
+  return (
+    <RestrictedAccess page="Playground identities" hasAccess={canReadPrincipal}>
+      <PeersProvider>
+        <AIProvidersProvider>
+          <div className="p-default py-6">
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                href="/agent-network/providers"
+                label="Agent Network"
+                icon={<AgentNetworkIcon size={16} />}
+              />
+              <Breadcrumbs.Item
+                href="/agent-network/playground"
+                label="Playground"
+                active
+              />
+            </Breadcrumbs>
+            <h1>Playground</h1>
+            <Paragraph>
+              Emulate a peer-backed user or a synthetic group and inspect the
+              real policy, provider, accounting, and response path.
+            </Paragraph>
+            <div className="mt-6">
+              <AgentNetworkPlayground />
+            </div>
+          </div>
+        </AIProvidersProvider>
+      </PeersProvider>
+    </RestrictedAccess>
+  );
+}
+
+export default function AgentNetworkPlaygroundPage() {
+  const { permission } = usePermissions();
+  return (
+    <PageContainer>
+      <RestrictedAccess
+        page="Agent Network Playground"
+        hasAccess={permission?.["agent_network.providers"]?.create}
+      >
+        <PlaygroundPageContent />
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}