Point the legacy desktop app options at the published package

The GTK3 build shipped under its own netbird-ui-gtk3 name with
Conflicts/Replaces on netbird-ui, so it coexists with the current build in
the regular repository. The separate repository paths the previous commit
assumed were never created: dists/gtk3 and yum-gtk3/$basearch both 404, and
the yum repository is flat rather than per-basearch. Drop them and install
netbird-ui-gtk3 from the regular repository instead.

Verified in Docker that the rendered commands install netbird 0.77.0 and
netbird-ui-gtk3 0.77.0 on Ubuntu 22.04 and Debian 12.

Remove the RHEL 9 option: the RPM requires webkit2gtk4.1 (or
libwebkit2gtk-4_1-0), but RHEL 9 only ships webkit2gtk3, which provides the
4.0 API, and EPEL does not carry 4.1 either, so dnf cannot resolve it. The
general RHEL entry already directs version 9 users to the CLI.

The desktop app is published for x86_64 only, which the install step already
notes for every distribution that offers it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

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

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

e2e/tests/agent-network-settings-shapes.spec.ts

@@ -0,0 +1,144 @@
+/**
+ * Agent Network settings wire-shape spec.
+ *
+ * The management API signals "account not bootstrapped" differently by
+ * generation: current servers answer GET /agent-network/settings with the
+ * defaults object carrying an empty cluster/subdomain/endpoint, older ones
+ * with 200 + a JSON null body, and the oldest with a 404.
+ * useAgentNetworkSettings normalizes all three to the same null-settings
+ * signal, and this spec pins that: the providers page must render the
+ * connect-first endpoint placeholder for every unbootstrapped shape, and the
+ * endpoint badge once the account is bootstrapped. The settings route is
+ * mocked per test, so the assertions do not depend on the backend build or
+ * on account state left behind by other suites.
+ */
+import { test, expect, type Browser, type Page } from "@playwright/test";
+import { loginToApp } from "../helpers/auth";
+
+const AGENT_NETWORK_CONFIG_KEY = "netbird-test-agent-network";
+
+const EMPTY_STATE_TEXT =
+  "Connect your first provider to set up your agent network endpoint.";
+
+const BOOTSTRAPPED_ENDPOINT = "violet.eu.proxy.netbird.io";
+
+// The defaults object current servers return before the account is
+// bootstrapped: values present, cluster/subdomain/endpoint empty, no
+// timestamps (no row has been persisted yet).
+const UNBOOTSTRAPPED_DEFAULTS = {
+  cluster: "",
+  subdomain: "",
+  endpoint: "",
+  enable_log_collection: true,
+  enable_prompt_collection: false,
+  redact_pii: false,
+  access_log_retention_days: 30,
+};
+
+const BOOTSTRAPPED_SETTINGS = {
+  cluster: "eu.proxy.netbird.io",
+  subdomain: "violet",
+  endpoint: BOOTSTRAPPED_ENDPOINT,
+  enable_log_collection: true,
+  enable_prompt_collection: false,
+  redact_pii: false,
+  access_log_retention_days: 30,
+  created_at: "2026-01-01T00:00:00Z",
+  updated_at: "2026-01-01T00:00:00Z",
+};
+
+async function mockSettingsResponse(
+  page: Page,
+  response: { status: number; body: string },
+) {
+  await page.route("**/api/agent-network/settings", (route) => {
+    if (route.request().method() !== "GET") return route.continue();
+    return route.fulfill({
+      status: response.status,
+      contentType: "application/json",
+      body: response.body,
+    });
+  });
+}
+
+async function openProvidersPage(
+  browser: Browser,
+  settingsResponse: { status: number; body: string },
+): Promise<{ page: Page; close: () => Promise<void> }> {
+  const context = await browser.newContext({
+    storageState: "e2e/fixtures/auth/owner.json",
+  });
+  // Close the context on any setup failure — the caller only receives the
+  // close callback once setup succeeds.
+  try {
+    await context.addInitScript(
+      ([key, value]) => {
+        try {
+          window.localStorage.setItem(key as string, value as string);
+        } catch (e) {}
+      },
+      [AGENT_NETWORK_CONFIG_KEY, "enabled"],
+    );
+    const page = await context.newPage();
+    await mockSettingsResponse(page, settingsResponse);
+    await loginToApp(page, "owner");
+    await page.goto("/agent-network/providers");
+    await page.keyboard.press("Escape");
+    return { page, close: () => context.close() };
+  } catch (e) {
+    await context.close();
+    throw e;
+  }
+}
+
+const UNBOOTSTRAPPED_SHAPES: {
+  name: string;
+  response: { status: number; body: string };
+}[] = [
+  {
+    name: "defaults object with empty endpoint (current servers)",
+    response: { status: 200, body: JSON.stringify(UNBOOTSTRAPPED_DEFAULTS) },
+  },
+  {
+    name: "200 with JSON null body (older servers)",
+    response: { status: 200, body: "null" },
+  },
+  {
+    name: "404 (oldest servers)",
+    response: {
+      status: 404,
+      body: JSON.stringify({ message: "settings not found", code: 404 }),
+    },
+  },
+];
+
+test.describe("Agent Network settings wire shapes @agent-network", () => {
+  for (const shape of UNBOOTSTRAPPED_SHAPES) {
+    test(`unbootstrapped account renders the empty state: ${shape.name}`, async ({
+      browser,
+    }) => {
+      const { page, close } = await openProvidersPage(browser, shape.response);
+      try {
+        await expect(page.getByText(EMPTY_STATE_TEXT)).toBeVisible();
+        await expect(page.getByText(BOOTSTRAPPED_ENDPOINT)).toHaveCount(0);
+      } finally {
+        await close();
+      }
+    });
+  }
+
+  test("bootstrapped account renders the endpoint instead of the empty state", async ({
+    browser,
+  }) => {
+    const { page, close } = await openProvidersPage(browser, {
+      status: 200,
+      body: JSON.stringify(BOOTSTRAPPED_SETTINGS),
+    });
+    try {
+      await expect(page.getByText(BOOTSTRAPPED_ENDPOINT)).toBeVisible();
+      await expect(page.getByText(EMPTY_STATE_TEXT)).toHaveCount(0);
+    } finally {
+      await close();
+    }
+  });
+});

e2e/tests/onboarding-form.spec.ts

@@ -72,13 +72,19 @@ function mockAccounts(page: Page, state: AccountState, delayMs: number) {
 
 async function openOnboarding(
   browser: Browser,
-  opts: { source?: boolean; account: AccountState; delayMs?: number },
+  opts: {
+    source?: boolean;
+    account: AccountState;
+    delayMs?: number;
+    edition?: string;
+    expectOnboarding?: boolean;
+  },
 ): Promise<{ page: Page; close: () => Promise<void> }> {
   const context = await browser.newContext({
     storageState: "e2e/fixtures/auth/owner.json",
   });
   await context.addInitScript(
-    ([sourceKey, sourceValue, withSource]) => {
+    ([sourceKey, sourceValue, withSource, edition]) => {
       try {
         window.localStorage.setItem("netbird-test-onboarding", "true");
         if (withSource) {
@@ -87,13 +93,32 @@ async function openOnboarding(
             sourceValue as string,
           );
         }
+        if (edition) {
+          window.localStorage.setItem("netbird-test-edition", edition as string);
+        }
       } catch (e) {}
     },
-    [SIGNUP_SOURCE_KEY, AGENT_NETWORK_SOURCE, !!opts.source] as const,
+    [
+      SIGNUP_SOURCE_KEY,
+      AGENT_NETWORK_SOURCE,
+      !!opts.source,
+      opts.edition ?? "",
+    ] as const,
   );
   const page = await context.newPage();
   mockAccounts(page, opts.account, opts.delayMs ?? 0);
-  await loginToApp(page, "owner", { expectOnboarding: true });
+  // The mocked GET /accounts is what drives the onboarding decision, and the
+  // dashboard can resolve before it lands — a "no form opened" assertion would
+  // then pass vacuously. Wait for the rewritten response before returning.
+  const accountsLoaded = page.waitForResponse(
+    (resp) =>
+      /\/api\/accounts(\?|$)/.test(resp.url()) &&
+      resp.request().method() === "GET",
+  );
+  await loginToApp(page, "owner", {
+    expectOnboarding: opts.expectOnboarding ?? true,
+  });
+  await accountsLoaded;
   return { page, close: () => context.close() };
 }
 
@@ -143,6 +168,50 @@ test.describe.serial("Onboarding form selection @onboarding", () => {
     }
   });
 
+  test("a self-hosted account with onboarding pending shows the regular flow at the intent step", async ({
+    browser,
+  }) => {
+    const { page, close } = await openOnboarding(browser, {
+      source: false,
+      edition: "oss",
+      account: { onboardingFlowPending: true },
+    });
+    try {
+      await expect(page.getByTestId(REGULAR_FORM)).toBeVisible();
+      await expect(page.getByTestId(AGENT_FORM)).toHaveCount(0);
+      // The signup survey relies on a JWT domain claim self-hosted IdPs don't
+      // emit, so the flow skips it and opens on the intent step. Scoped to the
+      // form: the dashboard behind the modal has its own "Get Started with
+      // NetBird" heading, and getByText matches case-insensitively.
+      await expect(
+        page
+          .getByTestId(REGULAR_FORM)
+          .getByRole("heading", { name: "Get started with NetBird" }),
+      ).toBeVisible();
+    } finally {
+      await close();
+    }
+  });
+
+  test("a self-hosted account with only the signup form pending shows no onboarding", async ({
+    browser,
+  }) => {
+    const { page, close } = await openOnboarding(browser, {
+      source: false,
+      edition: "oss",
+      account: { signupFormPending: true },
+      expectOnboarding: false,
+    });
+    try {
+      // loginToApp resolved the dashboard, so the account state has been
+      // applied — neither flow should have opened.
+      await expect(page.getByTestId(REGULAR_FORM)).toHaveCount(0);
+      await expect(page.getByTestId(AGENT_FORM)).toHaveCount(0);
+    } finally {
+      await close();
+    }
+  });
+
   test("a slow backend never flashes the regular form for a netbird.ai signup", async ({
     browser,
   }) => {

e2e/tests/setup-keys.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from "../helpers/fixtures";
 import { navigateTo } from "../helpers/auth";
-import { generateRandomName } from "../helpers/utils";
+import { clearScrollLock, generateRandomName } from "../helpers/utils";
 import { deleteGroupsByPrefix, deleteSetupKeysByPrefix } from "../helpers/api";
 
 let setupKeys: string[] = [];
@@ -118,19 +118,42 @@ async function createSetupKey(
   await expect(page.getByText(opts.name)).toBeVisible();
 }
 
-async function revokeSetupKey(
+// openRowActions opens a row's action dropdown. A confirmation dialog closed
+// moments earlier can still leave Radix's scroll-lock artifacts on <body>
+// (`pointer-events: none`, a stale overlay), and those swallow the click even
+// with force — the menu then silently never opens and the item lookup times
+// out. Clear them before clicking.
+async function openRowActions(
   page: import("@playwright/test").Page,
   name: string,
 ) {
-  // Row actions are now behind a dropdown menu.
+  await clearScrollLock(page);
+  // A force-click can open a new action menu without the previous one having
+  // closed (scroll-lock artifacts suppress Radix's outside-click dismissal),
+  // leaving two menus open — the item lookup then hits a strict-mode violation.
+  // Dismiss any open menu and wait for it to be gone before opening the next.
+  if (await page.locator('[role="menu"]').count()) {
+    await page.keyboard.press("Escape");
+    await expect(page.locator('[role="menu"]')).toHaveCount(0);
+  }
   await page
     .locator("tr")
     .filter({ hasText: name })
     .getByTestId("setup-key-actions")
     .click({ force: true });
-  await page
-    .locator('[data-testid="revoke-setup-key"]:not([data-disabled])')
-    .click({ force: true });
+}
+
+async function revokeSetupKey(
+  page: import("@playwright/test").Page,
+  name: string,
+) {
+  // Row actions are now behind a dropdown menu.
+  await openRowActions(page, name);
+  const revokeItem = page.locator(
+    '[data-testid="revoke-setup-key"]:not([data-disabled])',
+  );
+  await expect(revokeItem).toBeVisible();
+  await revokeItem.click({ force: true });
   const responsePromise = page.waitForResponse(
     (resp) => resp.url().includes("/api/setup-keys/") && resp.request().method() === "PUT",
     { timeout: 10_000 },
@@ -151,13 +174,23 @@ async function deleteSetupKey(
   name: string,
 ) {
   // Row actions are now behind a dropdown menu.
-  await page
-    .locator("tr")
-    .filter({ hasText: name })
-    .getByTestId("setup-key-actions")
-    .click({ force: true });
-  await page.getByTestId("delete-setup-key").click({ force: true });
+  await openRowActions(page, name);
+  const deleteItem = page.locator(
+    '[data-testid="delete-setup-key"]:not([data-disabled])',
+  );
+  await expect(deleteItem).toBeVisible();
+  await deleteItem.click({ force: true });
+  // Await the DELETE like revoke awaits its PUT: the handler refetches
+  // /setup-keys afterwards, which re-renders every row — returning before that
+  // settles means the next key's trigger click can land on a replaced node.
+  const responsePromise = page.waitForResponse(
+    (resp) =>
+      resp.url().includes("/api/setup-keys/") &&
+      resp.request().method() === "DELETE",
+    { timeout: 10_000 },
+  );
   await page.getByTestId("confirmation.confirm").click();
+  await responsePromise;
   await expect(page.locator("tr").filter({ hasText: name })).not.toBeVisible();
   await expect(page.getByRole("dialog")).not.toBeVisible();
 }

e2e/tests/setup-modal-linux.spec.ts

@@ -0,0 +1,122 @@
+/**
+ * Linux tab of the setup modal — distro selector spec.
+ *
+ * The manual-install accordion offers per-distro instructions via a
+ * SelectDropdown (data-testid="linux-distro-select"). This validates that
+ * switching distros swaps the repository and install commands, that
+ * CLI-only distros render no desktop-app line, and that the copy button
+ * emits commands without comment lines. Runs against /install, which
+ * renders the setup modal without authentication.
+ */
+import { expect, test } from "@playwright/test";
+
+async function openLinuxManualInstall(page: import("@playwright/test").Page) {
+  await page.goto("/install");
+  await page.getByTestId("setup-netbird-modal").waitFor();
+  await page.getByRole("tab", { name: /linux/i }).click();
+  await page.getByText("Install manually with a package manager").click();
+  await page.getByTestId("linux-distro-select").waitFor();
+}
+
+async function selectDistro(
+  page: import("@playwright/test").Page,
+  name: string,
+) {
+  await page.getByTestId("linux-distro-select").click();
+  await page.getByRole("option", { name }).click();
+}
+
+test.describe("Setup modal Linux distro instructions", () => {
+  test("defaults to APT with repository, install and run steps", async ({
+    page,
+  }) => {
+    await openLinuxManualInstall(page);
+
+    const modal = page.getByTestId("setup-netbird-modal");
+    await expect(modal.getByTestId("linux-distro-select")).toContainText(
+      "Debian / Ubuntu (APT)",
+    );
+    await expect(modal).toContainText(
+      "https://pkgs.netbird.io/debian stable main",
+    );
+    await expect(modal).toContainText("sudo apt-get install netbird");
+    await expect(modal).toContainText(
+      "sudo apt-get install netbird-ui libgtk-4-1 libwebkitgtk-6.0-4 xdg-utils",
+    );
+    // The run step stays present alongside the distro-specific steps
+    await expect(modal.getByText("netbird up")).toHaveCount(2);
+  });
+
+  test("switches repository and install commands per distro", async ({
+    page,
+  }) => {
+    await openLinuxManualInstall(page);
+    const modal = page.getByTestId("setup-netbird-modal");
+
+    await selectDistro(page, "Fedora (DNF)");
+    await expect(modal).toContainText("/etc/yum.repos.d/netbird.repo");
+    await expect(modal).toContainText("sudo dnf install netbird");
+    await expect(modal).toContainText(
+      "sudo dnf install netbird-ui gtk4 webkitgtk6.0 xdg-utils",
+    );
+    await expect(modal).not.toContainText("apt-get");
+    await expect(modal).not.toContainText("epel-release");
+
+    await selectDistro(page, "RHEL / AlmaLinux / Rocky (DNF)");
+    await expect(modal).toContainText("sudo dnf install epel-release -y");
+    await expect(modal).toContainText(
+      "sudo dnf install netbird-ui gtk4 webkitgtk6.0 xdg-utils",
+    );
+  });
+
+  test("imports the repository GPG key on openSUSE", async ({ page }) => {
+    await openLinuxManualInstall(page);
+    const modal = page.getByTestId("setup-netbird-modal");
+
+    await selectDistro(page, "openSUSE (Zypper)");
+    await expect(modal).toContainText(
+      "sudo zypper --non-interactive addrepo -f -g https://pkgs.netbird.io/yum/ netbird",
+    );
+    await expect(modal).toContainText(
+      "sudo zypper --gpg-auto-import-keys refresh netbird",
+    );
+    await expect(modal).toContainText("sudo zypper install netbird");
+    await expect(modal).toContainText(
+      "sudo zypper install netbird-ui libgtk-4-1 libwebkitgtk-6_0-4 xdg-utils",
+    );
+    // Zypper ignores gpgkey= in a .repo file, so that snippet must not appear
+    await expect(modal).not.toContainText("/etc/yum.repos.d/netbird.repo");
+  });
+
+  test("offers CLI only on Amazon Linux", async ({ page }) => {
+    await openLinuxManualInstall(page);
+    const modal = page.getByTestId("setup-netbird-modal");
+
+    await selectDistro(page, "Amazon Linux (YUM)");
+    await expect(modal).toContainText("sudo yum install netbird");
+    await expect(modal).not.toContainText("netbird-ui");
+    await expect(modal).not.toContainText("for CLI only");
+    await expect(modal).toContainText("only the CLI is available");
+  });
+
+  test("copies install commands without comment lines", async ({
+    page,
+    context,
+  }) => {
+    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+    await openLinuxManualInstall(page);
+    const modal = page.getByTestId("setup-netbird-modal");
+
+    // Copy buttons in DOM order: install script, run command, repository,
+    // install step, run command (accordion).
+    await modal.getByTestId("copy-to-clipboard").nth(3).click();
+    const copied = await page.evaluate(() => navigator.clipboard.readText());
+    expect(copied, "clipboard should hold runnable commands only").toBe(
+      [
+        "sudo apt-get update",
+        "sudo apt-get install netbird",
+        "sudo apt-get install netbird-ui libgtk-4-1 libwebkitgtk-6.0-4 xdg-utils",
+      ].join("\n"),
+    );
+  });
+});

e2e/tests/team-service-users.spec.ts

@@ -22,7 +22,15 @@ test.describe.serial("Team - Service Users @team", () => {
   test("Should update role and manage access tokens", async ({ dashboardAsOwner: page }) => {
     await page.locator("tr").getByText(regularUser).click();
     await changeRoleTo(page, "Admin");
+    // Await the PUT so the role change is persisted before the next serial
+    // test asserts it — clicking save alone returns before the request lands.
+    const saveResponse = page.waitForResponse(
+      (resp) =>
+        resp.url().includes("/api/users/") && resp.request().method() === "PUT",
+      { timeout: 30_000 },
+    );
     await page.getByTestId("save-changes").click();
+    await saveResponse;
 
     // Create and delete access token
     const tokenName = generateRandomName("tkn_");

src/components/VersionInfo.tsx

@@ -17,6 +17,13 @@ function formatVersion(version: string): string {
   return version;
 }
 
+// Self-hosted builds can carry a numeric build suffix (e.g. "0.76.3-31256681241")
+// that overflows the sidebar. Show the semver only and keep the rest for the
+// tooltip. Pre-release labels like "-rc.1" are left intact so they stay visible.
+function formatShortVersion(version: string): string {
+  return formatVersion(version).replace(/^(v?\d+(?:\.\d+)*)-\d+$/, "$1");
+}
+
 function compareVersions(current: string, latest: string): boolean {
   // Returns true if latest is newer than current
   if (!current || !latest) return false;
@@ -98,9 +105,15 @@ const NavigationVersionInfoContent = () => {
       <div className="flex flex-col gap-1 text-nb-gray-400">
         <FullTooltip
           content={
-            <span className="text-xs">
-              Latest: {formatVersion(versionInfo.management_available_version)}
-            </span>
+            <div className="text-xs flex flex-col gap-1">
+              <span>
+                Installed:{" "}
+                {formatVersion(versionInfo.management_current_version)}
+              </span>
+              <span>
+                Latest: {formatVersion(versionInfo.management_available_version)}
+              </span>
+            </div>
           }
           side="top"
           className="w-full"
@@ -108,15 +121,18 @@ const NavigationVersionInfoContent = () => {
           <div className="flex items-center justify-between w-full cursor-default">
             <span>Management</span>
             <span className="text-nb-gray-300 font-medium">
-              {formatVersion(versionInfo.management_current_version)}
+              {formatShortVersion(versionInfo.management_current_version)}
             </span>
           </div>
         </FullTooltip>
         <FullTooltip
           content={
-            <span className="text-xs">
-              Latest: {formatVersion(versionInfo.dashboard_available_version)}
-            </span>
+            <div className="text-xs flex flex-col gap-1">
+              <span>Installed: {formatVersion(dashboardVersion)}</span>
+              <span>
+                Latest: {formatVersion(versionInfo.dashboard_available_version)}
+              </span>
+            </div>
           }
           side="top"
           className="w-full"
@@ -124,7 +140,7 @@ const NavigationVersionInfoContent = () => {
           <div className="flex items-center justify-between w-full cursor-default">
             <span>Dashboard</span>
             <span className="text-nb-gray-300 font-medium">
-              {formatVersion(dashboardVersion)}
+              {formatShortVersion(dashboardVersion)}
             </span>
           </div>
         </FullTooltip>

src/components/table/DataTableHeader.tsx

@@ -57,9 +57,9 @@ export default function DataTableHeader({
         {children}
         {sorting &&
           (column.getIsSorted() === "desc" ? (
-            <IconSortAscending size={16} />
-          ) : (
             <IconSortDescending size={16} />
+          ) : (
+            <IconSortAscending size={16} />
           ))}
       </div>
     </FullTooltip>

src/modules/agent-network/AIProvidersProvider.tsx

@@ -27,6 +27,13 @@ export type APIProviderModel = {
   id: string;
   input_per_1k: number;
   output_per_1k: number;
+  // Optional cache rates. Omitted on the wire = inherit NetBird's
+  // default rate for this model (the backend folds it in at synthesis
+  // time); explicit 0 = no discount (bucket bills at the input rate).
+  // Never coerce undefined to 0 — the two mean different things.
+  cached_input_per_1k?: number;
+  cache_read_per_1k?: number;
+  cache_creation_per_1k?: number;
 };
 
 export type APIProvider = {
@@ -118,8 +125,10 @@ export type APIAgentNetworkSettings = {
   enable_prompt_collection: boolean;
   redact_pii: boolean;
   access_log_retention_days?: number;
-  created_at: string;
-  updated_at: string;
+  // Absent until the account is bootstrapped — pre-bootstrap the backend
+  // returns the defaults without a persisted row to date.
+  created_at?: string;
+  updated_at?: string;
 };
 
 // APIAgentNetworkSettingsRequest matches the PUT /agent-network/settings
@@ -156,6 +165,9 @@ function fromAPI(p: APIProvider): AIProvider {
     id: m.id,
     inputPer1k: m.input_per_1k,
     outputPer1k: m.output_per_1k,
+    cachedInputPer1k: m.cached_input_per_1k,
+    cacheReadPer1k: m.cache_read_per_1k,
+    cacheCreationPer1k: m.cache_creation_per_1k,
   }));
   return {
     id: p.id,
@@ -191,10 +203,16 @@ function fromAPI(p: APIProvider): AIProvider {
 }
 
 function toAPIModels(models: ProviderModel[]): APIProviderModel[] {
+  // undefined cache rates stay undefined so JSON.stringify omits the
+  // key: an omitted rate inherits NetBird's default, an explicit 0
+  // disables the discount. Coercing here would change billing.
   return models.map((m) => ({
     id: m.id,
     input_per_1k: m.inputPer1k,
     output_per_1k: m.outputPer1k,
+    cached_input_per_1k: m.cachedInputPer1k,
+    cache_read_per_1k: m.cacheReadPer1k,
+    cache_creation_per_1k: m.cacheCreationPer1k,
   }));
 }
 
@@ -505,10 +523,12 @@ export function useAIProviders() {
 }
 
 // useAgentNetworkSettings fetches the account-level agent-network settings.
-// Returns null until the first provider is created — newer backends respond
-// 200 + JSON null while no settings row exists; older backends respond 404,
-// which we still tolerate via ignoreError so older deploys don't surface
-// a spurious error in the empty state.
+// Returns null until the account is bootstrapped (first provider create, or
+// a settings update carrying a cluster). Backends signal the unbootstrapped
+// state differently by age: current ones respond 200 with the defaults and
+// an empty cluster/subdomain/endpoint, older ones 200 + JSON null, and the
+// oldest 404 — tolerated via ignoreError so old deploys don't surface a
+// spurious error in the empty state. All three normalize to null here.
 export function useAgentNetworkSettings() {
   const { enabled: agentNetworkEnabled } = useAgentNetworkMode();
   const { data, error, isLoading, mutate } =
@@ -518,11 +538,14 @@ export function useAgentNetworkSettings() {
       true,
       agentNetworkEnabled,
     );
-  const settings = useMemo<AgentNetworkSettings | null>(
-    () => (data ? settingsFromAPI(data) : null),
-    [data],
-  );
   const notFound = !!error && (error as { code?: number }).code === 404;
+  // SWR keeps the previous data alongside the error (keepPreviousData), so a
+  // later 404 must not expose the stale settings; other transient errors keep
+  // them, which is what keepPreviousData is for.
+  const settings = useMemo<AgentNetworkSettings | null>(
+    () => (data && data.endpoint && !notFound ? settingsFromAPI(data) : null),
+    [data, notFound],
+  );
   return {
     settings,
     isLoading: isLoading && !notFound,
@@ -660,7 +683,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 {
@@ -745,7 +768,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}`);

src/modules/agent-network/AgentAccessLogExpandedRow.tsx

@@ -26,17 +26,39 @@ export default function AgentAccessLogExpandedRow({ entry }: Readonly<Props>) {
   const hasBody = hasPrompt || hasCompletion;
   const denyReason = formatDenyReason(entry.denyReason);
 
+  const cacheRead = entry.cachedInputTokens ?? 0;
+  const cacheWrite = entry.cacheCreationTokens ?? 0;
   const metadata: Record<string, string> = {
     "plg.llm.provider": entry.providerId,
     "plg.llm.model": entry.model,
     "plg.llm.input_tokens": String(entry.inputTokens),
     "plg.llm.output_tokens": String(entry.outputTokens),
-    "plg.llm.total_tokens": String(entry.inputTokens + entry.outputTokens),
+    "plg.llm.total_tokens": String(
+      entry.inputTokens + entry.outputTokens + cacheRead + cacheWrite,
+    ),
     "plg.llm.cost_usd": entry.costUsd.toFixed(6),
     "plg.llm.stream": entry.stream ? "true" : "false",
     "plg.agentnetwork.policy_name": entry.policyName,
     "plg.agentnetwork.user_groups": (entry.userGroups ?? []).join(", "),
   };
+  if (cacheRead > 0 || cacheWrite > 0) {
+    metadata["plg.llm.cached_input_tokens"] = String(cacheRead);
+    metadata["plg.llm.cache_creation_tokens"] = String(cacheWrite);
+    metadata["plg.cost.usd_cache"] = (entry.cacheCostUsd ?? 0).toFixed(6);
+  }
+  // Per-bucket cost keys mirror the proxy's cost.usd_* metadata. Emitted only
+  // when the server sent the breakdown, so a row from an older management
+  // server shows no misleading zeros.
+  if (entry.inputCostUsd !== undefined || entry.outputCostUsd !== undefined) {
+    metadata["plg.cost.usd_input"] = (entry.inputCostUsd ?? 0).toFixed(6);
+    metadata["plg.cost.usd_cached_input"] = (
+      entry.cachedInputCostUsd ?? 0
+    ).toFixed(6);
+    metadata["plg.cost.usd_cache_creation"] = (
+      entry.cacheCreationCostUsd ?? 0
+    ).toFixed(6);
+    metadata["plg.cost.usd_output"] = (entry.outputCostUsd ?? 0).toFixed(6);
+  }
   if (isDeny) {
     metadata["plg.llm_policy.decision"] = "deny";
     metadata["plg.llm_policy.reason"] = entry.denyReason ?? "unknown";

src/modules/agent-network/AgentAccessLogTable.tsx

@@ -261,13 +261,14 @@ export default function AgentAccessLogTable({
           </DataTableHeader>
         ),
         cell: ({ row }) => (
-          <span
-            className={
-              "text-nb-gray-300 text-[0.82rem] px-3 py-2 font-mono whitespace-nowrap"
-            }
-          >
-            ${row.original.costUsd.toFixed(4)}
-          </span>
+          <CostCell
+            costUsd={row.original.costUsd}
+            cacheCostUsd={row.original.cacheCostUsd}
+            inputCostUsd={row.original.inputCostUsd}
+            cachedInputCostUsd={row.original.cachedInputCostUsd}
+            cacheCreationCostUsd={row.original.cacheCreationCostUsd}
+            outputCostUsd={row.original.outputCostUsd}
+          />
         ),
       },
       {
@@ -409,6 +410,8 @@ export default function AgentAccessLogTable({
               {
                 inputTokens: row.original.inputTokens,
                 outputTokens: row.original.outputTokens,
+                cachedInputTokens: row.original.cachedInputTokens,
+                cacheCreationTokens: row.original.cacheCreationTokens,
               } as AIAccessLogEntry
             }
           />
@@ -423,13 +426,14 @@ export default function AgentAccessLogTable({
           </DataTableHeader>
         ),
         cell: ({ row }) => (
-          <span
-            className={
-              "text-nb-gray-300 text-[0.82rem] px-3 py-2 font-mono whitespace-nowrap"
-            }
-          >
-            ${row.original.costUsd.toFixed(4)}
-          </span>
+          <CostCell
+            costUsd={row.original.costUsd}
+            cacheCostUsd={row.original.cacheCostUsd}
+            inputCostUsd={row.original.inputCostUsd}
+            cachedInputCostUsd={row.original.cachedInputCostUsd}
+            cacheCreationCostUsd={row.original.cacheCreationCostUsd}
+            outputCostUsd={row.original.outputCostUsd}
+          />
         ),
       },
       {
@@ -441,12 +445,13 @@ export default function AgentAccessLogTable({
           </DataTableHeader>
         ),
         // Same Reason cell as the flat view (deny reason, or the authorising
-        // policy link). A session is one policy decision in practice; surface a
-        // denied request when present, otherwise the first entry.
+        // policy link). Prefer an allowed request so a session that succeeded
+        // shows the authorising policy rather than an incidental deny reason;
+        // only surface a deny reason when every request was denied.
         cell: ({ row }) => {
           const entries = row.original.entries;
           const representative =
-            entries.find((e) => e.decision === "deny") ?? entries[0];
+            entries.find((e) => e.decision === "allow") ?? entries[0];
           return representative ? (
             <ReasonCell entry={representative} />
           ) : (
@@ -992,64 +997,210 @@ function ProviderCell({
   );
 }
 
+// TokenBreakdown is the hover content shared by the flat Tokens column and the
+// session's per-request rows: one line per token bucket plus a total. Buckets
+// default to 0 so it renders for denied requests that carry partial counts.
+function TokenBreakdown({ entry }: { entry: AIAccessLogEntry }) {
+  const cacheRead = entry.cachedInputTokens ?? 0;
+  const cacheWrite = entry.cacheCreationTokens ?? 0;
+  // Anthropic-shape cache buckets are additive to input tokens, so they count toward the total.
+  const total =
+    (entry.inputTokens ?? 0) +
+    (entry.outputTokens ?? 0) +
+    cacheRead +
+    cacheWrite;
+  return (
+    <div className={"text-xs flex flex-col gap-1"}>
+      <div className={"flex items-center gap-2 whitespace-nowrap"}>
+        <span className={"font-medium"}>
+          {(entry.inputTokens ?? 0).toLocaleString()}
+        </span>
+        <span className={"text-nb-gray-400"}>input</span>
+      </div>
+      <div className={"flex items-center gap-2 whitespace-nowrap"}>
+        <span className={"font-medium"}>
+          {(entry.outputTokens ?? 0).toLocaleString()}
+        </span>
+        <span className={"text-nb-gray-400"}>output</span>
+      </div>
+      <div className={"flex items-center gap-2 whitespace-nowrap"}>
+        <span className={"font-medium"}>{cacheRead.toLocaleString()}</span>
+        <span className={"text-nb-gray-400"}>cache read</span>
+      </div>
+      <div className={"flex items-center gap-2 whitespace-nowrap"}>
+        <span className={"font-medium"}>{cacheWrite.toLocaleString()}</span>
+        <span className={"text-nb-gray-400"}>cache write</span>
+      </div>
+      <div
+        className={
+          "border-t border-nb-gray-800 mt-0.5 pt-1 flex items-center gap-2 text-nb-gray-400 whitespace-nowrap"
+        }
+      >
+        <span className={"font-medium text-nb-gray-200"}>
+          {total.toLocaleString()}
+        </span>
+        <span>total</span>
+      </div>
+    </div>
+  );
+}
+
 function TokensCell({ entry }: { entry: AIAccessLogEntry }) {
+  // Cache-only requests carry no input/output but real cache read/write tokens,
+  // so weigh all four buckets — matching TokenBreakdown's total.
   if (
-    (entry.inputTokens === undefined || entry.inputTokens === 0) &&
-    (entry.outputTokens === undefined || entry.outputTokens === 0)
+    (entry.inputTokens ?? 0) === 0 &&
+    (entry.outputTokens ?? 0) === 0 &&
+    (entry.cachedInputTokens ?? 0) === 0 &&
+    (entry.cacheCreationTokens ?? 0) === 0
   ) {
     return <EmptyRow />;
   }
-  const total = (entry.inputTokens ?? 0) + (entry.outputTokens ?? 0);
   return (
-    <FullTooltip
-      content={
-        <div className={"text-xs flex flex-col gap-1"}>
-          <div className={"flex items-center gap-2 whitespace-nowrap"}>
-            <ArrowUpIcon size={12} className={"text-sky-400 shrink-0"} />
-            <span className={"font-medium"}>
-              {entry.inputTokens.toLocaleString()}
-            </span>
-            <span className={"text-nb-gray-400"}>input</span>
-          </div>
-          <div className={"flex items-center gap-2 whitespace-nowrap"}>
-            <ArrowDownIcon size={12} className={"text-netbird shrink-0"} />
-            <span className={"font-medium"}>
-              {entry.outputTokens.toLocaleString()}
-            </span>
-            <span className={"text-nb-gray-400"}>output</span>
-          </div>
-          <div
-            className={
-              "border-t border-nb-gray-800 mt-0.5 pt-1 flex items-center gap-2 text-nb-gray-400 whitespace-nowrap"
-            }
-          >
-            <span className={"w-3 shrink-0"} aria-hidden={true} />
-            <span className={"font-medium text-nb-gray-200"}>
-              {total.toLocaleString()}
-            </span>
-            <span>total</span>
-          </div>
-        </div>
-      }
-    >
+    <FullTooltip content={<TokenBreakdown entry={entry} />}>
       <div
         className={"flex flex-col text-xs gap-1 text-nb-gray-300 font-medium"}
       >
         <div className={"flex gap-2 items-center whitespace-nowrap"}>
           <ArrowUpIcon size={15} className={"text-sky-400"} />
           <span className={"sr-only"}>Input:</span>
-          {entry.inputTokens.toLocaleString()}
+          {(entry.inputTokens ?? 0).toLocaleString()}
         </div>
         <div className={"flex gap-2 items-center whitespace-nowrap"}>
           <ArrowDownIcon size={15} className={"text-netbird"} />
           <span className={"sr-only"}>Output:</span>
-          {entry.outputTokens.toLocaleString()}
+          {(entry.outputTokens ?? 0).toLocaleString()}
         </div>
       </div>
     </FullTooltip>
   );
 }
 
+// CostRow is one line of the Cost hover breakdown: an amount plus its label.
+function CostRow({ amount, label }: { amount: number; label: string }) {
+  return (
+    <div className={"flex items-center gap-2 whitespace-nowrap"}>
+      <span className={"font-medium"}>${amount.toFixed(4)}</span>
+      <span className={"text-nb-gray-400 font-sans"}>{label}</span>
+    </div>
+  );
+}
+
+type CostFields = {
+  costUsd: number;
+  cacheCostUsd?: number;
+  inputCostUsd?: number;
+  cachedInputCostUsd?: number;
+  cacheCreationCostUsd?: number;
+  outputCostUsd?: number;
+};
+
+// hasCostBreakdown reports whether a request carries enough cost detail to be
+// worth a hover: a cache split or a per-bucket breakdown. Shared so the flat
+// 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;
+  return cache > 0 || perBucket;
+}
+
+// CostBreakdown is the hover content shared by the flat Cost column and the
+// session's per-request rows.
+//
+// Servers that send the per-bucket breakdown get one line per bucket the
+// provider bills separately (input / output / cache read / cache write). Older
+// servers send only the two aggregates, so the hover falls back to the coarse
+// "input + output" vs "cache" split derivable from those — the two shapes are
+// distinguished by whether inputCostUsd is defined, not by whether it is zero.
+function CostBreakdown({
+  costUsd,
+  cacheCostUsd,
+  inputCostUsd,
+  cachedInputCostUsd,
+  cacheCreationCostUsd,
+  outputCostUsd,
+}: CostFields) {
+  const cache = cacheCostUsd ?? 0;
+  const hasBreakdown =
+    inputCostUsd !== undefined || outputCostUsd !== undefined;
+  const cacheRead = cachedInputCostUsd ?? 0;
+  const cacheWrite = cacheCreationCostUsd ?? 0;
+  return (
+    <div className={"text-xs flex flex-col gap-1 font-mono"}>
+      {hasBreakdown ? (
+        <>
+          {/* All four buckets, including zeros: a zero cache-read line is
+              information (the request missed the cache), and a fixed set of
+              rows keeps the hover comparable between requests. */}
+          <CostRow amount={inputCostUsd ?? 0} label={"input"} />
+          <CostRow amount={outputCostUsd ?? 0} label={"output"} />
+          <CostRow amount={cacheRead} label={"cache read"} />
+          <CostRow amount={cacheWrite} label={"cache write"} />
+        </>
+      ) : (
+        <>
+          <CostRow amount={costUsd - cache} label={"input + output"} />
+          <CostRow amount={cache} label={"cache"} />
+        </>
+      )}
+      <div
+        className={
+          "border-t border-nb-gray-800 mt-0.5 pt-1 flex items-center gap-2 text-nb-gray-400 whitespace-nowrap"
+        }
+      >
+        <span className={"font-medium text-nb-gray-200"}>
+          ${costUsd.toFixed(4)}
+        </span>
+        <span className={"font-sans"}>total</span>
+      </div>
+    </div>
+  );
+}
+
+// CostCell renders the metered USD cost with a hover breakdown of the buckets
+// it was billed from (see CostBreakdown).
+function CostCell(fields: CostFields) {
+  const {
+    costUsd,
+    cacheCostUsd,
+    inputCostUsd,
+    cachedInputCostUsd,
+    cacheCreationCostUsd,
+    outputCostUsd,
+  } = fields;
+  const cache = cacheCostUsd ?? 0;
+
+  // Nothing was metered: the request never reached a provider (denied before
+  // routing), or ran on a model the proxy deliberately doesn't price. A dash
+  // reads as "not metered" — matching TokensCell — where "$0.0000" plus a
+  // tooltip of zeros would imply a priced request that happened to be free.
+  const buckets = [
+    inputCostUsd ?? 0,
+    cachedInputCostUsd ?? 0,
+    cacheCreationCostUsd ?? 0,
+    outputCostUsd ?? 0,
+  ];
+  if (costUsd === 0 && cache === 0 && buckets.every((b) => b === 0)) {
+    return <EmptyRow />;
+  }
+
+  const display = (
+    <span
+      className={
+        "text-nb-gray-300 text-[0.82rem] px-3 py-2 font-mono whitespace-nowrap"
+      }
+    >
+      ${costUsd.toFixed(4)}
+    </span>
+  );
+  // Nothing to break out: no cache spend and no per-bucket split to show.
+  if (!hasCostBreakdown(fields)) return display;
+
+  return (
+    <FullTooltip content={<CostBreakdown {...fields} />}>{display}</FullTooltip>
+  );
+}
+
 // resolveProviderFn resolves a request's configured provider (by the router's
 // stamped resolved_provider_id) — shared by the session cells so they reuse the
 // flat row's provider resolution.
@@ -1204,7 +1355,13 @@ function SessionEntriesRow({ session }: { session: AIAccessLogSession }) {
       >
         {[...session.entries].reverse().map((entry) => {
           const isOpen = open.includes(entry.id);
-          const total = (entry.inputTokens ?? 0) + (entry.outputTokens ?? 0);
+          // Sum all four buckets so cache-only requests count and the figure
+          // matches TokenBreakdown's total.
+          const total =
+            (entry.inputTokens ?? 0) +
+            (entry.outputTokens ?? 0) +
+            (entry.cachedInputTokens ?? 0) +
+            (entry.cacheCreationTokens ?? 0);
           const isError = entry.decision === "deny" || entry.status >= 400;
           return (
             <div key={entry.id}>
@@ -1277,20 +1434,30 @@ function SessionEntriesRow({ session }: { session: AIAccessLogSession }) {
                 >
                   {entry.model || "—"}
                 </code>
-                <span
-                  className={
-                    "text-xs text-nb-gray-400 font-mono whitespace-nowrap tabular-nums w-[110px] text-right shrink-0"
-                  }
+                <FullTooltip
+                  disabled={total === 0}
+                  content={<TokenBreakdown entry={entry} />}
                 >
-                  {total.toLocaleString()} tokens
-                </span>
-                <span
-                  className={
-                    "text-xs text-nb-gray-400 font-mono whitespace-nowrap tabular-nums w-[64px] text-right shrink-0"
-                  }
+                  <span
+                    className={
+                      "text-xs text-nb-gray-400 font-mono whitespace-nowrap tabular-nums w-[110px] text-right shrink-0"
+                    }
+                  >
+                    {total.toLocaleString()} tokens
+                  </span>
+                </FullTooltip>
+                <FullTooltip
+                  disabled={!hasCostBreakdown(entry)}
+                  content={<CostBreakdown {...entry} />}
                 >
-                  ${entry.costUsd.toFixed(4)}
-                </span>
+                  <span
+                    className={
+                      "text-xs text-nb-gray-400 font-mono whitespace-nowrap tabular-nums w-[64px] text-right shrink-0"
+                    }
+                  >
+                    ${entry.costUsd.toFixed(4)}
+                  </span>
+                </FullTooltip>
               </button>
               {isOpen && (
                 <div className={"border-t border-nb-gray-800/70"}>

src/modules/agent-network/AgentOverviewPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import ButtonGroup from "@components/ButtonGroup";
+import FullTooltip from "@components/FullTooltip";
 import InlineLink from "@components/InlineLink";
 import SquareIcon from "@components/SquareIcon";
 import { DataTable } from "@components/table/DataTable";
@@ -16,6 +17,7 @@ import {
   Tooltip,
 } from "chart.js";
 import useFetchApi from "@utils/api";
+import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
 import { ActivityIcon, ExternalLinkIcon } from "lucide-react";
 import * as React from "react";
@@ -42,6 +44,18 @@ type DayBucket = {
   input: number;
   output: number;
   cost: number;
+  // Prompt-cache accounting: read/write token buckets and the cache share of cost.
+  cacheRead: number;
+  cacheWrite: number;
+  cacheCost: number;
+  // Per-bucket cost split, so the Cost hover can break the day down the same
+  // way the access log breaks down a request. Undefined on older management
+  // servers that send only the two cost aggregates — undefined and zero mean
+  // different things here, so these stay optional.
+  inputCost?: number;
+  outputCost?: number;
+  cacheReadCost?: number;
+  cacheWriteCost?: number;
 };
 
 // AgentOverviewPanel shows account consumption over time as a per-day bar
@@ -206,13 +220,43 @@ function DailyBreakdownTable({ daily }: { daily: DayBucket[] }) {
       },
       {
         id: "total",
-        accessorFn: (row) => row.input + row.output,
+        accessorFn: (row) =>
+          row.input + row.output + row.cacheRead + row.cacheWrite,
         header: ({ column }) => (
           <DataTableHeader column={column}>Total Tokens</DataTableHeader>
         ),
-        cell: ({ row }) => (
-          <NumberCell value={row.original.input + row.original.output} />
-        ),
+        // Total includes the additive prompt-cache buckets; hover breaks them out.
+        cell: ({ row }) => {
+          const d = row.original;
+          const total = d.input + d.output + d.cacheRead + d.cacheWrite;
+          return (
+            <FullTooltip
+              content={
+                <div className={"text-xs flex flex-col gap-1"}>
+                  <BreakdownRow
+                    value={d.input.toLocaleString()}
+                    label={"input"}
+                  />
+                  <BreakdownRow
+                    value={d.output.toLocaleString()}
+                    label={"output"}
+                  />
+                  <BreakdownRow
+                    value={d.cacheRead.toLocaleString()}
+                    label={"cache read"}
+                  />
+                  <BreakdownRow
+                    value={d.cacheWrite.toLocaleString()}
+                    label={"cache write"}
+                  />
+                  <BreakdownTotal value={total.toLocaleString()} />
+                </div>
+              }
+            >
+              <NumberCell value={total} />
+            </FullTooltip>
+          );
+        },
       },
       {
         id: "cost",
@@ -220,13 +264,74 @@ function DailyBreakdownTable({ daily }: { daily: DayBucket[] }) {
         header: ({ column }) => (
           <DataTableHeader column={column}>Cost</DataTableHeader>
         ),
-        cell: ({ row }) => (
-          <span
-            className={"text-nb-gray-300 px-3 py-2 font-mono whitespace-nowrap"}
-          >
-            ${row.original.cost.toFixed(2)}
-          </span>
-        ),
+        // Mirrors the access log's Cost hover: one row per bucket the provider
+        // bills separately when the server sends the split, otherwise the coarse
+        // cache-vs-rest split derivable from the two aggregates. The shapes are
+        // told apart by whether inputCost is defined, not by whether it is zero.
+        cell: ({ row }) => {
+          const d = row.original;
+          const hasBreakdown =
+            d.inputCost !== undefined || d.outputCost !== undefined;
+          const display = (
+            <span
+              className={
+                "text-nb-gray-300 px-3 py-2 font-mono whitespace-nowrap"
+              }
+            >
+              ${d.cost.toFixed(2)}
+            </span>
+          );
+          // Nothing to break out: no cache spend and no per-bucket split.
+          if (d.cacheCost <= 0 && !hasBreakdown) return display;
+          return (
+            <FullTooltip
+              content={
+                <div className={"text-xs flex flex-col gap-1 font-mono"}>
+                  {hasBreakdown ? (
+                    <>
+                      <BreakdownRow
+                        mono={true}
+                        value={usd(d.inputCost ?? 0)}
+                        label={"input"}
+                      />
+                      <BreakdownRow
+                        mono={true}
+                        value={usd(d.outputCost ?? 0)}
+                        label={"output"}
+                      />
+                      <BreakdownRow
+                        mono={true}
+                        value={usd(d.cacheReadCost ?? 0)}
+                        label={"cache read"}
+                      />
+                      <BreakdownRow
+                        mono={true}
+                        value={usd(d.cacheWriteCost ?? 0)}
+                        label={"cache write"}
+                      />
+                    </>
+                  ) : (
+                    <>
+                      <BreakdownRow
+                        mono={true}
+                        value={usd(d.cost - d.cacheCost)}
+                        label={"input + output"}
+                      />
+                      <BreakdownRow
+                        mono={true}
+                        value={usd(d.cacheCost)}
+                        label={"cache"}
+                      />
+                    </>
+                  )}
+                  <BreakdownTotal mono={true} value={usd(d.cost)} />
+                </div>
+              }
+            >
+              {display}
+            </FullTooltip>
+          );
+        },
       },
     ],
     [],
@@ -280,6 +385,59 @@ function NumberCell({ value }: { value: number }) {
   );
 }
 
+// The two hover breakdowns below follow the access-log table's Tokens and Cost
+// hovers: one "<value> <label>" row per bucket, then the day's aggregate on a
+// separated total row. Buckets are listed even when zero — a zero cache-read
+// line says the day never hit the cache, and a fixed set of rows keeps the
+// hover comparable between days.
+
+// usd renders a breakdown amount at the precision the router meters at. The
+// Cost column rounds a whole day to cents, but the hover is there for the
+// detail — prompt-cache reads in particular are routinely sub-cent.
+function usd(amount: number): string {
+  return `$${amount.toFixed(4)}`;
+}
+
+// mono keeps cost figures aligned digit-for-digit; labels stay in the body face
+// so they don't read as data.
+function BreakdownRow({
+  value,
+  label,
+  mono = false,
+}: {
+  value: string;
+  label: string;
+  mono?: boolean;
+}) {
+  return (
+    <div className={"flex items-center gap-2 whitespace-nowrap"}>
+      <span className={"font-medium"}>{value}</span>
+      <span className={cn("text-nb-gray-400", mono && "font-sans")}>
+        {label}
+      </span>
+    </div>
+  );
+}
+
+function BreakdownTotal({
+  value,
+  mono = false,
+}: {
+  value: string;
+  mono?: boolean;
+}) {
+  return (
+    <div
+      className={
+        "border-t border-nb-gray-800 mt-0.5 pt-1 flex items-center gap-2 text-nb-gray-400 whitespace-nowrap"
+      }
+    >
+      <span className={"font-medium text-nb-gray-200"}>{value}</span>
+      <span className={cn(mono && "font-sans")}>total</span>
+    </div>
+  );
+}
+
 function ConsumptionByDayChart({
   daily,
   metric,
@@ -340,6 +498,25 @@ function ConsumptionByDayChart({
                   : `${ctx.dataset.label}: ${Number(
                       ctx.parsed.y,
                     ).toLocaleString()}`,
+              // Surface the day's prompt-cache share on hover without adding chart series.
+              // Gate on the figure this metric actually shows: a day with cache
+              // tokens but no cache spend (unpriced model) would otherwise
+              // render "Cache: $0.00", implying a priced-but-free day.
+              afterBody: (items) => {
+                const d = daily[items[0]?.dataIndex ?? -1];
+                if (!d) return [];
+                if (metric === "cost") {
+                  return d.cacheCost > 0
+                    ? [`Cache: $${d.cacheCost.toFixed(2)}`]
+                    : [];
+                }
+                return d.cacheRead + d.cacheWrite > 0
+                  ? [
+                      `Cache read: ${d.cacheRead.toLocaleString()}`,
+                      `Cache write: ${d.cacheWrite.toLocaleString()}`,
+                    ]
+                  : [];
+              },
             },
           },
         },
@@ -394,6 +571,13 @@ function toDailyBuckets(buckets: APIAgentNetworkUsageBucket[]): DayBucket[] {
       input: b.input_tokens ?? 0,
       output: b.output_tokens ?? 0,
       cost: b.cost_usd ?? 0,
+      cacheRead: b.cached_input_tokens ?? 0,
+      cacheWrite: b.cache_creation_tokens ?? 0,
+      cacheCost: b.cache_cost_usd ?? 0,
+      inputCost: b.input_cost_usd,
+      outputCost: b.output_cost_usd,
+      cacheReadCost: b.cached_input_cost_usd,
+      cacheWriteCost: b.cache_creation_cost_usd,
     });
   }
 
@@ -406,7 +590,17 @@ function toDailyBuckets(buckets: APIAgentNetworkUsageBucket[]): DayBucket[] {
   // Cap at a year of days as a defensive bound against a bad range.
   for (let i = 0; i < 366 && !cur.isAfter(end); i++) {
     const key = cur.format("YYYY-MM-DD");
-    out.push(map.get(key) ?? { key, input: 0, output: 0, cost: 0 });
+    out.push(
+      map.get(key) ?? {
+        key,
+        input: 0,
+        output: 0,
+        cost: 0,
+        cacheRead: 0,
+        cacheWrite: 0,
+        cacheCost: 0,
+      },
+    );
     cur = cur.add(1, "day");
   }
   return out;

src/modules/agent-network/agentAccessLogApi.ts

@@ -24,6 +24,17 @@ export type APIAgentNetworkAccessLog = {
   output_tokens: number;
   total_tokens: number;
   cost_usd: number;
+  // Prompt-cache accounting. Optional — absent on older management servers.
+  cached_input_tokens?: number;
+  cache_creation_tokens?: number;
+  cache_cost_usd?: number;
+  // Per-bucket cost breakdown — the base of the cost fields; cost_usd is their
+  // sum and cache_cost_usd the cache pair. Optional — absent on older
+  // management servers, where only the two aggregates are available.
+  input_cost_usd?: number;
+  cached_input_cost_usd?: number;
+  cache_creation_cost_usd?: number;
+  output_cost_usd?: number;
   user_id?: string;
   source_ip?: string;
   method?: string;
@@ -63,6 +74,16 @@ export type APIAgentNetworkAccessLogSession = {
   output_tokens: number;
   total_tokens: number;
   cost_usd: number;
+  cached_input_tokens?: number;
+  cache_creation_tokens?: number;
+  cache_cost_usd?: number;
+  // Per-bucket cost breakdown — the base of the cost fields; cost_usd is their
+  // sum and cache_cost_usd the cache pair. Optional — absent on older
+  // management servers, where only the two aggregates are available.
+  input_cost_usd?: number;
+  cached_input_cost_usd?: number;
+  cache_creation_cost_usd?: number;
+  output_cost_usd?: number;
   providers?: string[];
   models?: string[];
   decision: string;
@@ -77,6 +98,16 @@ export type APIAgentNetworkUsageBucket = {
   output_tokens: number;
   total_tokens: number;
   cost_usd: number;
+  cached_input_tokens?: number;
+  cache_creation_tokens?: number;
+  cache_cost_usd?: number;
+  // Per-bucket cost breakdown — the base of the cost fields; cost_usd is their
+  // sum and cache_cost_usd the cache pair. Optional — absent on older
+  // management servers, where only the two aggregates are available.
+  input_cost_usd?: number;
+  cached_input_cost_usd?: number;
+  cache_creation_cost_usd?: number;
+  output_cost_usd?: number;
 };
 
 export type UsageGranularity = "day" | "week" | "month";
@@ -185,7 +216,14 @@ export function accessLogFromAgentAPI(
     model: entry.model ?? "",
     inputTokens: entry.input_tokens ?? 0,
     outputTokens: entry.output_tokens ?? 0,
+    cachedInputTokens: entry.cached_input_tokens ?? 0,
+    cacheCreationTokens: entry.cache_creation_tokens ?? 0,
     costUsd: entry.cost_usd ?? 0,
+    cacheCostUsd: entry.cache_cost_usd ?? 0,
+    inputCostUsd: entry.input_cost_usd,
+    cachedInputCostUsd: entry.cached_input_cost_usd,
+    cacheCreationCostUsd: entry.cache_creation_cost_usd,
+    outputCostUsd: entry.output_cost_usd,
     durationMs: entry.duration_ms,
     decision,
     denyReason: decision === "deny" ? entry.deny_reason : undefined,
@@ -228,7 +266,14 @@ export function accessLogSessionFromAgentAPI(
     inputTokens: session.input_tokens ?? 0,
     outputTokens: session.output_tokens ?? 0,
     totalTokens: session.total_tokens ?? 0,
+    cachedInputTokens: session.cached_input_tokens ?? 0,
+    cacheCreationTokens: session.cache_creation_tokens ?? 0,
     costUsd: session.cost_usd ?? 0,
+    cacheCostUsd: session.cache_cost_usd ?? 0,
+    inputCostUsd: session.input_cost_usd,
+    cachedInputCostUsd: session.cached_input_cost_usd,
+    cacheCreationCostUsd: session.cache_creation_cost_usd,
+    outputCostUsd: session.output_cost_usd,
     providers: session.providers ?? [],
     models: session.models ?? [],
     decision,

src/modules/agent-network/data/mockData.ts

@@ -43,6 +43,17 @@ export type ProviderModel = {
   id: string;
   inputPer1k: number;
   outputPer1k: number;
+  // Optional prompt-cache rates (USD per 1k tokens). undefined means
+  // "inherit NetBird's default rate for this model" — the backend folds
+  // the default in at synthesis time; an explicit 0 means "no discount,
+  // bill this cache bucket at the input rate". Keep undefined distinct
+  // from 0 when round-tripping.
+  // OpenAI shape: cached prompt tokens (a subset of input tokens).
+  cachedInputPer1k?: number;
+  // Anthropic shape: the two additive cache buckets (read ≈0.1x input,
+  // creation ≈1.25x input).
+  cacheReadPer1k?: number;
+  cacheCreationPer1k?: number;
 };
 
 export type AIProvider = {
@@ -175,7 +186,17 @@ export type AIAccessLogEntry = {
   model: string;
   inputTokens: number;
   outputTokens: number;
+  // Prompt-cache buckets: read/write token counts and the cache share of costUsd. Optional — absent on older management servers.
+  cachedInputTokens?: number;
+  cacheCreationTokens?: number;
   costUsd: number;
+  cacheCostUsd?: number;
+  // Per-bucket cost breakdown. Undefined (not 0) when the server predates the
+  // breakdown, so the UI can tell "no split available" from "split is zero".
+  inputCostUsd?: number;
+  cachedInputCostUsd?: number;
+  cacheCreationCostUsd?: number;
+  outputCostUsd?: number;
   durationMs: number;
   decision: AIAccessLogDecision;
   denyReason?: string;
@@ -213,7 +234,16 @@ export type AIAccessLogSession = {
   inputTokens: number;
   outputTokens: number;
   totalTokens: number;
+  cachedInputTokens?: number;
+  cacheCreationTokens?: number;
   costUsd: number;
+  cacheCostUsd?: number;
+  // Per-bucket cost breakdown. Undefined (not 0) when the server predates the
+  // breakdown, so the UI can tell "no split available" from "split is zero".
+  inputCostUsd?: number;
+  cachedInputCostUsd?: number;
+  cacheCreationCostUsd?: number;
+  outputCostUsd?: number;
   providers: string[]; // distinct vendor ids seen in the session
   models: string[]; // distinct models seen in the session
   decision: AIAccessLogDecision;

src/modules/agent-network/useProviderCatalog.ts

@@ -8,6 +8,12 @@ export type CatalogModel = {
   label: string;
   input_per_1k: number;
   output_per_1k: number;
+  // Default cache rates, present only when the model has one. Used to
+  // prefill the model row so the operator sees (and can override) the
+  // rate NetBird would bill with.
+  cached_input_per_1k?: number;
+  cache_read_per_1k?: number;
+  cache_creation_per_1k?: number;
   context_window: number;
 };
 
@@ -42,6 +48,13 @@ export type CatalogProvider = {
   // can choose between the always-on x-bf-lh- log family and the
   // declared x-bf-dim- telemetry family.
   identity_injection?: CatalogIdentityInjection;
+  // pricing_surfaces names the cost-meter surfaces this provider's
+  // traffic is metered under ("openai", "anthropic", "bedrock"). The
+  // modal uses it to decide which cache-rate fields apply: "openai" →
+  // cached input (subset discount); "anthropic"/"bedrock" → cache read
+  // + cache write (additive buckets). Absent for gateway/custom entries
+  // — show every cache field for those.
+  pricing_surfaces?: string[];
   models: CatalogModel[];
 };
 

src/modules/onboarding/Onboarding.tsx

@@ -30,7 +30,6 @@ import { OnboardingExplainDefaultPolicy } from "@/modules/onboarding/p2p/Onboard
 import { OnboardingFirstDevice } from "@/modules/onboarding/p2p/OnboardingFirstDevice";
 import { OnboardingSecondDevice } from "@/modules/onboarding/p2p/OnboardingSecondDevice";
 import { OnboardingTestP2P } from "@/modules/onboarding/p2p/OnboardingTestP2P";
-import { OnboardingDemoCall } from "@/modules/onboarding/OnboardingDemoCall";
 
 export interface OnboardingState {
   intent: Intent;
@@ -111,7 +110,6 @@ export const Onboarding = ({
 
   const [onboarding, dispatch] = useReducer(onboardingReducer, initial);
   const { step, intent } = onboarding;
-  const [demoCallModal, setDemoCallModal] = useState(false);
 
   const [resource, setResource] = useState<NetworkResource>();
   const [firstRoutingPeer, setFirstRoutingPeer] = useState<Peer>();
@@ -395,22 +393,10 @@ export const Onboarding = ({
                             payload: new Date().toISOString(),
                           });
                         }
-
-                        const companySize = fields?.find(
-                          (f) => f.name === "planned_users",
-                        );
-                        if (Number(companySize?.value) >= 50) {
-                          setDemoCallModal(true);
-                        }
                       }}
                     />
                   )}
 
-                  <OnboardingDemoCall
-                    open={demoCallModal}
-                    onOpenChange={setDemoCallModal}
-                  />
-
                   {step === 2 && (
                     <OnboardingIntent
                       useCases={useCases}

src/modules/onboarding/OnboardingDemoCall.tsx

@@ -1,261 +0,0 @@
-import Button from "@components/Button";
-import {
-  Modal,
-  ModalClose,
-  ModalContent,
-  ModalFooter,
-} from "@components/modal/Modal";
-import { CalendarClockIcon, CalendarIcon, Check } from "lucide-react";
-import Image from "next/image";
-import * as React from "react";
-import Avatar from "@/assets/avatars/jack.jpeg";
-import NetBirdIcon from "@/assets/icons/NetBirdIcon";
-import { useExperiment } from "@/cloud/cloud-hooks/useExperiment";
-import { useAnalytics } from "@/contexts/AnalyticsProvider";
-import { useAccount } from "@/modules/account/useAccount";
-import { useLoggedInUser } from "@/contexts/UsersProvider";
-
-type Props = {
-  open: boolean;
-  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-const NAME = "Jack Carter";
-const BOOK_A_DEMO_URL =
-  "https://meetings-eu1.hubspot.com/jack81/selfserve45-dashboard";
-
-export const OnboardingDemoCall = ({ open, onOpenChange }: Props) => {
-  const { trackEventV2 } = useAnalytics();
-  const account = useAccount();
-  const { loggedInUser } = useLoggedInUser();
-
-  const [variant, variantKey] = useExperiment("onboarding-call", {
-    v1: {
-      title: "Book a Technical Overview (Not a Sales Call)",
-      desc: "You’ll meet with a solutions engineer who will walk through how NetBird works, answer your implementation questions - no slides, no hard sell.",
-      features: [
-        "Live walkthrough of setup and architecture",
-        "Implementation of use case, for your stack",
-        "Best practices and general overview",
-      ],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-    v2: {
-      title: "Talk to our Solutions Engineer",
-      desc: (
-        <>
-          Get a 30-min technical overview. We’ll go over your specific use-case
-          and answer any technical questions you might have. <br /> We’re
-          offering this as a technical onboard support for you. <br /> This is
-          NOT a sales call.
-        </>
-      ),
-      features: [],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-    v3: {
-      title: "Book a Technical Overview (Not a Sales Call)",
-      desc: (
-        <>
-          Get a 30-min technical overview. We’ll go over your specific use-case
-          and answer any technical questions you might have. <br /> We’re
-          offering this as a technical onboard support for you. <br /> This is
-          NOT a sales call.
-        </>
-      ),
-      features: [],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-    v4: {
-      title: "Book a Technical Overview",
-      desc: "You’ll meet with a solutions engineer who will walk through how NetBird works, answer your implementation questions - no slides, no hard sell.",
-      features: [
-        "Live walkthrough of setup and architecture",
-        "Implementation of use case, for your stack",
-        "Best practices and general overview",
-      ],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-    v5: {
-      title: "Talk to our Solutions Engineer",
-      desc: (
-        <>
-          Get a 30-min technical overview. We’ll go over your specific use-case
-          and answer any technical questions you might have. <br /> We’re
-          offering this as a technical onboard support for you.
-        </>
-      ),
-      features: [],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-    v6: {
-      title: "Book a Technical Overview",
-      desc: (
-        <>
-          Get a 30-min technical overview. We’ll go over your specific use-case
-          and answer any technical questions you might have. <br /> We’re
-          offering this as a technical onboard support for you.
-        </>
-      ),
-      features: [],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-  });
-
-  const openBookADemo = () => {
-    if (typeof window !== "undefined") {
-      trackEventV2(
-        "Onboarding Call Experiment",
-        variantKey,
-        account?.id,
-        loggedInUser?.id,
-      );
-      window.open(BOOK_A_DEMO_URL, "_blank");
-      onOpenChange(false);
-    }
-  };
-
-  return (
-    <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent
-        maxWidthClass={"max-w-lg relative !z-[70]"}
-        showClose={false}
-      >
-        <div className={"flex flex-col gap-4 overflow-hidden relative  -top-3"}>
-          <div
-            className={
-              "flex items-center justify-center absolute bottom-0 w-full z-20"
-            }
-          >
-            <Image
-              src={Avatar}
-              alt={NAME}
-              height={50}
-              width={50}
-              className={"rounded-full"}
-            />
-          </div>
-          <span
-            className={
-              "absolute inset-0 w-full h-full bg-gradient-to-b from-transparent to-nb-gray-950 z-10"
-            }
-          ></span>
-          <div className={"flex gap-8 relative z-0 opacity-10 grayscale h-4"}>
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-          </div>
-          <div
-            className={
-              "flex gap-8 -left-8 relative z-0 opacity-10 grayscale h-4"
-            }
-          >
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-          </div>
-          <div className={"flex gap-4 relative z-0 opacity-10 grayscale h-4"}>
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-          </div>
-        </div>
-
-        <div
-          className={
-            "flex items-center justify-center flex-col px-8 gap-3 mt-1"
-          }
-        >
-          <div className={"text-xl font-medium text-center"}>
-            {variant?.title}
-          </div>
-          <div className={"text-sm text-nb-gray-300 text-center"}>
-            {variant?.desc}
-          </div>
-          {variant?.features?.length > 1 && (
-            <ul className="flex flex-col gap-3.5 mt-4 mb-3 w-full">
-              {variant?.features.map((feature, index) => (
-                <li
-                  className="flex items-center gap-3 text-sm text-nb-gray-200"
-                  key={index}
-                >
-                  <Check size={16} className={"text-netbird shrink-0"} />
-                  {feature}
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-        <ModalFooter separator={false} className={"gap-x-2"}>
-          <ModalClose asChild={true}>
-            <Button variant={"secondary"} className={"w-full"}>
-              {variant?.cancel}
-            </Button>
-          </ModalClose>
-
-          <Button
-            className={"w-full"}
-            variant={"primary"}
-            onClick={openBookADemo}
-          >
-            <CalendarIcon size={15} className={"shrink-0"} />
-            {variant?.cta}
-          </Button>
-        </ModalFooter>
-        <div
-          className={
-            "text-center z-0 mt-3 text-sm text-nb-gray-300 flex items-center justify-center gap-2 font-normal"
-          }
-        >
-          <CalendarClockIcon size={12} />
-          <div>
-            The call usually takes around
-            <span className={"font-medium"}> 30 minutes</span>
-          </div>
-        </div>
-      </ModalContent>
-    </Modal>
-  );
-};

src/modules/onboarding/OnboardingProvider.tsx

@@ -120,7 +120,10 @@ export const OnboardingProvider = ({
     // deciding, so a slow mode fetch can't briefly show the regular form to an
     // account that turns out to be Agent Network-only via config.
     if (agentNetworkModeLoading) return false;
-    if (!isNetBirdCloud()) return false;
+    // The regular flow shows on both cloud and self-hosted, but the signup
+    // survey relies on a JWT domain claim self-hosted IdPs don't emit, so it
+    // only counts toward showing (and is only rendered) on cloud — self-hosted
+    // starts directly at the intent step.
     const isSignupFormPending = isNetBirdCloud()
       ? !!account?.onboarding?.signup_form_pending
       : false;