rebuild self-hosted page as Clusters with type features (#641 )

* feat(reverse-proxy): rebuild self-hosted page as Clusters with type + features The Self-Hosted Proxies page was account-only by design but the underlying API already returned every cluster the account could see. Lifting that filter and renaming the page surfaces shared clusters too — operators can see what NetBird-deployed clusters are reachable alongside their own self-hosted ones, with online status and feature support visible per row. ReverseProxyCluster matches the new backend shape: `type` (account/shared), `online`, and the three capability flags. The `isSelfHostedCluster` provider hook now compares against `type === account` instead of a deprecated boolean. Page folder renamed self-hosted-proxies → clusters (history-preserving git mv). Table columns: Cluster (with an EphemeralPeerIndicator-style icon next to the name marking account vs shared and a colored dot for online status), Connected Proxies (plain numeric), Features (one tooltip-backed badge per supported capability), Actions (Delete only on account-owned rows; shared clusters render an empty action cell). Empty state shows when the list is fully empty with a doc link in the page header. Sidebar entry restored under Reverse Proxy. * Update record in modal, update doc link, update modal title * update reverse proxy documentation links to latest anchors * update cluster modal description to "proxy cluster" instead of "self-hosted cluster" --------- Co-authored-by: Eduard Gert <kontakt@eduardgert.de>
remove self-hosted proxies menu item (#640 )
2026-09-23 00:30:43 -07:00 · 2026-05-20 11:48:38 +02:00 · 2026-05-14 17:50:07 +02:00 · 2026-05-14 16:43:02 +02:00 · 2026-05-12 15:22:12 +02:00 · 2026-05-08 16:51:17 +02:00
57 changed files with 1695 additions and 1359 deletions
@@ -10,7 +10,6 @@
  "redirectURI": "$AUTH_REDIRECT_URI",
  "silentRedirectURI": "$AUTH_SILENT_REDIRECT_URI",
  "tokenSource": "$NETBIRD_TOKEN_SOURCE",
-  "disableServiceWorker": "$NETBIRD_DISABLE_SERVICE_WORKER",
  "dragQueryParams": "$NETBIRD_DRAG_QUERY_PARAMS",
  "hotjarTrackID": "$NETBIRD_HOTJAR_TRACK_ID",
  "googleAnalyticsID": "$NETBIRD_GOOGLE_ANALYTICS_ID",
@@ -60,14 +60,13 @@ export NETBIRD_HOTJAR_TRACK_ID=${NETBIRD_HOTJAR_TRACK_ID}
 export NETBIRD_GOOGLE_ANALYTICS_ID=${NETBIRD_GOOGLE_ANALYTICS_ID}
 export NETBIRD_GOOGLE_TAG_MANAGER_ID=${NETBIRD_GOOGLE_TAG_MANAGER_ID}
 export NETBIRD_TOKEN_SOURCE=${NETBIRD_TOKEN_SOURCE:-accessToken}
-export NETBIRD_DISABLE_SERVICE_WORKER=${NETBIRD_DISABLE_SERVICE_WORKER:-false}
 export NETBIRD_DRAG_QUERY_PARAMS=${NETBIRD_DRAG_QUERY_PARAMS:-false}
 export NETBIRD_WASM_PATH=${NETBIRD_WASM_PATH}

 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"

 # replace ENVs in the config
-ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$NETBIRD_GOOGLE_TAG_MANAGER_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DISABLE_SERVICE_WORKER \$\$NETBIRD_DRAG_QUERY_PARAMS \$\$NETBIRD_WASM_PATH"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$NETBIRD_GOOGLE_TAG_MANAGER_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS \$\$NETBIRD_WASM_PATH"

 OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
 envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"
@@ -168,6 +168,7 @@
      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.29.0",
        "@babel/generator": "^7.29.0",
@@ -3030,6 +3031,7 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
      "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "csstype": "^3.2.2"
      }
@@ -3039,6 +3041,7 @@
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
      "license": "MIT",
+      "peer": true,
      "peerDependencies": {
        "@types/react": "^19.2.0"
      }
@@ -3097,6 +3100,7 @@
      "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.54.0",
        "@typescript-eslint/types": "8.54.0",
@@ -3577,7 +3581,8 @@
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/@xyflow/react": {
      "version": "12.10.0",
@@ -3616,6 +3621,7 @@
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -4038,6 +4044,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -4660,6 +4667,7 @@
      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
      "license": "ISC",
+      "peer": true,
      "engines": {
        "node": ">=12"
      }
@@ -5188,6 +5196,7 @@
      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -5385,6 +5394,7 @@
      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@rtsao/scc": "^1.1.0",
        "array-includes": "^3.1.9",
@@ -6678,6 +6688,7 @@
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
      "license": "MIT",
+      "peer": true,
      "bin": {
        "jiti": "bin/jiti.js"
      }
@@ -7435,6 +7446,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -7642,6 +7654,7 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -7682,6 +7695,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -8576,6 +8590,7 @@
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@alloc/quick-lru": "^5.2.0",
        "arg": "^5.0.2",
@@ -8742,6 +8757,7 @@
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -8907,6 +8923,7 @@
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -9234,6 +9251,7 @@
      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
@@ -6,10 +6,11 @@
    "node": ">=20.9.0"
  },
  "scripts": {
-    "oidc-gen": "node ./node_modules/@axa-fr/react-oidc/bin/copy-service-worker-files.mjs public",
+    "copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc/dist/OidcServiceWorker.js ./public",
+    "copytrusted": "copyfiles -f ./public/local/OidcTrustedDomains.js ./public",
    "dev": "next dev -p 3000",
    "turbo": "next dev -p 3000 --turbo",
-    "build": "npm run oidc-gen && next build",
+    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress:open": "cypress open"
@@ -1,6 +0,0 @@
-
-// Add here trusted domains, access tokens will be send to 
-const trustedDomains = {
-    default:["http://localhost:3001","http://127.0.0.1:3001", "http://0.0.0.0:33071"],
-    auth0:[]
-};  
@@ -1,9 +1,6 @@
-
-// Domains used by OIDC server must be also declared here
-
+
+// Add here trusted domains, access tokens will be send to 
 const trustedDomains = {
-  default: [
-    "$NETBIRD_MGMT_API_ENDPOINT",
-    "$NETBIRD_MGMT_GRPC_API_ENDPOINT",
-  ].filter((d) => d && d.length > 0),
-};
+    default:["$NETBIRD_MGMT_API_ENDPOINT"],
+    auth0:[]
+};  
@@ -2,7 +2,6 @@

 import Breadcrumbs from "@components/Breadcrumbs";
 import Button from "@components/Button";
-import { Callout } from "@components/Callout";
 import Card from "@components/Card";
 import HelpText from "@components/HelpText";
 import { Input } from "@components/Input";
@@ -72,6 +71,7 @@ import ReverseProxiesProvider, {
  useReverseProxies,
 } from "@/contexts/ReverseProxiesProvider";
 import { ReverseProxyFlatTargetsTabContent } from "@/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTabContent";
+import { PeerEditIPModal } from "@/modules/peer/PeerEditIPModal";
 import { PeerSSHToggle } from "@/modules/peer/PeerSSHToggle";
 import { RDPButton } from "@/modules/remote-access/rdp/RDPButton";
 import { SSHButton } from "@/modules/remote-access/ssh/SSHButton";
@@ -469,31 +469,55 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
  const { update } = usePeer();
  const { mutate } = useSWRConfig();
  const [showEditIPModal, setShowEditIPModal] = useState(false);
+  const [showEditIPv6Modal, setShowEditIPv6Modal] = useState(false);
  const { permission } = usePermissions();

  const countryText = useMemo(() => {
    return getRegionByPeer(peer);
  }, [getRegionByPeer, peer]);

+  const handleSaveIP = (newIP: string) => {
+    notify({
+      title: peer.name,
+      description: "NetBird Peer IP was successfully updated",
+      promise: update({ ip: newIP }).then(() => {
+        mutate("/peers/" + peer.id);
+        setShowEditIPModal(false);
+      }),
+      loadingMessage: "Updating peer IP...",
+    });
+  };
+
+  const handleSaveIPv6 = (newIPv6: string) => {
+    notify({
+      title: peer.name,
+      description: "NetBird Peer IPv6 was successfully updated",
+      promise: update({ ipv6: newIPv6 }).then(() => {
+        mutate("/peers/" + peer.id);
+        setShowEditIPv6Modal(false);
+      }),
+      loadingMessage: "Updating peer IPv6...",
+    });
+  };
+
  return (
    <>
-      <Modal open={showEditIPModal} onOpenChange={setShowEditIPModal}>
-        <EditIPModal
-          onSuccess={(newIP) => {
-            notify({
-              title: peer.name,
-              description: "Peer IP was successfully updated",
-              promise: update({ ip: newIP }).then(() => {
-                mutate("/peers/" + peer.id);
-                setShowEditIPModal(false);
-              }),
-              loadingMessage: "Updating peer IP...",
-            });
-          }}
-          peer={peer}
-          key={showEditIPModal ? 1 : 0}
-        />
-      </Modal>
+      <PeerEditIPModal
+        version="v4"
+        currentIP={peer.ip}
+        open={showEditIPModal}
+        onOpenChange={setShowEditIPModal}
+        onSave={handleSaveIP}
+        key={showEditIPModal ? "v4-open" : "v4-closed"}
+      />
+      <PeerEditIPModal
+        version="v6"
+        currentIP={peer.ipv6 || ""}
+        open={showEditIPv6Modal}
+        onOpenChange={setShowEditIPv6Modal}
+        onSave={handleSaveIPv6}
+        key={showEditIPv6Modal ? "v6-open" : "v6-closed"}
+      />
      <Card className={"w-full xl:w-1/2"}>
        <Card.List>
          <Card.ListItem
@@ -502,35 +526,48 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
            copyText={"NetBird IP Address"}
            label={
              <>
-                <MapPin size={16} />
+                <MapPin size={16} className={"shrink-0"} />
                NetBird IP Address
              </>
            }
            valueToCopy={peer.ip}
            value={
-              <div className="flex items-center gap-2 justify-between w-full">
-                <span>{peer.ip}</span>
-                {permission.peers.update && (
-                  <button
-                    className="flex w-7 h-7 items-center justify-center gap-2 text-nb-gray-400 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setShowEditIPModal(true);
-                    }}
-                  >
-                    <PencilIcon size={14} />
-                  </button>
-                )}
-              </div>
+              <EditableValue
+                value={peer.ip}
+                canEdit={permission.peers.update}
+                onEdit={() => setShowEditIPModal(true)}
+              />
            }
          />

+          {peer.ipv6 && (
+            <Card.ListItem
+              copy
+              tooltip={false}
+              copyText={"NetBird IPv6 Address"}
+              label={
+                <>
+                  <MapPin size={16} className={"shrink-0"} />
+                  NetBird IPv6 Address
+                </>
+              }
+              valueToCopy={peer.ipv6}
+              value={
+                <EditableValue
+                  value={peer.ipv6}
+                  canEdit={permission.peers.update}
+                  onEdit={() => setShowEditIPv6Modal(true)}
+                />
+              }
+            />
+          )}
+
          <Card.ListItem
            copy
            copyText={"Public IP Address"}
            label={
              <>
-                <NetworkIcon size={16} />
+                <NetworkIcon size={16} className={"shrink-0"} />
                Public IP Address
              </>
            }
@@ -542,7 +579,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
            copyText={"DNS label"}
            label={
              <>
-                <Globe size={16} />
+                <Globe size={16} className={"shrink-0"} />
                Domain Name
              </>
            }
@@ -560,7 +597,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
            copyText={"Hostname"}
            label={
              <>
-                <MonitorSmartphoneIcon size={16} />
+                <MonitorSmartphoneIcon size={16} className={"shrink-0"} />
                Hostname
              </>
            }
@@ -570,7 +607,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
          <Card.ListItem
            label={
              <>
-                <FlagIcon size={16} />
+                <FlagIcon size={16} className={"shrink-0"} />
                Region
              </>
            }
@@ -600,7 +637,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
          <Card.ListItem
            label={
              <>
-                <Cpu size={16} />
+                <Cpu size={16} className={"shrink-0"} />
                Operating System
              </>
            }
@@ -611,7 +648,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
            <Card.ListItem
              label={
                <>
-                  <Barcode size={16} />
+                  <Barcode size={16} className={"shrink-0"} />
                  Serial Number
                </>
              }
@@ -623,7 +660,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
            <Card.ListItem
              label={
                <>
-                  <CalendarDays size={16} />
+                  <CalendarDays size={16} className={"shrink-0"} />
                  Registered on
                </>
              }
@@ -639,7 +676,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
          <Card.ListItem
            label={
              <>
-                <History size={16} />
+                <History size={16} className={"shrink-0"} />
                Last seen
              </>
            }
@@ -656,7 +693,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
          <Card.ListItem
            label={
              <>
-                <NetBirdIcon size={16} />
+                <NetBirdIcon size={16} className={"shrink-0"} />
                Agent Version
              </>
            }
@@ -667,7 +704,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
            <Card.ListItem
              label={
                <>
-                  <NetBirdIcon size={16} />
+                  <NetBirdIcon size={16} className={"shrink-0"} />
                  UI Version
                </>
              }
@@ -765,82 +802,29 @@ function EditNameModal({ onSuccess, peer, initialName }: Readonly<ModalProps>) {
  );
 }

-interface EditIPModalProps {
-  onSuccess: (ip: string) => void;
-  peer: Peer;
-}
-
-function EditIPModal({ onSuccess, peer }: Readonly<EditIPModalProps>) {
-  const [ip, setIP] = useState(peer.ip);
-  const [error, setError] = useState("");
-
-  const validateIP = (ipAddress: string) => {
-    const ipRegex =
-      /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
-    return ipRegex.test(ipAddress);
-  };
-
-  const isDisabled = useMemo(() => {
-    if (ip === peer.ip) return true;
-    const trimmedIP = trim(ip);
-    return trimmedIP.length === 0 || !validateIP(ip);
-  }, [ip, peer.ip]);
-
-  React.useEffect(() => {
-    switch (true) {
-      case ip === peer.ip:
-        setError("");
-        break;
-      case !validateIP(ip):
-        setError("Please enter a valid IP, e.g., 100.64.0.15");
-        break;
-      default:
-        setError("");
-        break;
-    }
-  }, [ip, peer.ip]);
-
+function EditableValue({
+  value,
+  canEdit,
+  onEdit,
+}: {
+  value: string;
+  canEdit: boolean;
+  onEdit: () => void;
+}) {
  return (
-    <ModalContent maxWidthClass={"max-w-md"}>
-      <form>
-        <ModalHeader
-          title={"Edit Peer IP Address"}
-          description={"Update the NetBird IP address for this peer."}
-          color={"blue"}
-        />
-
-        <div className={"p-default flex flex-col gap-4"}>
-          <div>
-            <Input
-              placeholder={"e.g., 100.64.0.15"}
-              value={ip}
-              onChange={(e) => setIP(e.target.value)}
-              error={error}
-            />
-          </div>
-
-          <Callout>Changes take effect when the peer reconnects.</Callout>
-        </div>
-
-        <ModalFooter className={"items-center"} separator={false}>
-          <div className={"flex gap-3 w-full justify-end"}>
-            <ModalClose asChild={true}>
-              <Button variant={"secondary"} className={"w-full"}>
-                Cancel
-              </Button>
-            </ModalClose>
-
-            <Button
-              variant={"primary"}
-              className={"w-full"}
-              onClick={() => onSuccess(ip)}
-              disabled={isDisabled}
-            >
-              Save
-            </Button>
-          </div>
-        </ModalFooter>
-      </form>
-    </ModalContent>
+    <div className="flex items-center gap-2 justify-between w-full">
+      <span>{value}</span>
+      {canEdit && (
+        <button
+          className="flex w-7 h-7 items-center justify-center gap-2 text-nb-gray-400 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
+          onClick={(e) => {
+            e.stopPropagation();
+            onEdit();
+          }}
+        >
+          <PencilIcon size={14} />
+        </button>
+      )}
+    </div>
  );
 }
@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Clusters - Reverse Proxy - ${globalMetaTitle}`,
+};
+export default BlankLayout;
@@ -0,0 +1,66 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
+import { ExternalLinkIcon } from "lucide-react";
+import React, { lazy, Suspense } from "react";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { REVERSE_PROXY_CLUSTERS_DOCS_LINK } from "@/interfaces/ReverseProxy";
+import PageContainer from "@/layouts/PageContainer";
+
+const ClustersTable = lazy(
+  () => import("@/modules/reverse-proxy/clusters/ClustersTable"),
+);
+
+export default function ReverseProxyClustersPage() {
+  const { permission } = usePermissions();
+
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/reverse-proxy/services"}
+            label={"Reverse Proxy"}
+            icon={<ReverseProxyIcon size={16} />}
+          />
+          <Breadcrumbs.Item
+            href={"/reverse-proxy/clusters"}
+            label={"Clusters"}
+            active={true}
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Clusters</h1>
+        <Paragraph>
+          Proxy clusters that route inbound traffic to your services. Shared
+          clusters are deployed at the server level; account clusters are
+          self-hosted on your own infrastructure.
+        </Paragraph>
+        <Paragraph>
+          Learn more about
+          <InlineLink href={REVERSE_PROXY_CLUSTERS_DOCS_LINK} target={"_blank"}>
+            Clusters
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+      </div>
+      <RestrictedAccess
+        page={"Clusters"}
+        hasAccess={permission?.services?.read}
+      >
+        <Suspense fallback={<SkeletonTable />}>
+          <ClustersTable headingTarget={portalTarget} />
+        </Suspense>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}
@@ -18,7 +18,7 @@ import {
 } from "@utils/version";

 export default function SSHPage() {
-  const { peerId, username, port } = useSSHQueryParams();
+  const { peerId, username, port, ipVersion } = useSSHQueryParams();

  const {
    data: peer,
@@ -48,6 +48,7 @@ export default function SSHPage() {
          peer={peer}
          username={username}
          port={port}
+          ipVersion={ipVersion}
        />
      ) : (
        <LoadingMessage message={"Starting ssh session..."} />
@@ -60,9 +61,10 @@ type Props = {
  username: string;
  port: string;
  peer: Peer;
+  ipVersion: string | null;
 };

-function SSHTerminal({ username, port, peer }: Props) {
+function SSHTerminal({ username, port, peer, ipVersion }: Props) {
  const client = useNetBirdClient();
  const connected = useRef(false);
  const sshConnectedOnce = useRef(false);
@@ -81,9 +83,12 @@ function SSHTerminal({ username, port, peer }: Props) {
  const isClientDisconnected = client.status === NetBirdStatus.DISCONNECTED;
  const isClientConnecting = client.status === NetBirdStatus.CONNECTING;

+  // Use the FQDN when an IP version is specified so the dialer resolves to the correct address family.
+  const sshHost = ipVersion ? peer.dns_label || peer.ip : peer.ip;
+
  useEffect(() => {
-    document.title = `${username}@${peer.ip} - ${peer.hostname}`;
-  }, [username, peer, client]);
+    document.title = `${username}@${sshHost} - ${peer.hostname}`;
+  }, [username, peer, client, sshHost]);

  const handleReconnect = async () => {
    if (!peer?.id) return;
@@ -97,9 +102,10 @@ function SSHTerminal({ username, port, peer }: Props) {
      const rules = [`${protocol}/${aclPort}`];
      await client?.connectTemporary(peer.id, rules);
      await ssh({
-        hostname: peer.ip,
+        hostname: sshHost,
        port: Number(port),
        username,
+        ipVersion: ipVersion || undefined,
      });
    } catch (error) {
      console.error("Reconnection failed:", error);
@@ -123,9 +129,10 @@ function SSHTerminal({ username, port, peer }: Props) {
        const rules = [`${protocol}/${aclPort}`];
        await client?.connectTemporary(peer.id, rules);
        const res = await ssh({
-          hostname: peer.ip,
+          hostname: sshHost,
          port: Number(port),
          username,
+          ipVersion: ipVersion || undefined,
        });
        if (res === SSHStatus.CONNECTED) {
          sshConnectedOnce.current = true;
@@ -2,47 +2,21 @@

 import {
  AuthorityConfiguration,
-  OidcClient,
  OidcConfiguration,
  OidcProvider,
 } from "@axa-fr/react-oidc";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import loadConfig, { buildExtras } from "@utils/config";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { OIDCError } from "@/auth/OIDCError";
 import { SecureProvider } from "@/auth/SecureProvider";
-import { storeSessionLostRedirectPath } from "@/auth/sessionRedirect";

 type Props = {
  children: React.ReactNode;
 };

 const config = loadConfig();
-const AUTHENTICATED_CALLBACK_REDIRECT_PATH = "/peers";
-
-const getOidcRoutePath = (href: string, origin: string) => {
-  try {
-    const url = new URL(href, origin);
-    let path = url.pathname;
-    if (path.endsWith("/")) path = path.slice(0, -1);
-
-    let hash = url.hash;
-    if (hash === "#_=_") hash = "";
-    if (hash) path += hash.split("?")[0];
-
-    return path;
-  } catch {
-    return "";
-  }
-};
-
-const isOidcCallbackRoute = (href: string, redirectUri: string) =>
-  getOidcRoutePath(href, window.location.origin) ===
-  getOidcRoutePath(redirectUri, window.location.origin);
-
-const hasUsableTokens = (tokens: { expiresAt?: number } | null | undefined) =>
-  typeof tokens?.expiresAt === "number" && tokens.expiresAt > Date.now() / 1000;

 /**
 * Unfortunately Auth0 https://<DOMAIN>/.well-known/openid-configuration doesn't contain end_session_endpoint that
@@ -66,6 +40,7 @@ const onEvent = (configurationName: any, eventName: any, data: any) => {
 export default function OIDCProvider({ children }: Props) {
  const [providerConfig, setProviderConfig] = useState<OidcConfiguration>();
  const [mounted, setMounted] = useState(false);
+  const router = useRouter();
  const path = usePathname();

  const withCustomHistory = () => {
@@ -77,30 +52,16 @@ export default function OIDCProvider({ children }: Props) {
  };

  useEffect(() => {
-    let isMounted = true;
-
-    // The service worker is disabled in two cases:
-    //  1. tokenSource === "idtoken" — the SW would overwrite the manually-set
-    //     idToken header with the access_token, breaking the idToken path.
-    //  2. NETBIRD_DISABLE_SERVICE_WORKER=true — operator escape hatch for
-    //     debugging or deployments that hit edge cases with the SW.
-    const useServiceWorker =
-      !config.disableServiceWorker &&
-      config.tokenSource?.toLowerCase() !== "idtoken";
-
-    const nextProviderConfig: OidcConfiguration = {
+    setProviderConfig({
      authority: config.authority,
      client_id: config.clientId,
      redirect_uri: window.location.origin + config.redirectURI,
      refresh_time_before_tokens_expiration_in_second: 30,
      silent_redirect_uri: window.location.origin + config.silentRedirectURI,
      scope: config.scopesSupported,
-      ...(useServiceWorker
-        ? {
-            service_worker_relative_url: "/OidcServiceWorker.js",
-            service_worker_only: false,
-          }
-        : {}),
+      // disabling service worker
+      //service_worker_relative_url: "/OidcServiceWorker.js",
+      service_worker_only: false,
      authority_configuration: config.auth0Auth
        ? auth0AuthorityConfig
        : undefined,
@@ -108,53 +69,10 @@ export default function OIDCProvider({ children }: Props) {
      ...(config.clientSecret
        ? { token_request_extras: { client_secret: config.clientSecret } }
        : null),
-    };
-
-    const finishMounting = () => {
-      if (isMounted) setMounted(true);
-    };
-
-    const redirectAuthenticatedCallback = async () => {
-      // OidcRoutes handles the callback route before OidcSession restores
-      // existing tokens. If a callback URL is reached while the app already
-      // has a valid OIDC session, leave the callback route instead of trying
-      // to process a stale/duplicate callback.
-      if (
-        !isOidcCallbackRoute(
-          window.location.href,
-          nextProviderConfig.redirect_uri,
-        )
-      ) {
-        finishMounting();
-        return;
-      }
-
-      try {
-        const oidc = OidcClient.getOrCreate(() => fetch)(nextProviderConfig);
-        await oidc.tryKeepExistingSessionAsync();
-        if (!isMounted) return;
-        if (hasUsableTokens(oidc.tokens)) {
-          window.location.replace(AUTHENTICATED_CALLBACK_REDIRECT_PATH);
-          return;
-        }
-      } catch {}
-
-      finishMounting();
-    };
-
-    setProviderConfig(nextProviderConfig);
-    void redirectAuthenticatedCallback();
-
-    return () => {
-      isMounted = false;
-    };
+    });
+    setMounted(true);
  }, []);

-  const handleSessionLost = () => {
-    storeSessionLostRedirectPath();
-    window.location.replace("/");
-  };
-
  // We bypass authentication for pages that do not require auth.
  // E.g., when we just want to show installation steps for public.
  // Or the instance setup wizard for first-time setup.
@@ -171,13 +89,8 @@ export default function OIDCProvider({ children }: Props) {
      loadingComponent={FullScreenLoading}
      callbackSuccessComponent={FullScreenLoading}
      onEvent={onEvent}
-      // If session is lost, try to re-initiate authentication flow while
-      // preserving the current deep link for the post-login redirect.
-      onSessionLost={handleSessionLost}
-      // Another tab logged out — fires a separate event in @axa-fr/react-oidc,
-      // not covered by onSessionLost. Without this handler the library would
-      // render its default "Session timed out" UI instead of redirecting.
-      onLogoutFromAnotherTab={handleSessionLost}
+      onSessionLost={() => void 0}
+      //sessionLostComponent={SessionLost}
    >
      <SecureProvider>{children}</SecureProvider>
    </OidcProvider>
@@ -2,10 +2,6 @@ import { OidcSecure, useOidc } from "@axa-fr/react-oidc";
 import { usePathname } from "next/navigation";
 import * as React from "react";
 import { useEffect } from "react";
-import {
-  clearSessionLostRedirectPath,
-  getSessionLostRedirectPath,
-} from "@/auth/sessionRedirect";

 const QUERY_PARAMS_KEY = "netbird-query-params";
 const PRESERVE_QUERY_PARAMS_PATHS = ["/peer/ssh", "/peer/rdp"];
@@ -31,15 +27,11 @@ type Props = {
 export const SecureProvider = ({ children }: Props) => {
  const { isAuthenticated, login } = useOidc();
  const currentPath = usePathname();
-  const callbackPath = getSessionLostRedirectPath() ?? currentPath;

  useEffect(() => {
-    if (isAuthenticated) {
-      clearSessionLostRedirectPath();
-      if (!PRESERVE_QUERY_PARAMS_PATHS.includes(currentPath)) {
-        localStorage.removeItem(QUERY_PARAMS_KEY);
-      }
-    } else {
+    if (isAuthenticated && !PRESERVE_QUERY_PARAMS_PATHS.includes(currentPath)) {
+      localStorage.removeItem(QUERY_PARAMS_KEY);
+    } else if (!isAuthenticated) {
      try {
        const params = window.location.search.substring(1);
        if (params) {
@@ -57,18 +49,18 @@ export const SecureProvider = ({ children }: Props) => {
    if (!isAuthenticated) {
      timeout = setTimeout(async () => {
        if (!isAuthenticated) {
-          await login(callbackPath);
+          await login(currentPath);
        }
      }, 1500);
    }
    return () => {
      clearTimeout(timeout);
    };
-  }, [callbackPath, isAuthenticated, login]);
+  }, [currentPath, isAuthenticated, login]);

  return (
    <>
-      <OidcSecure callbackPath={callbackPath}>{children}</OidcSecure>
+      <OidcSecure callbackPath={currentPath}>{children}</OidcSecure>
    </>
  );
 };
@@ -1,47 +0,0 @@
-const SESSION_LOST_REDIRECT_PATH_KEY = "netbird-session-lost-redirect-path";
-
-const isSafeRelativePath = (path: string) =>
-  path.startsWith("/") && !path.startsWith("//");
-
-export const storeSessionLostRedirectPath = () => {
-  if (typeof window === "undefined") return;
-
-  const redirectPath = `${window.location.pathname}${window.location.search}${window.location.hash}`;
-
-  try {
-    if (
-      !redirectPath ||
-      redirectPath === "/" ||
-      !isSafeRelativePath(redirectPath)
-    ) {
-      window.sessionStorage.removeItem(SESSION_LOST_REDIRECT_PATH_KEY);
-      return;
-    }
-
-    window.sessionStorage.setItem(
-      SESSION_LOST_REDIRECT_PATH_KEY,
-      redirectPath,
-    );
-  } catch {}
-};
-
-export const getSessionLostRedirectPath = () => {
-  if (typeof window === "undefined") return undefined;
-
-  try {
-    const redirectPath = window.sessionStorage.getItem(
-      SESSION_LOST_REDIRECT_PATH_KEY,
-    );
-    if (redirectPath && isSafeRelativePath(redirectPath)) return redirectPath;
-  } catch {}
-
-  return undefined;
-};
-
-export const clearSessionLostRedirectPath = () => {
-  if (typeof window === "undefined") return;
-
-  try {
-    window.sessionStorage.removeItem(SESSION_LOST_REDIRECT_PATH_KEY);
-  } catch {}
-};
@@ -50,11 +50,11 @@ function CardListItem({
  return (
    <li
      className={cn(
-        "flex justify-between px-4 border-b border-nb-gray-900 py-4 last:border-b-0 items-center h-full",
+        "flex justify-between px-4 border-b border-nb-gray-900 py-3.5 last:border-b-0 items-center h-full",
        className,
      )}
    >
-      <div className={"flex gap-2.5 items-center text-sm"}>{label}</div>
+      <div className={"flex gap-2.5 items-center text-[0.84rem]"}>{label}</div>
      <div className={"flex flex-col gap-2"}>
        <CardTextItem
          label={label}
@@ -100,7 +100,7 @@ const CardTextItem = ({
  return (
    <div
      className={cn(
-        "text-right text-nb-gray-400 text-sm flex items-center gap-2",
+        "text-right text-nb-gray-400 text-[0.84rem] flex items-center gap-2",
        copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
      )}
      onClick={() =>
@@ -0,0 +1,129 @@
+import useCopyToClipboard from "@hooks/useCopyToClipboard";
+import { cn } from "@utils/helpers";
+import { Copy } from "lucide-react";
+import React from "react";
+
+type CardTableProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function CardTable({ children, className }: CardTableProps) {
+  return (
+    <div
+      className={cn(
+        "bg-nb-gray-940 rounded-md border border-nb-gray-900 w-full overflow-hidden",
+        className,
+      )}
+    >
+      <table className={"w-full border-collapse text-sm"}>{children}</table>
+    </div>
+  );
+}
+
+function CardTableHeader({ children, className }: CardTableProps) {
+  return (
+    <thead>
+      <tr
+        className={cn(
+          "border-b border-nb-gray-900",
+          className,
+        )}
+      >
+        {children}
+      </tr>
+    </thead>
+  );
+}
+
+type CardTableHeaderCellProps = {
+  children: React.ReactNode;
+  width?: number;
+  className?: string;
+};
+
+function CardTableHeaderCell({
+  children,
+  width,
+  className,
+}: CardTableHeaderCellProps) {
+  return (
+    <th
+      className={cn(
+        "px-4 py-2.5 text-left text-sm font-normal",
+        className,
+      )}
+      style={width ? { width } : undefined}
+    >
+      {children}
+    </th>
+  );
+}
+
+function CardTableBody({ children, className }: CardTableProps) {
+  return <tbody className={className}>{children}</tbody>;
+}
+
+type CardTableRowProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function CardTableRow({ children, className }: CardTableRowProps) {
+  return (
+    <tr
+      className={cn(
+        "border-b border-nb-gray-900 last:border-b-0",
+        className,
+      )}
+    >
+      {children}
+    </tr>
+  );
+}
+
+type CardTableCellProps = {
+  children: React.ReactNode;
+  copy?: boolean;
+  copyText?: string;
+  width?: number;
+  className?: string;
+};
+
+function CardTableCell({
+  children,
+  copy = false,
+  copyText,
+  width,
+  className,
+}: CardTableCellProps) {
+  const [, copyToClipBoard] = useCopyToClipboard(copyText ?? "");
+  return (
+    <td
+      className={cn("px-4 py-3", className)}
+      style={width ? { width } : undefined}
+    >
+      <div
+        className={cn(
+          "text-nb-gray-400 text-sm flex items-center gap-2",
+          copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
+        )}
+        onClick={() =>
+          copy &&
+          copyToClipBoard(`${copyText} has been copied to clipboard.`)
+        }
+      >
+        {children}
+        {copy && <Copy size={13} className={"shrink-0"} />}
+      </div>
+    </td>
+  );
+}
+
+CardTable.Header = CardTableHeader;
+CardTable.HeaderCell = CardTableHeaderCell;
+CardTable.Body = CardTableBody;
+CardTable.Row = CardTableRow;
+CardTable.Cell = CardTableCell;
+
+export default CardTable;
@@ -290,7 +290,7 @@ export function PeerGroupSelector({
  const searchPlaceholder = useMemo(() => {
    if (tab === "groups") return placeholderForSearch;
    if (tab === "resources") return "Search resource...";
-    if (tab === "peers") return "Search peer...";
+    if (tab === "peers") return "Search peer by name or ip...";
    return "Search...";
  }, [tab, placeholderForSearch]);

@@ -537,9 +537,6 @@ export function PeerGroupSelector({
                      const isSelected =
                        values.find((group) => group.name == option.name) !=
                        undefined;
-                      const peerCount =
-                        option.peers?.length ?? option?.peers_count ?? 0;
-
                      const isDisabled = disabledGroups
                        ? disabledGroups?.findIndex(
                            (g) => g.id === option.id,
@@ -968,7 +965,8 @@ const ResourcesList = ({
 const peersSearchPredicate = (item: Peer, query: string) => {
  const lowerCaseQuery = query.toLowerCase();
  if (item.name.toLowerCase().includes(lowerCaseQuery)) return true;
-  return item.ip.toLowerCase().includes(lowerCaseQuery);
+  if (item.ip.toLowerCase().includes(lowerCaseQuery)) return true;
+  return item.ipv6?.toLowerCase().includes(lowerCaseQuery) ?? false;
 };

 const PeersList = ({
@@ -30,7 +30,8 @@ const searchPredicate = (item: Peer, query: string) => {
  const lowerCaseQuery = query.toLowerCase();
  if (item.name.toLowerCase().includes(lowerCaseQuery)) return true;
  if (item.hostname.toLowerCase().includes(lowerCaseQuery)) return true;
-  return item.ip.toLowerCase().startsWith(lowerCaseQuery);
+  if (item.ip.toLowerCase().startsWith(lowerCaseQuery)) return true;
+  return !!item.ipv6?.toLowerCase().startsWith(lowerCaseQuery);
 };

 export function PeerSelector({
@@ -124,7 +125,6 @@ export function PeerSelector({
                    "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-1 font-mono text-[10px]"
                  }
                >
-                  <MapPinIcon />
                  {value.ip}
                </div>
              </div>
@@ -238,7 +238,6 @@ export function PeerSelector({
                        !isSupported && "opacity-50",
                      )}
                    >
-                      <MapPinIcon />
                      {option.ip}
                    </div>
                  </FullTooltip>
@@ -30,6 +30,7 @@ const PeerContext = React.createContext(
      inactivityExpiration?: boolean;
      approval_required?: boolean;
      ip?: string;
+      ipv6?: string;
    }) => Promise<Peer>;
    toggleSSH: (newState: boolean) => Promise<void>;
    setSSHInstructionsModal: (open: boolean) => void;
@@ -80,6 +81,7 @@ export default function PeerProvider({
    inactivityExpiration?: boolean;
    approval_required?: boolean;
    ip?: string;
+    ipv6?: string;
  }) => {
    return peerRequest.put(
      {
@@ -99,6 +101,7 @@ export default function PeerProvider({
            ? undefined
            : props.approval_required,
        ip: props.ip != undefined ? props.ip : undefined,
+        ipv6: props.ipv6 != undefined ? props.ipv6 : undefined,
      },
      `/${peer.id}`,
    );
@@ -2,6 +2,7 @@

 import { notify } from "@components/Notification";
 import useFetchApi, { useApiCall } from "@utils/api";
+import { wrapIPv6 } from "@utils/ip";
 import React, {
  createContext,
  useCallback,
@@ -15,6 +16,8 @@ import { Network, NetworkResource } from "@/interfaces/Network";
 import { Peer } from "@/interfaces/Peer";
 import {
  ReverseProxy,
+  ReverseProxyCluster,
+  ReverseProxyClusterType,
  ReverseProxyDomain,
  ReverseProxyFlatTarget,
  ReverseProxyTarget,
@@ -23,6 +26,7 @@ import {
 } from "@/interfaces/ReverseProxy";
 import ReverseProxyModal from "@/modules/reverse-proxy/ReverseProxyModal";
 import ReverseProxyTargetModal from "@/modules/reverse-proxy/targets/ReverseProxyTargetModal";
+import { usePermissions } from "@/contexts/PermissionsProvider";

 type ReverseProxiesContextValue = {
  reverseProxies: ReverseProxy[] | undefined;
@@ -51,6 +55,9 @@ type ReverseProxiesContextValue = {
    domain: string,
    targetCluster: string,
  ) => Promise<ReverseProxyDomain>;
+  clusters: ReverseProxyCluster[] | undefined;
+  isClustersLoading: boolean;
+  isSelfHostedCluster: (clusterAddress?: string) => boolean;
 };

 type OpenModalOptions = {
@@ -90,10 +97,14 @@ export default function ReverseProxiesProvider({
 }: Readonly<Props>) {
  const { mutate } = useSWRConfig();
  const { confirm } = useDialog();
+  const { permission } = usePermissions();

  // Reverse Proxies
  const { data: rawReverseProxies, isLoading } = useFetchApi<ReverseProxy[]>(
    "/reverse-proxies/services",
+    false,
+    true,
+    permission?.services.read,
  );
  const request = useApiCall<ReverseProxy>("/reverse-proxies/services", true);

@@ -101,6 +112,9 @@ export default function ReverseProxiesProvider({
  const { data: peers } = useFetchApi<Peer[]>("/peers");
  const { data: resources } = useFetchApi<NetworkResource[]>(
    "/networks/resources",
+    false,
+    true,
+    permission?.services.read,
  );

  const resolveDestination = useCallback(
@@ -125,12 +139,28 @@ export default function ReverseProxiesProvider({
  // Domains
  const { data: domains, isLoading: isLoadingDomains } = useFetchApi<
    ReverseProxyDomain[]
-  >("/reverse-proxies/domains");
+  >("/reverse-proxies/domains", false, true, permission.services?.read);
  const domainRequest = useApiCall<ReverseProxyDomain>(
    "/reverse-proxies/domains",
    true,
  );

+  // Clusters
+  const { data: clusters, isLoading: isClustersLoading } = useFetchApi<
+    ReverseProxyCluster[]
+  >("/reverse-proxies/clusters", false, true, permission.services?.read);
+
+  const isSelfHostedCluster = useCallback(
+    (clusterAddress?: string) => {
+      if (!clusterAddress) return false;
+      return (
+        clusters?.find((c) => c.address === clusterAddress)?.type ===
+        ReverseProxyClusterType.ACCOUNT
+      );
+    },
+    [clusters],
+  );
+
  const [modalOpen, setModalOpen] = useState(false);
  const [currentProxy, setCurrentProxy] = useState<ReverseProxy | undefined>();
  const [initialTab, setInitialTab] = useState<string | undefined>();
@@ -483,6 +513,9 @@ export default function ReverseProxiesProvider({
        createDomain,
        validateDomain,
        deleteDomain,
+        clusters,
+        isClustersLoading,
+        isSelfHostedCluster,
      }}
    >
      {children}
@@ -604,7 +637,7 @@ function formatTargetDestination(
  target: ReverseProxyTarget,
  resolvedHost?: string,
 ): string {
-  const host = target.host || resolvedHost || "localhost";
+  const host = wrapIPv6(target.host || resolvedHost || "localhost");
  const isDefault =
    (target.protocol === "http" && target.port === 80) ||
    (target.protocol === "https" && target.port === 443) ||
Author	SHA1	Message	Date
Maycon SantosandEduard Gert	42cd088c5d	rebuild self-hosted page as Clusters with type features (#641 ) * feat(reverse-proxy): rebuild self-hosted page as Clusters with type + features The Self-Hosted Proxies page was account-only by design but the underlying API already returned every cluster the account could see. Lifting that filter and renaming the page surfaces shared clusters too — operators can see what NetBird-deployed clusters are reachable alongside their own self-hosted ones, with online status and feature support visible per row. ReverseProxyCluster matches the new backend shape: `type` (account/shared), `online`, and the three capability flags. The `isSelfHostedCluster` provider hook now compares against `type === account` instead of a deprecated boolean. Page folder renamed self-hosted-proxies → clusters (history-preserving git mv). Table columns: Cluster (with an EphemeralPeerIndicator-style icon next to the name marking account vs shared and a colored dot for online status), Connected Proxies (plain numeric), Features (one tooltip-backed badge per supported capability), Actions (Delete only on account-owned rows; shared clusters render an empty action cell). Empty state shows when the list is fully empty with a doc link in the page header. Sidebar entry restored under Reverse Proxy. * Update record in modal, update doc link, update modal title * update reverse proxy documentation links to latest anchors * update cluster modal description to "proxy cluster" instead of "self-hosted cluster" --------- Co-authored-by: Eduard Gert <kontakt@eduardgert.de>	2026-05-20 11:48:38 +02:00
Maycon Santos	7400ac806e	remove self-hosted proxies menu item (#640 )	2026-05-14 17:50:07 +02:00
Viktor Liu	240ff5af9a	Fix IPv6 input across reverse proxy, routes and resources (#638 )	2026-05-14 16:43:02 +02:00
Eduard Gert	dc86c30463	Add self-hosted proxies (#636 ) * Add self-hosted proxies * fix selfhosted badge for domain	2026-05-12 15:22:12 +02:00
Nicolas Frati	e58f75ae3c	Enable MFA for local users toggle (#615 ) * implement enable mfa for local users toggle * fix visibility check * Added beta badge to MFA auth toggle	2026-05-08 16:51:17 +02:00
Viktor Liu	dc1adebd27	Add IPv6 overlay settings and peer display (#594 )	2026-05-07 15:20:12 +02:00