Reconnect newts when a exit node comes back online

fix: make tag input wrap around instead of scrolling

install/go.mod

@@ -5,7 +5,7 @@ go 1.25.0
 require (
 	github.com/charmbracelet/huh v1.0.0
 	github.com/charmbracelet/lipgloss v1.1.0
-	golang.org/x/term v0.43.0
+	golang.org/x/term v0.42.0
 	gopkg.in/yaml.v3 v3.0.1
 )
 
@@ -33,6 +33,6 @@ require (
 	github.com/rivo/uniseg v0.4.7 // indirect
 	github.com/xo/terminfo v0.0.0-20220910002029-abceb7e1c41e // indirect
 	golang.org/x/sync v0.15.0 // indirect
-	golang.org/x/sys v0.44.0 // indirect
+	golang.org/x/sys v0.43.0 // indirect
 	golang.org/x/text v0.23.0 // indirect
 )

install/go.sum

@@ -69,10 +69,10 @@ golang.org/x/sync v0.15.0 h1:KWH3jNZsfyT6xfAfKiz6MRNmd46ByHDYaZ7KSkCtdW8=
 golang.org/x/sync v0.15.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
 golang.org/x/sys v0.0.0-20210809222454-d867a43fc93e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.44.0 h1:ildZl3J4uzeKP07r2F++Op7E9B29JRUy+a27EibtBTQ=
-golang.org/x/sys v0.44.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
-golang.org/x/term v0.43.0 h1:S4RLU2sB31O/NCl+zFN9Aru9A/Cq2aqKpTZJ6B+DwT4=
-golang.org/x/term v0.43.0/go.mod h1:lrhlHNdQJHO+1qVYiHfFKVuVioJIheAc3fBSMFYEIsk=
+golang.org/x/sys v0.43.0 h1:Rlag2XtaFTxp19wS8MXlJwTvoh8ArU6ezoyFsMyCTNI=
+golang.org/x/sys v0.43.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
+golang.org/x/term v0.42.0 h1:UiKe+zDFmJobeJ5ggPwOshJIVt6/Ft0rcfrXZDLWAWY=
+golang.org/x/term v0.42.0/go.mod h1:Dq/D+snpsbazcBG5+F9Q1n2rXV8Ma+71xEjTRufARgY=
 golang.org/x/text v0.23.0 h1:D71I7dUrlY+VX0gQShAThNGHFxZ13dGLBHQLVl1mJlY=
 golang.org/x/text v0.23.0/go.mod h1:/BLNzu4aZCJ1+kcD0DNRotWKage4q2rGVAg4o22unh4=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=

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.",

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/alerts/events/healthCheckEvents.ts

@@ -221,18 +221,10 @@ async function handleResource(
         )
         .where(eq(targets.resourceId, resource.resourceId));
 
-    const monitoredTargets = otherTargets.filter(
-        (t) => t.hcHealth !== "unknown"
-    );
-
     let health = "healthy";
-    const allUnknown = monitoredTargets.length === 0;
-    const allHealthy = monitoredTargets.every(
-        (t) => t.hcHealth === "healthy"
-    );
-    const allUnhealthy = monitoredTargets.every(
-        (t) => t.hcHealth === "unhealthy"
-    );
+    const allUnknown = otherTargets.every((t) => t.hcHealth === "unknown");
+    const allHealthy = otherTargets.every((t) => t.hcHealth === "healthy");
+    const allUnhealthy = otherTargets.every((t) => t.hcHealth === "unhealthy");
 
     if (allUnknown) {
         logger.debug(

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/blueprints/types.ts

@@ -82,7 +82,7 @@ export const RuleSchema = z
     .object({
         action: z.enum(["allow", "deny", "pass"]),
         match: z.enum(["cidr", "path", "ip", "country", "asn", "region"]),
-        value: z.coerce.string(),
+        value: z.string(),
         priority: z.int().optional()
     })
     .refine(
@@ -340,8 +340,7 @@ export const ResourceSchema = z
             if (parts.includes("*", 1)) return false; // no further wildcards
             if (parts.length < 3) return false; // need at least *.label.tld
 
-            const labelRegex =
-                /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?$|^[a-zA-Z0-9]$/;
+            const labelRegex = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?$|^[a-zA-Z0-9]$/;
             return parts.slice(1).every((label) => labelRegex.test(label));
         },
         {

server/lib/rebuildClientAssociations.ts

@@ -18,7 +18,7 @@ import {
     userOrgRoles,
     userSiteResources
 } from "@server/db";
-import { and, count, eq, inArray, ne } from "drizzle-orm";
+import { and, eq, inArray, ne } from "drizzle-orm";
 
 import { deletePeer as newtDeletePeer } from "@server/routers/newt/peers";
 import {
@@ -39,11 +39,6 @@ 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,
@@ -166,23 +161,6 @@ 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}`
@@ -561,29 +539,6 @@ 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) {
@@ -627,14 +582,7 @@ async function handleMessagesForSiteClients(
         }
 
         if (isAdd) {
-            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;
-            }
-
+            // TODO: if we are in jit mode here should we really be sending this?
             await initPeerAddHandshake(
                 // this will kick off the add peer process for the client
                 client.clientId,
@@ -652,24 +600,9 @@ async function handleMessagesForSiteClients(
         exitNodeJobs.push(updateClientSiteDestinations(client, trx));
     }
 
-    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
-        );
-    });
+    await Promise.all(exitNodeJobs);
+    await Promise.all(newtJobs); // do the servers first to make sure they are ready?
+    await Promise.all(olmJobs);
 }
 
 interface PeerDestination {
@@ -952,17 +885,6 @@ 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[] = [];
 
@@ -1235,12 +1157,6 @@ 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;
@@ -1301,14 +1217,7 @@ async function handleMessagesForClientSites(
                 continue;
             }
 
-            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;
-            }
-
+            // TODO: if we are in jit mode here should we really be sending this?
             await initPeerAddHandshake(
                 // this will kick off the add peer process for the client
                 client.clientId,
@@ -1336,24 +1245,9 @@ async function handleMessagesForClientSites(
         );
     }
 
-    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
-        );
-    });
+    await Promise.all(exitNodeJobs);
+    await Promise.all(newtJobs);
+    await Promise.all(olmJobs);
 }
 
 async function handleMessagesForClientResources(
@@ -1634,195 +1528,3 @@ 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/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/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,7 +31,7 @@ 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 client from "@server/routers/client";
+import * as labels from "#private/routers/labels";
 
 import {
     verifyOrgAccess,
@@ -733,6 +733,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,
@@ -776,15 +829,3 @@ 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,6 +26,7 @@ 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({
@@ -34,9 +35,78 @@ const paramsSchema = z.strictObject({
 
 const bodySchema = z.strictObject({
     logoUrl: z
-        .string()
-        .optional()
-        .transform((val) => (val === "" ? null : val)),
+        .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(),
     logoWidth: z.coerce.number<number>().min(1),
     logoHeight: z.coerce.number<number>().min(1),
     resourceTitle: z.string(),

server/private/routers/remoteExitNode/exitNodeReconnectScheduler.ts

@@ -0,0 +1,202 @@
+/*
+ * 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 axios from "axios";
+import { db, exitNodes, newts, sites } from "@server/db";
+import { eq } from "drizzle-orm";
+import logger from "@server/logger";
+import redisManager from "#private/lib/redis";
+import { sendToClient } from "#private/routers/ws";
+
+const INITIAL_DELAY_MS = 15 * 1000; // 15 seconds before first check
+const CHECK_INTERVAL_MS = 10 * 1000; // Check every 10 seconds
+const MAX_DURATION_MS = 5 * 60 * 1000; // Give up after 5 minutes
+const REDIS_PENDING_SET = "exit-node-reconnect-pending";
+const REDIS_HASH_PREFIX = "exit-node-reconnect:";
+
+interface PendingReconnect {
+    startTime: number;
+    reachableAt: string;
+}
+
+// In-memory tracking for this node
+const pendingReconnects = new Map<number, PendingReconnect>();
+
+let schedulerInterval: NodeJS.Timeout | null = null;
+
+/**
+ * Schedules a reconnect check for newts connected to the given exit node.
+ * Called when an exit node transitions from offline to online.
+ */
+export async function scheduleExitNodeReconnect(
+    exitNodeId: number,
+    reachableAt: string
+): Promise<void> {
+    logger.info(
+        `Scheduling newt reconnect for exit node ${exitNodeId} (reachableAt: ${reachableAt})`
+    );
+
+    const entry: PendingReconnect = {
+        startTime: Date.now(),
+        reachableAt
+    };
+
+    pendingReconnects.set(exitNodeId, entry);
+
+    // Store in Redis if available for cross-node coordination
+    if (redisManager.isRedisEnabled()) {
+        await redisManager.sadd(REDIS_PENDING_SET, exitNodeId.toString());
+        await redisManager.hset(
+            `${REDIS_HASH_PREFIX}${exitNodeId}`,
+            "startTime",
+            entry.startTime.toString()
+        );
+        await redisManager.hset(
+            `${REDIS_HASH_PREFIX}${exitNodeId}`,
+            "reachableAt",
+            reachableAt
+        );
+    }
+}
+
+/**
+ * Starts the background interval that checks pending exit node reconnects.
+ */
+export function startExitNodeReconnectScheduler(): void {
+    if (schedulerInterval) {
+        return;
+    }
+
+    schedulerInterval = setInterval(async () => {
+        try {
+            await processPendingReconnects();
+        } catch (error) {
+            logger.error("Error in exit node reconnect scheduler", { error });
+        }
+    }, CHECK_INTERVAL_MS);
+
+    logger.debug("Started exit node reconnect scheduler");
+}
+
+async function processPendingReconnects(): Promise<void> {
+    // Merge in-memory and Redis-tracked pending reconnects
+    const toProcess = new Map(pendingReconnects);
+
+    if (redisManager.isRedisEnabled()) {
+        const redisIds = await redisManager.smembers(REDIS_PENDING_SET);
+        for (const idStr of redisIds) {
+            const id = parseInt(idStr, 10);
+            if (!toProcess.has(id)) {
+                const startTimeStr = await redisManager.hget(
+                    `${REDIS_HASH_PREFIX}${id}`,
+                    "startTime"
+                );
+                const reachableAt = await redisManager.hget(
+                    `${REDIS_HASH_PREFIX}${id}`,
+                    "reachableAt"
+                );
+                if (startTimeStr && reachableAt) {
+                    toProcess.set(id, {
+                        startTime: parseInt(startTimeStr, 10),
+                        reachableAt
+                    });
+                }
+            }
+        }
+    }
+
+    const now = Date.now();
+
+    for (const [exitNodeId, entry] of toProcess) {
+        const elapsed = now - entry.startTime;
+
+        // Give up after max duration
+        if (elapsed >= MAX_DURATION_MS) {
+            logger.warn(
+                `Exit node reconnect check timed out for exit node ${exitNodeId} after 5 minutes`
+            );
+            await removePending(exitNodeId);
+            continue;
+        }
+
+        // Respect initial delay
+        if (elapsed < INITIAL_DELAY_MS) {
+            continue;
+        }
+
+        // Check if the exit node HTTP endpoint is reachable
+        const pingUrl = `${entry.reachableAt}/ping`;
+        try {
+            await axios.get(pingUrl, { timeout: 5000 });
+        } catch {
+            logger.debug(
+                `Exit node ${exitNodeId} not yet reachable at ${pingUrl}`
+            );
+            continue;
+        }
+
+        // Node is reachable — send reconnect to all connected newts
+        logger.info(
+            `Exit node ${exitNodeId} is reachable. Sending newt/wg/reconnect to connected newts.`
+        );
+
+        await sendReconnectToNewts(exitNodeId);
+        await removePending(exitNodeId);
+    }
+}
+
+async function sendReconnectToNewts(exitNodeId: number): Promise<void> {
+    try {
+        const connectedNewts = await db
+            .select({ newtId: newts.newtId })
+            .from(newts)
+            .innerJoin(sites, eq(newts.siteId, sites.siteId))
+            .where(eq(sites.exitNodeId, exitNodeId));
+
+        if (connectedNewts.length === 0) {
+            logger.debug(
+                `No newts found for exit node ${exitNodeId}, nothing to reconnect`
+            );
+            return;
+        }
+
+        logger.info(
+            `Sending newt/wg/reconnect to ${connectedNewts.length} newt(s) for exit node ${exitNodeId}`
+        );
+
+        const reconnectMessage = {
+            type: "newt/wg/reconnect",
+            data: {}
+        };
+
+        await Promise.allSettled(
+            connectedNewts.map(({ newtId }) =>
+                sendToClient(newtId, reconnectMessage)
+            )
+        );
+    } catch (error) {
+        logger.error(
+            `Failed to send reconnect messages for exit node ${exitNodeId}`,
+            { error }
+        );
+    }
+}
+
+async function removePending(exitNodeId: number): Promise<void> {
+    pendingReconnects.delete(exitNodeId);
+
+    if (redisManager.isRedisEnabled()) {
+        await redisManager.srem(REDIS_PENDING_SET, exitNodeId.toString());
+        await redisManager.del(`${REDIS_HASH_PREFIX}${exitNodeId}`);
+    }
+}

server/private/routers/remoteExitNode/handleRemoteExitNodePingMessage.ts

@@ -16,6 +16,7 @@ import { MessageHandler } from "@server/routers/ws";
 import { RemoteExitNode } from "@server/db";
 import { eq } from "drizzle-orm";
 import logger from "@server/logger";
+import { scheduleExitNodeReconnect } from "./exitNodeReconnectScheduler";
 
 /**
  * Handles ping messages from clients and responds with pong
@@ -37,6 +38,13 @@ export const handleRemoteExitNodePingMessage: MessageHandler = async (
     }
 
     try {
+        // Fetch the current state before updating so we can detect the offline→online transition
+        const [currentExitNode] = await db
+            .select({ online: exitNodes.online, reachableAt: exitNodes.reachableAt })
+            .from(exitNodes)
+            .where(eq(exitNodes.exitNodeId, remoteExitNode.exitNodeId))
+            .limit(1);
+
         // Update the exit node's last ping timestamp
         await db
             .update(exitNodes)
@@ -45,6 +53,16 @@ export const handleRemoteExitNodePingMessage: MessageHandler = async (
                 online: true
             })
             .where(eq(exitNodes.exitNodeId, remoteExitNode.exitNodeId));
+
+        // If the exit node was offline and is now coming online, schedule newt reconnects
+        if (currentExitNode && !currentExitNode.online && currentExitNode.reachableAt) {
+            scheduleExitNodeReconnect(
+                remoteExitNode.exitNodeId,
+                currentExitNode.reachableAt
+            ).catch((error) => {
+                logger.error("Failed to schedule exit node reconnect", { error });
+            });
+        }
     } catch (error) {
         logger.error("Error handling ping message", { error });
     }

server/private/routers/remoteExitNode/index.ts

@@ -22,3 +22,4 @@ export * from "./listRemoteExitNodes";
 export * from "./pickRemoteExitNodeDefaults";
 export * from "./quickStartRemoteExitNode";
 export * from "./offlineChecker";
+export * from "./exitNodeReconnectScheduler";

server/private/routers/ws/messageHandlers.ts

@@ -14,7 +14,8 @@
 import {
     handleRemoteExitNodeRegisterMessage,
     handleRemoteExitNodePingMessage,
-    startRemoteExitNodeOfflineChecker
+    startRemoteExitNodeOfflineChecker,
+    startExitNodeReconnectScheduler
 } from "#private/routers/remoteExitNode";
 import { MessageHandler } from "@server/routers/ws";
 import { build } from "@server/build";
@@ -29,4 +30,5 @@ export const messageHandlers: Record<string, MessageHandler> = {
 
 if (build != "saas") {
     startRemoteExitNodeOfflineChecker(); // this is to handle the offline check for remote exit nodes
+    startExitNodeReconnectScheduler(); // check pending exit node reconnects and notify newts
 }

server/routers/client/index.ts

@@ -10,5 +10,3 @@ 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

@@ -1,81 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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/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/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,65 +153,6 @@ 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 =
@@ -903,75 +844,6 @@ 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/connection/page.tsx

@@ -9,7 +9,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { toast } from "@app/hooks/useToast";
-import { createApiClient } from "@app/lib/api";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
 import { build } from "@server/build";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
@@ -294,7 +294,7 @@ export default function ConnectionLogsPage() {
         } catch (error) {
             toast({
                 title: t("error"),
-                description: t("Failed to filter logs"),
+                description: formatAxiosError(error),
                 variant: "destructive"
             });
         } finally {

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,11 +44,77 @@ export type AuthPageCustomizationProps = {
 };
 
 const AuthPageFormSchema = z.object({
-    logoUrl: z
-        .string()
-        .optional()
-        .transform((val) => (val === "" ? undefined : val)),
+    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
+                });
+            }
+        })
+    ]),
     logoWidth: z.coerce.number<number>().min(1),
     logoHeight: z.coerce.number<number>().min(1),
     orgTitle: z.string().optional(),

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/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/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) {
@@ -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/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,
@@ -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/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

@@ -33,6 +33,7 @@ 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 +209,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,