Size the tab list against the header and the announcement banner

The list computed calc(100vh - 75px) on its own. The header is 65px, and with an announcement banner open DashboardLayout shrinks the row holding PageContainer to calc(100vh - (headerHeight + bannerHeight)) -- so the list asked for more height than its scroll container had and drifted with the scroll instead of holding at the top. It now takes the same figure Navigation and DashboardLayout use. That arrives through a CSS variable rather than an inline height, which keeps the breakpoint in CSS: the value is always a length, so the height cannot degrade to auto and bring back the stretch that stopped it sticking in the first place. bannerHeight is defaulted because useAnnouncement is a bare useContext with an empty default, and NaNpx would invalidate the calc. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Take the tab list's height from CSS, not a JS media query
2026-09-23 00:30:43 -07:00 · 2026-09-11 11:44:20 +02:00 · 2026-09-11 11:30:39 +02:00 · 2026-09-11 10:25:51 +02:00 · 2026-09-11 10:13:14 +02:00 · 2026-09-11 10:08:46 +02:00
58 changed files with 1018 additions and 2781 deletions
@@ -98,6 +98,24 @@ jobs:
            type=ref,event=pr
            type=sha

+      - name: Docker meta (rootless)
+        id: meta_rootless
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ env.DOCKERHUB_IMAGE }}
+            ${{ env.GHCR_IMAGE }}
+          flavor: |
+            latest=false
+            suffix=-rootless,onlatest=true
+          tags: |
+            type=schedule
+            type=ref,event=branch
+            type=ref,event=tag
+            type=raw,value=latest,enable=${{ startsWith(github.ref, 'refs/tags/') }}
+            type=ref,event=pr
+            type=sha
+
      - name: Log in to Docker Hub
        if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository
        uses: docker/login-action@v3
@@ -123,7 +141,18 @@ jobs:
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}

+      - name: Build and push rootless Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: docker/Dockerfile.rootless
+          push: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository }}
+          platforms: linux/amd64,linux/arm64,linux/arm
+          tags: ${{ steps.meta_rootless.outputs.tags }}
+          labels: ${{ steps.meta_rootless.outputs.labels }}
+
      - if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository
        run: |
          echo '### Pushed tags' >> $GITHUB_STEP_SUMMARY
          echo '${{ steps.meta.outputs.tags }}' >> $GITHUB_STEP_SUMMARY
+          echo '${{ steps.meta_rootless.outputs.tags }}' >> $GITHUB_STEP_SUMMARY
@@ -11,6 +11,7 @@
 #   ./build.sh                # build + export netbird-dashboard.tar.gz
 #   IMAGE_TAG=v1 ./build.sh   # override the image tag
 #   SKIP_BUILD=1 ./build.sh   # reuse an existing out/ (skip npm build)
+#   ROOTLESS=1 ./build.sh     # build the amd64-rootless image variant
 #
 set -euo pipefail

@@ -19,8 +20,26 @@ cd "$(dirname "$0")"

 IMAGE_NAME="${IMAGE_NAME:-netbird-dashboard}"
 IMAGE_TAG="${IMAGE_TAG:-amd64}"
+DOCKERFILE="docker/Dockerfile"
+CONTAINER_PORT=80
+OUTPUT_SUFFIX=""
+
+case "${ROOTLESS:-0}" in
+  0) ;;
+  1)
+    DOCKERFILE="docker/Dockerfile.rootless"
+    CONTAINER_PORT=8080
+    OUTPUT_SUFFIX="-rootless"
+    [[ "${IMAGE_TAG}" == *-rootless ]] || IMAGE_TAG="${IMAGE_TAG}-rootless"
+    ;;
+  *)
+    echo "ERROR: ROOTLESS must be 0 or 1." >&2
+    exit 1
+    ;;
+esac
+
 IMAGE="${IMAGE_NAME}:${IMAGE_TAG}"
-OUTPUT="${OUTPUT:-${IMAGE_NAME}.tar.gz}"
+OUTPUT="${OUTPUT:-${IMAGE_NAME}${OUTPUT_SUFFIX}.tar.gz}"

 # Build the static export (out/) unless told to reuse an existing one. Next 16
 # no longer runs ESLint during `next build`; types are checked by the build via
@@ -39,17 +58,10 @@ if [[ ! -d out ]]; then
  exit 1
 fi

-# The .dockerignore lives under docker/, but Docker reads it from the build
-# context root. Stage it for the duration of the build so node_modules/.next
-# don't get shipped into the build context.
-cleanup() { rm -f .dockerignore; }
-trap cleanup EXIT
-cp docker/.dockerignore .dockerignore
-
 echo "==> Building ${IMAGE} for linux/amd64"
 docker build \
  --platform linux/amd64 \
-  -f docker/Dockerfile \
+  -f "${DOCKERFILE}" \
  -t "${IMAGE}" \
  .

@@ -60,13 +72,13 @@ echo "==> Done: ${OUTPUT} ($(du -h "${OUTPUT}" | cut -f1))"
 echo
 echo "Copy and run on the server:"
 echo "  scp ${OUTPUT} user@your-server:/tmp/"
-echo "  docker load < /tmp/${OUTPUT}"
+echo "  docker load < /tmp/${OUTPUT##*/}"
 echo
-echo "Run (nginx serves on container port 80). Set the runtime env vars the"
+echo "Run (nginx serves on container port ${CONTAINER_PORT}). Set the runtime env vars the"
 echo "dashboard templates at startup — for the Agent Network onboarding test,"
 echo "flip NETBIRD_AGENT_NETWORK_ONLY=true:"
 echo "  docker run -d --name ${IMAGE_NAME} --restart unless-stopped \\"
-echo "    -p 8080:80 \\"
+echo "    -p 8080:${CONTAINER_PORT} \\"
 echo "    -e NETBIRD_MGMT_API_ENDPOINT=https://your-mgmt:443 \\"
 echo "    -e AUTH_AUTHORITY=https://your-idp/realms/netbird \\"
 echo "    -e AUTH_CLIENT_ID=netbird-dashboard \\"
@@ -0,0 +1,29 @@
+FROM alpine:3.24
+
+RUN apk add --no-cache bash ca-certificates gettext nginx tzdata && \
+    rm -rf /var/cache/apk/* && \
+    mkdir -p /tmp/nginx
+
+STOPSIGNAL SIGINT
+EXPOSE 8080
+
+WORKDIR /usr/share/nginx/html
+
+COPY docker/default.conf /etc/nginx/http.d/default.conf
+COPY docker/nginx.conf /etc/nginx/nginx.conf
+COPY docker/rootless.conf /etc/nginx/http.d/rootless.conf
+COPY docker/init_react_envs.sh /usr/local/init_react_envs.sh
+COPY out/ /usr/share/nginx/html/
+
+RUN sed -i \
+      -e 's/listen 80 default_server;/listen 8080 default_server;/' \
+      -e 's/listen \[::\]:80 default_server;/listen [::]:8080 default_server;/' \
+      /etc/nginx/http.d/default.conf && \
+    sed -i '/^user nginx;$/d' /etc/nginx/nginx.conf && \
+    chmod +x /usr/local/init_react_envs.sh && \
+    chgrp -R 0 /etc/nginx/http.d /usr/share/nginx/html /tmp/nginx && \
+    chmod -R g=u /etc/nginx/http.d /usr/share/nginx/html /tmp/nginx
+
+USER 10001:0
+ENTRYPOINT ["/usr/local/init_react_envs.sh"]
+CMD ["/usr/sbin/nginx", "-e", "/dev/stderr", "-g", "pid /tmp/nginx.pid;"]
@@ -1,23 +1,59 @@
 # NetBird Dashboard
-NetBird Dashboard is NetBirds Management server UI. It allows users to signin, view setup keys and manage peers. This image is **not ready** for production use.
-## Tags
-```latest``` ```vX.X.X``` not available yet.

-```main``` built on every PR being merged to the repository
+NetBird Dashboard is NetBird's management server UI.
+
+## Tags
+
+Each published image tag also has a rootless variant with the `-rootless`
+suffix. For example, `main` is also published as `main-rootless`.
+
 ## How to use this image
-HTTP run:
+
+HTTP:
+
 ```shell
-docker run -d --rm -p 80:80 wiretrustee/dashboard:main
+docker run -d --rm -p 80:80 netbirdio/dashboard:main
 ```
-Using SSL certificate from Let's Encrypt®:
+
+Using an SSL certificate from Let's Encrypt:
+
 ```shell
 docker run -d --rm -p 80:80 -p 443:443 \
  -e LETSENCRYPT_DOMAIN=app.mydomain.com \
  -e LETSENCRYPT_EMAIL=hello@mydomain.com \
  netbirdio/dashboard:main
 ```
-> For SSL generation, you need to run this image in a server with proper public IP and a domain name pointing to it.
+
+For certificate generation, the server needs a public IP and a domain name
+pointing to it.
+
+### Rootless and OpenShift
+
+The rootless image listens on port `8080`, runs as UID `10001` by default, and
+supports OpenShift's arbitrary UID when the container retains GID `0`:
+
+```shell
+docker run -d --rm \
+  --user 12345:0 \
+  -p 8080:8080 \
+  -e AUTH_AUTHORITY=https://idp.example.com \
+  -e AUTH_CLIENT_ID=netbird-dashboard \
+  -e AUTH_AUDIENCE=netbird-dashboard \
+  -e AUTH_SUPPORTED_SCOPES='openid profile email' \
+  -e USE_AUTH0=false \
+  -e NETBIRD_MGMT_API_ENDPOINT=https://api.example.com \
+  netbirdio/dashboard:main-rootless
+```
+
+The rootless image does not include Certbot or expose HTTPS. Terminate TLS at
+the OpenShift Route, Ingress, or another reverse proxy.
+
 ## Environment variables
-* ```NGINX_SSL_PORT``` Changes the port that Nginx listens to. Defaults to ```443```
-* ```LETSENCRYPT_DOMAIN``` Enables Certbot`s client execution for the specified domain. Defaults to ```none```
-* ```LETSENCRYPT_EMAIL``` Email used in Certbot`s client execution to register the certificate request. Defaults to ```example@local```
+
+- `NGINX_SSL_PORT` changes the port that Nginx listens to. Defaults to `443`.
+- `LETSENCRYPT_DOMAIN` enables Certbot for the specified domain. Defaults to
+  `none`.
+- `LETSENCRYPT_EMAIL` is used to register the certificate request. Defaults to
+  `example@local`.
+
+These certificate variables apply only to the standard image.
@@ -173,6 +173,12 @@ for f in $(grep -R -l AUTH_SUPPORTED_SCOPES /usr/share/nginx/html); do
    rm "$f".copy
 done

+# When a command is provided, initialization happens before the server starts.
+# The rootless image uses this path so nginx never needs to be reloaded.
+if (( $# > 0 )); then
+    exec "$@"
+fi
+
 # Reload nginx so the patched CSP header takes effect.
 # supervisord starts nginx (priority 100) before this script (priority 201) and
 # never reloads it, so without this nginx keeps serving the static default.conf
@@ -0,0 +1,7 @@
+# nginx includes this file inside the http context.
+# All runtime state stays in a directory writable by the arbitrary UID used by OpenShift.
+client_body_temp_path /tmp/nginx/client_temp;
+proxy_temp_path /tmp/nginx/proxy_temp;
+fastcgi_temp_path /tmp/nginx/fastcgi_temp;
+uwsgi_temp_path /tmp/nginx/uwsgi_temp;
+scgi_temp_path /tmp/nginx/scgi_temp;
@@ -33,7 +33,7 @@
        "@types/crypto-js": "^4.2.2",
        "@types/d3": "^7.4.3",
        "@types/lodash": "4.17.24",
-        "@types/node": "20.10.6",
+        "@types/node": "20.19.43",
        "@types/react": "^19",
        "@types/react-dom": "^19",
        "@types/react-window": "^1.8.8",
@@ -64,7 +64,6 @@
        "punycode": "^2.3.1",
        "react": "^19.2.4",
        "react-chartjs-2": "^5.3.0",
-        "react-confetti-explosion": "^3.0.3",
        "react-day-picker": "^9.13.0",
        "react-dom": "^19.2.4",
        "react-ga4": "^2.1.0",
@@ -83,7 +82,6 @@
        "typescript": "^5"
      },
      "devDependencies": {
-        "@faker-js/faker": "^9.5.1",
        "@playwright/test": "^1.52.0",
        "@testing-library/dom": "^10.4.1",
        "@testing-library/react": "^16.3.2",
@@ -850,23 +848,6 @@
        }
      }
    },
-    "node_modules/@faker-js/faker": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-9.9.0.tgz",
-      "integrity": "sha512-OEl393iCOoo/z8bMezRlJu+GlRGlsKbUAN7jKB6LhnKoqKve5DXRpalbItIIcwnCjs1k/FOPjFzcA6Qn+H+YbA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/fakerjs"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=9.0.0"
-      }
-    },
    "node_modules/@floating-ui/core": {
      "version": "1.7.4",
      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
@@ -906,27 +887,40 @@
      "license": "MIT"
    },
    "node_modules/@humanfs/core": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
-      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+      "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/types": "^0.15.0"
+      },
      "engines": {
        "node": ">=18.18.0"
      }
    },
    "node_modules/@humanfs/node": {
-      "version": "0.16.7",
-      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
-      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+      "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
      "license": "Apache-2.0",
      "dependencies": {
-        "@humanfs/core": "^0.19.1",
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
        "@humanwhocodes/retry": "^0.4.0"
      },
      "engines": {
        "node": ">=18.18.0"
      }
    },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+      "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
    "node_modules/@humanwhocodes/module-importer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -3687,12 +3681,12 @@
      "license": "MIT"
    },
    "node_modules/@types/node": {
-      "version": "20.10.6",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.6.tgz",
-      "integrity": "sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==",
+      "version": "20.19.43",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.43.tgz",
+      "integrity": "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==",
      "license": "MIT",
      "dependencies": {
-        "undici-types": "~5.26.4"
+        "undici-types": "~6.21.0"
      }
    },
    "node_modules/@types/react": {
@@ -4616,9 +4610,9 @@
      }
    },
    "node_modules/browserslist": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
-      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "version": "4.28.8",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.8.tgz",
+      "integrity": "sha512-V2NpofLblG64mfOtSgDhOJESZEGogzDMBv/q+W6oc4LXWP/q75eOXoOaaOu1EOadB9U4Bwx/e0yzbvwKH8zalA==",
      "funding": [
        {
          "type": "opencollective",
@@ -4635,11 +4629,11 @@
      ],
      "license": "MIT",
      "dependencies": {
-        "baseline-browser-mapping": "^2.9.0",
-        "caniuse-lite": "^1.0.30001759",
-        "electron-to-chromium": "^1.5.263",
-        "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.2.0"
+        "baseline-browser-mapping": "^2.11.12",
+        "caniuse-lite": "^1.0.30001809",
+        "electron-to-chromium": "^1.5.402",
+        "node-releases": "^2.0.53",
+        "update-browserslist-db": "^1.3.0"
      },
      "bin": {
        "browserslist": "cli.js"
@@ -5645,9 +5639,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.5.302",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.302.tgz",
-      "integrity": "sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==",
+      "version": "1.5.420",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.420.tgz",
+      "integrity": "sha512-2yD6XreGusOfNV+dUcvipJEXc3n/n7fgr7996aszTG+YY5E4mqM4tOq/3uhP129cazL9YHbVWSpc79ePotWtPA==",
      "license": "ISC"
    },
    "node_modules/elkjs": {
@@ -8430,10 +8424,13 @@
      }
    },
    "node_modules/node-releases": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
-      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
-      "license": "MIT"
+      "version": "2.0.54",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.54.tgz",
+      "integrity": "sha512-YHs7BmmcsdAI5Ozuf8JZo6PT0mv2GIWC9vMfvUC3dp65M8hn7Ux8CPL+2oBI7juNuj9d0ndhTcznq2ODBps9cQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
    },
    "node_modules/normalize-path": {
      "version": "3.0.0",
@@ -8782,7 +8779,6 @@
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
@@ -8941,9 +8937,9 @@
      }
    },
    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
+      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
      "license": "MIT",
      "dependencies": {
        "cssesc": "^3.0.0",
@@ -9078,16 +9074,6 @@
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
-    "node_modules/react-confetti-explosion": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/react-confetti-explosion/-/react-confetti-explosion-3.0.3.tgz",
-      "integrity": "sha512-ow5ns/1ttzXsIlbbfJmWJNiyQK8lTHBL6lRSUXGaK44K/3NIMngR57Ja96l+D6txTeFhfe0BfXGvORMxhtRDng==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
    "node_modules/react-day-picker": {
      "version": "9.13.2",
      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.13.2.tgz",
@@ -10508,9 +10494,9 @@
      }
    },
    "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
      "license": "MIT"
    },
    "node_modules/unrs-resolver": {
@@ -10549,9 +10535,9 @@
      }
    },
    "node_modules/update-browserslist-db": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
-      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.2.tgz",
+      "integrity": "sha512-UQ+MSxlhRm1bzjhU+DcuXfjFO1FzNtqhK5+9Yvlp90ItDLk5vT932A0rFu619nf7RVS+Y/VeaUW1jaRDqZ8VJw==",
      "funding": [
        {
          "type": "opencollective",
@@ -48,7 +48,7 @@
    "@types/crypto-js": "^4.2.2",
    "@types/d3": "^7.4.3",
    "@types/lodash": "4.17.24",
-    "@types/node": "20.10.6",
+    "@types/node": "20.19.43",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@types/react-window": "^1.8.8",
@@ -79,7 +79,6 @@
    "punycode": "^2.3.1",
    "react": "^19.2.4",
    "react-chartjs-2": "^5.3.0",
-    "react-confetti-explosion": "^3.0.3",
    "react-day-picker": "^9.13.0",
    "react-dom": "^19.2.4",
    "react-ga4": "^2.1.0",
@@ -101,7 +100,6 @@
    "minimatch": ">=10.2.1"
  },
  "devDependencies": {
-    "@faker-js/faker": "^9.5.1",
    "@playwright/test": "^1.52.0",
    "@testing-library/dom": "^10.4.1",
    "@testing-library/react": "^16.3.2",
@@ -114,5 +112,11 @@
    "prettier": "3.0.3",
    "tailwindcss": "^3.4.17",
    "vitest": "^4.1.10"
+  },
+  "allowScripts": {
+    "@axa-fr/oidc-client": false,
+    "@axa-fr/react-oidc": false,
+    "fsevents": false,
+    "unrs-resolver": false
  }
 }
@@ -61,7 +61,10 @@ export default function NetBirdSettings() {
        <VerticalTabs.List>
          {permission.settings.read && (
            <>
-              <VerticalTabs.Trigger value="authentication" data-testid="settings-tab-authentication">
+              <VerticalTabs.Trigger
+                value="authentication"
+                data-testid="settings-tab-authentication"
+              >
                <ShieldIcon size={14} />
                Authentication
              </VerticalTabs.Trigger>
@@ -78,19 +81,31 @@ export default function NetBirdSettings() {
                    Identity Providers
                  </VerticalTabs.Trigger>
                )}
-              <VerticalTabs.Trigger value="groups" data-testid="settings-tab-groups">
+              <VerticalTabs.Trigger
+                value="groups"
+                data-testid="settings-tab-groups"
+              >
                <FolderGit2Icon size={14} />
                Groups
              </VerticalTabs.Trigger>
-              <VerticalTabs.Trigger value="permissions" data-testid="settings-tab-permissions">
+              <VerticalTabs.Trigger
+                value="permissions"
+                data-testid="settings-tab-permissions"
+              >
                <LockIcon size={14} />
                Permissions
              </VerticalTabs.Trigger>
-              <VerticalTabs.Trigger value="networks" data-testid="settings-tab-networks">
+              <VerticalTabs.Trigger
+                value="networks"
+                data-testid="settings-tab-networks"
+              >
                <NetworkIcon size={14} />
                Networks
              </VerticalTabs.Trigger>
-              <VerticalTabs.Trigger value="clients" data-testid="settings-tab-clients">
+              <VerticalTabs.Trigger
+                value="clients"
+                data-testid="settings-tab-clients"
+              >
                <MonitorSmartphoneIcon size={14} />
                Clients
              </VerticalTabs.Trigger>
@@ -1,7 +1,7 @@
 import { useOidcAccessToken, useOidcIdToken } from "@axa-fr/react-oidc";
 import loadConfig from "@utils/config";
 import { useMemo } from "react";
-import { useJwt } from "react-jwt";
+import { decodeToken } from "react-jwt";

 const config = loadConfig();
 export const useDomainCategory = () => {
@@ -9,10 +9,12 @@ export const useDomainCategory = () => {
  const { idToken } = useOidcIdToken();
  const { accessToken } = useOidcAccessToken();
  const token = tokenSource.toLowerCase() == "idtoken" ? idToken : accessToken;
-  const { decodedToken } = useJwt<Record<any, any>>(token);

  const domainCategory = useMemo(() => {
    try {
+      const decodedToken = token
+        ? decodeToken<Record<any, any>>(token)
+        : undefined;
      const key = decodedToken
        ? Object.keys(decodedToken)
            .filter((key) => key.includes("wt_account_domain_category"))
@@ -22,7 +24,7 @@ export const useDomainCategory = () => {
    } catch (e) {
      return undefined;
    }
-  }, [decodedToken]);
+  }, [token]);

  const isPrivate = useMemo(() => {
    return domainCategory === "private";
@@ -1,28 +1,28 @@
 import Breadcrumbs from "@components/Breadcrumbs";
+import Card from "@components/Card";
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import { SkeletonNotificationSettings } from "@components/skeletons/SkeletonNotificationSettings";
+import { SmallBadge } from "@components/ui/SmallBadge";
+import { VerticalTabs } from "@components/VerticalTabs";
 import * as Tabs from "@radix-ui/react-tabs";
 import { ExternalLinkIcon, MessageSquareDot } from "lucide-react";
 import React from "react";
 import SettingsIcon from "@/assets/icons/SettingsIcon";
-import { usePermissions } from "@/contexts/PermissionsProvider";
-import { useIsLicensed } from "@/hooks/useIsLicensed";
-import { VerticalTabs } from "@components/VerticalTabs";
-import InlineLink from "@components/InlineLink";
-import Card from "@components/Card";
 import { NotificationEmailChannel } from "@/cloud/notifications/channels/NotificationEmailChannel";
+import { NotificationSlackChannel } from "@/cloud/notifications/channels/NotificationSlackChannel";
 import { NotificationWebhookChannel } from "@/cloud/notifications/channels/NotificationWebhookChannel";
-import useUrlTab from "@/hooks/useUrlTab";
-import Paragraph from "@components/Paragraph";
+import { NotificationChannelListItem } from "@/cloud/notifications/NotificationChannelListItem";
 import NotificationProvider, {
  useNotifications,
 } from "@/cloud/notifications/NotificationProvider";
-import { NotificationChannelListItem } from "@/cloud/notifications/NotificationChannelListItem";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useIsLicensed } from "@/hooks/useIsLicensed";
+import useUrlTab from "@/hooks/useUrlTab";
 import {
  NOTIFICATION_CHANNELS_DOCS_LINK,
  NotificationChannelType,
 } from "@/interfaces/NotificationChannel";
-import { SkeletonNotificationSettings } from "@components/skeletons/SkeletonNotificationSettings";
-import { NotificationSlackChannel } from "@/cloud/notifications/channels/NotificationSlackChannel";
-import { SmallBadge } from "@components/ui/SmallBadge";

 const NotificationsOverview = ({
  onSelectChannel,
@@ -52,23 +52,18 @@ const NotificationsOverview = ({
          active
        />
      </Breadcrumbs>
-      <div className={"flex items-start justify-between"}>
+      <div className={"flex items-start justify-between -mt-1"}>
        <div>
          <h1>Notifications</h1>
-          <Paragraph>
-            Choose how to be notified when important events occur in your
-            account.
-          </Paragraph>
-          <Paragraph>
-            Learn more about{" "}
+          <Paragraph className={"block"}>
+            Get notified when important events happen.{" "}
            <InlineLink
              href={NOTIFICATION_CHANNELS_DOCS_LINK}
              target={"_blank"}
            >
-              Notification Channels
+              Learn more
              <ExternalLinkIcon size={12} />
            </InlineLink>
-            in our documentation.
          </Paragraph>
        </div>
      </div>
@@ -0,0 +1,140 @@
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { notify } from "@components/Notification";
+import { validator } from "@utils/helpers";
+import { PlusCircle } from "lucide-react";
+import * as React from "react";
+import { useMemo, useState } from "react";
+import { useSignInDomains } from "@/cloud/sign-in-domains/useSignInDomains";
+import { DomainValidationStatus, SignInDomain } from "@/interfaces/Account";
+import { DomainVerificationModal } from "@/modules/integrations/sso/DomainVerificationModal";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export const AddSignInDomainModal = ({ open, onOpenChange }: Props) => {
+  const { addDomain, verifyDomain, mutate } = useSignInDomains();
+  const [name, setName] = useState("");
+  const [verifyModal, setVerifyModal] = useState(false);
+  const [addedDomain, setAddedDomain] = useState<SignInDomain>();
+
+  const validationError = useMemo(() => {
+    const domain = name.trim();
+    if (domain === "") return "";
+    const valid = validator.isValidDomain(domain, {
+      allowWildcard: false,
+      allowOnlyTld: false,
+      preventLeadingAndTrailingDots: true,
+    });
+    if (!valid) return "Please enter a valid domain, e.g. company.com";
+    return "";
+  }, [name]);
+
+  const setOpen = (next: boolean) => {
+    if (!next) setName("");
+    onOpenChange(next);
+  };
+
+  const submit = () => {
+    const domain = name.trim();
+    if (!domain || validationError) return;
+
+    setOpen(false);
+
+    notify({
+      title: "Sign-in Domains",
+      description: `${domain} has been added`,
+      promise: addDomain(domain).then((added) => {
+        if (
+          added &&
+          added.validation_status !== DomainValidationStatus.VERIFIED
+        ) {
+          setAddedDomain(added);
+          setVerifyModal(true);
+        }
+        mutate().catch(() => {});
+        return added;
+      }),
+      loadingMessage: "Adding domain...",
+    });
+  };
+
+  return (
+    <>
+      {addedDomain && (
+        <DomainVerificationModal
+          open={verifyModal}
+          onOpenChange={setVerifyModal}
+          domain={addedDomain.name}
+          token={addedDomain.validation_token}
+          onVerify={() =>
+            verifyDomain(addedDomain.id).then((res) => {
+              mutate().catch(() => {});
+              return res;
+            })
+          }
+        />
+      )}
+
+      <Modal open={open} onOpenChange={setOpen}>
+        <ModalContent maxWidthClass={"max-w-md"}>
+          <ModalHeader
+            className={"pb-4 px-8"}
+            title={"Add Sign-in Domain"}
+            description={"Users on this domain are matched to your account."}
+          />
+
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              submit();
+            }}
+          >
+            <div className={"p-default flex flex-col gap-4"}>
+              <div>
+                <Input
+                  autoFocus
+                  data-testid={"add-domain-input"}
+                  placeholder={"e.g. company.com"}
+                  value={name}
+                  error={validationError}
+                  onChange={(event) => setName(event.target.value)}
+                />
+              </div>
+            </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"}
+                  type={"submit"}
+                  disabled={!name.trim() || !!validationError}
+                  data-testid={"add-domain-submit"}
+                >
+                  <PlusCircle size={16} />
+                  Add
+                </Button>
+              </div>
+            </ModalFooter>
+          </form>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
@@ -0,0 +1,72 @@
+import Button from "@components/Button";
+import HelpText from "@components/HelpText";
+import InlineLink from "@components/InlineLink";
+import { Label } from "@components/Label";
+import { cn } from "@utils/helpers";
+import { isNetBirdCloud } from "@utils/netbird";
+import { ExternalLinkIcon, PlusCircle } from "lucide-react";
+import * as React from "react";
+import { useState } from "react";
+import { useDomainCategory } from "@/cloud/cloud-hooks/useDomainCategory";
+import { AddSignInDomainModal } from "@/cloud/sign-in-domains/AddSignInDomainModal";
+import SignInDomainsTable from "@/cloud/sign-in-domains/table/SignInDomainsTable";
+import { useSignInDomains } from "@/cloud/sign-in-domains/useSignInDomains";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+
+const POLL_INTERVAL_MS = 15_000;
+
+const SIGN_IN_DOMAINS_DOCS_LINK =
+  "https://docs.netbird.io/manage/team/sign-in-domains";
+
+export const useCanViewSignInDomains = () => {
+  const { permission } = usePermissions();
+  const { isPrivate } = useDomainCategory();
+  return Boolean(permission?.settings?.read) && isNetBirdCloud() && isPrivate;
+};
+
+export const SignInDomainsSettings = () => {
+  const { permission } = usePermissions();
+  const { domains, isLoading, isUnavailable } =
+    useSignInDomains(POLL_INTERVAL_MS);
+  const [addModal, setAddModal] = useState(false);
+
+  const showSkeleton = isLoading && !isUnavailable;
+
+  return (
+    <div
+      className={cn(
+        isLoading && "animate-pulse pointer-events-none opacity-90",
+        isUnavailable && "pointer-events-none opacity-70",
+      )}
+      data-testid={"sign-in-domains"}
+    >
+      <div className={"flex items-end justify-between gap-4 mb-4"}>
+        <div className={"min-w-0"}>
+          <Label>Sign-in Domains</Label>
+          <HelpText className={"!mb-0"}>
+            Users from these domains can join your account.{" "}
+            <InlineLink href={SIGN_IN_DOMAINS_DOCS_LINK} target={"_blank"}>
+              Learn more
+              <ExternalLinkIcon size={12} />
+            </InlineLink>
+          </HelpText>
+        </div>
+        <Button
+          variant={"primary"}
+          size={"xs"}
+          className={"shrink-0"}
+          disabled={!permission?.settings?.update || isUnavailable}
+          onClick={() => setAddModal(true)}
+          data-testid={"add-domain"}
+        >
+          <PlusCircle size={16} />
+          Add
+        </Button>
+      </div>
+
+      <SignInDomainsTable domains={domains} isLoading={showSkeleton} />
+
+      <AddSignInDomainModal open={addModal} onOpenChange={setAddModal} />
+    </div>
+  );
+};
@@ -0,0 +1,121 @@
+import Button from "@components/Button";
+import FullTooltip from "@components/FullTooltip";
+import { notify } from "@components/Notification";
+import { cn } from "@utils/helpers";
+import { TrashIcon } from "lucide-react";
+import * as React from "react";
+import { useState } from "react";
+import { useSignInDomains } from "@/cloud/sign-in-domains/useSignInDomains";
+import { useDialog } from "@/contexts/DialogProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { DomainValidationStatus, SignInDomain } from "@/interfaces/Account";
+import { DomainVerificationModal } from "@/modules/integrations/sso/DomainVerificationModal";
+
+type Props = {
+  domain: SignInDomain;
+};
+
+export default function DomainActionCell({ domain }: Readonly<Props>) {
+  const { permission } = usePermissions();
+  const { verifyDomain, deleteDomain, mutate } = useSignInDomains();
+  const { confirm } = useDialog();
+  const [modal, setModal] = useState(false);
+
+  const isVerified =
+    domain.validation_status === DomainValidationStatus.VERIFIED;
+  const connections = domain.connections ?? [];
+
+  const removeBlockedReason: React.ReactNode = domain.is_primary ? (
+    <>
+      This is the primary domain of your account
+      <br />
+      and cannot be removed.
+    </>
+  ) : connections.length > 0 ? (
+    <>
+      This domain is used by an SSO integration.
+      <br />
+      Remove it there before deleting it.
+    </>
+  ) : undefined;
+
+  const deleteDomainHandler = async () => {
+    const choice = await confirm({
+      title: `Remove ${domain.name}?`,
+      description:
+        "Users with an email address on this domain will no longer be matched to your account.",
+      confirmText: "Remove",
+      cancelText: "Cancel",
+      type: "danger",
+      maxWidthClass: "max-w-md",
+    });
+    if (!choice) return;
+    notify({
+      title: "Sign-in Domains",
+      description: `${domain.name} has been removed`,
+      promise: deleteDomain(domain.id).then((res) => {
+        mutate().catch(() => {});
+        return res;
+      }),
+      loadingMessage: "Removing domain...",
+    });
+  };
+
+  return (
+    <div
+      className={
+        "relative top-[2px] flex gap-2 items-center justify-end ml-auto min-h-[34px]"
+      }
+    >
+      <DomainVerificationModal
+        open={modal}
+        onOpenChange={setModal}
+        domain={domain.name}
+        token={domain.validation_token}
+        onVerify={() =>
+          verifyDomain(domain.id).then((res) => {
+            mutate().catch(() => {});
+            return res;
+          })
+        }
+      />
+
+      {!isVerified && (
+        <Button
+          variant={"secondary"}
+          size={"xs"}
+          className={"!px-3"}
+          disabled={!permission.settings.update}
+          onClick={() => setModal(true)}
+          data-testid={"verify-domain"}
+        >
+          Verify
+        </Button>
+      )}
+
+      <FullTooltip
+        content={
+          <div className={"text-xs max-w-xs"}>
+            {removeBlockedReason ?? "Remove domain"}
+          </div>
+        }
+        interactive={false}
+      >
+        <Button
+          variant={"danger-outline"}
+          size={"xs"}
+          className={cn(
+            "!p-0 !h-[34px] !w-[34px]",
+            removeBlockedReason && "pointer-events-none",
+          )}
+          disabled={!!removeBlockedReason || !permission.settings.update}
+          onClick={deleteDomainHandler}
+          aria-label={"Remove domain"}
+          data-testid={"remove-domain"}
+        >
+          <TrashIcon size={14} />
+        </Button>
+      </FullTooltip>
+    </div>
+  );
+}
@@ -0,0 +1,46 @@
+import FullTooltip from "@components/FullTooltip";
+import { cn } from "@utils/helpers";
+import * as React from "react";
+import { DomainValidationStatus, SignInDomain } from "@/interfaces/Account";
+
+type Props = {
+  domain: SignInDomain;
+};
+
+const FAILED_HINT =
+  "This domain could not be verified. Check that the TXT record is published, then try again. If it keeps failing, contact support@netbird.io";
+
+export default function DomainStatusCell({ domain }: Readonly<Props>) {
+  const status = domain.validation_status;
+  const isVerified = status === DomainValidationStatus.VERIFIED;
+  const isPending = status === DomainValidationStatus.PENDING;
+  const isFailed = status === DomainValidationStatus.FAILED;
+
+  return (
+    <FullTooltip
+      content={<div className={"text-xs max-w-xs"}>{FAILED_HINT}</div>}
+      disabled={!isFailed}
+      interactive={false}
+    >
+      <div
+        className={"flex items-center gap-2 text-sm text-nb-gray-300 mr-auto"}
+      >
+        <span
+          className={cn(
+            "h-2 w-2 rounded-full shrink-0",
+            isVerified && "bg-green-400",
+            isPending && "bg-yellow-400",
+            !isVerified && !isPending && "bg-red-500",
+          )}
+        />
+        {statusLabel(status)}
+      </div>
+    </FullTooltip>
+  );
+}
+
+function statusLabel(status: DomainValidationStatus) {
+  if (status === DomainValidationStatus.VERIFIED) return "Verified";
+  if (status === DomainValidationStatus.PENDING) return "Pending";
+  return "Unverified";
+}
@@ -0,0 +1,110 @@
+import Card from "@components/Card";
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import NoResults from "@components/ui/NoResults";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import * as React from "react";
+import { useState } from "react";
+import Skeleton from "react-loading-skeleton";
+import DomainActionCell from "@/cloud/sign-in-domains/table/DomainActionCell";
+import DomainStatusCell from "@/cloud/sign-in-domains/table/DomainStatusCell";
+import { DomainValidationStatus, SignInDomain } from "@/interfaces/Account";
+
+type Props = {
+  domains?: SignInDomain[];
+  isLoading?: boolean;
+};
+
+const PLACEHOLDER_ID = "__loading__";
+
+const placeholderRow: SignInDomain = {
+  id: PLACEHOLDER_ID,
+  name: "",
+  is_primary: false,
+  validation_token: "",
+  validation_status: DomainValidationStatus.PENDING,
+  validation_last_updated: null,
+};
+
+const isPlaceholder = (domain: SignInDomain) => domain.id === PLACEHOLDER_ID;
+
+const SignInDomainsColumns: ColumnDef<SignInDomain>[] = [
+  {
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Domain</DataTableHeader>;
+    },
+    accessorKey: "name",
+    sortingFn: "text",
+    cell: ({ row }) =>
+      isPlaceholder(row.original) ? (
+        <Skeleton height={10} width={"60%"} />
+      ) : (
+        <div className={"text-sm text-nb-gray-100"}>{row.original.name}</div>
+      ),
+  },
+  {
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Status</DataTableHeader>;
+    },
+    accessorKey: "validation_status",
+    sortingFn: "text",
+    cell: ({ row }) =>
+      isPlaceholder(row.original) ? (
+        <Skeleton height={10} width={"50%"} />
+      ) : (
+        <DomainStatusCell domain={row.original} />
+      ),
+  },
+  {
+    accessorKey: "id",
+    header: () => null,
+    enableSorting: false,
+    cell: ({ row }) =>
+      isPlaceholder(row.original) ? (
+        <div className={"flex items-center justify-end ml-auto min-h-[34px]"} />
+      ) : (
+        <DomainActionCell domain={row.original} />
+      ),
+  },
+];
+
+export default function SignInDomainsTable({
+  domains,
+  isLoading,
+}: Readonly<Props>) {
+  const [sorting, setSorting] = useState<SortingState>([
+    {
+      id: "name",
+      desc: false,
+    },
+  ]);
+
+  return (
+    <DataTable
+      wrapperComponent={Card}
+      wrapperProps={{ className: "w-full pb-1" }}
+      useRowId={true}
+      sorting={sorting}
+      setSorting={setSorting}
+      minimal={true}
+      showSearchAndFilters={false}
+      inset={false}
+      tableClassName={"mt-0"}
+      text={"Domains"}
+      columns={SignInDomainsColumns}
+      keepStateInLocalStorage={false}
+      data={isLoading ? [placeholderRow] : domains}
+      getStartedCard={
+        <NoResults
+          className={"py-4"}
+          hideIcon
+          title={"No sign-in domains yet"}
+          description={
+            "Add a domain, then verify ownership with a DNS record to start matching users to this account."
+          }
+        />
+      }
+      paginationPaddingClassName={"px-0 pt-8"}
+    />
+  );
+}
@@ -0,0 +1,65 @@
+import useFetchApi, { useApiCall } from "@utils/api";
+import loadConfig from "@utils/config";
+import { useCallback } from "react";
+import { DomainValidationStatus, SignInDomain } from "@/interfaces/Account";
+
+const config = loadConfig();
+
+export const useSignInDomains = (pollWhilePendingMs?: number) => {
+  const refreshInterval = useCallback(
+    (latest?: SignInDomain[]) =>
+      pollWhilePendingMs &&
+      latest?.some(
+        (domain) => domain.validation_status === DomainValidationStatus.PENDING,
+      )
+        ? pollWhilePendingMs
+        : 0,
+    [pollWhilePendingMs],
+  );
+
+  const {
+    data: domains,
+    isLoading,
+    error,
+    mutate,
+  } = useFetchApi<SignInDomain[]>(
+    "/service/sign-in-domains",
+    true,
+    true,
+    !!config.authServiceUrl,
+    {
+      origin: config.authServiceUrl,
+      refreshInterval,
+      shouldRetryOnError: false,
+    },
+  );
+
+  const request = useApiCall<SignInDomain>("/service/sign-in-domains", true, {
+    origin: config.authServiceUrl,
+  });
+
+  const addDomain = async (domain: string) => {
+    return request.post({ domain });
+  };
+
+  const verifyDomain = async (domainId: string) => {
+    return request.post({}, `/${domainId}/verify`);
+  };
+
+  const deleteDomain = async (domainId: string) => {
+    return request.del({}, `/${domainId}`);
+  };
+
+  const isUnavailable = !!error || (!isLoading && !domains);
+
+  return {
+    domains,
+    isLoading,
+    isUnavailable,
+    error,
+    mutate,
+    addDomain,
+    verifyDomain,
+    deleteDomain,
+  } as const;
+};
@@ -1,141 +0,0 @@
-import { faker } from "@faker-js/faker/locale/de";
-import { cn } from "@utils/helpers";
-import {
-  CategoryScale,
-  Chart as ChartJS,
-  ChartData,
-  ChartOptions,
-  Filler,
-  Legend,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title,
-  Tooltip,
-} from "chart.js";
-import * as React from "react";
-import { useState } from "react";
-import { Line } from "react-chartjs-2";
-
-type Props = {};
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Filler,
-  Legend,
-);
-
-export const options: ChartOptions<"line"> = {
-  responsive: true,
-  elements: {
-    line: {
-      tension: 0.4,
-    },
-  },
-  plugins: {
-    legend: {
-      display: false,
-    },
-    tooltip: {
-      enabled: false,
-    },
-  },
-  scales: {
-    y: {
-      grid: {
-        color: "rgba(255,255,255,0.05)",
-      },
-      ticks: {
-        display: false,
-        color: "rgba(255,255,255,1)",
-        count: 3,
-      },
-    },
-    x: {
-      grid: {
-        color: "rgba(255,255,255,0.05)",
-      },
-      ticks: {
-        display: false,
-        color: "rgba(255,255,255,0.5)",
-      },
-    },
-  },
-};
-
-const labels = [
-  "0:00",
-  "0:05",
-  "0:10",
-  "0:15",
-  "0:20",
-  "0:25",
-  "0:30",
-  "0:35",
-  "0:40",
-  "0:45",
-  "0:50",
-  "0:55",
-  "1:00",
-];
-
-export const TrafficEventChart = ({}: Props) => {
-  const chartRef = React.useRef<ChartJS<"line">>(null);
-  const [gradientColor, setGradientColor] = useState<CanvasGradient>();
-
-  React.useEffect(() => {
-    const chart = chartRef.current;
-
-    if (!chart) {
-      return;
-    }
-
-    const ctx = chart.ctx;
-    const gradient = ctx.createLinearGradient(0, 0, 0, 150);
-    gradient.addColorStop(0, "rgba(246,131,48,0.5)"); // Orange at the top
-    gradient.addColorStop(1, "rgba(246,131,48,0)"); // Transparent at the bottom
-
-    setGradientColor(gradient);
-  }, []);
-
-  const data: ChartData<"line"> = {
-    labels,
-    datasets: [
-      {
-        fill: true,
-        data: labels.map(() =>
-          faker.number.int({
-            min: 40,
-            max: 100,
-          }),
-        ),
-        borderColor: "rgba(246,131,48,0.8)",
-        pointBackgroundColor: "rgba(246,131,48,1)",
-        backgroundColor: gradientColor, // This will be replaced by the gradient
-      },
-    ],
-  };
-
-  return (
-    <div className={""}>
-      <div
-        className={cn(
-          "border cursor-pointer border-nb-gray-900/80 bg-nb-gray-900/30 hover:bg-nb-gray-900/50 py-3 pl-3 pr-5 rounded-lg transition-all min-w-[310px] max-w-[400px]",
-        )}
-      >
-        <Line
-          options={options}
-          data={data}
-          ref={chartRef}
-          height={700}
-          width={1600}
-        />
-      </div>
-    </div>
-  );
-};
@@ -1,155 +0,0 @@
-import { Modal, SidebarModalContent } from "@components/modal/Modal";
-import { cn } from "@utils/helpers";
-import { ArrowDownIcon, ArrowUpIcon, CheckIcon, HashIcon } from "lucide-react";
-import * as React from "react";
-import { TrafficEventChart } from "@/cloud/traffic-events/misc/TrafficEventChart";
-
-type Props = {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-};
-
-export const TrafficEventDetails = ({ open, setOpen }: Props) => {
-  return (
-    <Modal open={open} onOpenChange={setOpen}>
-      <SidebarModalContent
-        maxWidthClass={"max-w-2xl"}
-        showClose={true}
-        className={"px-0 py-6 !bg-nb-gray-940"}
-      >
-        <div>
-          <div className={"px-8 pb-6"}>
-            <h1 className={"text-lg flex items-center gap-2"}>
-              <HashIcon size={20} />
-              NBSE2911929
-            </h1>
-          </div>
-          <Separator />
-          <div className={"px-10 pt-6 mt-4"}>
-            <ul>
-              <ListItem>
-                Connection successfully established between Peer 1 and Peer 2
-              </ListItem>
-              <ListItem>Peer 2 accepted the connection request</ListItem>
-
-              <ListItem>Posture Check XYZ passed</ListItem>
-              <ListItem>Access Control Policy XYZ passed</ListItem>
-              <ListItem hideLastLine={true}>
-                Peer 1 requested to connect to Peer 2
-              </ListItem>
-            </ul>
-          </div>
-          <Separator />
-          <div className={"px-8 pb-6 pt-2"}>
-            <ExpandedCards />
-          </div>
-          <Separator />
-          <div className={"px-8 py-6 "}>
-            <div className={"grid grid-cols-3 gap-5"}></div>
-          </div>
-          <Separator />
-          <div className={"px-8 py-6"}>
-            <TrafficEventChart />
-          </div>
-        </div>
-      </SidebarModalContent>
-    </Modal>
-  );
-};
-
-const ListItem = ({
-  children,
-  hideLastLine = false,
-}: {
-  children: React.ReactNode;
-  hideLastLine?: boolean;
-}) => {
-  return (
-    <li
-      className={cn(
-        "flex flex-col gap-2 items-start relative justify-center pl-6 pb-8 border-l-2 border-green-600",
-        hideLastLine && "border-l-0",
-      )}
-    >
-      <div
-        className={cn(
-          "w-[17px] h-[17px] bg-nb-gray-925 rounded-full flex items-center justify-center shrink-0",
-          "bg-green-600 text-green-100",
-          "absolute left-0 -ml-[9.5px] -top-[10px]",
-        )}
-      >
-        <CheckIcon size={11} />
-      </div>
-      <div className={"flex flex-col gap-1 relative -top-2"}>
-        <span className={"text-xs text-nb-gray-300"}>
-          Th, 27 February 2025, 16:08
-        </span>
-        <span className={"text-sm font-normal"}>{children}</span>
-      </div>
-    </li>
-  );
-};
-
-const Separator = () => {
-  return <div className={"h-[1px] bg-zinc-700/60 w-full"}></div>;
-};
-
-const ExpandedCards = () => {
-  return (
-    <div className={"grid grid-cols-3 gap-4 mt-4"}>
-      <div
-        className={
-          "flex flex-col bg-nb-gray-920 px-5 py-3.5 rounded-md border border-nb-gray-910"
-        }
-      >
-        <span className={"text-xs tracking-wide text-nb-gray-300 mb-0.5"}>
-          Duration
-        </span>
-        <span
-          className={
-            "text-sm font-medium text-nb-gray-200 flex items-center gap-2"
-          }
-        >
-          {"< "}
-          10 minutes
-        </span>
-      </div>
-      <div
-        className={
-          "flex flex-col bg-nb-gray-920 px-5 py-3.5 rounded-md border border-nb-gray-910"
-        }
-      >
-        <span className={"text-xs tracking-wide text-nb-gray-300 mb-0.5"}>
-          Inbound Traffic
-        </span>
-        <span
-          className={
-            "text-sm font-medium text-nb-gray-200 flex items-center gap-2"
-          }
-        >
-          <ArrowDownIcon size={16} className={"text-sky-400"} />
-          15.2 GB
-        </span>
-      </div>
-      <div
-        className={
-          "flex flex-col bg-nb-gray-920 px-5 py-3.5 rounded-md border border-nb-gray-910"
-        }
-      >
-        <span
-          className={"text-xs tracking-wide text-nb-gray-300 mb-0.5 flex gap-2"}
-        >
-          Outbound Traffic
-        </span>
-        <span
-          className={
-            "text-sm font-medium text-nb-gray-200 flex items-center gap-2"
-          }
-        >
-          <ArrowUpIcon size={16} className={"text-netbird-500"} />
-          10.8 GB
-        </span>
-      </div>
-    </div>
-  );
-};
Author	SHA1	Message	Date
Eduard GertandClaude Opus 5	6845094723	Size the tab list against the header and the announcement banner The list computed calc(100vh - 75px) on its own. The header is 65px, and with an announcement banner open DashboardLayout shrinks the row holding PageContainer to calc(100vh - (headerHeight + bannerHeight)) -- so the list asked for more height than its scroll container had and drifted with the scroll instead of holding at the top. It now takes the same figure Navigation and DashboardLayout use. That arrives through a CSS variable rather than an inline height, which keeps the breakpoint in CSS: the value is always a length, so the height cannot degrade to auto and bring back the stretch that stopped it sticking in the first place. bannerHeight is defaulted because useAnnouncement is a bare useContext with an empty default, and NaNpx would invalidate the calc. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-11 11:44:20 +02:00
Eduard GertandClaude Opus 5	b9f278360e	Take the tab list's height from CSS, not a JS media query The sidebar's height came from useIsLg, and react-responsive reports false during SSR and the first client render. Until the query resolved the list fell back to height auto, and as a flex item under the default align-items: stretch that means it grows to the full content height -- so a sticky element as tall as its own containing block, with nowhere to stick. The sidebar scrolled away with the content on every load until the query landed, which made it look intermittent. Reproduced outside the app: with a fixed height the list holds at the top of the scroll container through a scroll of 800px; with height auto it measures the full 1500px content height and its offset tracks the scroll exactly. h-auto lg:h-[calc(100vh_-_75px)] is correct from the first paint and drops the hook from the component. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-11 11:30:39 +02:00
Eduard GertandClaude Opus 5	6d3928d7c0	Move the tab strip's padding inside its scroll area, and restore the fade The padding sat on Tabs.List, outside the ScrollArea, so the Root's box ended flush with the items and the scrollbar -- absolute, bottom-0, 10px tall -- had nowhere to sit but on top of them. It now lives on the inner flex row, with pb-3 clearing the track, which also means the leading gap travels with the content instead of framing it. The fade is back alongside the scrollbar rather than in place of it, 64px wide and stopping short of the track. Its observers hang off the Radix viewport, which is the element that actually scrolls; on Tabs.List they would have measured nothing once ScrollArea went in. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-11 10:25:51 +02:00
Eduard GertandClaude Opus 5	35fe6b6cbb	Give the tab strip a real scrollbar instead of a hidden one Drops no-scrollbar and the hand-rolled edge fades in favour of ScrollArea, which is what the rest of the app uses for this -- Tabs.tsx already wraps its horizontal list the same way. That removes the ResizeObserver, the MutationObserver and the scroll listener that existed only to stand in for a scrollbar nobody could see. The horizontal strip also gets a 1px gap between items. Root and Viewport are display:contents on lg, so on desktop they leave the layout entirely and the tab column sits directly in the list, keeping the sticky sidebar and its calc height untouched. Doing it in CSS rather than branching on useIsLg matters: react-responsive reports false during SSR, so a structural branch would render the mobile strip on desktop first and then swap. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-11 10:13:14 +02:00
Eduard GertandClaude Opus 5	dcfa2398e3	Fade the edges of the tab strip when it scrolls out of view Below lg the tab list is a horizontal strip carrying no-scrollbar, so there was nothing to say the tabs continue past the edge. A fade now sits at whichever end still has tabs behind it, and neither is shown when everything fits. The state comes from the element's own scroll metrics. A ResizeObserver covers the initial measurement, which also keeps setState out of the effect body and so out of the way of react-hooks/set-state-in-effect. A MutationObserver covers a permission-gated trigger appearing later, which changes scrollWidth without resizing the element. The setter returns the previous object when nothing moved, so a measurement caused by our own render cannot loop. The fades need a positioned parent, which the list cannot be while it is scrolling its own content, so the wrapper is lg:contents -- on desktop it leaves the layout entirely and the list stays the flex item it was. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-11 10:08:46 +02:00
Eduard GertandClaude Opus 5	1cc2353957	Point Learn more at manage/team/sign-in-domains Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-11 10:05:21 +02:00
Eduard GertandClaude Opus 5	7189a9913d	Point Learn more at the page's new location The docs page moved under Single Sign-On. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-11 09:57:40 +02:00
Eduard Gert	6a37af081b	Fix padding	2026-09-11 09:52:43 +02:00
Eduard GertandClaude Opus 5	4d21ce4680	Keep the vertical tab list in place while the content scrolls PageContainer is the scroll container, so the tab list scrolled away with the tab content: on a long Settings tab the list was gone by the time you reached the bottom. It is now pinned to the top of that container on lg and up. Pinning alone would trade one problem for another, because the list carries overflow-y-hidden and a fixed height: a list taller than the viewport was previously reachable by scrolling the page, and pinned it would just be clipped. It gets lg:overflow-y-auto so it scrolls on its own when it has to. Mobile is untouched, where the list is a horizontal row rather than a sidebar. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-10 17:30:43 +02:00
Eduard GertandClaude Opus 5	9d8e4dc50d	Move Sign-in Domains into the Authentication tab It was a settings tab of its own, which gave a small table its own page and its own breadcrumbs. It is now a section of the Authentication tab, below MFA, behind a separator like MFA's own: label, description, and an Add button on the right. The description reads "Users from these domains can join your account." and Learn more now points at the page that documents it rather than at the docs root. SignInDomainsTab.tsx is gone with the tab, and the visibility rule it held -- cloud, a private account domain, settings read -- moves to useCanViewSignInDomains so the Authentication tab can gate the separator on the same condition. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-10 17:24:42 +02:00
Eduard GertandClaude Opus 5	26edbb8add	Poll sign-in domains only while one is pending The list polled every 15s for as long as the tab was open, even when every domain was verified and nothing could change. It now polls only while a domain is still pending its DNS challenge, which is the only state that moves on its own. RequestOptions.refreshInterval takes SWR's function form so the decision can read the current data. The function is memoised because SWR's polling effect keys on it, and a fresh closure each render would tear the timer down and re-arm it continuously. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-10 13:11:50 +02:00
Eduard GertandClaude Opus 5	6791fb44a4	Say a domain is used by an SSO integration, not which connection The tooltip named the connection, but that name is a generated slug like con_7MhvKP27KnKDJbXS, so it told the customer nothing about where to go and put an internal identifier in front of them. It now points at the integration, matching the wording the service returns for the same refusal. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-10 12:43:45 +02:00
Eduard GertandClaude Opus 5	00a1fd8113	Refine the Sign-in Domains tab and point it at /service/sign-in-domains Follows the routes the auth service now exposes, and reworks the tab to match the other settings tabs. - Adding a domain happens in a modal, built like the rename-group modal, instead of an inline field above the table. The Add button sits in the tab header where the other tabs keep Save Changes. - The tab decides whether to show itself from the login token's domain category rather than from GET /accounts, so its trigger paints with the rest of the tab list instead of appearing a moment later and pushing the list down. useDomainCategory now decodes the token synchronously, since useJwt decodes in an effect and so reports no claims on first render. - The table's loading state is one placeholder row rendered through the real table, so the header, row height and padding are identical to a loaded table and nothing shifts when the first domain arrives. - An unreachable service dims the panel and disables its controls, the same treatment the MFA panel uses, rather than saying anything about the service behind it. The skeleton covers the whole request, so the empty state is only shown when the account really has no domains. - The delete button is icon-only and always present: the primary domain gets it disabled with a tooltip saying why, rather than no control at all. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-10 11:07:08 +02:00
Eduard Gert	08bb65dfe8	Merge remote-tracking branch 'origin/main' into feature/sign-in-domains	2026-09-10 09:27:12 +02:00
Nicolas Frati	a9a91905fa	Add rootless dashboard container image (#791 )	2026-09-09 23:00:19 +02:00
Eduard Gert	3459a4db28	chore: remove dead code and unused dependencies (#787 ) Remove the unreachable FirewallGPT module and the abandoned traffic-event detail prototypes, along with the dependencies they were the sole consumers of. FirewallGPT was disabled in 9d8d9ee4 by removing its trigger button, leaving the modal mounted but impossible to open. TrafficEventDetails was never imported anywhere, and it was the only consumer of TrafficEventChart. Dependency changes: - Drop @faker-js/faker, whose only usage was mock chart data in the removed TrafficEventChart. This also resolves GHSA-qxc2-j82w-r537 without needing the 9 -> 10 major upgrade. - Drop react-confetti-explosion, only used by the removed FirewallGPTSuccessModal. - Bump @types/node to 20.19.43 so it satisfies the peer range of the vite version pulled in by vitest, silencing an ERESOLVE warning on install. Stays on the 20.x line to match the Node 20 used in CI. - Add an allowScripts deny policy for the four packages with install scripts. Both @axa-fr postinstalls are bare echo statements, fsevents ships a prebuilt binary, and the unrs-resolver postinstall only verifies a binding that optionalDependencies already installs.	2026-09-09 11:38:38 +02:00
Eduard Gert	f24775fe25	Add Sign-in Domains settings tab Adds a Sign-in Domains tab to Settings, backed by the auth service's account domain endpoints (GET/POST /service/account/domains, POST /domains/:id/verify, DELETE /domains/:id). The tab lists the account's domains with their verification status, and lets an admin add one, verify ownership through the existing DNS TXT record modal, and remove one. Adding a domain opens the verification modal straight away unless the service returns it already verified, which it does when the domain matches the caller's own email address. The list polls while it is on screen, since verification finishes server-side seconds to minutes after it starts and nothing pushes the new status. Remove mirrors the two cases the service refuses: the account's own primary domain has no Remove button at all, and a domain still matched by an SSO connection has it disabled with the connections named. When the list cannot be loaded the section is disabled rather than showing an empty state, so an admin never adds against a list they cannot see. The tab is cloud-only and limited to accounts on a private email domain, matching where the auth service adopts the account domain. Supporting changes: - DomainVerificationModal took a connectionId and resolved the verify call itself, which only worked for connection domains. It now takes an onVerify callback; the four existing call sites pass the same connection-scoped verify as before. - DomainValidationStatus, SignInDomain and DomainConnection live in Account.ts, since sign-in domains belong to the account rather than to an identity provider. - NoResults gained an optional hideIcon prop. - Settings tab headings that sit in a flex row next to an action button rendered 4px lower than the ones that do not: flex items do not margin-collapse, so the h1's my-1 no longer folds into the breadcrumb's mb-6. Offset it so every tab heading lines up. - Shorter one-line descriptions for Authentication, Notifications and Metrics.	2026-09-02 17:19:09 +02:00