Add CrowdSec AppSec mode to reverse proxy access control

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

src/components/ui/CountrySelector.tsx

@@ -6,26 +6,6 @@ import { createElement, useMemo } from "react";
 import RoundedFlag from "@/assets/countries/RoundedFlag";
 import { useCountries } from "@/contexts/CountryProvider";
 
-// browserCountryCode returns the ISO 3166-1 alpha-2 region from the browser's
-// preferred languages (e.g. "en-US" -> "US"), or undefined when none carries a
-// region. It reads navigator.languages, so it is client-only.
-function browserCountryCode(): string | undefined {
-  if (typeof navigator === "undefined") return undefined;
-  const langs = navigator.languages?.length
-    ? navigator.languages
-    : [navigator.language];
-  for (const lang of langs) {
-    if (!lang) continue;
-    try {
-      const region = new Intl.Locale(lang).region;
-      if (region) return region.toUpperCase();
-    } catch {
-      // Ignore malformed language tags and try the next one.
-    }
-  }
-  return undefined;
-}
-
 type Props = {
   value: string;
   onChange: (value: string) => void;
@@ -33,13 +13,7 @@ type Props = {
   popoverWidth?: "auto" | "content" | number;
   truncate?: boolean;
 };
-export const CountrySelector = ({
-  value,
-  onChange,
-  iconSize = 20,
-  popoverWidth,
-  truncate,
-}: Props) => {
+export const CountrySelector = ({ value, onChange, iconSize = 20, popoverWidth, truncate }: Props) => {
   const { countries, isLoading } = useCountries();
 
   const countryList = useMemo(() => {
@@ -62,20 +36,6 @@ export const CountrySelector = ({
     }) as SelectOption[];
   }, [countries]);
 
-  // Surface the browser-detected country at the top so the common case is one
-  // click away. Falls back to the original order when detection fails or the
-  // code is not in the list.
-  const orderedList = useMemo(() => {
-    if (!countryList?.length) return countryList;
-    const code = browserCountryCode();
-    if (!code) return countryList;
-    const index = countryList.findIndex((option) => option.value === code);
-    if (index <= 0) return countryList;
-    const reordered = countryList.slice();
-    const [detected] = reordered.splice(index, 1);
-    return [detected, ...reordered];
-  }, [countryList]);
-
   return (
     <div className={"block w-full"}>
       <SelectDropdown
@@ -86,7 +46,7 @@ export const CountrySelector = ({
         value={value}
         onChange={onChange}
         iconSize={iconSize}
-        options={orderedList || []}
+        options={countryList || []}
         popoverWidth={popoverWidth}
         truncate={truncate}
       />

src/interfaces/ReverseProxy.ts

@@ -33,12 +33,13 @@ export const CrowdSecMode = {
 
 export type CrowdSecMode = (typeof CrowdSecMode)[keyof typeof CrowdSecMode];
 
-export const AllowMatch = {
-  ALL: "all",
-  ANY: "any",
+export const AppSecMode = {
+  OFF: "off",
+  ENFORCE: "enforce",
+  OBSERVE: "observe",
 } as const;
 
-export type AllowMatch = (typeof AllowMatch)[keyof typeof AllowMatch];
+export type AppSecMode = (typeof AppSecMode)[keyof typeof AppSecMode];
 
 export interface AccessRestrictions {
   allowed_cidrs?: string[];
@@ -46,7 +47,7 @@ export interface AccessRestrictions {
   allowed_countries?: string[];
   blocked_countries?: string[];
   crowdsec_mode?: CrowdSecMode;
-  allow_match?: AllowMatch;
+  appsec_mode?: AppSecMode;
 }
 
 export interface ReverseProxyMeta {
@@ -130,6 +131,7 @@ export interface ReverseProxyDomain {
   supports_custom_ports?: boolean;
   require_subdomain?: boolean;
   supports_crowdsec?: boolean;
+  supports_appsec?: boolean;
   supports_private?: boolean;
 }
 
@@ -196,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/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}
+          />
         ),
       },
       {
@@ -999,31 +1003,43 @@ function TokensCell({ entry }: { entry: AIAccessLogEntry }) {
   ) {
     return <EmptyRow />;
   }
-  const total = (entry.inputTokens ?? 0) + (entry.outputTokens ?? 0);
+  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 (
     <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={"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={"w-3 shrink-0"} aria-hidden={true} />
             <span className={"font-medium text-nb-gray-200"}>
               {total.toLocaleString()}
             </span>
@@ -1050,6 +1066,109 @@ function TokensCell({ entry }: { entry: AIAccessLogEntry }) {
   );
 }
 
+// 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>
+  );
+}
+
+// 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 CostCell({
+  costUsd,
+  cacheCostUsd,
+  inputCostUsd,
+  cachedInputCostUsd,
+  cacheCreationCostUsd,
+  outputCostUsd,
+}: {
+  costUsd: number;
+  cacheCostUsd?: number;
+  inputCostUsd?: number;
+  cachedInputCostUsd?: number;
+  cacheCreationCostUsd?: number;
+  outputCostUsd?: number;
+}) {
+  const cache = cacheCostUsd ?? 0;
+  const hasBreakdown =
+    inputCostUsd !== undefined || outputCostUsd !== undefined;
+
+  // 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 (cache <= 0 && !hasBreakdown) return display;
+
+  const cacheRead = cachedInputCostUsd ?? 0;
+  const cacheWrite = cacheCreationCostUsd ?? 0;
+  return (
+    <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>
+  );
+}
+
 // 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.

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

@@ -175,7 +175,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 +223,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/reverse-proxy/ReverseProxyAccessControlRules.tsx

@@ -1,15 +1,12 @@
 import { useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Label } from "@components/Label";
 import HelpText from "@components/HelpText";
-import FullTooltip from "@components/FullTooltip";
-import { ToggleSwitch } from "@components/ToggleSwitch";
 import Button from "@components/Button";
 import { Input } from "@components/Input";
 import cidr from "ip-cidr";
 import { hostSuffixFor, isIPv6 } from "@utils/ip";
 import {
   FlagIcon,
-  InfoIcon,
   MinusCircleIcon,
   NetworkIcon,
   PlusIcon,
@@ -24,10 +21,11 @@ import {
 import { CountrySelector } from "@/components/ui/CountrySelector";
 import {
   AccessRestrictions,
-  AllowMatch,
+  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";
@@ -125,33 +123,10 @@ function restrictionsToRules(
   return rules;
 }
 
-// allowSpansCategories reports whether the allow rules cover both a location
-// (country) and an IP/CIDR category. The all-vs-any combine mode only changes
-// the outcome in that case, so allow_match is only persisted then.
-//
-// requireValue distinguishes the two callers: persistence needs a real value
-// (an empty rule contributes no allowlist), while the toggle's visibility keys
-// off the selected type alone so it appears as soon as a category is chosen,
-// before the user finishes typing.
-function allowSpansCategories(
-  rules: AccessRule[],
-  requireValue: boolean,
-): boolean {
-  let hasCountry = false;
-  let hasCidr = false;
-  for (const rule of rules) {
-    if (rule.action !== "allow") continue;
-    if (requireValue && !rule.value) continue;
-    if (rule.type === "country") hasCountry = true;
-    else hasCidr = true;
-  }
-  return hasCountry && hasCidr;
-}
-
 function rulesToRestrictions(
   rules: AccessRule[],
   crowdsecMode?: CrowdSecMode,
-  allowMatch?: AllowMatch,
+  appsecMode?: AppSecMode,
 ): AccessRestrictions | undefined {
   const allowed_countries: string[] = [];
   const blocked_countries: string[] = [];
@@ -175,28 +150,24 @@ 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;
 
-  // Only emit allow_match when "any" is selected and the allow rules actually
-  // span both categories; otherwise the mode is a no-op and the backend
-  // defaults to "all".
-  const emitAllowMatch =
-    allowMatch === AllowMatch.ANY && allowSpansCategories(rules, true);
-
   return {
     ...(allowed_countries.length > 0 && { allowed_countries }),
     ...(blocked_countries.length > 0 && { blocked_countries }),
     ...(allowed_cidrs.length > 0 && { allowed_cidrs }),
     ...(blocked_cidrs.length > 0 && { blocked_cidrs }),
     ...(hasCrowdSec && { crowdsec_mode: crowdsecMode }),
-    ...(emitAllowMatch && { allow_match: AllowMatch.ANY }),
+    ...(hasAppSec && { appsec_mode: appsecMode }),
   };
 }
 
@@ -205,10 +176,7 @@ type Props = {
   onChange: (value: AccessRestrictions | undefined) => void;
   onValidationChange?: (hasErrors: boolean) => void;
   supportsCrowdSec?: boolean;
-  // isNewService selects the default allow-combine mode: new services default
-  // to "any" (OR across categories), while existing services without a stored
-  // allow_match keep "all" (AND) for backward compatibility.
-  isNewService?: boolean;
+  supportsAppSec?: boolean;
 };
 
 function validateRule(rule: AccessRule): string {
@@ -235,7 +203,7 @@ export const ReverseProxyAccessControlRules = ({
   onChange,
   onValidationChange,
   supportsCrowdSec,
-  isNewService,
+  supportsAppSec,
 }: Props) => {
   const [rules, dispatch] = useReducer(
     rulesReducer,
@@ -243,19 +211,14 @@ export const ReverseProxyAccessControlRules = ({
     restrictionsToRules,
   );
 
+  const [appsecMode, setAppsecMode] = useState<AppSecMode>(
+    value?.appsec_mode ?? AppSecMode.OFF,
+  );
+
   const [crowdsecMode, setCrowdsecMode] = useState<CrowdSecMode>(
     value?.crowdsec_mode ?? CrowdSecMode.OFF,
   );
 
-  const [allowMatch, setAllowMatch] = useState<AllowMatch>(
-    value?.allow_match ?? (isNewService ? AllowMatch.ANY : AllowMatch.ALL),
-  );
-
-  const showAllowMatch = useMemo(
-    () => allowSpansCategories(rules, false),
-    [rules],
-  );
-
   const errors = useMemo(
     () => Object.fromEntries(rules.map((r) => [r.id, validateRule(r)])),
     [rules],
@@ -279,8 +242,14 @@ export const ReverseProxyAccessControlRules = ({
   }, [supportsCrowdSec]);
 
   useEffect(() => {
-    onChangeRef.current(rulesToRestrictions(rules, crowdsecMode, allowMatch));
-  }, [rules, crowdsecMode, allowMatch]);
+    if (!supportsAppSec) {
+      setAppsecMode(AppSecMode.OFF);
+    }
+  }, [supportsAppSec]);
+
+  useEffect(() => {
+    onChangeRef.current(rulesToRestrictions(rules, crowdsecMode, appsecMode));
+  }, [rules, crowdsecMode, appsecMode]);
 
   useEffect(() => {
     onValidationChangeRef.current?.(hasErrors);
@@ -294,42 +263,12 @@ export const ReverseProxyAccessControlRules = ({
           onChange={setCrowdsecMode}
         />
       )}
-      <div
-        className={`flex items-center justify-between gap-4 mb-4 ${
-          showAllowMatch ? "" : "opacity-60"
-        }`}
-        data-testid="allow-match"
-      >
-        <div>
-          <Label className="flex items-center gap-2">
-            Require all allow rules
-            <FullTooltip
-              content={
-                <div className="text-xs max-w-xs">
-                  When on, a connection must match every allow category (an
-                  allowed country and an allowed IP/CIDR). When off, matching
-                  any one is enough. Block rules always take priority.
-                </div>
-              }
-            >
-              <InfoIcon size={14} className="text-nb-gray-500" />
-            </FullTooltip>
-          </Label>
-          <HelpText margin={false}>
-            {showAllowMatch
-              ? "Off: match any allow rule. On: match all of them."
-              : "Applies once you have both a country and an IP/CIDR allow rule."}
-          </HelpText>
-        </div>
-        <ToggleSwitch
-          checked={allowMatch === AllowMatch.ALL}
-          onCheckedChange={(checked) =>
-            setAllowMatch(checked ? AllowMatch.ALL : AllowMatch.ANY)
-          }
-          disabled={!showAllowMatch}
-          data-testid="allow-match-toggle"
+      {supportsAppSec && (
+        <ReverseProxyAppSecInspection
+          value={appsecMode}
+          onChange={setAppsecMode}
         />
-      </div>
+      )}
       <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,7 +814,7 @@ export default function ReverseProxyModal({
                 onChange={setAccessRestrictions}
                 onValidationChange={setAccessControlHasErrors}
                 supportsCrowdSec={selectedDomain?.supports_crowdsec}
-                isNewService={!reverseProxy?.id}
+                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;