Add CrowdSec AppSec mode to reverse proxy access control

Co-authored-by: braginini <bangvalo@gmail.com>

.github/workflows/build_and_push.yml

@@ -39,7 +39,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           repository: netbirdio/IronRDP
-          latest: true
+          tag: v0.0.2
           fileName: "*.ts"
           out-file-path: 'public/ironrdp-pkg'
 
@@ -48,7 +48,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           repository: netbirdio/IronRDP
-          latest: true
+          tag: v0.0.2
           fileName: "*.js"
           out-file-path: 'public/ironrdp-pkg'
 
@@ -57,7 +57,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           repository: netbirdio/IronRDP
-          latest: true
+          tag: v0.0.2
           fileName: "ironrdp_web_bg.wasm"
           out-file-path: 'public/ironrdp-pkg'
 

.github/workflows/sync-deploy-templates.yml

@@ -0,0 +1,34 @@
+name: Sync deploy templates to S3
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "templates/reverse-proxy/**"
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.DEPLOY_TEMPLATES_ROLE_ARN }}
+          aws-region: eu-central-1
+
+      - name: Validate CloudFormation template
+        run: |
+          aws cloudformation validate-template \
+            --template-body file://templates/reverse-proxy/netbird-proxy-cfn.yaml
+
+      - name: Upload CloudFormation template
+        run: |
+          aws s3 cp templates/reverse-proxy/netbird-proxy-cfn.yaml \
+            s3://netbird-deploy-templates/templates/netbird-proxy-cfn.yaml

.github/workflows/test-cloud-deploy.yml

@@ -0,0 +1,78 @@
+name: Test cloud deploy config
+
+on:
+  pull_request:
+    paths:
+      - "docker/init_react_envs.sh"
+      - "templates/reverse-proxy/**"
+      - "src/modules/reverse-proxy/clusters/ClusterCloudDeploy.tsx"
+      - ".github/workflows/test-cloud-deploy.yml"
+
+permissions:
+  contents: read
+
+jobs:
+  csp-connect-src:
+    name: CSP allows cloud provider APIs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install nginx
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y nginx gettext-base
+
+      - name: Prepare nginx layout expected by the init script
+        run: |
+          sudo mkdir -p /etc/nginx/http.d /usr/share/nginx/html
+          echo 'add_header Content-Security-Policy "placeholder" always;' | sudo tee /etc/nginx/http.d/default.conf
+          sudo touch /usr/share/nginx/html/OidcTrustedDomains.js.tmpl
+          sudo systemctl start nginx
+
+      - name: Run init script with production-like env
+        env:
+          AUTH_AUTHORITY: https://auth.example.com
+          AUTH_CLIENT_ID: test-client
+          AUTH_AUDIENCE: test-audience
+          AUTH_SUPPORTED_SCOPES: openid profile email
+          USE_AUTH0: "false"
+          NETBIRD_MGMT_API_ENDPOINT: https://api.example.com
+        run: sudo -E bash docker/init_react_envs.sh
+
+      - name: Assert provider APIs are in connect-src
+        run: |
+          CSP=$(grep -o 'Content-Security-Policy "[^"]*"' /etc/nginx/http.d/default.conf)
+          echo "Generated CSP: $CSP"
+          CONNECT_SRC=$(echo "$CSP" | sed 's/.*connect-src \([^;]*\);.*/\1/')
+          echo "connect-src: $CONNECT_SRC"
+          status=0
+          for origin in https://api.hetzner.cloud https://api.digitalocean.com; do
+            if echo "$CONNECT_SRC" | grep -qF "$origin"; then
+              echo "OK: $origin"
+            else
+              echo "MISSING in connect-src: $origin"
+              status=1
+            fi
+          done
+          exit $status
+
+  cfn-template-url:
+    name: CloudFormation template URL is live
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Extract template URL from component and check it
+        run: |
+          URL=$(grep -o 'https://[^"]*netbird-proxy-cfn\.yaml' src/modules/reverse-proxy/clusters/ClusterCloudDeploy.tsx)
+          echo "CFN_TEMPLATE_URL: $URL"
+          test -n "$URL"
+          # Non-blocking: the template is published by sync-deploy-templates on
+          # the default branch, so it may not exist yet for a PR that only edits
+          # the URL. Warn instead of failing the check.
+          if curl -sfI "$URL" >/dev/null; then
+            echo "OK: template URL is live"
+          else
+            echo "::warning::CloudFormation template URL is not reachable yet: $URL"
+          fi

announcements.json

@@ -1,8 +1,8 @@
 [
   {
-    "tag": "Preview",
-    "text": "The new NetBird desktop app is here - now available as a 0.75 release candidate.",
-    "link": "https://github.com/netbirdio/netbird/discussions/6483",
+    "tag": "New",
+    "text": "The new NetBird desktop app is here - now available in the v0.75 release.",
+    "link": "https://netbird.io/knowledge-hub/netbird-v0-75-new-desktop-app",
     "linkText": "Learn more",
     "variant": "important",
     "isExternal": true,

docker/init_react_envs.sh

@@ -80,7 +80,7 @@ echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 FIRST_PARTY_CSP="pkgs.netbird.io"
 FIRST_PARTY_CSP_CONNECT_SRC="wss://*.netbird.io"
 THIRD_PARTY_CSP="*.licdn.com *.linkedin.com *.vector.co *.sibforms.com *.hotjar.com *.hotjar.io *.redditstatic.com pixel-config.reddit.com *.clarity.ms c.bing.com *.microsoft.com googleads.g.doubleclick.net pagead2.googlesyndication.com www.google.com www.googleadservices.com *.google-analytics.com *.googletagmanager.com analytics.google.com *.hubapi.com *.hs-banner.com *.hubspot.com *.hubspot.net js.hs-analytics.com *.hsforms.net *.hscollectedforms.net *.hs-analytics.net *.hsforms.com track.hubspot.com *.hsadspixel.net static.hsappstatic.net"
-THIRD_PARTY_CSP_CONNECT_SRC="https://api.github.com/repos/netbirdio/netbird/releases/latest https://raw.githubusercontent.com/netbirdio/dashboard/ wss://ws.hotjar.com"
+THIRD_PARTY_CSP_CONNECT_SRC="https://api.github.com/repos/netbirdio/netbird/releases/latest https://raw.githubusercontent.com/netbirdio/dashboard/ wss://ws.hotjar.com https://api.hetzner.cloud https://api.digitalocean.com"
 THIRD_PARTY_CSP_SCRIPT_SRC="'sha256-7knV6EIjKUvCpYWE2rCYx8dYV2WCNb2bpTuitFXzBcA=' *.hs-scripts.com"
 
 CSP_DOMAINS=""

e2e/helpers/api.ts

@@ -433,3 +433,53 @@ export async function deleteUserByEmail(page: Page, email: string) {
     await deleteUserById(page, user.id);
   }
 }
+
+// ---------------------------------------------------------------------------
+// Agent Network
+// ---------------------------------------------------------------------------
+
+type AgentNetworkCatalogProvider = {
+  id: string;
+  name: string;
+};
+
+type AgentNetworkProvider = {
+  id: string;
+  name: string;
+  provider_id: string;
+};
+
+/** List the Agent Network provider catalog (server-defined provider types). */
+export async function listAgentNetworkCatalog(
+  page: Page,
+): Promise<AgentNetworkCatalogProvider[]> {
+  return apiGet<AgentNetworkCatalogProvider[]>(
+    page,
+    "/agent-network/catalog/providers",
+  );
+}
+
+/** List connected Agent Network providers. */
+export async function listAgentNetworkProviders(
+  page: Page,
+): Promise<AgentNetworkProvider[]> {
+  return apiGet<AgentNetworkProvider[]>(page, "/agent-network/providers");
+}
+
+/** Delete an Agent Network provider by ID. */
+export async function deleteAgentNetworkProviderById(page: Page, id: string) {
+  await apiDelete(page, `/agent-network/providers/${id}`);
+}
+
+/** Delete all Agent Network providers whose name starts with the prefix. */
+export async function deleteAgentNetworkProvidersByPrefix(
+  page: Page,
+  prefix: string,
+) {
+  const providers = await listAgentNetworkProviders(page);
+  for (const p of providers) {
+    if (p.name.startsWith(prefix)) {
+      await deleteAgentNetworkProviderById(page, p.id);
+    }
+  }
+}

e2e/helpers/auth.ts

@@ -20,7 +20,11 @@ const credentials: Record<TestUser, { username: string; password: string }> = {
 /**
  * Navigate to the app, authenticate via Zitadel, and wait for the app to load.
  */
-export async function loginToApp(page: Page, user: TestUser = "owner") {
+export async function loginToApp(
+  page: Page,
+  user: TestUser = "owner",
+  opts: { expectOnboarding?: boolean } = {},
+) {
   const { username, password } = credentials[user];
 
   await page.goto("/");
@@ -39,7 +43,9 @@ export async function loginToApp(page: Page, user: TestUser = "owner") {
   const which = await Promise.race([
     appReady.waitFor({ timeout: 20_000 }).then(() => "app" as const),
     setupModal.waitFor({ timeout: 20_000 }).then(() => "modal" as const),
-    approvalPending.waitFor({ timeout: 20_000 }).then(() => "approval" as const),
+    approvalPending
+      .waitFor({ timeout: 20_000 })
+      .then(() => "approval" as const),
     onboarding.waitFor({ timeout: 20_000 }).then(() => "onboarding" as const),
     selectAccount.waitFor({ timeout: 20_000 }).then(() => "select" as const),
     loginInput.waitFor({ timeout: 20_000 }).then(() => "login" as const),
@@ -51,6 +57,9 @@ export async function loginToApp(page: Page, user: TestUser = "owner") {
   }
 
   if (which === "modal") {
+    // Onboarding tests render a full-screen overlay over the setup modal;
+    // clicking modal-close would be pointer-intercepted, so leave it be.
+    if (opts.expectOnboarding) return;
     await setupModal.getByTestId("modal-close").click();
     await expect(setupModal).not.toBeVisible();
     return;
@@ -89,8 +98,12 @@ export async function loginToApp(page: Page, user: TestUser = "owner") {
     onboarding.waitFor({ timeout: 15_000 }),
   ]);
 
-  // Dismiss setup modal if present
-  if (await setupModal.isVisible().catch(() => false)) {
+  // Dismiss setup modal if present, unless an onboarding overlay is expected
+  // on top of it (clicking through it would be pointer-intercepted).
+  if (
+    !opts.expectOnboarding &&
+    (await setupModal.isVisible().catch(() => false))
+  ) {
     await setupModal.getByTestId("modal-close").click();
     await expect(setupModal).not.toBeVisible();
   }

e2e/tests/agent-network-cache-accounting.spec.ts

@@ -0,0 +1,213 @@
+/**
+ * Agent Network prompt-cache accounting spec.
+ *
+ * Drives the Usage & Logs page against mocked agent-network endpoints whose
+ * rows carry the cache fields (cached_input_tokens / cache_creation_tokens /
+ * cache_cost_usd) plus the per-bucket cost breakdown, and verifies the hover
+ * breakdowns: the access-log Tokens tooltip gains cache read/write rows and a
+ * cache-aware total, the Cost tooltip lists one line per billed bucket, and
+ * the usage overview's daily table
+ * surfaces the day's cache buckets. Route mocks keep the spec hermetic, so it
+ * passes against management builds that predate the cache fields.
+ */
+import { test, expect, type Browser, type Page } from "@playwright/test";
+import { loginToApp, navigateTo } from "../helpers/auth";
+
+const AGENT_NETWORK_CONFIG_KEY = "netbird-test-agent-network";
+
+// The reported field scenario: a session-start request that wrote a ~32k-token
+// prompt cache, and a follow-up that read it back.
+const writeEntry = {
+  id: "anlog-cache-write",
+  service_id: "svc-e2e",
+  timestamp: new Date().toISOString(),
+  status_code: 200,
+  duration_ms: 29000,
+  input_tokens: 10,
+  output_tokens: 1472,
+  total_tokens: 33591,
+  cached_input_tokens: 0,
+  cache_creation_tokens: 32109,
+  cost_usd: 0.142519,
+  cache_cost_usd: 0.120409,
+  input_cost_usd: 0.00003,
+  cached_input_cost_usd: 0,
+  cache_creation_cost_usd: 0.120409,
+  output_cost_usd: 0.02208,
+  provider: "bedrock",
+  model: "anthropic.claude-sonnet-4-5",
+  session_id: "sess-cache-write",
+  decision: "allow",
+  stream: false,
+};
+
+const readEntry = {
+  ...writeEntry,
+  id: "anlog-cache-read",
+  output_tokens: 800,
+  total_tokens: 32919,
+  cached_input_tokens: 32109,
+  cache_creation_tokens: 0,
+  cost_usd: 0.021663,
+  cache_cost_usd: 0.009633,
+  input_cost_usd: 0.00003,
+  cached_input_cost_usd: 0.009633,
+  cache_creation_cost_usd: 0,
+  output_cost_usd: 0.012,
+  session_id: "sess-cache-read",
+};
+
+const todayBucket = {
+  period_start: new Date().toISOString().slice(0, 10),
+  input_tokens: 20,
+  output_tokens: 2272,
+  total_tokens: 66510,
+  cached_input_tokens: 32109,
+  cache_creation_tokens: 32109,
+  cost_usd: 0.164182,
+  cache_cost_usd: 0.130042,
+  input_cost_usd: 0.00006,
+  cached_input_cost_usd: 0.009633,
+  cache_creation_cost_usd: 0.120409,
+  output_cost_usd: 0.03408,
+};
+
+async function mockCacheUsage(page: Page) {
+  await page.route("**/api/agent-network/access-logs*", (route) =>
+    route.fulfill({
+      json: {
+        data: [writeEntry, readEntry],
+        page: 1,
+        page_size: 25,
+        total_records: 2,
+        total_pages: 1,
+      },
+    }),
+  );
+  await page.route("**/api/agent-network/usage/overview*", (route) =>
+    route.fulfill({ json: [todayBucket] }),
+  );
+}
+
+async function newUsagePage(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 mockCacheUsage(page);
+  await loginToApp(page, "owner");
+  return { page, close: () => context.close() };
+}
+
+// FullTooltip force-mounts its content, so a tooltip keeps its role=tooltip
+// element in the DOM after closing — a bare getByRole("tooltip") accumulates
+// every tooltip the test has ever opened. Radix puts role=tooltip on a
+// visually-hidden span and the open/closed flag on that span's parent
+// ("delayed-open"/"instant-open" vs "closed"), so match the parent that is
+// currently open. Its text covers both the visible copy and the hidden one.
+function tooltip(page: Page) {
+  return page.locator(
+    '[data-state="delayed-open"]:has(> [role="tooltip"]), [data-state="instant-open"]:has(> [role="tooltip"])',
+  );
+}
+
+// Radix's hoverable content holds a tooltip open while the pointer travels
+// toward it, so moving straight to the next cell can leave two open at once.
+// Escape dismisses the open one deterministically, wherever the pointer sits.
+async function closeTooltip(page: Page) {
+  await page.keyboard.press("Escape");
+  await expect(tooltip(page)).toHaveCount(0);
+}
+
+test.describe.serial("Agent Network cache accounting @agent-network", () => {
+  test("access-log hover breaks out prompt-cache tokens and cost", async ({
+    browser,
+  }) => {
+    const { page, close } = await newUsagePage(browser);
+    try {
+      await navigateTo(page, "/agent-network/usage?tab=access-logs");
+
+      const writeRow = page.getByRole("row").filter({ hasText: "$0.1425" });
+      await expect(writeRow).toBeVisible();
+
+      // Tokens tooltip: cache-write bucket plus a total that includes it.
+      await writeRow.getByText("1,472").hover();
+      await expect(tooltip(page)).toContainText("32,109");
+      await expect(tooltip(page)).toContainText("cache write");
+      await expect(tooltip(page)).toContainText("33,591");
+
+      // Cost tooltip: all four buckets are listed plus the total, including
+      // buckets that cost nothing — this request wrote the cache but never read
+      // it, so "cache read" is present with a $0.0000 amount.
+      await closeTooltip(page);
+      await writeRow.getByText("$0.1425").hover();
+      await expect(tooltip(page)).toContainText("input");
+      await expect(tooltip(page)).toContainText("cache read");
+      await expect(tooltip(page)).toContainText("cache write");
+      await expect(tooltip(page)).toContainText("output");
+      await expect(tooltip(page)).toContainText("$0.1204");
+      await expect(tooltip(page)).toContainText("$0.0221");
+      await expect(tooltip(page)).toContainText("$0.0000");
+      await expect(tooltip(page)).toContainText("total");
+
+      // The follow-up request reads the cache back: read bucket filled, write
+      // bucket still listed as a zero row.
+      // No exact match: the output count renders behind an sr-only "Output:" prefix.
+      const readRow = page.getByRole("row").filter({ hasText: "$0.0217" });
+      await closeTooltip(page);
+      await readRow.getByText("800").hover();
+      await expect(tooltip(page)).toContainText("cache read");
+      await expect(tooltip(page)).toContainText("32,919");
+      await expect(tooltip(page)).toContainText(/0\s*cache write/);
+    } finally {
+      await close();
+    }
+  });
+
+  test("usage overview daily table surfaces the day's cache buckets", async ({
+    browser,
+  }) => {
+    const { page, close } = await newUsagePage(browser);
+    try {
+      await navigateTo(page, "/agent-network/usage");
+
+      // Row-scoped on purpose: the hovers now repeat the cell's own figure on
+      // their total row, and FullTooltip force-mounts that content, so a
+      // page-wide getByText would match the cell and the tooltip both. Radix
+      // portals tooltip content to <body>, outside the row.
+      const dayRow = page.getByRole("row").filter({ hasText: "$0.16" });
+
+      // Total Tokens includes the additive cache buckets; hover splits them out
+      // in the same value-then-label rows the access-log table uses.
+      await expect(dayRow.getByText("66,510")).toBeVisible();
+      await dayRow.getByText("66,510").hover();
+      await expect(tooltip(page)).toContainText(/20\s*input/);
+      await expect(tooltip(page)).toContainText(/2,272\s*output/);
+      await expect(tooltip(page)).toContainText(/32,109\s*cache read/);
+      await expect(tooltip(page)).toContainText(/32,109\s*cache write/);
+      await expect(tooltip(page)).toContainText(/66,510\s*total/);
+
+      // Cost hover breaks the day into the same four billed buckets.
+      await closeTooltip(page);
+      await dayRow.getByText("$0.16", { exact: true }).hover();
+      await expect(tooltip(page)).toContainText(/\$0\.0001\s*input/);
+      await expect(tooltip(page)).toContainText(/\$0\.0341\s*output/);
+      await expect(tooltip(page)).toContainText(/\$0\.0096\s*cache read/);
+      await expect(tooltip(page)).toContainText(/\$0\.1204\s*cache write/);
+      await expect(tooltip(page)).toContainText(/\$0\.1642\s*total/);
+    } finally {
+      await close();
+    }
+  });
+});

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

@@ -0,0 +1,363 @@
+/**
+ * Agent Network focused-view spec.
+ *
+ * Exercises the account-driven focused view added for netbird.ai signups:
+ * the `agent_network_only` account setting hides the rest of the dashboard,
+ * an explicit `false` opts back out, and a pending netbird.ai signup applies
+ * the focused view optimistically and persists the setting via PUT /accounts.
+ *
+ * The test management backend does not know the setting, so GET /accounts is
+ * rewritten per-test to inject it (same interception approach as
+ * edition-gating.spec.ts). "only" mode is asserted through the Networks nav
+ * 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 { loginToApp, navigateTo } from "../helpers/auth";
+
+const SIGNUP_SOURCE_KEY = "netbird-signup-source";
+const AGENT_NETWORK_SOURCE = "netbird.ai";
+// Drives the NETBIRD_AGENT_NETWORK_ONLY / _ENABLED deployment flags against the
+// test build (see testAgentNetworkOverride in utils/netbird.ts).
+const AGENT_NETWORK_CONFIG_KEY = "netbird-test-agent-network";
+
+type AgentNetworkConfig = "only" | "enabled" | "off";
+
+type AccountMock = {
+  // undefined leaves the setting absent (as an un-onboarded account would be).
+  agentNetworkOnly?: boolean;
+  signupFormPending?: boolean;
+  // dashboardFeaturesAgentNetwork sets settings.dashboard_features.agent_network,
+  // which makes the Agent Network menu available without focusing the dashboard.
+  dashboardFeaturesAgentNetwork?: boolean;
+};
+
+// mockAccounts rewrites GET /accounts to inject the focused-view setting and
+// onboarding state onto the real account. A PUT to /accounts/{id} is captured
+// and flips the injected setting to true, mirroring the server persisting the
+// value so the optimistic view does not revert once the write settles.
+function mockAccounts(
+  page: Page,
+  initial: AccountMock,
+  captured: { putBody?: any },
+) {
+  let applied = initial.agentNetworkOnly;
+
+  page.route("**/api/accounts", async (route) => {
+    if (route.request().method() !== "GET") return route.continue();
+    const response = await route.fetch();
+    let body: any;
+    try {
+      body = await response.json();
+    } catch (e) {
+      return route.fulfill({ response });
+    }
+    if (Array.isArray(body) && body[0]) {
+      body[0].settings = { ...(body[0].settings ?? {}) };
+      if (applied === undefined) {
+        delete body[0].settings.agent_network_only;
+      } else {
+        body[0].settings.agent_network_only = applied;
+      }
+      if (initial.dashboardFeaturesAgentNetwork !== undefined) {
+        body[0].settings.dashboard_features = {
+          agent_network: initial.dashboardFeaturesAgentNetwork,
+        };
+      }
+      body[0].onboarding = {
+        ...(body[0].onboarding ?? {}),
+        signup_form_pending: !!initial.signupFormPending,
+      };
+    }
+    return route.fulfill({ response, json: body });
+  });
+
+  page.route("**/api/accounts/*", async (route) => {
+    if (route.request().method() !== "PUT") return route.continue();
+    try {
+      captured.putBody = route.request().postDataJSON();
+    } catch (e) {
+      captured.putBody = null;
+    }
+    applied = true;
+    return route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ settings: { agent_network_only: true } }),
+    });
+  });
+}
+
+async function openWithAccount(
+  browser: Browser,
+  account: AccountMock,
+  opts: {
+    signupSource?: boolean;
+    agentNetworkConfig?: AgentNetworkConfig;
+  } = {},
+): Promise<{
+  page: Page;
+  captured: { putBody?: any };
+  close: () => Promise<void>;
+}> {
+  const context = await browser.newContext({
+    storageState: "e2e/fixtures/auth/owner.json",
+  });
+  if (opts.signupSource) {
+    await context.addInitScript(
+      ([key, value]) => {
+        try {
+          window.localStorage.setItem(key as string, value as string);
+        } catch (e) {}
+      },
+      [SIGNUP_SOURCE_KEY, AGENT_NETWORK_SOURCE],
+    );
+  }
+  if (opts.agentNetworkConfig) {
+    await context.addInitScript(
+      ([key, value]) => {
+        try {
+          window.localStorage.setItem(key as string, value as string);
+        } catch (e) {}
+      },
+      [AGENT_NETWORK_CONFIG_KEY, opts.agentNetworkConfig],
+    );
+  }
+  const page = await context.newPage();
+  const captured: { putBody?: any } = {};
+  mockAccounts(page, account, captured);
+  await loginToApp(page, "owner");
+  return { page, captured, close: () => context.close() };
+}
+
+function navItem(page: Page, text: string) {
+  return page
+    .getByTestId("left-navigation-item")
+    .getByText(text, { exact: true });
+}
+
+// navItemContaining matches a sidebar entry by a substring of its label. Some
+// entries (Agent Network, Reverse Proxy) render a "Beta" badge inside the label
+// when the dashboard is not focused, so exact text matching would miss them.
+function navItemContaining(page: Page, text: string) {
+  return page.getByTestId("left-navigation-item").filter({ hasText: text });
+}
+
+// Regular dashboard sections that the focused view hides (gated on
+// !agentNetworkOnly in Navigation.tsx).
+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/policies",
+  "/agent-network/usage",
+  "/agent-network/configuration",
+];
+
+test.describe.serial("Agent Network focused view @agent-network", () => {
+  test("focused menu shows only Agent Network views and hides the regular sections", async ({
+    browser,
+  }) => {
+    const { page, close } = await openWithAccount(browser, {
+      agentNetworkOnly: true,
+    });
+    try {
+      // Peers always renders for an owner and is not part of the focused
+      // split, so it confirms the sidebar rendered before asserting absences.
+      await expect(navItem(page, "Peers")).toBeVisible();
+
+      // The Agent Network section is present and the regular sections are gone.
+      await expect(navItem(page, "Agent Network")).toBeVisible();
+      for (const label of FOCUS_HIDDEN_NAV) {
+        await expect(navItem(page, label)).toHaveCount(0);
+      }
+    } finally {
+      await close();
+    }
+  });
+
+  test("focused view keeps every Agent Network route reachable", async ({
+    browser,
+  }) => {
+    const { page, close } = await openWithAccount(browser, {
+      agentNetworkOnly: true,
+    });
+    try {
+      // Each Agent Network view renders instead of the route guard redirecting
+      // away; the Agent Network section stays in the sidebar throughout.
+      for (const path of AGENT_VIEW_PATHS) {
+        await navigateTo(page, path);
+        await expect(page).toHaveURL(new RegExp(path.replace(/\//g, "\\/")));
+        await expect(navItem(page, "Agent Network")).toBeVisible();
+      }
+    } finally {
+      await close();
+    }
+  });
+
+  test("explicit opt-out restores the regular menu and removes Agent Network", async ({
+    browser,
+  }) => {
+    const { page, close } = await openWithAccount(browser, {
+      agentNetworkOnly: false,
+    });
+    try {
+      // The sidebar rendered (Peers is always present for an owner)...
+      await expect(navItem(page, "Peers")).toBeVisible();
+      // ...and the Agent Network section is gone: the explicit opt-out wins
+      // and, without a deployment config flag, the section is not enabled.
+      await expect(navItem(page, "Agent Network")).toHaveCount(0);
+    } finally {
+      await close();
+    }
+  });
+
+  test("dashboard_features.agent_network makes the menu available without focusing", async ({
+    browser,
+  }) => {
+    const { page, close } = await openWithAccount(browser, {
+      dashboardFeaturesAgentNetwork: true,
+    });
+    try {
+      // The Agent Network menu is available (the label carries a "Beta" badge
+      // outside focused mode, so match on the label substring)...
+      await expect(navItemContaining(page, "Agent Network")).toBeVisible();
+      // ...but the dashboard is not focused: a regular section that focused
+      // mode hides (Reverse Proxy) is still present.
+      await expect(navItemContaining(page, "Reverse Proxy")).toBeVisible();
+    } finally {
+      await close();
+    }
+  });
+
+  test("applies the focused view optimistically for a pending netbird.ai signup and persists it", async ({
+    browser,
+  }) => {
+    const { page, captured, close } = await openWithAccount(
+      browser,
+      { agentNetworkOnly: undefined, signupFormPending: true },
+      { signupSource: true },
+    );
+    try {
+      // Focused view is applied immediately, before the setting is persisted.
+      await expect(navItem(page, "Agent Network")).toBeVisible();
+      await expect(navItem(page, "Networks")).toHaveCount(0);
+
+      // The signup source is persisted: focused view plus the Agent Network
+      // menu flag, so turning focus off later keeps access to Agent Network.
+      await expect
+        .poll(() => captured.putBody?.settings?.agent_network_only)
+        .toBe(true);
+      expect(
+        captured.putBody?.settings?.dashboard_features?.agent_network,
+      ).toBe(true);
+
+      // The focused view is retained after the write settles.
+      await expect(navItem(page, "Networks")).toHaveCount(0);
+    } finally {
+      await close();
+    }
+  });
+
+  test("existing netbird.ai account gets dashboard_features, not the focused view", async ({
+    browser,
+  }) => {
+    // An existing account (signup form already submitted) with the netbird.ai
+    // source should have the Agent Network menu made available via
+    // dashboard_features, not the focused agent_network_only view.
+    const { page, captured, close } = await openWithAccount(
+      browser,
+      { signupFormPending: false },
+      { signupSource: true },
+    );
+    try {
+      await expect
+        .poll(
+          () => captured.putBody?.settings?.dashboard_features?.agent_network,
+        )
+        .toBe(true);
+      expect(captured.putBody?.settings?.agent_network_only).not.toBe(true);
+    } finally {
+      await close();
+    }
+  });
+
+  // Matrix of the two deployment flags (NETBIRD_AGENT_NETWORK_ONLY / _ENABLED,
+  // "off" = neither) crossed with the netbird.ai signup source, with no explicit
+  // account settings. The API defaults agent_network_only to false, so the
+  // deployment flags must still take effect. A present source implies a new
+  // signup (signup_form_pending), which focuses the dashboard optimistically
+  // regardless of the flags.
+  type Expectation = "hidden" | "available" | "focused";
+
+  const ENV_SIGNUP_MATRIX: {
+    env: AgentNetworkConfig;
+    signupSource: boolean;
+    expected: Expectation;
+  }[] = [
+    { env: "off", signupSource: false, expected: "hidden" },
+    { env: "off", signupSource: true, expected: "focused" },
+    { env: "enabled", signupSource: false, expected: "available" },
+    { env: "enabled", signupSource: true, expected: "focused" },
+    { env: "only", signupSource: false, expected: "focused" },
+    { env: "only", signupSource: true, expected: "focused" },
+  ];
+
+  async function expectAgentNetworkState(page: Page, expected: Expectation) {
+    // Peers always renders for an owner, confirming the sidebar loaded.
+    await expect(navItem(page, "Peers")).toBeVisible();
+
+    if (expected === "hidden") {
+      await expect(navItemContaining(page, "Agent Network")).toHaveCount(0);
+      // The regular dashboard stays intact.
+      await expect(navItemContaining(page, "Reverse Proxy")).toBeVisible();
+      return;
+    }
+
+    await expect(navItemContaining(page, "Agent Network")).toBeVisible();
+
+    if (expected === "focused") {
+      for (const label of FOCUS_HIDDEN_NAV) {
+        await expect(navItem(page, label)).toHaveCount(0);
+      }
+      return;
+    }
+
+    // available: the menu shows alongside the regular dashboard.
+    await expect(navItemContaining(page, "Reverse Proxy")).toBeVisible();
+  }
+
+  for (const { env, signupSource, expected } of ENV_SIGNUP_MATRIX) {
+    const sourceLabel = signupSource ? "netbird.ai" : "none";
+    test(`env=${env} signup_source=${sourceLabel} -> ${expected}`, async ({
+      browser,
+    }) => {
+      const { page, close } = await openWithAccount(
+        browser,
+        // A source present means a fresh netbird.ai signup (form still pending);
+        // otherwise a plain account with no agent-network settings.
+        { signupFormPending: signupSource },
+        { agentNetworkConfig: env, signupSource },
+      );
+      try {
+        await expectAgentNetworkState(page, expected);
+      } finally {
+        await close();
+      }
+    });
+  }
+
+  test("exposes the focused-view toggle in client settings", async ({
+    browser,
+  }) => {
+    const { page, close } = await openWithAccount(browser, {
+      agentNetworkOnly: true,
+    });
+    try {
+      await navigateTo(page, "/settings?tab=clients");
+      await expect(page.getByTestId("agent-network-only")).toBeVisible();
+    } finally {
+      await close();
+    }
+  });
+});

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

@@ -0,0 +1,165 @@
+/**
+ * Agent Network Kimi (Moonshot AI) provider spec.
+ *
+ * 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.
+ *
+ * The kimi_api catalog entry ships with newer management builds. When the
+ * backend under test predates it, the whole suite skips instead of failing —
+ * same trade-off as the provider matrix in netbird's agent-network e2e
+ * harness, which skips per-provider on missing credentials.
+ *
+ * The Agent Network menu is deployment-gated; the test build honors the
+ * 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 { loginToApp } from "../helpers/auth";
+import { generateRandomName } from "../helpers/utils";
+import {
+  deleteAgentNetworkProvidersByPrefix,
+  listAgentNetworkCatalog,
+} 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-";
+
+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() };
+}
+
+test.describe.serial("Agent Network Kimi provider @agent-network", () => {
+  test("connect a Kimi provider and see Kimi agent configs", async ({
+    browser,
+  }) => {
+    const { page, close } = await newAgentNetworkPage(browser);
+    try {
+      // Backend support probe: skip the suite on management builds whose
+      // catalog predates kimi_api.
+      const catalog = await listAgentNetworkCatalog(page);
+      test.skip(
+        !catalog.some((c) => c.id === KIMI_CATALOG_ID),
+        `management catalog has no ${KIMI_CATALOG_ID} entry`,
+      );
+
+      await deleteAgentNetworkProvidersByPrefix(page, PROVIDER_PREFIX);
+
+      await page.goto("/agent-network/providers");
+      await page.keyboard.press("Escape");
+
+      // ---- connect the provider ----
+      await page
+        .getByRole("button", { name: "Connect Provider" })
+        .first()
+        .click({ force: true });
+
+      // The provider select defaults to OpenAI API; search the catalog for
+      // the Kimi entry.
+      await page
+        .getByRole("button", { name: /OpenAI API/ })
+        .first()
+        .click({ force: true });
+      await page.getByPlaceholder("Search providers...").fill("kimi");
+      await page.getByText(KIMI_CATALOG_NAME).first().click({ force: true });
+
+      // Catalog default host lands in the upstream URL input.
+      await expect(
+        page.locator('input[value="https://api.moonshot.ai"]'),
+      ).toBeVisible();
+
+      await page
+        .getByPlaceholder("sk-...")
+        .first()
+        .fill("sk-e2e-kimi-test-key");
+
+      const providerName = generateRandomName(PROVIDER_PREFIX);
+      const nameInput = page.locator(`input[value="${KIMI_CATALOG_NAME}"]`);
+      await nameInput.fill(providerName);
+
+      // ---- models tab: catalog models carry pricing ----
+      await page.getByRole("tab", { name: "Models" }).click({ force: true });
+      await page.getByRole("button", { name: "Add More" }).click({ force: true });
+      await page.getByText("Kimi K3", { exact: false }).first().click({ force: true });
+      // Catalog price for kimi-k3 input tokens pre-fills the price cell.
+      await expect(page.locator('input[value="0.003"]')).toBeVisible();
+
+      const createResponse = page.waitForResponse(
+        (resp) =>
+          resp.url().includes("/agent-network/providers") &&
+          resp.request().method() === "POST",
+        { timeout: 30_000 },
+      );
+      await page
+        .getByRole("button", { name: "Connect Provider" })
+        .last()
+        .click({ force: true });
+      expect([200, 201]).toContain((await createResponse).status());
+
+      // 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 });
+
+      // Kimi CLI tab only renders when a kimi_api provider is connected.
+      await expect(page.getByRole("tab", { name: "Kimi CLI" })).toBeVisible();
+
+      // Claude Code tab's backend dropdown offers (and, with Kimi as the only
+      // Anthropic-shaped provider, pre-selects) Kimi — its settings.json
+      // snippet pins every model slot to kimi-k3 and disables tool search,
+      // per Moonshot's Claude Code guide.
+      await expect(page.getByText('"ANTHROPIC_MODEL": "kimi-k3"')).toBeVisible();
+      await expect(
+        page.getByText('"CLAUDE_CODE_SUBAGENT_MODEL": "kimi-k3"'),
+      ).toBeVisible();
+      await expect(
+        page.getByText('"ENABLE_TOOL_SEARCH": "false"'),
+      ).toBeVisible();
+      // The base URL carries the /anthropic shape prefix that rides through
+      // the endpoint to Moonshot's Anthropic surface.
+      await expect(
+        page.getByText(/"ANTHROPIC_BASE_URL": "https:\/\/[^"]+\/anthropic"/),
+      ).toBeVisible();
+
+      // Kimi CLI tab carries the ~/.kimi/config.toml provider block.
+      await page.getByRole("tab", { name: "Kimi CLI" }).click({ force: true });
+      await expect(page.getByText('default_model = "kimi-k3"')).toBeVisible();
+
+      // Codex has no Kimi variant — Kimi's upstream doesn't support Codex, so
+      // the tab keeps the plain Responses-API config with no backend dropdown.
+      await page.getByRole("tab", { name: "Codex" }).click({ force: true });
+      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);
+    } finally {
+      await close();
+    }
+  });
+});

e2e/tests/error-request-id.spec.ts

@@ -0,0 +1,109 @@
+/**
+ * Validates that the dashboard surfaces the management API's request id in the
+ * error toast. Newer management servers set an `X-Request-Id` response header
+ * (see telemetry.RequestIDHeader). When present, the dashboard shows it in the
+ * error notification so it can be quoted in support tickets. Older servers omit
+ * the header, and the toast must render without a request id.
+ *
+ * Each scenario runs in its own browser context so the mocked `/networks`
+ * route and its resulting toast never bleed into another test through the
+ * worker-scoped page.
+ */
+import { test, expect, type Browser, type Page } from "@playwright/test";
+import { loginToApp, navigateTo } from "../helpers/auth";
+import * as path from "path";
+
+const SCREENSHOTS_DIR = path.resolve(__dirname, "..", "screenshots");
+const REQUEST_ID = "9m4e2mr0ui3e8a215n4g";
+const NETWORKS_ENDPOINT = /\/api\/networks(\?|$)/;
+const REQUEST_ID_TESTID = "notification-request-id";
+const TITLE_TESTID = "notification-title";
+
+// failNetworks mocks the networks list GET with a 500, optionally attaching the
+// X-Request-Id header to emulate a newer management server. The dashboard talks
+// to the management API cross-origin, so the mock must mirror a CORS-enabled
+// server: the browser only lets JS read a non-safelisted response header when it
+// is listed in Access-Control-Expose-Headers. This is the same requirement the
+// real management server must satisfy for the feature to work in production.
+async function failNetworks(page: Page, opts: { withRequestId: boolean }) {
+  await page.route(NETWORKS_ENDPOINT, async (route) => {
+    if (route.request().method() !== "GET") return route.continue();
+    const origin = route.request().headers()["origin"] || "*";
+    const headers: Record<string, string> = {
+      "content-type": "application/json",
+      "access-control-allow-origin": origin,
+      "access-control-expose-headers": "X-Request-Id",
+    };
+    if (opts.withRequestId) headers["X-Request-Id"] = REQUEST_ID;
+    await route.fulfill({
+      status: 500,
+      headers,
+      body: JSON.stringify({ code: 500, message: "internal server error" }),
+    });
+  });
+}
+
+async function openOwner(
+  browser: Browser,
+): Promise<{ page: Page; close: () => Promise<void> }> {
+  const context = await browser.newContext({
+    storageState: "e2e/fixtures/auth/owner.json",
+  });
+  const page = await context.newPage();
+  return { page, close: () => context.close() };
+}
+
+test.describe.serial("API error request id @error-handling", () => {
+  test("shows the X-Request-Id from a failed request in the error toast", async ({
+    browser,
+  }) => {
+    const { page, close } = await openOwner(browser);
+    try {
+      await failNetworks(page, { withRequestId: true });
+      await loginToApp(page, "owner");
+      await navigateTo(page, "/networks");
+
+      const requestIdLine = page.getByTestId(REQUEST_ID_TESTID);
+      await expect(requestIdLine).toBeVisible();
+      await expect(requestIdLine).toContainText(REQUEST_ID);
+      await expect(page.getByTestId(TITLE_TESTID).first()).toContainText(
+        "Request failed with status code 500",
+      );
+
+      const toast = page.locator("[data-toast-notification]").first();
+      await toast.screenshot({
+        path: path.join(SCREENSHOTS_DIR, "error-toast-with-request-id.png"),
+      });
+      await page.screenshot({
+        path: path.join(SCREENSHOTS_DIR, "networks-page-error-request-id.png"),
+      });
+    } finally {
+      await close();
+    }
+  });
+
+  test("omits the request id when the server does not send the header", async ({
+    browser,
+  }) => {
+    const { page, close } = await openOwner(browser);
+    try {
+      await failNetworks(page, { withRequestId: false });
+      await loginToApp(page, "owner");
+      await navigateTo(page, "/networks");
+
+      // The generic error toast still appears for older servers...
+      await expect(page.getByTestId(TITLE_TESTID).first()).toContainText(
+        "Request failed with status code 500",
+      );
+      // ...but no request id line is rendered.
+      await expect(page.getByTestId(REQUEST_ID_TESTID)).toHaveCount(0);
+
+      const toast = page.locator("[data-toast-notification]").first();
+      await toast.screenshot({
+        path: path.join(SCREENSHOTS_DIR, "error-toast-without-request-id.png"),
+      });
+    } finally {
+      await close();
+    }
+  });
+});

e2e/tests/onboarding-form.spec.ts

@@ -0,0 +1,169 @@
+/**
+ * Onboarding form selection spec.
+ *
+ * Validates which onboarding form is shown first and which one persists,
+ * across signup-source and account states — the recurring "regular form
+ * flashes before the Agent Network form" bug. Onboarding is disabled in the
+ * test build by default; each test opts in via the `netbird-test-onboarding`
+ * localStorage flag (see testOnboardingEnabled in src/utils/netbird.ts), and
+ * GET /accounts is rewritten to drive the account's onboarding + settings
+ * state (same interception approach as edition-gating.spec.ts).
+ */
+import { test, expect, type Browser, type Page } from "@playwright/test";
+import { loginToApp } from "../helpers/auth";
+
+const SIGNUP_SOURCE_KEY = "netbird-signup-source";
+const AGENT_NETWORK_SOURCE = "netbird.ai";
+
+const AGENT_FORM = "agent-network-onboarding";
+const REGULAR_FORM = "regular-onboarding";
+
+type AccountState = {
+  signupFormPending?: boolean;
+  onboardingFlowPending?: boolean;
+  agentNetworkOnly?: boolean;
+};
+
+// mockAccounts rewrites GET /accounts to drive the onboarding + focused-view
+// state, optionally delaying the response to emulate a slow backend. A PUT to
+// /accounts/{id} flips agent_network_only to true afterwards, mirroring the
+// server persisting the netbird.ai signup mark.
+function mockAccounts(page: Page, state: AccountState, delayMs: number) {
+  let agentNetworkOnly = state.agentNetworkOnly;
+
+  page.route("**/api/accounts", async (route) => {
+    if (route.request().method() !== "GET") return route.continue();
+    if (delayMs > 0) {
+      await new Promise((resolve) => setTimeout(resolve, delayMs));
+    }
+    const response = await route.fetch();
+    let body: any;
+    try {
+      body = await response.json();
+    } catch (e) {
+      return route.fulfill({ response });
+    }
+    if (Array.isArray(body) && body[0]) {
+      body[0].onboarding = {
+        ...(body[0].onboarding ?? {}),
+        signup_form_pending: !!state.signupFormPending,
+        onboarding_flow_pending: !!state.onboardingFlowPending,
+      };
+      body[0].settings = { ...(body[0].settings ?? {}) };
+      if (agentNetworkOnly === undefined) {
+        delete body[0].settings.agent_network_only;
+      } else {
+        body[0].settings.agent_network_only = agentNetworkOnly;
+      }
+    }
+    return route.fulfill({ response, json: body });
+  });
+
+  page.route("**/api/accounts/*", async (route) => {
+    if (route.request().method() !== "PUT") return route.continue();
+    agentNetworkOnly = true;
+    return route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ settings: { agent_network_only: true } }),
+    });
+  });
+}
+
+async function openOnboarding(
+  browser: Browser,
+  opts: { source?: boolean; account: AccountState; delayMs?: number },
+): Promise<{ page: Page; close: () => Promise<void> }> {
+  const context = await browser.newContext({
+    storageState: "e2e/fixtures/auth/owner.json",
+  });
+  await context.addInitScript(
+    ([sourceKey, sourceValue, withSource]) => {
+      try {
+        window.localStorage.setItem("netbird-test-onboarding", "true");
+        if (withSource) {
+          window.localStorage.setItem(
+            sourceKey as string,
+            sourceValue as string,
+          );
+        }
+      } catch (e) {}
+    },
+    [SIGNUP_SOURCE_KEY, AGENT_NETWORK_SOURCE, !!opts.source] as const,
+  );
+  const page = await context.newPage();
+  mockAccounts(page, opts.account, opts.delayMs ?? 0);
+  await loginToApp(page, "owner", { expectOnboarding: true });
+  return { page, close: () => context.close() };
+}
+
+test.describe.serial("Onboarding form selection @onboarding", () => {
+  test("netbird.ai signup shows the Agent Network form and never the regular one", async ({
+    browser,
+  }) => {
+    const { page, close } = await openOnboarding(browser, {
+      source: true,
+      account: { signupFormPending: true, onboardingFlowPending: true },
+    });
+    try {
+      await expect(page.getByTestId(AGENT_FORM)).toBeVisible();
+      await expect(page.getByTestId(REGULAR_FORM)).toHaveCount(0);
+    } finally {
+      await close();
+    }
+  });
+
+  test("a plain new cloud account shows the regular onboarding form", async ({
+    browser,
+  }) => {
+    const { page, close } = await openOnboarding(browser, {
+      source: false,
+      account: { signupFormPending: true, onboardingFlowPending: true },
+    });
+    try {
+      await expect(page.getByTestId(REGULAR_FORM)).toBeVisible();
+      await expect(page.getByTestId(AGENT_FORM)).toHaveCount(0);
+    } finally {
+      await close();
+    }
+  });
+
+  test("an account already marked agent_network_only shows the Agent Network form", async ({
+    browser,
+  }) => {
+    const { page, close } = await openOnboarding(browser, {
+      source: false,
+      account: { onboardingFlowPending: true, agentNetworkOnly: true },
+    });
+    try {
+      await expect(page.getByTestId(AGENT_FORM)).toBeVisible();
+      await expect(page.getByTestId(REGULAR_FORM)).toHaveCount(0);
+    } finally {
+      await close();
+    }
+  });
+
+  test("a slow backend never flashes the regular form for a netbird.ai signup", async ({
+    browser,
+  }) => {
+    const { page, close } = await openOnboarding(browser, {
+      source: true,
+      account: { signupFormPending: true, onboardingFlowPending: true },
+      delayMs: 1500,
+    });
+    try {
+      // While /accounts is still loading, no onboarding form should have been
+      // committed to the wrong flow.
+      await expect(page.getByTestId(REGULAR_FORM)).toHaveCount(0);
+      // Once it resolves, the Agent Network form is the one that appears...
+      await expect(page.getByTestId(AGENT_FORM)).toBeVisible();
+      await expect(page.getByTestId(REGULAR_FORM)).toHaveCount(0);
+      // ...and it persists after the setting is applied (no flip/close).
+      await page.waitForTimeout(1500);
+      await expect(page.getByTestId(AGENT_FORM)).toBeVisible();
+      await expect(page.getByTestId(REGULAR_FORM)).toHaveCount(0);
+    } finally {
+      await close();
+    }
+  });
+});

e2e/tests/setup-keys.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from "../helpers/fixtures";
 import { navigateTo } from "../helpers/auth";
-import { generateRandomName } from "../helpers/utils";
+import { clearScrollLock, generateRandomName } from "../helpers/utils";
 import { deleteGroupsByPrefix, deleteSetupKeysByPrefix } from "../helpers/api";
 
 let setupKeys: string[] = [];
@@ -118,25 +118,41 @@ async function createSetupKey(
   await expect(page.getByText(opts.name)).toBeVisible();
 }
 
-async function revokeSetupKey(
+// openRowActions opens a row's action dropdown. A confirmation dialog closed
+// moments earlier can still leave Radix's scroll-lock artifacts on <body>
+// (`pointer-events: none`, a stale overlay), and those swallow the click even
+// with force — the menu then silently never opens and the item lookup times
+// out. Clear them before clicking.
+async function openRowActions(
   page: import("@playwright/test").Page,
   name: string,
 ) {
-  // Row actions are now behind a dropdown menu.
+  await clearScrollLock(page);
   await page
     .locator("tr")
     .filter({ hasText: name })
     .getByTestId("setup-key-actions")
     .click({ force: true });
-  await page
-    .locator('[data-testid="revoke-setup-key"]:not([data-disabled])')
-    .click({ force: true });
+}
+
+async function revokeSetupKey(
+  page: import("@playwright/test").Page,
+  name: string,
+) {
+  // Row actions are now behind a dropdown menu.
+  await openRowActions(page, name);
+  const revokeItem = page.locator(
+    '[data-testid="revoke-setup-key"]:not([data-disabled])',
+  );
+  await expect(revokeItem).toBeVisible();
+  await revokeItem.click({ force: true });
   const responsePromise = page.waitForResponse(
     (resp) => resp.url().includes("/api/setup-keys/") && resp.request().method() === "PUT",
     { timeout: 10_000 },
   );
   await page.getByTestId("confirmation.confirm").click();
   await responsePromise;
+  await expect(page.getByRole("dialog")).not.toBeVisible();
   await expect(
     page
       .locator("tr")
@@ -150,12 +166,23 @@ async function deleteSetupKey(
   name: string,
 ) {
   // Row actions are now behind a dropdown menu.
-  await page
-    .locator("tr")
-    .filter({ hasText: name })
-    .getByTestId("setup-key-actions")
-    .click({ force: true });
-  await page.getByTestId("delete-setup-key").click({ force: true });
+  await openRowActions(page, name);
+  const deleteItem = page.locator(
+    '[data-testid="delete-setup-key"]:not([data-disabled])',
+  );
+  await expect(deleteItem).toBeVisible();
+  await deleteItem.click({ force: true });
+  // Await the DELETE like revoke awaits its PUT: the handler refetches
+  // /setup-keys afterwards, which re-renders every row — returning before that
+  // settles means the next key's trigger click can land on a replaced node.
+  const responsePromise = page.waitForResponse(
+    (resp) =>
+      resp.url().includes("/api/setup-keys/") &&
+      resp.request().method() === "DELETE",
+    { timeout: 10_000 },
+  );
   await page.getByTestId("confirmation.confirm").click();
+  await responsePromise;
   await expect(page.locator("tr").filter({ hasText: name })).not.toBeVisible();
+  await expect(page.getByRole("dialog")).not.toBeVisible();
 }

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

@@ -1,25 +1,33 @@
 "use client";
 
 import Breadcrumbs from "@components/Breadcrumbs";
+import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { VerticalTabs } from "@components/VerticalTabs";
 import * as Tabs from "@radix-ui/react-tabs";
-import { Gauge, ScrollText } from "lucide-react";
+import { ExternalLinkIcon, Gauge, ScrollText, ServerIcon } from "lucide-react";
 import { useSearchParams } from "next/navigation";
-import React, { Suspense, useEffect, useState } from "react";
+import React, { lazy, Suspense, useEffect, useState } from "react";
 import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
 import GroupsProvider from "@/contexts/GroupsProvider";
 import PeersProvider from "@/contexts/PeersProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
+import { REVERSE_PROXY_CLUSTERS_DOCS_LINK } from "@/interfaces/ReverseProxy";
 import PageContainer from "@/layouts/PageContainer";
+import { useAgentNetworkMode } from "@/modules/agent-network/useAgentNetworkMode";
 import AgentAccountControlsCard from "@/modules/agent-network/AgentAccountControlsCard";
 import AgentBudgetRulesTable from "@/modules/agent-network/AgentBudgetRulesTable";
 import AIProvidersProvider from "@/modules/agent-network/AIProvidersProvider";
 
+const ClustersTable = lazy(
+  () => import("@/modules/reverse-proxy/clusters/ClustersTable"),
+);
+
 const TAB_BUDGET_SETTINGS = "budget-settings";
 const TAB_LOG_SETTINGS = "log-settings";
+const TAB_CLUSTERS = "clusters";
 
 // AgentNetworkConfigurationPage holds the configuration surfaces extracted from
 // Usage & Logs — global limits and log-collection controls — using the same
@@ -27,6 +35,7 @@ const TAB_LOG_SETTINGS = "log-settings";
 // Settings page so it reads as "settings for the Agent Network".
 export default function AgentNetworkConfigurationPage() {
   const { permission } = usePermissions();
+  const { only: agentNetworkOnly } = useAgentNetworkMode();
   const queryParams = useSearchParams();
   const queryTab = queryParams.get("tab");
   const [tab, setTab] = useState(queryTab ?? TAB_BUDGET_SETTINGS);
@@ -47,6 +56,10 @@ export default function AgentNetworkConfigurationPage() {
             <ScrollText size={14} />
             Log Collection
           </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value={TAB_CLUSTERS}>
+            <ServerIcon size={14} />
+            Clusters
+          </VerticalTabs.Trigger>
         </VerticalTabs.List>
         <RestrictedAccess
           page={"Configuration"}
@@ -82,6 +95,27 @@ export default function AgentNetworkConfigurationPage() {
                       <AgentAccountControlsCard />
                     </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"}
+                      >
+                        Learn more
+                        <ExternalLinkIcon size={12} />
+                      </InlineLink>
+                    </ConfigTabHeader>
+                    <Suspense fallback={<SkeletonTable />}>
+                      <ClustersTable />
+                    </Suspense>
+                  </Tabs.Content>
                 </div>
               </AIProvidersProvider>
             </PeersProvider>

src/app/(dashboard)/agent-network/layout.tsx

@@ -1,19 +1,26 @@
 "use client";
 
-import { isAgentNetworkEnabled } from "@utils/netbird";
 import { notFound } from "next/navigation";
 import * as React from "react";
+import { useAgentNetworkMode } from "@/modules/agent-network/useAgentNetworkMode";
 
 // Gates the entire Agent Network route tree behind the NETBIRD_AGENT_NETWORK
-// flag. When disabled, these routes don't exist as far as the user is
-// concerned — the dashboard behaves exactly as it did without the feature.
+// flag or the account-level agent_network_only setting. When disabled, these
+// routes don't exist as far as the user is concerned — the dashboard behaves
+// exactly as it did without the feature. Rendering waits for the account to
+// load so accounts enabled via settings don't get a redirect flash.
 export default function AgentNetworkLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  if (!isAgentNetworkEnabled()) {
-    notFound();
+  const { enabled, loading } = useAgentNetworkMode();
+
+  if (enabled) {
+    return <>{children}</>;
   }
-  return <>{children}</>;
-}
+  if (loading) {
+    return null;
+  }
+  notFound();
+}

src/app/(dashboard)/control-center/page.tsx

@@ -12,7 +12,6 @@ import SquareIcon from "@components/SquareIcon";
 import GetStartedTest from "@components/ui/GetStartedTest";
 import { SmallBadge } from "@components/ui/SmallBadge";
 import useFetchApi from "@utils/api";
-import { isAgentNetworkEnabled, isAgentNetworkOnly } from "@utils/netbird";
 import {
   Background,
   Edge,
@@ -54,6 +53,7 @@ import AIProvidersProvider, {
   useAIProviders,
 } from "@/modules/agent-network/AIProvidersProvider";
 import { AIProviderId } from "@/modules/agent-network/data/mockData";
+import { useAgentNetworkMode } from "@/modules/agent-network/useAgentNetworkMode";
 import { FlowSelector, FlowView } from "@/modules/control-center/FlowSelector";
 import { NetworkRoutingPeerCount } from "@/modules/control-center/NetworkRoutingPeerCount";
 import { ControlCenterCurrentUserBadge } from "@/modules/control-center/user/ControlCenterCurrentUserBadge";
@@ -90,6 +90,8 @@ function ControlCenterView() {
   const [layoutInitialized, setLayoutInitialized] = useState(false);
   const [forceLayoutChange, setForceLayoutChange] = useState(false);
   const { loggedInUser } = useLoggedInUser();
+  const { only: agentNetworkOnly, enabled: agentNetworkEnabled } =
+    useAgentNetworkMode();
 
   const queryParams = useSearchParams();
   const queryTab = queryParams.get("tab");
@@ -125,13 +127,13 @@ function ControlCenterView() {
     "/agent-network/providers",
     true,
     true,
-    isAgentNetworkEnabled(),
+    agentNetworkEnabled,
   );
   const { data: agentPolicies } = useFetchApi<APIPolicy[]>(
     "/agent-network/policies",
     true,
     true,
-    isAgentNetworkEnabled(),
+    agentNetworkEnabled,
   );
 
   // providerById lets the overlay look up a Provider's display payload
@@ -1995,7 +1997,7 @@ function ControlCenterView() {
               {/* Networks is dropped as a top-level pivot in the
                   agent-network repackaging — keep the dropdown + per-network
                   chrome for everyone else so flag-off behaviour is unchanged. */}
-              {!isAgentNetworkOnly() && currentView === "networks" && (
+              {!agentNetworkOnly && currentView === "networks" && (
                 <div className={"w-64"}>
                   <SelectDropdown
                     variant={"secondary"}
@@ -2011,7 +2013,7 @@ function ControlCenterView() {
                 </div>
               )}
 
-              {!isAgentNetworkOnly() && selectedNetwork && currentNetwork && (
+              {!agentNetworkOnly && selectedNetwork && currentNetwork && (
                 <NetworkRoutingPeerCount network={currentNetwork} />
               )}
             </div>

src/app/(dashboard)/events/traffic/page.tsx

@@ -4,338 +4,39 @@ import Breadcrumbs from "@components/Breadcrumbs";
 import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import useFetchApi from "@utils/api";
+import { usePortalElement } from "@hooks/usePortalElement";
 import dayjs from "dayjs";
 import { ArrowLeftRightIcon, ExternalLinkIcon } from "lucide-react";
-import { usePathname, useSearchParams } from "next/navigation";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { DateRange } from "react-day-picker";
+import React, { useMemo } from "react";
 import ActivityIcon from "@/assets/icons/ActivityIcon";
 import { useIsFeatureLocked } from "@/cloud/cloud-hooks/useIsFeatureLocked";
-import { TrafficEvent } from "@/cloud/traffic-events/interfaces/TrafficEvent";
 import { TRAFFIC_EVENTS_DOC_LINK } from "@/cloud/traffic-events/TrafficEventSetting";
 import TrafficEventsTable from "@/cloud/traffic-events/TrafficEventsTable";
 import PeersProvider from "@/contexts/PeersProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
-import { useUsers } from "@/contexts/UsersProvider";
-import { Pagination } from "@/interfaces/Pagination";
+import ServerPaginationProvider from "@/contexts/ServerPaginationProvider";
 import PageContainer from "@/layouts/PageContainer";
 import { useAccount } from "@/modules/account/useAccount";
 import { LockedFeatureInfoCard } from "@/modules/billing/locked-feature/LockedFeatureInfoCard";
 import { LockedFeatureOverlay } from "@/modules/billing/locked-feature/LockedFeatureOverlay";
 import { EventStreamingCard } from "@/modules/integrations/event-streaming/EventStreamingCard";
 
-const DEFAULT_PAGE = "1";
-const DEFAULT_PAGE_SIZE = "10";
-
 export default function NetworkTrafficPage() {
   const account = useAccount();
   const { permission } = usePermissions();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const { users } = useUsers();
-
-  const currentPage = searchParams.get("page") || DEFAULT_PAGE;
-  const currentPageSize = searchParams.get("page_size") || DEFAULT_PAGE_SIZE;
-  const searchTerm = searchParams.get("search") || "";
-  const dateFrom = searchParams.get("start_date");
-  const dateTo = searchParams.get("end_date");
-  const userId = searchParams.get("user_id") || "";
-
-  const typeFilter = searchParams.getAll("type") || [];
-  const connectionTypeFilter = searchParams.get("connection_type") || "";
-  const directionFilter = searchParams.getAll("direction") || [];
-  const protocolFilter = searchParams.getAll("protocol") || [];
-
-  const formattedDateFrom = dateFrom ? encodeURIComponent(dateFrom) : "";
-  const formattedDateTo = dateTo ? encodeURIComponent(dateTo) : "";
-  const formattedUserId = userId ? encodeURIComponent(userId) : "";
-
-  const [dateRange, setDateRange] = useState<DateRange | undefined>(() => {
-    if (dateFrom || dateTo) {
-      return {
-        from: dateFrom ? dayjs(dateFrom).toDate() : undefined,
-        to: dateTo ? dayjs(dateTo).toDate() : undefined,
-      };
-    }
-    return undefined;
-  });
-
-  useEffect(() => {
-    localStorage.removeItem(`netbird-table-pagination${pathname}`);
-    localStorage.removeItem(`netbird-table-range${pathname}`);
-    localStorage.removeItem(`netbird-table-search${pathname}`);
-
-    const keysToRemove = [];
-    for (let i = 0; i < localStorage.length; i++) {
-      const key = localStorage.key(i);
-      if (key && key.includes(pathname)) {
-        keysToRemove.push(key);
-      }
-    }
-
-    keysToRemove.forEach((key) => {
-      localStorage.removeItem(key);
-    });
-  }, [pathname]);
-
-  const baseUrl = `/events/network-traffic`;
-  const [apiUrl, setApiUrl] = useState(() => {
-    let url = `${baseUrl}?page=${currentPage}&page_size=${currentPageSize}`;
-    if (searchTerm) {
-      url += `&search=${encodeURIComponent(searchTerm)}`;
-    }
-    if (formattedDateFrom) {
-      url += `&start_date=${formattedDateFrom}`;
-    }
-    if (formattedDateTo) {
-      url += `&end_date=${formattedDateTo}`;
-    }
-    if (typeFilter) {
-      typeFilter.forEach((t) => {
-        url += `&type=${encodeURIComponent(t)}`;
-      });
-    }
-    if (connectionTypeFilter) {
-      url += `&connection_type=${encodeURIComponent(connectionTypeFilter)}`;
-    }
-    if (directionFilter) {
-      protocolFilter.forEach((d) => {
-        url += `&direction=${encodeURIComponent(d)}`;
-      });
-    }
-    if (formattedUserId) {
-      url += `&user_id=${formattedUserId}`;
-    }
-    if (protocolFilter) {
-      protocolFilter.forEach((protocol) => {
-        url += `&protocol=${encodeURIComponent(protocol)}`;
-      });
-    }
-    return url;
-  });
-
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
   const isTrafficEventsLocked = useIsFeatureLocked("TRAFFIC_EVENTS");
 
-  const {
-    data: events,
-    isLoading,
-    mutate,
-  } = useFetchApi<Pagination<TrafficEvent[]>>(
-    apiUrl,
-    false,
-    true,
-    !isTrafficEventsLocked,
-  );
-
-  // Fetch is suppressed while the feature lock resolves, refetch once unlocked.
-  useEffect(() => {
-    if (!isTrafficEventsLocked) {
-      mutate();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isTrafficEventsLocked]);
-
-  const updateURL = useCallback(
-    (newParams: Record<string, string | string[]>) => {
-      const params = new URLSearchParams(searchParams.toString());
-
-      const isFilterReset = Object.values(newParams).every(
-        (value) => value === "",
-      );
-
-      params.set("page", currentPage);
-      params.set("page_size", currentPageSize);
-
-      if (isFilterReset) {
-        params.delete("search");
-        params.delete("start_date");
-        params.delete("end_date");
-        params.delete("type");
-        params.delete("connection_type");
-        params.delete("direction");
-        params.delete("protocol");
-        params.delete("user_id");
-        params.set("page", "1");
-        params.set("page_size", "10");
-      } else {
-        Object.entries(newParams).forEach(([key, value]) => {
-          if (value === "") {
-            if (key === "page_size" || key === "page") return;
-            params.delete(key);
-          } else if (Array.isArray(value)) {
-            value.forEach((v, i) => {
-              if (i === 0) {
-                params.set(key, v);
-                return;
-              }
-              params.append(key, v);
-            });
-          } else {
-            params.set(key, value);
-          }
-        });
-      }
-
-      setApiUrl(`${baseUrl}?${params.toString()}`);
-
-      if (typeof window !== "undefined") {
-        window.history.replaceState(
-          null,
-          "",
-          `${pathname}?${params.toString()}`,
-        );
-      }
-    },
-    [baseUrl, pathname, searchParams],
-  );
-
-  const handlePaginationChange = useCallback(
-    ({ pageIndex, pageSize }: { pageIndex: number; pageSize: number }) => {
-      updateURL({
-        page: String(pageIndex + 1),
-        page_size: String(pageSize),
-      });
-    },
-    [updateURL],
-  );
-
-  const handleGlobalFilterChange = useCallback(
-    (value: string) => {
-      if (value === "" && currentPage !== "1") return;
-      updateURL({
-        search: value,
-        page: "1",
-      });
-    },
-    [updateURL],
-  );
-
-  const handleDateFilterChange = useCallback(
-    (from?: Date, to?: Date) => {
-      const params: Record<string, string> = {};
-
-      if (from) {
-        params.start_date = dayjs(from).toISOString();
-      } else {
-        params.start_date = "";
-      }
-
-      if (to) {
-        params.end_date = dayjs(to).toISOString();
-      } else {
-        params.end_date = "";
-      }
-
-      params.page = "1";
-      updateURL(params);
-    },
-    [updateURL],
-  );
-
-  const handleFilterChange = useCallback(
-    (filters: {
-      type?: string[];
-      direction?: string[];
-      protocol?: string[];
-    }) => {
-      const params: Record<string, string | string[]> = {};
-
-      if (filters.type && filters.type.length > 0) {
-        params.type = filters.type;
-      } else {
-        params.type = "";
-      }
-
-      if (filters.direction && filters.direction.length > 0) {
-        params.direction = filters.direction;
-      } else {
-        params.direction = "";
-      }
-
-      if (filters.protocol && filters.protocol.length > 0) {
-        params.protocol = filters.protocol;
-      } else {
-        params.protocol = "";
-      }
-
-      params.page = "1";
-      updateURL(params);
-    },
-    [updateURL],
-  );
-
-  const handleConnectionTypeFilterChange = useCallback(
-    (value: string) => {
-      updateURL({
-        connection_type: value,
-        page: "1",
-      });
-    },
-    [updateURL],
-  );
-
-  const handleUserFilterChange = useCallback(
-    (selectedUserId: string) => {
-      updateURL({
-        user_id: selectedUserId || "",
-        page: "1",
-      });
-    },
-    [updateURL],
-  );
-
-  const handleResetAllFilters = useCallback(() => {
-    const params = new URLSearchParams();
-    params.set("page", "1");
-    params.set("page_size", "10");
-
-    const newUrl = `${baseUrl}?${params.toString()}`;
-    setApiUrl(newUrl);
-    if (typeof window !== "undefined") {
-      window.history.replaceState(null, "", `${pathname}?${params.toString()}`);
-    }
-  }, [currentPageSize, baseUrl, pathname]);
-
-  useEffect(() => {
-    if (dateFrom || dateTo) {
-      try {
-        const fromDate = dateFrom ? dayjs(dateFrom).toDate() : undefined;
-        const toDate = dateTo ? dayjs(dateTo).toDate() : undefined;
-
-        const newDateRange = {
-          from: fromDate,
-          to: toDate,
-        };
-        setDateRange(newDateRange);
-      } catch (error) {}
-    } else if (dateRange) {
-      setDateRange(undefined);
-    }
-  }, [dateFrom, dateTo]);
-
-  const pagination = {
-    pageIndex: parseInt(currentPage, 10) - 1,
-    pageSize: parseInt(currentPageSize, 10),
-  };
-
   const isEnabled = !!account?.settings?.extra?.network_traffic_logs_enabled;
 
-  const tableFilters = {
-    type: typeFilter,
-    direction: directionFilter,
-    protocol: protocolFilter,
-  };
-
-  const trafficEvents = useMemo(() => {
-    // `data` may resolve to a non-array (e.g. an error body) on locked /
-    // self-hosted deployments; guard so `.map` never throws.
-    if (!Array.isArray(events?.data)) return undefined;
-    return events.data.map((event) => ({
-      ...event,
-      id: event.flow_id,
-    }));
-  }, [events]);
+  const defaultFilters = useMemo(
+    () => ({
+      start_date: dayjs().subtract(7, "day").startOf("day").toISOString(),
+      end_date: dayjs().endOf("day").toISOString(),
+    }),
+    [],
+  );
 
   return (
     <PageContainer>
@@ -353,7 +54,7 @@ export default function NetworkTrafficPage() {
           />
         </Breadcrumbs>
 
-        <h1>{`${events?.total_records ?? 0}`} Traffic Events</h1>
+        <h1 ref={headingRef}>Traffic Events</h1>
 
         <Paragraph>
           Traffic events is an experimental feature. Functionality and behavior
@@ -383,29 +84,17 @@ export default function NetworkTrafficPage() {
         <LockedFeatureOverlay feature={"TRAFFIC_EVENTS"}>
           <EventStreamingCard />
           <PeersProvider>
-            <TrafficEventsTable
-              events={trafficEvents}
-              isLoading={isLoading}
-              isSettingEnabled={isEnabled}
-              totalRecords={events?.total_records}
-              totalPages={events?.total_pages}
-              onPaginationChange={handlePaginationChange}
-              pagination={pagination}
-              onGlobalFilterChange={handleGlobalFilterChange}
-              globalFilter={searchTerm}
-              onDateFilterChange={handleDateFilterChange}
-              dateFrom={dateFrom || ""}
-              dateTo={dateTo || ""}
-              apiUrl={apiUrl}
-              filters={tableFilters}
-              onFilterChange={handleFilterChange}
-              users={users}
-              userId={userId}
-              onUserFilterChange={handleUserFilterChange}
-              onResetAllFilters={handleResetAllFilters}
-              connectionTypeFilter={connectionTypeFilter}
-              onConnectionTypeFilterChange={handleConnectionTypeFilterChange}
-            />
+            <ServerPaginationProvider
+              url={"/events/network-traffic"}
+              defaultPageSize={10}
+              defaultFilters={defaultFilters}
+              enabled={!isTrafficEventsLocked}
+            >
+              <TrafficEventsTable
+                headingTarget={portalTarget}
+                isSettingEnabled={isEnabled}
+              />
+            </ServerPaginationProvider>
           </PeersProvider>
         </LockedFeatureOverlay>
       </RestrictedAccess>