Merge pull request #3117 from Fredkiss3/refactor/loading-animation-on-request-logs

feat: Show a loading animation on http request logs table

.github/FUNDING.yml

@@ -1,3 +0,0 @@
-# These are supported funding model platforms
-
-github: [fosrl]

.github/workflows/cicd.yml

@@ -415,7 +415,9 @@ jobs:
 
             - name: Install cosign
               # cosign is used to sign container images using keyless (OIDC) signing
-              uses: sigstore/cosign-installer@cad07c2e89fa2edd6e2d7bab4c1aa38e53f76003 # v4.1.1
+              uses: sigstore/cosign-installer@6f9f17788090df1f26f669e9d70d6ae9567deba6 # v4.1.2
+              with:
+                cosign-release: v3.0.6
 
             - name: Sign (GHCR, keyless)
               # Sign each GHCR image by digest using keyless (OIDC) signing via Sigstore/Rekor.

.github/workflows/restart-runners.yml

@@ -1,39 +0,0 @@
-name: Restart Runners
-
-on:
-  schedule:
-    - cron: '0 0 */7 * *'
-
-permissions:
-    id-token: write
-    contents: read
-
-jobs:
-  ec2-maintenance-prod:
-    runs-on: ubuntu-latest
-    permissions: write-all
-    steps:
-      - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v6
-        with:
-          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/${{ secrets.AWS_ROLE_NAME }}
-          role-duration-seconds: 3600
-          aws-region: ${{ secrets.AWS_REGION }}
-
-      - name: Verify AWS identity
-        run: aws sts get-caller-identity
-
-      - name: Start EC2 instance
-        run: |
-          aws ec2 start-instances --instance-ids ${{ secrets.EC2_INSTANCE_ID_ARM_RUNNER }}
-          aws ec2 start-instances --instance-ids ${{ secrets.EC2_INSTANCE_ID_AMD_RUNNER }}
-          echo "EC2 instances started"
-
-      - name: Wait
-        run: sleep 600
-
-      - name: Stop EC2 instance
-        run: |
-          aws ec2 stop-instances --instance-ids ${{ secrets.EC2_INSTANCE_ID_ARM_RUNNER }}
-          aws ec2 stop-instances --instance-ids ${{ secrets.EC2_INSTANCE_ID_AMD_RUNNER }}
-          echo "EC2 instances stopped"

.github/workflows/saas.yml

@@ -1,160 +0,0 @@
-name: SAAS Pipeline
-
-# CI/CD workflow for building, publishing, mirroring, signing container images and building release binaries.
-# Actions are pinned to specific SHAs to reduce supply-chain risk. This workflow triggers on tag push events.
-
-permissions:
-  contents: read
-  packages: write      # for GHCR push
-  id-token: write      # for Cosign Keyless (OIDC) Signing
-
-on:
-    push:
-        tags:
-            - "[0-9]+.[0-9]+.[0-9]+-s.[0-9]+"
-
-concurrency:
-  group: ${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-    pre-run:
-        runs-on: ubuntu-latest
-        permissions: write-all
-        steps:
-            - name: Configure AWS credentials
-              uses: aws-actions/configure-aws-credentials@v6
-              with:
-                  role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/${{ secrets.AWS_ROLE_NAME }}
-                  role-duration-seconds: 3600
-                  aws-region: ${{ secrets.AWS_REGION }}
-
-            - name: Verify AWS identity
-              run: aws sts get-caller-identity
-
-            - name: Start EC2 instances
-              run: |
-                  aws ec2 start-instances --instance-ids ${{ secrets.EC2_INSTANCE_ID_ARM_RUNNER }}
-                  echo "EC2 instances started"
-
-
-    release-arm:
-        name: Build and Release (ARM64)
-        runs-on: [self-hosted, linux, arm64, us-east-1]
-        needs: [pre-run]
-        if: >-
-            ${{
-                needs.pre-run.result == 'success'
-            }}
-        # Job-level timeout to avoid runaway or stuck runs
-        timeout-minutes: 120
-        env:
-          # Target images
-          AWS_IMAGE: ${{ secrets.aws_account_id }}.dkr.ecr.us-east-1.amazonaws.com/${{ github.event.repository.name }}
-
-        steps:
-            - name: Checkout code
-              uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-            - name: Download MaxMind GeoLite2 databases
-              env:
-                MAXMIND_LICENSE_KEY: ${{ secrets.MAXMIND_LICENSE_KEY }}
-              run: |
-                echo "Downloading MaxMind GeoLite2 databases..."
-
-                # Download GeoLite2-Country
-                curl -L "https://download.maxmind.com/app/geoip_download?edition_id=GeoLite2-Country&license_key=${MAXMIND_LICENSE_KEY}&suffix=tar.gz" \
-                  -o GeoLite2-Country.tar.gz
-
-                # Download GeoLite2-ASN
-                curl -L "https://download.maxmind.com/app/geoip_download?edition_id=GeoLite2-ASN&license_key=${MAXMIND_LICENSE_KEY}&suffix=tar.gz" \
-                  -o GeoLite2-ASN.tar.gz
-
-                # Extract the .mmdb files
-                tar -xzf GeoLite2-Country.tar.gz --strip-components=1 --wildcards '*.mmdb'
-                tar -xzf GeoLite2-ASN.tar.gz --strip-components=1 --wildcards '*.mmdb'
-
-                # Verify files exist
-                if [ ! -f "GeoLite2-Country.mmdb" ]; then
-                  echo "ERROR: Failed to download GeoLite2-Country.mmdb"
-                  exit 1
-                fi
-
-                if [ ! -f "GeoLite2-ASN.mmdb" ]; then
-                  echo "ERROR: Failed to download GeoLite2-ASN.mmdb"
-                  exit 1
-                fi
-
-                # Clean up tar files
-                rm -f GeoLite2-Country.tar.gz GeoLite2-ASN.tar.gz
-
-                echo "MaxMind databases downloaded successfully"
-                ls -lh GeoLite2-*.mmdb
-
-            - name: Monitor storage space
-              run: |
-                  THRESHOLD=75
-                  USED_SPACE=$(df / | grep / | awk '{ print $5 }' | sed 's/%//g')
-                  echo "Used space: $USED_SPACE%"
-                  if [ "$USED_SPACE" -ge "$THRESHOLD" ]; then
-                      echo "Used space is below the threshold of 75% free. Running Docker system prune."
-                      echo y | docker system prune -a
-                  else
-                      echo "Storage space is above the threshold. No action needed."
-                  fi
-
-            - name: Configure AWS credentials
-              uses: aws-actions/configure-aws-credentials@v6
-              with:
-                  role-to-assume: arn:aws:iam::${{ secrets.aws_account_id }}:role/${{ secrets.AWS_ROLE_NAME }}
-                  role-duration-seconds: 3600
-                  aws-region: ${{ secrets.AWS_REGION }}
-
-            - name: Login to Amazon ECR
-              id: login-ecr
-              uses: aws-actions/amazon-ecr-login@v2
-
-            - name: Extract tag name
-              id: get-tag
-              run: echo "TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
-              shell: bash
-
-            - name: Update version in package.json
-              run: |
-                  TAG=${{ env.TAG }}
-                  sed -i "s/export const APP_VERSION = \".*\";/export const APP_VERSION = \"$TAG\";/" server/lib/consts.ts
-                  cat server/lib/consts.ts
-              shell: bash
-
-            - name: Build and push Docker images (Docker Hub - ARM64)
-              run: |
-                  TAG=${{ env.TAG }}
-                  make build-saas tag=$TAG
-                  echo "Built & pushed ARM64 images to: ${{ env.AWS_IMAGE }}:${TAG}"
-              shell: bash
-
-    post-run:
-        needs: [pre-run, release-arm]
-        if: >-
-            ${{
-                always() &&
-                needs.pre-run.result == 'success' &&
-                (needs.release-arm.result == 'success' || needs.release-arm.result == 'skipped' || needs.release-arm.result == 'failure')
-            }}
-        runs-on: ubuntu-latest
-        permissions: write-all
-        steps:
-            - name: Configure AWS credentials
-              uses: aws-actions/configure-aws-credentials@v6
-              with:
-                  role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/${{ secrets.AWS_ROLE_NAME }}
-                  role-duration-seconds: 3600
-                  aws-region: ${{ secrets.AWS_REGION }}
-
-            - name: Verify AWS identity
-              run: aws sts get-caller-identity
-
-            - name: Stop EC2 instances
-              run: |
-                  aws ec2 stop-instances --instance-ids ${{ secrets.EC2_INSTANCE_ID_ARM_RUNNER }}
-                  echo "EC2 instances stopped"

install/main.go

@@ -4,6 +4,7 @@ import (
 	"crypto/rand"
 	"embed"
 	"encoding/base64"
+	"flag"
 	"fmt"
 	"io"
 	"io/fs"
@@ -68,6 +69,9 @@ const (
 
 func main() {
 
+	crowdsecFlag := flag.Bool("crowdsec", false, "Enable the CrowdSec installation prompt")
+	flag.Parse()
+
 	// print a banner about prerequisites - opening port 80, 443, 51820, and 21820 on the VPS and firewall and pointing your domain to the VPS IP with a records. Docs are at http://localhost:3000/Getting%20Started/dns-networking
 
 	fmt.Println("Welcome to the Pangolin installer!")
@@ -206,7 +210,7 @@ func main() {
 		}
 	}
 
-	if !checkIsCrowdsecInstalledInCompose() {
+	if *crowdsecFlag && !checkIsCrowdsecInstalledInCompose() {
 		fmt.Println("\n=== CrowdSec Install ===")
 		// check if crowdsec is installed
 		if readBool("Would you like to install CrowdSec?", false) {

messages/de-DE.json

@@ -22,11 +22,11 @@
     "componentsMember": "Du bist Mitglied von {count, plural, =0 {keiner Organisation} one {einer Organisation} other {# Organisationen}}.",
     "componentsInvalidKey": "Ungültige oder abgelaufene Lizenzschlüssel erkannt. Beachte die Lizenzbedingungen, um alle Funktionen weiterhin zu nutzen.",
     "dismiss": "Verwerfen",
-    "subscriptionViolationMessage": "Sie überschreiten Ihre Grenzen für Ihr aktuelles Paket. Korrigieren Sie das Problem, indem Sie Webseiten, Benutzer oder andere Ressourcen entfernen, um in Ihrem Paket zu bleiben.",
+    "subscriptionViolationMessage": "Sie überschreiten Ihre Grenzen für Ihr aktuelles Paket. Korrigieren Sie das Problem, indem Sie Standorte, Benutzer oder andere Ressourcen entfernen, um in Ihrem Paket zu bleiben.",
     "trialBannerMessage": "Ihre Testversion läuft in {countdown} ab. Upgraden, um den Zugriff zu behalten.",
     "trialBannerExpired": "Ihre Testversion ist abgelaufen. Jetzt upgraden, um den Zugriff wiederherzustellen.",
     "billingTrialBannerTitle": "Kostenlose Testversion aktiv",
-    "billingTrialBannerDescription": "Sie nutzen derzeit eine kostenlose Testversion auf der Geschäftsstufe. Wenn die Testversion endet, wird Ihr Konto automatisch auf die Funktionen und Beschränkungen der Basisstufe zurückgesetzt. Upgraden Sie jederzeit, um weiterhin Zugriff auf die Funktionen Ihres aktuellen Plans zu behalten.",
+    "billingTrialBannerDescription": "Sie nutzen derzeit eine kostenlose Testversion auf der Business-Tarif. Wenn die Testversion endet, wird Ihr Konto automatisch auf die Funktionen und Beschränkungen der Basis-Tarif zurückgesetzt. Upgraden Sie jederzeit, um weiterhin Zugriff auf die Funktionen Ihres aktuellen Plans zu behalten.",
     "billingTrialBannerUpgrade": "Jetzt upgraden",
     "billingTrialBadge": "Kostenlose Testversion",
     "trialActive": "Kostenlose Testversion aktiv",
@@ -34,8 +34,8 @@
     "trialHasEnded": "Ihre Testversion ist beendet.",
     "trialDaysRemaining": "{count, plural, one {# Tag übrig} other {# Tage übrig}}",
     "trialDaysLeftShort": "Noch {days}d in der Testversion",
-    "trialGoToBilling": "Zur Rechnungsseite gehen",
-    "subscriptionViolationViewBilling": "Rechnung anzeigen",
+    "trialGoToBilling": "Zur Abrechnung gehen",
+    "subscriptionViolationViewBilling": "Abrechnung anzeigen",
     "componentsLicenseViolation": "Lizenzverstoß: Dieser Server benutzt {usedSites} Standorte, was das Lizenzlimit von {maxSites} Standorten überschreitet. Beachte die Lizenzbedingungen, um alle Funktionen weiterhin zu nutzen.",
     "componentsSupporterMessage": "Vielen Dank für die Unterstützung von Pangolin als {tier}!",
     "inviteErrorNotValid": "Es tut uns leid, aber es sieht so aus, als wäre die Einladung, auf die du zugreifen möchtest, entweder nicht angenommen worden oder nicht mehr gültig.",
@@ -67,7 +67,7 @@
     "edit": "Bearbeiten",
     "siteConfirmDelete": "Löschen des Standorts bestätigen",
     "siteDelete": "Standort löschen",
-    "siteMessageRemove": "Sobald der Standort entfernt ist, wird sie nicht mehr zugänglich sein. Alle mit dem Standort verbundenen Ziele werden ebenfalls entfernt.",
+    "siteMessageRemove": "Sobald der Standort entfernt ist, wird er nicht mehr zugänglich sein. Alle mit dem Standort verbundenen Ziele werden ebenfalls entfernt.",
     "siteQuestionRemove": "Sind Sie sicher, dass Sie den Standort aus der Organisation entfernen möchten?",
     "siteManageSites": "Standorte verwalten",
     "siteDescription": "Erstellen und Verwalten von Standorten, um die Verbindung zu privaten Netzwerken zu ermöglichen",
@@ -117,20 +117,20 @@
     "siteGeneralDescription": "Allgemeine Einstellungen für diesen Standort konfigurieren",
     "siteSettingDescription": "Standorteinstellungen konfigurieren",
     "siteResourcesTab": "Ressourcen",
-    "siteResourcesNoneOnSite": "Diese Seite hat noch keine öffentlichen oder privaten Ressourcen.",
+    "siteResourcesNoneOnSite": "Dieser Standort hat noch keine öffentlichen oder privaten Ressourcen",
     "siteResourcesSectionPublic": "Öffentliche Ressourcen",
     "siteResourcesSectionPrivate": "Private Ressourcen",
     "siteResourcesSectionPublicDescription": "Ressourcen, die extern über Domains oder Ports bereitgestellt werden.",
-    "siteResourcesSectionPrivateDescription": "Ressourcen, die in Ihrem privaten Netzwerk über die Seite verfügbar sind.",
+    "siteResourcesSectionPrivateDescription": "Ressourcen, die in Ihrem privaten Netzwerk über den Standort verfügbar sind.",
     "siteResourcesViewAllPublic": "Alle Ressourcen anzeigen",
     "siteResourcesViewAllPrivate": "Alle Ressourcen anzeigen",
-    "siteResourcesDialogDescription": "Überblick über öffentliche und private Ressourcen, die mit dieser Seite verbunden sind.",
+    "siteResourcesDialogDescription": "Überblick über öffentliche und private Ressourcen, die mit diesem Standort verbunden sind.",
     "siteResourcesShowMore": "Mehr anzeigen",
     "siteResourcesPermissionDenied": "Sie haben keine Berechtigung, diese Ressourcen aufzulisten.",
-    "siteResourcesEmptyPublic": "Noch sind keine öffentlichen Ressourcen für diese Seite vorhanden.",
-    "siteResourcesEmptyPrivate": "Noch sind keine privaten Ressourcen mit dieser Seite verbunden.",
+    "siteResourcesEmptyPublic": "Noch sind keine öffentlichen Ressourcen für diesen Standort vorhanden.",
+    "siteResourcesEmptyPrivate": "Noch sind keine privaten Ressourcen mit diesem Standort verbunden.",
     "siteResourcesHowToAccess": "Zugriffsmöglichkeiten",
-    "siteResourcesTargetsOnSite": "Ziele auf dieser Seite",
+    "siteResourcesTargetsOnSite": "Ziele an diesem Standort",
     "siteSetting": "{siteName} Einstellungen",
     "siteNewtTunnel": "Newt Standort (empfohlen)",
     "siteNewtTunnelDescription": "Einfachster Weg, einen Einstiegspunkt in jedes Netzwerk zu erstellen. Keine zusätzliche Einrichtung.",
@@ -148,10 +148,10 @@
     "siteCredentialsSaveDescription": "Du kannst das nur einmal sehen. Stelle sicher, dass du es an einen sicheren Ort kopierst.",
     "siteInfo": "Standortinformationen",
     "status": "Status",
-    "shareTitle": "Links zum Teilen verwalten",
+    "shareTitle": "Freigabelinks verwalten",
     "shareDescription": "Erstelle teilbare Links, um temporären oder permanenten Zugriff auf Proxy-Ressourcen zu gewähren",
-    "shareSearch": "Freigabe-Links suchen...",
-    "shareCreate": "Link erstellen",
+    "shareSearch": "Freigabelinks suchen...",
+    "shareCreate": "Freigabelink erstellen",
     "shareErrorDelete": "Link konnte nicht gelöscht werden",
     "shareErrorDeleteMessage": "Fehler beim Löschen des Links",
     "shareDeleted": "Link gelöscht",
@@ -161,7 +161,7 @@
     "shareQuestionRemove": "Sind Sie sicher, dass Sie diesen Freigabelink löschen möchten?",
     "shareMessageRemove": "Nach dem Löschen funktioniert der Link nicht mehr, und jeder, der ihn nutzt, verliert den Zugriff auf die Ressource.",
     "shareTokenDescription": "Das Zugriffstoken kann auf zwei Arten übergeben werden: als Abfrageparameter oder in den Request-Headern. Diese müssen vom Client auf jeder Anfrage für authentifizierten Zugriff weitergegeben werden.",
-    "accessToken": "Zugangs-Token",
+    "accessToken": "Zugriffstoken",
     "usageExamples": "Nutzungsbeispiele",
     "tokenId": "Token-ID",
     "requestHeades": "Anfrage-Header",
@@ -172,12 +172,12 @@
     "shareTokenSecurety": "Bewahren Sie das Zugriffstoken sicher. Teilen Sie es nicht in öffentlich zugänglichen Bereichen oder Client-seitigem Code.",
     "shareErrorFetchResource": "Fehler beim Abrufen der Ressourcen",
     "shareErrorFetchResourceDescription": "Beim Abrufen der Ressourcen ist ein Fehler aufgetreten",
-    "shareErrorCreate": "Fehler beim Erstellen des Teilen-Links",
-    "shareErrorCreateDescription": "Beim Erstellen des Teilen-Links ist ein Fehler aufgetreten",
+    "shareErrorCreate": "Fehler beim Erstellen des Freigabelinks",
+    "shareErrorCreateDescription": "Beim Erstellen des Freigabelinks ist ein Fehler aufgetreten",
     "shareCreateDescription": "Jeder mit diesem Link kann auf die Ressource zugreifen",
     "shareTitleOptional": "Titel (optional)",
-    "expireIn": "Verfällt in",
-    "neverExpire": "Nie ablaufen",
+    "expireIn": "Läuft ab in",
+    "neverExpire": "Läuft nie ab",
     "shareExpireDescription": "Ablaufzeit ist, wie lange der Link verwendet werden kann und bietet Zugriff auf die Ressource. Nach dieser Zeit wird der Link nicht mehr funktionieren und Benutzer, die diesen Link benutzt haben, verlieren den Zugriff auf die Ressource.",
     "shareSeeOnce": "Sie können diesen Link nur einmal sehen. Bitte kopieren Sie ihn.",
     "shareAccessHint": "Jeder mit diesem Link kann auf die Ressource zugreifen. Teilen Sie sie mit Vorsicht.",
@@ -186,7 +186,7 @@
     "resourcesNotFound": "Keine Ressourcen gefunden",
     "resourceSearch": "Suche Ressourcen",
     "machineSearch": "Maschinen suchen",
-    "machinesSearch": "Suche Maschinen-Klienten...",
+    "machinesSearch": "Maschinen-Clients suchen",
     "machineNotFound": "Keine Maschinen gefunden",
     "userDeviceSearch": "Benutzergeräte durchsuchen",
     "userDevicesSearch": "Benutzergeräte durchsuchen...",
@@ -203,7 +203,7 @@
     "proxyResourcesBannerDescription": "Öffentliche Ressourcen sind HTTPS oder TCP/UDP-Proxys, die über einen Webbrowser für jeden zugänglich sind. Im Gegensatz zu privaten Ressourcen benötigen sie keine Client-seitige Software und können Identitäts- und kontextbezogene Zugriffsrichtlinien beinhalten.",
     "clientResourceTitle": "Private Ressourcen verwalten",
     "clientResourceDescription": "Erstelle und verwalte Ressourcen, die nur über einen verbundenen Client zugänglich sind",
-    "privateResourcesBannerTitle": "Zero-Trust Privater Zugang",
+    "privateResourcesBannerTitle": "Zero-Trust-Zugriff auf private Ressourcen",
     "privateResourcesBannerDescription": "Private Ressourcen nutzen Zero-Trust und stellen sicher, dass Benutzer und Maschinen nur auf Ressourcen zugreifen können, die Sie explizit gewähren. Verbinden Sie Benutzergeräte oder Maschinen-Clients, um auf diese Ressourcen über ein sicheres virtuelles privates Netzwerk zuzugreifen.",
     "resourcesSearch": "Suche Ressourcen...",
     "resourceAdd": "Ressource hinzufügen",
@@ -265,7 +265,7 @@
     "rules": "Regeln",
     "resourceSettingDescription": "Einstellungen für die Ressource konfigurieren",
     "resourceSetting": "{resourceName} Einstellungen",
-    "alwaysAllow": "Auth umgehen",
+    "alwaysAllow": "Authentifizierung umgehen",
     "alwaysDeny": "Zugriff blockieren",
     "passToAuth": "Weiterleiten zur Authentifizierung",
     "orgSettingsDescription": "Organisationseinstellungen konfigurieren",
@@ -274,7 +274,7 @@
     "saveGeneralSettings": "Allgemeine Einstellungen speichern",
     "saveSettings": "Einstellungen speichern",
     "orgDangerZone": "Gefahrenzone",
-    "orgDangerZoneDescription": "Sobald Sie diesen Org löschen, gibt es kein Zurück mehr. Bitte seien Sie vorsichtig.",
+    "orgDangerZoneDescription": "Sobald Sie diese Organisation löschen, gibt es kein Zurück mehr. Bitte seien Sie vorsichtig.",
     "orgDelete": "Organisation löschen",
     "orgDeleteConfirm": "Organisation löschen bestätigen",
     "orgMessageRemove": "Diese Aktion ist unwiderruflich und löscht alle zugehörigen Daten.",
@@ -323,7 +323,7 @@
     "accessApprovalsManage": "Genehmigungen verwalten",
     "accessApprovalsDescription": "Zeige und verwalte ausstehende Genehmigungen für den Zugriff auf diese Organisation",
     "description": "Beschreibung",
-    "inviteTitle": "Einladungen öffnen",
+    "inviteTitle": "Offene Einladungen",
     "inviteDescription": "Einladungen für andere Benutzer verwalten, der Organisation beizutreten",
     "inviteSearch": "Einladungen suchen...",
     "minutes": "Minuten",
@@ -370,12 +370,12 @@
     "apiKeysDescription": "API-Schlüssel werden zur Authentifizierung mit der Integrations-API verwendet",
     "provisioningKeysTitle": "Bereitstellungsschlüssel",
     "provisioningKeysManage": "Bereitstellungsschlüssel verwalten",
-    "provisioningKeysDescription": "Bereitstellungsschlüssel werden verwendet, um die automatisierte Bereitstellung von Seiten für Ihr Unternehmen zu authentifizieren.",
+    "provisioningKeysDescription": "Bereitstellungsschlüssel werden verwendet, um die automatisierte Bereitstellung von Standorten für Ihr Unternehmen zu authentifizieren.",
     "provisioningManage": "Bereitstellung",
-    "provisioningDescription": "Bereitstellungsschlüssel verwalten und ausstehende Seiten prüfen, die noch auf Genehmigung warten.",
-    "pendingSites": "Ausstehende Seiten",
-    "siteApproveSuccess": "Site erfolgreich freigegeben",
-    "siteApproveError": "Fehler beim Bestätigen der Seite",
+    "provisioningDescription": "Bereitstellungsschlüssel verwalten und ausstehende Standorte prüfen, die noch auf Genehmigung warten.",
+    "pendingSites": "Ausstehende Standorte",
+    "siteApproveSuccess": "Standort erfolgreich freigegeben",
+    "siteApproveError": "Fehler beim Genehmigen des Standorts",
     "provisioningKeys": "Bereitstellungsschlüssel",
     "searchProvisioningKeys": "Bereitstellungsschlüssel suchen...",
     "provisioningKeysAdd": "Bereitstellungsschlüssel generieren",
@@ -405,7 +405,7 @@
     "provisioningKeysNeverUsed": "Nie",
     "provisioningKeysEdit": "Bereitstellungsschlüssel bearbeiten",
     "provisioningKeysEditDescription": "Aktualisieren Sie die maximale Batch-Größe und Ablaufzeit für diesen Schlüssel.",
-    "provisioningKeysApproveNewSites": "Neue Seiten genehmigen",
+    "provisioningKeysApproveNewSites": "Neuen Standort genehmigen",
     "provisioningKeysApproveNewSitesDescription": "Sites, die sich mit diesem Schlüssel registrieren, automatisch freigeben.",
     "provisioningKeysUpdateError": "Fehler beim Aktualisieren des Bereitstellungsschlüssels",
     "provisioningKeysUpdated": "Bereitstellungsschlüssel aktualisiert",
@@ -413,8 +413,8 @@
     "provisioningKeysBannerTitle": "Website-Bereitstellungsschlüssel",
     "provisioningKeysBannerDescription": "Generieren Sie einen Bereitstellungsschlüssel und verwenden Sie ihn mit dem Newt-Connector, um Standorte beim ersten Start automatisch zu erstellen - keine Notwendigkeit, separate Anmeldedaten für jede Seite einzurichten.",
     "provisioningKeysBannerButtonText": "Mehr erfahren",
-    "pendingSitesBannerTitle": "Ausstehende Seiten",
-    "pendingSitesBannerDescription": "Websites, die mit einem Bereitstellungsschlüssel verbunden sind, erscheinen hier zur Überprüfung.",
+    "pendingSitesBannerTitle": "Ausstehende Standorte",
+    "pendingSitesBannerDescription": "Standorte, die mit einem Bereitstellungsschlüssel verbunden sind, erscheinen hier zur Überprüfung.",
     "pendingSitesBannerButtonText": "Mehr erfahren",
     "apiKeysSettings": "{apiKeyName} Einstellungen",
     "userTitle": "Alle Benutzer verwalten",
@@ -461,7 +461,7 @@
     "licenseActivateKeyDescription": "Geben Sie einen Lizenzschlüssel ein, um ihn zu aktivieren.",
     "licenseActivate": "Lizenz aktivieren",
     "licenseAgreement": "Durch Ankreuzung dieses Kästchens bestätigen Sie, dass Sie die Lizenzbedingungen gelesen und akzeptiert haben, die mit dem Lizenzschlüssel in Verbindung stehen.",
-    "fossorialLicense": "Fossorial Gewerbelizenz & Abonnementbedingungen anzeigen",
+    "fossorialLicense": "Kommerzielle Fossorial-Lizenz und Abonnementbedingungen anzeigen",
     "licenseMessageRemove": "Dadurch werden der Lizenzschlüssel und alle zugehörigen Berechtigungen entfernt.",
     "licenseMessageConfirm": "Um zu bestätigen, geben Sie bitte den Lizenzschlüssel unten ein.",
     "licenseQuestionRemove": "Sind Sie sicher, dass Sie den Lizenzschlüssel löschen möchten?",
@@ -481,7 +481,7 @@
     "licensePurchaseSites": "Zusätzliche Standorte kaufen\n",
     "licenseSitesUsedMax": "{usedSites} von {maxSites} Standorten verwendet",
     "licenseSitesUsed": "{count, plural, =0 {# Standorte} one {# Standort} other {# Standorte}} im System.",
-    "licensePurchaseDescription": "Wähle aus, für wieviele Seiten du möchtest {selectedMode, select, license {kaufe eine Lizenz. Du kannst später immer weitere Seiten hinzufügen.} other {Füge zu deiner bestehenden Lizenz hinzu.}}",
+    "licensePurchaseDescription": "Wähle aus, für wie viele Standorte du möchtest {selectedMode, select, license {kaufe eine Lizenz. Du kannst später immer weitere Standorte hinzufügen.} other {Füge zu deiner bestehenden Lizenz hinzu.}}",
     "licenseFee": "Lizenzgebühr",
     "licensePriceSite": "Preis pro Standort",
     "total": "Gesamt",
@@ -532,7 +532,7 @@
     "userRemoveOrgConfirmSelf": "Entfernung bestätigen",
     "userRemoveOrgSelf": "Sich selbst aus der Organisation entfernen",
     "userRemoveOrgSelfWarning": "Sie verlieren sofort den Zugriff auf diese Organisation.",
-    "userRemoveOrgConfirmPhraseSelf": "ENTFERNUNG MICH SELBST AUS DER ORGANISATION",
+    "userRemoveOrgConfirmPhraseSelf": "MICH SELBST AUS DER ORGANISATION ENTFERNEN",
     "users": "Benutzer",
     "accessRoleMember": "Mitglied",
     "accessRoleOwner": "Eigentümer",
@@ -1711,11 +1711,11 @@
     "regionSelectorComingSoon": "Kommt bald",
     "billingLoadingSubscription": "Abonnement wird geladen...",
     "billingFreeTier": "Kostenlose Stufe",
-    "billingWarningOverLimit": "Warnung: Sie haben ein oder mehrere Nutzungslimits überschritten. Ihre Webseiten werden nicht verbunden, bis Sie Ihr Abonnement ändern oder Ihren Verbrauch anpassen.",
+    "billingWarningOverLimit": "Warnung: Sie haben ein oder mehrere Nutzungslimits überschritten. Ihre Standorte werden nicht verbunden, bis Sie Ihr Abonnement ändern oder Ihren Verbrauch anpassen.",
     "billingUsageLimitsOverview": "Übersicht über Nutzungsgrenzen",
     "billingMonitorUsage": "Überwachen Sie Ihren Verbrauch im Vergleich zu konfigurierten Grenzwerten. Wenn Sie eine Erhöhung der Limits benötigen, kontaktieren Sie uns bitte support@pangolin.net.",
     "billingDataUsage": "Datenverbrauch",
-    "billingSites": "Seiten",
+    "billingSites": "Standorte",
     "billingUsers": "Benutzergeräte",
     "billingDomains": "Domänen",
     "billingOrganizations": "Orden",
@@ -1743,7 +1743,7 @@
     "billingCheckoutError": "Checkout-Fehler",
     "billingFailedToGetPortalUrl": "Fehler beim Abrufen der Portal-URL",
     "billingPortalError": "Portalfehler",
-    "billingDataUsageInfo": "Wenn Sie mit der Cloud verbunden sind, werden alle Daten über Ihre sicheren Tunnel belastet. Dies schließt eingehenden und ausgehenden Datenverkehr über alle Ihre Websites ein. Wenn Sie Ihr Limit erreichen, werden Ihre Seiten die Verbindung trennen, bis Sie Ihr Paket upgraden oder die Nutzung verringern. Daten werden nicht belastet, wenn Sie Knoten verwenden.",
+    "billingDataUsageInfo": "Wenn Sie mit der Cloud verbunden sind, werden alle Daten über Ihre sicheren Tunnel belastet. Dies schließt eingehenden und ausgehenden Datenverkehr über alle Ihre Standorte ein. Wenn Sie Ihr Limit erreichen, werden Ihre Standorte die Verbindung trennen, bis Sie Ihr Paket upgraden oder die Nutzung verringern. Daten werden nicht belastet, wenn Sie Knoten verwenden.",
     "billingSInfo": "Anzahl der Sites die Sie verwenden können",
     "billingUsersInfo": "Wie viele Benutzer Sie verwenden können",
     "billingDomainInfo": "Wie viele Domains Sie verwenden können",
@@ -1927,7 +1927,7 @@
     "configureHealthCheck": "Gesundheits-Check konfigurieren",
     "configureHealthCheckDescription": "Richten Sie die Gesundheitsüberwachung für {target} ein",
     "enableHealthChecks": "Gesundheits-Checks aktivieren",
-    "healthCheckDisabledStateDescription": "Wenn deaktiviert, führt die Seite keine Gesundheitsprüfungen durch und der Zustand wird als unbekannt betrachtet.",
+    "healthCheckDisabledStateDescription": "Wenn deaktiviert, führt der Standort keine Gesundheitsprüfungen durch und der Zustand wird als unbekannt betrachtet.",
     "enableHealthChecksDescription": "Überwachen Sie die Gesundheit dieses Ziels. Bei Bedarf können Sie einen anderen Endpunkt als das Ziel überwachen.",
     "healthScheme": "Methode",
     "healthSelectScheme": "Methode auswählen",
@@ -2187,8 +2187,8 @@
         }
     },
     "remoteExitNodeSelection": "Knotenauswahl",
-    "remoteExitNodeSelectionDescription": "Wählen Sie einen Knoten aus, durch den Traffic für diese lokale Seite geleitet werden soll",
-    "remoteExitNodeRequired": "Ein Knoten muss für lokale Seiten ausgewählt sein",
+    "remoteExitNodeSelectionDescription": "Wählen Sie einen Knoten aus, durch den Traffic für diesen lokalen Standort geleitet werden soll",
+    "remoteExitNodeRequired": "Ein Knoten muss für lokale Standorte ausgewählt sein",
     "noRemoteExitNodesAvailable": "Keine Knoten verfügbar",
     "noRemoteExitNodesAvailableDescription": "Für diese Organisation sind keine Knoten verfügbar. Erstellen Sie zuerst einen Knoten, um lokale Standorte zu verwenden.",
     "exitNode": "Exit-Node",
@@ -3235,7 +3235,7 @@
     "uptimeAddAlert": "Warnmeldung hinzufügen",
     "uptimeViewAlerts": "Warnungen anzeigen",
     "uptimeCreateEmailAlert": "E-Mail Alarm erstellen",
-    "uptimeAlertDescriptionSite": "Werde per E-Mail benachrichtigt, wenn diese Seite offline oder wieder online ist.",
+    "uptimeAlertDescriptionSite": "Werde per E-Mail benachrichtigt, wenn dieser Standort offline oder wieder online ist.",
     "uptimeAlertDescriptionResource": "Werde per E-Mail benachrichtigt, wenn diese Ressource offline oder wieder online ist.",
     "uptimeAlertNamePlaceholder": "Alarmname",
     "uptimeAdditionalEmails": "Zusätzliche E-Mails",

messages/en-US.json

@@ -255,6 +255,23 @@
     "resourceGoTo": "Go to Resource",
     "resourceDelete": "Delete Resource",
     "resourceDeleteConfirm": "Confirm Delete Resource",
+    "labelDelete": "Delete Label",
+    "labelAdd": "Add Label",
+    "labelCreateSuccessMessage": "Label Created Successfully",
+    "labelEditSuccessMessage": "Label Modified Successfully",
+    "labelNameField": "Label Name",
+    "labelColorField": "Label Color",
+    "labelPlaceholder": "Ex: homelab",
+    "labelCreate": "Create Label",
+    "createLabelDialogTitle": "Create Label",
+    "createLabelDialogDescription": "Create a new label that can be attached to this organization",
+    "labelEdit": "Edit Label",
+    "editLabelDialogTitle": "Update Label",
+    "editLabelDialogDescription": "Edit a new label that can be attached to this organization",
+    "labelDeleteConfirm": "Confirm Delete Label",
+    "labelErrorDelete": "Failed to delete label",
+    "labelMessageRemove": "This action is permanent. All sites, resources, and clients tagged with this label will be untagged.",
+    "labelQuestionRemove": "Are you sure you want to remove the label from the organization?",
     "visibility": "Visibility",
     "enabled": "Enabled",
     "disabled": "Disabled",
@@ -1140,6 +1157,15 @@
     "idpErrorConnectingTo": "There was a problem connecting to {name}. Please contact your administrator.",
     "idpErrorNotFound": "IdP not found",
     "inviteInvalid": "Invalid Invite",
+    "labels": "Labels",
+    "orgLabelsDescription": "Manage labels in this organization.",
+    "addLabels": "Add labels",
+    "siteLabelsTab": "Labels",
+    "siteLabelsDescription": "Manage labels associated with this site.",
+    "labelsNotFound": "Labels not found",
+    "labelSearch": "Search labels",
+    "selectColor": "Select color",
+    "createNewLabel": "Create new org label \"{label}\"",
     "inviteInvalidDescription": "The invite link is invalid.",
     "inviteErrorWrongUser": "Invite is not for this user",
     "inviteErrorUserNotExists": "User does not exist. Please create an account first.",
@@ -1620,6 +1646,7 @@
     "certificateStatus": "Certificate",
     "certificateStatusAutoRefreshHint": "Status refreshes automatically.",
     "loading": "Loading",
+    "loadingEllipsis": "Loading...",
     "loadingAnalytics": "Loading Analytics",
     "restart": "Restart",
     "domains": "Domains",

server/auth/actions.ts

@@ -148,6 +148,12 @@ export enum ActionsEnum {
     updateAlertRule = "updateAlertRule",
     deleteAlertRule = "deleteAlertRule",
     listAlertRules = "listAlertRules",
+    listOrgLabels = "listOrgLabels",
+    createOrgLabel = "createOrgLabel",
+    updateOrgLabel = "updateOrgLabel",
+    deleteOrgLabel = "deleteOrgLabel",
+    attachLabelToItem = "attachLabelToItem",
+    detachLabelFromItem = "detachLabelFromItem",
     getAlertRule = "getAlertRule",
     createHealthCheck = "createHealthCheck",
     updateHealthCheck = "updateHealthCheck",

server/db/pg/schema/schema.ts

@@ -162,6 +162,89 @@ export const resources = pgTable("resources", {
     wildcard: boolean("wildcard").notNull().default(false)
 });
 
+export const labels = pgTable("labels", {
+    labelId: serial("labelId").primaryKey(),
+    name: varchar("name").notNull(),
+    color: varchar("color").notNull(),
+    orgId: varchar("orgId")
+        .references(() => orgs.orgId, {
+            onDelete: "cascade"
+        })
+        .notNull()
+});
+
+export const siteLabels = pgTable(
+    "siteLabels",
+    {
+        siteLabelId: serial("siteLabelId").primaryKey(),
+        siteId: integer("siteId")
+            .references(() => sites.siteId, {
+                onDelete: "cascade"
+            })
+            .notNull(),
+        labelId: integer("labelId")
+            .references(() => labels.labelId, {
+                onDelete: "cascade"
+            })
+            .notNull()
+    },
+    (t) => [unique("site_label_uniq").on(t.siteId, t.labelId)]
+);
+
+export const resourceLabels = pgTable(
+    "resourceLabels",
+    {
+        resourceLabelId: serial("resourceLabelId").primaryKey(),
+        resourceId: integer("resourceId")
+            .references(() => resources.resourceId, {
+                onDelete: "cascade"
+            })
+            .notNull(),
+        labelId: integer("labelId")
+            .references(() => labels.labelId, {
+                onDelete: "cascade"
+            })
+            .notNull()
+    },
+    (t) => [unique("resource_label_uniq").on(t.resourceId, t.labelId)]
+);
+
+export const siteResourceLabels = pgTable(
+    "siteResourceLabels",
+    {
+        siteResourceLabelId: serial("siteResourceLabelId").primaryKey(),
+        siteResourceId: integer("siteResourceId")
+            .references(() => siteResources.siteResourceId, {
+                onDelete: "cascade"
+            })
+            .notNull(),
+        labelId: integer("labelId")
+            .references(() => labels.labelId, {
+                onDelete: "cascade"
+            })
+            .notNull()
+    },
+    (t) => [unique("site_resource_label_uniq").on(t.siteResourceId, t.labelId)]
+);
+
+export const clientLabels = pgTable(
+    "clientLabels",
+    {
+        clientLabelId: serial("clientLabelId").primaryKey(),
+        clientId: integer("clientId")
+            .references(() => clients.clientId, {
+                onDelete: "cascade"
+            })
+            .notNull(),
+        labelId: integer("labelId")
+            .references(() => labels.labelId, {
+                onDelete: "cascade"
+            })
+            .notNull()
+    },
+    (t) => [unique("client_label_uniq").on(t.clientId, t.labelId)]
+);
+
 export const targets = pgTable("targets", {
     targetId: serial("targetId").primaryKey(),
     resourceId: integer("resourceId")
@@ -196,9 +279,11 @@ export const targetHealthCheck = pgTable("targetHealthCheck", {
             onDelete: "cascade"
         })
         .notNull(),
-    siteId: integer("siteId").references(() => sites.siteId, {
-        onDelete: "cascade"
-    }).notNull(),
+    siteId: integer("siteId")
+        .references(() => sites.siteId, {
+            onDelete: "cascade"
+        })
+        .notNull(),
     name: varchar("name"),
     hcEnabled: boolean("hcEnabled").notNull().default(false),
     hcPath: varchar("hcPath"),
@@ -1097,19 +1182,30 @@ export const roundTripMessageTracker = pgTable("roundTripMessageTracker", {
     complete: boolean("complete").notNull().default(false)
 });
 
-export const statusHistory = pgTable("statusHistory", {
-    id: serial("id").primaryKey(),
-    entityType: varchar("entityType").notNull(),
-    entityId: integer("entityId").notNull(),
-    orgId: varchar("orgId")
-        .notNull()
-        .references(() => orgs.orgId, { onDelete: "cascade" }),
-    status: varchar("status").notNull(),
-    timestamp: integer("timestamp").notNull(),
-}, (table) => [
-    index("idx_statusHistory_entity").on(table.entityType, table.entityId, table.timestamp),
-    index("idx_statusHistory_org_timestamp").on(table.orgId, table.timestamp),
-]);
+export const statusHistory = pgTable(
+    "statusHistory",
+    {
+        id: serial("id").primaryKey(),
+        entityType: varchar("entityType").notNull(),
+        entityId: integer("entityId").notNull(),
+        orgId: varchar("orgId")
+            .notNull()
+            .references(() => orgs.orgId, { onDelete: "cascade" }),
+        status: varchar("status").notNull(),
+        timestamp: integer("timestamp").notNull()
+    },
+    (table) => [
+        index("idx_statusHistory_entity").on(
+            table.entityType,
+            table.entityId,
+            table.timestamp
+        ),
+        index("idx_statusHistory_org_timestamp").on(
+            table.orgId,
+            table.timestamp
+        )
+    ]
+);
 
 export type Org = InferSelectModel<typeof orgs>;
 export type User = InferSelectModel<typeof users>;
@@ -1179,3 +1275,4 @@ export type RoundTripMessageTracker = InferSelectModel<
 >;
 export type Network = InferSelectModel<typeof networks>;
 export type StatusHistory = InferSelectModel<typeof statusHistory>;
+export type Label = InferSelectModel<typeof labels>;

server/db/sqlite/schema/schema.ts

@@ -183,6 +183,95 @@ export const resources = sqliteTable("resources", {
     wildcard: integer("wildcard", { mode: "boolean" }).notNull().default(false)
 });
 
+export const labels = sqliteTable("labels", {
+    labelId: integer("labelId").primaryKey({ autoIncrement: true }),
+    name: text("name").notNull(),
+    color: text("color").notNull(),
+    orgId: text("orgId")
+        .references(() => orgs.orgId, {
+            onDelete: "cascade"
+        })
+        .notNull()
+});
+
+export const siteLabels = sqliteTable(
+    "siteLabels",
+    {
+        siteLabelId: integer("siteLabelId").primaryKey({ autoIncrement: true }),
+        siteId: integer("siteId")
+            .references(() => sites.siteId, {
+                onDelete: "cascade"
+            })
+            .notNull(),
+        labelId: integer("labelId")
+            .references(() => labels.labelId, {
+                onDelete: "cascade"
+            })
+            .notNull()
+    },
+    (t) => [unique("site_label_uniq").on(t.siteId, t.labelId)]
+);
+
+export const resourceLabels = sqliteTable(
+    "resourceLabels",
+    {
+        resourceLabelId: integer("resourceLabelId").primaryKey({
+            autoIncrement: true
+        }),
+        resourceId: integer("resourceId")
+            .references(() => resources.resourceId, {
+                onDelete: "cascade"
+            })
+            .notNull(),
+        labelId: integer("labelId")
+            .references(() => labels.labelId, {
+                onDelete: "cascade"
+            })
+            .notNull()
+    },
+    (t) => [unique("resource_label_uniq").on(t.resourceId, t.labelId)]
+);
+
+export const siteResourceLabels = sqliteTable(
+    "siteResourceLabels",
+    {
+        siteResourceLabelId: integer("siteResourceLabelId").primaryKey({
+            autoIncrement: true
+        }),
+        siteResourceId: integer("siteResourceId")
+            .references(() => siteResources.siteResourceId, {
+                onDelete: "cascade"
+            })
+            .notNull(),
+        labelId: integer("labelId")
+            .references(() => labels.labelId, {
+                onDelete: "cascade"
+            })
+            .notNull()
+    },
+    (t) => [unique("site_resource_label_uniq").on(t.siteResourceId, t.labelId)]
+);
+
+export const clientLabels = sqliteTable(
+    "clientLabels",
+    {
+        clientLabelId: integer("clientLabelId").primaryKey({
+            autoIncrement: true
+        }),
+        clientId: integer("clientId")
+            .references(() => clients.clientId, {
+                onDelete: "cascade"
+            })
+            .notNull(),
+        labelId: integer("labelId")
+            .references(() => labels.labelId, {
+                onDelete: "cascade"
+            })
+            .notNull()
+    },
+    (t) => [unique("client_label_uniq").on(t.clientId, t.labelId)]
+);
+
 export const targets = sqliteTable("targets", {
     targetId: integer("targetId").primaryKey({ autoIncrement: true }),
     resourceId: integer("resourceId")
@@ -219,9 +308,11 @@ export const targetHealthCheck = sqliteTable("targetHealthCheck", {
             onDelete: "cascade"
         })
         .notNull(),
-    siteId: integer("siteId").references(() => sites.siteId, {
-        onDelete: "cascade"
-    }).notNull(),
+    siteId: integer("siteId")
+        .references(() => sites.siteId, {
+            onDelete: "cascade"
+        })
+        .notNull(),
     name: text("name"),
     hcEnabled: integer("hcEnabled", { mode: "boolean" })
         .notNull()
@@ -1196,19 +1287,30 @@ export const roundTripMessageTracker = sqliteTable("roundTripMessageTracker", {
     complete: integer("complete", { mode: "boolean" }).notNull().default(false)
 });
 
-export const statusHistory = sqliteTable("statusHistory", {
-    id: integer("id").primaryKey({ autoIncrement: true }),
-    entityType: text("entityType").notNull(), // "site" | "healthCheck"
-    entityId: integer("entityId").notNull(),  // siteId or targetHealthCheckId
-    orgId: text("orgId")
-        .notNull()
-        .references(() => orgs.orgId, { onDelete: "cascade" }),
-    status: text("status").notNull(), // "online"/"offline" for sites; "healthy"/"unhealthy"/"unknown" for healthChecks
-    timestamp: integer("timestamp").notNull(), // unix epoch seconds
-}, (table) => [
-    index("idx_statusHistory_entity").on(table.entityType, table.entityId, table.timestamp),
-    index("idx_statusHistory_org_timestamp").on(table.orgId, table.timestamp),
-]);
+export const statusHistory = sqliteTable(
+    "statusHistory",
+    {
+        id: integer("id").primaryKey({ autoIncrement: true }),
+        entityType: text("entityType").notNull(), // "site" | "healthCheck"
+        entityId: integer("entityId").notNull(), // siteId or targetHealthCheckId
+        orgId: text("orgId")
+            .notNull()
+            .references(() => orgs.orgId, { onDelete: "cascade" }),
+        status: text("status").notNull(), // "online"/"offline" for sites; "healthy"/"unhealthy"/"unknown" for healthChecks
+        timestamp: integer("timestamp").notNull() // unix epoch seconds
+    },
+    (table) => [
+        index("idx_statusHistory_entity").on(
+            table.entityType,
+            table.entityId,
+            table.timestamp
+        ),
+        index("idx_statusHistory_org_timestamp").on(
+            table.orgId,
+            table.timestamp
+        )
+    ]
+);
 
 export type Org = InferSelectModel<typeof orgs>;
 export type User = InferSelectModel<typeof users>;
@@ -1278,3 +1380,4 @@ export type RoundTripMessageTracker = InferSelectModel<
     typeof roundTripMessageTracker
 >;
 export type StatusHistory = InferSelectModel<typeof statusHistory>;
+export type Label = InferSelectModel<typeof labels>;

server/lib/billing/tierMatrix.ts

@@ -24,10 +24,12 @@ export enum TierFeature {
     DomainNamespaces = "domainNamespaces", // handle downgrade by removing custom domain namespaces
     StandaloneHealthChecks = "standaloneHealthChecks",
     AlertingRules = "alertingRules",
-    WildcardSubdomain = "wildcardSubdomain"
+    WildcardSubdomain = "wildcardSubdomain",
+    Labels = "labels"
 }
 
 export const tierMatrix: Record<TierFeature, Tier[]> = {
+    [TierFeature.Labels]: ["tier2", "tier3", "enterprise"],
     [TierFeature.OrgOidc]: ["tier1", "tier2", "tier3", "enterprise"],
     [TierFeature.LoginPageDomain]: ["tier1", "tier2", "tier3", "enterprise"],
     [TierFeature.DeviceApprovals]: ["tier1", "tier3", "enterprise"],

server/lib/cache.ts

@@ -154,8 +154,19 @@ class AdaptiveCache {
     keys(): string[] {
         return localCache.keys();
     }
+
+    /**
+     * Get keys with a specific prefix
+     * @param prefix - Key prefix to match
+     * @returns Array of matching keys
+     */
+    async keysWithPrefix(prefix: string): Promise<string[]> {
+        const allKeys = localCache.keys();
+        return allKeys.filter((key) => key.startsWith(prefix));
+    }
 }
 
 // Export singleton instance
 export const cache = new AdaptiveCache();
+export const regionalCache = cache; // Alias for compatability with the private version
 export default cache;

server/lib/rebuildClientAssociations.ts

@@ -18,11 +18,9 @@ import {
     userOrgRoles,
     userSiteResources
 } from "@server/db";
-import { and, eq, inArray, ne } from "drizzle-orm";
+import { and, count, eq, inArray, ne } from "drizzle-orm";
 
-import {
-    deletePeer as newtDeletePeer
-} from "@server/routers/newt/peers";
+import { deletePeer as newtDeletePeer } from "@server/routers/newt/peers";
 import {
     initPeerAddHandshake,
     deletePeer as olmDeletePeer
@@ -33,7 +31,7 @@ import {
     generateAliasConfig,
     generateRemoteSubnets,
     generateSubnetProxyTargetV2,
-    parseEndpoint,
+    parseEndpoint
 } from "@server/lib/ip";
 import {
     addPeerData,
@@ -41,6 +39,11 @@ import {
     removePeerData,
     removeTargets as removeSubnetProxyTargets
 } from "@server/routers/client/targets";
+import { lockManager } from "#dynamic/lib/lock";
+
+// TTL for rebuild-association locks. These functions can fan out into many
+// peer/proxy updates, so give them a generous window.
+const REBUILD_ASSOCIATIONS_LOCK_TTL_MS = 120000;
 
 export async function getClientSiteResourceAccess(
     siteResource: SiteResource,
@@ -51,10 +54,7 @@ export async function getClientSiteResourceAccess(
         ? await trx
               .select()
               .from(sites)
-              .innerJoin(
-                  siteNetworks,
-                  eq(siteNetworks.siteId, sites.siteId)
-              )
+              .innerJoin(siteNetworks, eq(siteNetworks.siteId, sites.siteId))
               .where(eq(siteNetworks.networkId, siteResource.networkId))
               .then((rows) => rows.map((row) => row.sites))
         : [];
@@ -166,6 +166,23 @@ export async function rebuildClientAssociationsFromSiteResource(
         pubKey: string | null;
         subnet: string | null;
     }[];
+}> {
+    return await lockManager.withLock(
+        `rebuild-client-associations:site-resource:${siteResource.siteResourceId}`,
+        () => rebuildClientAssociationsFromSiteResourceImpl(siteResource, trx),
+        REBUILD_ASSOCIATIONS_LOCK_TTL_MS
+    );
+}
+
+async function rebuildClientAssociationsFromSiteResourceImpl(
+    siteResource: SiteResource,
+    trx: Transaction | typeof db = db
+): Promise<{
+    mergedAllClients: {
+        clientId: number;
+        pubKey: string | null;
+        subnet: string | null;
+    }[];
 }> {
     logger.debug(
         `rebuildClientAssociations: [rebuildClientAssociationsFromSiteResource] START siteResourceId=${siteResource.siteResourceId} networkId=${siteResource.networkId} orgId=${siteResource.orgId}`
@@ -362,7 +379,8 @@ export async function rebuildClientAssociationsFromSiteResource(
                       .where(inArray(clients.clientId, existingClientSiteIds))
                 : [];
 
-        const otherResourceClientIds = clientsFromOtherResourcesBySite.get(siteId) ?? new Set<number>();
+        const otherResourceClientIds =
+            clientsFromOtherResourcesBySite.get(siteId) ?? new Set<number>();
 
         logger.debug(
             `rebuildClientAssociations: [rebuildClientAssociationsFromSiteResource] siteId=${siteId} otherResourceClientIds=[${[...otherResourceClientIds].join(", ")}] mergedAllClientIds=[${mergedAllClientIds.join(", ")}]`
@@ -543,6 +561,29 @@ async function handleMessagesForSiteClients(
         }
     }
 
+    // get the number of sites on each of these clients so we can log it and make decisions about whether to send messages based on it
+    const clientSiteCounts: Record<number, number> = {};
+    if (clientsToProcess.size > 0) {
+        const clientIdsToProcess = Array.from(clientsToProcess.keys());
+        const siteCounts = await trx
+            .select({
+                clientId: clientSitesAssociationsCache.clientId,
+                siteCount: count(clientSitesAssociationsCache.siteId)
+            })
+            .from(clientSitesAssociationsCache)
+            .where(
+                inArray(
+                    clientSitesAssociationsCache.clientId,
+                    clientIdsToProcess
+                )
+            )
+            .groupBy(clientSitesAssociationsCache.clientId);
+
+        for (const row of siteCounts) {
+            clientSiteCounts[row.clientId] = Number(row.siteCount);
+        }
+    }
+
     for (const client of clientsToProcess.values()) {
         // UPDATE THE NEWT
         if (!client.subnet || !client.pubKey) {
@@ -586,7 +627,14 @@ async function handleMessagesForSiteClients(
         }
 
         if (isAdd) {
-            // TODO: if we are in jit mode here should we really be sending this?
+            if (clientSiteCounts[client.clientId] > 250) {
+                // skip adding the peer if we have more than 250 sites because we are in jit mode anyway
+                logger.info(
+                    `rebuildClientAssociations: Client ${client.clientId} has ${clientSiteCounts[client.clientId]} sites so skipping adding peer to newt and olm because it is likely in jit mode`
+                );
+                continue;
+            }
+
             await initPeerAddHandshake(
                 // this will kick off the add peer process for the client
                 client.clientId,
@@ -604,9 +652,24 @@ async function handleMessagesForSiteClients(
         exitNodeJobs.push(updateClientSiteDestinations(client, trx));
     }
 
-    await Promise.all(exitNodeJobs);
-    await Promise.all(newtJobs); // do the servers first to make sure they are ready?
-    await Promise.all(olmJobs);
+    Promise.all(exitNodeJobs).catch((error) => {
+        logger.error(
+            `rebuildClientAssociations: Error updating client site destinations for site ${site.siteId}:`,
+            error
+        );
+    });
+    Promise.all(newtJobs).catch((error) => {
+        logger.error(
+            `rebuildClientAssociations: Error updating Newt peers for site ${site.siteId}:`,
+            error
+        );
+    });
+    Promise.all(olmJobs).catch((error) => {
+        logger.error(
+            `rebuildClientAssociations: Error updating Olm peers for site ${site.siteId}:`,
+            error
+        );
+    });
 }
 
 interface PeerDestination {
@@ -709,7 +772,7 @@ export async function updateClientSiteDestinations(
             sourcePort: destination.sourcePort,
             destinations: destination.destinations
         };
-        logger.info(
+        logger.debug(
             `Payload for update-destinations: ${JSON.stringify(payload, null, 2)}`
         );
 
@@ -889,6 +952,17 @@ async function handleSubnetProxyTargetUpdates(
 export async function rebuildClientAssociationsFromClient(
     client: Client,
     trx: Transaction | typeof db = db
+): Promise<void> {
+    return await lockManager.withLock(
+        `rebuild-client-associations:client:${client.clientId}`,
+        () => rebuildClientAssociationsFromClientImpl(client, trx),
+        REBUILD_ASSOCIATIONS_LOCK_TTL_MS
+    );
+}
+
+async function rebuildClientAssociationsFromClientImpl(
+    client: Client,
+    trx: Transaction | typeof db = db
 ): Promise<void> {
     let newSiteResourceIds: number[] = [];
 
@@ -1161,6 +1235,12 @@ async function handleMessagesForClientSites(
     const olmJobs: Promise<any>[] = [];
     const exitNodeJobs: Promise<any>[] = [];
 
+    const totalSitesOnClient = await trx
+        .select({ count: count(clientSitesAssociationsCache.siteId) })
+        .from(clientSitesAssociationsCache)
+        .where(eq(clientSitesAssociationsCache.clientId, client.clientId))
+        .then((rows) => Number(rows[0].count));
+
     for (const siteData of sitesData) {
         const site = siteData.sites;
         const exitNode = siteData.exitNodes;
@@ -1221,7 +1301,14 @@ async function handleMessagesForClientSites(
                 continue;
             }
 
-            // TODO: if we are in jit mode here should we really be sending this?
+            if (totalSitesOnClient > 250) {
+                // skip adding the site if we have more than 250 because we are in jit mode anyway
+                logger.info(
+                    `rebuildClientAssociations: Client ${client.clientId} has ${totalSitesOnClient} sites so skipping adding peer to newt and olm because it is likely in jit mode`
+                );
+                continue;
+            }
+
             await initPeerAddHandshake(
                 // this will kick off the add peer process for the client
                 client.clientId,
@@ -1249,9 +1336,24 @@ async function handleMessagesForClientSites(
         );
     }
 
-    await Promise.all(exitNodeJobs);
-    await Promise.all(newtJobs);
-    await Promise.all(olmJobs);
+    Promise.all(exitNodeJobs).catch((error) => {
+        logger.error(
+            `rebuildClientAssociations: Error updating client site destinations for client ${client.clientId}:`,
+            error
+        );
+    });
+    Promise.all(newtJobs).catch((error) => {
+        logger.error(
+            `rebuildClientAssociations: Error updating Newt peers for client ${client.clientId}:`,
+            error
+        );
+    });
+    Promise.all(olmJobs).catch((error) => {
+        logger.error(
+            `rebuildClientAssociations: Error updating Olm peers for client ${client.clientId}:`,
+            error
+        );
+    });
 }
 
 async function handleMessagesForClientResources(
@@ -1532,3 +1634,195 @@ async function handleMessagesForClientResources(
 
     await Promise.all([...proxyJobs, ...olmJobs]);
 }
+
+export type ClientAssociationsCacheVerification = {
+    clientId: number;
+    consistent: boolean;
+    // What permissions say the cache should contain
+    expectedSiteResourceIds: number[];
+    expectedSiteIds: number[];
+    // What the cache currently contains
+    actualSiteResourceIds: number[];
+    actualSiteIds: number[];
+    // Diff
+    missingSiteResourceIds: number[]; // present in expected, missing from cache
+    extraSiteResourceIds: number[]; // present in cache, not in expected
+    missingSiteIds: number[];
+    extraSiteIds: number[];
+};
+
+// verifyClientAssociationsCache walks the same permission-derivation logic as
+// rebuildClientAssociationsFromClient but does NOT modify the database. It
+// returns the expected vs actual cache contents and a boolean indicating
+// whether the cache is in sync with what permissions imply.
+export async function verifyClientAssociationsCache(
+    client: Client,
+    trx: Transaction | typeof db = db
+): Promise<ClientAssociationsCacheVerification> {
+    let newSiteResourceIds: number[] = [];
+
+    // 1. Direct client associations
+    const directSiteResources = await trx
+        .select({ siteResourceId: clientSiteResources.siteResourceId })
+        .from(clientSiteResources)
+        .innerJoin(
+            siteResources,
+            eq(siteResources.siteResourceId, clientSiteResources.siteResourceId)
+        )
+        .where(
+            and(
+                eq(clientSiteResources.clientId, client.clientId),
+                eq(siteResources.orgId, client.orgId)
+            )
+        );
+
+    newSiteResourceIds.push(
+        ...directSiteResources.map((r) => r.siteResourceId)
+    );
+
+    // 2. User-based and role-based access (if client has a userId)
+    if (client.userId) {
+        const userSiteResourceIds = await trx
+            .select({ siteResourceId: userSiteResources.siteResourceId })
+            .from(userSiteResources)
+            .innerJoin(
+                siteResources,
+                eq(
+                    siteResources.siteResourceId,
+                    userSiteResources.siteResourceId
+                )
+            )
+            .where(
+                and(
+                    eq(userSiteResources.userId, client.userId),
+                    eq(siteResources.orgId, client.orgId)
+                )
+            );
+
+        newSiteResourceIds.push(
+            ...userSiteResourceIds.map((r) => r.siteResourceId)
+        );
+
+        const roleIds = await trx
+            .select({ roleId: userOrgRoles.roleId })
+            .from(userOrgRoles)
+            .where(
+                and(
+                    eq(userOrgRoles.userId, client.userId),
+                    eq(userOrgRoles.orgId, client.orgId)
+                )
+            )
+            .then((rows) => rows.map((row) => row.roleId));
+
+        if (roleIds.length > 0) {
+            const roleSiteResourceIds = await trx
+                .select({ siteResourceId: roleSiteResources.siteResourceId })
+                .from(roleSiteResources)
+                .innerJoin(
+                    siteResources,
+                    eq(
+                        siteResources.siteResourceId,
+                        roleSiteResources.siteResourceId
+                    )
+                )
+                .where(
+                    and(
+                        inArray(roleSiteResources.roleId, roleIds),
+                        eq(siteResources.orgId, client.orgId)
+                    )
+                );
+
+            newSiteResourceIds.push(
+                ...roleSiteResourceIds.map((r) => r.siteResourceId)
+            );
+        }
+    }
+
+    newSiteResourceIds = Array.from(new Set(newSiteResourceIds));
+
+    const newSiteResources =
+        newSiteResourceIds.length > 0
+            ? await trx
+                  .select()
+                  .from(siteResources)
+                  .where(
+                      inArray(siteResources.siteResourceId, newSiteResourceIds)
+                  )
+            : [];
+
+    const networkIds = Array.from(
+        new Set(
+            newSiteResources
+                .map((sr) => sr.networkId)
+                .filter((id): id is number => id !== null)
+        )
+    );
+    const newSiteIds =
+        networkIds.length > 0
+            ? await trx
+                  .select({ siteId: siteNetworks.siteId })
+                  .from(siteNetworks)
+                  .where(inArray(siteNetworks.networkId, networkIds))
+                  .then((rows) =>
+                      Array.from(new Set(rows.map((r) => r.siteId)))
+                  )
+            : [];
+
+    // Read the existing cache state
+    const existingResourceAssociations = await trx
+        .select({
+            siteResourceId: clientSiteResourcesAssociationsCache.siteResourceId
+        })
+        .from(clientSiteResourcesAssociationsCache)
+        .where(
+            eq(clientSiteResourcesAssociationsCache.clientId, client.clientId)
+        );
+    const existingSiteResourceIds = existingResourceAssociations.map(
+        (r) => r.siteResourceId
+    );
+
+    const existingSiteAssociations = await trx
+        .select({ siteId: clientSitesAssociationsCache.siteId })
+        .from(clientSitesAssociationsCache)
+        .where(eq(clientSitesAssociationsCache.clientId, client.clientId));
+    const existingSiteIds = existingSiteAssociations.map((s) => s.siteId);
+
+    const expectedSiteResourceSet = new Set(newSiteResourceIds);
+    const actualSiteResourceSet = new Set(existingSiteResourceIds);
+    const expectedSiteSet = new Set(newSiteIds);
+    const actualSiteSet = new Set(existingSiteIds);
+
+    const missingSiteResourceIds = newSiteResourceIds.filter(
+        (id) => !actualSiteResourceSet.has(id)
+    );
+    const extraSiteResourceIds = existingSiteResourceIds.filter(
+        (id) => !expectedSiteResourceSet.has(id)
+    );
+    const missingSiteIds = newSiteIds.filter((id) => !actualSiteSet.has(id));
+    const extraSiteIds = existingSiteIds.filter(
+        (id) => !expectedSiteSet.has(id)
+    );
+
+    const consistent =
+        missingSiteResourceIds.length === 0 &&
+        extraSiteResourceIds.length === 0 &&
+        missingSiteIds.length === 0 &&
+        extraSiteIds.length === 0;
+
+    return {
+        clientId: client.clientId,
+        consistent,
+        expectedSiteResourceIds: Array.from(expectedSiteResourceSet).sort(
+            (a, b) => a - b
+        ),
+        expectedSiteIds: Array.from(expectedSiteSet).sort((a, b) => a - b),
+        actualSiteResourceIds: Array.from(actualSiteResourceSet).sort(
+            (a, b) => a - b
+        ),
+        actualSiteIds: Array.from(actualSiteSet).sort((a, b) => a - b),
+        missingSiteResourceIds: missingSiteResourceIds.sort((a, b) => a - b),
+        extraSiteResourceIds: extraSiteResourceIds.sort((a, b) => a - b),
+        missingSiteIds: missingSiteIds.sort((a, b) => a - b),
+        extraSiteIds: extraSiteIds.sort((a, b) => a - b)
+    };
+}

server/lib/statusHistory.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { db, logsDb, statusHistory } from "@server/db";
 import { and, eq, gte, asc } from "drizzle-orm";
-import cache from "@server/lib/cache";
+import { regionalCache as cache } from "#dynamic/lib/cache";
 
 const STATUS_HISTORY_CACHE_TTL = 60; // seconds
 
@@ -66,7 +66,7 @@ export async function invalidateStatusHistoryCache(
     entityId: number
 ): Promise<void> {
     const prefix = `statusHistory:${entityType}:${entityId}:`;
-    const keys = cache.keys().filter((k) => k.startsWith(prefix));
+    const keys = await cache.keysWithPrefix(prefix);
     if (keys.length > 0) {
         await cache.del(keys);
     }

server/private/lib/cache.ts

@@ -13,7 +13,7 @@
 
 import NodeCache from "node-cache";
 import logger from "@server/logger";
-import { redisManager } from "@server/private/lib/redis";
+import { redisManager, regionalRedisManager } from "@server/private/lib/redis";
 
 // Create local cache with maxKeys limit to prevent memory leaks
 // With ~10k requests/day and 5min TTL, 10k keys should be more than sufficient
@@ -298,3 +298,147 @@ class AdaptiveCache {
 // Export singleton instance
 export const cache = new AdaptiveCache();
 export default cache;
+
+/**
+ * Regional adaptive cache backed by the in-cluster Redis instance.
+ * Falls back to a local NodeCache when the regional Redis is unavailable.
+ * Use this for data that is regional in nature (e.g. status history) so
+ * reads are served from the same cluster the user is hitting.
+ */
+const regionalLocalCache = new NodeCache({
+    stdTTL: 3600,
+    checkperiod: 120,
+    maxKeys: 10000
+});
+
+class RegionalAdaptiveCache {
+    private useRedis(): boolean {
+        return (
+            regionalRedisManager.isRedisEnabled() &&
+            regionalRedisManager.getHealthStatus().isHealthy
+        );
+    }
+
+    async set(key: string, value: any, ttl?: number): Promise<boolean> {
+        const effectiveTtl = ttl === 0 ? undefined : ttl;
+        const redisTtl = ttl === 0 ? undefined : (ttl ?? 3600);
+
+        if (this.useRedis()) {
+            try {
+                const serialized = JSON.stringify(value);
+                const success = await regionalRedisManager.set(
+                    key,
+                    serialized,
+                    redisTtl
+                );
+                if (success) {
+                    logger.debug(`[regional] Set key in Redis: ${key}`);
+                    return true;
+                }
+            } catch (error) {
+                logger.error(
+                    `[regional] Redis set error for key ${key}:`,
+                    error
+                );
+            }
+        }
+
+        const success = regionalLocalCache.set(key, value, effectiveTtl || 0);
+        if (success) logger.debug(`[regional] Set key in local cache: ${key}`);
+        return success;
+    }
+
+    async get<T = any>(key: string): Promise<T | undefined> {
+        if (this.useRedis()) {
+            try {
+                const value = await regionalRedisManager.get(key);
+                if (value !== null) {
+                    logger.debug(`[regional] Cache hit in Redis: ${key}`);
+                    return JSON.parse(value) as T;
+                }
+                logger.debug(`[regional] Cache miss in Redis: ${key}`);
+                return undefined;
+            } catch (error) {
+                logger.error(
+                    `[regional] Redis get error for key ${key}:`,
+                    error
+                );
+            }
+        }
+
+        const value = regionalLocalCache.get<T>(key);
+        if (value !== undefined) {
+            logger.debug(`[regional] Cache hit in local cache: ${key}`);
+        } else {
+            logger.debug(`[regional] Cache miss in local cache: ${key}`);
+        }
+        return value;
+    }
+
+    async del(key: string | string[]): Promise<number> {
+        const keys = Array.isArray(key) ? key : [key];
+        let deletedCount = 0;
+
+        if (this.useRedis()) {
+            try {
+                for (const k of keys) {
+                    const success = await regionalRedisManager.del(k);
+                    if (success) {
+                        deletedCount++;
+                        logger.debug(`[regional] Deleted key from Redis: ${k}`);
+                    }
+                }
+                if (deletedCount === keys.length) return deletedCount;
+                deletedCount = 0;
+            } catch (error) {
+                logger.error(`[regional] Redis del error:`, error);
+                deletedCount = 0;
+            }
+        }
+
+        for (const k of keys) {
+            const count = regionalLocalCache.del(k);
+            if (count > 0) {
+                deletedCount++;
+                logger.debug(`[regional] Deleted key from local cache: ${k}`);
+            }
+        }
+        return deletedCount;
+    }
+
+    async has(key: string): Promise<boolean> {
+        if (this.useRedis()) {
+            try {
+                const value = await regionalRedisManager.get(key);
+                return value !== null;
+            } catch (error) {
+                logger.error(
+                    `[regional] Redis has error for key ${key}:`,
+                    error
+                );
+            }
+        }
+        return regionalLocalCache.has(key);
+    }
+
+    /**
+     * Returns keys matching the given prefix from whichever backend is active.
+     * Redis uses a KEYS scan; local cache filters in-memory keys.
+     */
+    async keysWithPrefix(prefix: string): Promise<string[]> {
+        if (this.useRedis()) {
+            try {
+                return await regionalRedisManager.keys(`${prefix}*`);
+            } catch (error) {
+                logger.error(`[regional] Redis keys error:`, error);
+            }
+        }
+        return regionalLocalCache.keys().filter((k) => k.startsWith(prefix));
+    }
+
+    getCurrentBackend(): "redis" | "local" {
+        return this.useRedis() ? "redis" : "local";
+    }
+}
+
+export const regionalCache = new RegionalAdaptiveCache();

server/private/lib/logStreaming/index.ts

@@ -24,7 +24,8 @@ import { LogStreamingManager } from "./LogStreamingManager";
  */
 export const logStreamingManager = new LogStreamingManager();
 
-if (build != "saas") { // this is handled separately in the saas build, so we don't want to start it here
+if (build !== "saas") {
+    // this is handled separately in the saas build, so we don't want to start it here
     logStreamingManager.start();
 }
 

server/private/lib/readConfigFile.ts

@@ -73,6 +73,25 @@ export const privateConfigSchema = z
                     .object({
                         rejectUnauthorized: z.boolean().optional().default(true)
                     })
+                    .optional(),
+                regional_redis: z
+                    .object({
+                        host: z.string(),
+                        port: portSchema,
+                        password: z
+                            .string()
+                            .optional()
+                            .transform(getEnvOrYaml("REGIONAL_REDIS_PASSWORD")),
+                        db: z.int().nonnegative().optional().default(0),
+                        tls: z
+                            .object({
+                                rejectUnauthorized: z
+                                    .boolean()
+                                    .optional()
+                                    .default(true)
+                            })
+                            .optional()
+                    })
                     .optional()
             })
             .optional(),

server/private/lib/redis.ts

@@ -109,14 +109,14 @@ class RedisManager {
             password: redisConfig.password,
             db: redisConfig.db
         };
-        
+
         // Enable TLS if configured (required for AWS ElastiCache in-transit encryption)
         if (redisConfig.tls) {
             opts.tls = {
                 rejectUnauthorized: redisConfig.tls.rejectUnauthorized ?? true
             };
         }
-        
+
         return opts;
     }
 
@@ -135,14 +135,14 @@ class RedisManager {
             password: replica.password,
             db: replica.db || redisConfig.db
         };
-        
+
         // Enable TLS if configured (required for AWS ElastiCache in-transit encryption)
         if (redisConfig.tls) {
             opts.tls = {
                 rejectUnauthorized: redisConfig.tls.rejectUnauthorized ?? true
             };
         }
-        
+
         return opts;
     }
 
@@ -855,3 +855,163 @@ class RedisManager {
 export const redisManager = new RedisManager();
 export const redis = redisManager.getClient();
 export default redisManager;
+
+/**
+ * Lightweight Redis manager for the regional (in-cluster) Redis instance.
+ * Connects only when `redis.regional_redis` is present in the private config
+ * and `flags.enable_redis` is true. No pub/sub — designed for low-latency
+ * caching of regionally-scoped data.
+ */
+class RegionalRedisManager {
+    private writeClient: Redis | null = null;
+    private readClient: Redis | null = null;
+    private isEnabled: boolean = false;
+    private isHealthy: boolean = false;
+    private connectionTimeout: number = 5000;
+    private commandTimeout: number = 5000;
+
+    constructor() {
+        if (build === "oss") return;
+
+        const cfg = privateConfig.getRawPrivateConfig();
+        if (!cfg.flags.enable_redis || !cfg.redis?.regional_redis) return;
+
+        this.isEnabled = true;
+        this.initializeClients();
+    }
+
+    private getConfig(): RedisOptions {
+        const r = privateConfig.getRawPrivateConfig().redis!.regional_redis!;
+        const opts: RedisOptions = {
+            host: r.host,
+            port: r.port,
+            password: r.password,
+            db: r.db
+        };
+        if (r.tls) {
+            opts.tls = { rejectUnauthorized: r.tls.rejectUnauthorized ?? true };
+        }
+        return opts;
+    }
+
+    private initializeClients(): void {
+        const cfg = this.getConfig();
+        const baseOpts = {
+            ...cfg,
+            enableReadyCheck: false,
+            maxRetriesPerRequest: 3,
+            keepAlive: 10000,
+            connectTimeout: this.connectionTimeout,
+            commandTimeout: this.commandTimeout
+        };
+
+        try {
+            this.writeClient = new Redis(baseOpts);
+            // redis-1 (replica) handles reads; fall back to primary if not resolvable
+            this.readClient = new Redis({
+                ...baseOpts,
+                host: cfg.host!.replace(/^(.*?)(\.\S+)$/, (_, h, rest) => {
+                    // Derive replica hostname from the headless service pattern:
+                    // redis.redis.svc.cluster.local -> redis-1.redis-headless.redis.svc.cluster.local
+                    // If it doesn't look like a k8s service, just use the same host
+                    return h + rest;
+                })
+            });
+
+            // For simplicity use same host for both; callers can always read from primary
+            // The real replica routing is handled by the StatefulSet headless service
+            this.readClient = this.writeClient;
+
+            this.writeClient.on("ready", () => {
+                logger.info("Regional Redis client ready");
+                this.isHealthy = true;
+            });
+            this.writeClient.on("error", (err) => {
+                logger.error("Regional Redis client error:", err);
+                this.isHealthy = false;
+            });
+            this.writeClient.on("reconnecting", () => {
+                logger.info("Regional Redis client reconnecting...");
+                this.isHealthy = false;
+            });
+
+            logger.info("Regional Redis client initialized");
+        } catch (error) {
+            logger.error("Failed to initialize regional Redis client:", error);
+            this.isEnabled = false;
+        }
+    }
+
+    public isRedisEnabled(): boolean {
+        return this.isEnabled && this.writeClient !== null && this.isHealthy;
+    }
+
+    public getHealthStatus() {
+        return { isEnabled: this.isEnabled, isHealthy: this.isHealthy };
+    }
+
+    public async set(
+        key: string,
+        value: string,
+        ttl?: number
+    ): Promise<boolean> {
+        if (!this.isRedisEnabled() || !this.writeClient) return false;
+        try {
+            if (ttl) {
+                await this.writeClient.setex(key, ttl, value);
+            } else {
+                await this.writeClient.set(key, value);
+            }
+            return true;
+        } catch (error) {
+            logger.error("Regional Redis SET error:", error);
+            return false;
+        }
+    }
+
+    public async get(key: string): Promise<string | null> {
+        if (!this.isRedisEnabled() || !this.readClient) return null;
+        try {
+            return await this.readClient.get(key);
+        } catch (error) {
+            logger.error("Regional Redis GET error:", error);
+            return null;
+        }
+    }
+
+    public async del(key: string): Promise<boolean> {
+        if (!this.isRedisEnabled() || !this.writeClient) return false;
+        try {
+            await this.writeClient.del(key);
+            return true;
+        } catch (error) {
+            logger.error("Regional Redis DEL error:", error);
+            return false;
+        }
+    }
+
+    public async keys(pattern: string): Promise<string[]> {
+        if (!this.isRedisEnabled() || !this.readClient) return [];
+        try {
+            return await this.readClient.keys(pattern);
+        } catch (error) {
+            logger.error("Regional Redis KEYS error:", error);
+            return [];
+        }
+    }
+
+    public async disconnect(): Promise<void> {
+        try {
+            if (this.writeClient) {
+                await this.writeClient.quit();
+                this.writeClient = null;
+            }
+            this.readClient = null;
+            logger.info("Regional Redis client disconnected");
+        } catch (error) {
+            logger.error("Error disconnecting regional Redis client:", error);
+        }
+    }
+}
+
+export const regionalRedisManager = new RegionalRedisManager();

server/private/middlewares/verifySubscription.ts

@@ -25,7 +25,7 @@ export function verifyValidSubscription(tiers: Tier[]) {
         next: NextFunction
     ): Promise<any> {
         try {
-            if (build != "saas") {
+            if (build !== "saas") {
                 return next();
             }
 

server/private/routers/external.ts

@@ -31,6 +31,8 @@ import * as siteProvisioning from "#private/routers/siteProvisioning";
 import * as eventStreamingDestination from "#private/routers/eventStreamingDestination";
 import * as alertRule from "#private/routers/alertRule";
 import * as healthChecks from "#private/routers/healthChecks";
+import * as labels from "#private/routers/labels";
+import * as client from "@server/routers/client";
 
 import {
     verifyOrgAccess,
@@ -732,6 +734,59 @@ authenticated.get(
     alertRule.getAlertRule
 );
 
+authenticated.get(
+    "/org/:orgId/labels",
+    verifyValidLicense,
+    verifyOrgAccess,
+    verifyValidSubscription(tierMatrix.labels),
+    verifyUserHasAction(ActionsEnum.listOrgLabels),
+    labels.listOrgLabels
+);
+
+authenticated.post(
+    "/org/:orgId/labels",
+    verifyValidLicense,
+    verifyOrgAccess,
+    verifyValidSubscription(tierMatrix.labels),
+    verifyUserHasAction(ActionsEnum.createOrgLabel),
+    labels.createOrgLabel
+);
+
+authenticated.patch(
+    "/org/:orgId/label/:labelId",
+    verifyValidLicense,
+    verifyOrgAccess,
+    verifyValidSubscription(tierMatrix.labels),
+    verifyUserHasAction(ActionsEnum.updateOrgLabel),
+    labels.updateOrgLabel
+);
+
+authenticated.delete(
+    "/org/:orgId/label/:labelId",
+    verifyValidLicense,
+    verifyOrgAccess,
+    verifyUserHasAction(ActionsEnum.deleteOrgLabel),
+    labels.deleteOrgLabel
+);
+
+authenticated.put(
+    "/org/:orgId/label/:labelId/attach",
+    verifyValidLicense,
+    verifyOrgAccess,
+    verifyValidSubscription(tierMatrix.labels),
+    verifyUserHasAction(ActionsEnum.attachLabelToItem),
+    labels.attachLabelToItem
+);
+
+authenticated.put(
+    "/org/:orgId/label/:labelId/detach",
+    verifyValidLicense,
+    verifyOrgAccess,
+    verifyValidSubscription(tierMatrix.labels),
+    verifyUserHasAction(ActionsEnum.detachLabelFromItem),
+    labels.detachLabelFromItem
+);
+
 authenticated.get(
     "/org/:orgId/health-checks",
     verifyValidLicense,
@@ -775,3 +830,15 @@ authenticated.get(
     verifyUserHasAction(ActionsEnum.getTarget),
     healthChecks.getHealthCheckStatusHistory
 );
+
+authenticated.get(
+    "/client/:clientId/verify-associations-cache",
+    verifyClientAccess,
+    client.verifyClientAssociationsCache
+);
+
+authenticated.post(
+    "/client/:clientId/rebuild-associations-cache",
+    verifyClientAccess,
+    client.rebuildClientAssociationsCacheRoute
+);

server/private/routers/labels/attachLabelToItem.ts

@@ -0,0 +1,224 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025-2026 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+import {
+    clients,
+    clientLabels,
+    db,
+    labels,
+    resourceLabels,
+    resources,
+    siteLabels,
+    siteResourceLabels,
+    siteResources,
+    sites
+} from "@server/db";
+import response from "@server/lib/response";
+import logger from "@server/logger";
+import HttpCode from "@server/types/HttpCode";
+import { and, eq, isNull } from "drizzle-orm";
+import { NextFunction, Request, Response } from "express";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+
+const paramsSchema = z.strictObject({
+    orgId: z.string().nonempty(),
+    labelId: z.string().transform(Number).pipe(z.int().positive())
+});
+
+const attachLabelBodySchema = z.strictObject({
+    siteId: z.number().int().optional(),
+    resourceId: z.number().int().optional(),
+    siteResourceId: z.number().int().optional(),
+    clientId: z.number().int().optional()
+});
+
+export async function attachLabelToItem(
+    req: Request,
+    res: Response,
+    next: NextFunction
+) {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const { orgId, labelId } = parsedParams.data;
+
+        const parsedBody = attachLabelBodySchema.safeParse(req.body);
+        if (!parsedBody.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedBody.error).toString()
+                )
+            );
+        }
+
+        const { siteId, resourceId, siteResourceId, clientId } =
+            parsedBody.data;
+
+        if (!siteId && !resourceId && !siteResourceId && !clientId) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    "At least one of `siteId`, `resourceId`, `siteResourceId` or `clientId` should be provided."
+                )
+            );
+        }
+
+        const [existing] = await db
+            .select()
+            .from(labels)
+            .where(and(eq(labels.labelId, labelId), eq(labels.orgId, orgId)));
+
+        if (!existing) {
+            return next(
+                createHttpError(
+                    HttpCode.NOT_FOUND,
+                    `Label with Id ${labelId} not found`
+                )
+            );
+        }
+
+        if (siteId) {
+            const siteCount = await db.$count(
+                sites,
+                and(eq(sites.siteId, siteId), eq(sites.orgId, orgId))
+            );
+
+            if (siteCount === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.NOT_FOUND,
+                        `Site with Id ${siteId} doesn't exist.`
+                    )
+                );
+            }
+
+            // idempotent, calling this endpoint multiple times should attach the label only once
+            await db
+                .insert(siteLabels)
+                .values({
+                    labelId,
+                    siteId
+                })
+                .onConflictDoNothing();
+        }
+
+        if (resourceId) {
+            const resourceCount = await db.$count(
+                resources,
+                and(
+                    eq(resources.resourceId, resourceId),
+                    eq(resources.orgId, orgId)
+                )
+            );
+
+            if (resourceCount === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.NOT_FOUND,
+                        `Resource with Id ${resourceId} doesn't exist.`
+                    )
+                );
+            }
+
+            // idempotent, calling this endpoint multiple times should attach the label only once
+            await db
+                .insert(resourceLabels)
+                .values({
+                    labelId,
+                    resourceId
+                })
+                .onConflictDoNothing();
+        }
+
+        if (siteResourceId) {
+            const resourceCount = await db.$count(
+                siteResources,
+                and(
+                    eq(siteResources.siteResourceId, siteResourceId),
+                    eq(siteResources.orgId, orgId)
+                )
+            );
+
+            if (resourceCount === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.NOT_FOUND,
+                        `SiteResource with Id ${siteResourceId} doesn't exist.`
+                    )
+                );
+            }
+
+            // idempotent, calling this endpoint multiple times should attach the label only once
+            await db
+                .insert(siteResourceLabels)
+                .values({
+                    labelId,
+                    siteResourceId
+                })
+                .onConflictDoNothing();
+        }
+
+        if (clientId) {
+            const clientCount = await db.$count(
+                clients,
+                and(
+                    eq(clients.clientId, clientId),
+                    eq(clients.orgId, orgId),
+                    isNull(clients.userId)
+                )
+            );
+
+            if (clientCount === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.NOT_FOUND,
+                        `Client with Id ${clientId} doesn't exist.`
+                    )
+                );
+            }
+
+            // idempotent, calling this endpoint multiple times should attach the label only once
+            await db
+                .insert(clientLabels)
+                .values({
+                    labelId,
+                    clientId
+                })
+                .onConflictDoNothing();
+        }
+
+        return response(res, {
+            data: {},
+            success: true,
+            error: false,
+            message: "Label attached successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/private/routers/labels/createOrgLabel.ts

@@ -0,0 +1,149 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025-2026 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+import {
+    db,
+    labels,
+    resourceLabels,
+    resources,
+    siteLabels,
+    sites
+} from "@server/db";
+import response from "@server/lib/response";
+import logger from "@server/logger";
+import type { CreateOrEditLabelResponse } from "@server/routers/labels/types";
+import HttpCode from "@server/types/HttpCode";
+import { and, eq } from "drizzle-orm";
+import { NextFunction, Request, Response } from "express";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+
+const paramsSchema = z.strictObject({
+    orgId: z.string().nonempty()
+});
+
+const bodySchema = z.strictObject({
+    name: z.string().nonempty(),
+    color: z
+        .string()
+        .regex(/^#?([0-9a-f]{6}|[0-9a-f]{3})$/i)
+        .nonempty(),
+    siteId: z.number().int().optional(),
+    resourceId: z.number().int().optional()
+});
+
+export async function createOrgLabel(
+    req: Request,
+    res: Response,
+    next: NextFunction
+) {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const { orgId } = parsedParams.data;
+
+        const parsedBody = bodySchema.safeParse(req.body);
+        if (!parsedBody.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedBody.error).toString()
+                )
+            );
+        }
+
+        const { name, color, siteId, resourceId } = parsedBody.data;
+
+        if (siteId) {
+            const siteCount = await db.$count(
+                sites,
+                and(eq(sites.siteId, siteId), eq(sites.orgId, orgId))
+            );
+
+            if (siteCount === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.BAD_REQUEST,
+                        `Site with Id ${siteId} doesn't exist.`
+                    )
+                );
+            }
+        }
+
+        if (resourceId) {
+            const resourceCount = await db.$count(
+                resources,
+                and(
+                    eq(resources.resourceId, resourceId),
+                    eq(resources.orgId, orgId)
+                )
+            );
+
+            if (resourceCount === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.BAD_REQUEST,
+                        `Resource with Id ${resourceId} doesn't exist.`
+                    )
+                );
+            }
+        }
+
+        const label = await db.transaction(async (tx) => {
+            const [label] = await tx
+                .insert(labels)
+                .values({
+                    name,
+                    color,
+                    orgId
+                })
+                .returning();
+
+            if (siteId) {
+                await tx.insert(siteLabels).values({
+                    siteId,
+                    labelId: label.labelId
+                });
+            }
+
+            if (resourceId) {
+                await tx.insert(resourceLabels).values({
+                    resourceId,
+                    labelId: label.labelId
+                });
+            }
+            return label;
+        });
+
+        return response<CreateOrEditLabelResponse>(res, {
+            data: { label },
+            success: true,
+            error: false,
+            message: "Org Label created successfully",
+            status: HttpCode.CREATED
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/private/routers/labels/deleteOrgLabel.ts

@@ -0,0 +1,72 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025-2026 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+import { db, labels } from "@server/db";
+import response from "@server/lib/response";
+import logger from "@server/logger";
+import HttpCode from "@server/types/HttpCode";
+import { and, eq } from "drizzle-orm";
+import { NextFunction, Request, Response } from "express";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+
+const paramsSchema = z.strictObject({
+    orgId: z.string().nonempty(),
+    labelId: z.string().transform(Number).pipe(z.int().positive())
+});
+
+export async function deleteOrgLabel(
+    req: Request,
+    res: Response,
+    next: NextFunction
+) {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const { orgId, labelId } = parsedParams.data;
+
+        const [existing] = await db
+            .select()
+            .from(labels)
+            .where(and(eq(labels.labelId, labelId), eq(labels.orgId, orgId)));
+
+        if (!existing) {
+            return next(createHttpError(HttpCode.NOT_FOUND, "Label not found"));
+        }
+
+        await db
+            .delete(labels)
+            .where(and(eq(labels.labelId, labelId), eq(labels.orgId, orgId)));
+
+        return response(res, {
+            data: null,
+            success: true,
+            error: false,
+            message: "Label deleted successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/private/routers/labels/detachLabelFromItem.ts

@@ -0,0 +1,224 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025-2026 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+import {
+    clients,
+    clientLabels,
+    db,
+    labels,
+    resourceLabels,
+    resources,
+    siteLabels,
+    siteResourceLabels,
+    siteResources,
+    sites
+} from "@server/db";
+import response from "@server/lib/response";
+import logger from "@server/logger";
+import HttpCode from "@server/types/HttpCode";
+import { and, eq, isNull } from "drizzle-orm";
+import { NextFunction, Request, Response } from "express";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+
+const paramsSchema = z.strictObject({
+    orgId: z.string().nonempty(),
+    labelId: z.string().transform(Number).pipe(z.int().positive())
+});
+
+const detachLabelBodySchema = z.strictObject({
+    siteId: z.number().int().optional(),
+    resourceId: z.number().int().optional(),
+    siteResourceId: z.number().int().optional(),
+    clientId: z.number().int().optional()
+});
+
+export async function detachLabelFromItem(
+    req: Request,
+    res: Response,
+    next: NextFunction
+) {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const { orgId, labelId } = parsedParams.data;
+
+        const parsedBody = detachLabelBodySchema.safeParse(req.body);
+        if (!parsedBody.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedBody.error).toString()
+                )
+            );
+        }
+
+        const { siteId, resourceId, siteResourceId, clientId } =
+            parsedBody.data;
+
+        if (!siteId && !resourceId && !siteResourceId && !clientId) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    "At least one of `siteId`, `resourceId`, `siteResourceId` or `clientId` should be provided."
+                )
+            );
+        }
+
+        const [existing] = await db
+            .select()
+            .from(labels)
+            .where(and(eq(labels.labelId, labelId), eq(labels.orgId, orgId)));
+
+        if (!existing) {
+            return next(
+                createHttpError(
+                    HttpCode.NOT_FOUND,
+                    `Label with Id ${labelId} not found`
+                )
+            );
+        }
+
+        if (siteId) {
+            const siteCount = await db.$count(
+                sites,
+                and(eq(sites.siteId, siteId), eq(sites.orgId, orgId))
+            );
+
+            if (siteCount === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.NOT_FOUND,
+                        `Site with Id ${siteId} doesn't exist.`
+                    )
+                );
+            }
+
+            await db
+                .delete(siteLabels)
+                .where(
+                    and(
+                        eq(siteLabels.labelId, labelId),
+                        eq(siteLabels.siteId, siteId)
+                    )
+                );
+        }
+
+        if (resourceId) {
+            const resourceCount = await db.$count(
+                resources,
+                and(
+                    eq(resources.resourceId, resourceId),
+                    eq(resources.orgId, orgId)
+                )
+            );
+
+            if (resourceCount === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.NOT_FOUND,
+                        `Resource with Id ${resourceId} doesn't exist.`
+                    )
+                );
+            }
+
+            await db
+                .delete(resourceLabels)
+                .where(
+                    and(
+                        eq(resourceLabels.labelId, labelId),
+                        eq(resourceLabels.resourceId, resourceId)
+                    )
+                );
+        }
+
+        if (siteResourceId) {
+            const resourceCount = await db.$count(
+                siteResources,
+                and(
+                    eq(siteResources.siteResourceId, siteResourceId),
+                    eq(siteResources.orgId, orgId)
+                )
+            );
+
+            if (resourceCount === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.NOT_FOUND,
+                        `SiteResource with Id ${siteResourceId} doesn't exist.`
+                    )
+                );
+            }
+
+            await db
+                .delete(siteResourceLabels)
+                .where(
+                    and(
+                        eq(siteResourceLabels.labelId, labelId),
+                        eq(siteResourceLabels.siteResourceId, siteResourceId)
+                    )
+                );
+        }
+
+        if (clientId) {
+            const clientCount = await db.$count(
+                clients,
+                and(
+                    eq(clients.clientId, clientId),
+                    eq(clients.orgId, orgId),
+                    isNull(clients.userId)
+                )
+            );
+
+            if (clientCount === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.NOT_FOUND,
+                        `Client with Id ${clientId} doesn't exist.`
+                    )
+                );
+            }
+
+            await db
+                .delete(clientLabels)
+                .where(
+                    and(
+                        eq(clientLabels.labelId, labelId),
+                        eq(clientLabels.clientId, clientId)
+                    )
+                );
+        }
+
+        return response(res, {
+            data: {},
+            success: true,
+            error: false,
+            message: "Label detached successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/private/routers/labels/index.ts

@@ -0,0 +1,19 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025-2026 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+export * from "./listOrgLabels";
+export * from "./createOrgLabel";
+export * from "./updateOrgLabel";
+export * from "./attachLabelToItem";
+export * from "./detachLabelFromItem";
+export * from "./deleteOrgLabel";

server/private/routers/labels/listOrgLabels.ts

@@ -0,0 +1,155 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025-2026 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+import { db, labels } from "@server/db";
+import response from "@server/lib/response";
+import logger from "@server/logger";
+import type { ListOrgLabelsResponse } from "@server/routers/labels/types";
+import HttpCode from "@server/types/HttpCode";
+import { and, asc, eq, like, sql } from "drizzle-orm";
+import { NextFunction, Request, Response } from "express";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+
+const paramsSchema = z.strictObject({
+    orgId: z.string().nonempty()
+});
+
+const listLabelsSchema = z.object({
+    pageSize: z.coerce
+        .number<string>() // for prettier formatting
+        .int()
+        .positive()
+        .optional()
+        .catch(20)
+        .default(20)
+        .openapi({
+            type: "integer",
+            default: 20,
+            description: "Number of items per page"
+        }),
+    page: z.coerce
+        .number<string>() // for prettier formatting
+        .int()
+        .min(0)
+        .optional()
+        .catch(1)
+        .default(1)
+        .openapi({
+            type: "integer",
+            default: 1,
+            description: "Page number to retrieve"
+        }),
+    query: z.string().optional()
+});
+
+function queryLabelsBase() {
+    return db
+        .select({
+            labelId: labels.labelId,
+            name: labels.name,
+            color: labels.color
+        })
+        .from(labels);
+}
+
+export async function listOrgLabels(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const parsedQuery = listLabelsSchema.safeParse(req.query);
+        if (!parsedQuery.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedQuery.error)
+                )
+            );
+        }
+
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error)
+                )
+            );
+        }
+        const { orgId } = parsedParams.data;
+
+        if (req.user && orgId && orgId !== req.userOrgId) {
+            return next(
+                createHttpError(
+                    HttpCode.FORBIDDEN,
+                    "User does not have access to this organization"
+                )
+            );
+        }
+
+        const { pageSize, page, query } = parsedQuery.data;
+
+        const conditions = [and(eq(labels.orgId, orgId))];
+
+        if (query) {
+            conditions.push(
+                like(
+                    sql`LOWER(${labels.name})`,
+                    "%" + query.toLowerCase() + "%"
+                )
+            );
+        }
+
+        const baseQuery = queryLabelsBase().where(and(...conditions));
+
+        // we need to add `as` so that drizzle filters the result as a subquery
+        const countQuery = db.$count(
+            queryLabelsBase()
+                .where(and(...conditions))
+                .as("filtered_labels")
+        );
+
+        const labelListQuery = baseQuery
+            .limit(pageSize)
+            .offset(pageSize * (page - 1))
+            .orderBy(asc(labels.name));
+
+        const [totalCount, rows] = await Promise.all([
+            countQuery,
+            labelListQuery
+        ]);
+
+        return response<ListOrgLabelsResponse>(res, {
+            data: {
+                labels: rows,
+                pagination: {
+                    total: totalCount,
+                    pageSize,
+                    page
+                }
+            },
+            success: true,
+            error: false,
+            message: "Labels retrieved successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/private/routers/labels/updateOrgLabel.ts

@@ -0,0 +1,101 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025-2026 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+import { db, labels } from "@server/db";
+import response from "@server/lib/response";
+import logger from "@server/logger";
+import type { CreateOrEditLabelResponse } from "@server/routers/labels/types";
+import HttpCode from "@server/types/HttpCode";
+import { and, eq } from "drizzle-orm";
+import { NextFunction, Request, Response } from "express";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+
+const paramsSchema = z.strictObject({
+    orgId: z.string().nonempty(),
+    labelId: z.string().transform(Number).pipe(z.int().positive())
+});
+
+const updateLabelBodySchema = z.strictObject({
+    name: z.string().min(1).max(255).optional(),
+    color: z
+        .string()
+        .regex(/^#?([0-9a-f]{6}|[0-9a-f]{3})$/i)
+        .nonempty()
+});
+
+export async function updateOrgLabel(
+    req: Request,
+    res: Response,
+    next: NextFunction
+) {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const { orgId, labelId } = parsedParams.data;
+
+        const parsedBody = updateLabelBodySchema.safeParse(req.body);
+        if (!parsedBody.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedBody.error).toString()
+                )
+            );
+        }
+
+        const [existing] = await db
+            .select()
+            .from(labels)
+            .where(and(eq(labels.labelId, labelId), eq(labels.orgId, orgId)));
+
+        if (!existing) {
+            return next(createHttpError(HttpCode.NOT_FOUND, "Label not found"));
+        }
+
+        const { name, color } = parsedBody.data;
+
+        const [label] = await db
+            .update(labels)
+            .set({
+                name,
+                color
+            })
+            .where(and(eq(labels.labelId, labelId), eq(labels.orgId, orgId)))
+            .returning();
+
+        return response<CreateOrEditLabelResponse>(res, {
+            data: {
+                label
+            },
+            success: true,
+            error: false,
+            message: "Label updated successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/private/routers/loginPage/upsertLoginPageBranding.ts

@@ -26,7 +26,6 @@ import logger from "@server/logger";
 import { fromError } from "zod-validation-error";
 import { eq, InferInsertModel } from "drizzle-orm";
 import { build } from "@server/build";
-import { validateLocalPath } from "@app/lib/validateLocalPath";
 import config from "#private/lib/config";
 
 const paramsSchema = z.strictObject({
@@ -35,78 +34,9 @@ const paramsSchema = z.strictObject({
 
 const bodySchema = z.strictObject({
     logoUrl: z
-        .union([
-            z.literal(""),
-            z
-                .string()
-                .superRefine(async (urlOrPath, ctx) => {
-                    const parseResult = z.url().safeParse(urlOrPath);
-                    if (!parseResult.success) {
-                        if (build !== "enterprise") {
-                            ctx.addIssue({
-                                code: "custom",
-                                message: "Must be a valid URL"
-                            });
-                            return;
-                        } else {
-                            try {
-                                validateLocalPath(urlOrPath);
-                            } catch (error) {
-                                ctx.addIssue({
-                                    code: "custom",
-                                    message: "Must be either a valid image URL or a valid pathname starting with `/` and not containing query parameters, `..` or `*`"
-                                });
-                            } finally {
-                                return;
-                            }
-                        }
-                    }
-
-                    try {
-                        const response = await fetch(urlOrPath, {
-                            method: "HEAD"
-                        }).catch(() => {
-                            // If HEAD fails (CORS or method not allowed), try GET
-                            return fetch(urlOrPath, { method: "GET" });
-                        });
-
-                        if (response.status !== 200) {
-                            ctx.addIssue({
-                                code: "custom",
-                                message: `Failed to load image. Please check that the URL is accessible.`
-                            });
-                            return;
-                        }
-
-                        const contentType =
-                            response.headers.get("content-type") ?? "";
-                        if (!contentType.startsWith("image/")) {
-                            ctx.addIssue({
-                                code: "custom",
-                                message: `URL does not point to an image. Please provide a URL to an image file (e.g., .png, .jpg, .svg).`
-                            });
-                            return;
-                        }
-                    } catch (error) {
-                        let errorMessage =
-                            "Unable to verify image URL. Please check that the URL is accessible and points to an image file.";
-
-                        if (error instanceof TypeError && error.message.includes("fetch")) {
-                            errorMessage =
-                                "Network error: Unable to reach the URL. Please check your internet connection and verify the URL is correct.";
-                        } else if (error instanceof Error) {
-                            errorMessage = `Error verifying URL: ${error.message}`;
-                        }
-
-                        ctx.addIssue({
-                            code: "custom",
-                            message: errorMessage
-                        });
-                    }
-                })
-        ])
-        .transform((val) => (val === "" ? null : val))
-        .nullish(),
+        .string()
+        .optional()
+        .transform((val) => (val === "" ? null : val)),
     logoWidth: z.coerce.number<number>().min(1),
     logoHeight: z.coerce.number<number>().min(1),
     resourceTitle: z.string(),

server/private/routers/ssh/signSshKey.ts

@@ -19,6 +19,7 @@ import {
     logsDb,
     newts,
     roles,
+    roleSiteResources,
     roundTripMessageTracker,
     siteResources,
     siteNetworks,
@@ -361,9 +362,26 @@ export async function signSshKey(
         }
 
         const roleRows = await db
-            .select()
+            .select({
+                sshSudoCommands: roles.sshSudoCommands,
+                sshUnixGroups: roles.sshUnixGroups,
+                sshCreateHomeDir: roles.sshCreateHomeDir,
+                sshSudoMode: roles.sshSudoMode
+            })
             .from(roles)
-            .where(inArray(roles.roleId, roleIds));
+            .innerJoin(
+                roleSiteResources,
+                eq(roleSiteResources.roleId, roles.roleId)
+            )
+            .where(
+                and(
+                    inArray(roles.roleId, roleIds),
+                    eq(
+                        roleSiteResources.siteResourceId,
+                        resource.siteResourceId
+                    )
+                )
+            );
 
         const parsedSudoCommands: string[] = [];
         const parsedGroupsSet = new Set<string>();
@@ -379,13 +397,17 @@ export async function signSshKey(
             }
             try {
                 const grps = JSON.parse(roleRow?.sshUnixGroups ?? "[]");
-                if (Array.isArray(grps)) grps.forEach((g: string) => parsedGroupsSet.add(g));
+                if (Array.isArray(grps))
+                    grps.forEach((g: string) => parsedGroupsSet.add(g));
             } catch {
                 // skip
             }
             if (roleRow?.sshCreateHomeDir === true) homedir = true;
             const m = roleRow?.sshSudoMode ?? "none";
-            if (sudoModeOrder[m as keyof typeof sudoModeOrder] > sudoModeOrder[sudoMode]) {
+            if (
+                sudoModeOrder[m as keyof typeof sudoModeOrder] >
+                sudoModeOrder[sudoMode]
+            ) {
                 sudoMode = m as "none" | "commands" | "full";
             }
         }

server/routers/client/index.ts

@@ -10,3 +10,5 @@ export * from "./listUserDevices";
 export * from "./updateClient";
 export * from "./getClient";
 export * from "./createUserClient";
+export * from "./verifyClientAssociationsCache";
+export * from "./rebuildClientAssociationsCacheRoute";

server/routers/client/listClients.ts

@@ -1,15 +1,20 @@
 import {
+    clientLabels,
     clients,
     clientSitesAssociationsCache,
     currentFingerprint,
     db,
+    labels,
     olms,
     orgs,
     roleClients,
     sites,
     userClients,
-    users
+    users,
+    type Label
 } from "@server/db";
+import { isLicensedOrSubscribed } from "#dynamic/lib/isLicencedOrSubscribed";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import response from "@server/lib/response";
 import logger from "@server/logger";
 import { OpenAPITags, registry } from "@server/openApi";
@@ -169,6 +174,7 @@ type ClientWithSites = Awaited<ReturnType<typeof queryClientsBase>>[0] & {
         siteNiceId: string | null;
     }>;
     olmUpdateAvailable?: boolean;
+    labels?: Array<Pick<Label, "labelId" | "name" | "color">>;
 };
 
 type OlmWithUpdateAvailable = ClientWithSites;
@@ -255,6 +261,11 @@ export async function listClients(
             (client) => client.clientId
         );
 
+        const isLabelFeatureEnabled = await isLicensedOrSubscribed(
+            orgId,
+            tierMatrix.labels
+        );
+
         // Get client count with filter
         const conditions = [
             and(
@@ -288,18 +299,29 @@ export async function listClients(
         }
 
         if (query) {
-            conditions.push(
-                or(
-                    like(
-                        sql`LOWER(${clients.name})`,
-                        "%" + query.toLowerCase() + "%"
-                    ),
-                    like(
-                        sql`LOWER(${clients.niceId})`,
-                        "%" + query.toLowerCase() + "%"
+            const q = "%" + query.toLowerCase() + "%";
+            const queryList = [
+                like(sql`LOWER(${clients.name})`, q),
+                like(sql`LOWER(${clients.niceId})`, q)
+            ];
+
+            if (isLabelFeatureEnabled) {
+                queryList.push(
+                    inArray(
+                        clients.clientId,
+                        db
+                            .select({ id: clientLabels.clientId })
+                            .from(clientLabels)
+                            .innerJoin(
+                                labels,
+                                eq(labels.labelId, clientLabels.labelId)
+                            )
+                            .where(like(sql`LOWER(${labels.name})`, q))
                     )
-                )
-            );
+                );
+            }
+
+            conditions.push(or(...queryList));
         }
 
         const baseQuery = queryClientsBase().where(and(...conditions));
@@ -326,6 +348,30 @@ export async function listClients(
         const clientIds = clientsList.map((client) => client.clientId);
         const siteAssociations = await getSiteAssociations(clientIds);
 
+        let labelsForClients: Array<{
+            labelId: number;
+            name: string;
+            color: string;
+            clientId: number;
+        }> = [];
+
+        if (isLabelFeatureEnabled && clientIds.length > 0) {
+            labelsForClients = await db
+                .select({
+                    labelId: labels.labelId,
+                    name: labels.name,
+                    color: labels.color,
+                    clientId: clientLabels.clientId
+                })
+                .from(labels)
+                .innerJoin(
+                    clientLabels,
+                    eq(clientLabels.labelId, labels.labelId)
+                )
+                .where(inArray(clientLabels.clientId, clientIds))
+                .orderBy(asc(clientLabels.clientLabelId));
+        }
+
         // Group site associations by client ID
         const sitesByClient = siteAssociations.reduce(
             (acc, association) => {
@@ -353,7 +399,10 @@ export async function listClients(
         const clientsWithSites = clientsList.map((client) => {
             return {
                 ...client,
-                sites: sitesByClient[client.clientId] || []
+                sites: sitesByClient[client.clientId] || [],
+                labels: labelsForClients.filter(
+                    (l) => l.clientId === client.clientId
+                )
             };
         });
 

server/routers/client/rebuildClientAssociationsCacheRoute.ts

@@ -0,0 +1,81 @@
+import { Request, Response, NextFunction } from "express";
+import { z } from "zod";
+import { db } from "@server/db";
+import { clients } from "@server/db";
+import { eq } from "drizzle-orm";
+import response from "@server/lib/response";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import logger from "@server/logger";
+import { fromError } from "zod-validation-error";
+import { OpenAPITags, registry } from "@server/openApi";
+import { rebuildClientAssociationsFromClient } from "@server/lib/rebuildClientAssociations";
+
+const paramsSchema = z.strictObject({
+    clientId: z.string().transform(Number).pipe(z.int().positive())
+});
+
+registry.registerPath({
+    method: "post",
+    path: "/client/{clientId}/rebuild-associations-cache",
+    description:
+        "Rebuild the client's site/site-resource association cache based on current permissions.",
+    tags: [OpenAPITags.Client],
+    request: {
+        params: paramsSchema
+    },
+    responses: {}
+});
+
+export async function rebuildClientAssociationsCacheRoute(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const { clientId } = parsedParams.data;
+
+        const [client] = await db
+            .select()
+            .from(clients)
+            .where(eq(clients.clientId, clientId))
+            .limit(1);
+
+        if (!client) {
+            return next(
+                createHttpError(
+                    HttpCode.NOT_FOUND,
+                    `Client with ID ${clientId} not found`
+                )
+            );
+        }
+
+        await rebuildClientAssociationsFromClient(client);
+
+        return response(res, {
+            data: null,
+            success: true,
+            error: false,
+            message: "Client association cache rebuilt successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(
+                HttpCode.INTERNAL_SERVER_ERROR,
+                "Failed to rebuild client association cache"
+            )
+        );
+    }
+}

server/routers/client/verifyClientAssociationsCache.ts

@@ -0,0 +1,83 @@
+import { Request, Response, NextFunction } from "express";
+import { z } from "zod";
+import { db } from "@server/db";
+import { clients } from "@server/db";
+import { eq } from "drizzle-orm";
+import response from "@server/lib/response";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import logger from "@server/logger";
+import { fromError } from "zod-validation-error";
+import { OpenAPITags, registry } from "@server/openApi";
+import { verifyClientAssociationsCache as verifyClientAssociationsCacheLib } from "@server/lib/rebuildClientAssociations";
+
+const paramsSchema = z.strictObject({
+    clientId: z.string().transform(Number).pipe(z.int().positive())
+});
+
+registry.registerPath({
+    method: "get",
+    path: "/client/{clientId}/verify-associations-cache",
+    description:
+        "Read-only check of whether the client's site/site-resource association cache matches what the current permissions imply.",
+    tags: [OpenAPITags.Client],
+    request: {
+        params: paramsSchema
+    },
+    responses: {}
+});
+
+export async function verifyClientAssociationsCache(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const { clientId } = parsedParams.data;
+
+        const [client] = await db
+            .select()
+            .from(clients)
+            .where(eq(clients.clientId, clientId))
+            .limit(1);
+
+        if (!client) {
+            return next(
+                createHttpError(
+                    HttpCode.NOT_FOUND,
+                    `Client with ID ${clientId} not found`
+                )
+            );
+        }
+
+        const report = await verifyClientAssociationsCacheLib(client);
+
+        return response(res, {
+            data: report,
+            success: true,
+            error: false,
+            message: report.consistent
+                ? "Client association cache is consistent"
+                : "Client association cache is INCONSISTENT",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(
+                HttpCode.INTERNAL_SERVER_ERROR,
+                "Failed to verify client association cache"
+            )
+        );
+    }
+}

server/routers/gerbil/getAllRelays.ts

@@ -11,7 +11,7 @@ import {
     ExitNode
 } from "@server/db";
 import { db } from "@server/db";
-import { eq } from "drizzle-orm";
+import { eq, inArray } from "drizzle-orm";
 import HttpCode from "@server/types/HttpCode";
 import createHttpError from "http-errors";
 import logger from "@server/logger";
@@ -97,86 +97,119 @@ export async function generateRelayMappings(exitNode: ExitNode) {
         return {};
     }
 
+    // Filter to sites with the required fields up front so the rest of the
+    // function can safely treat endpoint/subnet/listenPort as defined.
+    const validSites = sitesRes.filter(
+        (s) => s.endpoint && s.subnet && s.listenPort
+    );
+
+    if (validSites.length === 0) {
+        return {};
+    }
+
+    const siteIds = validSites.map((s) => s.siteId);
+    const orgIds = Array.from(
+        new Set(
+            validSites
+                .map((s) => s.orgId)
+                .filter((id): id is NonNullable<typeof id> => id != null)
+        )
+    );
+
+    // Batch fetch all client-site associations for these sites in one query.
+    const clientSitesRes = siteIds.length
+        ? await db
+              .select()
+              .from(clientSitesAssociationsCache)
+              .where(inArray(clientSitesAssociationsCache.siteId, siteIds))
+        : [];
+
+    // Batch fetch all sites in the relevant orgs in one query (covers
+    // site-to-site communication for every site processed below).
+    const orgSitesRes = orgIds.length
+        ? await db.select().from(sites).where(inArray(sites.orgId, orgIds))
+        : [];
+
+    // Index org sites by orgId for O(1) lookup per site.
+    const sitesByOrg = new Map<string, typeof orgSitesRes>();
+    for (const peer of orgSitesRes) {
+        if (
+            peer.orgId == null ||
+            !peer.endpoint ||
+            !peer.subnet ||
+            !peer.listenPort
+        ) {
+            continue;
+        }
+        let arr = sitesByOrg.get(peer.orgId);
+        if (!arr) {
+            arr = [];
+            sitesByOrg.set(peer.orgId, arr);
+        }
+        arr.push(peer);
+    }
+
+    // Index client-site associations by siteId for O(1) lookup per site.
+    const clientSitesBySite = new Map<number, typeof clientSitesRes>();
+    for (const cs of clientSitesRes) {
+        let arr = clientSitesBySite.get(cs.siteId);
+        if (!arr) {
+            arr = [];
+            clientSitesBySite.set(cs.siteId, arr);
+        }
+        arr.push(cs);
+    }
+
     // Initialize mappings object for multi-peer support
     const mappings: { [key: string]: ProxyMapping } = {};
 
-    // Process each site
-    for (const site of sitesRes) {
-        if (!site.endpoint || !site.subnet || !site.listenPort) {
-            continue;
+    // Track destinations per endpoint to deduplicate in O(1).
+    const seen = new Map<string, Set<string>>();
+
+    const addDestination = (endpoint: string, dest: PeerDestination) => {
+        let destSet = seen.get(endpoint);
+        if (!destSet) {
+            destSet = new Set();
+            seen.set(endpoint, destSet);
+            mappings[endpoint] = { destinations: [] };
         }
-
-        // Find all clients associated with this site through clientSites
-        const clientSitesRes = await db
-            .select()
-            .from(clientSitesAssociationsCache)
-            .where(eq(clientSitesAssociationsCache.siteId, site.siteId));
-
-        for (const clientSite of clientSitesRes) {
-            if (!clientSite.endpoint) {
-                continue;
-            }
-
-            // Add this site as a destination for the client
-            if (!mappings[clientSite.endpoint]) {
-                mappings[clientSite.endpoint] = { destinations: [] };
-            }
-
-            // Add site as a destination for this client
-            const destination: PeerDestination = {
-                destinationIP: site.subnet.split("/")[0],
-                destinationPort: site.listenPort || 1 // this satisfies gerbil for now but should be reevaluated
-            };
-
-            // Check if this destination is already in the array to avoid duplicates
-            const isDuplicate = mappings[clientSite.endpoint].destinations.some(
-                (dest) =>
-                    dest.destinationIP === destination.destinationIP &&
-                    dest.destinationPort === destination.destinationPort
-            );
-
-            if (!isDuplicate) {
-                mappings[clientSite.endpoint].destinations.push(destination);
-            }
+        const key = `${dest.destinationIP}:${dest.destinationPort}`;
+        if (!destSet.has(key)) {
+            destSet.add(key);
+            mappings[endpoint].destinations.push(dest);
         }
+    };
 
-        // Also handle site-to-site communication (all sites in the same org)
-        if (site.orgId) {
-            const orgSites = await db
-                .select()
-                .from(sites)
-                .where(eq(sites.orgId, site.orgId));
+    // Process each site using the pre-fetched data.
+    for (const site of validSites) {
+        const siteDestination: PeerDestination = {
+            destinationIP: site.subnet!.split("/")[0],
+            destinationPort: site.listenPort! || 1 // this satisfies gerbil for now but should be reevaluated
+        };
 
-            for (const peer of orgSites) {
-                // Skip self
-                if (
-                    peer.siteId === site.siteId ||
-                    !peer.endpoint ||
-                    !peer.subnet ||
-                    !peer.listenPort
-                ) {
+        // Add this site as a destination for each associated client.
+        const clientSites = clientSitesBySite.get(site.siteId);
+        if (clientSites) {
+            for (const clientSite of clientSites) {
+                if (!clientSite.endpoint) {
                     continue;
                 }
+                addDestination(clientSite.endpoint, siteDestination);
+            }
+        }
 
-                // Add peer site as a destination for this site
-                if (!mappings[site.endpoint]) {
-                    mappings[site.endpoint] = { destinations: [] };
-                }
-
-                const destination: PeerDestination = {
-                    destinationIP: peer.subnet.split("/")[0],
-                    destinationPort: peer.listenPort || 1 // this satisfies gerbil for now but should be reevaluated
-                };
-
-                // Check for duplicates
-                const isDuplicate = mappings[site.endpoint].destinations.some(
-                    (dest) =>
-                        dest.destinationIP === destination.destinationIP &&
-                        dest.destinationPort === destination.destinationPort
-                );
-
-                if (!isDuplicate) {
-                    mappings[site.endpoint].destinations.push(destination);
+        // Site-to-site communication (all sites in the same org).
+        if (site.orgId != null) {
+            const peers = sitesByOrg.get(site.orgId);
+            if (peers) {
+                for (const peer of peers) {
+                    if (peer.siteId === site.siteId) {
+                        continue;
+                    }
+                    addDestination(site.endpoint!, {
+                        destinationIP: peer.subnet!.split("/")[0],
+                        destinationPort: peer.listenPort! || 1 // this satisfies gerbil for now but should be reevaluated
+                    });
                 }
             }
         }

server/routers/gerbil/updateHolePunch.ts

@@ -11,7 +11,7 @@ import {
     ExitNode
 } from "@server/db";
 import { db } from "@server/db";
-import { eq, and } from "drizzle-orm";
+import { eq, and, inArray } from "drizzle-orm";
 import HttpCode from "@server/types/HttpCode";
 import createHttpError from "http-errors";
 import logger from "@server/logger";
@@ -185,16 +185,20 @@ export async function updateAndGenerateEndpointDestinations(
         const sitesOnExitNode = await db
             .select({
                 siteId: sites.siteId,
+                newtId: newts.newtId,
                 subnet: sites.subnet,
                 listenPort: sites.listenPort,
                 publicKey: sites.publicKey,
-                endpoint: clientSitesAssociationsCache.endpoint
+                endpoint: clientSitesAssociationsCache.endpoint,
+                isRelayed: clientSitesAssociationsCache.isRelayed,
+                isJitMode: clientSitesAssociationsCache.isJitMode
             })
             .from(sites)
             .innerJoin(
                 clientSitesAssociationsCache,
                 eq(sites.siteId, clientSitesAssociationsCache.siteId)
             )
+            .innerJoin(newts, eq(sites.siteId, newts.siteId))
             .where(
                 and(
                     eq(sites.exitNodeId, exitNode.exitNodeId),
@@ -202,24 +206,36 @@ export async function updateAndGenerateEndpointDestinations(
                 )
             );
 
-        // Update clientSites for each site on this exit node
+        // Format the endpoint properly for both IPv4 and IPv6
+        const formattedEndpoint = formatEndpoint(ip, port);
+
+        // Determine which rows actually need updating and whether the endpoint
+        // (as opposed to only the publicKey) changed for any of them.
+        const siteIdsToUpdate: number[] = [];
+        const sitesWithNewtsToUpdate: { siteId: number; newtId: string }[] = [];
+        let endpointChanged = false;
         for (const site of sitesOnExitNode) {
-            // logger.debug(
-            //     `Updating site ${site.siteId} on exit node ${exitNode.exitNodeId}`
-            // );
-
-            // Format the endpoint properly for both IPv4 and IPv6
-            const formattedEndpoint = formatEndpoint(ip, port);
-
-            // if the public key or endpoint has changed, update it otherwise continue
             if (
                 site.endpoint === formattedEndpoint &&
                 site.publicKey === publicKey
             ) {
                 continue;
             }
+            siteIdsToUpdate.push(site.siteId);
+            if (!site.isRelayed && !site.isJitMode) {
+                sitesWithNewtsToUpdate.push({
+                    siteId: site.siteId,
+                    newtId: site.newtId
+                });
+            }
+            if (site.endpoint !== formattedEndpoint) {
+                endpointChanged = true;
+            }
+        }
 
-            const [updatedClientSitesAssociationsCache] = await db
+        if (siteIdsToUpdate.length > 0) {
+            // Single bulk update for all affected rows for this client on this exit node
+            await db
                 .update(clientSitesAssociationsCache)
                 .set({
                     endpoint: formattedEndpoint,
@@ -228,24 +244,30 @@ export async function updateAndGenerateEndpointDestinations(
                 .where(
                     and(
                         eq(clientSitesAssociationsCache.clientId, olm.clientId),
-                        eq(clientSitesAssociationsCache.siteId, site.siteId)
+                        inArray(
+                            clientSitesAssociationsCache.siteId,
+                            siteIdsToUpdate
+                        )
                     )
-                )
-                .returning();
+                );
 
-            if (
-                updatedClientSitesAssociationsCache.endpoint !==
-                    site.endpoint && // this is the endpoint from the join table not the site
-                updatedClient.pubKey === publicKey // only trigger if the client's public key matches the current public key which means it has registered so we dont prematurely send the update
-            ) {
+            // Only trigger downstream peer updates once per hole punch: the
+            // endpoint is the same for every site on this exit node, and
+            // handleClientEndpointChange already fans out to all connected
+            // sites for this client.
+            if (endpointChanged && updatedClient.pubKey === publicKey) {
                 logger.info(
-                    `ClientSitesAssociationsCache for client ${olm.clientId} and site ${site.siteId} endpoint changed from ${site.endpoint} to ${updatedClientSitesAssociationsCache.endpoint}`
+                    `ClientSitesAssociationsCache for client ${olm.clientId} endpoint changed to ${formattedEndpoint} for ${siteIdsToUpdate.length} site(s) on exit node ${exitNode.exitNodeId}`
                 );
-                // Handle any additional logic for endpoint change
                 handleClientEndpointChange(
+                    sitesWithNewtsToUpdate,
                     olm.clientId,
-                    updatedClientSitesAssociationsCache.endpoint!
-                );
+                    formattedEndpoint
+                ).catch((error) => {
+                    logger.error(
+                        `Failed to handle client endpoint change for client ${olm.clientId}: ${error}`
+                    );
+                });
             }
         }
 
@@ -336,59 +358,14 @@ export async function updateAndGenerateEndpointDestinations(
                 `Site ${newt.siteId} endpoint changed from ${site.endpoint} to ${updatedSite.endpoint}`
             );
             // Handle any additional logic for endpoint change
-            handleSiteEndpointChange(newt.siteId, updatedSite.endpoint!);
+            handleSiteEndpointChange(newt.siteId, updatedSite.endpoint!).catch(
+                (error) => {
+                    logger.error(
+                        `Failed to handle site endpoint change for site ${newt.siteId}: ${error}`
+                    );
+                }
+            );
         }
-
-        // if (!updatedSite || !updatedSite.subnet) {
-        //     logger.warn(`Site not found: ${newt.siteId}`);
-        //     throw new Error("Site not found");
-        // }
-
-        // Find all clients that connect to this site
-        // const sitesClientPairs = await db
-        //     .select()
-        //     .from(clientSites)
-        //     .where(eq(clientSites.siteId, newt.siteId));
-
-        // THE NEWT IS NOT SENDING RAW WG TO THE GERBIL SO IDK IF WE REALLY NEED THIS - REMOVING
-        // Get client details for each client
-        // for (const pair of sitesClientPairs) {
-        //     const [client] = await db
-        //         .select()
-        //         .from(clients)
-        //         .where(eq(clients.clientId, pair.clientId));
-
-        //     if (client && client.endpoint) {
-        //         const [host, portStr] = client.endpoint.split(':');
-        //         if (host && portStr) {
-        //             destinations.push({
-        //                 destinationIP: host,
-        //                 destinationPort: parseInt(portStr, 10)
-        //             });
-        //         }
-        //     }
-        // }
-
-        // If this is a newt/site, also add other sites in the same org
-        //     if (updatedSite.orgId) {
-        //         const orgSites = await db
-        //             .select()
-        //             .from(sites)
-        //             .where(eq(sites.orgId, updatedSite.orgId));
-
-        //         for (const site of orgSites) {
-        //             // Don't add the current site to the destinations
-        //             if (site.siteId !== currentSiteId && site.subnet && site.endpoint && site.listenPort) {
-        //                 const [host, portStr] = site.endpoint.split(':');
-        //                 if (host && portStr) {
-        //                     destinations.push({
-        //                         destinationIP: host,
-        //                         destinationPort: site.listenPort
-        //                     });
-        //                 }
-        //             }
-        //         }
-        //     }
     }
     return destinations;
 }
@@ -408,12 +385,14 @@ async function handleSiteEndpointChange(siteId: number, newEndpoint: string) {
             return;
         }
 
-        // Get all non-relayed clients connected to this site
+        // Get all non-relayed and not jit clients connected to this site
         const connectedClients = await db
             .select({
+                online: clients.online,
                 clientId: clients.clientId,
                 olmId: olms.olmId,
-                isRelayed: clientSitesAssociationsCache.isRelayed
+                isRelayed: clientSitesAssociationsCache.isRelayed,
+                isJitMode: clientSitesAssociationsCache.isJitMode
             })
             .from(clientSitesAssociationsCache)
             .innerJoin(
@@ -423,32 +402,36 @@ async function handleSiteEndpointChange(siteId: number, newEndpoint: string) {
             .innerJoin(olms, eq(olms.clientId, clients.clientId))
             .where(
                 and(
+                    eq(clients.online, true), // the client has to be online or it does not matter...
                     eq(clientSitesAssociationsCache.siteId, siteId),
-                    eq(clientSitesAssociationsCache.isRelayed, false)
+                    eq(clientSitesAssociationsCache.isRelayed, false),
+                    eq(clientSitesAssociationsCache.isJitMode, false)
                 )
             );
 
-        // Update each non-relayed client with the new site endpoint
-        for (const client of connectedClients) {
-            try {
-                await updateOlmPeer(
-                    client.clientId,
-                    {
-                        siteId: siteId,
-                        publicKey: site.publicKey,
-                        endpoint: newEndpoint
-                    },
-                    client.olmId
-                );
-                logger.debug(
-                    `Updated client ${client.clientId} with new site ${siteId} endpoint: ${newEndpoint}`
-                );
-            } catch (error) {
-                logger.error(
-                    `Failed to update client ${client.clientId} with new site endpoint: ${error}`
-                );
-            }
-        }
+        // Update each non-relayed client with the new site endpoint (in parallel)
+        await Promise.allSettled(
+            connectedClients.map(async (client) => {
+                try {
+                    await updateOlmPeer(
+                        client.clientId,
+                        {
+                            siteId: siteId,
+                            publicKey: site.publicKey!,
+                            endpoint: newEndpoint
+                        },
+                        client.olmId
+                    );
+                    logger.debug(
+                        `Updated client ${client.clientId} with new site ${siteId} endpoint: ${newEndpoint}`
+                    );
+                } catch (error) {
+                    logger.error(
+                        `Failed to update client ${client.clientId} with new site endpoint: ${error}`
+                    );
+                }
+            })
+        );
     } catch (error) {
         logger.error(
             `Error handling site endpoint change for site ${siteId}: ${error}`
@@ -457,10 +440,11 @@ async function handleSiteEndpointChange(siteId: number, newEndpoint: string) {
 }
 
 async function handleClientEndpointChange(
+    sitesWithNewtsToUpdate: { siteId: number; newtId: string }[],
     clientId: number,
     newEndpoint: string
 ) {
-    // Alert all sites connected to this client that the endpoint has changed (only if NOT relayed)
+    // Alert all sites connected to this client that the endpoint has changed (only if NOT relayed and NOT JIT MODE)
     try {
         // Get client details
         const [client] = await db
@@ -474,58 +458,42 @@ async function handleClientEndpointChange(
             return;
         }
 
-        // Get all non-relayed sites connected to this client
-        const connectedSites = await db
-            .select({
-                siteId: sites.siteId,
-                newtId: newts.newtId,
-                isRelayed: clientSitesAssociationsCache.isRelayed,
-                subnet: clients.subnet
-            })
-            .from(clientSitesAssociationsCache)
-            .innerJoin(
-                sites,
-                eq(clientSitesAssociationsCache.siteId, sites.siteId)
-            )
-            .innerJoin(newts, eq(newts.siteId, sites.siteId))
-            .innerJoin(
-                clients,
-                eq(clientSitesAssociationsCache.clientId, clients.clientId)
-            )
-            .where(
-                and(
-                    eq(clientSitesAssociationsCache.clientId, clientId),
-                    eq(clientSitesAssociationsCache.isRelayed, false)
-                )
+        if (sitesWithNewtsToUpdate.length > 250) {
+            logger.warn(
+                `Client ${clientId} has ${sitesWithNewtsToUpdate.length} connected sites so the client will be in jit mode anyway, skipping endpoint updates`
             );
+            return;
+        }
 
-        // Update each non-relayed site with the new client endpoint
-        for (const siteData of connectedSites) {
-            try {
-                if (!siteData.subnet) {
+        // Update each non-relayed site with the new client endpoint (in parallel)
+        await Promise.allSettled(
+            sitesWithNewtsToUpdate.map(async ({ siteId, newtId }) => {
+                if (!client.pubKey) {
                     logger.warn(
-                        `Client ${clientId} has no subnet, skipping update for site ${siteData.siteId}`
+                        `Client ${clientId} has no public key, skipping update for site ${siteId}`
                     );
-                    continue;
+                    return;
                 }
 
-                await updateNewtPeer(
-                    siteData.siteId,
-                    client.pubKey,
-                    {
-                        endpoint: newEndpoint
-                    },
-                    siteData.newtId
-                );
-                logger.debug(
-                    `Updated site ${siteData.siteId} with new client ${clientId} endpoint: ${newEndpoint}`
-                );
-            } catch (error) {
-                logger.error(
-                    `Failed to update site ${siteData.siteId} with new client endpoint: ${error}`
-                );
-            }
-        }
+                try {
+                    await updateNewtPeer(
+                        siteId,
+                        client.pubKey,
+                        {
+                            endpoint: newEndpoint
+                        },
+                        newtId
+                    );
+                    logger.debug(
+                        `Updated site ${siteId} with new client ${clientId} endpoint: ${newEndpoint}`
+                    );
+                } catch (error) {
+                    logger.error(
+                        `Failed to update site ${siteId} with new client endpoint: ${error}`
+                    );
+                }
+            })
+        );
     } catch (error) {
         logger.error(
             `Error handling client endpoint change for client ${clientId}: ${error}`

server/routers/labels/types.ts

@@ -0,0 +1,10 @@
+import type { Label } from "@server/db";
+import type { PaginatedResponse } from "@server/types/Pagination";
+
+export type ListOrgLabelsResponse = PaginatedResponse<{
+    labels: Omit<Label, "orgId">[];
+}>;
+
+export type CreateOrEditLabelResponse = {
+    label: Label;
+};

server/routers/olm/buildConfiguration.ts

@@ -5,6 +5,7 @@ import {
     db,
     exitNodes,
     networks,
+    SiteResource,
     siteNetworks,
     siteResources,
     sites
@@ -15,7 +16,7 @@ import {
     generateRemoteSubnets
 } from "@server/lib/ip";
 import logger from "@server/logger";
-import { and, eq } from "drizzle-orm";
+import { eq, inArray } from "drizzle-orm";
 import { addPeer, deletePeer } from "../newt/peers";
 import config from "@server/lib/config";
 
@@ -27,11 +28,11 @@ export async function buildSiteConfigurationForOlmClient(
 ) {
     const siteConfigurations: {
         siteId: number;
-        name?: string
-        endpoint?: string
-        publicKey?: string
-        serverIP?: string | null
-        serverPort?: number | null
+        name?: string;
+        endpoint?: string;
+        publicKey?: string;
+        serverIP?: string | null;
+        serverPort?: number | null;
         remoteSubnets?: string[];
         aliases: Alias[];
     }[] = [];
@@ -46,50 +47,79 @@ export async function buildSiteConfigurationForOlmClient(
         )
         .where(eq(clientSitesAssociationsCache.clientId, client.clientId));
 
+    if (sitesData.length === 0) {
+        return siteConfigurations;
+    }
+
+    // Batch-fetch every site resource this client has access to across ALL sites
+    // in a single query, then group by siteId in memory. This avoids issuing one
+    // query per site (which would be N round-trips for N sites).
+    const allClientSiteResources = await db
+        .select({
+            siteResource: siteResources,
+            siteId: siteNetworks.siteId
+        })
+        .from(siteResources)
+        .innerJoin(
+            clientSiteResourcesAssociationsCache,
+            eq(
+                siteResources.siteResourceId,
+                clientSiteResourcesAssociationsCache.siteResourceId
+            )
+        )
+        .innerJoin(networks, eq(siteResources.networkId, networks.networkId))
+        .innerJoin(siteNetworks, eq(networks.networkId, siteNetworks.networkId))
+        .where(
+            eq(clientSiteResourcesAssociationsCache.clientId, client.clientId)
+        );
+
+    const siteResourcesBySiteId = new Map<number, SiteResource[]>();
+    for (const row of allClientSiteResources) {
+        const arr = siteResourcesBySiteId.get(row.siteId);
+        if (arr) {
+            arr.push(row.siteResource);
+        } else {
+            siteResourcesBySiteId.set(row.siteId, [row.siteResource]);
+        }
+    }
+
+    // Batch-fetch exit nodes for all sites in one query (only needed in relay mode).
+    const exitNodesById = new Map<number, typeof exitNodes.$inferSelect>();
+    if (!jitMode && relay) {
+        const exitNodeIds = Array.from(
+            new Set(
+                sitesData
+                    .map(({ sites: s }) => s.exitNodeId)
+                    .filter((id): id is number => id != null)
+            )
+        );
+        if (exitNodeIds.length > 0) {
+            const nodes = await db
+                .select()
+                .from(exitNodes)
+                .where(inArray(exitNodes.exitNodeId, exitNodeIds));
+            for (const n of nodes) {
+                exitNodesById.set(n.exitNodeId, n);
+            }
+        }
+    }
+
+    const clientsStartPort = config.getRawConfig().gerbil.clients_start_port;
+    const peerOps: Promise<unknown>[] = [];
+
     // Process each site
     for (const {
         sites: site,
         clientSitesAssociationsCache: association
     } of sitesData) {
-        const allSiteResources = await db // only get the site resources that this client has access to
-            .select()
-            .from(siteResources)
-            .innerJoin(
-                clientSiteResourcesAssociationsCache,
-                eq(
-                    siteResources.siteResourceId,
-                    clientSiteResourcesAssociationsCache.siteResourceId
-                )
-            )
-            .innerJoin(
-                networks,
-                eq(siteResources.networkId, networks.networkId)
-            )
-            .innerJoin(
-                siteNetworks,
-                eq(networks.networkId, siteNetworks.networkId)
-            )
-            .where(
-                and(
-                    eq(siteNetworks.siteId, site.siteId),
-                    eq(
-                        clientSiteResourcesAssociationsCache.clientId,
-                        client.clientId
-                    )
-                )
-            );
-
+        const allSiteResources = siteResourcesBySiteId.get(site.siteId) ?? [];
 
         if (jitMode) {
             // Add site configuration to the array
             siteConfigurations.push({
                 siteId: site.siteId,
-                // remoteSubnets: generateRemoteSubnets(
-                //     allSiteResources.map(({ siteResources }) => siteResources)
-                // ),
-                aliases: generateAliasConfig(
-                    allSiteResources.map(({ siteResources }) => siteResources)
-                )
+                // remoteSubnets: generateRemoteSubnets(allSiteResources),
+                aliases: generateAliasConfig(allSiteResources)
             });
             continue;
         }
@@ -109,10 +139,9 @@ export async function buildSiteConfigurationForOlmClient(
             continue;
         }
 
-        if (!site.publicKey || site.publicKey == "") { // the site is not ready to accept new peers
-            logger.warn(
-                `Site ${site.siteId} has no public key, skipping`
-            );
+        if (!site.publicKey || site.publicKey == "") {
+            // the site is not ready to accept new peers
+            logger.warn(`Site ${site.siteId} has no public key, skipping`);
             continue;
         }
 
@@ -128,7 +157,7 @@ export async function buildSiteConfigurationForOlmClient(
             logger.info(
                 `Public key mismatch. Deleting old peer from site ${site.siteId}...`
             );
-            await deletePeer(site.siteId, client.pubKey!);
+            peerOps.push(deletePeer(site.siteId, client.pubKey!));
         }
 
         if (!site.subnet) {
@@ -136,27 +165,19 @@ export async function buildSiteConfigurationForOlmClient(
             continue;
         }
 
-        const [clientSite] = await db
-            .select()
-            .from(clientSitesAssociationsCache)
-            .where(
-                and(
-                    eq(clientSitesAssociationsCache.clientId, client.clientId),
-                    eq(clientSitesAssociationsCache.siteId, site.siteId)
-                )
-            )
-            .limit(1);
-
-        // Add the peer to the exit node for this site
-        if (clientSite.endpoint && publicKey) {
+        // Add the peer to the exit node for this site. The endpoint comes from
+        // the already-joined association row above, so no extra query needed.
+        if (association.endpoint && publicKey) {
             logger.info(
-                `Adding peer ${publicKey} to site ${site.siteId} with endpoint ${clientSite.endpoint}`
+                `Adding peer ${publicKey} to site ${site.siteId} with endpoint ${association.endpoint}`
+            );
+            peerOps.push(
+                addPeer(site.siteId, {
+                    publicKey: publicKey,
+                    allowedIps: [`${client.subnet.split("/")[0]}/32`], // we want to only allow from that client
+                    endpoint: relay ? "" : association.endpoint
+                })
             );
-            await addPeer(site.siteId, {
-                publicKey: publicKey,
-                allowedIps: [`${client.subnet.split("/")[0]}/32`], // we want to only allow from that client
-                endpoint: relay ? "" : clientSite.endpoint
-            });
         } else {
             logger.warn(
                 `Client ${client.clientId} has no endpoint, skipping peer addition`
@@ -165,16 +186,12 @@ export async function buildSiteConfigurationForOlmClient(
 
         let relayEndpoint: string | undefined = undefined;
         if (relay) {
-            const [exitNode] = await db
-                .select()
-                .from(exitNodes)
-                .where(eq(exitNodes.exitNodeId, site.exitNodeId))
-                .limit(1);
+            const exitNode = exitNodesById.get(site.exitNodeId);
             if (!exitNode) {
                 logger.warn(`Exit node not found for site ${site.siteId}`);
                 continue;
             }
-            relayEndpoint = `${exitNode.endpoint}:${config.getRawConfig().gerbil.clients_start_port}`;
+            relayEndpoint = `${exitNode.endpoint}:${clientsStartPort}`;
         }
 
         // Add site configuration to the array
@@ -186,12 +203,16 @@ export async function buildSiteConfigurationForOlmClient(
             publicKey: site.publicKey,
             serverIP: site.address,
             serverPort: site.listenPort,
-            remoteSubnets: generateRemoteSubnets(
-                allSiteResources.map(({ siteResources }) => siteResources)
-            ),
-            aliases: generateAliasConfig(
-                allSiteResources.map(({ siteResources }) => siteResources)
-            )
+            remoteSubnets: generateRemoteSubnets(allSiteResources),
+            aliases: generateAliasConfig(allSiteResources)
+        });
+    }
+
+    // Run all peer add/delete operations concurrently rather than serially per
+    // site, so total time is bounded by the slowest call instead of the sum.
+    if (peerOps.length > 0) {
+        Promise.allSettled(peerOps).catch((err) => {
+            logger.error("Error processing peer operations: ", err);
         });
     }
 

server/routers/olm/getOlmToken.ts

@@ -8,7 +8,7 @@ import {
     ExitNode,
     exitNodes,
     sites,
-    clientSitesAssociationsCache,
+    clientSitesAssociationsCache
 } from "@server/db";
 import { olms } from "@server/db";
 import HttpCode from "@server/types/HttpCode";
@@ -28,6 +28,7 @@ import { verifyPassword } from "@server/auth/password";
 import logger from "@server/logger";
 import config from "@server/lib/config";
 import { APP_VERSION } from "@server/lib/consts";
+import { build } from "@server/build";
 
 export const olmGetTokenBodySchema = z.object({
     olmId: z.string(),
@@ -220,6 +221,22 @@ export async function getOlmToken(
             )
             .where(eq(clientSitesAssociationsCache.clientId, clientIdToUse!));
 
+        if (clientSites.length > 250 && build == "saas") {
+            // set all of the cache rows isJitMode to true
+            await db
+                .update(clientSitesAssociationsCache)
+                .set({ isJitMode: true })
+                .where(
+                    and(
+                        eq(
+                            clientSitesAssociationsCache.clientId,
+                            clientIdToUse!
+                        ),
+                        eq(clientSitesAssociationsCache.isJitMode, false)
+                    )
+                );
+        }
+
         // Extract unique exit node IDs
         const exitNodeIds = Array.from(
             new Set(

server/routers/olm/handleOlmRegisterMessage.ts

@@ -1,4 +1,4 @@
-import { db, orgs } from "@server/db";
+import { db, orgs, primaryDb } from "@server/db";
 import { MessageHandler } from "@server/routers/ws";
 import {
     clients,
@@ -7,7 +7,7 @@ import {
     olms,
     sites
 } from "@server/db";
-import { count, eq } from "drizzle-orm";
+import { and, count, eq, ne, or } from "drizzle-orm";
 import logger from "@server/logger";
 import { checkOrgAccessPolicy } from "#dynamic/lib/checkOrgAccessPolicy";
 import { validateSessionToken } from "@server/auth/sessions/app";
@@ -81,7 +81,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
             .where(eq(olms.olmId, olm.olmId));
     }
 
-    const [client] = await db
+    const [client] = await primaryDb // read from the primary here so there is no latency with the last update on the holepunch
         .select()
         .from(clients)
         .where(eq(clients.clientId, olm.clientId))
@@ -98,7 +98,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
     if (client.blocked) {
         logger.debug(
             `[handleOlmRegisterMessage] Client ${client.clientId} is blocked. Ignoring register.`,
-            { orgId: client.orgId }
+            { orgId: client.orgId, clientId: client.clientId }
         );
         sendOlmError(OlmErrorCodes.CLIENT_BLOCKED, olm.olmId);
         return;
@@ -107,7 +107,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
     if (client.approvalState == "pending") {
         logger.debug(
             `[handleOlmRegisterMessage] Client ${client.clientId} approval is pending. Ignoring register.`,
-            { orgId: client.orgId }
+            { orgId: client.orgId, clientId: client.clientId }
         );
         sendOlmError(OlmErrorCodes.CLIENT_PENDING, olm.olmId);
         return;
@@ -136,7 +136,8 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
 
     if (!org) {
         logger.warn("[handleOlmRegisterMessage] Org not found", {
-            orgId: client.orgId
+            orgId: client.orgId,
+            clientId: client.clientId
         });
         sendOlmError(OlmErrorCodes.ORG_NOT_FOUND, olm.olmId);
         return;
@@ -145,7 +146,8 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
     if (orgId) {
         if (!olm.userId) {
             logger.warn("[handleOlmRegisterMessage] Olm has no user ID", {
-                orgId: client.orgId
+                orgId: client.orgId,
+                clientId: client.clientId
             });
             sendOlmError(OlmErrorCodes.USER_ID_NOT_FOUND, olm.olmId);
             return;
@@ -156,7 +158,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
         if (!userSession || !user) {
             logger.warn(
                 "[handleOlmRegisterMessage] Invalid user session for olm register",
-                { orgId: client.orgId }
+                { orgId: client.orgId, clientId: client.clientId }
             );
             sendOlmError(OlmErrorCodes.INVALID_USER_SESSION, olm.olmId);
             return;
@@ -164,7 +166,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
         if (user.userId !== olm.userId) {
             logger.warn(
                 "[handleOlmRegisterMessage] User ID mismatch for olm register",
-                { orgId: client.orgId }
+                { orgId: client.orgId, clientId: client.clientId }
             );
             sendOlmError(OlmErrorCodes.USER_ID_MISMATCH, olm.olmId);
             return;
@@ -182,13 +184,14 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
 
         logger.debug("[handleOlmRegisterMessage] Policy check result", {
             orgId: client.orgId,
+            clientId: client.clientId,
             policyCheck
         });
 
         if (policyCheck?.error) {
             logger.error(
                 `[handleOlmRegisterMessage] Error checking access policies for olm user ${olm.userId} in org ${orgId}: ${policyCheck?.error}`,
-                { orgId: client.orgId }
+                { orgId: client.orgId, clientId: client.clientId }
             );
             sendOlmError(OlmErrorCodes.ORG_ACCESS_POLICY_DENIED, olm.olmId);
             return;
@@ -197,7 +200,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
         if (policyCheck.policies?.passwordAge?.compliant === false) {
             logger.warn(
                 `[handleOlmRegisterMessage] Olm user ${olm.userId} has non-compliant password age for org ${orgId}`,
-                { orgId: client.orgId }
+                { orgId: client.orgId, clientId: client.clientId }
             );
             sendOlmError(
                 OlmErrorCodes.ORG_ACCESS_POLICY_PASSWORD_EXPIRED,
@@ -209,7 +212,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
         ) {
             logger.warn(
                 `[handleOlmRegisterMessage] Olm user ${olm.userId} has non-compliant session length for org ${orgId}`,
-                { orgId: client.orgId }
+                { orgId: client.orgId, clientId: client.clientId }
             );
             sendOlmError(
                 OlmErrorCodes.ORG_ACCESS_POLICY_SESSION_EXPIRED,
@@ -219,7 +222,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
         } else if (policyCheck.policies?.requiredTwoFactor === false) {
             logger.warn(
                 `[handleOlmRegisterMessage] Olm user ${olm.userId} does not have 2FA enabled for org ${orgId}`,
-                { orgId: client.orgId }
+                { orgId: client.orgId, clientId: client.clientId }
             );
             sendOlmError(
                 OlmErrorCodes.ORG_ACCESS_POLICY_2FA_REQUIRED,
@@ -229,7 +232,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
         } else if (!policyCheck.allowed) {
             logger.warn(
                 `[handleOlmRegisterMessage] Olm user ${olm.userId} does not pass access policies for org ${orgId}: ${policyCheck.error}`,
-                { orgId: client.orgId }
+                { orgId: client.orgId, clientId: client.clientId }
             );
             sendOlmError(OlmErrorCodes.ORG_ACCESS_POLICY_DENIED, olm.olmId);
             return;
@@ -253,7 +256,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
     // Prepare an array to store site configurations
     logger.debug(
         `[handleOlmRegisterMessage] Found ${sitesCount} sites for client ${client.clientId}`,
-        { orgId: client.orgId }
+        { orgId: client.orgId, clientId: client.clientId }
     );
 
     let jitMode = false;
@@ -263,19 +266,20 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
         // If we have too many sites we need to drop into fully JIT mode by not sending any of the sites
         logger.info(
             `[handleOlmRegisterMessage] Too many sites (${sitesCount}), dropping into JIT mode`,
-            { orgId: client.orgId }
+            { orgId: client.orgId, clientId: client.clientId }
         );
         jitMode = true;
     }
 
     logger.debug(
         `[handleOlmRegisterMessage] Olm client ID: ${client.clientId}, Public Key: ${publicKey}, Relay: ${relay}`,
-        { orgId: client.orgId }
+        { orgId: client.orgId, clientId: client.clientId }
     );
 
     if (!publicKey) {
         logger.warn("[handleOlmRegisterMessage] Public key not provided", {
-            orgId: client.orgId
+            orgId: client.orgId,
+            clientId: client.clientId
         });
         return;
     }
@@ -283,7 +287,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
     if (client.pubKey !== publicKey || client.archived) {
         logger.info(
             "[handleOlmRegisterMessage] Public key mismatch. Updating public key and clearing session info...",
-            { orgId: client.orgId }
+            { orgId: client.orgId, clientId: client.clientId }
         );
         // Update the client's public key
         await db
@@ -301,7 +305,18 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
                 isRelayed: relay == true,
                 isJitMode: jitMode
             })
-            .where(eq(clientSitesAssociationsCache.clientId, client.clientId));
+            .where(
+                and(
+                    eq(clientSitesAssociationsCache.clientId, client.clientId),
+                    or(
+                        ne(
+                            clientSitesAssociationsCache.isRelayed,
+                            relay == true
+                        ),
+                        ne(clientSitesAssociationsCache.isJitMode, jitMode)
+                    )
+                )
+            );
     }
 
     // this prevents us from accepting a register from an olm that has not hole punched yet.
@@ -310,7 +325,7 @@ export const handleOlmRegisterMessage: MessageHandler = async (context) => {
     if (now - (client.lastHolePunch || 0) > 5 && sitesCount > 0) {
         logger.warn(
             `[handleOlmRegisterMessage] Client last hole punch is too old and we have sites to send; skipping this register. The client is failing to hole punch and identify its network address with the server. Can the client reach the server on UDP port ${config.getRawConfig().gerbil.clients_start_port}?`,
-            { orgId: client.orgId }
+            { orgId: client.orgId, clientId: client.clientId }
         );
         return;
     }

server/routers/olm/handleOlmServerInitAddPeerHandshake.ts

@@ -17,7 +17,7 @@ import { initPeerAddHandshake } from "./peers";
 export const handleOlmServerInitAddPeerHandshake: MessageHandler = async (
     context
 ) => {
-    logger.info("Handling register olm message!");
+    logger.info("Handle Olm Server Init Add Peer Handshake Message");
     const { message, client: c, sendToClient } = context;
     const olm = c as Olm;
 

server/routers/olm/sync.ts

@@ -9,16 +9,50 @@ import {
 import { buildSiteConfigurationForOlmClient } from "./buildConfiguration";
 import { sendToClient } from "#dynamic/routers/ws";
 import logger from "@server/logger";
-import { eq, inArray } from "drizzle-orm";
+import { count, eq, inArray } from "drizzle-orm";
 import config from "@server/lib/config";
 import { canCompress } from "@server/lib/clientVersionChecks";
+import { build } from "@server/build";
 
 export async function sendOlmSyncMessage(olm: Olm, client: Client) {
+    // Get all sites data
+    const sitesCountResult = await db
+        .select({ count: count() })
+        .from(sites)
+        .innerJoin(
+            clientSitesAssociationsCache,
+            eq(sites.siteId, clientSitesAssociationsCache.siteId)
+        )
+        .where(eq(clientSitesAssociationsCache.clientId, client.clientId));
+
+    // Extract the count value from the result array
+    const sitesCount =
+        sitesCountResult.length > 0 ? sitesCountResult[0].count : 0;
+
+    // Prepare an array to store site configurations
+    logger.debug(
+        `[handleOlmRegisterMessage] Found ${sitesCount} sites for client ${client.clientId}`,
+        { orgId: client.orgId }
+    );
+
+    let jitMode = false;
+    if (sitesCount > 250 && build == "saas") {
+        // THIS IS THE MAX ON THE BUSINESS TIER
+        // we have too many sites
+        // If we have too many sites we need to drop into fully JIT mode by not sending any of the sites
+        logger.info(
+            `[handleOlmRegisterMessage] Too many sites (${sitesCount}), dropping into JIT mode`,
+            { orgId: client.orgId }
+        );
+        jitMode = true;
+    }
+
     // NOTE: WE ARE HARDCODING THE RELAY PARAMETER TO FALSE HERE BUT IN THE REGISTER MESSAGE ITS DEFINED BY THE CLIENT
     const siteConfigurations = await buildSiteConfigurationForOlmClient(
         client,
         client.pubKey,
-        false
+        false,
+        jitMode
     );
 
     // Get all exit nodes from sites where the client has peers
@@ -82,7 +116,6 @@ export async function sendOlmSyncMessage(olm: Olm, client: Client) {
                 exitNodes: exitNodesData
             }
         },
-
         {
             compress: canCompress(olm.version, "olm")
         }

server/routers/resource/getUserResources.ts

@@ -1,6 +1,6 @@
 import { Request, Response, NextFunction } from "express";
-import { db } from "@server/db";
-import { and, eq, or, inArray } from "drizzle-orm";
+import { db, DB_TYPE } from "@server/db";
+import { and, eq, or, inArray, sql } from "drizzle-orm";
 import {
     resources,
     userResources,
@@ -12,7 +12,9 @@ import {
     resourceWhitelist,
     siteResources,
     userSiteResources,
-    roleSiteResources
+    roleSiteResources,
+    siteNetworks,
+    sites
 } from "@server/db";
 import createHttpError from "http-errors";
 import HttpCode from "@server/types/HttpCode";
@@ -156,9 +158,24 @@ export async function getUserResources(
             enabled: boolean;
             alias: string | null;
             aliasAddress: string | null;
+            tcpPortRangeString: string | null;
+            udpPortRangeString: string | null;
+            disableIcmp: boolean | null;
+            siteIds: number[];
+            siteNames: string[];
+            siteNiceIds: string[];
+            siteAddresses: (string | null)[];
+            siteOnlines: boolean[];
         }> = [];
         if (accessibleSiteResourceIds.length > 0) {
-            siteResourcesData = await db
+            const aggCol = <T>(column: any) => {
+                if (DB_TYPE === "sqlite") {
+                    return sql<T>`json_group_array(${column})`;
+                }
+                return sql<T>`COALESCE(array_agg(${column}) FILTER (WHERE ${sites.siteId} IS NOT NULL), '{}')`;
+            };
+
+            const siteResourcesRaw = await db
                 .select({
                     siteResourceId: siteResources.siteResourceId,
                     name: siteResources.name,
@@ -170,9 +187,22 @@ export async function getUserResources(
                     fullDomain: siteResources.fullDomain,
                     enabled: siteResources.enabled,
                     alias: siteResources.alias,
-                    aliasAddress: siteResources.aliasAddress
+                    aliasAddress: siteResources.aliasAddress,
+                    tcpPortRangeString: siteResources.tcpPortRangeString,
+                    udpPortRangeString: siteResources.udpPortRangeString,
+                    disableIcmp: siteResources.disableIcmp,
+                    siteIds: aggCol<number[]>(sites.siteId),
+                    siteNames: aggCol<string[]>(sites.name),
+                    siteNiceIds: aggCol<string[]>(sites.niceId),
+                    siteAddresses: aggCol<(string | null)[]>(sites.address),
+                    siteOnlines: aggCol<boolean[]>(sites.online)
                 })
                 .from(siteResources)
+                .leftJoin(
+                    siteNetworks,
+                    eq(siteResources.networkId, siteNetworks.networkId)
+                )
+                .leftJoin(sites, eq(siteNetworks.siteId, sites.siteId))
                 .where(
                     and(
                         inArray(
@@ -182,7 +212,55 @@ export async function getUserResources(
                         eq(siteResources.orgId, orgId),
                         eq(siteResources.enabled, true)
                     )
-                );
+                )
+                .groupBy(siteResources.siteResourceId);
+
+            siteResourcesData = siteResourcesRaw.map((row: any) => {
+                if (DB_TYPE !== "sqlite") {
+                    return row;
+                }
+                const siteIdsRaw = JSON.parse(row.siteIds) as (number | null)[];
+                const siteNamesRaw = JSON.parse(row.siteNames) as (
+                    | string
+                    | null
+                )[];
+                const siteNiceIdsRaw = JSON.parse(row.siteNiceIds) as (
+                    | string
+                    | null
+                )[];
+                const siteAddressesRaw = JSON.parse(row.siteAddresses) as (
+                    | string
+                    | null
+                )[];
+                const siteOnlinesRaw = JSON.parse(row.siteOnlines) as (
+                    | 0
+                    | 1
+                    | null
+                )[];
+
+                const siteIds: number[] = [];
+                const siteNames: string[] = [];
+                const siteNiceIds: string[] = [];
+                const siteAddresses: (string | null)[] = [];
+                const siteOnlines: boolean[] = [];
+                for (let i = 0; i < siteIdsRaw.length; i++) {
+                    if (siteIdsRaw[i] == null) continue;
+                    siteIds.push(siteIdsRaw[i] as number);
+                    siteNames.push((siteNamesRaw[i] ?? "") as string);
+                    siteNiceIds.push((siteNiceIdsRaw[i] ?? "") as string);
+                    siteAddresses.push(siteAddressesRaw[i] ?? null);
+                    siteOnlines.push(siteOnlinesRaw[i] === 1);
+                }
+
+                return {
+                    ...row,
+                    siteIds,
+                    siteNames,
+                    siteNiceIds,
+                    siteAddresses,
+                    siteOnlines
+                };
+            });
         }
 
         // Check for password, pincode, and whitelist protection for each resource
@@ -260,6 +338,14 @@ export async function getUserResources(
                 enabled: siteResource.enabled,
                 alias: siteResource.alias,
                 aliasAddress: siteResource.aliasAddress,
+                tcpPortRangeString: siteResource.tcpPortRangeString,
+                udpPortRangeString: siteResource.udpPortRangeString,
+                disableIcmp: siteResource.disableIcmp,
+                siteIds: siteResource.siteIds,
+                siteNames: siteResource.siteNames,
+                siteNiceIds: siteResource.siteNiceIds,
+                siteAddresses: siteResource.siteAddresses,
+                siteOnlines: siteResource.siteOnlines,
                 type: "site" as const
             };
         });
@@ -302,11 +388,19 @@ export type GetUserResourcesResponse = {
             destination: string;
             mode: string;
             protocol: string | null;
+            tcpPortRangeString: string | null;
+            udpPortRangeString: string | null;
+            disableIcmp: boolean | null;
             ssl: boolean;
             fullDomain: string | null;
             enabled: boolean;
             alias: string | null;
             aliasAddress: string | null;
+            siteIds: number[];
+            siteNames: string[];
+            siteNiceIds: string[];
+            siteAddresses: (string | null)[];
+            siteOnlines: boolean[];
             type: "site";
         }>;
     };

server/routers/resource/listResources.ts

@@ -1,7 +1,9 @@
 import {
     db,
+    labels,
     resourceHeaderAuth,
     resourceHeaderAuthExtendedCompatibility,
+    resourceLabels,
     resourcePassword,
     resourcePincode,
     resources,
@@ -9,8 +11,11 @@ import {
     sites,
     targetHealthCheck,
     targets,
-    userResources
+    userResources,
+    type Label
 } from "@server/db";
+import { isLicensedOrSubscribed } from "#dynamic/lib/isLicencedOrSubscribed";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import response from "@server/lib/response";
 import logger from "@server/logger";
 import { OpenAPITags, registry } from "@server/openApi";
@@ -154,6 +159,7 @@ export type ResourceWithTargets = {
         siteNiceId: string;
         online?: boolean; // undefined for local sites
     }>;
+    labels?: Array<Pick<Label, "color" | "labelId" | "name">>;
 };
 
 function queryResourcesBase() {
@@ -288,6 +294,11 @@ export async function listResources(
             );
         }
 
+        const isLabelFeatureEnabled = await isLicensedOrSubscribed(
+            orgId,
+            tierMatrix.labels
+        );
+
         let accessibleResources: Array<{ resourceId: number }>;
         if (req.user) {
             accessibleResources = await db
@@ -325,24 +336,6 @@ export async function listResources(
             )
         ];
 
-        if (query) {
-            conditions.push(
-                or(
-                    like(
-                        sql`LOWER(${resources.name})`,
-                        "%" + query.toLowerCase() + "%"
-                    ),
-                    like(
-                        sql`LOWER(${resources.niceId})`,
-                        "%" + query.toLowerCase() + "%"
-                    ),
-                    like(
-                        sql`LOWER(${resources.fullDomain})`,
-                        "%" + query.toLowerCase() + "%"
-                    )
-                )
-            );
-        }
         if (typeof enabled !== "undefined") {
             conditions.push(eq(resources.enabled, enabled));
         }
@@ -386,6 +379,32 @@ export async function listResources(
                 .where(and(eq(sites.orgId, orgId), eq(sites.siteId, siteId)));
             conditions.push(inArray(resources.resourceId, resourcesWithSite));
         }
+        if (query) {
+            const q = "%" + query.toLowerCase() + "%";
+            const queryList = [
+                like(sql`LOWER(${resources.name})`, q),
+                like(sql`LOWER(${resources.niceId})`, q),
+                like(sql`LOWER(${resources.fullDomain})`, q)
+            ];
+
+            if (isLabelFeatureEnabled) {
+                queryList.push(
+                    inArray(
+                        resources.resourceId,
+                        db
+                            .select({ id: resourceLabels.resourceId })
+                            .from(resourceLabels)
+                            .innerJoin(
+                                labels,
+                                eq(labels.labelId, resourceLabels.labelId)
+                            )
+                            .where(like(sql`LOWER(${labels.name})`, q))
+                    )
+                );
+            }
+
+            conditions.push(or(...queryList));
+        }
 
         const baseQuery = queryResourcesBase().where(and(...conditions));
 
@@ -407,6 +426,36 @@ export async function listResources(
         ]);
 
         const resourceIdList = rows.map((row) => row.resourceId);
+
+        let labelsForResources: Array<{
+            labelId: number;
+            name: string;
+            color: string;
+            resourceId: number;
+        }> = [];
+
+        if (isLabelFeatureEnabled) {
+            labelsForResources =
+                resourceIdList.length === 0
+                    ? []
+                    : await db
+                          .select({
+                              labelId: labels.labelId,
+                              name: labels.name,
+                              color: labels.color,
+                              resourceId: resourceLabels.resourceId
+                          })
+                          .from(labels)
+                          .innerJoin(
+                              resourceLabels,
+                              eq(resourceLabels.labelId, labels.labelId)
+                          )
+                          .where(
+                              inArray(resourceLabels.resourceId, resourceIdList)
+                          )
+                          .orderBy(asc(resourceLabels.resourceLabelId));
+        }
+
         const allResourceTargets =
             resourceIdList.length === 0
                 ? []
@@ -458,7 +507,10 @@ export async function listResources(
                     headerAuthId: row.headerAuthId,
                     health: row.health ?? null,
                     targets: [],
-                    sites: []
+                    sites: [],
+                    labels: labelsForResources.filter(
+                        (l) => l.resourceId === row.resourceId
+                    )
                 };
                 map.set(row.resourceId, entry);
             }

server/routers/site/listSites.ts

@@ -9,7 +9,10 @@ import {
     siteResources,
     targets,
     sites,
-    userSites
+    userSites,
+    labels,
+    siteLabels,
+    type Label
 } from "@server/db";
 import cache from "#dynamic/lib/cache";
 import response from "@server/lib/response";
@@ -23,6 +26,8 @@ import createHttpError from "http-errors";
 import semver from "semver";
 import { z } from "zod";
 import { fromError } from "zod-validation-error";
+import { isLicensedOrSubscribed } from "#dynamic/lib/isLicencedOrSubscribed";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 
 // Stale-while-revalidate: keeps the last successfully fetched version so that
 // a transient network failure / timeout does not flip every site back to
@@ -187,7 +192,7 @@ const listSitesSchema = z.object({
 
 function querySitesBase() {
     return db
-        .select({
+        .selectDistinct({
             siteId: sites.siteId,
             niceId: sites.niceId,
             name: sites.name,
@@ -233,6 +238,7 @@ type SiteRowBase = Awaited<ReturnType<typeof querySitesBase>>[0];
 type SiteWithUpdateAvailable = Omit<SiteRowBase, "online"> & {
     online?: SiteRowBase["online"]; // undefined for local sites
     newtUpdateAvailable?: boolean;
+    labels?: Array<Pick<Label, "color" | "labelId" | "name">>;
 };
 
 export type ListSitesResponse = PaginatedResponse<{
@@ -308,6 +314,11 @@ export async function listSites(
                 .where(eq(sites.orgId, orgId));
         }
 
+        const isLabelFeatureEnabled = await isLicensedOrSubscribed(
+            orgId,
+            tierMatrix.labels
+        );
+
         const { pageSize, page, query, sort_by, order, online, status } =
             parsedQuery.data;
 
@@ -319,33 +330,43 @@ export async function listSites(
                 eq(sites.orgId, orgId)
             )
         ];
-        if (query) {
-            conditions.push(
-                or(
-                    like(
-                        sql`LOWER(${sites.name})`,
-                        "%" + query.toLowerCase() + "%"
-                    ),
-                    like(
-                        sql`LOWER(${sites.niceId})`,
-                        "%" + query.toLowerCase() + "%"
-                    )
-                )
-            );
-        }
+
         if (typeof online !== "undefined") {
             conditions.push(eq(sites.online, online));
         }
         if (typeof status !== "undefined") {
             conditions.push(eq(sites.status, status));
         }
+        if (query) {
+            const q = "%" + query.toLowerCase() + "%";
+            const queryList = [
+                like(sql`LOWER(${sites.name})`, q),
+                like(sql`LOWER(${sites.niceId})`, q)
+            ];
+
+            if (isLabelFeatureEnabled) {
+                queryList.push(
+                    inArray(
+                        sites.siteId,
+                        db
+                            .select({ id: siteLabels.siteId })
+                            .from(siteLabels)
+                            .innerJoin(
+                                labels,
+                                eq(labels.labelId, siteLabels.labelId)
+                            )
+                            .where(like(sql`LOWER(${labels.name})`, q))
+                    )
+                );
+            }
+            conditions.push(or(...queryList));
+        }
+
         const baseQuery = querySitesBase().where(and(...conditions));
 
         // we need to add `as` so that drizzle filters the result as a subquery
         const countQuery = db.$count(
-            querySitesBase()
-                .where(and(...conditions))
-                .as("filtered_sites")
+            querySitesBase().where(and(...conditions)).as("filtered_sites")
         );
 
         const siteListQuery = baseQuery
@@ -367,11 +388,46 @@ export async function listSites(
         // Get latest version asynchronously without blocking the response
         const latestNewtVersionPromise = getLatestNewtVersion();
 
+        const siteIds = rows.map((site) => site.siteId);
+
+        let labelsForSites: Array<{
+            labelId: number;
+            name: string;
+            color: string;
+            siteId: number;
+        }> = [];
+
+        if (isLabelFeatureEnabled) {
+            labelsForSites =
+                siteIds.length === 0
+                    ? []
+                    : await db
+                          .select({
+                              labelId: labels.labelId,
+                              name: labels.name,
+                              color: labels.color,
+                              siteId: siteLabels.siteId
+                          })
+                          .from(labels)
+                          .innerJoin(
+                              siteLabels,
+                              eq(siteLabels.labelId, labels.labelId)
+                          )
+                          .where(inArray(siteLabels.siteId, siteIds))
+                          .orderBy(asc(siteLabels.siteLabelId));
+        }
+
         const sitesWithUpdates: SiteWithUpdateAvailable[] = rows.map((site) => {
             const siteWithUpdate: SiteWithUpdateAvailable = { ...site };
             // Initially set to false, will be updated if version check succeeds
             siteWithUpdate.newtUpdateAvailable = false;
-            return siteWithUpdate;
+
+            // associate labels
+            const labelsForSite = labelsForSites.filter(
+                (label) => label.siteId === site.siteId
+            );
+
+            return { ...siteWithUpdate, labels: labelsForSite };
         });
 
         // Try to get the latest version, but don't block if it fails

server/routers/siteResource/listAllSiteResourcesByOrg.ts

@@ -1,4 +1,14 @@
-import { db, DB_TYPE, SiteResource, siteNetworks, siteResources, sites } from "@server/db";
+import {
+    db,
+    DB_TYPE,
+    Label,
+    SiteResource,
+    siteNetworks,
+    siteResourceLabels,
+    siteResources,
+    sites,
+    labels
+} from "@server/db";
 import response from "@server/lib/response";
 import logger from "@server/logger";
 import { OpenAPITags, registry } from "@server/openApi";
@@ -9,6 +19,8 @@ import { NextFunction, Request, Response } from "express";
 import createHttpError from "http-errors";
 import { z } from "zod";
 import { fromError } from "zod-validation-error";
+import { isLicensedOrSubscribed } from "#dynamic/lib/isLicencedOrSubscribed";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 
 const listAllSiteResourcesByOrgParamsSchema = z.strictObject({
     orgId: z.string()
@@ -69,16 +81,11 @@ const listAllSiteResourcesByOrgQuerySchema = z.object({
             default: "asc",
             description: "Sort order"
         }),
-    siteId: z.coerce
-        .number<string>()
-        .int()
-        .positive()
-        .optional()
-        .openapi({
-            type: "integer",
-            description:
-                "When set, only site resources associated with this site (via network) are returned"
-        })
+    siteId: z.coerce.number<string>().int().positive().optional().openapi({
+        type: "integer",
+        description:
+            "When set, only site resources associated with this site (via network) are returned"
+    })
 });
 
 export type ListAllSiteResourcesByOrgResponse = PaginatedResponse<{
@@ -88,6 +95,7 @@ export type ListAllSiteResourcesByOrgResponse = PaginatedResponse<{
         siteNames: string[];
         siteNiceIds: string[];
         siteAddresses: (string | null)[];
+        labels?: Array<Pick<Label, "labelId" | "name" | "color">>;
     })[];
 }>;
 
@@ -234,6 +242,11 @@ export async function listAllSiteResourcesByOrg(
         const { page, pageSize, query, mode, sort_by, order, siteId } =
             parsedQuery.data;
 
+        const isLabelFeatureEnabled = await isLicensedOrSubscribed(
+            orgId,
+            tierMatrix.labels
+        );
+
         const conditions = [and(eq(siteResources.orgId, orgId))];
 
         if (siteId != null) {
@@ -258,41 +271,41 @@ export async function listAllSiteResourcesByOrg(
                 inArray(siteResources.siteResourceId, resourcesForSite)
             );
         }
-        if (query) {
-            conditions.push(
-                or(
-                    like(
-                        sql`LOWER(${siteResources.name})`,
-                        "%" + query.toLowerCase() + "%"
-                    ),
-                    like(
-                        sql`LOWER(${siteResources.niceId})`,
-                        "%" + query.toLowerCase() + "%"
-                    ),
-                    like(
-                        sql`LOWER(${siteResources.destination})`,
-                        "%" + query.toLowerCase() + "%"
-                    ),
-                    like(
-                        sql`LOWER(${siteResources.alias})`,
-                        "%" + query.toLowerCase() + "%"
-                    ),
-                    like(
-                        sql`LOWER(${siteResources.aliasAddress})`,
-                        "%" + query.toLowerCase() + "%"
-                    ),
-                    like(
-                        sql`LOWER(${sites.name})`,
-                        "%" + query.toLowerCase() + "%"
-                    )
-                )
-            );
-        }
 
         if (mode) {
             conditions.push(eq(siteResources.mode, mode));
         }
 
+        if (query) {
+            const q = "%" + query.toLowerCase() + "%";
+            const queryList = [
+                like(sql`LOWER(${siteResources.name})`, q),
+                like(sql`LOWER(${siteResources.niceId})`, q),
+                like(sql`LOWER(${siteResources.destination})`, q),
+                like(sql`LOWER(${siteResources.alias})`, q),
+                like(sql`LOWER(${siteResources.aliasAddress})`, q),
+                like(sql`LOWER(${sites.name})`, q)
+            ];
+
+            if (isLabelFeatureEnabled) {
+                queryList.push(
+                    inArray(
+                        siteResources.siteResourceId,
+                        db
+                            .select({ id: siteResourceLabels.siteResourceId })
+                            .from(siteResourceLabels)
+                            .innerJoin(
+                                labels,
+                                eq(labels.labelId, siteResourceLabels.labelId)
+                            )
+                            .where(like(sql`LOWER(${labels.name})`, q))
+                    )
+                );
+            }
+
+            conditions.push(or(...queryList));
+        }
+
         const baseQuery = querySiteResourcesBase().where(and(...conditions));
 
         const countQuery = db.$count(
@@ -315,11 +328,51 @@ export async function listAllSiteResourcesByOrg(
             countQuery
         ]);
 
-        const siteResourcesList = siteResourcesRaw.map(transformSiteResourceRow);
+        const siteResourcesList = siteResourcesRaw.map(
+            transformSiteResourceRow
+        );
+
+        const siteResourceIdList = siteResourcesList.map(
+            (r) => r.siteResourceId
+        );
+
+        let labelsForSiteResources: Array<{
+            labelId: number;
+            name: string;
+            color: string;
+            siteResourceId: number;
+        }> = [];
+
+        if (isLabelFeatureEnabled && siteResourceIdList.length > 0) {
+            labelsForSiteResources = await db
+                .select({
+                    labelId: labels.labelId,
+                    name: labels.name,
+                    color: labels.color,
+                    siteResourceId: siteResourceLabels.siteResourceId
+                })
+                .from(labels)
+                .innerJoin(
+                    siteResourceLabels,
+                    eq(siteResourceLabels.labelId, labels.labelId)
+                )
+                .where(
+                    inArray(
+                        siteResourceLabels.siteResourceId,
+                        siteResourceIdList
+                    )
+                )
+                .orderBy(asc(siteResourceLabels.siteResourceLabelId));
+        }
 
         return response<ListAllSiteResourcesByOrgResponse>(res, {
             data: {
-                siteResources: siteResourcesList,
+                siteResources: siteResourcesList.map((r) => ({
+                    ...r,
+                    labels: labelsForSiteResources.filter(
+                        (l) => l.siteResourceId === r.siteResourceId
+                    )
+                })),
                 pagination: {
                     total: totalCount,
                     pageSize,
@@ -340,4 +393,4 @@ export async function listAllSiteResourcesByOrg(
             )
         );
     }
-}
+}

src/app/[orgId]/settings/(private)/labels/page.tsx

@@ -0,0 +1,63 @@
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { ListOrgLabelsResponse } from "@server/routers/labels/types";
+import { AxiosResponse } from "axios";
+import OrgLabelsTable from "@app/components/OrgLabelsTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+
+export const metadata: Metadata = {
+    title: "Labels"
+};
+
+type Props = {
+    params: Promise<{ orgId: string }>;
+    searchParams: Promise<Record<string, string>>;
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function LabelsPage({ params, searchParams }: Props) {
+    const { orgId } = await params;
+
+    const searchParamsObj = new URLSearchParams(await searchParams);
+
+    let labels: ListOrgLabelsResponse["labels"] = [];
+    let pagination: ListOrgLabelsResponse["pagination"] = {
+        total: 0,
+        page: 1,
+        pageSize: 20
+    };
+
+    try {
+        const res = await internal.get<AxiosResponse<ListOrgLabelsResponse>>(
+            `/org/${orgId}/labels?${searchParamsObj.toString()}`,
+            await authCookieHeader()
+        );
+        const responseData = res.data.data;
+        labels = responseData.labels;
+        pagination = responseData.pagination;
+    } catch (e) {}
+
+    const t = await getTranslations();
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("labels")}
+                description={t("orgLabelsDescription")}
+            />
+
+            <OrgLabelsTable
+                labels={labels}
+                orgId={orgId}
+                rowCount={pagination.total}
+                pagination={{
+                    pageIndex: pagination.page - 1,
+                    pageSize: pagination.pageSize
+                }}
+            />
+        </>
+    );
+}

src/app/[orgId]/settings/clients/machine/page.tsx

@@ -76,7 +76,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
             agent: client.agent,
             archived: client.archived || false,
             blocked: client.blocked || false,
-            approvalState: client.approvalState ?? "approved"
+            approvalState: client.approvalState ?? "approved",
+            labels: client.labels ?? []
         };
     };
 

src/app/[orgId]/settings/clients/user/[niceId]/general/page.tsx

@@ -153,6 +153,65 @@ export default function GeneralPage() {
     const [approvalId, setApprovalId] = useState<number | null>(null);
     const [isRefreshing, setIsRefreshing] = useState(false);
     const [, startTransition] = useTransition();
+    const [cacheCheck, setCacheCheck] = useState<null | {
+        consistent: boolean;
+        missingSiteResourceIds: number[];
+        extraSiteResourceIds: number[];
+        missingSiteIds: number[];
+        extraSiteIds: number[];
+        expectedSiteResourceIds: number[];
+        actualSiteResourceIds: number[];
+        expectedSiteIds: number[];
+        actualSiteIds: number[];
+    }>(null);
+    const [isCheckingCache, setIsCheckingCache] = useState(false);
+    const [isRebuildingCache, setIsRebuildingCache] = useState(false);
+
+    const handleRebuildCache = async () => {
+        if (!client.clientId) return;
+        setIsRebuildingCache(true);
+        try {
+            await api.post(
+                `/client/${client.clientId}/rebuild-associations-cache`
+            );
+            // Re-verify after rebuild so the result refreshes
+            const res = await api.get(
+                `/client/${client.clientId}/verify-associations-cache`
+            );
+            setCacheCheck(res.data.data);
+            toast({
+                title: "Cache rebuilt",
+                description: "Association cache rebuilt successfully."
+            });
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: "Rebuild failed",
+                description: formatAxiosError(e, "Failed to rebuild cache")
+            });
+        } finally {
+            setIsRebuildingCache(false);
+        }
+    };
+
+    const handleVerifyCache = async () => {
+        if (!client.clientId) return;
+        setIsCheckingCache(true);
+        try {
+            const res = await api.get(
+                `/client/${client.clientId}/verify-associations-cache`
+            );
+            setCacheCheck(res.data.data);
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: "Cache check failed",
+                description: formatAxiosError(e, "Failed to verify cache")
+            });
+        } finally {
+            setIsCheckingCache(false);
+        }
+    };
     const { env } = useEnvContext();
 
     const showApprovalFeatures =
@@ -844,6 +903,75 @@ export default function GeneralPage() {
                     </SettingsSectionBody>
                 </SettingsSection>
             )}
+
+            {/* Hidden cache verification — subtle button, dev/admin diagnostic */}
+            <div className="mt-8 flex flex-col gap-2 items-start opacity-30 hover:opacity-100 transition-opacity">
+                <button
+                    type="button"
+                    onClick={handleVerifyCache}
+                    disabled={isCheckingCache}
+                    className="text-xs text-muted-foreground underline disabled:opacity-50"
+                    title="Verify the client's site association cache against current permissions (read-only)"
+                >
+                    {isCheckingCache
+                        ? "Checking cache…"
+                        : "Verify association cache"}
+                </button>
+                {cacheCheck && (
+                    <div
+                        className={
+                            "text-xs rounded border px-2 py-1 " +
+                            (cacheCheck.consistent
+                                ? "border-green-600 text-green-700"
+                                : "border-red-600 text-red-700")
+                        }
+                    >
+                        {cacheCheck.consistent ? (
+                            <span className="flex items-center gap-1">
+                                <CheckCircle2 className="h-3 w-3" />
+                                Cache is consistent
+                            </span>
+                        ) : (
+                            <div className="space-y-2">
+                                <div className="flex items-center gap-1 font-semibold">
+                                    <XCircle className="h-3 w-3" />
+                                    Cache is INCONSISTENT
+                                </div>
+                                <div>
+                                    Missing site resources: [
+                                    {cacheCheck.missingSiteResourceIds.join(
+                                        ", "
+                                    )}
+                                    ]
+                                </div>
+                                <div>
+                                    Extra site resources: [
+                                    {cacheCheck.extraSiteResourceIds.join(", ")}
+                                    ]
+                                </div>
+                                <div>
+                                    Missing sites: [
+                                    {cacheCheck.missingSiteIds.join(", ")}]
+                                </div>
+                                <div>
+                                    Extra sites: [
+                                    {cacheCheck.extraSiteIds.join(", ")}]
+                                </div>
+                                <button
+                                    type="button"
+                                    onClick={handleRebuildCache}
+                                    disabled={isRebuildingCache}
+                                    className="mt-1 text-xs underline font-semibold disabled:opacity-50"
+                                >
+                                    {isRebuildingCache
+                                        ? "Rebuilding…"
+                                        : "Rebuild cache now"}
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
         </SettingsContainer>
     );
 }

src/app/[orgId]/settings/logs/access/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@app/components/ui/button";
 import { toast } from "@app/hooks/useToast";
-import { useState, useRef, useEffect, useTransition } from "react";
+import { useState, useTransition, useMemo } from "react";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
@@ -20,6 +20,9 @@ import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { logQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import type { QueryAccessAuditLogResponse } from "@server/routers/auditLogs/types";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -30,23 +33,8 @@ export default function GeneralPage() {
 
     const { isPaidUser } = usePaidStatus();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
-    const [filterAttributes, setFilterAttributes] = useState<{
-        actors: string[];
-        resources: {
-            id: number;
-            name: string | null;
-        }[];
-        locations: string[];
-    }>({
-        actors: [],
-        resources: [],
-        locations: []
-    });
 
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         action?: string;
         type?: string;
@@ -61,40 +49,21 @@ export default function GeneralPage() {
         actor: searchParams.get("actor") || undefined
     });
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize("access-audit-logs", 20);
 
-    // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
-                    date: new Date(startParam)
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
+                startDate: { date: new Date(startParam) },
+                endDate: { date: new Date(endParam) }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
-                date: lastWeek
-            },
-            endDate: {
-                date: now
-            }
+            startDate: { date: getSevenDaysAgo() },
+            endDate: { date: new Date() }
         };
     };
 
@@ -103,75 +72,95 @@ export default function GeneralPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
-    useEffect(() => {
-        const defaultRange = getDefaultDateRange();
-        queryDateTime(
-            defaultRange.startDate,
-            defaultRange.endDate,
-            0,
-            pageSize
-        );
-    }, [orgId]); // Re-run if orgId changes
+    const queryFilters = useMemo(() => {
+        let timeStart: string | undefined;
+        let timeEnd: string | undefined;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
+        }
+
+        if (dateRange.endDate?.date) {
+            const dt = new Date(dateRange.endDate.date);
+            if (dateRange.endDate.time) {
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
+                dt.setHours(h, m, s || 0);
+            } else {
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters,
+            resourceId: filters.resourceId
+                ? Number(filters.resourceId)
+                : undefined
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.access({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: isPaidUser(tierMatrix.accessLogs) && build !== "oss"
+    });
+
+    const rows = isLoading ? generateSampleAccessLogs() : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = data?.filterAttributes ?? {
+        actors: [],
+        resources: [],
+        locations: []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
-        // put the search params in the url for the time
+        setCurrentPage(0);
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+        setCurrentPage(0);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        // Create new filters object with updated value
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
+        const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
-
-        // Update URL params
+        setCurrentPage(0);
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -193,114 +182,8 @@ export default function GeneralPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: {
-            action?: string;
-            type?: string;
-            resourceId?: string;
-            location?: string;
-            actor?: string;
-        }
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        if (!isPaidUser(tierMatrix.accessLogs) || build === "oss") {
-            console.log(
-                "Access denied: subscription inactive or license locked"
-            );
-            return;
-        }
-
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/access`, { params });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                dateRange.endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
-            // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -316,7 +199,6 @@ export default function GeneralPage() {
                 params
             });
 
-            // Create a URL for the blob and trigger a download
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement("a");
             link.href = url;
@@ -334,7 +216,6 @@ export default function GeneralPage() {
                 const data = error.response.data;
 
                 if (data instanceof Blob && data.type === "application/json") {
-                    // Parse the Blob as JSON
                     const text = await data.text();
                     const errorData = JSON.parse(text);
                     apiErrorMessage = errorData.message;
@@ -351,7 +232,7 @@ export default function GeneralPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "timestamp",
-            header: ({ column }) => {
+            header: () => {
                 return t("timestamp");
             },
             cell: ({ row }) => {
@@ -366,7 +247,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "action",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("action")}</span>
@@ -379,7 +260,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -396,13 +276,11 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "ip",
-            header: ({ column }) => {
-                return t("ip");
-            }
+            header: () => t("ip")
         },
         {
             accessorKey: "location",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("location")}</span>
@@ -417,7 +295,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("location", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -442,7 +319,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "resourceName",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("resource")}</span>
@@ -455,7 +332,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("resourceId", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -481,7 +357,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "type",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("type")}</span>
@@ -500,7 +376,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("type", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -518,7 +393,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actor",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("actor")}</span>
@@ -531,7 +406,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -559,16 +433,12 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actorId",
-            header: ({ column }) => {
-                return t("actorId");
-            },
-            cell: ({ row }) => {
-                return (
-                    <span className="flex items-center gap-1">
-                        {row.original.actorId || "-"}
-                    </span>
-                );
-            }
+            header: () => t("actorId"),
+            cell: ({ row }) => (
+                <span className="flex items-center gap-1">
+                    {row.original.actorId || "-"}
+                </span>
+            )
         }
     ];
 
@@ -614,13 +484,10 @@ export default function GeneralPage() {
                 columns={columns}
                 data={rows}
                 title={t("accessLogs")}
-                onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                onRefresh={() => refetch()}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
-                // isExportDisabled={ // not disabling this because the user should be able to click the button and get the feedback about needing to upgrade the plan
-                //     !isPaidUser(tierMatrix.accessLogs) || build === "oss"
-                // }
                 onDateRangeChange={handleDateRangeChange}
                 dateRange={{
                     start: dateRange.startDate,
@@ -630,14 +497,12 @@ export default function GeneralPage() {
                     id: "timestamp",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 pageSize={pageSize}
                 onPageChange={handlePageChange}
                 onPageSizeChange={handlePageSizeChange}
                 isLoading={isLoading}
-                // Row expansion props
                 expandable={true}
                 renderExpandedRow={renderExpandedRow}
                 disabled={!isPaidUser(tierMatrix.accessLogs) || build === "oss"}
@@ -645,3 +510,41 @@ export default function GeneralPage() {
         </>
     );
 }
+
+function generateSampleAccessLogs(): QueryAccessAuditLogResponse["log"] {
+    const locations = ["US", "DE", "GB", "FR", "JP", "CA", "AU"];
+    const types = ["password", "pincode", "login", "whitelistedEmail", "ssh"];
+    const actors = [
+        "alice@example.com",
+        "bob@example.com",
+        "carol@example.com",
+        null
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const action = Math.random() > 0.3;
+        const actor = actors[Math.floor(Math.random() * actors.length)];
+
+        return {
+            timestamp: Math.floor(
+                sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+            ),
+            action,
+            orgId: "sample-org",
+            actorType: actor ? "user" : null,
+            actor,
+            actorId: actor ? `user-${i}` : null,
+            resourceId: Math.floor(Math.random() * 5) + 1,
+            resourceNiceId: `resource-${(i % 3) + 1}`,
+            resourceName: `Resource ${(i % 3) + 1}`,
+            ip: `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
+            location: locations[Math.floor(Math.random() * locations.length)],
+            userAgent: "Mozilla/5.0",
+            metadata: null,
+            type: types[Math.floor(Math.random() * types.length)]
+        };
+    });
+}

src/app/[orgId]/settings/logs/action/page.tsx

@@ -10,14 +10,17 @@ import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { logQueries } from "@app/lib/queries";
 import { build } from "@server/build";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { QueryActionAuditLogResponse } from "@server/routers/auditLogs/types";
+import { useQuery } from "@tanstack/react-query";
 import { ColumnDef } from "@tanstack/react-table";
 import axios from "axios";
 import { Key, User } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState, useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -28,18 +31,8 @@ export default function GeneralPage() {
 
     const { isPaidUser } = usePaidStatus();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
-    const [filterAttributes, setFilterAttributes] = useState<{
-        actors: string[];
-        actions: string[];
-    }>({
-        actors: [],
-        actions: []
-    });
 
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         action?: string;
         actor?: string;
@@ -48,40 +41,21 @@ export default function GeneralPage() {
         actor: searchParams.get("actor") || undefined
     });
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize("action-audit-logs", 20);
 
-    // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
-                    date: new Date(startParam)
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
+                startDate: { date: new Date(startParam) },
+                endDate: { date: new Date(endParam) }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
-                date: lastWeek
-            },
-            endDate: {
-                date: now
-            }
+            startDate: { date: getSevenDaysAgo() },
+            endDate: { date: new Date() }
         };
     };
 
@@ -90,78 +64,90 @@ export default function GeneralPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
-    useEffect(() => {
-        if (build === "oss") {
-            return;
+    const queryFilters = useMemo(() => {
+        let timeStart: string | undefined;
+        let timeEnd: string | undefined;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
         }
-        const defaultRange = getDefaultDateRange();
-        queryDateTime(
-            defaultRange.startDate,
-            defaultRange.endDate,
-            0,
-            pageSize
-        );
-    }, [orgId]); // Re-run if orgId changes
+
+        if (dateRange.endDate?.date) {
+            const dt = new Date(dateRange.endDate.date);
+            if (dateRange.endDate.time) {
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
+                dt.setHours(h, m, s || 0);
+            } else {
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.action({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: isPaidUser(tierMatrix.actionLogs) && build !== "oss"
+    });
+
+    const rows = isLoading ? generateSampleActionLogs() : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = {
+        actors: data?.filterAttributes?.actors ?? []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
-        // put the search params in the url for the time
+        setCurrentPage(0);
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+        setCurrentPage(0);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        // Create new filters object with updated value
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
+        const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
-
-        // Update URL params
+        setCurrentPage(0);
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -183,110 +169,8 @@ export default function GeneralPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: {
-            action?: string;
-            actor?: string;
-        }
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        if (!isPaidUser(tierMatrix.actionLogs)) {
-            console.log(
-                "Access denied: subscription inactive or license locked"
-            );
-            return;
-        }
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/action`, { params });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                dateRange.endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
-            // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -302,7 +186,6 @@ export default function GeneralPage() {
                 params
             });
 
-            // Create a URL for the blob and trigger a download
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement("a");
             link.href = url;
@@ -320,7 +203,6 @@ export default function GeneralPage() {
                 const data = error.response.data;
 
                 if (data instanceof Blob && data.type === "application/json") {
-                    // Parse the Blob as JSON
                     const text = await data.text();
                     const errorData = JSON.parse(text);
                     apiErrorMessage = errorData.message;
@@ -337,7 +219,7 @@ export default function GeneralPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "timestamp",
-            header: ({ column }) => {
+            header: () => {
                 return t("timestamp");
             },
             cell: ({ row }) => {
@@ -352,22 +234,16 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "action",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("action")}</span>
                         <ColumnFilter
-                            options={filterAttributes.actions.map((action) => ({
-                                label:
-                                    action.charAt(0).toUpperCase() +
-                                    action.slice(1),
-                                value: action
-                            }))}
+                            options={[]}
                             selectedValue={filters.action}
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -385,7 +261,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actor",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("actor")}</span>
@@ -398,7 +274,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -420,7 +295,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actorId",
-            header: ({ column }) => {
+            header: () => {
                 return t("actorId");
             },
             cell: ({ row }) => {
@@ -469,12 +344,9 @@ export default function GeneralPage() {
                 title={t("actionLogs")}
                 searchPlaceholder={t("searchLogs")}
                 searchColumn="action"
-                onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                onRefresh={() => refetch()}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
-                // isExportDisabled={ // not disabling this because the user should be able to click the button and get the feedback about needing to upgrade the plan
-                //     !isPaidUser(tierMatrix.logExport) || build === "oss"
-                // }
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
                 dateRange={{
@@ -485,14 +357,12 @@ export default function GeneralPage() {
                     id: "timestamp",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 pageSize={pageSize}
                 onPageChange={handlePageChange}
                 onPageSizeChange={handlePageSizeChange}
                 isLoading={isLoading}
-                // Row expansion props
                 expandable={true}
                 renderExpandedRow={renderExpandedRow}
                 disabled={!isPaidUser(tierMatrix.actionLogs) || build === "oss"}
@@ -500,3 +370,39 @@ export default function GeneralPage() {
         </>
     );
 }
+
+function generateSampleActionLogs(): QueryActionAuditLogResponse["log"] {
+    const actions = [
+        "createResource",
+        "deleteResource",
+        "updateResource",
+        "createSite",
+        "deleteSite",
+        "inviteUser",
+        "removeUser"
+    ];
+    const actors = [
+        "alice@example.com",
+        "bob@example.com",
+        "carol@example.com"
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const actor = actors[Math.floor(Math.random() * actors.length)];
+
+        return {
+            timestamp: Math.floor(
+                sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+            ),
+            action: actions[Math.floor(Math.random() * actions.length)],
+            orgId: "sample-org",
+            actorType: "user",
+            actor,
+            actorId: `user-${i}`,
+            metadata: null
+        };
+    });
+}

src/app/[orgId]/settings/logs/connection/page.tsx

@@ -11,24 +11,18 @@ import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { logQueries } from "@app/lib/queries";
 import { build } from "@server/build";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { QueryConnectionAuditLogResponse } from "@server/routers/auditLogs/types";
+import { useQuery } from "@tanstack/react-query";
 import { ColumnDef } from "@tanstack/react-table";
 import axios from "axios";
 import { ArrowUpRight, Laptop, User } from "lucide-react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState, useTransition } from "react";
-
-function formatBytes(bytes: number | null): string {
-    if (bytes === null || bytes === undefined) return "-";
-    if (bytes === 0) return "0 B";
-    const units = ["B", "KB", "MB", "GB", "TB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(1024));
-    const value = bytes / Math.pow(1024, i);
-    return `${value.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
-}
+import { useMemo, useState, useTransition } from "react";
 
 function formatDuration(startedAt: number, endedAt: number | null): string {
     if (endedAt === null || endedAt === undefined) return "Active";
@@ -54,24 +48,8 @@ export default function ConnectionLogsPage() {
 
     const { isPaidUser } = usePaidStatus();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
-    const [filterAttributes, setFilterAttributes] = useState<{
-        protocols: string[];
-        destAddrs: string[];
-        clients: { id: number; name: string }[];
-        resources: { id: number; name: string | null }[];
-        users: { id: string; email: string | null }[];
-    }>({
-        protocols: [],
-        destAddrs: [],
-        clients: [],
-        resources: [],
-        users: []
-    });
 
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         protocol?: string;
         destAddr?: string;
@@ -86,43 +64,24 @@ export default function ConnectionLogsPage() {
         userId: searchParams.get("userId") || undefined
     });
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize(
         "connection-audit-logs",
         20
     );
 
-    // Set default date range to last 7 days
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
-                    date: new Date(startParam)
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
+                startDate: { date: new Date(startParam) },
+                endDate: { date: new Date(endParam) }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
-                date: lastWeek
-            },
-            endDate: {
-                date: now
-            }
+            startDate: { date: getSevenDaysAgo() },
+            endDate: { date: new Date() }
         };
     };
 
@@ -131,78 +90,100 @@ export default function ConnectionLogsPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
-    useEffect(() => {
-        if (build === "oss") {
-            return;
+    const queryFilters = useMemo(() => {
+        let timeStart: string | undefined;
+        let timeEnd: string | undefined;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
         }
-        const defaultRange = getDefaultDateRange();
-        queryDateTime(
-            defaultRange.startDate,
-            defaultRange.endDate,
-            0,
-            pageSize
-        );
-    }, [orgId]); // Re-run if orgId changes
+
+        if (dateRange.endDate?.date) {
+            const dt = new Date(dateRange.endDate.date);
+            if (dateRange.endDate.time) {
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
+                dt.setHours(h, m, s || 0);
+            } else {
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters,
+            clientId: filters.clientId ? Number(filters.clientId) : undefined,
+            siteResourceId: filters.siteResourceId
+                ? Number(filters.siteResourceId)
+                : undefined
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.connection({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: isPaidUser(tierMatrix.connectionLogs) && build !== "oss"
+    });
+
+    const rows = isLoading
+        ? generateSampleConnectionLogs()
+        : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = data?.filterAttributes ?? {
+        protocols: [],
+        destAddrs: [],
+        clients: [],
+        resources: [],
+        users: []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
-        // put the search params in the url for the time
+        setCurrentPage(0);
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+        setCurrentPage(0);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        // Create new filters object with updated value
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
+        const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
-
-        // Update URL params
+        setCurrentPage(0);
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -224,109 +205,8 @@ export default function ConnectionLogsPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: typeof filters
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        if (!isPaidUser(tierMatrix.connectionLogs)) {
-            console.log(
-                "Access denied: subscription inactive or license locked"
-            );
-            return;
-        }
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/connection`, {
-                params
-            });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched connection logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                dateRange.endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
-            // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -345,7 +225,6 @@ export default function ConnectionLogsPage() {
                 }
             );
 
-            // Create a URL for the blob and trigger a download
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement("a");
             link.href = url;
@@ -363,7 +242,6 @@ export default function ConnectionLogsPage() {
                 const data = error.response.data;
 
                 if (data instanceof Blob && data.type === "application/json") {
-                    // Parse the Blob as JSON
                     const text = await data.text();
                     const errorData = JSON.parse(text);
                     apiErrorMessage = errorData.message;
@@ -380,7 +258,7 @@ export default function ConnectionLogsPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "startedAt",
-            header: ({ column }) => {
+            header: () => {
                 return t("timestamp");
             },
             cell: ({ row }) => {
@@ -395,7 +273,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "protocol",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("protocol")}</span>
@@ -426,7 +304,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "resourceName",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("resource")}</span>
@@ -467,7 +345,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "clientName",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("client")}</span>
@@ -510,7 +388,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "userEmail",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("user")}</span>
@@ -543,7 +421,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "sourceAddr",
-            header: ({ column }) => {
+            header: () => {
                 return t("sourceAddress");
             },
             cell: ({ row }) => {
@@ -556,7 +434,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "destAddr",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("destinationAddress")}</span>
@@ -585,7 +463,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "duration",
-            header: ({ column }) => {
+            header: () => {
                 return t("duration");
             },
             cell: ({ row }) => {
@@ -606,9 +484,6 @@ export default function ConnectionLogsPage() {
             <div className="space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                     <div className="space-y-2">
-                        {/*<div className="flex items-center gap-1 font-semibold text-sm mb-1">
-                            Connection Details
-                        </div>*/}
                         <div>
                             <strong>Session ID:</strong>{" "}
                             <span className="font-mono">
@@ -633,18 +508,6 @@ export default function ConnectionLogsPage() {
                         </div>
                     </div>
                     <div className="space-y-2">
-                        {/*<div className="flex items-center gap-1 font-semibold text-sm mb-1">
-                            Resource & Site
-                        </div>*/}
-                        {/*<div>
-                            <strong>Resource:</strong>{" "}
-                            {row.resourceName ?? "-"}
-                            {row.resourceNiceId && (
-                                <span className="text-muted-foreground ml-1">
-                                    ({row.resourceNiceId})
-                                </span>
-                            )}
-                        </div>*/}
                         <div>
                             <strong>Client Endpoint:</strong>{" "}
                             <span className="font-mono">
@@ -680,30 +543,8 @@ export default function ConnectionLogsPage() {
                             <strong>Duration:</strong>{" "}
                             {formatDuration(row.startedAt, row.endedAt)}
                         </div>
-                        {/*<div>
-                            <strong>Resource ID:</strong>{" "}
-                            {row.siteResourceId ?? "-"}
-                        </div>*/}
-                    </div>
-                    <div className="space-y-2">
-                        {/*<div className="flex items-center gap-1 font-semibold text-sm mb-1">
-                            Client & Transfer
-                        </div>*/}
-                        {/*<div>
-                            <strong>Bytes Sent (TX):</strong>{" "}
-                            {formatBytes(row.bytesTx)}
-                        </div>*/}
-                        {/*<div>
-                            <strong>Bytes Received (RX):</strong>{" "}
-                            {formatBytes(row.bytesRx)}
-                        </div>*/}
-                        {/*<div>
-                            <strong>Total Transfer:</strong>{" "}
-                            {formatBytes(
-                                (row.bytesTx ?? 0) + (row.bytesRx ?? 0)
-                            )}
-                        </div>*/}
                     </div>
+                    <div className="space-y-2" />
                 </div>
             </div>
         );
@@ -724,8 +565,8 @@ export default function ConnectionLogsPage() {
                 title={t("connectionLogs")}
                 searchPlaceholder={t("searchLogs")}
                 searchColumn="protocol"
-                onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                onRefresh={() => refetch()}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
@@ -737,14 +578,12 @@ export default function ConnectionLogsPage() {
                     id: "startedAt",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 pageSize={pageSize}
                 onPageChange={handlePageChange}
                 onPageSizeChange={handlePageSizeChange}
                 isLoading={isLoading}
-                // Row expansion props
                 expandable={true}
                 renderExpandedRow={renderExpandedRow}
                 disabled={
@@ -754,3 +593,49 @@ export default function ConnectionLogsPage() {
         </>
     );
 }
+
+function generateSampleConnectionLogs(): QueryConnectionAuditLogResponse["log"] {
+    const protocols = ["tcp", "udp", "icmp"];
+    const destAddrs = [
+        "10.0.0.1:22",
+        "10.0.0.2:80",
+        "10.0.0.3:443",
+        "192.168.1.10:3306"
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const startedAt = Math.floor(
+            sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+        );
+        const active = Math.random() > 0.3;
+
+        return {
+            sessionId: `session-${i}`,
+            siteResourceId: (i % 3) + 1,
+            orgId: "sample-org",
+            siteId: 1,
+            clientId: (i % 4) + 1,
+            clientEndpoint: `10.0.0.${i + 1}:51820`,
+            userId: i % 2 === 0 ? `user-${i}` : null,
+            sourceAddr: `192.168.1.${i + 1}:${40000 + i}`,
+            destAddr: destAddrs[Math.floor(Math.random() * destAddrs.length)],
+            protocol:
+                protocols[Math.floor(Math.random() * protocols.length)],
+            startedAt,
+            endedAt: active ? null : startedAt + Math.floor(Math.random() * 3600),
+            bytesTx: active ? null : Math.floor(Math.random() * 1024 * 1024),
+            bytesRx: active ? null : Math.floor(Math.random() * 1024 * 1024),
+            resourceName: `Resource ${(i % 3) + 1}`,
+            resourceNiceId: `resource-${(i % 3) + 1}`,
+            siteName: "Sample Site",
+            siteNiceId: "sample-site",
+            clientName: `Client ${(i % 4) + 1}`,
+            clientNiceId: `client-${(i % 4) + 1}`,
+            clientType: i % 2 === 0 ? "user" : "machine",
+            userEmail: i % 2 === 0 ? `user${i}@example.com` : null
+        };
+    });
+}

src/app/[orgId]/settings/logs/request/page.tsx

@@ -9,14 +9,17 @@ import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { useTranslations } from "next-intl";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { logQueries } from "@app/lib/queries";
 import { ColumnDef } from "@tanstack/react-table";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { ArrowUpRight, Key, Lock, Unlock, User } from "lucide-react";
 import Link from "next/link";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState, useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
 import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { build } from "@server/build";
+import type { QueryRequestAuditLogResponse } from "@server/routers/auditLogs/types";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -25,36 +28,11 @@ export default function GeneralPage() {
     const { orgId } = useParams();
     const searchParams = useSearchParams();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize("request-audit-logs", 20);
 
-    const [filterAttributes, setFilterAttributes] = useState<{
-        actors: string[];
-        resources: {
-            id: number;
-            name: string | null;
-        }[];
-        locations: string[];
-        hosts: string[];
-        paths: string[];
-    }>({
-        actors: [],
-        resources: [],
-        locations: [],
-        hosts: [],
-        paths: []
-    });
-
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         action?: string;
         resourceId?: string;
@@ -75,32 +53,18 @@ export default function GeneralPage() {
         path: searchParams.get("path") || undefined
     });
 
-    // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
-                    date: new Date(startParam)
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
+                startDate: { date: new Date(startParam) },
+                endDate: { date: new Date(endParam) }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
-                date: lastWeek
-            },
-            endDate: {
-                date: now
-            }
+            startDate: { date: getSevenDaysAgo() },
+            endDate: { date: new Date() }
         };
     };
 
@@ -109,80 +73,97 @@ export default function GeneralPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
-    useEffect(() => {
-        if (build === "oss") {
-            return;
+    const queryFilters = useMemo(() => {
+        let timeStart: string | undefined;
+        let timeEnd: string | undefined;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
         }
-        const defaultRange = getDefaultDateRange();
-        queryDateTime(
-            defaultRange.startDate,
-            defaultRange.endDate,
-            0,
-            pageSize
-        );
-    }, [orgId]); // Re-run if orgId changes
+
+        if (dateRange.endDate?.date) {
+            const dt = new Date(dateRange.endDate.date);
+            if (dateRange.endDate.time) {
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
+                dt.setHours(h, m, s || 0);
+            } else {
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters,
+            resourceId: filters.resourceId
+                ? Number(filters.resourceId)
+                : undefined
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.requests({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: build !== "oss"
+    });
+
+    const rows = isLoading ? generateSampleRequestLogs() : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = data?.filterAttributes ?? {
+        actors: [],
+        resources: [],
+        locations: [],
+        hosts: [],
+        paths: []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
-        // put the search params in the url for the time
+        setCurrentPage(0);
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+        setCurrentPage(0);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        console.log(`${filterType} filter changed:`, value);
-
-        // Create new filters object with updated value
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
+        const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
-
-        // Update URL params
+        setCurrentPage(0);
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -204,101 +185,6 @@ export default function GeneralPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: {
-            action?: string;
-            type?: string;
-        }
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/request`, { params });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                dateRange.endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
             // Prepare query params for export
@@ -781,8 +667,8 @@ export default function GeneralPage() {
                 title={t("requestLogs")}
                 searchPlaceholder={t("searchLogs")}
                 searchColumn="host"
-                onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                onRefresh={() => refetch()}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
@@ -794,7 +680,6 @@ export default function GeneralPage() {
                     id: "timestamp",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 onPageChange={handlePageChange}
@@ -808,3 +693,63 @@ export default function GeneralPage() {
         </>
     );
 }
+
+function generateSampleRequestLogs(): QueryRequestAuditLogResponse["log"] {
+    const methods = ["GET", "POST", "PUT", "DELETE", "PATCH"];
+    const paths = [
+        "/api/v1/users",
+        "/dashboard",
+        "/settings",
+        "/health",
+        "/metrics"
+    ];
+    const hosts = ["app.example.com", "api.example.com", "admin.example.com"];
+    const locations = ["US", "DE", "GB", "FR", "JP", "CA", "AU"];
+    const allowedReasons = [100, 101, 102, 103, 104, 105, 106, 107, 108];
+    const deniedReasons = [201, 202, 203, 204, 205, 299];
+    const actors = [
+        "alice@example.com",
+        "bob@example.com",
+        "carol@example.com",
+        null
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const action = Math.random() > 0.3;
+        const reason = action
+            ? allowedReasons[Math.floor(Math.random() * allowedReasons.length)]
+            : deniedReasons[Math.floor(Math.random() * deniedReasons.length)];
+        const actor = actors[Math.floor(Math.random() * actors.length)];
+
+        return {
+            timestamp: Math.floor(
+                sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+            ),
+            action,
+            reason,
+            orgId: "sample-org",
+            actorType: actor ? "user" : null,
+            actor,
+            actorId: actor ? `user-${i}` : null,
+            resourceId: Math.floor(Math.random() * 5) + 1,
+            siteResourceId: null,
+            resourceNiceId: `resource-${(i % 3) + 1}`,
+            resourceName: `Resource ${(i % 3) + 1}`,
+            ip: `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
+            location: locations[Math.floor(Math.random() * locations.length)],
+            userAgent: "Mozilla/5.0",
+            metadata: null,
+            headers: null,
+            query: null,
+            originalRequestURL: null,
+            scheme: "https",
+            host: hosts[Math.floor(Math.random() * hosts.length)],
+            path: paths[Math.floor(Math.random() * paths.length)],
+            method: methods[Math.floor(Math.random() * methods.length)],
+            tls: true
+        };
+    });
+}

src/app/[orgId]/settings/resources/client/page.tsx

@@ -127,7 +127,8 @@ export default async function ClientResourcesPage(
                 authDaemonPort: siteResource.authDaemonPort ?? null,
                 subdomain: siteResource.subdomain ?? null,
                 domainId: siteResource.domainId ?? null,
-                fullDomain: siteResource.fullDomain ?? null
+                fullDomain: siteResource.fullDomain ?? null,
+                labels: siteResource.labels ?? []
             };
         }
     );

src/app/[orgId]/settings/resources/proxy/page.tsx

@@ -111,6 +111,7 @@ export default async function ProxyResourcesPage(
             protocol: resource.protocol,
             proxyPort: resource.proxyPort,
             http: resource.http,
+            labels: resource.labels,
             authState: !resource.http
                 ? "none"
                 : resource.sso ||

src/app/[orgId]/settings/sites/page.tsx

@@ -60,6 +60,7 @@ export default async function SitesPage(props: SitesPageProps) {
         return {
             name: site.name,
             id: site.siteId,
+            labels: site.labels,
             nice: site.niceId.toString(),
             address: site.address?.split("/")[0],
             mbIn: formatSize(site.megabytesIn || 0, site.type),

src/app/navigation.tsx

@@ -23,6 +23,7 @@ import {
     Server,
     Settings,
     SquareMousePointer,
+    TagIcon,
     TicketCheck,
     Unplug,
     User,
@@ -99,7 +100,7 @@ export const orgNavSections = (
                 href: "/{orgId}/settings/domains",
                 icon: <Globe className="size-4 flex-none" />
             },
-            ...(build == "saas"
+            ...(build === "saas"
                 ? [
                       {
                           title: "sidebarRemoteExitNodes",
@@ -237,10 +238,19 @@ export const orgNavSections = (
                         title: "sidebarApiKeys",
                         href: "/{orgId}/settings/api-keys",
                         icon: <KeyRound className="size-4 flex-none" />
-                    }
+                    },
+                    ...(build !== "oss"
+                        ? [
+                              {
+                                  title: "labels",
+                                  href: "/{orgId}/settings/labels",
+                                  icon: <TagIcon className="size-4 flex-none" />
+                              }
+                          ]
+                        : [])
                 ]
             },
-            ...(build == "saas" && options?.isPrimaryOrg
+            ...(build === "saas" && options?.isPrimaryOrg
                 ? [
                       {
                           title: "sidebarBillingAndLicenses",

src/components/AuthPageBrandingForm.tsx

@@ -44,77 +44,11 @@ export type AuthPageCustomizationProps = {
 };
 
 const AuthPageFormSchema = z.object({
-    logoUrl: z.union([
-        z.literal(""),
-        z.string().superRefine(async (urlOrPath, ctx) => {
-            const parseResult = z.url().safeParse(urlOrPath);
-            if (!parseResult.success) {
-                if (build !== "enterprise") {
-                    ctx.addIssue({
-                        code: "custom",
-                        message: "Must be a valid URL"
-                    });
-                    return;
-                } else {
-                    try {
-                        validateLocalPath(urlOrPath);
-                    } catch (error) {
-                        ctx.addIssue({
-                            code: "custom",
-                            message:
-                                "Must be either a valid image URL or a valid pathname starting with `/` and not containing query parameters, `..` or `*`"
-                        });
-                    } finally {
-                        return;
-                    }
-                }
-            }
+    logoUrl: z
+        .string()
+        .optional()
+        .transform((val) => (val === "" ? undefined : val)),
 
-            try {
-                const response = await fetch(urlOrPath, {
-                    method: "HEAD"
-                }).catch(() => {
-                    // If HEAD fails (CORS or method not allowed), try GET
-                    return fetch(urlOrPath, { method: "GET" });
-                });
-
-                if (response.status !== 200) {
-                    ctx.addIssue({
-                        code: "custom",
-                        message: `Failed to load image. Please check that the URL is accessible.`
-                    });
-                    return;
-                }
-
-                const contentType = response.headers.get("content-type") ?? "";
-                if (!contentType.startsWith("image/")) {
-                    ctx.addIssue({
-                        code: "custom",
-                        message: `URL does not point to an image. Please provide a URL to an image file (e.g., .png, .jpg, .svg).`
-                    });
-                    return;
-                }
-            } catch (error) {
-                let errorMessage =
-                    "Unable to verify image URL. Please check that the URL is accessible and points to an image file.";
-
-                if (
-                    error instanceof TypeError &&
-                    error.message.includes("fetch")
-                ) {
-                    errorMessage =
-                        "Network error: Unable to reach the URL. Please check your internet connection and verify the URL is correct.";
-                } else if (error instanceof Error) {
-                    errorMessage = `Error verifying URL: ${error.message}`;
-                }
-
-                ctx.addIssue({
-                    code: "custom",
-                    message: errorMessage
-                });
-            }
-        })
-    ]),
     logoWidth: z.coerce.number<number>().min(1),
     logoHeight: z.coerce.number<number>().min(1),
     orgTitle: z.string().optional(),

src/components/ClientInfoCard.tsx

@@ -61,14 +61,14 @@ export default function SiteInfoCard({}: ClientInfoCardProps) {
                         <InfoSectionTitle>{t("status")}</InfoSectionTitle>
                         <InfoSectionContent>
                             {client.online ? (
-                                <div className="text-green-500 flex items-center space-x-2">
+                                <div className="flex items-center space-x-2">
                                     <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                                    <span>{t("online")}</span>
+                                    <span>{t("connected")}</span>
                                 </div>
                             ) : (
-                                <div className="text-neutral-500 flex items-center space-x-2">
+                                <div className="flex items-center space-x-2">
                                     <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
-                                    <span>{t("offline")}</span>
+                                    <span>{t("disconnected")}</span>
                                 </div>
                             )}
                         </InfoSectionContent>

src/components/ClientResourcesTable.tsx

@@ -2,7 +2,6 @@
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import CopyToClipboard from "@app/components/CopyToClipboard";
-import { DataTable } from "@app/components/ui/data-table";
 import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { Badge } from "@app/components/ui/badge";
 import { Button } from "@app/components/ui/button";
@@ -30,13 +29,21 @@ import {
     ChevronDown,
     ChevronsUpDownIcon,
     Funnel,
-    MoreHorizontal
+    MoreHorizontal,
+    PlusIcon
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Selectedsite, SitesSelector } from "@app/components/site-selector";
-import { useEffect, useMemo, useState, useTransition } from "react";
+import {
+    startTransition,
+    useEffect,
+    useMemo,
+    useOptimistic,
+    useState,
+    useTransition
+} from "react";
 import CreateInternalResourceDialog from "@app/components/CreateInternalResourceDialog";
 import EditInternalResourceDialog from "@app/components/EditInternalResourceDialog";
 import type { PaginationState } from "@tanstack/react-table";
@@ -53,6 +60,10 @@ import {
 } from "@app/components/ResourceSitesStatusCell";
 import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
 import { build } from "@server/build";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { LabelBadge } from "./label-badge";
+import { LabelsSelector, type SelectedLabel } from "./labels-selector";
 
 export type InternalResourceSiteRow = ResourceSiteRow;
 
@@ -84,6 +95,11 @@ export type InternalResourceRow = {
     subdomain?: string | null;
     domainId?: string | null;
     fullDomain?: string | null;
+    labels?: Array<{
+        labelId: number;
+        name: string;
+        color: string;
+    }>;
 };
 
 function formatDestinationDisplay(row: InternalResourceRow): string {
@@ -141,7 +157,10 @@ export default function ClientResourcesTable({
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
     const [siteFilterOpen, setSiteFilterOpen] = useState(false);
 
-    const [isRefreshing, startTransition] = useTransition();
+    const [isRefreshing, startRefreshTransition] = useTransition();
+
+    const { isPaidUser } = usePaidStatus();
+    const isLabelFeatureEnabled = isPaidUser(tierMatrix.labels);
 
     useEffect(() => {
         const interval = setInterval(() => {
@@ -167,7 +186,7 @@ export default function ClientResourcesTable({
     }, [initialFilterSite, siteIdQ, siteIdNum, t]);
 
     const refreshData = () => {
-        startTransition(() => {
+        startRefreshTransition(() => {
             try {
                 router.refresh();
             } catch (error) {
@@ -185,8 +204,8 @@ export default function ClientResourcesTable({
         siteId: number
     ) => {
         try {
-            await api.delete(`/site-resource/${resourceId}`).then(() => {
-                startTransition(() => {
+            startTransition(async () => {
+                await api.delete(`/site-resource/${resourceId}`).then(() => {
                     router.refresh();
                     setIsDeleteModalOpen(false);
                 });
@@ -254,296 +273,333 @@ export default function ClientResourcesTable({
         );
     }
 
-    const internalColumns: ExtendedColumnDef<InternalResourceRow>[] = [
-        {
-            accessorKey: "name",
-            enableHiding: false,
-            friendlyName: t("name"),
-            header: () => {
-                const nameOrder = getSortDirection("name", searchParams);
-                const Icon =
-                    nameOrder === "asc"
-                        ? ArrowDown01Icon
-                        : nameOrder === "desc"
-                          ? ArrowUp10Icon
-                          : ChevronsUpDownIcon;
+    const internalColumns = useMemo<
+        ExtendedColumnDef<InternalResourceRow>[]
+    >(() => {
+        const cols: ExtendedColumnDef<InternalResourceRow>[] = [
+            {
+                accessorKey: "name",
+                enableHiding: false,
+                friendlyName: t("name"),
+                header: () => {
+                    const nameOrder = getSortDirection("name", searchParams);
+                    const Icon =
+                        nameOrder === "asc"
+                            ? ArrowDown01Icon
+                            : nameOrder === "desc"
+                              ? ArrowUp10Icon
+                              : ChevronsUpDownIcon;
 
-                return (
-                    <Button
-                        variant="ghost"
-                        className="p-3"
-                        onClick={() => toggleSort("name")}
-                    >
-                        {t("name")}
-                        <Icon className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            id: "niceId",
-            accessorKey: "niceId",
-            friendlyName: t("identifier"),
-            enableHiding: true,
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("identifier")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            },
-            cell: ({ row }) => {
-                return <span>{row.original.niceId || "-"}</span>;
-            }
-        },
-        {
-            id: "sites",
-            accessorFn: (row) => row.sites.map((s) => s.siteName).join(", "),
-            friendlyName: t("sites"),
-            header: () => (
-                <Popover open={siteFilterOpen} onOpenChange={setSiteFilterOpen}>
-                    <PopoverTrigger asChild>
+                    return (
                         <Button
-                            type="button"
                             variant="ghost"
-                            role="combobox"
-                            className={cn(
-                                "justify-between text-sm h-8 px-2 w-full p-3",
-                                !selectedSite && "text-muted-foreground"
-                            )}
+                            className="p-3"
+                            onClick={() => toggleSort("name")}
                         >
-                            <div className="flex items-center gap-2 min-w-0">
-                                {t("sites")}
-                                <Funnel className="size-4 flex-none" />
-                                {selectedSite && (
-                                    <Badge
-                                        className="truncate max-w-[10rem]"
-                                        variant="secondary"
-                                    >
-                                        {selectedSite.name}
-                                    </Badge>
-                                )}
-                            </div>
+                            {t("name")}
+                            <Icon className="ml-2 h-4 w-4" />
                         </Button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                        className={dataTableFilterPopoverContentClassName}
-                        align="start"
+                    );
+                }
+            },
+            {
+                id: "niceId",
+                accessorKey: "niceId",
+                friendlyName: t("identifier"),
+                enableHiding: true,
+                header: ({ column }) => {
+                    return (
+                        <Button
+                            variant="ghost"
+                            onClick={() =>
+                                column.toggleSorting(
+                                    column.getIsSorted() === "asc"
+                                )
+                            }
+                        >
+                            {t("identifier")}
+                            <ArrowUpDown className="ml-2 h-4 w-4" />
+                        </Button>
+                    );
+                },
+                cell: ({ row }) => {
+                    return <span>{row.original.niceId || "-"}</span>;
+                }
+            },
+            {
+                id: "sites",
+                accessorFn: (row) =>
+                    row.sites.map((s) => s.siteName).join(", "),
+                friendlyName: t("sites"),
+                header: () => (
+                    <Popover
+                        open={siteFilterOpen}
+                        onOpenChange={setSiteFilterOpen}
                     >
-                        <div className="border-b p-1">
+                        <PopoverTrigger asChild>
                             <Button
                                 type="button"
                                 variant="ghost"
-                                size="sm"
-                                className="h-8 w-full justify-start font-normal"
-                                onClick={clearSiteFilter}
+                                role="combobox"
+                                className={cn(
+                                    "justify-between text-sm h-8 px-2 w-full p-3",
+                                    !selectedSite && "text-muted-foreground"
+                                )}
                             >
-                                {t("standaloneHcFilterAnySite")}
+                                <div className="flex items-center gap-2 min-w-0">
+                                    {t("sites")}
+                                    <Funnel className="size-4 flex-none" />
+                                    {selectedSite && (
+                                        <Badge
+                                            className="truncate max-w-[10rem]"
+                                            variant="secondary"
+                                        >
+                                            {selectedSite.name}
+                                        </Badge>
+                                    )}
+                                </div>
                             </Button>
-                        </div>
-                        <SitesSelector
-                            orgId={orgId}
-                            selectedSite={selectedSite}
-                            onSelectSite={onPickSite}
+                        </PopoverTrigger>
+                        <PopoverContent
+                            className={dataTableFilterPopoverContentClassName}
+                            align="start"
+                        >
+                            <div className="border-b p-1">
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-8 w-full justify-start font-normal"
+                                    onClick={clearSiteFilter}
+                                >
+                                    {t("standaloneHcFilterAnySite")}
+                                </Button>
+                            </div>
+                            <SitesSelector
+                                orgId={orgId}
+                                selectedSite={selectedSite}
+                                onSelectSite={onPickSite}
+                            />
+                        </PopoverContent>
+                    </Popover>
+                ),
+                cell: ({ row }) => {
+                    const resourceRow = row.original;
+                    return (
+                        <ResourceSitesStatusCell
+                            orgId={resourceRow.orgId}
+                            resourceSites={resourceRow.sites}
                         />
-                    </PopoverContent>
-                </Popover>
-            ),
-            cell: ({ row }) => {
-                const resourceRow = row.original;
-                return (
-                    <ResourceSitesStatusCell
-                        orgId={resourceRow.orgId}
-                        resourceSites={resourceRow.sites}
-                    />
-                );
-            }
-        },
-        {
-            accessorKey: "mode",
-            friendlyName: t("editInternalResourceDialogMode"),
-            header: () => (
-                <ColumnFilterButton
-                    options={[
-                        {
-                            value: "host",
-                            label: t("editInternalResourceDialogModeHost")
-                        },
-                        {
-                            value: "cidr",
-                            label: t("editInternalResourceDialogModeCidr")
-                        },
-                        {
-                            value: "http",
-                            label: t("editInternalResourceDialogModeHttp")
+                    );
+                }
+            },
+            {
+                accessorKey: "mode",
+                friendlyName: t("editInternalResourceDialogMode"),
+                header: () => (
+                    <ColumnFilterButton
+                        options={[
+                            {
+                                value: "host",
+                                label: t("editInternalResourceDialogModeHost")
+                            },
+                            {
+                                value: "cidr",
+                                label: t("editInternalResourceDialogModeCidr")
+                            },
+                            {
+                                value: "http",
+                                label: t("editInternalResourceDialogModeHttp")
+                            }
+                        ]}
+                        selectedValue={searchParams.get("mode") ?? undefined}
+                        onValueChange={(value) =>
+                            handleFilterChange("mode", value)
                         }
-                    ]}
-                    selectedValue={searchParams.get("mode") ?? undefined}
-                    onValueChange={(value) => handleFilterChange("mode", value)}
-                    searchPlaceholder={t("searchPlaceholder")}
-                    emptyMessage={t("emptySearchOptions")}
-                    label={t("editInternalResourceDialogMode")}
-                    className="p-3"
-                />
-            ),
-            cell: ({ row }) => {
-                const resourceRow = row.original;
-                const modeLabels: Record<
-                    "host" | "cidr" | "port" | "http",
-                    string
-                > = {
-                    host: t("editInternalResourceDialogModeHost"),
-                    cidr: t("editInternalResourceDialogModeCidr"),
-                    port: t("editInternalResourceDialogModePort"),
-                    http: t("editInternalResourceDialogModeHttp")
-                };
-                return <span>{modeLabels[resourceRow.mode]}</span>;
-            }
-        },
-        {
-            accessorKey: "destination",
-            friendlyName: t("resourcesTableDestination"),
-            header: () => (
-                <span className="p-3">{t("resourcesTableDestination")}</span>
-            ),
-            cell: ({ row }) => {
-                const resourceRow = row.original;
-                const display = formatDestinationDisplay(resourceRow);
-                return (
-                    <CopyToClipboard
-                        text={display}
-                        isLink={false}
-                        displayText={display}
+                        searchPlaceholder={t("searchPlaceholder")}
+                        emptyMessage={t("emptySearchOptions")}
+                        label={t("editInternalResourceDialogMode")}
+                        className="p-3"
                     />
-                );
-            }
-        },
-        {
-            accessorKey: "alias",
-            friendlyName: t("resourcesTableAlias"),
-            header: () => (
-                <span className="p-3">{t("resourcesTableAlias")}</span>
-            ),
-            cell: ({ row }) => {
-                const resourceRow = row.original;
-                if (resourceRow.mode === "host" && resourceRow.alias) {
+                ),
+                cell: ({ row }) => {
+                    const resourceRow = row.original;
+                    const modeLabels: Record<
+                        "host" | "cidr" | "port" | "http",
+                        string
+                    > = {
+                        host: t("editInternalResourceDialogModeHost"),
+                        cidr: t("editInternalResourceDialogModeCidr"),
+                        port: t("editInternalResourceDialogModePort"),
+                        http: t("editInternalResourceDialogModeHttp")
+                    };
+                    return <span>{modeLabels[resourceRow.mode]}</span>;
+                }
+            },
+            {
+                accessorKey: "destination",
+                friendlyName: t("resourcesTableDestination"),
+                header: () => (
+                    <span className="p-3">
+                        {t("resourcesTableDestination")}
+                    </span>
+                ),
+                cell: ({ row }) => {
+                    const resourceRow = row.original;
+                    const display = formatDestinationDisplay(resourceRow);
                     return (
                         <CopyToClipboard
-                            text={resourceRow.alias}
+                            text={display}
                             isLink={false}
-                            displayText={resourceRow.alias}
+                            displayText={display}
                         />
                     );
                 }
-                if (resourceRow.mode === "http") {
-                    const domainId = resourceRow.domainId;
-                    const fullDomain = resourceRow.fullDomain;
-                    const url = `${resourceRow.ssl ? "https" : "http"}://${fullDomain}`;
-                    const did =
-                        build !== "oss" &&
-                        resourceRow.ssl &&
-                        domainId != null &&
-                        domainId !== "" &&
-                        fullDomain != null &&
-                        fullDomain !== "";
+            },
+            {
+                accessorKey: "alias",
+                friendlyName: t("resourcesTableAlias"),
+                header: () => (
+                    <span className="p-3">{t("resourcesTableAlias")}</span>
+                ),
+                cell: ({ row }) => {
+                    const resourceRow = row.original;
+                    if (resourceRow.mode === "host" && resourceRow.alias) {
+                        return (
+                            <CopyToClipboard
+                                text={resourceRow.alias}
+                                isLink={false}
+                                displayText={resourceRow.alias}
+                            />
+                        );
+                    }
+                    if (resourceRow.mode === "http") {
+                        const domainId = resourceRow.domainId;
+                        const fullDomain = resourceRow.fullDomain;
+                        const url = `${resourceRow.ssl ? "https" : "http"}://${fullDomain}`;
+                        const did =
+                            build !== "oss" &&
+                            resourceRow.ssl &&
+                            domainId != null &&
+                            domainId !== "" &&
+                            fullDomain != null &&
+                            fullDomain !== "";
 
-                    return (
-                        <div className="flex items-center gap-2 min-w-0">
-                            {did ? (
-                                <ResourceAccessCertIndicator
-                                    orgId={resourceRow.orgId}
-                                    domainId={domainId}
-                                    fullDomain={fullDomain}
-                                />
-                            ) : null}
-                            <div className="">
-                                <CopyToClipboard
-                                    text={url}
-                                    isLink={isSafeUrlForLink(url)}
-                                    displayText={url}
-                                />
+                        return (
+                            <div className="flex items-center gap-2 min-w-0">
+                                {did ? (
+                                    <ResourceAccessCertIndicator
+                                        orgId={resourceRow.orgId}
+                                        domainId={domainId}
+                                        fullDomain={fullDomain}
+                                    />
+                                ) : null}
+                                <div className="">
+                                    <CopyToClipboard
+                                        text={url}
+                                        isLink={isSafeUrlForLink(url)}
+                                        displayText={url}
+                                    />
+                                </div>
                             </div>
+                        );
+                    }
+                    return <span>-</span>;
+                }
+            },
+            {
+                accessorKey: "aliasAddress",
+                friendlyName: t("resourcesTableAliasAddress"),
+                enableHiding: true,
+                header: () => (
+                    <div className="flex items-center gap-2 p-3">
+                        <span>{t("resourcesTableAliasAddress")}</span>
+                        <InfoPopup info={t("resourcesTableAliasAddressInfo")} />
+                    </div>
+                ),
+                cell: ({ row }) => {
+                    const resourceRow = row.original;
+                    return resourceRow.aliasAddress ? (
+                        <CopyToClipboard
+                            text={resourceRow.aliasAddress}
+                            isLink={false}
+                            displayText={resourceRow.aliasAddress}
+                        />
+                    ) : (
+                        <span>-</span>
+                    );
+                }
+            },
+            {
+                id: "actions",
+                enableHiding: false,
+                header: () => <span className="p-3"></span>,
+                cell: ({ row }) => {
+                    const resourceRow = row.original;
+                    return (
+                        <div className="flex items-center gap-2 justify-end">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button
+                                        variant="ghost"
+                                        className="h-8 w-8 p-0"
+                                    >
+                                        <span className="sr-only">
+                                            {t("openMenu")}
+                                        </span>
+                                        <MoreHorizontal className="h-4 w-4" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            setSelectedInternalResource(
+                                                resourceRow
+                                            );
+                                            setIsDeleteModalOpen(true);
+                                        }}
+                                    >
+                                        <span className="text-red-500">
+                                            {t("delete")}
+                                        </span>
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                            <Button
+                                variant={"outline"}
+                                onClick={() => {
+                                    setEditingResource(resourceRow);
+                                    setIsEditDialogOpen(true);
+                                }}
+                            >
+                                {t("edit")}
+                            </Button>
                         </div>
                     );
                 }
-                return <span>-</span>;
             }
-        },
-        {
-            accessorKey: "aliasAddress",
-            friendlyName: t("resourcesTableAliasAddress"),
-            enableHiding: true,
-            header: () => (
-                <div className="flex items-center gap-2 p-3">
-                    <span>{t("resourcesTableAliasAddress")}</span>
-                    <InfoPopup info={t("resourcesTableAliasAddressInfo")} />
-                </div>
-            ),
-            cell: ({ row }) => {
-                const resourceRow = row.original;
-                return resourceRow.aliasAddress ? (
-                    <CopyToClipboard
-                        text={resourceRow.aliasAddress}
-                        isLink={false}
-                        displayText={resourceRow.aliasAddress}
+        ];
+
+        if (isLabelFeatureEnabled) {
+            cols.splice(cols.length - 1, 0, {
+                id: "labels",
+                accessorKey: "labels",
+                header: () => (
+                    <span className="p-3 text-end w-full inline-block">
+                        {t("labels")}
+                    </span>
+                ),
+                cell: ({ row }: { row: { original: InternalResourceRow } }) => (
+                    <ClientResourceLabelCell
+                        resource={row.original}
+                        orgId={orgId}
                     />
-                ) : (
-                    <span>-</span>
-                );
-            }
-        },
-        {
-            id: "actions",
-            enableHiding: false,
-            header: () => <span className="p-3"></span>,
-            cell: ({ row }) => {
-                const resourceRow = row.original;
-                return (
-                    <div className="flex items-center gap-2 justify-end">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="h-8 w-8 p-0">
-                                    <span className="sr-only">
-                                        {t("openMenu")}
-                                    </span>
-                                    <MoreHorizontal className="h-4 w-4" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        setSelectedInternalResource(
-                                            resourceRow
-                                        );
-                                        setIsDeleteModalOpen(true);
-                                    }}
-                                >
-                                    <span className="text-red-500">
-                                        {t("delete")}
-                                    </span>
-                                </DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                        <Button
-                            variant={"outline"}
-                            onClick={() => {
-                                setEditingResource(resourceRow);
-                                setIsEditDialogOpen(true);
-                            }}
-                        >
-                            {t("edit")}
-                        </Button>
-                    </div>
-                );
-            }
+                )
+            });
         }
-    ];
+
+        return cols;
+    }, [isLabelFeatureEnabled, orgId, t, searchParams]);
 
     function handleFilterChange(
         column: string,
@@ -638,7 +694,8 @@ export default function ClientResourcesTable({
                 enableColumnVisibility
                 columnVisibility={{
                     niceId: false,
-                    aliasAddress: false
+                    aliasAddress: false,
+                    labels: false
                 }}
                 stickyLeftColumn="name"
                 stickyRightColumn="actions"
@@ -674,3 +731,101 @@ export default function ClientResourcesTable({
         </>
     );
 }
+
+type ClientResourceLabelCellProps = {
+    resource: InternalResourceRow;
+    orgId: string;
+};
+
+function ClientResourceLabelCell({
+    resource,
+    orgId
+}: ClientResourceLabelCellProps) {
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const router = useRouter();
+
+    const labels = resource.labels ?? [];
+    const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels);
+
+    function toggleResourceLabel(
+        label: SelectedLabel,
+        action: "attach" | "detach"
+    ) {
+        startTransition(async () => {
+            try {
+                if (action === "attach") {
+                    setOptimisticLabels([...optimisticLabels, label]);
+                    await api.put(
+                        `/org/${orgId}/label/${label.labelId}/attach`,
+                        { siteResourceId: resource.id }
+                    );
+                } else {
+                    setOptimisticLabels(
+                        optimisticLabels.filter(
+                            (lb) => lb.labelId !== label.labelId
+                        )
+                    );
+                    await api.put(
+                        `/org/${orgId}/label/${label.labelId}/detach`,
+                        { siteResourceId: resource.id }
+                    );
+                }
+            } catch (e) {
+                toast({
+                    title: t("error"),
+                    description: formatAxiosError(e, t("errorOccurred")),
+                    variant: "destructive"
+                });
+            } finally {
+                router.refresh();
+            }
+        });
+    }
+
+    return (
+        <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
+            {optimisticLabels.slice(0, 3).map((label) => (
+                <LabelBadge
+                    key={label.labelId}
+                    onClick={() => setIsPopoverOpen(true)}
+                    {...label}
+                />
+            ))}
+            {optimisticLabels.length > 3 && (
+                <Button
+                    variant="outline"
+                    className={cn(
+                        "inline-flex gap-1 items-center",
+                        "rounded-full text-sm cursor-pointer",
+                        "px-1.5 py-0 h-auto"
+                    )}
+                    onClick={() => setIsPopoverOpen(true)}
+                >
+                    +{optimisticLabels.length - 3}
+                </Button>
+            )}
+            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        size="icon"
+                        variant="outline"
+                        className="p-1 size-auto rounded-full"
+                        title={t("addLabels")}
+                    >
+                        <span className="sr-only">{t("addLabels")}</span>
+                        <PlusIcon className="size-3" />
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent align="center" className="p-0 w-full">
+                    <LabelsSelector
+                        orgId={orgId}
+                        selectedLabels={optimisticLabels}
+                        toggleLabel={toggleResourceLabel}
+                    />
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+}

src/components/CreateInternalResourceDialog.tsx

@@ -16,7 +16,7 @@ import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { useState, useTransition } from "react";
 import {
     cleanForFQDN,
     InternalResourceForm,
@@ -39,30 +39,30 @@ export default function CreateInternalResourceDialog({
 }: CreateInternalResourceDialogProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
-    const [isSubmitting, setIsSubmitting] = useState(false);
     const [isHttpModeDisabled, setIsHttpModeDisabled] = useState(false);
+    const [isSubmitting, startTransition] = useTransition();
 
-    async function handleSubmit(values: InternalResourceFormValues) {
-        setIsSubmitting(true);
-        try {
-            let data = { ...values };
-            if (
-                (data.mode === "host" || data.mode === "http") &&
-                isHostname(data.destination)
-            ) {
-                const currentAlias = data.alias?.trim() || "";
-                if (!currentAlias) {
-                    let aliasValue = data.destination;
-                    if (data.destination.toLowerCase() === "localhost") {
-                        aliasValue = `${cleanForFQDN(data.name)}.internal`;
+    function handleSubmit(values: InternalResourceFormValues) {
+        startTransition(async () => {
+            try {
+                let data = { ...values };
+                if (
+                    (data.mode === "host" || data.mode === "http") &&
+                    isHostname(data.destination)
+                ) {
+                    const currentAlias = data.alias?.trim() || "";
+                    if (!currentAlias) {
+                        let aliasValue = data.destination;
+                        if (data.destination.toLowerCase() === "localhost") {
+                            aliasValue = `${cleanForFQDN(data.name)}.internal`;
+                        }
+                        data = { ...data, alias: aliasValue };
                     }
-                    data = { ...data, alias: aliasValue };
                 }
-            }
 
-            await api.put<AxiosResponse<{ data: { siteResourceId: number } }>>(
-                `/org/${orgId}/site-resource`,
-                {
+                await api.put<
+                    AxiosResponse<{ data: { siteResourceId: number } }>
+                >(`/org/${orgId}/site-resource`, {
                     name: data.name,
                     siteIds: data.siteIds,
                     mode: data.mode,
@@ -106,32 +106,30 @@ export default function CreateInternalResourceDialog({
                     clientIds: data.clients
                         ? data.clients.map((c) => parseInt(c.id))
                         : []
-                }
-            );
+                });
 
-            toast({
-                title: t("createInternalResourceDialogSuccess"),
-                description: t(
-                    "createInternalResourceDialogInternalResourceCreatedSuccessfully"
-                ),
-                variant: "default"
-            });
-            setOpen(false);
-            onSuccess?.();
-        } catch (error) {
-            toast({
-                title: t("createInternalResourceDialogError"),
-                description: formatAxiosError(
-                    error,
-                    t(
-                        "createInternalResourceDialogFailedToCreateInternalResource"
-                    )
-                ),
-                variant: "destructive"
-            });
-        } finally {
-            setIsSubmitting(false);
-        }
+                toast({
+                    title: t("createInternalResourceDialogSuccess"),
+                    description: t(
+                        "createInternalResourceDialogInternalResourceCreatedSuccessfully"
+                    ),
+                    variant: "default"
+                });
+                setOpen(false);
+                onSuccess?.();
+            } catch (error) {
+                toast({
+                    title: t("createInternalResourceDialogError"),
+                    description: formatAxiosError(
+                        error,
+                        t(
+                            "createInternalResourceDialogFailedToCreateInternalResource"
+                        )
+                    ),
+                    variant: "destructive"
+                });
+            }
+        });
     }
 
     return (

src/components/CreateOrgLabelDialog.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import type { CreateOrEditLabelResponse } from "@server/routers/labels/types";
+import type { AxiosResponse } from "axios";
+import { useTranslations } from "next-intl";
+import { useTransition } from "react";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "./Credenza";
+import { OrgLabelForm } from "./OrgLabelForm";
+import { Button } from "./ui/button";
+
+export type CreateOrgLabelDialogProps = {
+    open: boolean;
+    setOpen: (val: boolean) => void;
+    orgId: string;
+    onSuccess?: () => void;
+};
+
+export function CreateOrgLabelDialog({
+    open,
+    setOpen,
+    orgId,
+    onSuccess
+}: CreateOrgLabelDialogProps) {
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const [isSubmitting, startTransition] = useTransition();
+
+    async function createOrgLabel(data: { name: string; color: string }) {
+        try {
+            const res = await api.post<
+                AxiosResponse<CreateOrEditLabelResponse>
+            >(`/org/${orgId}/labels`, data);
+
+            if (res.status === 201) {
+                setOpen(false);
+                onSuccess?.();
+
+                toast({
+                    title: t("success"),
+                    description: t("labelCreateSuccessMessage")
+                });
+            }
+        } catch (e) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(e, t("errorOccurred")),
+                variant: "destructive"
+            });
+        }
+    }
+
+    return (
+        <Credenza open={open} onOpenChange={setOpen}>
+            <CredenzaContent className="md:max-w-md">
+                <CredenzaHeader>
+                    <CredenzaTitle>{t("createLabelDialogTitle")}</CredenzaTitle>
+                    <CredenzaDescription>
+                        {t("createLabelDialogDescription")}
+                    </CredenzaDescription>
+                </CredenzaHeader>
+                <CredenzaBody>
+                    <OrgLabelForm
+                        onSubmit={(data) => {
+                            startTransition(async () => createOrgLabel(data));
+                        }}
+                    />
+                </CredenzaBody>
+                <CredenzaFooter>
+                    <CredenzaClose asChild>
+                        <Button
+                            variant="outline"
+                            onClick={() => setOpen(false)}
+                            disabled={isSubmitting}
+                        >
+                            {t("cancel")}
+                        </Button>
+                    </CredenzaClose>
+                    <Button
+                        type="submit"
+                        form="org-label-form"
+                        disabled={isSubmitting}
+                        loading={isSubmitting}
+                    >
+                        {t("labelCreate")}
+                    </Button>
+                </CredenzaFooter>
+            </CredenzaContent>
+        </Credenza>
+    );
+}

src/components/DeviceLoginForm.tsx

@@ -318,12 +318,28 @@ export default function DeviceLoginForm({
                                     <FormControl>
                                         <div className="flex justify-center">
                                             <InputOTP
-                                                maxLength={9}
+                                                maxLength={8}
                                                 pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
                                                 {...field}
                                                 value={field.value
                                                     .replace(/-/g, "")
                                                     .toUpperCase()}
+                                                onPaste={(event) => {
+                                                    event.preventDefault();
+                                                    const pastedText =
+                                                        event.clipboardData.getData(
+                                                            "text"
+                                                        );
+                                                    const cleanedValue =
+                                                        pastedText
+                                                            .replace(
+                                                                /[^a-zA-Z0-9]/g,
+                                                                ""
+                                                            )
+                                                            .toUpperCase()
+                                                            .slice(0, 8);
+                                                    field.onChange(cleanedValue);
+                                                }}
                                                 onChange={(value) => {
                                                     // Strip hyphens and convert to uppercase
                                                     const cleanedValue = value

src/components/EditOrgLabelDialog.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import type { CreateOrEditLabelResponse } from "@server/routers/labels/types";
+import type { AxiosResponse } from "axios";
+import { useTranslations } from "next-intl";
+import { useTransition } from "react";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "./Credenza";
+import { OrgLabelForm } from "./OrgLabelForm";
+import { Button } from "./ui/button";
+
+export type EditOrgLabelDialogProps = {
+    open: boolean;
+    setOpen: (val: boolean) => void;
+    orgId: string;
+    onSuccess?: () => void;
+    label: {
+        name: string;
+        color: string;
+        labelId: number;
+    };
+};
+
+export function EditOrgLabelDialog({
+    open,
+    setOpen,
+    orgId,
+    onSuccess,
+    label
+}: EditOrgLabelDialogProps) {
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const [isSubmitting, startTransition] = useTransition();
+
+    async function editOrgLabel(data: { name: string; color: string }) {
+        try {
+            const res = await api.patch<
+                AxiosResponse<CreateOrEditLabelResponse>
+            >(`/org/${orgId}/label/${label.labelId}`, data);
+
+            if (res.status === 200) {
+                setOpen(false);
+                onSuccess?.();
+
+                toast({
+                    title: t("success"),
+                    description: t("labelEditSuccessMessage")
+                });
+            }
+        } catch (e) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(e, t("errorOccurred")),
+                variant: "destructive"
+            });
+        }
+    }
+
+    return (
+        <Credenza open={open} onOpenChange={setOpen}>
+            <CredenzaContent className="md:max-w-md">
+                <CredenzaHeader>
+                    <CredenzaTitle>{t("editLabelDialogTitle")}</CredenzaTitle>
+                    <CredenzaDescription>
+                        {t("editLabelDialogDescription")}
+                    </CredenzaDescription>
+                </CredenzaHeader>
+                <CredenzaBody>
+                    <OrgLabelForm
+                        defaultValue={label}
+                        onSubmit={(data) => {
+                            startTransition(async () => editOrgLabel(data));
+                        }}
+                    />
+                </CredenzaBody>
+                <CredenzaFooter>
+                    <CredenzaClose asChild>
+                        <Button
+                            variant="outline"
+                            onClick={() => setOpen(false)}
+                            disabled={isSubmitting}
+                        >
+                            {t("cancel")}
+                        </Button>
+                    </CredenzaClose>
+                    <Button
+                        type="submit"
+                        form="org-label-form"
+                        disabled={isSubmitting}
+                        loading={isSubmitting}
+                    >
+                        {t("labelEdit")}
+                    </Button>
+                </CredenzaFooter>
+            </CredenzaContent>
+        </Credenza>
+    );
+}

src/components/ExitNodeInfoCard.tsx

@@ -26,12 +26,12 @@ export default function ExitNodeInfoCard({}: ExitNodeInfoCardProps) {
                             <InfoSectionTitle>{t("status")}</InfoSectionTitle>
                             <InfoSectionContent>
                                 {remoteExitNode.online ? (
-                                    <div className="text-green-500 flex items-center space-x-2">
+                                    <div className="flex items-center space-x-2">
                                         <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                                         <span>{t("online")}</span>
                                     </div>
                                 ) : (
-                                    <div className="text-neutral-500 flex items-center space-x-2">
+                                    <div className="flex items-center space-x-2">
                                         <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
                                         <span>{t("offline")}</span>
                                     </div>

src/components/ExitNodesTable.tsx

@@ -140,14 +140,14 @@ export default function ExitNodesTable({
                 const originalRow = row.original;
                 if (originalRow.online) {
                     return (
-                        <span className="text-green-500 flex items-center space-x-2">
+                        <span className="flex items-center space-x-2">
                             <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                             <span>{t("online")}</span>
                         </span>
                     );
                 } else {
                     return (
-                        <span className="text-neutral-500 flex items-center space-x-2">
+                        <span className="flex items-center space-x-2">
                             <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
                             <span>{t("offline")}</span>
                         </span>

src/components/HealthChecksTable.tsx

@@ -519,21 +519,21 @@ export default function HealthChecksTable({
                 const health = row.original.hcHealth;
                 if (health === "healthy") {
                     return (
-                        <span className="text-green-500 flex items-center space-x-2">
+                        <span className="flex items-center space-x-2">
                             <div className="w-2 h-2 bg-green-500 rounded-full" />
                             <span>{t("standaloneHcHealthStateHealthy")}</span>
                         </span>
                     );
                 } else if (health === "unhealthy") {
                     return (
-                        <span className="text-red-500 flex items-center space-x-2">
+                        <span className="flex items-center space-x-2">
                             <div className="w-2 h-2 bg-red-500 rounded-full" />
                             <span>{t("standaloneHcHealthStateUnhealthy")}</span>
                         </span>
                     );
                 } else {
                     return (
-                        <span className="text-neutral-500 flex items-center space-x-2">
+                        <span className="flex items-center space-x-2">
                             <div className="w-2 h-2 bg-neutral-500 rounded-full" />
                             <span>{t("standaloneHcHealthStateUnknown")}</span>
                         </span>

src/components/LogDataTable.tsx

@@ -28,6 +28,7 @@ import {
     ChevronRight,
     Download,
     Loader,
+    LoaderIcon,
     RefreshCw
 } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -427,7 +428,7 @@ export function LogDataTable<TData, TValue>({
                         )}
                     </div>
                 </CardHeader>
-                <CardContent>
+                <CardContent className="relative">
                     <Table>
                         <TableHeader>
                             {table.getHeaderGroups().map((headerGroup) => (
@@ -535,6 +536,19 @@ export function LogDataTable<TData, TValue>({
                             )}
                         </TableBody>
                     </Table>
+
+                    {isLoading && (
+                        <>
+                            <div className="backdrop-blur-[3px] z-10 absolute inset-0 top-10"></div>
+                            <div className="absolute z-20 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 border border-border rounded-md bg-muted">
+                                <div className="flex items-center gap-2 p-6">
+                                    <LoaderIcon className="size-4 animate-spin" />
+                                    {t("loadingEllipsis")}
+                                </div>
+                            </div>
+                        </>
+                    )}
+
                     <div className="mt-4">
                         <DataTablePagination
                             table={table}

src/components/MachineClientsTable.tsx

@@ -10,8 +10,11 @@ import {
     DropdownMenuTrigger
 } from "@app/components/ui/dropdown-menu";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { cn } from "@app/lib/cn";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import {
     ArrowRight,
     ArrowUpDown,
@@ -19,12 +22,26 @@ import {
     CircleSlash,
     ArrowDown01Icon,
     ArrowUp10Icon,
-    ChevronsUpDownIcon
+    ChevronsUpDownIcon,
+    PlusIcon
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useMemo, useState, useTransition } from "react";
+import {
+    startTransition,
+    useMemo,
+    useOptimistic,
+    useState,
+    useTransition
+} from "react";
+import { LabelBadge } from "./label-badge";
+import { LabelsSelector, type SelectedLabel } from "./labels-selector";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "./ui/popover";
 import { Badge } from "./ui/badge";
 import type { PaginationState } from "@tanstack/react-table";
 import { ControlledDataTable } from "./ui/controlled-data-table";
@@ -53,6 +70,11 @@ export type ClientRow = {
     archived?: boolean;
     blocked?: boolean;
     approvalState: "approved" | "pending" | "denied";
+    labels?: Array<{
+        labelId: number;
+        name: string;
+        color: string;
+    }>;
 };
 
 type ClientTableProps = {
@@ -84,17 +106,21 @@ export default function MachineClientsTable({
     );
 
     const api = createApiClient(useEnvContext());
-    const [isRefreshing, startTransition] = useTransition();
+    const [isRefreshing, startRefreshTransition] = useTransition();
     const [isNavigatingToAddPage, startNavigation] = useTransition();
 
+    const { isPaidUser } = usePaidStatus();
+    const isLabelFeatureEnabled = isPaidUser(tierMatrix.labels);
+
     const defaultMachineColumnVisibility = {
         subnet: false,
         userId: false,
-        niceId: false
+        niceId: false,
+        labels: false
     };
 
     const refreshData = () => {
-        startTransition(() => {
+        startRefreshTransition(() => {
             try {
                 router.refresh();
             } catch (error) {
@@ -285,14 +311,14 @@ export default function MachineClientsTable({
                     const originalRow = row.original;
                     if (originalRow.online) {
                         return (
-                            <span className="text-green-500 flex items-center space-x-2">
+                            <span className="flex items-center space-x-2">
                                 <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                                 <span>{t("connected")}</span>
                             </span>
                         );
                     } else {
                         return (
-                            <span className="text-neutral-500 flex items-center space-x-2">
+                            <span className="flex items-center space-x-2">
                                 <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
                                 <span>{t("disconnected")}</span>
                             </span>
@@ -384,6 +410,24 @@ export default function MachineClientsTable({
             }
         ];
 
+        if (isLabelFeatureEnabled) {
+            baseColumns.push({
+                id: "labels",
+                accessorKey: "labels",
+                header: () => (
+                    <span className="p-3 text-end w-full inline-block">
+                        {t("labels")}
+                    </span>
+                ),
+                cell: ({ row }: { row: { original: ClientRow } }) => (
+                    <MachineClientLabelCell
+                        client={row.original}
+                        orgId={orgId}
+                    />
+                )
+            });
+        }
+
         // Only include actions column if there are rows without userIds
         if (hasRowsWithoutUserId) {
             baseColumns.push({
@@ -464,7 +508,7 @@ export default function MachineClientsTable({
         }
 
         return baseColumns;
-    }, [hasRowsWithoutUserId, t, getSortDirection, toggleSort]);
+    }, [hasRowsWithoutUserId, isLabelFeatureEnabled, orgId, t, searchParams]);
 
     const booleanSearchFilterSchema = z
         .enum(["true", "false"])
@@ -591,3 +635,95 @@ export default function MachineClientsTable({
         </>
     );
 }
+
+type MachineClientLabelCellProps = {
+    client: ClientRow;
+    orgId: string;
+};
+
+function MachineClientLabelCell({ client, orgId }: MachineClientLabelCellProps) {
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const router = useRouter();
+
+    const labels = client.labels ?? [];
+    const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels);
+
+    function toggleClientLabel(label: SelectedLabel, action: "attach" | "detach") {
+        startTransition(async () => {
+            try {
+                if (action === "attach") {
+                    setOptimisticLabels([...optimisticLabels, label]);
+                    await api.put(
+                        `/org/${orgId}/label/${label.labelId}/attach`,
+                        { clientId: client.id }
+                    );
+                } else {
+                    setOptimisticLabels(
+                        optimisticLabels.filter(
+                            (lb) => lb.labelId !== label.labelId
+                        )
+                    );
+                    await api.put(
+                        `/org/${orgId}/label/${label.labelId}/detach`,
+                        { clientId: client.id }
+                    );
+                }
+            } catch (e) {
+                toast({
+                    title: t("error"),
+                    description: formatAxiosError(e, t("errorOccurred")),
+                    variant: "destructive"
+                });
+            } finally {
+                router.refresh();
+            }
+        });
+    }
+
+    return (
+        <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
+            {optimisticLabels.slice(0, 3).map((label) => (
+                <LabelBadge
+                    key={label.labelId}
+                    onClick={() => setIsPopoverOpen(true)}
+                    {...label}
+                />
+            ))}
+            {optimisticLabels.length > 3 && (
+                <Button
+                    variant="outline"
+                    className={cn(
+                        "inline-flex gap-1 items-center",
+                        "rounded-full text-sm cursor-pointer",
+                        "px-1.5 py-0 h-auto"
+                    )}
+                    onClick={() => setIsPopoverOpen(true)}
+                >
+                    +{optimisticLabels.length - 3}
+                </Button>
+            )}
+            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        size="icon"
+                        variant="outline"
+                        className="p-1 size-auto rounded-full"
+                        title={t("addLabels")}
+                    >
+                        <span className="sr-only">{t("addLabels")}</span>
+                        <PlusIcon className="size-3" />
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent align="center" className="p-0 w-full">
+                    <LabelsSelector
+                        orgId={orgId}
+                        selectedLabels={optimisticLabels}
+                        toggleLabel={toggleClientLabel}
+                    />
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+}

src/components/OrgLabelForm.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import z from "zod";
+import { Input } from "./ui/input";
+import { useTranslations } from "use-intl";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "./ui/form";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "./ui/select";
+import { LABEL_COLORS } from "./labels-selector";
+
+const labelFormSchema = z.object({
+    name: z.string().nonempty(),
+    color: z
+        .string()
+        .regex(/^#?([0-9a-f]{6}|[0-9a-f]{3})$/i)
+        .nonempty()
+});
+
+export type LabelFormData = z.infer<typeof labelFormSchema>;
+
+export type OrgLabelFormProps = {
+    onSubmit: (data: LabelFormData) => void;
+    defaultValue?: LabelFormData;
+};
+
+export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
+    const t = useTranslations();
+
+    const colorValues = Object.values(LABEL_COLORS);
+    const randomColor =
+        colorValues[Math.floor(Math.random() * colorValues.length)];
+
+    const form = useForm({
+        resolver: zodResolver(labelFormSchema),
+        defaultValues: {
+            name: defaultValue?.name ?? "",
+            color: defaultValue?.color ?? randomColor
+        }
+    });
+
+    return (
+        <Form {...form}>
+            <form
+                id="org-label-form"
+                className="flex flex-col gap-4 px-0.5"
+                action={async () => {
+                    if (await form.trigger()) {
+                        onSubmit(form.getValues());
+                    }
+                }}
+            >
+                <FormField
+                    control={form.control}
+                    name="name"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t("labelNameField")}</FormLabel>
+                            <FormControl>
+                                <Input
+                                    {...field}
+                                    placeholder={t("labelPlaceholder")}
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+
+                <FormField
+                    control={form.control}
+                    name="color"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{t("labelColorField")}</FormLabel>
+                            <Select
+                                onValueChange={field.onChange}
+                                value={field.value}
+                            >
+                                <SelectTrigger className="w-full">
+                                    <SelectValue
+                                        placeholder={t("selectColor")}
+                                    />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {Object.entries(LABEL_COLORS).map(
+                                        ([color, value]) => (
+                                            <SelectItem
+                                                value={value}
+                                                key={color}
+                                                className="flex items-center gap-2"
+                                            >
+                                                <div
+                                                    className="size-4 rounded-full bg-(--color) flex-none"
+                                                    style={{
+                                                        // @ts-expect-error css color
+                                                        "--color": value
+                                                    }}
+                                                />
+                                                <span data-name>{color}</span>
+                                            </SelectItem>
+                                        )
+                                    )}
+                                </SelectContent>
+                            </Select>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </form>
+        </Form>
+    );
+}

src/components/OrgLabelsTable.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "@app/components/ui/dropdown-menu";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { type PaginationState } from "@tanstack/react-table";
+import {
+    ArrowDown01Icon,
+    ArrowUp10Icon,
+    ChevronsUpDownIcon,
+    MoreHorizontal,
+    PencilIcon,
+    PencilLineIcon
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+import { usePathname, useRouter } from "next/navigation";
+import { useActionState, useMemo, useState, useTransition } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import {
+    ControlledDataTable,
+    type ExtendedColumnDef
+} from "./ui/controlled-data-table";
+import { LabelBadge } from "./label-badge";
+import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
+import { cn } from "@app/lib/cn";
+import ConfirmDeleteDialog from "./ConfirmDeleteDialog";
+import { CreateOrgLabelDialog } from "./CreateOrgLabelDialog";
+import { EditOrgLabelDialog } from "./EditOrgLabelDialog";
+
+export type LabelRow = {
+    labelId: number;
+    name: string;
+    color: string;
+};
+
+type OrgLabelsTableProps = {
+    labels: LabelRow[];
+    pagination: PaginationState;
+    orgId: string;
+    rowCount: number;
+};
+
+export default function OrgLabelsTable({
+    labels,
+    orgId,
+    pagination,
+    rowCount
+}: OrgLabelsTableProps) {
+    const router = useRouter();
+
+    const {
+        navigate: filter,
+        isNavigating: isFiltering,
+        searchParams
+    } = useNavigationContext();
+
+    const [selectedLabel, setSelectedLabel] = useState<LabelRow | null>(null);
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+
+    const [isRefreshing, startTransition] = useTransition();
+
+    const api = createApiClient(useEnvContext());
+    const t = useTranslations();
+
+    function refreshData() {
+        startTransition(async () => {
+            try {
+                router.refresh();
+            } catch {
+                toast({
+                    title: t("error"),
+                    description: t("refreshError"),
+                    variant: "destructive"
+                });
+            }
+        });
+    }
+
+    const handlePaginationChange = (newPage: PaginationState) => {
+        searchParams.set("page", (newPage.pageIndex + 1).toString());
+        searchParams.set("pageSize", newPage.pageSize.toString());
+        filter({ searchParams });
+    };
+
+    const handleSearchChange = useDebouncedCallback((query: string) => {
+        searchParams.set("query", query);
+        searchParams.delete("page");
+        filter({ searchParams });
+    }, 300);
+
+    const columns = useMemo<ExtendedColumnDef<LabelRow>[]>(
+        () => [
+            {
+                accessorKey: "name",
+                enableHiding: false,
+                header: () => {
+                    return <span className="p-3">{t("name")}</span>;
+                },
+                cell: ({ row }) => (
+                    <div className="flex items-center gap-1.5 group">
+                        <div
+                            className="size-2.5 rounded-full bg-(--color) flex-none"
+                            style={{
+                                // @ts-expect-error css color
+                                "--color": row.original.color
+                            }}
+                        />
+
+                        {row.original.name}
+                    </div>
+                )
+            },
+            {
+                accessorKey: "actions",
+                enableHiding: false,
+                header: () => {
+                    return <span className="p-3">{t("actions")}</span>;
+                },
+                cell: ({ row }) => (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" className="h-8 w-8 p-0">
+                                <span className="sr-only">{t("openMenu")}</span>
+                                <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                                onClick={() => {
+                                    setSelectedLabel(row.original);
+                                    setIsEditModalOpen(true);
+                                }}
+                            >
+                                {t("edit")}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                                onClick={() => {
+                                    setSelectedLabel(row.original);
+                                    setIsDeleteModalOpen(true);
+                                }}
+                            >
+                                <span className="text-red-500">
+                                    {t("delete")}
+                                </span>
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                )
+            }
+        ],
+        [searchParams, t]
+    );
+
+    function deleteLabel(label: LabelRow) {
+        startTransition(async () => {
+            await api
+                .delete(`/org/${orgId}/label/${label.labelId}`)
+                .catch((e) => {
+                    toast({
+                        variant: "destructive",
+                        title: t("labelErrorDelete"),
+                        description: formatAxiosError(e, t("labelErrorDelete"))
+                    });
+                })
+                .then(() => {
+                    router.refresh();
+                    setIsDeleteModalOpen(false);
+                });
+        });
+    }
+
+    return (
+        <>
+            {selectedLabel && (
+                <>
+                    <ConfirmDeleteDialog
+                        open={isDeleteModalOpen}
+                        setOpen={(val) => {
+                            setIsDeleteModalOpen(val);
+                            setSelectedLabel(null);
+                        }}
+                        dialog={
+                            <div className="space-y-2">
+                                <p>{t("labelQuestionRemove")}</p>
+                                <p>{t("labelMessageRemove")}</p>
+                            </div>
+                        }
+                        buttonText={t("labelDeleteConfirm")}
+                        onConfirm={async () => deleteLabel(selectedLabel)}
+                        string={selectedLabel.name}
+                        title={t("labelDelete")}
+                    />
+
+                    <EditOrgLabelDialog
+                        open={isEditModalOpen}
+                        setOpen={setIsEditModalOpen}
+                        orgId={orgId}
+                        onSuccess={() =>
+                            startTransition(() => router.refresh())
+                        }
+                        label={selectedLabel}
+                    />
+                </>
+            )}
+
+            <CreateOrgLabelDialog
+                open={isCreateModalOpen}
+                setOpen={setIsCreateModalOpen}
+                orgId={orgId}
+                onSuccess={() => startTransition(() => router.refresh())}
+            />
+
+            <ControlledDataTable
+                columns={columns}
+                rows={labels}
+                addButtonText={t("labelAdd")}
+                onAdd={() => setIsCreateModalOpen(true)}
+                tableId="org-labels-table"
+                searchPlaceholder={t("labelSearch")}
+                pagination={pagination}
+                onPaginationChange={handlePaginationChange}
+                searchQuery={searchParams.get("query")?.toString()}
+                onSearch={handleSearchChange}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing || isFiltering}
+                rowCount={rowCount}
+            />
+        </>
+    );
+}

src/components/PendingSitesTable.tsx

@@ -228,14 +228,14 @@ export default function PendingSitesTable({
                 ) {
                     if (originalRow.online) {
                         return (
-                            <span className="text-green-500 flex items-center space-x-2">
+                            <span className="flex items-center space-x-2">
                                 <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                                 <span>{t("online")}</span>
                             </span>
                         );
                     } else {
                         return (
-                            <span className="text-neutral-500 flex items-center space-x-2">
+                            <span className="flex items-center space-x-2">
                                 <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
                                 <span>{t("offline")}</span>
                             </span>

src/components/ResourceInfoBox.tsx

@@ -89,12 +89,12 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                     <InfoSectionTitle>Socket</InfoSectionTitle>
                                     <InfoSectionContent>
                                         {isAvailable ? (
-                                            <span className="text-green-500 flex items-center space-x-2">
+                                            <span className="flex items-center space-x-2">
                                                 <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                                                 <span>Online</span>
                                             </span>
                                         ) : (
-                                            <span className="text-neutral-500 flex items-center space-x-2">
+                                            <span className="flex items-center space-x-2">
                                                 <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
                                                 <span>Offline</span>
                                             </span>

src/components/RoleForm.tsx

@@ -46,6 +46,20 @@ function toSshSudoMode(value: string | null | undefined): SshSudoMode {
     return "none";
 }
 
+function hasOnlyAbsoluteSudoCommands(value: string | undefined): boolean {
+    if (!value?.trim()) return true;
+
+    const commands = value
+        .split(",")
+        .map((command) => command.trim())
+        .filter(Boolean);
+
+    return commands.every((command) => {
+        const executable = command.split(/\s+/)[0];
+        return executable.startsWith("/");
+    });
+}
+
 export type RoleFormValues = {
     name: string;
     description?: string;
@@ -74,19 +88,33 @@ export function RoleForm({
     const { isPaidUser } = usePaidStatus();
     const { env } = useEnvContext();
 
-    const formSchema = z.object({
-        name: z
-            .string({ message: t("nameRequired") })
-            .min(1)
-            .max(32),
-        description: z.string().max(255).optional(),
-        requireDeviceApproval: z.boolean().optional(),
-        allowSsh: z.boolean().optional(),
-        sshSudoMode: z.enum(SSH_SUDO_MODE_VALUES),
-        sshSudoCommands: z.string().optional(),
-        sshCreateHomeDir: z.boolean().optional(),
-        sshUnixGroups: z.string().optional()
-    });
+    const formSchema = z
+        .object({
+            name: z
+                .string({ message: t("nameRequired") })
+                .min(1)
+                .max(32),
+            description: z.string().max(255).optional(),
+            requireDeviceApproval: z.boolean().optional(),
+            allowSsh: z.boolean().optional(),
+            sshSudoMode: z.enum(SSH_SUDO_MODE_VALUES),
+            sshSudoCommands: z.string().optional(),
+            sshCreateHomeDir: z.boolean().optional(),
+            sshUnixGroups: z.string().optional()
+        })
+        .superRefine((values, ctx) => {
+            if (
+                values.sshSudoMode === "commands" &&
+                !hasOnlyAbsoluteSudoCommands(values.sshSudoCommands)
+            ) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ["sshSudoCommands"],
+                    message:
+                        "Each sudo command must start with an absolute path (for example, /usr/bin/systemctl)."
+                });
+            }
+        });
 
     const defaultValues: RoleFormValues = role
         ? {
@@ -296,7 +324,9 @@ export function RoleForm({
                                     control={form.control}
                                     name="allowSsh"
                                     render={({ field }) => {
-                                        const allowSshOptions: OptionSelectOption<"allow" | "disallow">[] = [
+                                        const allowSshOptions: OptionSelectOption<
+                                            "allow" | "disallow"
+                                        >[] = [
                                             {
                                                 value: "allow",
                                                 label: t("roleAllowSshAllow")
@@ -311,7 +341,9 @@ export function RoleForm({
                                                 <FormLabel>
                                                     {t("roleAllowSsh")}
                                                 </FormLabel>
-                                                <OptionSelect<"allow" | "disallow">
+                                                <OptionSelect<
+                                                    "allow" | "disallow"
+                                                >
                                                     options={allowSshOptions}
                                                     value={
                                                         sshDisabled
@@ -322,7 +354,9 @@ export function RoleForm({
                                                     }
                                                     onChange={(v) => {
                                                         if (sshDisabled) return;
-                                                        field.onChange(v === "allow");
+                                                        field.onChange(
+                                                            v === "allow"
+                                                        );
                                                     }}
                                                     cols={2}
                                                     disabled={sshDisabled}

src/components/SiteInfoCard.tsx

@@ -34,12 +34,12 @@ export default function SiteInfoCard({}: SiteInfoCardProps) {
             <InfoSectionTitle>{t("status")}</InfoSectionTitle>
             <InfoSectionContent>
                 {site.online ? (
-                    <div className="text-green-500 flex items-center space-x-2">
+                    <div className="flex items-center space-x-2">
                         <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                         <span>{t("online")}</span>
                     </div>
                 ) : (
-                    <div className="text-neutral-500 flex items-center space-x-2">
+                    <div className="flex items-center space-x-2">
                         <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
                         <span>{t("offline")}</span>
                     </div>

src/components/SitesTable.tsx

@@ -3,6 +3,16 @@
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import UptimeMiniBar from "@app/components/UptimeMiniBar";
 
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import SiteResourcesOverview from "@app/components/SiteResourcesOverview";
 import { Badge } from "@app/components/ui/badge";
 import { Button } from "@app/components/ui/button";
 import {
@@ -14,9 +24,9 @@ import {
 import { InfoPopup } from "@app/components/ui/info-popup";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useNavigationContext } from "@app/hooks/useNavigationContext";
-import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { build } from "@server/build";
 import { type PaginationState } from "@tanstack/react-table";
 import {
@@ -26,30 +36,35 @@ import {
     ArrowUpRight,
     ChevronDown,
     ChevronsUpDownIcon,
-    MoreHorizontal
+    MoreHorizontal,
+    PlusIcon
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useState, useTransition, useEffect } from "react";
+import {
+    startTransition,
+    useEffect,
+    useMemo,
+    useOptimistic,
+    useState,
+    useTransition
+} from "react";
 import { useDebouncedCallback } from "use-debounce";
 import z from "zod";
 import { ColumnFilterButton } from "./ColumnFilterButton";
-import SiteResourcesOverview from "@app/components/SiteResourcesOverview";
-import {
-    Credenza,
-    CredenzaBody,
-    CredenzaContent,
-    CredenzaDescription,
-    CredenzaFooter,
-    CredenzaHeader,
-    CredenzaTitle
-} from "@app/components/Credenza";
 import {
     ControlledDataTable,
     type ExtendedColumnDef
 } from "./ui/controlled-data-table";
 
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { cn } from "@app/lib/cn";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { LabelBadge } from "./label-badge";
+import { LabelsSelector, type SelectedLabel } from "./labels-selector";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+
 export type SiteRow = {
     id: number;
     nice: string;
@@ -66,6 +81,11 @@ export type SiteRow = {
     exitNodeEndpoint?: string;
     remoteExitNodeId?: string;
     resourceCount: number;
+    labels?: Array<{
+        labelId: number;
+        name: string;
+        color: string;
+    }>;
 };
 
 type SitesTableProps = {
@@ -96,6 +116,9 @@ export default function SitesTable({
     const [isRefreshing, startTransition] = useTransition();
     const [isNavigatingToAddPage, startNavigation] = useTransition();
 
+    const { isPaidUser } = usePaidStatus();
+    const isLabelFeatureEnabled = isPaidUser(tierMatrix.labels);
+
     const api = createApiClient(useEnvContext());
     const t = useTranslations();
 
@@ -158,7 +181,8 @@ export default function SitesTable({
         });
     }
 
-    const columns: ExtendedColumnDef<SiteRow>[] = [
+    const columns = useMemo<ExtendedColumnDef<SiteRow>[]>(() => {
+        const cols: ExtendedColumnDef<SiteRow>[] = [
         {
             accessorKey: "name",
             enableHiding: false,
@@ -226,14 +250,14 @@ export default function SitesTable({
                 ) {
                     if (originalRow.online) {
                         return (
-                            <span className="text-green-500 flex items-center space-x-2">
+                            <span className="flex items-center space-x-2">
                                 <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                                 <span>{t("online")}</span>
                             </span>
                         );
                     } else {
                         return (
-                            <span className="text-neutral-500 flex items-center space-x-2">
+                            <span className="flex items-center space-x-2">
                                 <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
                                 <span>{t("offline")}</span>
                             </span>
@@ -366,7 +390,7 @@ export default function SitesTable({
                         variant="ghost"
                         size="sm"
                         onClick={() => setResourcesDialogSite(siteRow)}
-                        className="flex h-8 items-center gap-2 px-0 font-normal"
+                        className="flex h-8 items-center gap-2 px-2 font-normal"
                     >
                         <span className="text-sm tabular-nums">
                             {siteRow.resourceCount} {t("resources")}
@@ -437,7 +461,7 @@ export default function SitesTable({
             header: () => {
                 return <span className="p-3">{t("address")}</span>;
             },
-            cell: ({ row }: { row: any }) => {
+            cell: ({ row }) => {
                 const originalRow = row.original;
                 return originalRow.address ? (
                     <div className="flex items-center space-x-2">
@@ -488,16 +512,6 @@ export default function SitesTable({
                                         {t("sitesTableViewPrivateResources")}
                                     </DropdownMenuItem>
                                 </Link>
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        setSelectedSite(siteRow);
-                                        setIsDeleteModalOpen(true);
-                                    }}
-                                >
-                                    <span className="text-red-500">
-                                        {t("delete")}
-                                    </span>
-                                </DropdownMenuItem>
                             </DropdownMenuContent>
                         </DropdownMenu>
                         <Link
@@ -512,7 +526,24 @@ export default function SitesTable({
                 );
             }
         }
-    ];
+        ];
+
+        if (isLabelFeatureEnabled) {
+            cols.splice(cols.length - 1, 0, {
+                accessorKey: "labels",
+                header: () => (
+                    <span className="p-3 text-end w-full inline-block">
+                        {t("labels")}
+                    </span>
+                ),
+                cell: ({ row }: { row: { original: SiteRow } }) => (
+                    <SiteLabelCell site={row.original} orgId={orgId} />
+                )
+            });
+        }
+
+        return cols;
+    }, [isLabelFeatureEnabled, orgId, t, searchParams]);
 
     function toggleSort(column: string) {
         const newSearch = getNextSortOrder(column, searchParams);
@@ -622,7 +653,8 @@ export default function SitesTable({
                     niceId: false,
                     nice: false,
                     exitNode: false,
-                    address: false
+                    address: false,
+                    labels: false
                 }}
                 enableColumnVisibility
                 stickyLeftColumn="name"
@@ -631,3 +663,102 @@ export default function SitesTable({
         </>
     );
 }
+
+type SiteLabelCellProps = {
+    site: SiteRow;
+    orgId: string;
+};
+
+function SiteLabelCell({ site, orgId }: SiteLabelCellProps) {
+    const t = useTranslations();
+
+    const api = createApiClient(useEnvContext());
+
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+    const router = useRouter();
+
+    const labels = site.labels ?? [];
+    const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels);
+
+    function toggleSiteLabel(
+        label: SelectedLabel,
+        action: "attach" | "detach"
+    ) {
+        startTransition(async () => {
+            try {
+                if (action === "attach") {
+                    setOptimisticLabels([...optimisticLabels, label]);
+
+                    await api.put(
+                        `/org/${orgId}/label/${label.labelId}/attach`,
+                        { siteId: site.id }
+                    );
+                } else {
+                    setOptimisticLabels(
+                        optimisticLabels.filter(
+                            (lb) => lb.labelId !== label.labelId
+                        )
+                    );
+                    await api.put(
+                        `/org/${orgId}/label/${label.labelId}/detach`,
+                        { siteId: site.id }
+                    );
+                }
+            } catch (e) {
+                toast({
+                    title: t("error"),
+                    description: formatAxiosError(e, t("errorOccurred")),
+                    variant: "destructive"
+                });
+            } finally {
+                router.refresh();
+            }
+        });
+    }
+
+    return (
+        <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
+            {optimisticLabels.slice(0, 3).map((label) => (
+                <LabelBadge
+                    key={label.labelId}
+                    onClick={() => setIsPopoverOpen(true)}
+                    {...label}
+                />
+            ))}
+            {optimisticLabels.length > 3 && (
+                <Button
+                    variant="outline"
+                    className={cn(
+                        "inline-flex gap-1 items-center",
+                        "rounded-full text-sm cursor-pointer",
+                        "px-1.5 py-0 h-auto"
+                    )}
+                    onClick={() => setIsPopoverOpen(true)}
+                >
+                    +{optimisticLabels.length - 3}
+                </Button>
+            )}
+            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        size="icon"
+                        variant="outline"
+                        className="p-1 size-auto rounded-full"
+                        title={t("addLabels")}
+                    >
+                        <span className="sr-only">{t("addLabels")}</span>
+                        <PlusIcon className="size-3" />
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent align="center" className="p-0 w-full">
+                    <LabelsSelector
+                        orgId={orgId}
+                        selectedLabels={optimisticLabels}
+                        toggleLabel={toggleSiteLabel}
+                    />
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+}

src/components/UserDevicesTable.tsx

@@ -436,14 +436,14 @@ export default function UserDevicesTable({
                     const originalRow = row.original;
                     if (originalRow.online) {
                         return (
-                            <span className="text-green-500 flex items-center space-x-2">
+                            <span className="flex items-center space-x-2">
                                 <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                                 <span>{t("connected")}</span>
                             </span>
                         );
                     } else {
                         return (
-                            <span className="text-neutral-500 flex items-center space-x-2">
+                            <span className="flex items-center space-x-2">
                                 <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
                                 <span>{t("disconnected")}</span>
                             </span>

src/components/label-badge.tsx

@@ -0,0 +1,40 @@
+import { cn } from "@app/lib/cn";
+import { Button } from "./ui/button";
+
+export type LabelBadgeProps = {
+    name: string;
+    color: string;
+    onClick?: () => void;
+    className?: string;
+};
+
+export function LabelBadge({
+    onClick,
+    name,
+    color,
+    className
+}: LabelBadgeProps) {
+    return (
+        <Button
+            variant="outline"
+            onClick={onClick}
+            className={cn(
+                "inline-flex gap-1 items-center",
+                "rounded-full text-sm cursor-pointer",
+                "pl-1.5 pr-2 py-0 h-auto",
+                className
+            )}
+        >
+            <div
+                className="size-3 rounded-full bg-(--color) flex-none"
+                style={{
+                    // @ts-expect-error css color
+                    "--color": color
+                }}
+            />
+            <span className="whitespace-nowrap text-ellipsis max-w-16 overflow-hidden relative">
+                {name}
+            </span>
+        </Button>
+    );
+}

src/components/labels-selector.tsx

@@ -0,0 +1,236 @@
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { orgQueries } from "@app/lib/queries";
+import type { CreateOrEditLabelResponse } from "@server/routers/labels/types";
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosResponse } from "axios";
+import { useTranslations } from "next-intl";
+import { useActionState, useMemo, useState } from "react";
+import { useDebounce } from "use-debounce";
+import { Button } from "./ui/button";
+import { Checkbox } from "./ui/checkbox";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "./ui/command";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "./ui/select";
+
+export type SelectedLabel = {
+    name: string;
+    color: string;
+    labelId: number;
+};
+
+export type LabelsSelectorProps = {
+    orgId: string;
+    selectedLabels: SelectedLabel[];
+    toggleLabel: (newlabel: SelectedLabel, action: "detach" | "attach") => void;
+};
+
+export const LABEL_COLORS = {
+    red: "#ff6467",
+    green: "#05df72",
+    blue: "#51a2ff",
+    yellow: "#fdc744",
+    orange: "#ff8905",
+    purple: "#a684ff",
+    gray: "#b4b4b4"
+};
+
+export function LabelsSelector({
+    orgId,
+    selectedLabels,
+    toggleLabel
+}: LabelsSelectorProps) {
+    const t = useTranslations();
+    const [labelSearchQuery, setlabelsSearchQuery] = useState("");
+    const [debouncedQuery] = useDebounce(labelSearchQuery, 150);
+
+    const api = createApiClient(useEnvContext());
+
+    const { data: labels = [] } = useQuery(
+        orgQueries.labels({
+            orgId,
+            query: debouncedQuery,
+            perPage: 10
+        })
+    );
+
+    const labelsShown = useMemo(() => {
+        const base = [...labels];
+        if (debouncedQuery.trim().length === 0 && selectedLabels.length > 0) {
+            const selectedNotInBase = selectedLabels.filter(
+                (sel) => !base.some((s) => s.labelId === sel.labelId)
+            );
+            return [...selectedNotInBase, ...base];
+        }
+        return base;
+    }, [debouncedQuery, labels, selectedLabels]);
+
+    const selectedIds = useMemo(
+        () => new Set(selectedLabels.map((s) => s.labelId)),
+        [selectedLabels]
+    );
+
+    const colorValues = Object.values(LABEL_COLORS);
+    const randomColor =
+        colorValues[Math.floor(Math.random() * colorValues.length)];
+
+    const [, action, isPending] = useActionState(createLabel, null);
+
+    async function createLabel(_: any, formData: FormData) {
+        const name = formData.get("name")?.toString();
+        const color = formData.get("color")?.toString();
+        try {
+            const res = await api.post<
+                AxiosResponse<CreateOrEditLabelResponse>
+            >(`/org/${orgId}/labels`, { name, color });
+
+            const { label } = res.data.data;
+
+            toggleLabel(
+                {
+                    labelId: label.labelId,
+                    name: label.name,
+                    color: label.color
+                },
+                "attach"
+            );
+        } catch (e) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(e, t("errorOccurred")),
+                variant: "destructive"
+            });
+        }
+        setlabelsSearchQuery("");
+    }
+
+    return (
+        <Command shouldFilter={false}>
+            <CommandInput
+                placeholder={t("labelSearch")}
+                value={labelSearchQuery}
+                onValueChange={setlabelsSearchQuery}
+            />
+            <CommandList>
+                <CommandEmpty className="px-3 break-all wrap-anywhere text-wrap">
+                    {labelSearchQuery.trim().length > 0 ? (
+                        <div className="flex flex-col gap-2 items-center">
+                            <span className="max-w-34">
+                                {t("createNewLabel", {
+                                    label: labelSearchQuery.trim()
+                                })}
+                            </span>
+
+                            <form
+                                action={action}
+                                className="flex items-center gap-2"
+                            >
+                                <input
+                                    type="hidden"
+                                    name="name"
+                                    value={labelSearchQuery.trim()}
+                                />
+
+                                <Select defaultValue={randomColor} name="color">
+                                    <SelectTrigger className="w-18 [&_[data-name]]:hidden [&_[svg]]:hidden!">
+                                        <SelectValue
+                                            placeholder={t("selectColor")}
+                                        />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {Object.entries(LABEL_COLORS).map(
+                                            ([color, value]) => (
+                                                <SelectItem
+                                                    value={value}
+                                                    key={color}
+                                                    className="flex items-center gap-2"
+                                                >
+                                                    <div
+                                                        className="size-4 rounded-full bg-(--color) flex-none"
+                                                        style={{
+                                                            // @ts-expect-error css color
+                                                            "--color": value
+                                                        }}
+                                                    />
+                                                    <span data-name>
+                                                        {color}
+                                                    </span>
+                                                </SelectItem>
+                                            )
+                                        )}
+                                    </SelectContent>
+                                </Select>
+
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    loading={isPending}
+                                    type="submit"
+                                >
+                                    {t("create")}
+                                </Button>
+                            </form>
+                        </div>
+                    ) : (
+                        t("labelsNotFound")
+                    )}
+                </CommandEmpty>
+                <CommandGroup>
+                    {labelsShown.map((label) => (
+                        <CommandItem
+                            key={label.labelId}
+                            value={`${label.labelId}`}
+                            onSelect={() => {
+                                toggleLabel(
+                                    label,
+                                    selectedIds.has(label.labelId)
+                                        ? "detach"
+                                        : "attach"
+                                );
+                                // } else {
+                                //     onSelectionChange([
+                                //         ...selectedLabels,
+                                //         label
+                                //     ]);
+                                // }
+                            }}
+                        >
+                            <Checkbox
+                                className="pointer-events-none shrink-0"
+                                checked={selectedIds.has(label.labelId)}
+                                onCheckedChange={() => {}}
+                                aria-hidden
+                                tabIndex={-1}
+                            />
+                            <div className="min-w-0 flex-1 flex items-center gap-2">
+                                <span
+                                    className="inline-block size-3 flex-none rounded-full bg-(--label-color)"
+                                    style={{
+                                        // @ts-expect-error CSS variable
+                                        "--label-color": label.color
+                                    }}
+                                />
+                                <span className="min-w-0 flex-1 truncate">
+                                    {label.name}
+                                </span>
+                            </div>
+                        </CommandItem>
+                    ))}
+                </CommandGroup>
+            </CommandList>
+        </Command>
+    );
+}

src/components/multi-select/multi-select-tag-input.tsx

@@ -41,7 +41,7 @@ export function MultiSelectTagInput<T extends TagValue>({
                             variant: "outline"
                         }),
                         "justify-between w-full inline-flex",
-                        "text-muted-foreground pl-1.5 cursor-text",
+                        "text-muted-foreground pl-1.5 cursor-text h-auto py-1",
                         "hover:bg-transparent hover:text-muted-foreground",
                         props.disabled && "pointer-events-none opacity-50"
                     )}
@@ -49,7 +49,7 @@ export function MultiSelectTagInput<T extends TagValue>({
                     <span
                         className={cn(
                             "inline-flex items-center gap-1",
-                            "overflow-x-auto"
+                            "overflow-x-auto flex-wrap h-auto"
                         )}
                     >
                         {props.value.map((option) => (
@@ -61,7 +61,9 @@ export function MultiSelectTagInput<T extends TagValue>({
                                 )}
                                 onClick={(e) => e.stopPropagation()}
                             >
-                                {option.text}
+                                <span className="max-w-40 text-ellipsis overflow-hidden">
+                                    {option.text}
+                                </span>
                                 <button
                                     className="p-0.5 flex-none cursor-pointer"
                                     type="button"

src/components/ui/controlled-data-table.tsx

@@ -305,6 +305,7 @@ export function ControlledDataTable<TData, TValue>({
                                         onSearch(e.currentTarget.value)
                                     }
                                     className="w-full pl-8"
+                                    type="search"
                                 />
                                 <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
                             </div>

src/lib/queries.ts

@@ -1,17 +1,25 @@
 import { build } from "@server/build";
+import { StatusHistoryResponse } from "@server/lib/statusHistory";
+import type { ListAlertRulesResponse } from "@server/routers/alertRule/types";
 import type { QueryRequestAnalyticsResponse } from "@server/routers/auditLogs";
+import type {
+    QueryAccessAuditLogResponse,
+    QueryActionAuditLogResponse,
+    QueryConnectionAuditLogResponse,
+    QueryRequestAuditLogResponse
+} from "@server/routers/auditLogs/types";
 import type { ListClientsResponse } from "@server/routers/client";
 import type {
-    ListDomainsResponse,
-    GetDNSRecordsResponse
+    GetDNSRecordsResponse,
+    ListDomainsResponse
 } from "@server/routers/domain";
 import type { GetDomainResponse } from "@server/routers/domain/getDomain";
+import { ListHealthChecksResponse } from "@server/routers/healthChecks/types";
 import type {
     GetResourceWhitelistResponse,
     ListResourceNamesResponse,
     ListResourcesResponse
 } from "@server/routers/resource";
-import type { ListAlertRulesResponse } from "@server/routers/alertRule/types";
 import type { ListRolesResponse } from "@server/routers/role";
 import type { ListSitesResponse } from "@server/routers/site";
 import type {
@@ -31,8 +39,7 @@ import type { AxiosResponse } from "axios";
 import z from "zod";
 import { remote } from "./api";
 import { durationToMs } from "./durationToMs";
-import { ListHealthChecksResponse } from "@server/routers/healthChecks/types";
-import { StatusHistoryResponse } from "@server/lib/statusHistory";
+import type { ListOrgLabelsResponse } from "@server/routers/labels/types";
 
 export type ProductUpdate = {
     link: string | null;
@@ -208,6 +215,33 @@ export const orgQueries = {
             }
         }),
 
+    labels: ({
+        orgId,
+        query,
+        perPage = 10_000
+    }: {
+        orgId: string;
+        query?: string;
+        perPage?: number;
+    }) =>
+        queryOptions({
+            queryKey: ["ORG", orgId, "LABELS", { query, perPage }] as const,
+            queryFn: async ({ signal, meta }) => {
+                const sp = new URLSearchParams({
+                    pageSize: perPage.toString()
+                });
+
+                if (query?.trim()) {
+                    sp.set("query", query);
+                }
+
+                const res = await meta!.api.get<
+                    AxiosResponse<ListOrgLabelsResponse>
+                >(`/org/${orgId}/labels?${sp.toString()}`, { signal });
+                return res.data.data.labels;
+            }
+        }),
+
     domains: ({ orgId }: { orgId: string }) =>
         queryOptions({
             queryKey: ["ORG", orgId, "DOMAINS"] as const,
@@ -561,7 +595,111 @@ export const logAnalyticsFiltersSchema = z.object({
     resourceId: z.coerce.number().optional().catch(undefined)
 });
 
-export type LogAnalyticsFilters = z.TypeOf<typeof logAnalyticsFiltersSchema>;
+export type LogAnalyticsFilters = z.output<typeof logAnalyticsFiltersSchema>;
+
+export const httpLogsFiltersSchema = z.object({
+    timeStart: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeStart must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    timeEnd: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeEnd must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    page: z.coerce.number().optional().catch(0).default(0),
+    pageSize: z.coerce.number().optional().catch(20).default(20),
+    resourceId: z.coerce.number().optional().catch(undefined),
+    action: z.string().optional().catch(undefined),
+    host: z.string().optional().catch(undefined),
+    location: z.string().optional().catch(undefined),
+    actor: z.string().optional().catch(undefined),
+    method: z.string().optional().catch(undefined),
+    reason: z.string().optional().catch(undefined),
+    path: z.string().optional().catch(undefined)
+});
+
+export type HttpLogFilters = z.output<typeof httpLogsFiltersSchema>;
+
+export const accessLogsFiltersSchema = z.object({
+    timeStart: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeStart must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    timeEnd: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeEnd must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    page: z.coerce.number().optional().catch(0).default(0),
+    pageSize: z.coerce.number().optional().catch(20).default(20),
+    resourceId: z.coerce.number().optional().catch(undefined),
+    action: z.string().optional().catch(undefined),
+    location: z.string().optional().catch(undefined),
+    actor: z.string().optional().catch(undefined),
+    type: z.string().optional().catch(undefined)
+});
+
+export type AccessLogFilters = z.output<typeof accessLogsFiltersSchema>;
+
+export const actionLogsFiltersSchema = z.object({
+    timeStart: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeStart must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    timeEnd: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeEnd must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    page: z.coerce.number().optional().catch(0).default(0),
+    pageSize: z.coerce.number().optional().catch(20).default(20),
+    action: z.string().optional().catch(undefined),
+    actor: z.string().optional().catch(undefined)
+});
+
+export type ActionLogFilters = z.output<typeof actionLogsFiltersSchema>;
+
+export const connectionLogsFiltersSchema = z.object({
+    timeStart: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeStart must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    timeEnd: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeEnd must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    page: z.coerce.number().optional().catch(0).default(0),
+    pageSize: z.coerce.number().optional().catch(20).default(20),
+    protocol: z.string().optional().catch(undefined),
+    destAddr: z.string().optional().catch(undefined),
+    clientId: z.coerce.number().optional().catch(undefined),
+    siteResourceId: z.coerce.number().optional().catch(undefined),
+    userId: z.string().optional().catch(undefined)
+});
+
+export type ConnectionLogFilters = z.output<typeof connectionLogsFiltersSchema>;
 
 export const logQueries = {
     requestAnalytics: ({
@@ -572,7 +710,7 @@ export const logQueries = {
         filters: LogAnalyticsFilters;
     }) =>
         queryOptions({
-            queryKey: ["REQUEST_LOG_ANALYTICS", orgId, filters] as const,
+            queryKey: ["REQUEST_LOGS", orgId, "ANALYTICS", filters] as const,
             queryFn: async ({ signal, meta }) => {
                 const res = await meta!.api.get<
                     AxiosResponse<QueryRequestAnalyticsResponse>
@@ -588,6 +726,124 @@ export const logQueries = {
                 }
                 return false;
             }
+        }),
+
+    requests: ({
+        orgId,
+        filters
+    }: {
+        orgId: string;
+        filters: HttpLogFilters;
+    }) =>
+        queryOptions({
+            queryKey: ["REQUEST_LOGS", orgId, "ALL", filters] as const,
+            queryFn: async ({ signal, meta }) => {
+                const { page, pageSize, ...rest } = filters;
+                const res = await meta!.api.get<
+                    AxiosResponse<QueryRequestAuditLogResponse>
+                >(`/org/${orgId}/logs/request`, {
+                    params: {
+                        ...rest,
+                        limit: pageSize,
+                        offset: page * pageSize
+                    },
+                    signal
+                });
+                return res.data.data;
+            },
+            refetchInterval: (query) => {
+                if (query.state.data) {
+                    return durationToMs(30, "seconds");
+                }
+                return false;
+            }
+        }),
+
+    access: ({ orgId, filters }: { orgId: string; filters: AccessLogFilters }) =>
+        queryOptions({
+            queryKey: ["ACCESS_LOGS", orgId, "ALL", filters] as const,
+            queryFn: async ({ signal, meta }) => {
+                const { page, pageSize, ...rest } = filters;
+                const res = await meta!.api.get<
+                    AxiosResponse<QueryAccessAuditLogResponse>
+                >(`/org/${orgId}/logs/access`, {
+                    params: {
+                        ...rest,
+                        limit: pageSize,
+                        offset: page * pageSize
+                    },
+                    signal
+                });
+                return res.data.data;
+            },
+            refetchInterval: (query) => {
+                if (query.state.data) {
+                    return durationToMs(30, "seconds");
+                }
+                return false;
+            }
+        }),
+
+    action: ({
+        orgId,
+        filters
+    }: {
+        orgId: string;
+        filters: ActionLogFilters;
+    }) =>
+        queryOptions({
+            queryKey: ["ACTION_LOGS", orgId, "ALL", filters] as const,
+            queryFn: async ({ signal, meta }) => {
+                const { page, pageSize, ...rest } = filters;
+                const res = await meta!.api.get<
+                    AxiosResponse<QueryActionAuditLogResponse>
+                >(`/org/${orgId}/logs/action`, {
+                    params: {
+                        ...rest,
+                        limit: pageSize,
+                        offset: page * pageSize
+                    },
+                    signal
+                });
+                return res.data.data;
+            },
+            refetchInterval: (query) => {
+                if (query.state.data) {
+                    return durationToMs(30, "seconds");
+                }
+                return false;
+            }
+        }),
+
+    connection: ({
+        orgId,
+        filters
+    }: {
+        orgId: string;
+        filters: ConnectionLogFilters;
+    }) =>
+        queryOptions({
+            queryKey: ["CONNECTION_LOGS", orgId, "ALL", filters] as const,
+            queryFn: async ({ signal, meta }) => {
+                const { page, pageSize, ...rest } = filters;
+                const res = await meta!.api.get<
+                    AxiosResponse<QueryConnectionAuditLogResponse>
+                >(`/org/${orgId}/logs/connection`, {
+                    params: {
+                        ...rest,
+                        limit: pageSize,
+                        offset: page * pageSize
+                    },
+                    signal
+                });
+                return res.data.data;
+            },
+            refetchInterval: (query) => {
+                if (query.state.data) {
+                    return durationToMs(30, "seconds");
+                }
+                return false;
+            }
         })
 };