diff --git a/e2e/helpers/api.ts b/e2e/helpers/api.ts
index c8bcc8c4e..a92d684dd 100644
--- a/e2e/helpers/api.ts
+++ b/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,
+  });
+}
diff --git a/e2e/tests/agent-network-kimi-provider.spec.ts b/e2e/tests/agent-network-kimi-provider.spec.ts
index 31be3d76f..19dca5516 100644
--- a/e2e/tests/agent-network-kimi-provider.spec.ts
+++ b/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 { loginToApp } from "../helpers/auth";
-import { generateRandomName } from "../helpers/utils";
+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";
 
 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],
+      });
+
+      await page.goto("/agent-network/connect");
 
-      // Kimi CLI tab only renders when a kimi_api provider is connected.
-      await expect(page.getByRole("tab", { name: "Kimi CLI" })).toBeVisible();
+      // 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();
     }
diff --git a/src/app/(dashboard)/agent-network/configuration/page.tsx b/src/app/(dashboard)/agent-network/configuration/page.tsx
index 62cea21cf..2d32b87b6 100644
--- a/src/app/(dashboard)/agent-network/configuration/page.tsx
+++ b/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>
diff --git a/src/app/(dashboard)/agent-network/connect/page.tsx b/src/app/(dashboard)/agent-network/connect/page.tsx
new file mode 100644
index 000000000..3280519c5
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/app/(dashboard)/agent-network/policies/page.tsx b/src/app/(dashboard)/agent-network/policies/page.tsx
index 9b4eb789d..b29e890b2 100644
--- a/src/app/(dashboard)/agent-network/policies/page.tsx
+++ b/src/app/(dashboard)/agent-network/policies/page.tsx
@@ -43,7 +43,7 @@ export default function AgentNetworkPoliciesPage() {
 
       <RestrictedAccess
         page={"Policies"}
-        hasAccess={permission?.services?.read}
+        hasAccess={permission?.["agent_network.policies"]?.read}
       >
         <AIProvidersProvider>
           <Suspense fallback={<SkeletonTable />}>
diff --git a/src/app/(dashboard)/agent-network/providers/page.tsx b/src/app/(dashboard)/agent-network/providers/page.tsx
index 64a5ee5ef..b987d8eee 100644
--- a/src/app/(dashboard)/agent-network/providers/page.tsx
+++ b/src/app/(dashboard)/agent-network/providers/page.tsx
@@ -6,93 +6,28 @@ import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { usePortalElement } from "@hooks/usePortalElement";
-import useCopyToClipboard from "@hooks/useCopyToClipboard";
-import { Copy, ExternalLinkIcon, Globe, Plug } from "lucide-react";
-import React, { Suspense, useState } from "react";
+import { ExternalLinkIcon, Globe } from "lucide-react";
+import React, { Suspense } from "react";
 import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import PageContainer from "@/layouts/PageContainer";
-import AgentConnectModal from "@/modules/agent-network/AgentConnectModal";
 import AIProviderModal from "@/modules/agent-network/AIProviderModal";
 import AIProvidersProvider, {
   useAIProviders,
 } from "@/modules/agent-network/AIProvidersProvider";
+import EndpointBadge from "@/modules/agent-network/EndpointBadge";
 import AgentProvidersTable from "@/modules/agent-network/table/AgentProvidersTable";
 import InlineLink from "@components/InlineLink";
 
-function EndpointBadge({ endpoint }: { endpoint: string }) {
-  const [, copy] = useCopyToClipboard(`https://${endpoint}`);
-  const [connectOpen, setConnectOpen] = useState(false);
-  return (
-    <div
-      className={
-        "inline-flex items-center gap-3 rounded-lg border border-nb-gray-800 bg-nb-gray-900/40 p-3 min-w-[300px]"
-      }
-    >
-      <div className={"flex flex-col"}>
-        <div
-          className={
-            "text-[10px] text-nb-gray-400 uppercase tracking-wider font-medium inline-flex items-center gap-1.5"
-          }
-        >
-          API Base URL
-          <HelpTooltip
-            iconSize={11}
-            content={
-              <>
-                Use this URL as the base URL when configuring your AI agents or
-                LLM SDK clients (e.g. OpenAI&apos;s
-                <code className={"font-mono"}> base_url</code>, Anthropic&apos;s{" "}
-                <code className={"font-mono"}>baseURL</code>, or any HTTP
-                client). Calls hit NetBird first, get authorised by your
-                policies, and only then reach the upstream provider.
-              </>
-            }
-          />
-        </div>
-        <code
-          className={
-            "font-mono text-xs text-nb-gray-100 leading-tight mt-0.5 whitespace-nowrap"
-          }
-        >
-          https://{endpoint}
-        </code>
-      </div>
-      <button
-        type={"button"}
-        className={
-          "inline-flex items-center gap-1.5 rounded-md border border-nb-gray-700 bg-nb-gray-800/60 px-2.5 py-1.5 text-[11px] font-medium text-nb-gray-200 hover:bg-nb-gray-800 hover:text-white transition-colors shrink-0"
-        }
-        onClick={() => copy("Endpoint copied to clipboard")}
-        aria-label={"Copy endpoint"}
-      >
-        <Copy size={12} />
-        Copy
-      </button>
-      <button
-        type={"button"}
-        className={
-          "inline-flex items-center gap-1.5 rounded-md border border-nb-gray-700 bg-nb-gray-800/60 px-2.5 py-1.5 text-[11px] font-medium text-nb-gray-200 hover:bg-nb-gray-800 hover:text-white transition-colors shrink-0"
-        }
-        onClick={() => setConnectOpen(true)}
-        aria-label={"Agent config"}
-      >
-        <Plug size={12} />
-        Agent Config
-      </button>
-      <AgentConnectModal
-        open={connectOpen}
-        onOpenChange={setConnectOpen}
-        endpoint={endpoint}
-      />
-    </div>
-  );
-}
-
 function EndpointHeader() {
   const { settings, settingsLoading, openWizard } = useAIProviders();
+  const { permission } = usePermissions();
   if (settingsLoading) return null;
   if (!settings) {
+    // The bootstrap CTA opens the provider wizard, so only callers who can
+    // actually connect a provider get it; read-only viewers (usage_viewer)
+    // see nothing until an admin sets the endpoint up.
+    if (!permission?.["agent_network.providers"]?.create) return null;
     return (
       <button
         type={"button"}
@@ -168,10 +103,10 @@ export default function AgentNetworkProvidersPage() {
     <PageContainer>
       {/* Gate the whole surface: AIProvidersProvider and EndpointHeader fetch
           agent-network state, so they must not mount for users without
-          services.read. */}
+          read on the providers submodule. */}
       <RestrictedAccess
         page={"Providers"}
-        hasAccess={permission?.services?.read}
+        hasAccess={permission?.["agent_network.providers"]?.read}
       >
         <AIProvidersProvider>
           <div className={"p-default py-6"}>
diff --git a/src/app/(dashboard)/agent-network/usage/page.tsx b/src/app/(dashboard)/agent-network/usage/page.tsx
index b9ff1d73e..faf1c1134 100644
--- a/src/app/(dashboard)/agent-network/usage/page.tsx
+++ b/src/app/(dashboard)/agent-network/usage/page.tsx
@@ -8,7 +8,7 @@ import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { LayoutDashboard, ScrollText } from "lucide-react";
 import dayjs from "dayjs";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import React, { Suspense, useEffect, useMemo, useState } from "react";
+import React, { Suspense, useMemo, useState } from "react";
 import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
 import GroupsProvider from "@/contexts/GroupsProvider";
 import PeersProvider from "@/contexts/PeersProvider";
@@ -18,14 +18,13 @@ import PageContainer from "@/layouts/PageContainer";
 import AgentAccessLogTable from "@/modules/agent-network/AgentAccessLogTable";
 import AgentOverviewPanel from "@/modules/agent-network/AgentOverviewPanel";
 import AIProvidersProvider from "@/modules/agent-network/AIProvidersProvider";
+import { useMyAgentNetworkSetup } from "@/modules/agent-network/useMyAgentNetworkSetup";
 
 // Tab ids — kept stable so ?tab=<id> URL hand-off works (e.g.
 // /agent-network/usage?tab=access-logs), the same way Settings deep-links tabs.
 const TAB_USAGE = "usage";
 const TAB_ACCESS_LOGS = "access-logs";
 
-const VALID_TABS = new Set([TAB_USAGE, TAB_ACCESS_LOGS]);
-
 // UsageAndLogsPage surfaces the live access log and the spend dashboard.
 // Budget rules and log-collection controls live under the separate
 // Configuration entry. Providers are mounted once at the top so switching
@@ -36,9 +35,31 @@ export default function UsageAndLogsPage() {
   const router = useRouter();
   const pathname = usePathname();
 
+  const canReadUsage = !!permission?.["agent_network.usage"]?.read;
+  const canReadLogs = !!permission?.["agent_network.logs"]?.read;
+  // Callers without the account-wide grants still get this page once their
+  // own Agent Network setup is configured: the server self-scopes the usage
+  // and log endpoints to them, so the same tabs render their own data.
+  const { configured: mySetupConfigured } = useMyAgentNetworkSetup();
+  const canUseUsage = canReadUsage || mySetupConfigured;
+  const canUseLogs = canReadLogs || mySetupConfigured;
+
+  // Each tab maps to its own permission submodule (usage_viewer, for one,
+  // reads usage but not the request-level log). Only permitted tabs are
+  // selectable; a deep link to a forbidden or unknown tab falls back to the
+  // first permitted one.
+  const allowedTabs = useMemo(() => {
+    const tabs = new Set<string>();
+    if (canUseUsage) tabs.add(TAB_USAGE);
+    if (canUseLogs) tabs.add(TAB_ACCESS_LOGS);
+    return tabs;
+  }, [canUseUsage, canUseLogs]);
+  const defaultTab = canUseUsage ? TAB_USAGE : TAB_ACCESS_LOGS;
+
+  // The ?tab= query is the single source of truth; onTabChange below pushes
+  // it, so deep links, back/forward and clicks all resolve the same way.
   const queryTab = searchParams.get("tab") ?? "";
-  const initialTab = VALID_TABS.has(queryTab) ? queryTab : TAB_USAGE;
-  const [tab, setTab] = useState(initialTab);
+  const tab = allowedTabs.has(queryTab) ? queryTab : defaultTab;
 
   // Access-log view mode: flat per-request rows, or grouped by provider session.
   // Each mode hits its own endpoint and the provider is remounted on toggle
@@ -55,16 +76,8 @@ export default function UsageAndLogsPage() {
     [],
   );
 
-  // Keep the tab in sync when the ?tab= query changes (deep links / back-forward).
-  // Also reset to the default when ?tab= is removed or invalid, so navigating
-  // back to the bare URL doesn't leave the previous tab selected.
-  useEffect(() => {
-    setTab(VALID_TABS.has(queryTab) ? queryTab : TAB_USAGE);
-  }, [queryTab]);
-
   // Reflect the active tab in the URL so it's shareable, like Settings.
   const onTabChange = (value: string) => {
-    setTab(value);
     const params = new URLSearchParams(searchParams.toString());
     params.set("tab", value);
     router.replace(`${pathname}?${params.toString()}`, { scroll: false });
@@ -94,7 +107,7 @@ export default function UsageAndLogsPage() {
 
       <RestrictedAccess
         page={"Usage & Logs"}
-        hasAccess={permission?.services?.read}
+        hasAccess={canUseUsage || canUseLogs}
       >
         <GroupsProvider>
           <PeersProvider>
@@ -102,45 +115,53 @@ export default function UsageAndLogsPage() {
               <Tabs
                 value={tab}
                 onValueChange={onTabChange}
-                defaultValue={initialTab}
                 className={"pt-4 pb-0 mb-0"}
               >
                 <TabsList justify={"start"} className={"px-8"}>
-                  <TabsTrigger value={TAB_USAGE}>
-                    <LayoutDashboard size={16} />
-                    Usage
-                  </TabsTrigger>
-                  <TabsTrigger value={TAB_ACCESS_LOGS}>
-                    <ScrollText size={16} />
-                    Access Logs
-                  </TabsTrigger>
+                  {canUseUsage && (
+                    <TabsTrigger value={TAB_USAGE}>
+                      <LayoutDashboard size={16} />
+                      Usage
+                    </TabsTrigger>
+                  )}
+                  {canUseLogs && (
+                    <TabsTrigger value={TAB_ACCESS_LOGS}>
+                      <ScrollText size={16} />
+                      Access Logs
+                    </TabsTrigger>
+                  )}
                 </TabsList>
 
-                <TabsContent value={TAB_USAGE} className={"pb-8"}>
-                  <Suspense fallback={<SkeletonTable />}>
-                    <AgentOverviewPanel />
-                  </Suspense>
-                </TabsContent>
+                {canUseUsage && (
+                  <TabsContent value={TAB_USAGE} className={"pb-8"}>
+                    <Suspense fallback={<SkeletonTable />}>
+                      <AgentOverviewPanel selfScoped={!canReadUsage} />
+                    </Suspense>
+                  </TabsContent>
+                )}
 
-                <TabsContent value={TAB_ACCESS_LOGS} className={"pb-8"}>
-                  <Suspense fallback={<SkeletonTable />}>
-                    <ServerPaginationProvider
-                      key={groupBySession ? "sessions" : "flat"}
-                      url={
-                        groupBySession
-                          ? "/agent-network/access-log-sessions"
-                          : "/agent-network/access-logs"
-                      }
-                      defaultPageSize={25}
-                      defaultFilters={defaultAccessLogFilters}
-                    >
-                      <AgentAccessLogTable
-                        grouped={groupBySession}
-                        onGroupedChange={setGroupBySession}
-                      />
-                    </ServerPaginationProvider>
-                  </Suspense>
-                </TabsContent>
+                {canUseLogs && (
+                  <TabsContent value={TAB_ACCESS_LOGS} className={"pb-8"}>
+                    <Suspense fallback={<SkeletonTable />}>
+                      <ServerPaginationProvider
+                        key={groupBySession ? "sessions" : "flat"}
+                        url={
+                          groupBySession
+                            ? "/agent-network/access-log-sessions"
+                            : "/agent-network/access-logs"
+                        }
+                        defaultPageSize={25}
+                        defaultFilters={defaultAccessLogFilters}
+                      >
+                        <AgentAccessLogTable
+                          grouped={groupBySession}
+                          onGroupedChange={setGroupBySession}
+                          selfScoped={!canReadLogs}
+                        />
+                      </ServerPaginationProvider>
+                    </Suspense>
+                  </TabsContent>
+                )}
               </Tabs>
             </AIProvidersProvider>
           </PeersProvider>
diff --git a/src/app/(dashboard)/team/user/page.tsx b/src/app/(dashboard)/team/user/page.tsx
index 512c9ddfb..cc118bbc9 100644
--- a/src/app/(dashboard)/team/user/page.tsx
+++ b/src/app/(dashboard)/team/user/page.tsx
@@ -93,10 +93,15 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
   const userRequest = useApiCall<User>("/users");
   const isServiceUser = !!user?.is_service_user;
   const { mutate } = useSWRConfig();
-  const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser();
+  const { loggedInUser, isOwner, isOwnerOrAdmin, isUser } = useLoggedInUser();
   const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false;
   const { permission } = usePermissions();
 
+  // The management API rejects taking the owner role away from a user unless
+  // the caller is an owner themselves ("only owners can remove owner role from
+  // their user"), so don't offer the change to anyone else.
+  const cannotChangeOwnerRole = user.role === Role.Owner && !isOwner;
+
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
       initial: initialGroups,
@@ -250,20 +255,26 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
                 />
               </div>
             )}
-            <div className={"flex items-start"}>
-              <div className={"w-2/3"}>
-                <Label>User Role</Label>
-                <HelpText>
-                  Set a role for the user to assign access permissions.
-                </HelpText>
-              </div>
-              <div className={"w-1/3"}>
+            <div>
+              <Label>User Role</Label>
+              <HelpText>
+                {cannotChangeOwnerRole
+                  ? "Only the account owner can change the owner's role."
+                  : "Set a role for the user to assign access permissions."}
+              </HelpText>
+              {/* 320px: enough for the longest role name and for the tab row
+                  in the dropdown, without stretching across the column. */}
+              <div className={"max-w-[320px]"}>
                 <UserRoleSelector
                   value={role}
                   onChange={setRole}
                   hideOwner={isServiceUser}
                   currentUser={user}
-                  disabled={isLoggedInUser || !permission.users.update}
+                  disabled={
+                    isLoggedInUser ||
+                    !permission.users.update ||
+                    cannotChangeOwnerRole
+                  }
                 />
               </div>
             </div>
diff --git a/src/components/PeerGroupSelector.tsx b/src/components/PeerGroupSelector.tsx
index 90e80edeb..f8417d7c1 100644
--- a/src/components/PeerGroupSelector.tsx
+++ b/src/components/PeerGroupSelector.tsx
@@ -19,6 +19,7 @@ import { useSearch } from "@hooks/useSearch";
 import useSortedDropdownOptions from "@hooks/useSortedDropdownOptions";
 import { IconArrowBack } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import { cn } from "@utils/helpers";
 import { Command, CommandGroup, CommandInput, CommandList } from "cmdk";
 import { sortBy, trim, unionBy } from "lodash";
@@ -203,9 +204,13 @@ export function PeerGroupSelector({
   selectedCluster,
   onClusterChange,
 }: Readonly<MultiSelectProps>) {
+  // Network resources sit behind the networks permission; callers without
+  // it (e.g. agent_network_admin opening the policy modal) get a plain
+  // group selector instead of a 403.
+  const { permission } = usePermissions();
   const { data: fetchedResources, isLoading: isResourcesLoading } = useFetchApi<
     NetworkResource[]
-  >("/networks/resources");
+  >("/networks/resources", false, true, !!permission?.networks?.read);
 
   const resources = useMemo(() => {
     if (!additionalResources?.length) return fetchedResources;
diff --git a/src/components/VersionInfo.tsx b/src/components/VersionInfo.tsx
index c562caeac..aa1d9c649 100644
--- a/src/components/VersionInfo.tsx
+++ b/src/components/VersionInfo.tsx
@@ -18,14 +18,24 @@ function formatVersion(version: string): string {
   return version;
 }
 
+// A pre-release label names the release itself, so it stays in the short form.
+// Anything else after the release names the build and is dropped.
+const PRERELEASE_LABEL = /^(rc|alpha|beta)[\w.]*$/i;
+
 // Builds can carry a suffix that overflows the sidebar: semver build metadata
-// ("0.77.0+enterprise.1" on enterprise builds) or a numeric CI build number
-// ("0.76.3-31256681241"). Show the release only and keep the full string for the
-// tooltip. Pre-release labels like "-rc.1" are left intact so they stay visible.
+// ("0.77.0+enterprise.1" on enterprise builds), a numeric CI build number
+// ("0.76.3-31256681241"), or a goreleaser snapshot tag
+// ("0.60.1-SNAPSHOT-a1b2c3d"). Show the release only and keep the full string
+// for the tooltip. A version that is not a release at all ("development",
+// "ci-7470fbdd") has nothing to shorten and passes through as it is.
 function formatShortVersion(version: string): string {
-  return formatVersion(version)
-    .replace(/\+.*$/, "")
-    .replace(/^(v?\d+(?:\.\d+)*)-\d+$/, "$1");
+  const formatted = formatVersion(version).replace(/\+.*$/, "");
+  const release = /^(v?\d+(?:\.\d+)*)(?:-(.+))?$/.exec(formatted);
+  if (!release) return formatted;
+  const [, numbers, suffix] = release;
+  return suffix && PRERELEASE_LABEL.test(suffix)
+    ? `${numbers}-${suffix}`
+    : numbers;
 }
 
 export const NavigationVersionInfo = () => {
@@ -96,16 +106,17 @@ const NavigationVersionInfoContent = () => {
                 {formatVersion(versionInfo.management_current_version)}
               </span>
               <span>
-                Latest: {formatVersion(versionInfo.management_available_version)}
+                Latest:{" "}
+                {formatVersion(versionInfo.management_available_version)}
               </span>
             </div>
           }
           side="top"
           className="w-full"
         >
-          <div className="flex items-center justify-between w-full cursor-default">
-            <span>Management</span>
-            <span className="text-nb-gray-300 font-medium">
+          <div className="flex items-center justify-between w-full cursor-default gap-2">
+            <span className="shrink-0">Management</span>
+            <span className="text-nb-gray-300 font-medium truncate min-w-0">
               {formatShortVersion(versionInfo.management_current_version)}
             </span>
           </div>
@@ -122,9 +133,9 @@ const NavigationVersionInfoContent = () => {
           side="top"
           className="w-full"
         >
-          <div className="flex items-center justify-between w-full cursor-default">
-            <span>Dashboard</span>
-            <span className="text-nb-gray-300 font-medium">
+          <div className="flex items-center justify-between w-full cursor-default gap-2">
+            <span className="shrink-0">Dashboard</span>
+            <span className="text-nb-gray-300 font-medium truncate min-w-0">
               {formatShortVersion(dashboardVersion)}
             </span>
           </div>
diff --git a/src/contexts/GroupsProvider.tsx b/src/contexts/GroupsProvider.tsx
index 848eac50b..2de42a80a 100644
--- a/src/contexts/GroupsProvider.tsx
+++ b/src/contexts/GroupsProvider.tsx
@@ -25,9 +25,13 @@ const GroupContext = React.createContext(
 );
 
 export default function GroupsProvider({ children }: Props) {
-  const { isRestricted } = usePermissions();
+  const { isRestricted, permission } = usePermissions();
 
-  return isRestricted ? (
+  // Restricted users normally get the inert shell, but roles that are
+  // restricted yet hold the groups read grant (usage_viewer, which needs
+  // group names for the usage filters) still get the real provider — the
+  // content gates its fetch on that same grant.
+  return isRestricted && !permission.groups.read ? (
     <>{children}</>
   ) : (
     <GroupsProviderContent>{children}</GroupsProviderContent>
diff --git a/src/contexts/PermissionsProvider.tsx b/src/contexts/PermissionsProvider.tsx
index 4f2bd71ba..b572ecb03 100644
--- a/src/contexts/PermissionsProvider.tsx
+++ b/src/contexts/PermissionsProvider.tsx
@@ -39,6 +39,14 @@ const MODULE_KEYS: Array<keyof Permissions["modules"]> = [
   "proxy",
   "proxy_configuration",
   "services",
+  "agent_network",
+  "agent_network.providers",
+  "agent_network.policies",
+  "agent_network.guardrails",
+  "agent_network.budgets",
+  "agent_network.usage",
+  "agent_network.logs",
+  "agent_network.settings",
 ];
 
 const DENIED: Permission = {
diff --git a/src/contexts/UsersProvider.tsx b/src/contexts/UsersProvider.tsx
index eb8fd5608..0c547983a 100644
--- a/src/contexts/UsersProvider.tsx
+++ b/src/contexts/UsersProvider.tsx
@@ -28,16 +28,21 @@ const UserProfileContext = React.createContext(
 );
 
 export default function UsersProvider({ children }: Readonly<Props>) {
+  // Mounted on every dashboard page, above PermissionsProvider — so the
+  // caller's grants aren't known here and the request goes out for roles
+  // that can't list users (agent_network_admin, usage_viewer). Errors are
+  // ignored so their 403 leaves the list undefined, which every consumer
+  // already handles, instead of raising the red toast on every page load.
   const {
     data: users,
     mutate,
     isLoading,
-  } = useFetchApi<User[]>("/users?service_user=false");
+  } = useFetchApi<User[]>("/users?service_user=false", true);
   const {
     data: serviceUsers,
     mutate: mutateServiceUsers,
     isLoading: isLoadingServiceUsers,
-  } = useFetchApi<User[]>("/users?service_user=true");
+  } = useFetchApi<User[]>("/users?service_user=true", true);
 
   const refresh = () => {
     mutate().then();
diff --git a/src/hooks/useEmbeddedIdentityProviders.ts b/src/hooks/useEmbeddedIdentityProviders.ts
index e4879eaeb..026070581 100644
--- a/src/hooks/useEmbeddedIdentityProviders.ts
+++ b/src/hooks/useEmbeddedIdentityProviders.ts
@@ -1,16 +1,20 @@
-import { useAccount } from "@/modules/account/useAccount";
-import { SSOIdentityProvider } from "@/interfaces/IdentityProvider";
 import useFetchApi from "@utils/api";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { SSOIdentityProvider } from "@/interfaces/IdentityProvider";
+import { useAccount } from "@/modules/account/useAccount";
 
 export function useEmbeddedIdentityProviders() {
   const account = useAccount();
+  const { permission } = usePermissions();
   const isEmbeddedIdPEnabled = !!account?.settings?.embedded_idp_enabled;
 
+  // The listing needs the identity_providers grant; without it the call is
+  // a guaranteed 403, so gate on the grant as well as the account setting.
   const { data: providers } = useFetchApi<SSOIdentityProvider[]>(
     "/identity-providers",
     true,
     true,
-    isEmbeddedIdPEnabled,
+    isEmbeddedIdPEnabled && permission.identity_providers.read,
   );
 
   return { providers, isEmbeddedIdPEnabled };
diff --git a/src/interfaces/Permission.ts b/src/interfaces/Permission.ts
index 4eb77d2d4..6ccc1a0d2 100644
--- a/src/interfaces/Permission.ts
+++ b/src/interfaces/Permission.ts
@@ -35,6 +35,15 @@ export interface Permissions {
     proxy_configuration: Permission;
 
     services: Permission;
+
+    agent_network: Permission;
+    "agent_network.providers": Permission;
+    "agent_network.policies": Permission;
+    "agent_network.guardrails": Permission;
+    "agent_network.budgets": Permission;
+    "agent_network.usage": Permission;
+    "agent_network.logs": Permission;
+    "agent_network.settings": Permission;
   };
 }
 
diff --git a/src/interfaces/User.ts b/src/interfaces/User.ts
index 9d6cf531b..7f746d638 100644
--- a/src/interfaces/User.ts
+++ b/src/interfaces/User.ts
@@ -69,4 +69,6 @@ export enum Role {
   BillingAdmin = "billing_admin",
   Auditor = "auditor",
   NetworkAdmin = "network_admin",
+  AgentNetworkAdmin = "agent_network_admin",
+  UsageViewer = "usage_viewer",
 }
diff --git a/src/layouts/DashboardLayout.tsx b/src/layouts/DashboardLayout.tsx
index 3463ae2cd..f2cc6886b 100644
--- a/src/layouts/DashboardLayout.tsx
+++ b/src/layouts/DashboardLayout.tsx
@@ -23,6 +23,8 @@ import BillingProvider from "@/contexts/BillingProvider";
 import CountryProvider from "@/contexts/CountryProvider";
 import GroupsProvider from "@/contexts/GroupsProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useAgentNetworkMode } from "@/modules/agent-network/useAgentNetworkMode";
+import { useMyAgentNetworkSetup } from "@/modules/agent-network/useMyAgentNetworkSetup";
 import UsersProvider from "@/contexts/UsersProvider";
 import Navigation from "@/layouts/Navigation";
 import { OnboardingProvider } from "@/modules/onboarding/OnboardingProvider";
@@ -63,7 +65,21 @@ function DashboardPageContent({
   const { mobileNavOpen, toggleMobileNav } = useApplicationContext();
   const isSm = useIsSm();
   const isXs = useIsXs();
-  const { isRestricted } = usePermissions();
+  const { isRestricted, permission } = usePermissions();
+  // Restricted users normally get no navigation at all, but the Agent
+  // Network self-service pages are theirs by design: show the sidebar when
+  // the caller's own setup is configured or their role reads an
+  // agent_network surface (e.g. usage_viewer), so the limited view can
+  // still reach Connect Agent and Usage & Logs. The surface switch still
+  // decides first — with Agent Network off there is nothing to reach.
+  const { configured: mySetupConfigured } = useMyAgentNetworkSetup();
+  const { enabled: agentNetworkSurface } = useAgentNetworkMode();
+  const showNavigation =
+    !isRestricted ||
+    (agentNetworkSurface &&
+      (mySetupConfigured ||
+        !!permission?.["agent_network.usage"]?.read ||
+        !!permission?.["agent_network.logs"]?.read));
 
   const navOpenPageWidth = isSm ? "45%" : isXs ? "60%" : "80%";
   const { bannerHeight } = useAnnouncement();
@@ -174,7 +190,7 @@ function DashboardPageContent({
                 height: `calc(100vh - ${headerHeight + bannerHeight}px)`,
               }}
             >
-              {!isRestricted && <Navigation hideOnMobile />}
+              {showNavigation && <Navigation hideOnMobile />}
               <React.Fragment key={"page"}>{children}</React.Fragment>
             </div>
           </motion.div>
diff --git a/src/layouts/Navigation.tsx b/src/layouts/Navigation.tsx
index 26dafa9ee..89b73f7cc 100644
--- a/src/layouts/Navigation.tsx
+++ b/src/layouts/Navigation.tsx
@@ -21,6 +21,7 @@ import { useApplicationContext } from "@/contexts/ApplicationProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { headerHeight } from "@/layouts/Header";
 import { useAgentNetworkMode } from "@/modules/agent-network/useAgentNetworkMode";
+import { useMyAgentNetworkSetup } from "@/modules/agent-network/useMyAgentNetworkSetup";
 import { NavigationUsageInfo } from "@/modules/billing/NavigationUsageInfo";
 import { NetworkNavigation } from "@/modules/networks/misc/NetworkNavigation";
 import { SmallBadge } from "@components/ui/SmallBadge";
@@ -39,9 +40,25 @@ export default function Navigation({
 }: Readonly<Props>) {
   const { bannerHeight } = useAnnouncement();
   const { isNavigationCollapsed } = useApplicationContext();
-  const { permission, isRestricted } = usePermissions();
-  const { only: agentNetworkOnly, enabled: agentNetworkEnabled } =
+  const { permission } = usePermissions();
+  // "enabled" already falls back to the caller's agent_network grants when
+  // the feature flag can't be resolved (no accounts read — usage_viewer and
+  // custom delegated roles), so it is the one surface switch here.
+  const { only: agentNetworkOnly, enabled: agentNetworkSurface } =
     useAgentNetworkMode();
+  // Caller-scoped: true whenever the caller's own policies grant access to
+  // at least one provider, independent of any agent_network permission —
+  // this is what lets plain users (limited view included) reach Connect Agent
+  // and the self-scoped Usage & Logs view.
+  const { configured: mySetupConfigured } = useMyAgentNetworkSetup();
+  // Any agent_network grant at all — the delegated roles
+  // (agent_network_admin, usage_viewer) each hold a subset of these.
+  const hasAgentNetworkGrant =
+    !!permission?.["agent_network.providers"]?.read ||
+    !!permission?.["agent_network.policies"]?.read ||
+    !!permission?.["agent_network.usage"]?.read ||
+    !!permission?.["agent_network.logs"]?.read ||
+    !!permission?.["agent_network.settings"]?.read;
 
   return (
     <div
@@ -92,7 +109,9 @@ export default function Navigation({
                   icon={<PeerIcon />}
                   label="Peers"
                   href={"/peers"}
-                  visible={!isRestricted}
+                  // Restricted users get the add-your-device view there, so
+                  // the link stays even in the limited (user role) sidebar.
+                  visible={true}
                 />
 
                 <DistributorNavigation />
@@ -194,41 +213,86 @@ export default function Navigation({
                       )}
                     </div>
                   }
-                  href={"/agent-network/providers"}
+                  href={
+                    permission?.["agent_network.providers"]?.read
+                      ? "/agent-network/providers"
+                      : "/agent-network/connect"
+                  }
                   collapsible
                   exactPathMatch={false}
-                  // Parent is visible when at least one child is permitted. All
-                  // Agent Network pages guard on services.read, so the section
-                  // tracks that (plus the feature gating).
-                  visible={agentNetworkEnabled && permission?.services?.read}
+                  // Parent is visible when at least one child is permitted.
+                  // Each page tracks its agent_network submodule, so delegated
+                  // roles (agent_network_admin, usage_viewer) see exactly the
+                  // pages their grants cover. Connect Agent is caller-scoped
+                  // and needs no permission, so a configured setup alone also
+                  // surfaces the section — that is how plain users reach it.
+                  // The surface switch decides first: a deployment (or
+                  // account) with Agent Network off hides the section from
+                  // everyone, configured caller or not. Within it, one
+                  // permitted child or the caller's own setup surfaces it.
+                  visible={
+                    agentNetworkSurface &&
+                    (hasAgentNetworkGrant || mySetupConfigured)
+                  }
                 >
+                  <SidebarItem
+                    label="Connect Agent"
+                    isChild
+                    href={"/agent-network/connect"}
+                    exactPathMatch={true}
+                    // Configured callers get it because it is their own setup;
+                    // anyone administering Agent Network gets it too, even
+                    // before a policy covers them, so the page they point
+                    // their own agent at is never missing from the section
+                    // they manage.
+                    visible={
+                      agentNetworkSurface &&
+                      (mySetupConfigured || hasAgentNetworkGrant)
+                    }
+                  />
                   <SidebarItem
                     label="Providers"
                     isChild
                     href={"/agent-network/providers"}
                     exactPathMatch={true}
-                    visible={agentNetworkEnabled && permission?.services?.read}
+                    visible={
+                      agentNetworkSurface &&
+                      permission?.["agent_network.providers"]?.read
+                    }
                   />
                   <SidebarItem
                     label="Policies"
                     isChild
                     href={"/agent-network/policies"}
                     exactPathMatch={true}
-                    visible={agentNetworkEnabled && permission?.services?.read}
+                    visible={
+                      agentNetworkSurface &&
+                      permission?.["agent_network.policies"]?.read
+                    }
                   />
                   <SidebarItem
                     label="Usage & Logs"
                     isChild
                     href={"/agent-network/usage"}
                     exactPathMatch={true}
-                    visible={agentNetworkEnabled && permission?.services?.read}
+                    // A configured self-service caller gets the page too:
+                    // the server scopes usage and logs to them.
+                    visible={
+                      agentNetworkSurface &&
+                      (permission?.["agent_network.usage"]?.read ||
+                        permission?.["agent_network.logs"]?.read ||
+                        mySetupConfigured)
+                    }
                   />
                   <SidebarItem
                     label="Configuration"
                     isChild
                     href={"/agent-network/configuration"}
                     exactPathMatch={true}
-                    visible={agentNetworkEnabled && permission?.services?.read}
+                    visible={
+                      agentNetworkSurface &&
+                      permission?.["agent_network.settings"]?.read
+                    }
                   />
                 </SidebarItem>
 
diff --git a/src/modules/agent-network/AIProviderModal.tsx b/src/modules/agent-network/AIProviderModal.tsx
index 1d13c3ac1..74953563d 100644
--- a/src/modules/agent-network/AIProviderModal.tsx
+++ b/src/modules/agent-network/AIProviderModal.tsx
@@ -39,6 +39,7 @@ import {
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
 import { useDialog } from "@/contexts/DialogProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import {
   ReverseProxyDomain,
   ReverseProxyDomainType,
@@ -187,12 +188,10 @@ export default function AIProviderModal({
     addProvider,
     updateProvider,
     settings,
+    settingsLoading,
     bootstrapAgentNetworkSettings,
   } = useAIProviders();
-  const { data: domains, isLoading: domainsLoading } = useFetchApi<
-    ReverseProxyDomain[]
-  >("/reverse-proxies/domains");
-  const { catalog: catalogList, getById } = useProviderCatalog();
+  const { permission } = usePermissions();
   const { confirm } = useDialog();
 
   const isEdit = !!provider;
@@ -202,6 +201,21 @@ export default function AIProviderModal({
   // settings proxy_address right before the first provider create.
   const settingsBootstrapped = !!settings;
 
+  // /reverse-proxies/domains is guarded by the Services module, which the
+  // delegated Agent Network roles don't hold — calling it for them only yields
+  // a 403. The list is needed for the one-time bootstrap cluster pick, so skip
+  // the request once the account is bootstrapped or the role can't read it.
+  const canReadDomains = !!permission.services?.read;
+  const { data: domains, isLoading: domainsLoading } = useFetchApi<
+    ReverseProxyDomain[]
+  >(
+    "/reverse-proxies/domains",
+    true,
+    true,
+    canReadDomains && !settingsBootstrapped && !settingsLoading,
+  );
+  const { catalog: catalogList, getById } = useProviderCatalog();
+
   const [tab, setTab] = useState<string>("provider");
   const [providerId, setProviderId] = useState<AIProviderId>(
     provider?.providerId ?? "openai_api",
@@ -323,8 +337,13 @@ export default function AIProviderModal({
       ),
     [domains],
   );
+  // Wait for both requests before claiming there is nothing to pick, otherwise
+  // the warning flashes while the settings row is still loading.
   const noClustersAvailable =
-    !settingsBootstrapped && !domainsLoading && validatedClusters.length === 0;
+    !settingsBootstrapped &&
+    !settingsLoading &&
+    !domainsLoading &&
+    validatedClusters.length === 0;
 
   // Auto-pick the first validated cluster on first render once the
   // /domains response lands. Only matters for the first-create flow —
@@ -752,13 +771,25 @@ export default function AIProviderModal({
                     />
                   }
                 >
-                  No active proxy clusters are available. Connect at least one
-                  proxy under
-                  <InlineLink href={"/reverse-proxy/services"}>
-                    {" "}
-                    Reverse Proxy
-                  </InlineLink>{" "}
-                  before adding a provider.
+                  {canReadDomains ? (
+                    <>
+                      No active proxy clusters are available. Connect at least
+                      one proxy under
+                      <InlineLink href={"/reverse-proxy/services"}>
+                        {" "}Reverse Proxy
+                      </InlineLink>
+                      {" "}before adding a provider.
+                    </>
+                  ) : (
+                    // Roles scoped to Agent Network can't read or connect
+                    // proxies, so point at who can instead of at a page they
+                    // have no access to.
+                    <>
+                      Agent Network isn&apos;t set up for this account yet. Ask
+                      an account admin to connect a proxy before adding a
+                      provider.
+                    </>
+                  )}
                 </Callout>
               )}
 
diff --git a/src/modules/agent-network/AIProvidersProvider.tsx b/src/modules/agent-network/AIProvidersProvider.tsx
index 68fdd14f2..8d7fe4003 100644
--- a/src/modules/agent-network/AIProvidersProvider.tsx
+++ b/src/modules/agent-network/AIProvidersProvider.tsx
@@ -21,7 +21,9 @@ import {
   PolicyLimits,
   ProviderModel,
 } from "@/modules/agent-network/data/mockData";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useAgentNetworkMode } from "@/modules/agent-network/useAgentNetworkMode";
+import { useMyAgentNetworkSetup } from "@/modules/agent-network/useMyAgentNetworkSetup";
 
 export type APIProviderModel = {
   id: string;
@@ -554,12 +556,13 @@ export function useAIProviders() {
 // three normalize to null here.
 export function useAgentNetworkSettings() {
   const { enabled: agentNetworkEnabled } = useAgentNetworkMode();
+  const { permission } = usePermissions();
   const { data, error, isLoading, mutate } =
     useFetchApi<APIAgentNetworkSettings>(
       "/agent-network/settings",
       true,
       true,
-      agentNetworkEnabled,
+      agentNetworkEnabled && !!permission?.["agent_network.settings"]?.read,
     );
   const notFound = !!error && (error as { code?: number }).code === 404;
   // SWR keeps the previous data alongside the error (keepPreviousData), so a
@@ -583,8 +586,17 @@ export default function AIProvidersProvider({ children }: Readonly<Props>) {
   // Gate every fetch on the feature flag so this provider is inert when
   // disabled — it can safely wrap surfaces like the Control Center
   // without hitting agent-network endpoints in deployments that don't
-  // have the feature.
+  // have the feature — and on the caller's read grant per submodule, so
+  // partially-granted roles (usage_viewer reads providers but no
+  // policies) don't fire requests that can only 403.
   const { enabled: agentNetworkEnabled } = useAgentNetworkMode();
+  const { permission } = usePermissions();
+  // Self-mode exception: the providers endpoint self-scopes on the server
+  // — a caller without the read grant gets the providers their own
+  // policies authorize (display surface only) — so a configured plain
+  // user fetches it too. That list feeds the provider filter on the
+  // self-scoped Usage & Logs view.
+  const { configured: mySetupConfigured } = useMyAgentNetworkSetup();
 
   const {
     data: apiProviders,
@@ -594,18 +606,29 @@ export default function AIProvidersProvider({ children }: Readonly<Props>) {
     "/agent-network/providers",
     false,
     true,
-    agentNetworkEnabled,
+    (agentNetworkEnabled && !!permission?.["agent_network.providers"]?.read) ||
+      mySetupConfigured,
   );
   const providersApi = useApiCall<APIProvider>("/agent-network/providers");
 
   const { data: apiPolicies, mutate: mutatePolicies } = useFetchApi<
     APIPolicy[]
-  >("/agent-network/policies", false, true, agentNetworkEnabled);
+  >(
+    "/agent-network/policies",
+    false,
+    true,
+    agentNetworkEnabled && !!permission?.["agent_network.policies"]?.read,
+  );
   const policiesApi = useApiCall<APIPolicy>("/agent-network/policies");
 
   const { data: apiGuardrails, mutate: mutateGuardrails } = useFetchApi<
     APIGuardrail[]
-  >("/agent-network/guardrails", false, true, agentNetworkEnabled);
+  >(
+    "/agent-network/guardrails",
+    false,
+    true,
+    agentNetworkEnabled && !!permission?.["agent_network.guardrails"]?.read,
+  );
   const guardrailsApi = useApiCall<APIGuardrail>("/agent-network/guardrails");
 
   const {
@@ -616,7 +639,7 @@ export default function AIProvidersProvider({ children }: Readonly<Props>) {
     "/agent-network/budget-rules",
     false,
     true,
-    agentNetworkEnabled,
+    agentNetworkEnabled && !!permission?.["agent_network.budgets"]?.read,
   );
   const budgetRulesApi = useApiCall<APIAgentBudgetRule>(
     "/agent-network/budget-rules",
@@ -709,7 +732,7 @@ export default function AIProvidersProvider({ children }: Readonly<Props>) {
           updates.metadataDisabled ?? existing.metadata_disabled,
         models: updates.models
           ? toAPIModels(updates.models)
-          : (existing.models ?? []),
+          : existing.models ?? [],
         enabled: updates.enabled ?? existing.enabled,
       };
       try {
@@ -794,7 +817,7 @@ export default function AIProvidersProvider({ children }: Readonly<Props>) {
         guardrail_ids: updates.guardrailIds ?? existing.guardrail_ids ?? [],
         limits: updates.limits
           ? policyLimitsToAPI(updates.limits)
-          : (existing.limits ?? policyLimitsToAPI(EMPTY_POLICY_LIMITS)),
+          : existing.limits ?? policyLimitsToAPI(EMPTY_POLICY_LIMITS),
       };
       try {
         await policiesApi.put(merged, `/${id}`);
diff --git a/src/modules/agent-network/AccessLogFilters.tsx b/src/modules/agent-network/AccessLogFilters.tsx
index e0a413b42..f9f4fb793 100644
--- a/src/modules/agent-network/AccessLogFilters.tsx
+++ b/src/modules/agent-network/AccessLogFilters.tsx
@@ -46,12 +46,24 @@ export function formatDateChip(value: DateRange | undefined): string | null {
   return `${from} – ${to}`;
 }
 
+export type AccessLogFilterId =
+  | "date"
+  | "user"
+  | "group"
+  | "provider"
+  | "model";
+
 // useAccessLogFilters builds the shared Date / User / Group / Provider / Model
 // filter controls (same UX as the Peers views). It returns the raw
 // columnFilters state (so callers can translate it into server-side query
 // params) plus the Filters button and chips for a standalone bar. The Date
 // filter defaults to the last 14 days; resetting returns to that default.
-export function useAccessLogFilters() {
+// Callers whose view is server-scoped to themselves pass include to keep
+// only the filters that still mean something (e.g. just "date").
+export function useAccessLogFilters(options?: {
+  include?: AccessLogFilterId[];
+}) {
+  const include = options?.include;
   const { providers } = useAIProviders();
   const { users } = useUsers();
   const { groups } = useGroups();
@@ -119,7 +131,7 @@ export function useAccessLogFilters() {
       .map((m) => ({ value: m, label: m }));
   }, [providers]);
 
-  const filterDefs = useMemo<TableFilterDef[]>(
+  const allFilterDefs = useMemo<TableFilterDef[]>(
     () => [
       {
         id: "date",
@@ -197,6 +209,16 @@ export function useAccessLogFilters() {
     [userOptions, groups, providerOptions, modelOptions],
   );
 
+  const filterDefs = useMemo<TableFilterDef[]>(
+    () =>
+      include
+        ? allFilterDefs.filter((d) =>
+            include.includes(d.id as AccessLogFilterId),
+          )
+        : allFilterDefs,
+    [allFilterDefs, include],
+  );
+
   const filtersButton = (
     <TableFiltersButton table={filterTable} filters={filterDefs} />
   );
diff --git a/src/modules/agent-network/AgentAccessLogTable.tsx b/src/modules/agent-network/AgentAccessLogTable.tsx
index 23af8d04a..a8192db4f 100644
--- a/src/modules/agent-network/AgentAccessLogTable.tsx
+++ b/src/modules/agent-network/AgentAccessLogTable.tsx
@@ -68,6 +68,16 @@ import {
   APIAgentNetworkAccessLogSession,
 } from "@/modules/agent-network/agentAccessLogApi";
 import { useAIProviders } from "@/modules/agent-network/AIProvidersProvider";
+
+// Self-scoped callers keep the non-identity filters: the server pins
+// user/group to the caller regardless, while the provider and model
+// options come from the self-scoped providers list.
+const SELF_SCOPED_LOG_FILTER_IDS = new Set([
+  "timestamp",
+  "path",
+  "provider",
+  "model",
+]);
 import AIProviderLogo from "@/modules/agent-network/AIProviderLogo";
 import { useProviderCatalog } from "@/modules/agent-network/useProviderCatalog";
 import AgentAccessLogExpandedRow from "@/modules/agent-network/AgentAccessLogExpandedRow";
@@ -81,6 +91,11 @@ type Props = {
   // per-request rows. The owning page swaps the data endpoint to match.
   grouped?: boolean;
   onGroupedChange?: (value: boolean) => void;
+  // The server answers with the caller's own requests only (no
+  // agent_network.logs grant), so the identity and provider filters —
+  // which need permissions the caller doesn't hold and would be
+  // overridden anyway — are dropped; Date and Path stay.
+  selfScoped?: boolean;
 };
 
 // csvToArray splits a comma-separated filter value (the form the
@@ -93,6 +108,7 @@ export default function AgentAccessLogTable({
   headingTarget,
   grouped = false,
   onGroupedChange,
+  selfScoped = false,
 }: Readonly<Props>) {
   const { providers } = useAIProviders();
   const { catalog } = useProviderCatalog();
@@ -293,9 +309,7 @@ export default function AgentAccessLogTable({
           <div className={"flex items-center gap-3"}>
             <StatusCell entry={row.original} />
             <span
-              className={
-                "text-nb-gray-300 text-[0.82rem] px-3 py-2 font-mono"
-              }
+              className={"text-nb-gray-300 text-[0.82rem] px-3 py-2 font-mono"}
             >
               {formatDuration(row.original.durationMs)}
             </span>
@@ -523,7 +537,7 @@ export default function AgentAccessLogTable({
       .map((m) => ({ value: m, label: m }));
   }, [providers]);
 
-  const filterDefs = useMemo<TableFilterDef[]>(
+  const allFilterDefs = useMemo<TableFilterDef[]>(
     () => [
       {
         // Backed by the real "timestamp" column so the shared filter adapter can
@@ -661,6 +675,14 @@ export default function AgentAccessLogTable({
     ],
   );
 
+  const filterDefs = useMemo<TableFilterDef[]>(
+    () =>
+      selfScoped
+        ? allFilterDefs.filter((d) => SELF_SCOPED_LOG_FILTER_IDS.has(d.id))
+        : allFilterDefs,
+    [allFilterDefs, selfScoped],
+  );
+
   // Seed the DataTable's column-filter chips from the active server query so a
   // shared/deep link or a remount shows the chips that match what's fetched.
   const initialColumnFilters = useMemo<{ id: string; value: unknown }[]>(() => {
@@ -749,12 +771,15 @@ export default function AgentAccessLogTable({
           }
           title={"No Access Log Entries Yet"}
           description={
-            "No agent-network requests detected yet. This may be because no AI providers are connected, policies don’t allow traffic to them, log collection is disabled, or no traffic has occurred."
+            "No agent network requests yet. Check that providers are connected, policies allow traffic, and log collection is on."
           }
           learnMore={
             <>
               Learn more about
-              <InlineLink href={"https://docs.netbird.io/"} target={"_blank"}>
+              <InlineLink
+                href={"https://docs.netbird.io/agent-network"}
+                target={"_blank"}
+              >
                 Agent Network
                 <ExternalLinkIcon size={12} />
               </InlineLink>
@@ -1192,7 +1217,8 @@ type CostFields = {
 // Cost cell and the session rows attach the tooltip on the same condition.
 function hasCostBreakdown(f: CostFields): boolean {
   const cache = f.cacheCostUsd ?? 0;
-  const perBucket = f.inputCostUsd !== undefined || f.outputCostUsd !== undefined;
+  const perBucket =
+    f.inputCostUsd !== undefined || f.outputCostUsd !== undefined;
   return cache > 0 || perBucket;
 }
 
diff --git a/src/modules/agent-network/AgentBudgetRuleModal.tsx b/src/modules/agent-network/AgentBudgetRuleModal.tsx
index b8ae5ebb8..a4f78449c 100644
--- a/src/modules/agent-network/AgentBudgetRuleModal.tsx
+++ b/src/modules/agent-network/AgentBudgetRuleModal.tsx
@@ -258,7 +258,10 @@ function AgentBudgetRuleModalContent({
         <div className={"w-full"}>
           <Paragraph className={"text-sm mt-auto"}>
             Learn more about
-            <InlineLink href={"https://docs.netbird.io/"} target={"_blank"}>
+            <InlineLink
+              href={"https://docs.netbird.io/agent-network"}
+              target={"_blank"}
+            >
               Agent Network
               <ExternalLinkIcon size={12} />
             </InlineLink>
diff --git a/src/modules/agent-network/AgentBudgetRulesTable.tsx b/src/modules/agent-network/AgentBudgetRulesTable.tsx
index fef25e51e..ec6969917 100644
--- a/src/modules/agent-network/AgentBudgetRulesTable.tsx
+++ b/src/modules/agent-network/AgentBudgetRulesTable.tsx
@@ -460,7 +460,10 @@ export default function AgentBudgetRulesTable() {
             learnMore={
               <>
                 Learn more about
-                <InlineLink href={"https://docs.netbird.io/"} target={"_blank"}>
+                <InlineLink
+                  href={"https://docs.netbird.io/agent-network"}
+                  target={"_blank"}
+                >
                   Agent Network
                   <ExternalLinkIcon size={12} />
                 </InlineLink>
diff --git a/src/modules/agent-network/AgentConnectModal.tsx b/src/modules/agent-network/AgentConnectTabs.tsx
similarity index 86%
rename from src/modules/agent-network/AgentConnectModal.tsx
rename to src/modules/agent-network/AgentConnectTabs.tsx
index 42b01a7c4..ba1cb3844 100644
--- a/src/modules/agent-network/AgentConnectModal.tsx
+++ b/src/modules/agent-network/AgentConnectTabs.tsx
@@ -1,26 +1,14 @@
 "use client";
 
 import Code from "@components/Code";
-import { Modal, ModalContent } from "@components/modal/Modal";
-import { useAIProviders } from "@/modules/agent-network/AIProvidersProvider";
-import Paragraph from "@components/Paragraph";
-import SmallParagraph from "@components/SmallParagraph";
-import SquareIcon from "@components/SquareIcon";
 import { SelectDropdown } from "@components/select/SelectDropdown";
+import SmallParagraph from "@components/SmallParagraph";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
-import { Plug } from "lucide-react";
 import * as React from "react";
 
-type Props = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  // Bare endpoint host, e.g. "sailcloth.eu.proxy.netbird.io".
-  endpoint: string;
-};
-
 // Snippet renders a copyable Code block from a list of lines, with an optional
 // caption above it. Wrapped in min-w-0 so its scroll area handles long lines
-// instead of widening the modal. By default the displayed lines are what gets
+// instead of widening its container. By default the displayed lines are what gets
 // copied (joined with newlines); pass copyText to copy something different —
 // e.g. show a curl command across multiple lines but copy it as one line.
 function Snippet({
@@ -48,18 +36,22 @@ function Snippet({
 }
 
 // AgentConnectTabs renders the per-tool connect snippets (Claude Code, Codex,
-// OpenAI SDK, cURL) for a given endpoint. Extracted so it can be shown both
-// inside AgentConnectModal and inline in the onboarding "Configure your agent"
+// OpenAI SDK, cURL) for a given endpoint. Rendered inline wherever the config
+// belongs — the Connect Agent page and the onboarding "Configure your agent"
 // step. listClassName / contentClassName let the caller tune horizontal
-// padding — the modal indents to its gutter, the inline card uses none.
+// padding, since each host sits in a different gutter.
 export function AgentConnectTabs({
   endpoint,
+  className = "mt-2",
   listClassName = "px-8",
   contentClassName = "px-6 py-2",
   defaultTab = "claude-code",
   providerIds = [],
 }: {
   endpoint: string;
+  // Spacing above the tab strip, so each host can set the gap its own layout
+  // calls for.
+  className?: string;
   listClassName?: string;
   contentClassName?: string;
   // Which tab opens first. Callers that know the connected provider pass the
@@ -94,7 +86,7 @@ export function AgentConnectTabs({
   >(kimiOnlyAnthropicShape ? "kimi" : "anthropic");
 
   return (
-    <Tabs key={defaultTab} defaultValue={defaultTab} className={"mt-2"}>
+    <Tabs key={defaultTab} defaultValue={defaultTab} className={className}>
       <TabsList justify={"start"} className={listClassName}>
         <TabsTrigger value={"claude-code"}>Claude Code</TabsTrigger>
         <TabsTrigger value={"codex"}>Codex</TabsTrigger>
@@ -190,7 +182,6 @@ export function AgentConnectTabs({
               lines={[
                 `{`,
                 `  "env": {`,
-                `    "ANTHROPIC_MODEL": "<your-bedrock-model-id>",`,
                 `    "ANTHROPIC_BEDROCK_BASE_URL": "${baseUrl}/bedrock",`,
                 `    "CLAUDE_CODE_USE_BEDROCK": "1",`,
                 `    "CLAUDE_CODE_SKIP_BEDROCK_AUTH": "1"`,
@@ -314,8 +305,14 @@ export function AgentConnectTabs({
             Pairs with a Kimi provider keeping the default upstream URL{" "}
             <code className={"font-mono"}>https://api.moonshot.ai</code>. For
             the OpenAI shape instead, use{" "}
-            <code className={"font-mono"}>type = &quot;openai_legacy&quot;</code>{" "}
-            with <code className={"font-mono"}>base_url = &quot;{openaiBase}&quot;</code>.
+            <code className={"font-mono"}>
+              type = &quot;openai_legacy&quot;
+            </code>{" "}
+            with{" "}
+            <code className={"font-mono"}>
+              base_url = &quot;{openaiBase}&quot;
+            </code>
+            .
           </SmallParagraph>
         </div>
       </TabsContent>
@@ -362,35 +359,3 @@ export function AgentConnectTabs({
     </Tabs>
   );
 }
-
-export default function AgentConnectModal({
-  open,
-  onOpenChange,
-  endpoint,
-}: Readonly<Props>) {
-  // Rendered inside <AIProvidersProvider> (providers page); the connected
-  // provider ids gate which per-tool config variants the tabs offer.
-  const { providers } = useAIProviders();
-  return (
-    <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent maxWidthClass={"max-w-2xl"}>
-        <div className={"px-8 pt-5"}>
-          <div className={"flex items-center gap-3"}>
-            <SquareIcon color={"netbird"} margin={""} icon={<Plug size={16} />} />
-            <h2 className={"text-lg my-0 leading-[1.5]"}>Configure Your Agent</h2>
-          </div>
-          <Paragraph className={"text-sm mt-3"}>
-            Point your agent at the NetBird endpoint as its base URL. No provider
-            API key is needed on the client. NetBird authorizes the request
-            against your policies and injects the upstream key.
-          </Paragraph>
-        </div>
-
-        <AgentConnectTabs
-          endpoint={endpoint}
-          providerIds={providers.map((p) => p.providerId)}
-        />
-      </ModalContent>
-    </Modal>
-  );
-}
diff --git a/src/modules/agent-network/AgentGuardrailModal.tsx b/src/modules/agent-network/AgentGuardrailModal.tsx
index e5adbfcff..aef925ae1 100644
--- a/src/modules/agent-network/AgentGuardrailModal.tsx
+++ b/src/modules/agent-network/AgentGuardrailModal.tsx
@@ -182,7 +182,10 @@ export default function AgentGuardrailModal({
           <div className={"w-full"}>
             <Paragraph className={"text-sm mt-auto"}>
               Learn more about
-              <InlineLink href={"https://docs.netbird.io/"} target={"_blank"}>
+              <InlineLink
+                href={"https://docs.netbird.io/agent-network"}
+                target={"_blank"}
+              >
                 Agent Network
                 <ExternalLinkIcon size={12} />
               </InlineLink>
@@ -352,7 +355,12 @@ function ModelAllowlistContent({
         <div className={"w-full"}>
           <Paragraph className={"text-sm mt-auto"}>
             Learn more about
-            <InlineLink href={"https://docs.netbird.io/"} target={"_blank"}>
+            <InlineLink
+              href={
+                "https://docs.netbird.io/agent-network/policies/guardrails#model-allowlist"
+              }
+              target={"_blank"}
+            >
               Model Allowlist
               <ExternalLinkIcon size={12} />
             </InlineLink>
@@ -422,7 +430,12 @@ function PromptCaptureContent({ onConfirm }: { onConfirm: () => void }) {
         <div className={"w-full"}>
           <Paragraph className={"text-sm mt-auto"}>
             Learn more about
-            <InlineLink href={"https://docs.netbird.io/"} target={"_blank"}>
+            <InlineLink
+              href={
+                "https://docs.netbird.io/agent-network/policies/guardrails#prompt-capture"
+              }
+              target={"_blank"}
+            >
               Prompt Capture
               <ExternalLinkIcon size={12} />
             </InlineLink>
diff --git a/src/modules/agent-network/AgentOverviewPanel.tsx b/src/modules/agent-network/AgentOverviewPanel.tsx
index f6f26aec3..378be19d0 100644
--- a/src/modules/agent-network/AgentOverviewPanel.tsx
+++ b/src/modules/agent-network/AgentOverviewPanel.tsx
@@ -26,7 +26,10 @@ import { Bar } from "react-chartjs-2";
 import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { useUsers } from "@/contexts/UsersProvider";
-import { useAccessLogFilters } from "@/modules/agent-network/AccessLogFilters";
+import {
+  AccessLogFilterId,
+  useAccessLogFilters,
+} from "@/modules/agent-network/AccessLogFilters";
 import {
   APIAgentNetworkUsageBucket,
   buildUsageOverviewQuery,
@@ -62,11 +65,23 @@ type DayBucket = {
 // chart with a Tokens / Cost switch, and a standard data table of the same
 // per-day buckets underneath. Data comes pre-aggregated from the server's
 // /agent-network/usage/overview endpoint (day granularity); the shared filter
-// bar (Date / User / Group / Provider / Model) drives the query.
-export default function AgentOverviewPanel() {
+// bar (Date / User / Group / Provider / Model) drives the query. With
+// selfScoped the server answers with the caller's own rows only, so the
+// identity filters (which the server overrides anyway) are dropped —
+// Date, Provider, and Model stay: the providers endpoint self-scopes too,
+// so the caller's own authorized providers back those options.
+const SELF_SCOPED_FILTERS = {
+  include: ["date", "provider", "model"] as AccessLogFilterId[],
+};
+
+export default function AgentOverviewPanel({
+  selfScoped = false,
+}: {
+  selfScoped?: boolean;
+} = {}) {
   const [metric, setMetric] = useState<Metric>("tokens");
   const { columnFilters, filtersButton, filterChips, resetButton } =
-    useAccessLogFilters();
+    useAccessLogFilters(selfScoped ? SELF_SCOPED_FILTERS : undefined);
   const { groups } = useGroups();
   const { users } = useUsers();
   const { enabled: agentNetworkEnabled } = useAgentNetworkMode();
@@ -93,11 +108,13 @@ export default function AgentOverviewPanel() {
     [columnFilters, groupIdByName, userIdByEmail],
   );
 
+  // Self-scoped callers can't always resolve the feature flag (it needs
+  // accounts read); reaching this panel configured is proof enough.
   const { data: buckets } = useFetchApi<APIAgentNetworkUsageBucket[]>(
     `/agent-network/usage/overview?${query}`,
     false,
     true,
-    agentNetworkEnabled,
+    agentNetworkEnabled || selfScoped,
   );
 
   const daily = useMemo(() => toDailyBuckets(buckets ?? []), [buckets]);
@@ -365,7 +382,10 @@ function DailyBreakdownTable({ daily }: { daily: DayBucket[] }) {
           learnMore={
             <>
               Learn more about
-              <InlineLink href={"https://docs.netbird.io/"} target={"_blank"}>
+              <InlineLink
+                href={"https://docs.netbird.io/agent-network"}
+                target={"_blank"}
+              >
                 Agent Network
                 <ExternalLinkIcon size={12} />
               </InlineLink>
diff --git a/src/modules/agent-network/AgentPoliciesTable.tsx b/src/modules/agent-network/AgentPoliciesTable.tsx
index 657e9bd91..61d6fef66 100644
--- a/src/modules/agent-network/AgentPoliciesTable.tsx
+++ b/src/modules/agent-network/AgentPoliciesTable.tsx
@@ -2,7 +2,6 @@
 
 import Badge from "@components/Badge";
 import Button from "@components/Button";
-import FullTooltip from "@components/FullTooltip";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,6 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@components/DropdownMenu";
+import FullTooltip from "@components/FullTooltip";
 import InlineLink from "@components/InlineLink";
 import SquareIcon from "@components/SquareIcon";
 import { DataTable } from "@components/table/DataTable";
@@ -50,17 +50,18 @@ import { useDialog } from "@/contexts/DialogProvider";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { Group } from "@/interfaces/Group";
-import EmptyRow from "@/modules/common-table-rows/EmptyRow";
-import ActiveInactiveRow from "@/modules/common-table-rows/ActiveInactiveRow";
+import AgentPolicyModal from "@/modules/agent-network/AgentPolicyModal";
+import AIProviderLogo from "@/modules/agent-network/AIProviderLogo";
+import { useAIProviders } from "@/modules/agent-network/AIProvidersProvider";
 import {
+  AgentGuardrail,
   AgentPolicy,
   MOCK_GROUPS,
   PolicyBudgetLimit,
   PolicyTokenLimit,
 } from "@/modules/agent-network/data/mockData";
-import { useAIProviders } from "@/modules/agent-network/AIProvidersProvider";
-import AIProviderLogo from "@/modules/agent-network/AIProviderLogo";
-import AgentPolicyModal from "@/modules/agent-network/AgentPolicyModal";
+import ActiveInactiveRow from "@/modules/common-table-rows/ActiveInactiveRow";
+import EmptyRow from "@/modules/common-table-rows/EmptyRow";
 
 function NameCell({ policy }: { policy: AgentPolicy }) {
   return (
@@ -133,6 +134,98 @@ function ProviderCell({ policy }: { policy: AgentPolicy }) {
   );
 }
 
+// A policy restricts models only through the guardrails attached to it: each
+// guardrail with an enabled model_allowlist narrows the policy to the models
+// it names, and a policy whose guardrails carry none can call every model the
+// destination providers offer.
+function allowlistModels(
+  policy: AgentPolicy,
+  guardrails: AgentGuardrail[],
+): string[] {
+  const models = policy.guardrailIds
+    .map((id) => guardrails.find((g) => g.id === id))
+    .filter((g): g is AgentGuardrail => Boolean(g))
+    .filter((g) => g.checks.model_allowlist.enabled)
+    .flatMap((g) => g.checks.model_allowlist.models);
+  return Array.from(new Set(models));
+}
+
+// How many models the tooltip spells out before it just counts the rest.
+const TOOLTIP_MODELS = 10;
+
+function ModelsCell({
+  policy,
+  onClickAdd,
+}: {
+  policy: AgentPolicy;
+  onClickAdd: () => void;
+}) {
+  const { guardrails } = useAIProviders();
+  const models = allowlistModels(policy, guardrails);
+
+  // No enabled allowlist means every model the providers offer is callable;
+  // the way to narrow it is a guardrail, so the badge opens that tab.
+  if (models.length === 0) {
+    return (
+      <div className={"flex"}>
+        <Badge
+          variant={"gray"}
+          useHover={true}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClickAdd();
+          }}
+        >
+          <IconCirclePlus size={14} />
+          Restrict
+        </Badge>
+      </div>
+    );
+  }
+
+  // A single model fits in the cell; past that only the count does, with the
+  // names on hover.
+  if (models.length === 1) {
+    return (
+      <div className={"flex"}>
+        <Badge
+          variant={"gray-ghost"}
+          className={"transition-all whitespace-nowrap"}
+        >
+          {models[0]}
+        </Badge>
+      </div>
+    );
+  }
+
+  const listed = models.slice(0, TOOLTIP_MODELS);
+  const rest = models.length - listed.length;
+
+  return (
+    <div className={"flex"}>
+      <FullTooltip
+        content={
+          <div className={"text-xs space-y-0.5"}>
+            <div className={"font-semibold"}>Model allowlist</div>
+            {listed.map((model) => (
+              <div key={model}>· {model}</div>
+            ))}
+            {rest > 0 && <div>· and {rest} more</div>}
+          </div>
+        }
+      >
+        <Badge
+          variant={"gray-ghost"}
+          useHover={true}
+          className={"px-3 gap-2 whitespace-nowrap"}
+        >
+          {models.length} Models
+        </Badge>
+      </FullTooltip>
+    </div>
+  );
+}
+
 function LimitsCell({
   policy,
   onClickAdd,
@@ -312,7 +405,7 @@ export default function AgentPoliciesTable({ headingTarget }: Readonly<Props>) {
   // Deep-link: the access log links here with ?search=<policy name> so the
   // table opens pre-filtered to that policy.
   const initialSearch = searchParams.get("search") ?? undefined;
-  const { policies, isLoading, providers } = useAIProviders();
+  const { policies, isLoading, providers, guardrails } = useAIProviders();
   const { groups: realGroups } = useGroups();
 
   const [sorting, setSorting] = useLocalStorage<SortingState>(
@@ -409,6 +502,20 @@ export default function AgentPoliciesTable({ headingTarget }: Readonly<Props>) {
       ),
       cell: ({ row }) => <ProviderCell policy={row.original} />,
     },
+    {
+      id: "models",
+      accessorFn: (p) => allowlistModels(p, guardrails).length,
+      sortingFn: "basic",
+      header: ({ column }) => (
+        <DataTableHeader column={column}>Models</DataTableHeader>
+      ),
+      cell: ({ row }) => (
+        <ModelsCell
+          policy={row.original}
+          onClickAdd={() => openEdit(row.original, "guardrails")}
+        />
+      ),
+    },
     // Hidden filter-only columns powering the consolidated Filters UI.
     {
       id: "source_group_names",
@@ -477,7 +584,11 @@ export default function AgentPoliciesTable({ headingTarget }: Readonly<Props>) {
         data={policies}
         initialSearch={initialSearch}
         searchPlaceholder={"Search by name or description..."}
-        onRowClick={(row) => openEdit(row.original)}
+        // Clicking the Models cell lands on the tab that actually owns the
+        // model allowlist — the guardrails attached to the policy.
+        onRowClick={(row, cell) =>
+          openEdit(row.original, cell === "models" ? "guardrails" : undefined)
+        }
         getStartedCard={
           <GetStartedTest
             icon={
@@ -508,7 +619,10 @@ export default function AgentPoliciesTable({ headingTarget }: Readonly<Props>) {
             learnMore={
               <>
                 Learn more about
-                <InlineLink href={"https://docs.netbird.io/"} target={"_blank"}>
+                <InlineLink
+                  href={"https://docs.netbird.io/agent-network"}
+                  target={"_blank"}
+                >
                   Agent Network
                   <ExternalLinkIcon size={12} />
                 </InlineLink>
diff --git a/src/modules/agent-network/AgentPolicyModal.tsx b/src/modules/agent-network/AgentPolicyModal.tsx
index 6f7f79c10..aaac44a0d 100644
--- a/src/modules/agent-network/AgentPolicyModal.tsx
+++ b/src/modules/agent-network/AgentPolicyModal.tsx
@@ -335,7 +335,10 @@ function AgentPolicyModalContent({
         <div className={"w-full"}>
           <Paragraph className={"text-sm mt-auto"}>
             Learn more about
-            <InlineLink href={"https://docs.netbird.io/"} target={"_blank"}>
+            <InlineLink
+              href={"https://docs.netbird.io/agent-network"}
+              target={"_blank"}
+            >
               Agent Network
               <ExternalLinkIcon size={12} />
             </InlineLink>
diff --git a/src/modules/agent-network/EndpointBadge.tsx b/src/modules/agent-network/EndpointBadge.tsx
new file mode 100644
index 000000000..a19e6ceab
--- /dev/null
+++ b/src/modules/agent-network/EndpointBadge.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { HelpTooltip } from "@components/HelpTooltip";
+import useCopyToClipboard from "@hooks/useCopyToClipboard";
+import { Copy } from "lucide-react";
+import React from "react";
+
+// EndpointBadge is the "API Base URL" card — the one presentation of the
+// endpoint everywhere it appears (providers page, Connect Agent). It shows the
+// URL and copies it; the per-tool config that goes with it lives inline on the
+// Connect Agent page, which is the only place it belongs.
+export default function EndpointBadge({
+  endpoint,
+}: {
+  // Bare endpoint host, e.g. "sailcloth.eu.proxy.netbird.io".
+  endpoint: string;
+}) {
+  const [, copy] = useCopyToClipboard(`https://${endpoint}`);
+  return (
+    <div
+      className={
+        "inline-flex items-center gap-3 rounded-lg border border-nb-gray-800 bg-nb-gray-900/40 p-3 min-w-[300px]"
+      }
+    >
+      <div className={"flex flex-col"}>
+        <div
+          className={
+            "text-[10px] text-nb-gray-400 uppercase tracking-wider font-medium inline-flex items-center gap-1.5"
+          }
+        >
+          API Base URL
+          <HelpTooltip
+            iconSize={11}
+            content={
+              <>
+                Use this URL as the base URL when configuring your AI agents or
+                LLM SDK clients (e.g. OpenAI&apos;s
+                <code className={"font-mono"}> base_url</code>, Anthropic&apos;s{" "}
+                <code className={"font-mono"}>baseURL</code>, or any HTTP
+                client). Calls hit NetBird first, get authorised by your
+                policies, and only then reach the upstream provider.
+              </>
+            }
+          />
+        </div>
+        <code
+          className={
+            "font-mono text-xs text-nb-gray-100 leading-tight mt-0.5 whitespace-nowrap"
+          }
+        >
+          https://{endpoint}
+        </code>
+      </div>
+      <button
+        type={"button"}
+        className={
+          "inline-flex items-center gap-1.5 rounded-md border border-nb-gray-700 bg-nb-gray-800/60 px-2.5 py-1.5 text-[11px] font-medium text-nb-gray-200 hover:bg-nb-gray-800 hover:text-white transition-colors shrink-0"
+        }
+        onClick={() => copy("Endpoint copied to clipboard")}
+        aria-label={"Copy endpoint"}
+      >
+        <Copy size={12} />
+        Copy
+      </button>
+    </div>
+  );
+}
diff --git a/src/modules/agent-network/table/AgentProviderActionCell.tsx b/src/modules/agent-network/table/AgentProviderActionCell.tsx
index d0a3925a9..5f5bf3983 100644
--- a/src/modules/agent-network/table/AgentProviderActionCell.tsx
+++ b/src/modules/agent-network/table/AgentProviderActionCell.tsx
@@ -10,6 +10,7 @@ import FullTooltip from "@components/FullTooltip";
 import { MoreVertical, Power, Trash2 } from "lucide-react";
 import * as React from "react";
 import { useDialog } from "@/contexts/DialogProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import { AIProvider } from "@/modules/agent-network/data/mockData";
 import { useAIProviders } from "@/modules/agent-network/AIProvidersProvider";
 
@@ -20,6 +21,11 @@ type Props = {
 export default function AgentProviderActionCell({ provider }: Readonly<Props>) {
   const { confirm } = useDialog();
   const { policies, toggleProvider, deleteProvider } = useAIProviders();
+  // Each menu item maps to its own operation grant; read-only viewers
+  // (usage_viewer) get no menu at all instead of actions that can only 403.
+  const { permission } = usePermissions();
+  const canUpdate = !!permission?.["agent_network.providers"]?.update;
+  const canDelete = !!permission?.["agent_network.providers"]?.delete;
 
   const referencingPolicies = policies.filter((p) =>
     p.destinationProviderIds.includes(provider.id),
@@ -39,6 +45,8 @@ export default function AgentProviderActionCell({ provider }: Readonly<Props>) {
     await deleteProvider(provider.id);
   };
 
+  if (!canUpdate && !canDelete) return null;
+
   return (
     <div className={"flex justify-end pr-4"}>
       <DropdownMenu modal={false}>
@@ -54,45 +62,49 @@ export default function AgentProviderActionCell({ provider }: Readonly<Props>) {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className={"w-auto"} align={"end"}>
-          <DropdownMenuItem onClick={() => toggleProvider(provider.id)}>
-            <div className={"flex gap-3 items-center"}>
-              <Power size={14} className={"shrink-0"} />
-              {provider.enabled ? "Disable" : "Enable"}
-            </div>
-          </DropdownMenuItem>
-
-          <DropdownMenuSeparator />
-
-          <FullTooltip
-            disabled={!inUse}
-            interactive={false}
-            content={
-              <div className={"text-xs max-w-xs"}>
-                This provider is referenced by{" "}
-                {referencingPolicies.length === 1
-                  ? "1 policy"
-                  : `${referencingPolicies.length} policies`}{" "}
-                and cannot be deleted. Detach it from the policy first.
-              </div>
-            }
-          >
-            <DropdownMenuItem
-              onClick={(e) => {
-                if (inUse) {
-                  e.preventDefault();
-                  return;
-                }
-                handleDelete();
-              }}
-              variant={"danger"}
-              disabled={inUse}
-            >
+          {canUpdate && (
+            <DropdownMenuItem onClick={() => toggleProvider(provider.id)}>
               <div className={"flex gap-3 items-center"}>
-                <Trash2 size={14} className={"shrink-0"} />
-                Delete
+                <Power size={14} className={"shrink-0"} />
+                {provider.enabled ? "Disable" : "Enable"}
               </div>
             </DropdownMenuItem>
-          </FullTooltip>
+          )}
+
+          {canUpdate && canDelete && <DropdownMenuSeparator />}
+
+          {canDelete && (
+            <FullTooltip
+              disabled={!inUse}
+              interactive={false}
+              content={
+                <div className={"text-xs max-w-xs"}>
+                  This provider is referenced by{" "}
+                  {referencingPolicies.length === 1
+                    ? "1 policy"
+                    : `${referencingPolicies.length} policies`}{" "}
+                  and cannot be deleted. Detach it from the policy first.
+                </div>
+              }
+            >
+              <DropdownMenuItem
+                onClick={(e) => {
+                  if (inUse) {
+                    e.preventDefault();
+                    return;
+                  }
+                  handleDelete();
+                }}
+                variant={"danger"}
+                disabled={inUse}
+              >
+                <div className={"flex gap-3 items-center"}>
+                  <Trash2 size={14} className={"shrink-0"} />
+                  Delete
+                </div>
+              </DropdownMenuItem>
+            </FullTooltip>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
diff --git a/src/modules/agent-network/table/AgentProvidersTable.tsx b/src/modules/agent-network/table/AgentProvidersTable.tsx
index b553d5781..6aadc801f 100644
--- a/src/modules/agent-network/table/AgentProvidersTable.tsx
+++ b/src/modules/agent-network/table/AgentProvidersTable.tsx
@@ -13,6 +13,7 @@ import { ExternalLinkIcon, PlusCircle } from "lucide-react";
 import { usePathname } from "next/navigation";
 import React, { useState } from "react";
 import AIAccessIcon from "@/assets/icons/AgentNetworkIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { AIProvider } from "@/modules/agent-network/data/mockData";
 import { useAIProviders } from "@/modules/agent-network/AIProvidersProvider";
@@ -57,7 +58,9 @@ function NameCell({ provider }: { provider: AIProvider }) {
         </p>
         <DescriptionWithTooltip
           className={"text-left mt-0.5"}
-          text={`${catalog?.name ?? provider.providerId} · ${provider.upstreamUrl}`}
+          text={`${catalog?.name ?? provider.providerId} · ${
+            provider.upstreamUrl
+          }`}
           maxChars={40}
         />
       </div>
@@ -67,11 +70,11 @@ function NameCell({ provider }: { provider: AIProvider }) {
 
 function ModelsCell({ provider }: { provider: AIProvider }) {
   if (provider.models.length === 0) {
-    return <span className={"text-xs text-nb-gray-400"}>All models</span>;
+    return <span className={"text-xs text-nb-gray-400"}>All Models</span>;
   }
   return (
     <span className={"text-xs text-nb-gray-300"}>
-      {provider.models.length} configured
+      {provider.models.length} Models
     </span>
   );
 }
@@ -112,6 +115,11 @@ export default function AgentProvidersTable({
 }: Readonly<Props>) {
   const path = usePathname();
   const { providers, isLoading } = useAIProviders();
+  // Read-only viewers (usage_viewer) see the list but no write flows: the
+  // edit modal needs update, and opening it would also mislead them with
+  // the bootstrap warning since they can't read the settings row.
+  const { permission } = usePermissions();
+  const canUpdate = !!permission?.["agent_network.providers"]?.update;
 
   const [sorting, setSorting] = useLocalStorage<SortingState>(
     "netbird-table-sort" + path,
@@ -136,65 +144,73 @@ export default function AgentProvidersTable({
         />
       )}
       <DataTable
-      headingTarget={headingTarget}
-      isLoading={isLoading}
-      text={"Providers"}
-      sorting={sorting}
-      setSorting={setSorting}
-      columns={columns}
-      data={providers}
-      searchPlaceholder={"Search by name..."}
-      onRowClick={(row) => {
-        setEditingProvider(row.original);
-        setEditOpen(true);
-      }}
-      getStartedCard={
-        <GetStartedTest
-          icon={
-            <SquareIcon
-              icon={<AIAccessIcon className={"fill-nb-gray-200"} size={20} />}
-              color={"gray"}
-              size={"large"}
-            />
-          }
-          title={"Connect a provider"}
-          description={
-            "Route OpenAI, Anthropic, and other LLM APIs through NetBird to enforce access control, track token spend, and capture prompts."
-          }
-          button={
-            <div className={"gap-x-4 flex items-center justify-center"}>
+        headingTarget={headingTarget}
+        isLoading={isLoading}
+        text={"Providers"}
+        sorting={sorting}
+        setSorting={setSorting}
+        columns={columns}
+        data={providers}
+        searchPlaceholder={"Search by name..."}
+        onRowClick={
+          canUpdate
+            ? (row) => {
+                setEditingProvider(row.original);
+                setEditOpen(true);
+              }
+            : undefined
+        }
+        getStartedCard={
+          <GetStartedTest
+            icon={
+              <SquareIcon
+                icon={<AIAccessIcon className={"fill-nb-gray-200"} size={20} />}
+                color={"gray"}
+                size={"large"}
+              />
+            }
+            title={"Connect a provider"}
+            description={
+              "Route OpenAI, Anthropic, and other LLM APIs through NetBird to enforce access control, track token spend, and capture prompts."
+            }
+            button={
+              <div className={"gap-x-4 flex items-center justify-center"}>
+                <AddProviderButton />
+              </div>
+            }
+            learnMore={
+              <>
+                Learn more about
+                <InlineLink
+                  href={"https://docs.netbird.io/agent-network/providers"}
+                  target={"_blank"}
+                >
+                  Agent Network Providers
+                  <ExternalLinkIcon size={12} />
+                </InlineLink>
+              </>
+            }
+          />
+        }
+        rightSide={() =>
+          providers.length > 0 && (
+            <div className={cn("gap-x-4 ml-auto flex")}>
               <AddProviderButton />
             </div>
-          }
-          learnMore={
-            <>
-              Learn more about
-              <InlineLink
-                href={"https://docs.netbird.io/agent-network/providers"}
-                target={"_blank"}
-              >
-                Agent Network Providers
-                <ExternalLinkIcon size={12} />
-              </InlineLink>
-            </>
-          }
-        />
-      }
-      rightSide={() =>
-        providers.length > 0 && (
-          <div className={cn("gap-x-4 ml-auto flex")}>
-            <AddProviderButton />
-          </div>
-        )
-      }
-      initialPageSize={25}
-    />
+          )
+        }
+        initialPageSize={25}
+      />
     </>
   );
 }
 
 const AddProviderButton = () => {
   const { openWizard } = useAIProviders();
+  const { permission } = usePermissions();
+  // Connecting a provider needs the create grant; read-only viewers get no
+  // button instead of a wizard that can only fail.
+  if (!permission?.["agent_network.providers"]?.create) return null;
   return (
     <Button variant={"primary"} onClick={openWizard}>
       <PlusCircle size={16} />
diff --git a/src/modules/agent-network/table/ConnectProvidersTable.tsx b/src/modules/agent-network/table/ConnectProvidersTable.tsx
new file mode 100644
index 000000000..c80b375fa
--- /dev/null
+++ b/src/modules/agent-network/table/ConnectProvidersTable.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import Badge from "@components/Badge";
+import Button from "@components/Button";
+import FullTooltip from "@components/FullTooltip";
+import SquareIcon from "@components/SquareIcon";
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import GetStartedTest from "@components/ui/GetStartedTest";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import { usePathname, useRouter } from "next/navigation";
+import React from "react";
+import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+import AIProviderLogo from "@/modules/agent-network/AIProviderLogo";
+import { AIProviderId } from "@/modules/agent-network/data/mockData";
+import { APIMeProvider } from "@/modules/agent-network/useMyAgentNetworkSetup";
+
+function NameCell({ provider }: { provider: APIMeProvider }) {
+  return (
+    <div className={"flex items-center gap-3 py-2 pl-3"}>
+      {/* catalog_id comes off the wire as a plain string; an id the catalog
+          doesn't know renders the neutral badge. */}
+      <AIProviderLogo
+        providerId={provider.catalog_id as AIProviderId}
+        size={28}
+      />
+      <div className={"flex flex-col items-start min-w-0"}>
+        <span
+          className={
+            "font-medium text-sm dark:text-nb-gray-100 whitespace-nowrap"
+          }
+        >
+          {provider.name}
+        </span>
+        {/* The name is operator-chosen and often just the vendor, so the
+            catalog id is what actually says which provider is behind it. */}
+        <span className={"text-xs text-nb-gray-400 whitespace-nowrap mt-0.5"}>
+          {provider.catalog_id}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// Up to this many models are spelled out; beyond it the cell just counts them,
+// the way the admin providers table reports its allow-list.
+const NAMED_MODELS = 2;
+
+function ModelsCell({ provider }: { provider: APIMeProvider }) {
+  if (provider.all_models_allowed) {
+    return <span className={"text-xs text-nb-gray-400"}>All Models</span>;
+  }
+  // A short allow-list is spelled out as one chip per model, the way groups
+  // and providers are chipped elsewhere; a long one collapses to a count.
+  if (provider.models.length <= NAMED_MODELS) {
+    return (
+      <div className={"flex items-center gap-2"}>
+        {provider.models.map((model) => (
+          <Badge
+            key={model}
+            variant={"gray-ghost"}
+            className={"whitespace-nowrap"}
+          >
+            {model}
+          </Badge>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div className={"flex"}>
+      <FullTooltip
+        content={
+          <div className={"flex flex-col gap-1 text-xs"}>
+            {provider.models.map((model) => (
+              <div key={model}>{model}</div>
+            ))}
+          </div>
+        }
+      >
+        <Badge
+          variant={"gray-ghost"}
+          useHover={true}
+          className={"whitespace-nowrap"}
+        >
+          {provider.models.length} Models
+        </Badge>
+      </FullTooltip>
+    </div>
+  );
+}
+
+const columns: ColumnDef<APIMeProvider>[] = [
+  {
+    id: "name",
+    accessorKey: "name",
+    sortingFn: "text",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Provider</DataTableHeader>
+    ),
+    cell: ({ row }) => <NameCell provider={row.original} />,
+  },
+  {
+    id: "models",
+    // All-models rows sort above allow-listed ones, then by list length.
+    accessorFn: (p) => (p.all_models_allowed ? Infinity : p.models.length),
+    sortingFn: "basic",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Models</DataTableHeader>
+    ),
+    cell: ({ row }) => <ModelsCell provider={row.original} />,
+  },
+];
+
+type Props = {
+  providers: APIMeProvider[];
+};
+
+// ConnectProvidersTable lists what the caller's own policies let them reach.
+// Same DataTable the admin providers table uses, minus the write flows: the
+// rows come from the caller-scoped agent-config answer, so there is nothing
+// here to connect, edit, or delete.
+export default function ConnectProvidersTable({ providers }: Readonly<Props>) {
+  const path = usePathname();
+  const router = useRouter();
+  const [sorting, setSorting] = useLocalStorage<SortingState>(
+    "netbird-table-sort" + path,
+    [{ id: "name", desc: false }],
+  );
+
+  // Whoever can edit policies can fix this themselves, so they get the action
+  // instead of being told to ask someone else.
+  const { permission } = usePermissions();
+  const canManagePolicies = !!permission?.["agent_network.policies"]?.update;
+
+  return (
+    <DataTable
+      text={"Providers"}
+      sorting={sorting}
+      setSorting={setSorting}
+      columns={columns}
+      data={providers}
+      showSearchAndFilters={false}
+      initialPageSize={25}
+      // Nothing to list means no policy covers this caller yet, so the card
+      // says so rather than leaving an empty table behind.
+      getStartedCard={
+        <GetStartedTest
+          icon={
+            <SquareIcon
+              icon={
+                <AgentNetworkIcon className={"fill-nb-gray-200"} size={20} />
+              }
+              color={"gray"}
+              size={"large"}
+            />
+          }
+          title={"No providers available yet"}
+          description={
+            canManagePolicies
+              ? "No access policy covers your user yet. Add one of your groups to a policy to route your own agent through NetBird."
+              : "You don’t have access to any providers yet. Ask your administrator to add you to an Agent Network access policy."
+          }
+          button={
+            canManagePolicies ? (
+              <Button
+                variant={"primary"}
+                onClick={() => router.push("/agent-network/policies")}
+              >
+                Go to Policies
+              </Button>
+            ) : undefined
+          }
+        />
+      }
+    />
+  );
+}
diff --git a/src/modules/agent-network/useAgentNetworkMode.ts b/src/modules/agent-network/useAgentNetworkMode.ts
index bd7f1e27a..97e249296 100644
--- a/src/modules/agent-network/useAgentNetworkMode.ts
+++ b/src/modules/agent-network/useAgentNetworkMode.ts
@@ -7,6 +7,7 @@ import {
   SIGNUP_SOURCE_LOCAL_STORAGE_KEY,
 } from "@/hooks/useSignupSource";
 import { Account } from "@/interfaces/Account";
+import { useMyAgentNetworkSetup } from "@/modules/agent-network/useMyAgentNetworkSetup";
 
 /**
  * Report whether a new account arrived from the netbird.ai signup source and
@@ -46,6 +47,33 @@ export const useAgentNetworkMode = () => {
     permission.accounts.read,
   );
 
+  // The caller-scoped agent config answers "configured" only when the account
+  // has an Agent Network endpoint, so it stands in as proof the surface
+  // exists for callers who cannot resolve the flag themselves — the same
+  // fallback shape as the grant check below, and gated the same way, so a
+  // deployment that turns the surface off still turns it off for everyone
+  // who can read that decision.
+  const { configured: agentConfigured, isLoading: isAgentConfigLoading } =
+    useMyAgentNetworkSetup();
+  const hasAgentConfig = !permission?.accounts?.read && agentConfigured;
+
+  // Resolving the flag needs accounts read, which the delegated roles below
+  // account admin (usage_viewer, and agent_network scopes granted to custom
+  // roles) may not hold. For them, holding an explicit agent_network grant
+  // is proof enough the surface exists — the grants only exist on
+  // deployments that have it. Callers WITH accounts read keep the flag as
+  // the source of truth, so admins on deployments without the surface
+  // don't get the menu from their blanket grants.
+  const hasAgentNetworkGrant =
+    !permission?.accounts?.read &&
+    !!(
+      permission?.["agent_network.providers"]?.read ||
+      permission?.["agent_network.policies"]?.read ||
+      permission?.["agent_network.usage"]?.read ||
+      permission?.["agent_network.logs"]?.read ||
+      permission?.["agent_network.settings"]?.read
+    );
+
   return useMemo(() => {
     const account = accounts?.[0];
     // Deployment config is a floor: NETBIRD_AGENT_NETWORK_ONLY focuses the
@@ -61,8 +89,23 @@ export const useAgentNetworkMode = () => {
     // alongside the full dashboard (unlike "only", which hides everything else).
     const featureEnabled =
       account?.settings?.dashboard_features?.agent_network === true;
-    const enabled = only || featureEnabled || isAgentNetworkEnabled();
-    const loading = permission.accounts.read ? isLoading : false;
+    const enabled =
+      only ||
+      featureEnabled ||
+      isAgentNetworkEnabled() ||
+      hasAgentNetworkGrant ||
+      hasAgentConfig;
+    // Both answers gate the route tree, so neither may resolve late: the
+    // layout renders nothing while loading and 404s the moment it is false.
+    const loading =
+      (permission.accounts.read ? isLoading : false) || isAgentConfigLoading;
     return { only, enabled, loading } as const;
-  }, [accounts, isLoading, permission.accounts.read]);
+  }, [
+    accounts,
+    isLoading,
+    permission.accounts.read,
+    hasAgentNetworkGrant,
+    hasAgentConfig,
+    isAgentConfigLoading,
+  ]);
 };
diff --git a/src/modules/agent-network/useMyAgentNetworkSetup.ts b/src/modules/agent-network/useMyAgentNetworkSetup.ts
new file mode 100644
index 000000000..f7618abf9
--- /dev/null
+++ b/src/modules/agent-network/useMyAgentNetworkSetup.ts
@@ -0,0 +1,39 @@
+import useFetchApi from "@utils/api";
+
+// Wire types for the caller-scoped self-service endpoints. Both answers are
+// computed server-side from the caller's own group memberships with the same
+// rules the proxy enforces, so no agent_network permission is required to
+// read them.
+export type APIMeProvider = {
+  name: string;
+  catalog_id: string;
+  api_flavor: string;
+  all_models_allowed: boolean;
+  models: string[];
+};
+
+export type APIMeSetup = {
+  configured: boolean;
+  endpoint: string;
+  providers: APIMeProvider[];
+};
+
+/**
+ * Fetch the caller's effective Agent Network setup. `configured` doubles as
+ * the visibility switch for the self-service pages: the server deliberately
+ * answers "not configured" both when the account has no Agent Network and
+ * when the caller's policies grant no access, so a false here means there is
+ * nothing to show this user. Errors are ignored so a management server
+ * without the endpoint degrades to the section staying hidden.
+ */
+export const useMyAgentNetworkSetup = () => {
+  const { data: setup, isLoading } = useFetchApi<APIMeSetup>(
+    "/agent-network/agent-config",
+    true,
+  );
+  return {
+    setup,
+    configured: setup?.configured === true,
+    isLoading,
+  } as const;
+};
diff --git a/src/modules/onboarding/OnboardingProvider.tsx b/src/modules/onboarding/OnboardingProvider.tsx
index b17548a07..ffe71055d 100644
--- a/src/modules/onboarding/OnboardingProvider.tsx
+++ b/src/modules/onboarding/OnboardingProvider.tsx
@@ -10,14 +10,15 @@ import { useMemo } from "react";
 import { useSWRConfig } from "swr";
 import { submitHubspotForm } from "@/cloud/analytics/Hubspot";
 import { HubspotFormField, useAnalytics } from "@/contexts/AnalyticsProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
-import { Account } from "@/interfaces/Account";
-import { Network } from "@/interfaces/Network";
-import type { Peer } from "@/interfaces/Peer";
 import {
   AGENT_NETWORK_SIGNUP_SOURCE,
   SIGNUP_SOURCE_LOCAL_STORAGE_KEY,
 } from "@/hooks/useSignupSource";
+import { Account } from "@/interfaces/Account";
+import { Network } from "@/interfaces/Network";
+import type { Peer } from "@/interfaces/Peer";
 import { useAccount } from "@/modules/account/useAccount";
 import { useAgentNetworkMode } from "@/modules/agent-network/useAgentNetworkMode";
 import { AgentNetworkOnboarding } from "@/modules/onboarding/agent-network/AgentNetworkOnboarding";
@@ -58,7 +59,16 @@ export const OnboardingProvider = ({
   onSurveySubmit,
   domainCategory,
 }: Props) => {
-  const { data: peers } = useFetchApi<Peer[]>("/peers");
+  const { permission } = usePermissions();
+  // Onboarding only cares whether the account has peers yet. Roles without
+  // peers read (agent_network_admin, usage_viewer) would just collect a 403
+  // toast on every page, so skip the call for them entirely.
+  const { data: peers } = useFetchApi<Peer[]>(
+    "/peers",
+    true,
+    true,
+    permission.peers.read,
+  );
   const accountRequest = useApiCall<Account>("/accounts", true);
   const account = useAccount();
   const router = useRouter();
diff --git a/src/modules/onboarding/agent-network/OnboardingAgentConfigure.tsx b/src/modules/onboarding/agent-network/OnboardingAgentConfigure.tsx
index 176824b56..b839ab134 100644
--- a/src/modules/onboarding/agent-network/OnboardingAgentConfigure.tsx
+++ b/src/modules/onboarding/agent-network/OnboardingAgentConfigure.tsx
@@ -1,7 +1,7 @@
 import Button from "@components/Button";
 import { ArrowRightIcon } from "lucide-react";
 import * as React from "react";
-import { AgentConnectTabs } from "@/modules/agent-network/AgentConnectModal";
+import { AgentConnectTabs } from "@/modules/agent-network/AgentConnectTabs";
 import { useAIProviders } from "@/modules/agent-network/AIProvidersProvider";
 
 type Props = {
diff --git a/src/modules/users/UserInvitesTable.tsx b/src/modules/users/UserInvitesTable.tsx
index 1cbcb68d7..2378b7638 100644
--- a/src/modules/users/UserInvitesTable.tsx
+++ b/src/modules/users/UserInvitesTable.tsx
@@ -1,3 +1,4 @@
+import Badge from "@components/Badge";
 import Button from "@components/Button";
 import Code from "@components/Code";
 import {
@@ -9,6 +10,7 @@ import {
 } from "@components/DropdownMenu";
 import InlineLink from "@components/InlineLink";
 import { Modal, ModalContent, ModalFooter } from "@components/modal/Modal";
+import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import SquareIcon from "@components/SquareIcon";
 import { DataTable } from "@components/table/DataTable";
@@ -36,44 +38,45 @@ import {
 } from "@components/table/TableFilters";
 import GetStartedTest from "@components/ui/GetStartedTest";
 import MultipleGroups from "@components/ui/MultipleGroups";
-import Skeleton from "react-loading-skeleton";
 import { ColumnDef, SortingState } from "@tanstack/react-table";
 import useFetchApi, { useApiCall } from "@utils/api";
-import { notify } from "@components/Notification";
-import { MoreVertical, RefreshCw } from "lucide-react";
+import { cn, generateColorFromString } from "@utils/helpers";
 import { isNetBirdCloud } from "@utils/netbird";
 import dayjs from "dayjs";
+import { MoreVertical, RefreshCw } from "lucide-react";
 import {
   Cog,
   CopyIcon,
   CreditCardIcon,
   ExternalLinkIcon,
   EyeIcon,
+  GaugeIcon,
   Link2,
   MailPlus,
   NetworkIcon,
   Trash2,
   User2,
 } from "lucide-react";
-import NetBirdIcon from "@/assets/icons/NetBirdIcon";
-import Badge from "@components/Badge";
 import { usePathname } from "next/navigation";
 import React, { useMemo, useState } from "react";
+import Skeleton from "react-loading-skeleton";
 import { useSWRConfig } from "swr";
+import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
+import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import { useDialog } from "@/contexts/DialogProvider";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import useCopyToClipboard from "@/hooks/useCopyToClipboard";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
-import { cn, generateColorFromString } from "@utils/helpers";
 import { Group } from "@/interfaces/Group";
 import {
   Role,
   UserInvite,
   UserInviteRegenerateResponse,
 } from "@/interfaces/User";
-import UserInviteModal from "@/modules/users/UserInviteModal";
 import { useAccount } from "@/modules/account/useAccount";
+import { useAgentNetworkMode } from "@/modules/agent-network/useAgentNetworkMode";
+import UserInviteModal from "@/modules/users/UserInviteModal";
 
 // Name cell for invites - same styling as UserNameCell but for invites
 function InviteNameCell({ invite }: { invite: UserInvite }) {
@@ -145,6 +148,18 @@ function InviteRoleCell({ invite }: { invite: UserInvite }) {
             Network Admin
           </>
         )}
+        {role === Role.AgentNetworkAdmin && (
+          <>
+            <AgentNetworkIcon size={14} />
+            Agent Network Admin
+          </>
+        )}
+        {role === Role.UsageViewer && (
+          <>
+            <GaugeIcon size={14} />
+            Usage Viewer
+          </>
+        )}
       </Badge>
     </div>
   );
@@ -465,6 +480,8 @@ export default function UserInvitesTable({
     ],
   );
 
+  const { enabled: agentNetworkEnabled } = useAgentNetworkMode();
+
   const invitesWithGroupNames = useMemo(() => {
     if (!invites) return undefined;
     return invites.map((invite) => ({
@@ -500,10 +517,21 @@ export default function UserInvitesTable({
       { value: "admin", label: "Admin" },
       { value: "user", label: "User" },
       { value: "network_admin", label: "Network Admin" },
+      // Agent Network roles can only be assigned where the surface exists, so
+      // don't offer them as filters elsewhere.
+      ...(agentNetworkEnabled
+        ? [
+            {
+              value: "agent_network_admin",
+              label: "Agent Network Admin",
+            },
+            { value: "usage_viewer", label: "Usage Viewer" },
+          ]
+        : []),
       { value: "billing_admin", label: "Billing Admin" },
       { value: "auditor", label: "Auditor" },
     ],
-    [],
+    [agentNetworkEnabled],
   );
 
   const filterDefs = useMemo<TableFilterDef[]>(
diff --git a/src/modules/users/UserRoleSelector.tsx b/src/modules/users/UserRoleSelector.tsx
index 363fe8d83..ddcc2e58a 100644
--- a/src/modules/users/UserRoleSelector.tsx
+++ b/src/modules/users/UserRoleSelector.tsx
@@ -2,6 +2,8 @@ import Button from "@components/Button";
 import { CommandItem } from "@components/Command";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { ScrollArea } from "@components/ScrollArea";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
+import { cn } from "@utils/helpers";
 import { isNetBirdCloud } from "@utils/netbird";
 import { Command, CommandGroup, CommandList } from "cmdk";
 import { trim } from "lodash";
@@ -10,17 +12,21 @@ import {
   Cog,
   CreditCard,
   EyeIcon,
+  GaugeIcon,
   NetworkIcon,
   User2,
+  UsersIcon,
 } from "lucide-react";
 import * as React from "react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
+import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import { useMSP } from "@/cloud/msp/contexts/MSPProvider";
 import { useDialog } from "@/contexts/DialogProvider";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useElementSize } from "@/hooks/useElementSize";
 import { Role, User } from "@/interfaces/User";
+import { useAgentNetworkMode } from "@/modules/agent-network/useAgentNetworkMode";
 
 interface MultiSelectProps {
   value?: Role;
@@ -35,39 +41,149 @@ interface MultiSelectProps {
   align?: "start" | "center" | "end";
 }
 
-export const UserRoles = [
+// Roles are grouped by the product surface they grant access to, so the list
+// stays readable as more surfaces ship their own delegated roles. Add a
+// category here (and a `category` on the roles) when the next surface lands.
+export type UserRoleCategory = "general" | "agent-network";
+
+type IconComponent = React.ComponentType<{
+  size?: number;
+  width?: number;
+  className?: string;
+}>;
+
+export const UserRoleCategories: {
+  value: UserRoleCategory;
+  name: string;
+  icon: IconComponent;
+}[] = [
+  { value: "general", name: "General", icon: UsersIcon },
+  { value: "agent-network", name: "Agent Network", icon: AgentNetworkIcon },
+];
+
+export const UserRoles: {
+  name: string;
+  // Label used inside the role's own tab, where the category is already in the
+  // tab title — "Agent Network Admin" reads as just "Admin" under Agent Network.
+  shortName?: string;
+  value: Role;
+  icon: IconComponent;
+  category: UserRoleCategory;
+  description: string;
+}[] = [
   {
     name: "Owner",
     value: Role.Owner,
     icon: NetBirdIcon,
+    category: "general",
+    description: "Full access, including transferring ownership.",
   },
   {
     name: "Admin",
     value: Role.Admin,
     icon: Cog,
+    category: "general",
+    description: "Manages users, peers, networks and account settings.",
   },
   {
     name: "Network Admin",
     value: Role.NetworkAdmin,
     icon: NetworkIcon,
+    category: "general",
+    description: "Manages peers, networks and access control.",
   },
   {
     name: "Billing Admin",
     value: Role.BillingAdmin,
     icon: CreditCard,
+    category: "general",
+    description: "Manages the subscription and billing details.",
   },
   {
     name: "Auditor",
     value: Role.Auditor,
     icon: EyeIcon,
+    category: "general",
+    description: "Read-only access to the configuration and audit events.",
   },
   {
     name: "User",
     value: Role.User,
     icon: User2,
+    category: "general",
+    description: "Access to their own peers only.",
+  },
+  {
+    name: "Agent Network Admin",
+    shortName: "Admin",
+    value: Role.AgentNetworkAdmin,
+    icon: AgentNetworkIcon,
+    category: "agent-network",
+    description: "Manages AI providers, agent policies and guardrails.",
+  },
+  {
+    name: "Usage Viewer",
+    value: Role.UsageViewer,
+    icon: GaugeIcon,
+    category: "agent-network",
+    description: "Read-only access to usage and logs.",
   },
 ];
 
+const RoleList = ({
+  roles,
+  onSelect,
+  useShortNames = false,
+  fixedHeight = false,
+}: {
+  roles: typeof UserRoles;
+  onSelect: (role: Role) => void;
+  useShortNames?: boolean;
+  // Reserve the same height for every tab. Tabs hold different numbers of
+  // roles, and a popover that changes height mid-interaction gets re-positioned
+  // by the collision handling — it would open downwards on a short tab and flip
+  // upwards on a long one.
+  fixedHeight?: boolean;
+}) => {
+  return (
+    <ScrollArea
+      className={cn(
+        "overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3",
+        fixedHeight ? "h-[240px]" : "max-h-[320px]",
+      )}
+    >
+      <CommandGroup>
+        <div className={"grid grid-cols-1 gap-1"}>
+          {roles.map((item) => (
+            <CommandItem
+              key={item.value}
+              value={item.value}
+              data-testid={"user-role-selector-item"}
+              className={"py-1 px-2"}
+              onSelect={() => onSelect(item.value)}
+              onClick={(e) => e.preventDefault()}
+            >
+              <div className={"flex items-start gap-2.5 p-1"}>
+                <div className={"pt-[3px]"}>
+                  <item.icon size={14} width={14} />
+                </div>
+                <div className={"flex flex-col text-sm font-medium"}>
+                  <span className={"text-nb-gray-200 whitespace-nowrap"}>
+                    {useShortNames ? (item.shortName ?? item.name) : item.name}
+                  </span>
+                  <span className={"text-xs font-normal text-nb-gray-400"}>
+                    {item.description}
+                  </span>
+                </div>
+              </div>
+            </CommandItem>
+          ))}
+        </div>
+      </CommandGroup>
+    </ScrollArea>
+  );
+};
+
 export function UserRoleSelector({
   onChange,
   value,
@@ -125,11 +241,60 @@ export function UserRoleSelector({
   // Cloud only
   const { isAccountWithMSPParent } = useMSP();
 
+  const { enabled: agentNetworkEnabled } = useAgentNetworkMode();
+
+  const categories = useMemo(() => {
+    const isVisible = (role: Role) => {
+      if (!isOwner && role === Role.Owner) return false;
+      if (hideOwner && role === Role.Owner) return false;
+      if (hideBillingAdmin && role === Role.BillingAdmin) return false;
+
+      // Cloud only
+      if (role === Role.BillingAdmin && !isNetBirdCloud()) return false;
+      if (role === Role.BillingAdmin && isAccountWithMSPParent) return false;
+      if (role === Role.Owner && isAccountWithMSPParent) return false;
+
+      return true;
+    };
+
+    return UserRoleCategories.map((category) => ({
+      ...category,
+      roles: UserRoles.filter(
+        (role) => role.category === category.value && isVisible(role.value),
+      ),
+    })).filter((category) => {
+      // Deployments without the Agent Network surface don't get its roles.
+      if (category.value === "agent-network" && !agentNetworkEnabled)
+        return false;
+      return category.roles.length > 0;
+    });
+  }, [
+    isOwner,
+    hideOwner,
+    hideBillingAdmin,
+    isAccountWithMSPParent,
+    agentNetworkEnabled,
+  ]);
+
+  // A single group is just a list — the tab row would only add noise.
+  const showTabs = categories.length > 1;
+  const [tab, setTab] = useState<string>(
+    selectedRole?.category ?? UserRoleCategories[0].value,
+  );
+  // Fall back to the first group when the remembered tab is not available, e.g.
+  // when the role was cleared or a group got filtered out.
+  const activeTab = categories.some((category) => category.value === tab)
+    ? tab
+    : (categories[0]?.value ?? UserRoleCategories[0].value);
+
   return (
     <Popover
       open={open}
       onOpenChange={(isOpen) => {
         setOpen(isOpen);
+        // Open on the group the current role lives in, so the selection is
+        // visible without hunting for it.
+        if (isOpen && selectedRole) setTab(selectedRole.category);
       }}
     >
       <PopoverTrigger asChild={true}>
@@ -145,19 +310,27 @@ export function UserRoleSelector({
             className={"w-full group/user-role-selector"}
             data-testid={"user-role-selector"}
           >
-            <div className={"w-full flex justify-between items-center gap-2"}>
+            <div
+              className={
+                "w-full flex justify-between items-center gap-2 min-w-0"
+              }
+            >
               {selectedRole && (
-                <div className={"flex items-center gap-2.5"}>
-                  <selectedRole.icon size={14} width={14} />
-                  <div className={"flex flex-col text-sm font-medium"}>
-                    <span className={"text-nb-gray-200 whitespace-nowrap"}>
+                <div className={"flex items-center gap-2.5 min-w-0"}>
+                  <div className={"shrink-0 flex items-center"}>
+                    <selectedRole.icon size={14} width={14} />
+                  </div>
+                  <div className={"flex flex-col text-sm font-medium min-w-0"}>
+                    {/* Truncate instead of overflowing the button: role names
+                        can be longer than the column they sit in. */}
+                    <span className={"text-nb-gray-200 truncate"}>
                       {selectedRole?.name}
                     </span>
                   </div>
                 </div>
               )}
 
-              <div className={"pl-2"}>
+              <div className={"pl-2 shrink-0"}>
                 <ChevronsUpDown size={18} className={"shrink-0"} />
               </div>
             </div>
@@ -168,10 +341,17 @@ export function UserRoleSelector({
         className="w-full p-0 shadow-sm shadow-nb-gray-950"
         style={{
           width: popoverWidth === "auto" ? width : popoverWidth,
+          // The tab row needs more room than the trigger usually offers.
+          minWidth: showTabs ? 320 : undefined,
         }}
-        align={align}
+        // When the popover is wider than the trigger, anchor it to the
+        // trigger's right edge so the extra width grows inwards — the role
+        // selector sits in a right-hand column, so growing to the right would
+        // run off the screen.
+        align={showTabs ? "end" : align}
         side={side}
         sideOffset={10}
+        collisionPadding={12}
       >
         <Command
           className={"w-full flex"}
@@ -184,55 +364,47 @@ export function UserRoleSelector({
           }}
         >
           <CommandList className={"w-full"}>
-            <ScrollArea
-              className={
-                "max-h-[380px] overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
-              }
-            >
-              <CommandGroup>
-                <div className={"grid grid-cols-1 gap-1"}>
-                  {UserRoles.map((item) => {
-                    if (!isOwner && item.value === Role.Owner) return null;
-                    if (hideOwner && item.value === Role.Owner) return null;
-                    if (hideBillingAdmin && item.value === Role.BillingAdmin)
-                      return null;
-
-                    // Cloud only
-                    if (item.value === Role.BillingAdmin && !isNetBirdCloud())
-                      return null;
-                    if (
-                      item.value === Role.BillingAdmin &&
-                      isAccountWithMSPParent
-                    )
-                      return null;
-                    if (item.value === Role.Owner && isAccountWithMSPParent)
-                      return null;
-
-                    return (
-                      <CommandItem
-                        key={item.value}
-                        value={item.value}
-                        data-testid={"user-role-selector-item"}
-                        className={"py-1 px-2"}
-                        onSelect={() => toggle(item.value)}
-                        onClick={(e) => e.preventDefault()}
-                      >
-                        <div className={"flex items-center gap-2.5 p-1"}>
-                          <item.icon size={14} width={14} />
-                          <div
-                            className={
-                              "flex flex-col text-sm font-medium text-nb-gray-200 whitespace-nowrap"
-                            }
-                          >
-                            {item.name}
-                          </div>
-                        </div>
-                      </CommandItem>
-                    );
-                  })}
-                </div>
-              </CommandGroup>
-            </ScrollArea>
+            {showTabs ? (
+              <Tabs value={activeTab} onValueChange={setTab}>
+                <TabsList justify={"start"} className={"px-3"}>
+                  {categories.map((category) => (
+                    <TabsTrigger
+                      key={category.value}
+                      value={category.value}
+                      className={"text-[.8rem] font-normal"}
+                      data-testid={`user-role-selector-tab-${category.value}`}
+                    >
+                      <category.icon
+                        size={14}
+                        className={
+                          "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+                        }
+                      />
+                      {category.name}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+                {categories.map((category) => (
+                  <TabsContent
+                    key={category.value}
+                    value={category.value}
+                    className={"p-0 my-0 pt-0"}
+                  >
+                    <RoleList
+                      roles={category.roles}
+                      onSelect={toggle}
+                      useShortNames={true}
+                      fixedHeight={true}
+                    />
+                  </TabsContent>
+                ))}
+              </Tabs>
+            ) : (
+              <RoleList
+                roles={categories.flatMap((category) => category.roles)}
+                onSelect={toggle}
+              />
+            )}
           </CommandList>
         </Command>
       </PopoverContent>
diff --git a/src/modules/users/UsersTable.tsx b/src/modules/users/UsersTable.tsx
index d1b0532f5..ba1923273 100644
--- a/src/modules/users/UsersTable.tsx
+++ b/src/modules/users/UsersTable.tsx
@@ -43,12 +43,14 @@ import { usePathname, useRouter } from "next/navigation";
 import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import TeamIcon from "@/assets/icons/TeamIcon";
+import { useGroups } from "@/contexts/GroupsProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { Group } from "@/interfaces/Group";
 import { User, UserInvite } from "@/interfaces/User";
+import { useAccount } from "@/modules/account/useAccount";
+import { useAgentNetworkMode } from "@/modules/agent-network/useAgentNetworkMode";
 import LastTimeRow from "@/modules/common-table-rows/LastTimeRow";
-import { useGroups } from "@/contexts/GroupsProvider";
 import { PendingApprovalFilter } from "@/modules/users/PendingApprovalFilter";
 import UserActionCell from "@/modules/users/table-cells/UserActionCell";
 import UserGroupCell from "@/modules/users/table-cells/UserGroupCell";
@@ -57,7 +59,6 @@ import UserRoleCell from "@/modules/users/table-cells/UserRoleCell";
 import UserStatusCell from "@/modules/users/table-cells/UserStatusCell";
 import UserInviteModal from "@/modules/users/UserInviteModal";
 import UserInvitesTable from "@/modules/users/UserInvitesTable";
-import { useAccount } from "@/modules/account/useAccount";
 
 export const UsersTableColumns: ColumnDef<User>[] = [
   {
@@ -211,6 +212,7 @@ export default function UsersTable({
 
   const router = useRouter();
   const { permission } = usePermissions();
+  const { enabled: agentNetworkEnabled } = useAgentNetworkMode();
 
   const usersWithGroupNames = useMemo(() => {
     if (!users) return undefined;
@@ -249,10 +251,21 @@ export default function UsersTable({
       { value: "admin", label: "Admin" },
       { value: "user", label: "User" },
       { value: "network_admin", label: "Network Admin" },
+      // Agent Network roles can only be assigned where the surface exists, so
+      // don't offer them as filters elsewhere.
+      ...(agentNetworkEnabled
+        ? [
+            {
+              value: "agent_network_admin",
+              label: "Agent Network Admin",
+            },
+            { value: "usage_viewer", label: "Usage Viewer" },
+          ]
+        : []),
       { value: "billing_admin", label: "Billing Admin" },
       { value: "auditor", label: "Auditor" },
     ],
-    [],
+    [agentNetworkEnabled],
   );
 
   const filterDefs = useMemo<TableFilterDef[]>(
diff --git a/src/modules/users/table-cells/UserRoleCell.tsx b/src/modules/users/table-cells/UserRoleCell.tsx
index 08fb7d8e7..6461013bd 100644
--- a/src/modules/users/table-cells/UserRoleCell.tsx
+++ b/src/modules/users/table-cells/UserRoleCell.tsx
@@ -1,7 +1,15 @@
 import Badge from "@components/Badge";
 import { cn } from "@utils/helpers";
-import { Cog, CreditCardIcon, EyeIcon, NetworkIcon, User2 } from "lucide-react";
+import {
+  Cog,
+  CreditCardIcon,
+  EyeIcon,
+  GaugeIcon,
+  NetworkIcon,
+  User2,
+} from "lucide-react";
 import React from "react";
+import AgentNetworkIcon from "@/assets/icons/AgentNetworkIcon";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import { Role, User } from "@/interfaces/User";
 
@@ -51,6 +59,18 @@ export default function UserRoleCell({ user }: Readonly<Props>) {
             Network Admin
           </>
         )}
+        {role === Role.AgentNetworkAdmin && (
+          <>
+            <AgentNetworkIcon size={14} />
+            Agent Network Admin
+          </>
+        )}
+        {role === Role.UsageViewer && (
+          <>
+            <GaugeIcon size={14} />
+            Usage Viewer
+          </>
+        )}
       </Badge>
     </div>
   );
diff --git a/src/utils/version.ts b/src/utils/version.ts
index 4a5523a06..f305f1365 100644
--- a/src/utils/version.ts
+++ b/src/utils/version.ts
@@ -84,17 +84,37 @@ export const compareVersions = (
   return true;
 };
 
+/**
+ * Whether a version string names a non-release build. Mirrors the management
+ * server's version.IsDevelopmentVersion: the literal "development" plus the
+ * "ci-" and "dev-" prefixes it stamps on snapshot builds ("ci-7470fbdd").
+ *
+ * Such a string carries no release to compare against. releaseParts() reads
+ * its leading word as 0, so without this check every snapshot install would
+ * see the current release as newer and nag about an update forever.
+ */
+export const isDevelopmentVersion = (version: string): boolean => {
+  const bare = version.trim().replace(/^v/i, "");
+  return (
+    bare.startsWith("development") ||
+    bare.startsWith("ci-") ||
+    bare.startsWith("dev-")
+  );
+};
+
 /**
  * Returns true when `latest` is a strictly newer release than `current` — i.e.
  * an update is available. Only release components decide: an enterprise build
  * ("0.77.0+enterprise.1") is up to date against the "0.77.0" it was built from,
  * matching how the management server evaluates it server-side.
  *
- * "development" builds never report an update, in either position.
+ * Development and snapshot builds never report an update, in either position.
  */
 export const isNewerVersion = (current: string, latest: string): boolean => {
   if (!current || !latest) return false;
-  if (current === "development" || latest === "development") return false;
+  if (isDevelopmentVersion(current) || isDevelopmentVersion(latest)) {
+    return false;
+  }
 
   const currentParts = releaseParts(current);
   const latestParts = releaseParts(latest);