Add CrowdSec AppSec mode to reverse proxy access control

e2e/tests/onboarding-form.spec.ts

@@ -72,19 +72,13 @@ function mockAccounts(page: Page, state: AccountState, delayMs: number) {
 
 async function openOnboarding(
   browser: Browser,
-  opts: {
-    source?: boolean;
-    account: AccountState;
-    delayMs?: number;
-    edition?: string;
-    expectOnboarding?: boolean;
-  },
+  opts: { source?: boolean; account: AccountState; delayMs?: number },
 ): Promise<{ page: Page; close: () => Promise<void> }> {
   const context = await browser.newContext({
     storageState: "e2e/fixtures/auth/owner.json",
   });
   await context.addInitScript(
-    ([sourceKey, sourceValue, withSource, edition]) => {
+    ([sourceKey, sourceValue, withSource]) => {
       try {
         window.localStorage.setItem("netbird-test-onboarding", "true");
         if (withSource) {
@@ -93,32 +87,13 @@ 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,
-      opts.edition ?? "",
-    ] as const,
+    [SIGNUP_SOURCE_KEY, AGENT_NETWORK_SOURCE, !!opts.source] as const,
   );
   const page = await context.newPage();
   mockAccounts(page, opts.account, opts.delayMs ?? 0);
-  // 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;
+  await loginToApp(page, "owner", { expectOnboarding: true });
   return { page, close: () => context.close() };
 }
 
@@ -168,50 +143,6 @@ 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

@@ -128,14 +128,6 @@ async function openRowActions(
   name: string,
 ) {
   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 })

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

@@ -1,122 +0,0 @@
-/**
- * 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,15 +22,7 @@ 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/table/DataTableHeader.tsx

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

src/interfaces/ReverseProxy.ts

@@ -33,12 +33,21 @@ export const CrowdSecMode = {
 
 export type CrowdSecMode = (typeof CrowdSecMode)[keyof typeof CrowdSecMode];
 
+export const AppSecMode = {
+  OFF: "off",
+  ENFORCE: "enforce",
+  OBSERVE: "observe",
+} as const;
+
+export type AppSecMode = (typeof AppSecMode)[keyof typeof AppSecMode];
+
 export interface AccessRestrictions {
   allowed_cidrs?: string[];
   blocked_cidrs?: string[];
   allowed_countries?: string[];
   blocked_countries?: string[];
   crowdsec_mode?: CrowdSecMode;
+  appsec_mode?: AppSecMode;
 }
 
 export interface ReverseProxyMeta {
@@ -122,6 +131,7 @@ export interface ReverseProxyDomain {
   supports_custom_ports?: boolean;
   require_subdomain?: boolean;
   supports_crowdsec?: boolean;
+  supports_appsec?: boolean;
   supports_private?: boolean;
 }
 
@@ -188,6 +198,7 @@ export interface ReverseProxyCluster {
   supports_custom_ports?: boolean;
   require_subdomain?: boolean;
   supports_crowdsec?: boolean;
+  supports_appsec?: boolean;
   // True when at least one connected proxy in this cluster is running embedded
   // in a netbird client (`netbird proxy`) and serving over a WireGuard tunnel.
   // Lets the dashboard distinguish per-peer / private clusters from centralised

src/modules/agent-network/AIProvidersProvider.tsx

@@ -27,13 +27,6 @@ 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 = {
@@ -163,9 +156,6 @@ 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,
@@ -201,16 +191,10 @@ 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,
   }));
 }
 

src/modules/agent-network/AgentAccessLogTable.tsx

@@ -445,13 +445,12 @@ export default function AgentAccessLogTable({
           </DataTableHeader>
         ),
         // Same Reason cell as the flat view (deny reason, or the authorising
-        // 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.
+        // policy link). A session is one policy decision in practice; surface a
+        // denied request when present, otherwise the first entry.
         cell: ({ row }) => {
           const entries = row.original.entries;
           const representative =
-            entries.find((e) => e.decision === "allow") ?? entries[0];
+            entries.find((e) => e.decision === "deny") ?? entries[0];
           return representative ? (
             <ReasonCell entry={representative} />
           ) : (
@@ -997,10 +996,13 @@ 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 }) {
+function TokensCell({ entry }: { entry: AIAccessLogEntry }) {
+  if (
+    (entry.inputTokens === undefined || entry.inputTokens === 0) &&
+    (entry.outputTokens === undefined || entry.outputTokens === 0)
+  ) {
+    return <EmptyRow />;
+  }
   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.
@@ -1010,66 +1012,54 @@ function TokenBreakdown({ entry }: { entry: AIAccessLogEntry }) {
     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 ?? 0) === 0 &&
-    (entry.outputTokens ?? 0) === 0 &&
-    (entry.cachedInputTokens ?? 0) === 0 &&
-    (entry.cacheCreationTokens ?? 0) === 0
-  ) {
-    return <EmptyRow />;
-  }
-  return (
-    <FullTooltip content={<TokenBreakdown entry={entry} />}>
+    <FullTooltip
+      content={
+        <div className={"text-xs flex flex-col gap-1"}>
+          <div className={"flex items-center gap-2 whitespace-nowrap"}>
+            <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"}>
+            <span className={"font-medium"}>
+              {entry.outputTokens.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>
+      }
+    >
       <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 ?? 0).toLocaleString()}
+          {entry.inputTokens.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 ?? 0).toLocaleString()}
+          {entry.outputTokens.toLocaleString()}
         </div>
       </div>
     </FullTooltip>
@@ -1086,89 +1076,32 @@ function CostRow({ amount, label }: { amount: number; label: string }) {
   );
 }
 
-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.
+// CostCell renders the metered USD cost with a hover breakdown of the buckets
+// it was billed from.
 //
 // 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({
+function CostCell({
   costUsd,
   cacheCostUsd,
   inputCostUsd,
   cachedInputCostUsd,
   cacheCreationCostUsd,
   outputCostUsd,
-}: CostFields) {
+}: {
+  costUsd: number;
+  cacheCostUsd?: number;
+  inputCostUsd?: number;
+  cachedInputCostUsd?: number;
+  cacheCreationCostUsd?: number;
+  outputCostUsd?: number;
+}) {
   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
@@ -1194,10 +1127,45 @@ function CostCell(fields: CostFields) {
     </span>
   );
   // Nothing to break out: no cache spend and no per-bucket split to show.
-  if (!hasCostBreakdown(fields)) return display;
+  if (cache <= 0 && !hasBreakdown) return display;
 
+  const cacheRead = cachedInputCostUsd ?? 0;
+  const cacheWrite = cacheCreationCostUsd ?? 0;
   return (
-    <FullTooltip content={<CostBreakdown {...fields} />}>{display}</FullTooltip>
+    <FullTooltip
+      content={
+        <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>
+      }
+    >
+      {display}
+    </FullTooltip>
   );
 }
 
@@ -1355,13 +1323,7 @@ function SessionEntriesRow({ session }: { session: AIAccessLogSession }) {
       >
         {[...session.entries].reverse().map((entry) => {
           const isOpen = open.includes(entry.id);
-          // 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 total = (entry.inputTokens ?? 0) + (entry.outputTokens ?? 0);
           const isError = entry.decision === "deny" || entry.status >= 400;
           return (
             <div key={entry.id}>
@@ -1434,30 +1396,20 @@ function SessionEntriesRow({ session }: { session: AIAccessLogSession }) {
                 >
                   {entry.model || "—"}
                 </code>
-                <FullTooltip
-                  disabled={total === 0}
-                  content={<TokenBreakdown entry={entry} />}
+                <span
+                  className={
+                    "text-xs text-nb-gray-400 font-mono whitespace-nowrap tabular-nums w-[110px] 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} />}
+                  {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-[64px] text-right shrink-0"
-                    }
-                  >
-                    ${entry.costUsd.toFixed(4)}
-                  </span>
-                </FullTooltip>
+                  ${entry.costUsd.toFixed(4)}
+                </span>
               </button>
               {isOpen && (
                 <div className={"border-t border-nb-gray-800/70"}>

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

@@ -43,17 +43,6 @@ 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 = {

src/modules/agent-network/useProviderCatalog.ts

@@ -8,12 +8,6 @@ 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;
 };
 
@@ -48,13 +42,6 @@ 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/OnboardingProvider.tsx

@@ -120,10 +120,7 @@ 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;
-    // 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.
+    if (!isNetBirdCloud()) return false;
     const isSignupFormPending = isNetBirdCloud()
       ? !!account?.onboarding?.signup_form_pending
       : false;

src/modules/reverse-proxy/ReverseProxyAccessControlRules.tsx

@@ -19,8 +19,13 @@ import {
   SelectOption,
 } from "@components/select/SelectDropdown";
 import { CountrySelector } from "@/components/ui/CountrySelector";
-import { AccessRestrictions, CrowdSecMode } from "@/interfaces/ReverseProxy";
+import {
+  AccessRestrictions,
+  AppSecMode,
+  CrowdSecMode,
+} from "@/interfaces/ReverseProxy";
 import { ReverseProxyCrowdSecIPReputation } from "@/modules/reverse-proxy/ReverseProxyCrowdSecIPReputation";
+import { ReverseProxyAppSecInspection } from "@/modules/reverse-proxy/ReverseProxyAppSecInspection";
 
 type AccessAction = "allow" | "block";
 type AccessRuleType = "country" | "ip" | "cidr";
@@ -121,6 +126,7 @@ function restrictionsToRules(
 function rulesToRestrictions(
   rules: AccessRule[],
   crowdsecMode?: CrowdSecMode,
+  appsecMode?: AppSecMode,
 ): AccessRestrictions | undefined {
   const allowed_countries: string[] = [];
   const blocked_countries: string[] = [];
@@ -144,12 +150,14 @@ function rulesToRestrictions(
   }
 
   const hasCrowdSec = crowdsecMode != null && crowdsecMode !== CrowdSecMode.OFF;
+  const hasAppSec = appsecMode != null && appsecMode !== AppSecMode.OFF;
   const hasAny =
     allowed_countries.length > 0 ||
     blocked_countries.length > 0 ||
     allowed_cidrs.length > 0 ||
     blocked_cidrs.length > 0 ||
-    hasCrowdSec;
+    hasCrowdSec ||
+    hasAppSec;
 
   if (!hasAny) return undefined;
 
@@ -159,6 +167,7 @@ function rulesToRestrictions(
     ...(allowed_cidrs.length > 0 && { allowed_cidrs }),
     ...(blocked_cidrs.length > 0 && { blocked_cidrs }),
     ...(hasCrowdSec && { crowdsec_mode: crowdsecMode }),
+    ...(hasAppSec && { appsec_mode: appsecMode }),
   };
 }
 
@@ -167,6 +176,7 @@ type Props = {
   onChange: (value: AccessRestrictions | undefined) => void;
   onValidationChange?: (hasErrors: boolean) => void;
   supportsCrowdSec?: boolean;
+  supportsAppSec?: boolean;
 };
 
 function validateRule(rule: AccessRule): string {
@@ -193,6 +203,7 @@ export const ReverseProxyAccessControlRules = ({
   onChange,
   onValidationChange,
   supportsCrowdSec,
+  supportsAppSec,
 }: Props) => {
   const [rules, dispatch] = useReducer(
     rulesReducer,
@@ -200,6 +211,10 @@ export const ReverseProxyAccessControlRules = ({
     restrictionsToRules,
   );
 
+  const [appsecMode, setAppsecMode] = useState<AppSecMode>(
+    value?.appsec_mode ?? AppSecMode.OFF,
+  );
+
   const [crowdsecMode, setCrowdsecMode] = useState<CrowdSecMode>(
     value?.crowdsec_mode ?? CrowdSecMode.OFF,
   );
@@ -227,8 +242,14 @@ export const ReverseProxyAccessControlRules = ({
   }, [supportsCrowdSec]);
 
   useEffect(() => {
-    onChangeRef.current(rulesToRestrictions(rules, crowdsecMode));
-  }, [rules, crowdsecMode]);
+    if (!supportsAppSec) {
+      setAppsecMode(AppSecMode.OFF);
+    }
+  }, [supportsAppSec]);
+
+  useEffect(() => {
+    onChangeRef.current(rulesToRestrictions(rules, crowdsecMode, appsecMode));
+  }, [rules, crowdsecMode, appsecMode]);
 
   useEffect(() => {
     onValidationChangeRef.current?.(hasErrors);
@@ -242,6 +263,12 @@ export const ReverseProxyAccessControlRules = ({
           onChange={setCrowdsecMode}
         />
       )}
+      {supportsAppSec && (
+        <ReverseProxyAppSecInspection
+          value={appsecMode}
+          onChange={setAppsecMode}
+        />
+      )}
       <div>
         <Label>Access Control Rules</Label>
         <HelpText>

src/modules/reverse-proxy/ReverseProxyAppSecInspection.tsx

@@ -0,0 +1,107 @@
+import * as React from "react";
+import { ReactNode } from "react";
+import { Label } from "@components/Label";
+import HelpText from "@components/HelpText";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@components/Select";
+import { EyeIcon, PowerOffIcon, ShieldCheckIcon } from "lucide-react";
+import { HelpTooltip } from "@components/HelpTooltip";
+import { AppSecMode } from "@/interfaces/ReverseProxy";
+import Image from "next/image";
+import CrowdSecIconImage from "@/assets/integrations/crowdsec.png";
+
+type Props = {
+  value: AppSecMode;
+  onChange: (value: AppSecMode) => void;
+};
+
+type AppSecOption = {
+  label: string;
+  description?: string;
+  icon: ReactNode;
+};
+
+const APPSEC_OPTIONS: Record<AppSecMode, AppSecOption> = {
+  [AppSecMode.OFF]: {
+    label: "Disabled",
+    icon: <PowerOffIcon size={14} />,
+  },
+  [AppSecMode.ENFORCE]: {
+    label: "Enforce",
+    description:
+      "Flagged requests are blocked with 403. Every request is inspected before it reaches the service, and requests are denied if the engine is unreachable (fail-closed).",
+    icon: <ShieldCheckIcon size={14} />,
+  },
+  [AppSecMode.OBSERVE]: {
+    label: "Observe",
+    description:
+      "Flagged requests are logged but still forwarded. Use this to evaluate the rules against real traffic before enforcing.",
+    icon: <EyeIcon size={14} />,
+  },
+};
+
+export const ReverseProxyAppSecInspection = ({ value, onChange }: Props) => {
+  const selected = APPSEC_OPTIONS[value];
+
+  return (
+    <div className="flex items-center gap-0 justify-between mb-6">
+      <div className="flex gap-4">
+        <div
+          className={
+            "h-12 w-12 flex items-center justify-center rounded-md bg-nb-gray-900/70 p-2 border border-nb-gray-900/70 shrink-0 relative"
+          }
+        >
+          <Image
+            src={CrowdSecIconImage}
+            alt={"CrowdSec"}
+            className={"rounded-[4px]"}
+          />
+        </div>
+        <div>
+          <Label>CrowdSec AppSec (WAF)</Label>
+          <HelpText>
+            Inspect HTTP requests for exploits.{" "}
+            <b className={"text-white"}>Enforce</b> to block them or{" "}
+            <b className={"text-white"}>Observe</b> to only log without
+            blocking.
+          </HelpText>
+        </div>
+      </div>
+
+      <Select value={value} onValueChange={(v) => onChange(v as AppSecMode)}>
+        <SelectTrigger className="w-[260px]" data-testid="appsec-mode-trigger">
+          <div className="flex items-center gap-2 whitespace-nowrap">
+            {selected.icon}
+            <SelectValue />
+          </div>
+        </SelectTrigger>
+        <SelectContent>
+          {Object.entries(APPSEC_OPTIONS).map(([mode, config]) => (
+            <SelectItem
+              key={mode}
+              value={mode}
+              data-testid={`appsec-mode-${mode}`}
+              extra={
+                config.description ? (
+                  <HelpTooltip
+                    triggerClassName="ml-[0.01rem]"
+                    align="center"
+                    side="right"
+                    content={<>{config.description}</>}
+                  />
+                ) : undefined
+              }
+            >
+              <span className="whitespace-nowrap">{config.label}</span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};

src/modules/reverse-proxy/ReverseProxyModal.tsx

@@ -814,6 +814,7 @@ export default function ReverseProxyModal({
                 onChange={setAccessRestrictions}
                 onValidationChange={setAccessControlHasErrors}
                 supportsCrowdSec={selectedDomain?.supports_crowdsec}
+                supportsAppSec={!isL4Mode && selectedDomain?.supports_appsec}
               />
             </div>
           </TabsContent>

src/modules/reverse-proxy/clusters/ClustersFeaturesCell.tsx

@@ -47,6 +47,15 @@ export default function ClustersFeaturesCell({ cluster }: Readonly<Props>) {
       icon: <ShieldAlert size={14} className={"text-green-500"} />,
     });
   }
+  if (cluster.supports_appsec) {
+    features.push({
+      key: "appsec",
+      label: "AppSec (WAF)",
+      description:
+        "Cluster has a CrowdSec AppSec endpoint configured across all active proxies, so services can inspect HTTP requests for exploits.",
+      icon: <ShieldAlert size={14} className={"text-green-500"} />,
+    });
+  }
   if (cluster.private) {
     features.push({
       key: "private",
@@ -56,8 +65,7 @@ export default function ClustersFeaturesCell({ cluster }: Readonly<Props>) {
           Lets you publish services that are only reachable from peers in your
           NetBird network. Required for{" "}
           <span className={"font-medium text-white"}>NetBird-Only Access</span>{" "}
-          and{" "}
-          <span className={"font-medium text-white"}>Proxy Cluster</span>{" "}
+          and <span className={"font-medium text-white"}>Proxy Cluster</span>{" "}
           target types.
         </>
       ),

src/modules/reverse-proxy/events/ReverseProxyEventsAuthMethodCell.tsx

@@ -111,6 +111,21 @@ export const ReverseProxyEventsAuthMethodCell = ({
           icon: <ShieldOff size={12} />,
           label: "CrowdSec Unavailable",
         };
+      case "appsec_ban":
+        return {
+          icon: <ShieldAlert size={12} />,
+          label: "AppSec Ban",
+        };
+      case "appsec_captcha":
+        return {
+          icon: <ShieldAlert size={12} />,
+          label: "AppSec Captcha",
+        };
+      case "appsec_unavailable":
+        return {
+          icon: <ShieldOff size={12} />,
+          label: "AppSec Unavailable",
+        };
       default:
         return {
           icon: null,

src/modules/reverse-proxy/events/ReverseProxyEventsReasonCell.tsx

@@ -9,6 +9,9 @@ const VERDICT_LABELS: Record<string, string> = {
   crowdsec_ban: "Ban",
   crowdsec_captcha: "Captcha",
   crowdsec_throttle: "Throttle",
+  appsec_ban: "Ban",
+  appsec_captcha: "Captcha",
+  appsec_unavailable: "Unavailable",
 };
 
 type Props = {
@@ -17,12 +20,16 @@ type Props = {
 
 export const ReverseProxyEventsReasonCell = ({ event }: Props) => {
   const metadata = event.metadata;
-  const verdict = metadata?.crowdsec_verdict;
+  // Only one of the two can be the reason a request was flagged without being
+  // blocked, since an enforced block sets auth_method_used instead.
+  const source = metadata?.appsec_verdict ? "appsec" : "crowdsec";
+  const verdictKey = `${source}_verdict`;
+  const verdict = metadata?.[verdictKey];
 
-  if (verdict && !event.auth_method_used?.startsWith("crowdsec_")) {
+  if (verdict && !event.auth_method_used?.startsWith(`${source}_`)) {
     const verdictLabel = VERDICT_LABELS[verdict] ?? verdict;
     const metaEntries = Object.entries(metadata!).filter(
-      ([k]) => k !== "crowdsec_verdict",
+      ([k]) => k !== verdictKey,
     );
 
     return (
@@ -49,7 +56,8 @@ export const ReverseProxyEventsReasonCell = ({ event }: Props) => {
         <div className="px-3 py-2">
           <Badge variant="gray" className="gap-1.5">
             <ShieldAlert size={12} className="text-yellow-500" />
-            CrowdSec Observe: {verdictLabel}
+            {source === "appsec" ? "AppSec" : "CrowdSec"} Observe:{" "}
+            {verdictLabel}
           </Badge>
         </div>
       </FullTooltip>

src/modules/reverse-proxy/table/ReverseProxyAccessControlCell.tsx

@@ -20,7 +20,7 @@ import { useMemo } from "react";
 import { useCountries } from "@/contexts/CountryProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
-import { CrowdSecMode, ReverseProxy } from "@/interfaces/ReverseProxy";
+import { AppSecMode, CrowdSecMode, ReverseProxy } from "@/interfaces/ReverseProxy";
 
 type RuleEntry = {
   key: string;
@@ -44,21 +44,35 @@ export default function ReverseProxyAccessControlCell({
   const canConfigure = !!permission?.services?.update;
   const restrictions = reverseProxy.access_restrictions;
 
-  const supportsCrowdSec = domains?.find(
-    (d) => d.domain === reverseProxy.proxy_cluster,
-  )?.supports_crowdsec;
+  // Services on a custom domain carry its target_cluster in proxy_cluster, so
+  // matching on domain alone misses them and reports no capability.
+  const clusterDomain = domains?.find(
+    (d) =>
+      d.domain === reverseProxy.proxy_cluster ||
+      d.target_cluster === reverseProxy.proxy_cluster,
+  );
+
+  const supportsCrowdSec = clusterDomain?.supports_crowdsec;
 
   const hasCrowdSec =
     supportsCrowdSec &&
     restrictions?.crowdsec_mode != null &&
     restrictions.crowdsec_mode !== CrowdSecMode.OFF;
 
+  const supportsAppSec = clusterDomain?.supports_appsec;
+
+  const hasAppSec =
+    supportsAppSec &&
+    restrictions?.appsec_mode != null &&
+    restrictions.appsec_mode !== AppSecMode.OFF;
+
   const ruleCount =
     (restrictions?.allowed_cidrs?.length ?? 0) +
     (restrictions?.blocked_cidrs?.length ?? 0) +
     (restrictions?.allowed_countries?.length ?? 0) +
     (restrictions?.blocked_countries?.length ?? 0) +
-    (hasCrowdSec ? 1 : 0);
+    (hasCrowdSec ? 1 : 0) +
+    (hasAppSec ? 1 : 0);
 
   const rulesBadge = (
     <Badge
@@ -163,8 +177,20 @@ export default function ReverseProxyAccessControlCell({
       });
     }
 
+    if (hasAppSec) {
+      entries.push({
+        key: "appsec",
+        label: "AppSec (WAF)",
+        Icon: ShieldAlert,
+        value:
+          restrictions?.appsec_mode === AppSecMode.ENFORCE
+            ? "Enforce"
+            : "Observe",
+      });
+    }
+
     return entries;
-  }, [restrictions, countries, hasCrowdSec]);
+  }, [restrictions, countries, hasCrowdSec, hasAppSec]);
 
   const showRulesHover = ruleGroups.length > 0;
 

src/modules/setup-netbird-modal/LinuxTab.tsx

@@ -4,14 +4,13 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@components/Accordion";
-import { Callout } from "@components/Callout";
 import Code from "@components/Code";
-import { SelectDropdown } from "@components/select/SelectDropdown";
 import Separator from "@components/Separator";
 import Steps from "@components/Steps";
 import TabsContentPadding, { TabsContent } from "@components/Tabs";
-import { PackageIcon, TerminalSquareIcon } from "lucide-react";
-import React, { useState } from "react";
+import { IconBrandUbuntu } from "@tabler/icons-react";
+import { TerminalSquareIcon } from "lucide-react";
+import React from "react";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import {
   NetBirdUpCommand,
@@ -26,99 +25,6 @@ type Props = {
   hostname?: string;
 };
 
-type Distro = {
-  label: string;
-  value: string;
-  /** Commands that register the NetBird package repository. */
-  repository: string[];
-  /** Commands that run before the install lines, after the repository is added. */
-  beforeInstall?: string[];
-  cli: string;
-  /**
-   * Desktop app install lines. Omitted when the distribution cannot run it,
-   * in which case only the CLI is offered.
-   */
-  desktopApp?: string[];
-  note: string;
-};
-
-const YUM_REPOSITORY = [
-  "sudo tee /etc/yum.repos.d/netbird.repo <<EOF",
-  "[netbird]",
-  "name=netbird",
-  "baseurl=https://pkgs.netbird.io/yum/",
-  "enabled=1",
-  "gpgcheck=1",
-  "gpgkey=https://pkgs.netbird.io/yum/repodata/repomd.xml.key",
-  "repo_gpgcheck=1",
-  "EOF",
-];
-
-// The desktop app links GTK 4.10+ and WebKitGTK 6.0, and the released
-// packages do not declare those as dependencies, so each install line names
-// them explicitly. Distributions below that floor get the CLI only.
-const DISTROS: Distro[] = [
-  {
-    label: "Debian / Ubuntu (APT)",
-    value: "apt",
-    repository: [
-      "sudo apt-get update",
-      "sudo apt-get install ca-certificates curl gnupg -y",
-      "curl -sSL https://pkgs.netbird.io/debian/public.key | sudo gpg --dearmor --output /usr/share/keyrings/netbird-archive-keyring.gpg",
-      `echo 'deb [signed-by=/usr/share/keyrings/netbird-archive-keyring.gpg] https://pkgs.netbird.io/debian stable main' | sudo tee /etc/apt/sources.list.d/netbird.list`,
-    ],
-    beforeInstall: ["sudo apt-get update"],
-    cli: "sudo apt-get install netbird",
-    desktopApp: [
-      "sudo apt-get install netbird-ui libgtk-4-1 libwebkitgtk-6.0-4 xdg-utils",
-    ],
-    note: "The desktop app needs Ubuntu 24.04 or Debian 13 and newer. On earlier releases install the CLI only.",
-  },
-  {
-    label: "Fedora (DNF)",
-    value: "fedora",
-    repository: YUM_REPOSITORY,
-    cli: "sudo dnf install netbird",
-    desktopApp: ["sudo dnf install netbird-ui gtk4 webkitgtk6.0 xdg-utils"],
-    note: "The desktop app needs Fedora 43 and newer. On earlier releases install the CLI only.",
-  },
-  {
-    label: "RHEL / AlmaLinux / Rocky (DNF)",
-    value: "rhel",
-    repository: YUM_REPOSITORY,
-    cli: "sudo dnf install netbird",
-    // WebKitGTK 6.0 ships in EPEL rather than the base repositories, so the
-    // desktop app path enables it first. CLI-only users do not need it.
-    desktopApp: [
-      "sudo dnf install epel-release -y",
-      "sudo dnf install netbird-ui gtk4 webkitgtk6.0 xdg-utils",
-    ],
-    note: "The desktop app needs version 10 or newer with EPEL enabled, which provides WebKitGTK 6.0. On version 9 install the CLI only.",
-  },
-  {
-    label: "openSUSE (Zypper)",
-    value: "opensuse",
-    // Zypper does not read gpgkey= from a .repo file, so the repository key is
-    // imported by an explicit refresh instead of the YUM_REPOSITORY snippet.
-    repository: [
-      "sudo zypper --non-interactive addrepo -f -g https://pkgs.netbird.io/yum/ netbird",
-      "sudo zypper --gpg-auto-import-keys refresh netbird",
-    ],
-    cli: "sudo zypper install netbird",
-    desktopApp: [
-      "sudo zypper install netbird-ui libgtk-4-1 libwebkitgtk-6_0-4 xdg-utils",
-    ],
-    note: "The desktop app needs Tumbleweed or Leap 15.6 and newer. On earlier releases install the CLI only.",
-  },
-  {
-    label: "Amazon Linux (YUM)",
-    value: "amazon",
-    repository: YUM_REPOSITORY,
-    cli: "sudo yum install netbird",
-    note: "Amazon Linux does not ship GTK 4 or WebKitGTK 6.0, so only the CLI is available.",
-  },
-];
-
 export default function LinuxTab({
   setupKey,
   setupKeyContent,
@@ -126,20 +32,8 @@ export default function LinuxTab({
   showSetupKeyInfo = false,
   hostname,
 }: Readonly<Props>) {
-  const [distroValue, setDistroValue] = useState(DISTROS[0].value);
-  const distro =
-    DISTROS.find((option) => option.value === distroValue) ?? DISTROS[0];
-
   const runStep = setupKeyContent ? 3 : 2;
   const usingSetupKey = !!setupKey || !!setupKeyPlaceholder;
-
-  const hasDesktopApp = !!distro.desktopApp?.length;
-  const installLines = [
-    ...(distro.beforeInstall ?? []),
-    distro.cli,
-    ...(distro.desktopApp ?? []),
-  ];
-
   return (
     <TabsContent value={String(OperatingSystem.LINUX)}>
       <TabsContentPadding>
@@ -172,56 +66,43 @@ export default function LinuxTab({
         <Accordion type="single" collapsible>
           <AccordionItem value="item-1">
             <AccordionTrigger>
-              <PackageIcon size={16} />
-              Install manually with a package manager
+              <IconBrandUbuntu size={16} />
+              Install manually on Ubuntu
             </AccordionTrigger>
             <AccordionContent>
-              <div className={"mt-1"}>
-                <SelectDropdown
-                  value={distroValue}
-                  className={"w-[280px]"}
-                  onChange={setDistroValue}
-                  placeholder={"Select distribution"}
-                  options={DISTROS.map(({ label, value }) => ({
-                    label,
-                    value,
-                  }))}
-                  data-testid={"linux-distro-select"}
-                />
-              </div>
               <Steps>
                 <Steps.Step step={1}>
                   <p>Add our repository</p>
-                  <Code codeToCopy={distro.repository.join("\n")}>
-                    {distro.repository.map((line) => (
-                      <Code.Line key={line}>{line}</Code.Line>
-                    ))}
+                  <Code>
+                    <Code.Line>sudo apt-get update</Code.Line>
+                    <Code.Line>
+                      sudo apt install ca-certificates curl gnupg -y
+                    </Code.Line>
+                    <Code.Line>
+                      curl -sSL https://pkgs.netbird.io/debian/public.key | sudo
+                      gpg --dearmor --output
+                      /usr/share/keyrings/netbird-archive-keyring.gpg
+                    </Code.Line>
+                    <Code.Line>
+                      {`echo 'deb [signed-by=/usr/share/keyrings/netbird-archive-keyring.gpg] https://pkgs.netbird.io/debian stable main' | sudo tee /etc/apt/sources.list.d/netbird.list`}
+                    </Code.Line>
                   </Code>
                 </Steps.Step>
                 <Steps.Step step={2}>
                   <p>Install NetBird</p>
-                  <Code codeToCopy={installLines.join("\n")}>
-                    {distro.beforeInstall?.map((line) => (
-                      <Code.Line key={line}>{line}</Code.Line>
-                    ))}
-                    {hasDesktopApp && (
-                      <Code.Comment># for CLI only</Code.Comment>
-                    )}
-                    <Code.Line>{distro.cli}</Code.Line>
-                    {hasDesktopApp && (
-                      <>
-                        <Code.Comment># for the desktop app</Code.Comment>
-                        {distro.desktopApp?.map((line) => (
-                          <Code.Line key={line}>{line}</Code.Line>
-                        ))}
-                      </>
-                    )}
+                  <Code
+                    codeToCopy={[
+                      `sudo apt-get update`,
+                      `sudo apt-get install netbird`,
+                      `sudo apt-get install netbird-ui`,
+                    ].join("\n")}
+                  >
+                    <Code.Line>sudo apt-get update</Code.Line>
+                    <Code.Comment># for CLI only</Code.Comment>
+                    <Code.Line>sudo apt-get install netbird</Code.Line>
+                    <Code.Comment># for GUI package</Code.Comment>
+                    <Code.Line>sudo apt-get install netbird-ui</Code.Line>
                   </Code>
-                  <Callout variant={"info"} className={"mt-1"}>
-                    {distro.note}
-                    {hasDesktopApp &&
-                      " Desktop app packages are available for x86_64 only."}
-                  </Callout>
                 </Steps.Step>
                 <Steps.Step step={3} line={false}>
                   <p>