refactor(authz): use bun models in migration 099, wire oss role get

- migration 099 follows the migration-local row struct pattern: bun
  NewSelect/NewUpdate for the role table reads and backfill writes; the
  openfga store and tuple lookups stay raw like 081/083
- oss provider Get reads the role from the store instead of returning
  unsupported

docs/api/openapi.yml

@@ -543,6 +543,31 @@ components:
       required:
       - id
       type: object
+    AuthtypesGettableRole:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        description:
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        type:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - name
+      - description
+      - type
+      - orgId
+      type: object
     AuthtypesGettableToken:
       properties:
         accessToken:
@@ -694,43 +719,6 @@ components:
       - detach
       type: string
     AuthtypesRole:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        description:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        orgId:
-          type: string
-        type:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - name
-      - description
-      - type
-      - orgId
-      type: object
-    AuthtypesRoleMapping:
-      properties:
-        defaultRole:
-          type: string
-        groupMappings:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        useRoleAttribute:
-          type: boolean
-      type: object
-    AuthtypesRoleWithTransactionGroups:
       properties:
         createdAt:
           format: date-time
@@ -758,6 +746,18 @@ components:
       - orgId
       - transactionGroups
       type: object
+    AuthtypesRoleMapping:
+      properties:
+        defaultRole:
+          type: string
+        groupMappings:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        useRoleAttribute:
+          type: boolean
+      type: object
     AuthtypesSamlConfig:
       properties:
         attributeMapping:
@@ -11828,7 +11828,7 @@ paths:
                 properties:
                   data:
                     items:
-                      $ref: '#/components/schemas/AuthtypesRole'
+                      $ref: '#/components/schemas/AuthtypesGettableRole'
                     type: array
                   status:
                     type: string
@@ -12012,7 +12012,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/AuthtypesRoleWithTransactionGroups'
+                    $ref: '#/components/schemas/AuthtypesRole'
                   status:
                     type: string
                 required:

ee/authz/openfgaauthz/provider.go

@@ -119,10 +119,6 @@ func (provider *provider) CheckTransactions(ctx context.Context, subject string,
 	return results, nil
 }
 
-func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
-	return provider.openfgaServer.ListObjects(ctx, subject, relation, objectType)
-}
-
 func (provider *provider) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
 	return provider.openfgaServer.Write(ctx, additions, deletions)
 }
@@ -131,10 +127,6 @@ func (provider *provider) ReadTuples(ctx context.Context, tupleKey *openfgav1.Re
 	return provider.openfgaServer.ReadTuples(ctx, tupleKey)
 }
 
-func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.Role, error) {
-	return provider.pkgAuthzService.Get(ctx, orgID, id)
-}
-
 func (provider *provider) GetByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*authtypes.Role, error) {
 	return provider.pkgAuthzService.GetByOrgIDAndName(ctx, orgID, name)
 }
@@ -183,7 +175,7 @@ func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context,
 	return provider.Write(ctx, tuples, nil)
 }
 
-func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *authtypes.RoleWithTransactionGroups) error {
+func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -208,70 +200,31 @@ func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *a
 		return err
 	}
 
-	if err := provider.store.Create(ctx, role.Role); err != nil {
-		return err
-	}
-
-	return nil
+	return provider.store.Create(ctx, role)
 }
 
-func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) (*authtypes.Role, error) {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	existingRole, err := provider.store.GetByOrgIDAndName(ctx, role.OrgID, role.Name)
-	if err != nil {
-		if !errors.Ast(err, errors.TypeNotFound) {
-			return nil, err
-		}
-	}
-
-	if existingRole != nil {
-		return existingRole, nil
-	}
-
-	err = provider.store.Create(ctx, role)
-	if err != nil {
-		return nil, err
-	}
-
-	return role, nil
+func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.Role, error) {
+	return provider.store.Get(ctx, orgID, id)
 }
 
-func (provider *provider) GetWithTransactionGroups(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.RoleWithTransactionGroups, error) {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	role, err := provider.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	tuples, err := provider.readAllTuplesForRole(ctx, role.Name, orgID)
-	if err != nil {
-		return nil, err
-	}
-
-	transactionGroups := authtypes.MustNewTransactionGroupsFromTuples(tuples)
-	return authtypes.MakeRoleWithTransactionGroups(role, transactionGroups), nil
-}
-
-func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updatedRole *authtypes.RoleWithTransactionGroups) error {
+func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updatedRole *authtypes.Role) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	existingRole, err := provider.GetWithTransactionGroups(ctx, orgID, updatedRole.ID)
+	existingRole, err := provider.Get(ctx, orgID, updatedRole.ID)
 	if err != nil {
 		return err
 	}
 
-	additions, deletions := existingRole.TransactionGroups.Diff(updatedRole.TransactionGroups)
+	existingTuples, err := provider.readAllTuplesForRole(ctx, existingRole.Name, orgID)
+	if err != nil {
+		return err
+	}
+
+	existingGroups := authtypes.MustNewTransactionGroupsFromTuples(existingTuples)
+	additions, deletions := existingGroups.Diff(updatedRole.TransactionGroups)
 	additionTuples, err := authtypes.NewTuplesFromTransactionGroups(existingRole.Name, orgID, additions)
 	if err != nil {
 		return err
@@ -287,7 +240,7 @@ func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updated
 		return err
 	}
 
-	return provider.store.Update(ctx, orgID, updatedRole.Role)
+	return provider.store.Update(ctx, orgID, updatedRole)
 }
 
 func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
@@ -296,7 +249,7 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	role, err := provider.GetWithTransactionGroups(ctx, orgID, id)
+	role, err := provider.Get(ctx, orgID, id)
 	if err != nil {
 		return err
 	}
@@ -312,7 +265,7 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 		}
 	}
 
-	tuples, err := authtypes.NewTuplesFromTransactionGroups(role.Name, orgID, role.TransactionGroups)
+	tuples, err := provider.readAllTuplesForRole(ctx, role.Name, orgID)
 	if err != nil {
 		return err
 	}
@@ -324,6 +277,24 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 	return provider.store.Delete(ctx, orgID, id)
 }
 
+func (provider *provider) readAllTuplesForRole(ctx context.Context, roleName string, orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
+	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
+
+	tuples := make([]*openfgav1.TupleKey, 0)
+	for _, objectType := range provider.registry.Types() {
+		typeTuples, err := provider.openfgaServer.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
+			User:   subject,
+			Object: objectType.StringValue() + ":",
+		})
+		if err != nil {
+			return nil, err
+		}
+		tuples = append(tuples, typeTuples...)
+	}
+
+	return tuples, nil
+}
+
 func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) []*openfgav1.TupleKey {
 	tuples := []*openfgav1.TupleKey{}
 
@@ -375,21 +346,3 @@ func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) []*
 
 	return tuples
 }
-
-func (provider *provider) readAllTuplesForRole(ctx context.Context, roleName string, orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
-	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
-
-	tuples := make([]*openfgav1.TupleKey, 0)
-	for _, objectType := range provider.registry.Types() {
-		typeTuples, err := provider.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
-			User:   subject,
-			Object: objectType.StringValue() + ":",
-		})
-		if err != nil {
-			return nil, err
-		}
-		tuples = append(tuples, typeTuples...)
-	}
-
-	return tuples, nil
-}

ee/authz/openfgaserver/server.go

@@ -105,10 +105,6 @@ func (server *Server) BatchCheck(ctx context.Context, tupleReq map[string]*openf
 	return server.pkgAuthzService.BatchCheck(ctx, tupleReq)
 }
 
-func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
-	return server.pkgAuthzService.ListObjects(ctx, subject, relation, objectType)
-}
-
 func (server *Server) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
 	return server.pkgAuthzService.Write(ctx, additions, deletions)
 }

frontend/src/AppRoutes/routes.ts

@@ -513,13 +513,6 @@ const routes: AppRoutes[] = [
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
-		exact: true,
-		component: LLMObservabilityPage,
-		key: 'LLM_OBSERVABILITY_ATTRIBUTE_MAPPING',
-		isPrivate: true,
-	},
 	{
 		path: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
 		exact: true,

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -2082,6 +2082,39 @@ export interface AuthtypesGettableAuthDomainDTO {
 	updatedAt?: string;
 }
 
+export interface AuthtypesGettableRoleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	description: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 */
+	type: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
 export interface AuthtypesGettableTokenDTO {
 	/**
 	 * @type string
@@ -2325,39 +2358,6 @@ export interface AuthtypesPostableUserRoleDTO {
 }
 
 export interface AuthtypesRoleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	description: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 */
-	type: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-}
-
-export interface AuthtypesRoleWithTransactionGroupsDTO {
 	/**
 	 * @type string
 	 * @format date-time
@@ -10399,7 +10399,7 @@ export type ListRoles200 = {
 	/**
 	 * @type array
 	 */
-	data: AuthtypesRoleDTO[];
+	data: AuthtypesGettableRoleDTO[];
 	/**
 	 * @type string
 	 */
@@ -10421,7 +10421,7 @@ export type GetRolePathParameters = {
 	id: string;
 };
 export type GetRole200 = {
-	data: AuthtypesRoleWithTransactionGroupsDTO;
+	data: AuthtypesRoleDTO;
 	/**
 	 * @type string
 	 */

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -20,9 +20,9 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		color: var(--input-with-label-color, var(--l2-foreground));
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		color: var(--l2-foreground);
 
 		display: flex;
 		justify-content: flex-start;
@@ -35,54 +35,21 @@
 		min-width: 150px;
 		font-family: 'Space Mono', monospace !important;
 
-		--input-border-radius: 0px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		color: var(--input-with-label-color, var(--l2-foreground));
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
 
+		border-right: none;
+		border-left: none;
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
+		border-top-left-radius: 0px;
+		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
-		line-height: 25px;
-
-		position: relative;
-
-		&:hover,
-		&:focus {
-			z-index: 1;
-		}
-
-		.ant-select-selector {
-			position: relative;
-			border-radius: inherit;
-		}
-
-		.ant-select:hover .ant-select-selector,
-		.ant-select-focused .ant-select-selector {
-			z-index: 1;
-		}
-
-		&.input__has-label-after {
-			margin-left: -1px;
-
-			.ant-select-selector {
-				margin-left: -1px;
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-		}
-
-		&.input__has-close-button {
-			.ant-select-selector {
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-
-			~ .close-btn {
-				margin-left: -1px;
-			}
-		}
+		line-height: 27px;
 
 		&::placeholder {
-			color: var(--input-with-label-color, var(--l3-foreground)) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -96,35 +63,25 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		height: 100%;
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		height: 38px;
 		width: 38px;
-		position: relative;
-
-		&:hover,
-		&:focus {
-			z-index: 2;
-		}
 	}
 
 	&.labelAfter {
 		.input {
-			border-radius: 2px;
-			border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-			background: var(--input-with-label-background-color, var(--l2-background));
+			border-radius: 0px 2px 2px 0px;
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
-
-			.ant-select-selector {
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-			}
 		}
 
 		.label {
 			border-left: none;
-			border-radius: 0px 2px 2px 0px;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
 		}
 	}
 }

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -45,10 +45,7 @@ function InputWithLabel({
 		>
 			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			<Input
-				className={cx('input', {
-					'input__has-label-after': !labelAfter,
-					'input__has-close-button': !!onClose,
-				})}
+				className="input"
 				placeholder={placeholder}
 				type={type}
 				value={inputValue}

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -80,8 +80,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--query-builder-v2-border-color, var(--l2-border)),
-					var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+					var(--l1-border),
+					var(--l1-border) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -101,8 +101,7 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted
-						var(--query-builder-v2-border-color, var(--l2-border));
+					border-left: 6px dotted var(--l1-border);
 				}
 
 				/* Horizontal line pointing from vertical to the item */
@@ -115,8 +114,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -242,8 +241,7 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted
-							var(--query-builder-v2-border-color, var(--l2-border));
+						border-left: 6px dotted var(--l1-border);
 					}
 
 					/* Horizontal line pointing from vertical to the item */
@@ -256,8 +254,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							var(--query-builder-v2-border-color, var(--l2-border)),
-							var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+							var(--l1-border),
+							var(--l1-border) 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -275,16 +273,6 @@
 					line-height: 16px; /* 128.571% */
 
 					resize: none;
-
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					);
-					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-
-					&:placeholder {
-						color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-					}
 				}
 
 				.formula-legend {
@@ -294,42 +282,15 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						);
-						color: var(--query-builder-v2-color, var(--l2-foreground));
+						background: var(--l2-background);
+						color: var(--l2-foreground);
 						font-size: 12px;
 						font-weight: 300;
-
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-						position: relative;
 					}
 
 					.ant-input {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-
-						height: 36px;
-
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						);
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-
-						position: relative;
-						margin-left: -1px;
-
-						&:hover,
-						&:focus {
-							z-index: 1;
-							border-color: var(--internal-ant-border-color-hover);
-						}
-
-						&:placeholder {
-							color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-						}
 					}
 				}
 			}
@@ -362,8 +323,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -434,8 +395,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -451,7 +412,7 @@
 				min-width: 120px;
 
 				border-radius: 2px;
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				border: 1px solid var(--l1-border);
 				background: var(--l1-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
@@ -496,16 +457,13 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
-			background: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			) !important;
-			height: 36px !important;
+			border: 1px solid var(--l1-border) !important;
+			background: var(--l1-background) !important;
+			height: 34px !important;
 			box-sizing: border-box !important;
 
 			.ant-select-selection-item {
-				color: var(--query-builder-v2-color, var(--l1-foreground));
+				color: var(--l1-foreground);
 			}
 		}
 

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -92,11 +92,6 @@
 
 				.ant-select {
 					width: 100%;
-
-					.ant-select-selector {
-						min-height: 36px;
-					}
-
 					.ant-select-selection-search-input {
 						min-width: max-content !important;
 						max-width: 100% !important;
@@ -105,12 +100,9 @@
 
 				.ant-select-selector {
 					border-radius: 2px;
-					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
-					color: var(--query-builder-v2-color, var(--l2-foreground));
+					border: 1.005px solid var(--l1-border);
+					background: var(--l1-background);
+					color: var(--l1-foreground);
 					font-family: 'Geist Mono';
 					font-size: 13px;
 					font-style: normal;
@@ -131,7 +123,6 @@
 					.input {
 						flex: initial;
 						width: 100px !important;
-						min-height: 36px;
 					}
 				}
 			}

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss

@@ -8,9 +8,9 @@
 
 	.ant-select-selection-search-input {
 		font-size: 12px !important;
-		line-height: 25px;
+		line-height: 27px;
 		&::placeholder {
-			color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -22,12 +22,9 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
-		background-color: var(
-			--query-builder-v2-background-color,
-			var(--l2-background)
-		) !important;
-		color: var(--query-builder-v2-color, var(--l2-foreground));
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l1-background);
+		color: var(--l1-foreground);
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -36,49 +33,36 @@
 		min-height: 36px;
 
 		.ant-select-selection-placeholder {
-			color: var(
-				--query-builder-v2-placeholder-color,
-				var(--l3-foreground)
-			) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 	}
-}
 
-.qb-select-popover.ant-select-dropdown {
-	border-radius: 4px;
-	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-	background: var(--query-builder-v2-background-color, var(--l2-background));
-	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-	backdrop-filter: blur(20px);
+	.ant-select-dropdown {
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
 
-	.ant-select-item {
-		color: var(--query-builder-v2-color, var(--l2-foreground));
-		font-family: 'Geist Mono';
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		.ant-select-item {
+			color: var(--l1-foreground);
+			font-family: 'Geist Mono';
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
 
-		&:not(:last-of-type) {
-			margin-bottom: 4px;
-		}
+			&:hover,
+			&.ant-select-item-option-active {
+				background: var(--l3-background) !important;
+			}
 
-		&:hover,
-		&.ant-select-item-option-active {
-			background: var(
-				--query-builder-v2-selected-background-color,
-				var(--l3-background)
-			) !important;
-		}
-
-		&.ant-select-item-option-selected {
-			background: var(
-				--query-builder-v2-selected-background-color,
-				var(--l3-background)
-			) !important;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-			font-weight: 600;
+			&.ant-select-item-option-selected {
+				background: var(--l3-background) !important;
+				border: 1px solid var(--l1-border);
+				font-weight: 600;
+			}
 		}
 	}
 }

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx

@@ -142,7 +142,6 @@ export const MetricsSelect = memo(function MetricsSelect({
 			{signalSourceChangeEnabled && (
 				<Select
 					className="source-selector"
-					popupClassName="qb-select-popover"
 					placeholder="Source"
 					options={SOURCE_OPTIONS}
 					value={source}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -1,23 +1,8 @@
+// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
+
 .query-add-ons {
 	width: 100%;
 
-	--toggle-group-secondary-bg: var(
-		--query-builder-v2-toggle-group-background-color,
-		var(--l1-background-hover)
-	);
-	--toggle-group-secondary-border: var(
-		--query-builder-v2-toggle-group-border-color,
-		var(--l2-border)
-	);
-	--toggle-group-secondary-active-bg: var(
-		--query-builder-v2-toggle-group-active-background-color,
-		var(--l1-background)
-	);
-	--toggle-group-secondary-bg-hover: var(
-		--query-builder-v2-toggle-group-background-color-hover,
-		var(--l2-background)
-	);
-
 	.add-on-tab-title {
 		display: flex;
 		align-items: center;
@@ -44,33 +29,32 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);
 
-			color: var(--query-builder-v2-color, var(--l2-foreground));
+			color: var(--l2-foreground);
 		}
 
 		> button {
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
 			&:first-child {
-				border-left: 1px solid
-					var(--query-builder-v2-border-color, var(--l2-border));
+				border-left: 1px solid var(--l1-border);
 			}
 
 			&::before {
-				background: var(--query-builder-v2-border-color, var(--l2-border));
+				background: var(--l1-border);
 			}
 
 			&[data-state='on'] {
 				color: var(--text-robin-500);
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				border: 1px solid var(--l1-border);
 
 				display: none;
 
 				&::before {
-					background: var(--query-builder-v2-border-color, var(--l2-border));
+					background: var(--l1-border);
 				}
 			}
 		}
@@ -81,7 +65,7 @@
 		height: 30px;
 
 		border-radius: 2px;
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+		border: 1px solid var(--l1-border);
 		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
@@ -94,13 +78,10 @@
 	align-items: center;
 
 	.having-filter-select-container {
-		position: relative;
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		align-items: flex-start;
-		background: var(--query-builder-v2-background-color, var(--l2-background));
-		padding-right: 38px;
+		align-items: center;
 
 		.having-filter-select-editor {
 			border-radius: 2px;
@@ -125,17 +106,15 @@
 				}
 
 				.cm-content {
-					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-					border-left-width: 0px;
-					border-right-width: 0px;
+					border-radius: 2px;
+					border: 1px solid var(--l1-border);
+					border-top-right-radius: 0px;
+					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
+					background-color: var(--l2-background) !important;
 
 					&:focus-within {
-						border-color: var(--query-builder-v2-border-color, var(--l2-border));
+						border-color: var(--l1-border);
 					}
 				}
 
@@ -239,32 +218,17 @@
 				}
 
 				.cm-line {
-					min-height: 34px;
-					line-height: 32px !important;
+					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
-
-					&,
-					.ͼ1a {
-						color: var(--query-builder-v2-color, var(--l2-foreground));
-					}
+					background-color: var(--l2-background) !important;
 
 					::-moz-selection {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 
 					::selection {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 
@@ -273,11 +237,8 @@
 					}
 
 					.chip-decorator {
-						background: var(
-							--query-builder-v2-chip-decorator-background-color,
-							var(--l3-background)
-						) !important;
-						color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+						background: var(--l3-background) !important;
+						color: var(--l1-foreground) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -285,38 +246,34 @@
 				}
 
 				.cm-selectionBackground {
-					background: var(
-						--query-builder-v2-selection-background-color,
-						var(--l3-background)
-					) !important;
+					background: var(--l3-background) !important;
 					opacity: 0.5 !important;
 				}
 
 				.cm-activeLine > span {
 					font-size: 12px !important;
 				}
-
-				.cm-placeholder {
-					color: var(
-						--query-builder-v2-placeholder-color,
-						var(--l3-foreground)
-					) !important;
-				}
 			}
 		}
 
 		.close-btn {
-			position: absolute;
-			top: 0;
-			right: 0;
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-			background: var(--query-builder-v2-background-color, var(--l2-background));
-			height: 100%;
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
+			height: 38px;
 			width: 38px;
 
+			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
+
+			&:focus:not(:focus-visible),
+			&.ant-btn:focus:not(:focus-visible) {
+				border-color: var(--l2-border);
+				border-left-color: transparent;
+				outline: none;
+				box-shadow: none;
+			}
 		}
 	}
 }
@@ -343,8 +300,20 @@
 			font-size: 12px !important;
 		}
 
-		input {
-			min-height: 36px;
+		$add-on-row-height: 38px;
+
+		.periscope-input-with-label {
+			.input {
+				.ant-select {
+					height: $add-on-row-height;
+				}
+			}
+		}
+
+		.input-with-label {
+			.input {
+				height: $add-on-row-height;
+			}
 		}
 	}
 }

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -23,7 +23,7 @@
 				flex: 1;
 				min-width: 0;
 				font-size: 12px;
-				color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+				color: var(--l2-foreground) !important;
 
 				&.error {
 					.cm-editor {
@@ -51,15 +51,14 @@
 
 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+						border: 1px solid var(--l1-border);
+						border-top-right-radius: 0px;
+						border-bottom-right-radius: 0px;
 						padding: 0px !important;
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						) !important;
+						background-color: var(--l1-background) !important;
 
 						&:focus-within {
-							border-color: var(--query-builder-v2-border-color, var(--l2-border));
+							border-color: var(--l1-border);
 						}
 					}
 
@@ -75,7 +74,7 @@
 						right: 0px !important;
 
 						border-radius: 4px;
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+						border: 1px solid var(--l1-border);
 						background: linear-gradient(
 							139deg,
 							color-mix(in srgb, var(--card) 80%, transparent) 0%,
@@ -119,7 +118,7 @@
 								box-sizing: border-box;
 								overflow: hidden;
 
-								color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+								color: var(--l2-foreground) !important;
 								font-family: 'Space Mono', monospace !important;
 
 								.cm-completionIcon {
@@ -128,10 +127,7 @@
 
 								&:hover,
 								&[aria-selected='true'] {
-									background: var(
-										--query-builder-v2-selection-background-color,
-										var(--l3-background)
-									) !important;
+									background: var(--l3-background) !important;
 									color: var(--l1-foreground) !important;
 									font-weight: 600 !important;
 								}
@@ -146,24 +142,15 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						) !important;
+						background-color: var(--l2-background) !important;
 
 						::-moz-selection {
-							background: var(
-								--query-builder-v2-selection-background-color,
-								var(--l3-background)
-							) !important;
+							background: var(--l3-background) !important;
 							opacity: 0.5 !important;
 						}
 
 						::selection {
-							background: var(
-								--query-builder-v2-selection-background-color,
-								var(--l3-background)
-							) !important;
+							background: var(--l3-background) !important;
 							opacity: 0.5 !important;
 						}
 
@@ -172,11 +159,8 @@
 						}
 
 						.chip-decorator {
-							background: var(
-								--query-builder-v2-chip-decorator-background-color,
-								var(--l3-background)
-							) !important;
-							color: var(--query-builder-v2-color, var(--l1-foreground)) !important;
+							background: var(--l3-background) !important;
+							color: var(--l1-foreground) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -184,10 +168,7 @@
 					}
 
 					.cm-selectionBackground {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -220,11 +201,12 @@
 
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-				background: var(--query-builder-v2-background-color, var(--l2-background));
-				height: 100%;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
+				height: 38px;
 				width: 38px;
 
+				border-left: transparent;
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
 			}
@@ -235,13 +217,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 			font-family: 'Space Mono', monospace !important;
 
 			&::placeholder {
-				color: var(--query-builder-v2-color, var(--l2-foreground));
+				color: var(--l1-foreground);
 				opacity: 0.5;
 			}
 		}
@@ -256,10 +238,9 @@
 			.query-aggregation-interval-input-container {
 				.query-aggregation-interval-input {
 					input {
-						min-height: 36px;
 						max-width: 120px;
 						&::placeholder {
-							color: var(--query-builder-v2-color, var(--l2-foreground));
+							color: var(--l2-foreground);
 						}
 					}
 				}
@@ -270,8 +251,8 @@
 
 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--query-builder-v2-border-color, var(--l2-border));
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+		background-color: var(--l1-border);
+		border: 1px solid var(--l1-border);
 		border-radius: 4px;
 		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 	}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.styles.scss

@@ -1,7 +1,7 @@
 .add-trace-operator-button,
 .add-new-query-button,
 .add-formula-button {
-	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-	background: var(--query-builder-v2-background-color, var(--l2-background));
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -40,14 +40,11 @@ $max-recents-shown: 5;
 		.query-status-container {
 			width: 32px;
 
-			background-color: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			) !important;
+			background-color: var(--l1-background) !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -86,16 +83,16 @@ $max-recents-shown: 5;
 
 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			padding: 0px !important;
 
 			&:focus-within {
-				border-color: var(--query-builder-v2-border-color, var(--l2-border));
+				border-color: var(--l1-border);
 			}
 		}
 
 		&.cm-focused {
-			outline: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			outline: 1px solid var(--l1-border);
 		}
 
 		.cm-tooltip-autocomplete {
@@ -186,17 +183,11 @@ $max-recents-shown: 5;
 
 					font-family: 'Space Mono', monospace !important;
 
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
-					color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+					background-color: var(--l1-background) !important;
+					color: var(--l2-foreground) !important;
 
 					&:hover {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 					}
 
 					.cm-completionIcon {
@@ -214,10 +205,7 @@ $max-recents-shown: 5;
 					}
 
 					&[aria-selected='true'] {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						font-weight: 600 !important;
 					}
 				}
@@ -286,49 +274,25 @@ $max-recents-shown: 5;
 		}
 
 		.cm-line {
-			line-height: 36px !important;
+			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			) !important;
-
-			&,
-			.ͼ1a {
-				color: var(--query-builder-v2-color, var(--l2-foreground));
-			}
+			background-color: var(--l2-background) !important;
 
 			::-moz-selection {
-				background: var(
-					--query-builder-v2-selection-background-color,
-					var(--l3-background)
-				) !important;
+				background: var(--l3-background) !important;
 				opacity: 0.5 !important;
 			}
 
 			::selection {
-				background: var(
-					--query-builder-v2-selection-background-color,
-					var(--l3-background)
-				) !important;
+				background: var(--l3-background) !important;
 				opacity: 0.5 !important;
 			}
 		}
 
 		.cm-selectionBackground {
-			background: var(
-				--query-builder-v2-selection-background-color,
-				var(--l3-background)
-			) !important;
+			background: var(--l3-background) !important;
 			opacity: 0.5 !important;
 		}
-
-		.cm-placeholder {
-			color: var(
-				--query-builder-v2-placeholder-color,
-				var(--l3-foreground)
-			) !important;
-		}
 	}
 
 	.cursor-position {

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss

@@ -65,14 +65,6 @@
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
-
-		// Meant to fix the query builder colors
-		--input-background: var(--l2-background);
-		--input-hover-background: var(--l2-background);
-		--input-focus-background: var(--l2-background);
-		--input-border-color: var(--l2-border);
-		--input-hover-border-color: var(--internal-ant-border-color-hover);
-		--input-focus-border-color: var(--internal-ant-border-color-hover);
 	}
 
 	&-aggregation-container {

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -3,7 +3,7 @@ import { Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useListRoles } from 'api/generated/services/role';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import APIError from 'types/api/error';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -16,7 +16,7 @@ export interface RoleOption {
 }
 
 export function useRoles(): {
-	roles: AuthtypesRoleDTO[];
+	roles: AuthtypesGettableRoleDTO[];
 	isLoading: boolean;
 	isError: boolean;
 	error: APIError | undefined;
@@ -33,7 +33,7 @@ export function useRoles(): {
 }
 
 export function getRoleOptions(
-	roles: AuthtypesRoleDTO[],
+	roles: AuthtypesGettableRoleDTO[],
 	valueField: 'id' | 'name',
 ): RoleOption[] {
 	return roles.map((role) => ({
@@ -79,7 +79,7 @@ interface BaseProps {
 	placeholder?: string;
 	className?: string;
 	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
-	roles?: AuthtypesRoleDTO[];
+	roles?: AuthtypesGettableRoleDTO[];
 	loading?: boolean;
 	isError?: boolean;
 	error?: APIError;

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -4,7 +4,7 @@ import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { useCopyToClipboard } from 'react-use';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -24,7 +24,7 @@ interface OverviewTabProps {
 	onRolesChange: (v: string[]) => void;
 	isDisabled: boolean;
 	canUpdate?: boolean;
-	availableRoles: AuthtypesRoleDTO[];
+	availableRoles: AuthtypesGettableRoleDTO[];
 	rolesLoading?: boolean;
 	rolesError?: boolean;
 	rolesErrorObj?: APIError | undefined;

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -57,13 +57,10 @@ function TimelineV3(props: ITimelineV3Props): JSX.Element {
 		}
 
 		const timeAtCursor = offsetTimestamp + cursorXPercent * spread;
-		// Use the same width-derived interval spread the ticks use, so the badge
-		// unit always matches the tick unit (narrow rulers pick fewer intervals).
-		const intervalSpread = spread / getMinimumIntervalsBasedOnWidth(width);
-		const unit = getIntervalUnit(intervalSpread, offsetTimestamp);
+		const unit = getIntervalUnit(spread, offsetTimestamp);
 		const formatted = toFixed(resolveTimeFromInterval(timeAtCursor, unit), 2);
 		return `${formatted}${unit.name}`;
-	}, [cursorXPercent, spread, offsetTimestamp, width]);
+	}, [cursorXPercent, spread, offsetTimestamp]);
 
 	if (endTimestamp < startTimestamp) {
 		console.error(
@@ -97,17 +94,12 @@ function TimelineV3(props: ITimelineV3Props): JSX.Element {
 						>
 							<text
 								x={index === intervals.length - 1 ? -10 : 0}
-								y={timelineHeight * 2 - 3}
+								y={timelineHeight * 2}
 								fill={strokeColor}
 							>
 								{interval.label}
 							</text>
-							<line
-								y1={0}
-								y2={timelineHeight - 3}
-								stroke={strokeColor}
-								strokeWidth="1"
-							/>
+							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
 						</g>
 					))}
 			</svg>

frontend/src/components/TimelineV3/__tests__/utils.test.ts

@@ -1,63 +0,0 @@
-import {
-	getIntervals,
-	getIntervalUnit,
-	getMinimumIntervalsBasedOnWidth,
-} from '../utils';
-
-// A tick label looks like "200.00ms" / "1.10s" — grab the trailing unit name.
-function unitOfLabel(label: string): string {
-	const match = label.match(/[a-z]+$/i);
-	return match ? match[0] : '';
-}
-
-describe('getMinimumIntervalsBasedOnWidth', () => {
-	it('returns fewer intervals for narrower rulers', () => {
-		expect(getMinimumIntervalsBasedOnWidth(500)).toBe(3);
-		expect(getMinimumIntervalsBasedOnWidth(700)).toBe(4);
-		expect(getMinimumIntervalsBasedOnWidth(900)).toBe(5);
-		expect(getMinimumIntervalsBasedOnWidth(1200)).toBe(6);
-	});
-});
-
-describe('getIntervalUnit', () => {
-	it('selects the unit from the interval spread', () => {
-		expect(getIntervalUnit(130, 0).name).toBe('ms');
-		expect(getIntervalUnit(1100, 0).name).toBe('s');
-		expect(getIntervalUnit(70_000, 0).name).toBe('m');
-	});
-
-	it('accounts for a large offset (deep-zoom labels stay readable)', () => {
-		// Cursor spread is tiny but the window starts 5,000,000ms into the trace.
-		expect(getIntervalUnit(100, 5_000_000).name).toBe('hr');
-	});
-
-	// Regression: the interval COUNT changes the chosen unit, so the crosshair
-	// badge must use the same width-derived count as the ticks. On a 5.5s trace a
-	// narrow ruler (5 intervals → 1100ms → "s") and a wide one (6 intervals →
-	// 916ms → "ms") pick different units.
-	it('can resolve to different units for the same spread at different counts', () => {
-		const spread = 5500;
-		expect(getIntervalUnit(spread / 5, 0).name).toBe('s');
-		expect(getIntervalUnit(spread / 6, 0).name).toBe('ms');
-	});
-});
-
-describe('badge/tick unit consistency', () => {
-	// The invariant the fix guarantees: when the badge and the ticks are fed the
-	// same width-derived intervalSpread, every tick label uses the badge's unit.
-	it.each([
-		{ spread: 1287, width: 900 },
-		{ spread: 5500, width: 900 }, // narrow → 5 intervals, the mismatch case
-		{ spread: 5500, width: 1200 }, // wide → 6 intervals
-		{ spread: 120_000, width: 700 },
-	])('spread=$spread width=$width', ({ spread, width }) => {
-		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
-		const intervalSpread = spread / minIntervals;
-		const badgeUnit = getIntervalUnit(intervalSpread, 0).name;
-		const intervals = getIntervals(intervalSpread, spread, 0);
-
-		intervals.forEach((interval) => {
-			expect(unitOfLabel(interval.label)).toBe(badgeUnit);
-		});
-	});
-});

frontend/src/components/TimelineV3/utils.ts

@@ -10,18 +10,14 @@ export type { Interval };
 
 /**
  * Select the interval unit matching the timeline's logic.
- * Exported so crosshair labels use the same unit as the timeline ticks.
- *
- * Takes the already-computed `intervalSpread` (spread / minIntervals) rather
- * than deriving it from a hardcoded interval count — the tick count is
- * width-dependent (`getMinimumIntervalsBasedOnWidth`), so callers must pass the
- * same `intervalSpread` the ticks use or the badge unit can diverge from the
- * ticks (e.g. ms vs s) on narrower rulers like the waterfall.
+ * Exported so crosshair labels use the same unit as timeline ticks.
  */
 export function getIntervalUnit(
-	intervalSpread: number,
+	spread: number,
 	offsetTimestamp: number,
 ): IIntervalUnit {
+	const minIntervals = 6;
+	const intervalSpread = spread / minIntervals;
 	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
 	let unit: IIntervalUnit = INTERVAL_UNITS[0];
 	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {

frontend/src/constants/routes.ts

@@ -89,7 +89,6 @@ const ROUTES = {
 	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
-	LLM_OBSERVABILITY_ATTRIBUTE_MAPPING: '/llm-observability/attribute-mapping',
 	LLM_OBSERVABILITY_BASE: '/llm-observability',
 	LLM_OBSERVABILITY_OVERVIEW: '/llm-observability/overview',
 	LLM_OBSERVABILITY_CONFIGURATION: '/llm-observability/configuration',

frontend/src/container/FormAlertRules/FormAlertRules.styles.scss

@@ -41,28 +41,6 @@
 
 .steps-container {
 	width: 80%;
-
-	.alert-query-section-container {
-		--query-builder-v2-color: var(--l2-foreground);
-		--query-builder-v2-background-color: var(--l3-background);
-		--query-builder-v2-border-color: var(--l3-border);
-		--query-builder-v2-selection-background-color: var(--l2-background);
-		--query-builder-v2-chip-decorator-background-color: var(--l2-background);
-		--query-builder-v2-placeholder-color: var(--l3-foreground);
-		--query-builder-v2-selected-background-color: var(--l3-foreground);
-		--query-search-background-color: var(--l3-background);
-		--query-search-background-color-selection: var(--l3-background);
-		--input-with-label-border-color: var(--l3-border);
-		--input-with-label-background-color: var(--l3-background);
-		--input-with-label-color: var(--l2-foreground);
-		--query-builder-v2-toggle-group-background-color: var(--l3-background);
-		--query-builder-v2-toggle-group-border-color: var(--l3-border);
-		--query-builder-v2-toggle-group-active-background-color: var(--l2-background);
-		--query-builder-v2-toggle-group-background-color-hover: var(--l3-background);
-		--input-height: 36px;
-		--input-hover-background: var(--l3-background);
-		--input-hover-border-color: var(--internal-ant-border-color-hover);
-	}
 }
 
 .qb-chart-preview-container {

frontend/src/container/GridCardLayout/GridCard/FullView/WidgetFullView.styles.scss

@@ -3,30 +3,6 @@
 	overflow-x: auto;
 	overflow-y: hidden;
 
-	--query-builder-v2-color: var(--l2-foreground);
-	--query-builder-v2-background-color: var(--l3-background);
-	--query-builder-v2-border-color: var(--l3-border);
-	--query-builder-v2-selection-background-color: var(--l2-background);
-	--query-builder-v2-chip-decorator-background-color: var(--l2-background);
-	--query-builder-v2-placeholder-color: var(--l3-foreground);
-	--query-builder-v2-selected-background-color: var(--l3-foreground);
-	--query-search-background-color: var(--l3-background);
-	--query-search-background-color-selection: var(--l3-background);
-	--input-with-label-border-color: var(--l3-border);
-	--input-with-label-background-color: var(--l3-background);
-	--input-with-label-color: var(--l2-foreground);
-	--query-builder-v2-toggle-group-background-color: var(--l3-background);
-	--query-builder-v2-toggle-group-border-color: var(--l3-border);
-	--query-builder-v2-toggle-group-active-background-color: var(--l2-background);
-	--query-builder-v2-toggle-group-background-color-hover: var(--l3-background);
-	--input-height: 36px;
-	--input-hover-background: var(--l3-background);
-	--input-hover-border-color: var(--internal-ant-border-color-hover);
-	--input-focus-border-color: var(--internal-ant-border-color-hover);
-	--input-background: var(--l3-background);
-	--input-focus-background: var(--l3-background);
-	--input-border-color: var(--l3-border);
-
 	.full-view-header-container {
 		display: flex;
 		flex-direction: column;

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss

@@ -1,13 +0,0 @@
-.llmObservabilityAttributeMapping {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--spacing-12);
-}
-
-.tableEmpty {
-	padding: var(--spacing-12) var(--spacing-6);
-	text-align: center;
-	color: var(--l3-foreground);
-	font-size: var(--periscope-font-size-base);
-}

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -1,26 +0,0 @@
-import AttributeMappingHeader from './components/AttributeMappingHeader';
-import styles from './LLMObservabilityAttributeMapping.module.scss';
-
-const noop = (): void => undefined;
-
-function LLMObservabilityAttributeMapping(): JSX.Element {
-	return (
-		<div
-			className={styles.llmObservabilityAttributeMapping}
-			data-testid="llm-observability-attribute-mapping-page"
-		>
-			<AttributeMappingHeader
-				isDirty={false}
-				isSaving={false}
-				onDiscard={noop}
-				onSave={noop}
-			/>
-
-			<div className={styles.tableEmpty} data-testid="attribute-mapping-empty">
-				No mapping groups configured yet.
-			</div>
-		</div>
-	);
-}
-
-export default LLMObservabilityAttributeMapping;

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.module.scss

@@ -1,34 +0,0 @@
-.pageHeader {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.pageHeaderTitle {
-	display: flex;
-	flex-direction: column;
-}
-
-.title {
-	margin: 0;
-	font-size: var(--periscope-font-size-large);
-	font-weight: var(--font-weight-semibold);
-}
-
-.description {
-	margin: var(--spacing-2) 0 0;
-	font-size: var(--periscope-font-size-base);
-	color: var(--l3-foreground);
-}
-
-.pageHeaderActions {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.unsavedChanges {
-	font-size: var(--periscope-font-size-base);
-	color: var(--accent-amber);
-}

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx

@@ -1,56 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-
-import styles from './AttributeMappingHeader.module.scss';
-
-interface AttributeMappingHeaderProps {
-	isDirty: boolean;
-	isSaving: boolean;
-	onDiscard: () => void;
-	onSave: () => void;
-}
-
-function AttributeMappingHeader({
-	isDirty,
-	isSaving,
-	onDiscard,
-	onSave,
-}: AttributeMappingHeaderProps): JSX.Element {
-	return (
-		<header className={styles.pageHeader}>
-			<div className={styles.pageHeaderTitle}>
-				<h1 className={styles.title}>Attribute Mapping</h1>
-				<p className={styles.description}>
-					Configure source-to-target attribute remapping for LLM traces
-				</p>
-			</div>
-			<div className={styles.pageHeaderActions}>
-				{isDirty && (
-					<span className={styles.unsavedChanges} data-testid="unsaved-changes">
-						Unsaved changes
-					</span>
-				)}
-				<Button
-					variant="outlined"
-					color="secondary"
-					onClick={onDiscard}
-					disabled={!isDirty || isSaving}
-					testId="discard-changes-btn"
-				>
-					Discard
-				</Button>
-				<Button
-					variant="solid"
-					color="primary"
-					onClick={onSave}
-					loading={isSaving}
-					disabled={!isDirty || isSaving}
-					testId="save-changes-btn"
-				>
-					{isSaving ? 'Saving…' : 'Save changes'}
-				</Button>
-			</div>
-		</header>
-	);
-}
-
-export default AttributeMappingHeader;

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/index.ts

@@ -1 +0,0 @@
-export { default } from './AttributeMappingHeader';

frontend/src/container/LLMObservability/__tests__/LLMObservability.test.tsx

@@ -39,9 +39,6 @@ describe('LLMObservability (integration)', () => {
 		expect(
 			screen.getByRole('tab', { name: 'Model pricing' }),
 		).toBeInTheDocument();
-		expect(
-			screen.getByRole('tab', { name: 'Attribute Mapping' }),
-		).toBeInTheDocument();
 	});
 
 	it('navigates to the configuration route when the Model pricing tab is clicked', async () => {
@@ -57,29 +54,6 @@ describe('LLMObservability (integration)', () => {
 		);
 	});
 
-	it('navigates to the attribute mapping route when that tab is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
-		});
-
-		await user.click(screen.getByRole('tab', { name: 'Attribute Mapping' }));
-
-		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
-		);
-	});
-
-	it('renders the attribute mapping page on the attribute mapping route', () => {
-		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
-		});
-
-		expect(
-			screen.getByTestId('llm-observability-attribute-mapping-page'),
-		).toBeInTheDocument();
-	});
-
 	it('renders the model-pricing page on the configuration route', async () => {
 		setupList();
 		render(<LLMObservability />, undefined, {

frontend/src/container/LLMObservability/hooks/useLLMObservabilityTabs.tsx

@@ -4,13 +4,11 @@ import { type TabItemProps } from '@signozhq/ui/tabs';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 
-import LLMObservabilityAttributeMapping from '../AttributeMapping/LLMObservabilityAttributeMapping';
 import Overview from '../Overview/Overview';
 import LLMObservabilityModelPricing from '../Settings/ModelPricing/LLMObservabilityModelPricing';
 
 const OVERVIEW_KEY = ROUTES.LLM_OBSERVABILITY_OVERVIEW;
 const CONFIGURATION_KEY = ROUTES.LLM_OBSERVABILITY_CONFIGURATION;
-const ATTRIBUTE_MAPPING_KEY = ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING;
 
 interface UseLLMObservabilityTabsResult {
 	items: TabItemProps[];
@@ -26,12 +24,9 @@ export function useLLMObservabilityTabs(): UseLLMObservabilityTabsResult {
 	const { pathname } = useLocation();
 	const { safeNavigate } = useSafeNavigate();
 
-	let activeTab: string = OVERVIEW_KEY;
-	if (pathname.startsWith(CONFIGURATION_KEY)) {
-		activeTab = CONFIGURATION_KEY;
-	} else if (pathname.startsWith(ATTRIBUTE_MAPPING_KEY)) {
-		activeTab = ATTRIBUTE_MAPPING_KEY;
-	}
+	const activeTab = pathname.startsWith(CONFIGURATION_KEY)
+		? CONFIGURATION_KEY
+		: OVERVIEW_KEY;
 
 	const onTabChange = useCallback(
 		(key: string): void => {
@@ -51,11 +46,6 @@ export function useLLMObservabilityTabs(): UseLLMObservabilityTabsResult {
 			label: 'Model pricing',
 			children: <LLMObservabilityModelPricing />,
 		},
-		{
-			key: ATTRIBUTE_MAPPING_KEY,
-			label: 'Attribute Mapping',
-			children: <LLMObservabilityAttributeMapping />,
-		},
 	];
 
 	return { items, activeTab, onTabChange };

frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss

@@ -25,14 +25,6 @@
 	.meter-explorer-content-section {
 		width: 100%;
 
-		// Meant to fix the query builder colors
-		--input-background: var(--l2-background);
-		--input-hover-background: var(--l2-background);
-		--input-focus-background: var(--l2-background);
-		--input-border-color: var(--l2-border);
-		--input-hover-border-color: var(--internal-ant-border-color-hover);
-		--input-focus-border-color: var(--internal-ant-border-color-hover);
-
 		.explore-header {
 			display: flex;
 			align-items: center;

frontend/src/container/MetricsExplorer/Explorer/Explorer.styles.scss

@@ -1,14 +1,6 @@
 .metrics-explorer-explore-container {
 	padding-bottom: 80px;
 
-	// Meant to fix the query builder colors
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-border-color: var(--l2-border);
-	--input-hover-border-color: var(--internal-ant-border-color-hover);
-	--input-focus-border-color: var(--internal-ant-border-color-hover);
-
 	.explore-header {
 		display: flex;
 		align-items: center;

frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss

@@ -1,12 +1,4 @@
 .dashboard-navigation {
-	// Meant to fix the query builder colors
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-border-color: var(--l2-border);
-	--input-hover-border-color: var(--internal-ant-border-color-hover);
-	--input-focus-border-color: var(--internal-ant-border-color-hover);
-
 	.run-query-dashboard-btn {
 		min-width: 180px;
 	}

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss

@@ -31,14 +31,8 @@
 			min-width: 32px;
 
 			border-radius: 2px;
-			--periscope-btn-border-color: var(
-				--query-builder-v2-border-color,
-				var(--l2-border)
-			);
-			--periscope-btn-background-color: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			);
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 

frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.styles.scss

@@ -27,11 +27,8 @@
 		border-top-left-radius: 0px !important;
 		border-bottom-left-radius: 0px !important;
 
-		background-color: var(
-			--query-builder-v2-background-color,
-			var(--l2-background)
-		) !important;
-		margin-left: -1px;
+		background-color: var(--l1-border) !important;
+		opacity: 0.8;
 
 		&:disabled {
 			opacity: 0.4;
@@ -89,8 +86,8 @@
 			border-bottom-left-radius: 3px;
 
 			.ant-select-selector {
-				border: 1px solid var(--query-builder-v2-border-color, none);
-				background: var(--query-builder-v2-background-color, var(--l3-background));
+				border: none;
+				background: var(--l3-background);
 			}
 
 			&.showInput {
@@ -104,20 +101,12 @@
 		.query-function-value {
 			width: 70px;
 			border-left: 0;
-			background: var(--query-builder-v2-background-color, var(--l2-background));
+			background: var(--l2-background);
 			border-radius: 0;
 			border: 1px solid transparent;
-			border-top: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-			border-bottom: 1px solid
-				var(--query-builder-v2-border-color, var(--l2-border));
-			height: 32px;
 
 			&:focus {
-				border-color: var(--internal-ant-border-color-focus);
-			}
-
-			&:hover {
-				border-color: var(--internal-ant-border-color-hover);
+				border-color: transparent !important;
 			}
 		}
 
@@ -125,7 +114,7 @@
 			border-top-right-radius: 3px;
 			border-bottom-right-radius: 3px;
 
-			border-left: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border-left: 1px solid var(--l2-border);
 
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;

frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import cx from 'classnames';
 import { Pagination, Skeleton } from 'antd';
 import { useListRoles } from 'api/generated/services/role';
-import { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
@@ -22,7 +22,7 @@ const PAGE_SIZE = 20;
 
 type DisplayItem =
 	| { type: 'section'; label: string; count?: number }
-	| { type: 'role'; role: AuthtypesRoleDTO };
+	| { type: 'role'; role: AuthtypesGettableRoleDTO };
 
 interface RolesListingTableProps {
 	searchQuery: string;
@@ -190,7 +190,7 @@ function RolesListingTable({
 		);
 	}
 
-	const renderRow = (role: AuthtypesRoleDTO): JSX.Element => (
+	const renderRow = (role: AuthtypesGettableRoleDTO): JSX.Element => (
 		<div
 			key={role.id}
 			className={cx(styles.tableRow, {

frontend/src/container/RolesSettings/hooks/useRolePermissions.ts

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from 'react-query';
 import { ErrorType } from 'api/generatedAPIInstance';
 import type {
 	AuthtypesPostableRoleDTO,
-	AuthtypesRoleWithTransactionGroupsDTO,
+	AuthtypesRoleDTO,
 	AuthtypesTransactionGroupDTO,
 	AuthtypesUpdatableRoleDTO,
 } from 'api/generated/services/sigNoz.schemas';
@@ -133,7 +133,7 @@ export function transformTransactionGroupsToResourcePermissions(
 }
 
 export function transformApiToRolePermissions(
-	role: AuthtypesRoleWithTransactionGroupsDTO,
+	role: AuthtypesRoleDTO,
 ): RolePermissionsData {
 	return {
 		roleId: role.id,

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -205,7 +205,6 @@ export const routesToSkip = [
 	ROUTES.SOMETHING_WENT_WRONG,
 	ROUTES.LLM_OBSERVABILITY_OVERVIEW,
 	ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
-	ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/hooks/member/useMemberRoleManager.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { useQueryClient } from 'react-query';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	getGetRolesByUserIDQueryKey,
 	useGetRolesByUserID,
@@ -21,11 +21,11 @@ export interface MemberRoleUpdateFailure {
 }
 
 interface UseMemberRoleManagerResult {
-	currentRoles: AuthtypesRoleDTO[];
+	currentRoles: AuthtypesGettableRoleDTO[];
 	isLoading: boolean;
 	applyDiff: (
 		localRoleIds: string[],
-		availableRoles: AuthtypesRoleDTO[],
+		availableRoles: AuthtypesGettableRoleDTO[],
 	) => Promise<MemberRoleUpdateFailure[]>;
 }
 
@@ -40,7 +40,7 @@ export function useMemberRoleManager(
 		{ query: { enabled: !!userId && enabled } },
 	);
 
-	const currentRoles = useMemo<AuthtypesRoleDTO[]>(
+	const currentRoles = useMemo<AuthtypesGettableRoleDTO[]>(
 		() => data?.data ?? [],
 		[data?.data],
 	);
@@ -61,7 +61,7 @@ export function useMemberRoleManager(
 	const applyDiff = useCallback(
 		async (
 			localRoleIds: string[],
-			availableRoles: AuthtypesRoleDTO[],
+			availableRoles: AuthtypesGettableRoleDTO[],
 		): Promise<MemberRoleUpdateFailure[]> => {
 			const currentRoleIds = new Set(
 				currentRoles.map((r) => r.id).filter(Boolean),

frontend/src/hooks/serviceAccount/useServiceAccountRoleManager.ts

@@ -6,7 +6,7 @@ import {
 	useDeleteServiceAccountRoleDeprecated,
 	useGetServiceAccountRoles,
 } from 'api/generated/services/serviceaccount';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import { retryOn429 } from 'utils/errorUtils';
 
 const enum PromiseStatus {
@@ -21,11 +21,11 @@ export interface RoleUpdateFailure {
 }
 
 interface UseServiceAccountRoleManagerResult {
-	currentRoles: AuthtypesRoleDTO[];
+	currentRoles: AuthtypesGettableRoleDTO[];
 	isLoading: boolean;
 	applyDiff: (
 		localRoleIds: string[],
-		availableRoles: AuthtypesRoleDTO[],
+		availableRoles: AuthtypesGettableRoleDTO[],
 	) => Promise<RoleUpdateFailure[]>;
 }
 
@@ -40,7 +40,7 @@ export function useServiceAccountRoleManager(
 		{ query: { enabled: options?.enabled ?? true } },
 	);
 
-	const currentRoles = useMemo<AuthtypesRoleDTO[]>(
+	const currentRoles = useMemo<AuthtypesGettableRoleDTO[]>(
 		() => data?.data ?? [],
 		[data?.data],
 	);
@@ -64,7 +64,7 @@ export function useServiceAccountRoleManager(
 	const applyDiff = useCallback(
 		async (
 			localRoleIds: string[],
-			availableRoles: AuthtypesRoleDTO[],
+			availableRoles: AuthtypesGettableRoleDTO[],
 		): Promise<RoleUpdateFailure[]> => {
 			const currentRoleIds = new Set(
 				currentRoles.map((r) => r.id).filter(Boolean),

frontend/src/mocks-server/__mockdata__/roles.ts

@@ -1,8 +1,11 @@
-import { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	AuthtypesGettableRoleDTO,
+	AuthtypesRoleDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 const orgId = '019ba2bb-2fa1-7b24-8159-cfca08617ef9';
 
-export const managedRoles: AuthtypesRoleDTO[] = [
+export const managedRoles: AuthtypesGettableRoleDTO[] = [
 	{
 		id: '019c24aa-2248-756f-9833-984f1ab63819',
 		createdAt: '2026-02-03T18:00:55.624356Z',
@@ -35,7 +38,7 @@ export const managedRoles: AuthtypesRoleDTO[] = [
 	},
 ];
 
-export const customRoles: AuthtypesRoleDTO[] = [
+export const customRoles: AuthtypesGettableRoleDTO[] = [
 	{
 		id: '019c24aa-3333-0001-aaaa-111111111111',
 		createdAt: '2026-02-10T10:30:00.000Z',
@@ -56,12 +59,24 @@ export const customRoles: AuthtypesRoleDTO[] = [
 	},
 ];
 
-export const allRoles: AuthtypesRoleDTO[] = [...managedRoles, ...customRoles];
+export const allRoles: AuthtypesGettableRoleDTO[] = [
+	...managedRoles,
+	...customRoles,
+];
 
 export const listRolesSuccessResponse = {
 	status: 'success',
 	data: allRoles,
 };
 
-export const customRoleResponse = { status: 'success', data: customRoles[0] };
-export const managedRoleResponse = { status: 'success', data: managedRoles[0] };
+const customRole: AuthtypesRoleDTO = {
+	...customRoles[0],
+	transactionGroups: [],
+};
+const managedRole: AuthtypesRoleDTO = {
+	...managedRoles[0],
+	transactionGroups: [],
+};
+
+export const customRoleResponse = { status: 'success', data: customRole };
+export const managedRoleResponse = { status: 'success', data: managedRole };

frontend/src/pages/LogsExplorer/LogsExplorer.styles.scss

@@ -16,14 +16,6 @@
 		min-height: 0;
 
 		.log-explorer-query-container {
-			// Meant to fix the query builder colors
-			--input-background: var(--l2-background);
-			--input-hover-background: var(--l2-background);
-			--input-focus-background: var(--l2-background);
-			--input-border-color: var(--l2-border);
-			--input-hover-border-color: var(--internal-ant-border-color-hover);
-			--input-focus-border-color: var(--internal-ant-border-color-hover);
-
 			display: flex;
 			flex-direction: column;
 			flex: 1;

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/MissingSpansBanner.module.scss

@@ -1,25 +0,0 @@
-.container {
-	// Gutter matches the header/subHeader 16px; bottom gap before the panels.
-	padding: 0 16px 12px;
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	width: 100%;
-}
-
-.link {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	color: inherit;
-	font-weight: 500;
-	white-space: nowrap;
-
-	&:hover {
-		opacity: 0.85;
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/MissingSpansBanner.tsx

@@ -1,47 +0,0 @@
-import { useState } from 'react';
-import { Callout } from '@signozhq/ui/callout';
-import { ArrowUpRight } from '@signozhq/icons';
-
-import styles from './MissingSpansBanner.module.scss';
-
-const MISSING_SPANS_DOCS_URL =
-	'https://signoz.io/docs/userguide/traces/#missing-spans';
-
-function MissingSpansBanner(): JSX.Element | null {
-	// Session-only dismissal — not persisted, so the banner returns on reload.
-	const [isDismissed, setIsDismissed] = useState(false);
-
-	if (isDismissed) {
-		return null;
-	}
-
-	// Wrapper owns the gutter: Callout is width:100%, so putting the gutter as a
-	// margin on it would overflow the parent by the margin width. Pad instead.
-	return (
-		<div className={styles.container}>
-			<Callout
-				type="info"
-				size="small"
-				showIcon
-				action="dismissible"
-				onClick={(): void => setIsDismissed(true)}
-				testId="missing-spans-banner"
-				title={
-					<span className={styles.title}>
-						This trace has missing spans
-						<a
-							className={styles.link}
-							href={MISSING_SPANS_DOCS_URL}
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							Learn More <ArrowUpRight size={14} />
-						</a>
-					</span>
-				}
-			/>
-		</div>
-	);
-}
-
-export default MissingSpansBanner;

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -31,7 +31,6 @@ import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
 import { useTraceStore } from '../stores/traceStore';
 import AnalyticsPanel from '../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel';
 import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
-import MissingSpansBanner from './MissingSpansBanner';
 import TraceOptionsMenu from './TraceOptionsMenu';
 
 import styles from './TraceDetailsHeader.module.scss';
@@ -49,7 +48,6 @@ export interface TraceMetadataForHeader {
 	rootServiceName: string;
 	rootServiceEntryPoint: string;
 	rootSpanStatusCode: string;
-	hasMissingSpans: boolean;
 }
 
 interface TraceDetailsHeaderProps {
@@ -231,8 +229,6 @@ function TraceDetailsHeader({
 				</div>
 			)}
 
-			{traceMetadata?.hasMissingSpans && <MissingSpansBanner />}
-
 			<FieldsSelector
 				isOpen={isPreviewFieldsOpen}
 				title="Preview fields"

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.module.scss

@@ -41,7 +41,6 @@
 	:global(.ant-collapse-header) {
 		border-top: 1px solid var(--l2-border);
 		border-bottom: 1px solid var(--l2-border);
-		border-radius: 0 !important;
 	}
 
 	:global(.ant-collapse-content) {
@@ -99,13 +98,6 @@
 	flex-direction: column;
 	overflow: hidden;
 
-	// The flamegraph's ResizableBox above renders a 1px resize handle at its
-	// bottom edge; drop the header's own top border so the two don't stack
-	// into a double border at the flamegraph/waterfall juncture.
-	:global(.ant-collapse-header) {
-		border-top: none;
-	}
-
 	:global(.ant-collapse-item) {
 		flex: 1;
 		display: flex;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.module.scss

@@ -49,6 +49,59 @@
 	flex-direction: column;
 }
 
+.missingSpans {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 44px;
+	margin: 16px;
+	padding: 12px;
+	border-radius: 4px;
+	background: rgba(69, 104, 220, 0.1);
+}
+
+.leftInfo {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: var(--bg-robin-400);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.text {
+	color: var(--bg-robin-400);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.rightInfo {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	color: var(--bg-robin-400);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+
+	&:hover {
+		background-color: unset;
+		color: var(--bg-robin-200);
+	}
+}
+
 .splitPanel {
 	flex: 1;
 	min-height: 0;
@@ -72,9 +125,6 @@
 
 .sidebarHeader {
 	flex-shrink: 0;
-	// Matches the body `.sidebar` border-right so the span-name / timeline
-	// divider is continuous from the top of the container through the ruler.
-	border-right: 1px solid var(--l2-border);
 }
 
 .resizeHandleHeader {
@@ -120,7 +170,7 @@
 	overflow-x: auto;
 	overflow-y: hidden;
 	flex-shrink: 0;
-	border-right: 1px solid var(--l2-border);
+	border-right: 1px solid var(--l1-border);
 
 	// ResizableBox child renders with a global `.resizable-box__content` class
 	// — give it independent horizontal scrolling.
@@ -135,18 +185,6 @@
 		scrollbar-width: none;
 	}
 
-	// The drag handle is painted --l2-border by default, which would stack with
-	// our border-right into a 2px divider. Keep it as a hover-only affordance so
-	// the border-right stays the sole 1px divider (matching the header segment).
-	:global(.resizable-box__handle--right) {
-		background: transparent;
-
-		&:hover,
-		&:active {
-			background: var(--primary);
-		}
-	}
-
 	&::-webkit-scrollbar {
 		height: 0.3rem;
 	}
@@ -178,12 +216,10 @@
 
 .treeRow:hover,
 .treeRow.hoveredSpan {
-	// Left end of the row band — round only the outer (left) corners so the
-	// highlight joins the status + timeline segments into one continuous band.
-	border-radius: 4px 0 0 4px;
+	border-radius: 4px;
 	background: color-mix(
 		in srgb,
-		var(--l3-background) 60%,
+		var(--l3-background) 20%,
 		transparent
 	) !important;
 
@@ -226,22 +262,20 @@
 	--badge-border-width: 0px;
 
 	&.hoveredSpan {
-		// Middle segment of the row band — square so it butts up against the
-		// name and timeline segments (no rounded corner at the badge column).
-		border-radius: 0;
+		border-radius: 4px;
 		background: color-mix(
 			in srgb,
-			var(--l3-background) 60%,
+			var(--l3-background) 20%,
 			transparent
 		) !important;
 	}
 
 	&.isInterested,
 	&.isSelectedNonMatching {
-		border-radius: 0;
+		border-radius: 4px;
 		background: color-mix(
 			in srgb,
-			var(--l3-background) 80%,
+			var(--l3-background) 40%,
 			transparent
 		) !important;
 	}
@@ -275,21 +309,20 @@
 
 	&:hover,
 	&.hoveredSpan {
-		// Right end of the row band — round only the outer (right) corners.
-		border-radius: 0 4px 4px 0;
+		border-radius: 4px;
 		background: color-mix(
 			in srgb,
-			var(--l3-background) 60%,
+			var(--l3-background) 20%,
 			transparent
 		) !important;
 	}
 
 	&:has(.isInterested),
 	&:has(.isSelectedNonMatching) {
-		border-radius: 0 4px 4px 0;
+		border-radius: 4px;
 		background: color-mix(
 			in srgb,
-			var(--l3-background) 80%,
+			var(--l3-background) 40%,
 			transparent
 		) !important;
 	}
@@ -312,11 +345,10 @@
 
 	&.isInterested,
 	&.isSelectedNonMatching {
-		// Left end of the row band — outer (left) corners only.
-		border-radius: 4px 0 0 4px;
+		border-radius: 4px;
 		background: color-mix(
 			in srgb,
-			var(--l3-background) 80%,
+			var(--l3-background) 40%,
 			transparent
 		) !important;
 	}
@@ -439,7 +471,7 @@
 	padding-left: 8px;
 	flex-shrink: 0;
 	height: 100%;
-	background: linear-gradient(to left, var(--l2-background) 40%, transparent);
+	background: linear-gradient(to left, var(--l1-background) 60%, transparent);
 	z-index: 2;
 	opacity: 0;
 	pointer-events: none;
@@ -567,18 +599,6 @@
 	opacity: 0.15;
 }
 
-// A dimmed span must still show the full-opacity hover state when hovered.
-// These win over `.isDimmed` on specificity so brightness is restored across
-// the whole row (name column, status cell, and timeline bar) on hover.
-.treeRow:hover .isDimmed,
-.treeRow.hoveredSpan .isDimmed,
-.timelineRow:hover .isDimmed,
-.timelineRow.hoveredSpan .isDimmed,
-.statusCell:hover.isDimmed,
-.statusCell.hoveredSpan.isDimmed {
-	opacity: 1;
-}
-
 .isHighlighted {
 	opacity: 1;
 }

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -33,7 +33,14 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { colorToRgb } from 'lib/uPlotLib/utils/generateColor';
-import { ChevronDown, ChevronRight, Link, ListPlus } from '@signozhq/icons';
+import {
+	ArrowUpRight,
+	ChevronDown,
+	ChevronRight,
+	CircleAlert,
+	Link,
+	ListPlus,
+} from '@signozhq/icons';
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
 import { resolveSpanColor } from 'pages/TraceDetailsV3/utils';
 import { useBoundaryPagination } from 'pages/TraceDetailsV3/TraceWaterfall/hooks/useBoundaryPagination';
@@ -544,9 +551,7 @@ function Success(props: ISuccessProps): JSX.Element {
 		cursorX,
 		onMouseMove: onCrosshairMove,
 		onMouseLeave: onCrosshairLeave,
-		// Rows are padded 0 15px while `.timeline` spans full width — inset the
-		// crosshair by the same 15px so it aligns with the ruler ticks and bars.
-	} = useCrosshair({ containerRef: timelineAreaRef, insetX: 15 });
+	} = useCrosshair({ containerRef: timelineAreaRef, enabled: false });
 
 	// Imperative DOM class toggling for hover highlights (avoids React re-renders)
 	const applyHoverClass = useCallback((spanId: string | null): void => {
@@ -849,6 +854,28 @@ function Success(props: ISuccessProps): JSX.Element {
 
 	return (
 		<div className={styles.root}>
+			{traceMetadata.hasMissingSpans && (
+				<div className={styles.missingSpans}>
+					<section className={styles.leftInfo}>
+						<CircleAlert size={14} />
+						<span className={styles.text}>This trace has missing spans</span>
+					</section>
+					<Button
+						variant="ghost"
+						color="secondary"
+						className={styles.rightInfo}
+						suffix={<ArrowUpRight size={14} />}
+						onClick={(): WindowProxy | null =>
+							window.open(
+								'https://signoz.io/docs/traces-management/troubleshooting/faqs/#q-why-are-some-spans-missing-from-a-trace',
+								'_blank',
+							)
+						}
+					>
+						Learn More
+					</Button>
+				</div>
+			)}
 			{isFetching && <div className={styles.loadingBar} />}
 			<div className={styles.splitPanel} ref={scrollContainerRef}>
 				{/* Sticky header row */}
@@ -967,8 +994,8 @@ function Success(props: ISuccessProps): JSX.Element {
 										transform: `translateY(${virtualRow.start}px)`,
 									}}
 									data-span-id={span.span_id}
-									onMouseEnter={(): void => applyHoverClass(span.span_id)}
-									onMouseLeave={(): void => applyHoverClass(null)}
+									onMouseEnter={(): void => handleRowMouseEnter(span.span_id)}
+									onMouseLeave={handleRowMouseLeave}
 									onClick={(): void => handleSpanClick(span)}
 								>
 									{span.response_status_code && (

frontend/src/pages/TraceDetailsV3/hooks/__tests__/useCrosshair.test.ts

@@ -1,96 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { RefObject } from 'react';
-
-import { useCrosshair } from '../useCrosshair';
-
-// Container spanning [left, left+width]; getBoundingClientRect is all the hook reads.
-function mockContainer(left: number, width: number): RefObject<HTMLElement> {
-	const el = document.createElement('div');
-	el.getBoundingClientRect = jest.fn(
-		(): DOMRect =>
-			({
-				left,
-				width,
-				top: 0,
-				height: 0,
-				x: left,
-				y: 0,
-				right: left + width,
-				bottom: 0,
-				toJSON: (): Record<string, unknown> => ({}),
-			}) as DOMRect,
-	);
-	return { current: el };
-}
-
-function move(clientX: number): React.MouseEvent {
-	return { clientX } as React.MouseEvent;
-}
-
-describe('useCrosshair', () => {
-	it('maps the cursor to 0 at the container edge with no inset', () => {
-		const containerRef = mockContainer(100, 1000);
-		const { result } = renderHook(() => useCrosshair({ containerRef }));
-
-		act(() => result.current.onMouseMove(move(600)));
-
-		expect(result.current.cursorX).toBe(500);
-		expect(result.current.cursorXPercent).toBeCloseTo(0.5);
-	});
-
-	it('offsets and rescales by insetX so 0% aligns with the content start', () => {
-		const containerRef = mockContainer(100, 1000); // content = [115, 1085], width 970
-		const { result } = renderHook(() =>
-			useCrosshair({ containerRef, insetX: 15 }),
-		);
-
-		// At the content start (left + inset) → 0ms, line sits at the inset.
-		act(() => result.current.onMouseMove(move(115)));
-		expect(result.current.cursorX).toBe(15);
-		expect(result.current.cursorXPercent).toBe(0);
-
-		// Halfway through the 970px content → 50%.
-		act(() => result.current.onMouseMove(move(600)));
-		expect(result.current.cursorX).toBe(500);
-		expect(result.current.cursorXPercent).toBeCloseTo(485 / 970);
-	});
-
-	it('clamps the dead padding zones to [0, 1]', () => {
-		const containerRef = mockContainer(100, 1000);
-		const { result } = renderHook(() =>
-			useCrosshair({ containerRef, insetX: 15 }),
-		);
-
-		// Left of the content (inside the left padding) → clamped to start.
-		act(() => result.current.onMouseMove(move(100)));
-		expect(result.current.cursorX).toBe(15);
-		expect(result.current.cursorXPercent).toBe(0);
-
-		// Right of the content (container right edge) → clamped to end.
-		act(() => result.current.onMouseMove(move(1100)));
-		expect(result.current.cursorXPercent).toBe(1);
-	});
-
-	it('resets on mouse leave', () => {
-		const containerRef = mockContainer(0, 800);
-		const { result } = renderHook(() => useCrosshair({ containerRef }));
-
-		act(() => result.current.onMouseMove(move(400)));
-		expect(result.current.cursorX).not.toBeNull();
-
-		act(() => result.current.onMouseLeave());
-		expect(result.current.cursorX).toBeNull();
-		expect(result.current.cursorXPercent).toBeNull();
-	});
-
-	it('is inert when disabled', () => {
-		const containerRef = mockContainer(0, 800);
-		const { result } = renderHook(() =>
-			useCrosshair({ containerRef, enabled: false }),
-		);
-
-		act(() => result.current.onMouseMove(move(400)));
-		expect(result.current.cursorX).toBeNull();
-		expect(result.current.cursorXPercent).toBeNull();
-	});
-});

frontend/src/pages/TraceDetailsV3/hooks/useCrosshair.ts

@@ -3,16 +3,6 @@ import { RefObject, useCallback, useState } from 'react';
 interface UseCrosshairArgs {
 	containerRef: RefObject<HTMLElement>;
 	enabled?: boolean;
-	/**
-	 * Symmetric horizontal inset (px) of the content (ruler ticks + bars) inside
-	 * the container: shifts the origin right by `insetX` and shrinks the usable
-	 * width by `2 * insetX`. The waterfall pads its rows by 15px while the
-	 * crosshair container spans the full width, so the crosshair must map the
-	 * cursor into that inset content box to line up with 0ms/ticks/bars.
-	 * Flamegraph pads its parent instead, so its container is already the content
-	 * box → 0 (default).
-	 */
-	insetX?: number;
 }
 
 interface UseCrosshairReturn {
@@ -35,7 +25,6 @@ interface UseCrosshairReturn {
 export function useCrosshair({
 	containerRef,
 	enabled = true,
-	insetX = 0,
 }: UseCrosshairArgs): UseCrosshairReturn {
 	const [cursorX, setCursorX] = useState<number | null>(null);
 	const [cursorXPercent, setCursorXPercent] = useState<number | null>(null);
@@ -50,18 +39,11 @@ export function useCrosshair({
 				return;
 			}
 
-			// Map the cursor into the inset content box so 0% aligns with the first
-			// tick / bar origin (not the container edge). Clamp so the dead padding
-			// zones don't produce a line/time before 0ms or past the end.
-			const contentWidth = Math.max(1, rect.width - insetX * 2);
-			const xInContent = Math.max(
-				0,
-				Math.min(e.clientX - rect.left - insetX, contentWidth),
-			);
-			setCursorX(xInContent + insetX);
-			setCursorXPercent(xInContent / contentWidth);
+			const x = e.clientX - rect.left;
+			setCursorX(x);
+			setCursorXPercent(x / rect.width);
 		},
-		[containerRef, enabled, insetX],
+		[containerRef, enabled],
 	);
 
 	const onMouseLeave = useCallback((): void => {

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -1,13 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import {
-	ChartNoAxesGantt,
-	ChevronDown,
-	ChevronRight,
-	Info,
-	TriangleAlert,
-} from '@signozhq/icons';
+import { ChartNoAxesGantt, TriangleAlert } from '@signozhq/icons';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import { Collapse } from 'antd';
@@ -40,16 +34,6 @@ import cx from 'classnames';
 
 import styles from './TraceDetailsV3.module.scss';
 
-// Lucide chevrons for the flame/waterfall accordion headers, matching the
-// span-tree chevrons in the waterfall.
-function renderPanelExpandIcon({
-	isActive,
-}: {
-	isActive?: boolean;
-}): JSX.Element {
-	return isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />;
-}
-
 function TraceDetailsV3(): JSX.Element {
 	const { id: traceId } = useParams<TraceDetailV3URLProps>();
 	const urlQuery = useUrlQuery();
@@ -345,7 +329,6 @@ function TraceDetailsV3(): JSX.Element {
 			rootServiceName: payload.rootServiceName,
 			rootServiceEntryPoint: payload.rootServiceEntryPoint,
 			rootSpanStatusCode: rootSpan?.response_status_code || '',
-			hasMissingSpans: payload.hasMissingSpans || false,
 		};
 	}, [traceData?.payload]);
 
@@ -405,7 +388,6 @@ function TraceDetailsV3(): JSX.Element {
 									activeKey={activeKeys.filter((k) => k === 'flame')}
 									onChange={(): void => handleCollapseChange('flame')}
 									size="small"
-									expandIcon={renderPanelExpandIcon}
 									className={styles.flameCollapse}
 									items={[
 										{
@@ -419,13 +401,7 @@ function TraceDetailsV3(): JSX.Element {
 																<WarningPopover
 																	message="The total span count exceeds the visualization limit. Displaying a sampled subset of spans in flamegraph."
 																	placement="bottomLeft"
-																>
-																	<Info
-																		size={16}
-																		color="var(--l2-foreground)"
-																		style={{ cursor: 'pointer' }}
-																	/>
-																</WarningPopover>
+																/>
 															)}
 													</span>
 													{traceData?.payload?.totalSpansCount ? (
@@ -466,7 +442,6 @@ function TraceDetailsV3(): JSX.Element {
 									activeKey={activeKeys.filter((k) => k === 'waterfall')}
 									onChange={(): void => handleCollapseChange('waterfall')}
 									size="small"
-									expandIcon={renderPanelExpandIcon}
 									className={cx(styles.waterfallCollapse, {
 										[styles.isDocked]: isWaterfallDocked,
 									})}

frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss

@@ -67,14 +67,6 @@
 .trace-explorer-page {
 	display: flex;
 
-	// Meant to fix the query builder colors
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-border-color: var(--l2-border);
-	--input-hover-border-color: var(--internal-ant-border-color-hover);
-	--input-focus-border-color: var(--internal-ant-border-color-hover);
-
 	.filter {
 		// Width is owned by ResizableBox (inline style).
 		flex-shrink: 0;

frontend/src/periscope.scss

@@ -13,9 +13,9 @@
 
 	padding: 6px;
 
-	border: 1px solid var(--periscope-btn-border-color, var(--l1-border));
+	border: 1px solid var(--l1-border);
 	border-radius: 3px;
-	background: var(--periscope-btn-background-color, var(--l2-background));
+	background: var(--l2-background);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	color: var(--l2-foreground);
 
@@ -135,15 +135,11 @@
 	display: flex;
 	flex-direction: row;
 	border-radius: 2px 0px 0px 2px;
-	background-color: var(
-		--input-with-label-background-color,
-		var(--l2-background)
-	);
 
 	.label {
 		font-size: 12px;
 
-		color: var(--input-with-label-color, var(--l2-foreground));
+		color: var(--l2-foreground);
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
@@ -157,8 +153,9 @@
 		text-overflow: ellipsis;
 		padding: 0px 8px;
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		color: var(--l1-foreground);
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
@@ -168,6 +165,7 @@
 	.input {
 		flex: 1;
 		border-radius: 0px 2px 2px 0px;
+		border: 1px solid var(--l1-border);
 		border-right: none;
 		border-left: none;
 		border-top-right-radius: 0px;
@@ -175,7 +173,7 @@
 		border-top-left-radius: 0px;
 		border-bottom-left-radius: 0px;
 
-		background: var(--input-with-label-background-color, var(--l2-background));
+		background: var(--l1-background);
 
 		min-width: 0;
 
@@ -191,44 +189,21 @@
 		}
 
 		.ant-select-selector {
-			height: 36px;
-			border-color: var(--input-with-label-border-color, var(--l2-border));
-			background: var(--input-with-label-background-color, var(--l2-background));
-			border-radius: 0;
-			position: relative;
-			margin-left: -1px;
-		}
-
-		.ant-select:hover .ant-select-selector,
-		.ant-select-focused .ant-select-selector {
-			z-index: 1;
-		}
-
-		.ant-select-disabled .ant-select-selector {
-			background: var(
-				--input-with-label-background-color,
-				var(--l2-background)
-			) !important;
+			border: none;
+			background: var(--l2-background);
 		}
 
 		.ant-select-selection-placeholder {
-			color: var(--input-with-label-color, var(--l2-foreground));
+			color: var(--l2-foreground);
 		}
 	}
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		height: 100%;
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		height: 38px;
 		width: 38px;
-		margin-left: -1px;
-		position: relative;
-
-		&:hover,
-		&:focus {
-			z-index: 2;
-		}
 
 		&:focus:not(:focus-visible),
 		&.ant-btn:focus:not(:focus-visible) {

frontend/src/styles.scss

@@ -839,9 +839,6 @@ body.ai-assistant-panel-open {
 	// design libraries.
 	--dropdown-menu-content-z-index: 1050;
 	--dropdown-menu-sub-content-z-index: 1050;
-
-	--internal-ant-border-color-focus: #3a52a8;
-	--internal-ant-border-color-hover: #6e8de8;
 }
 
 div[data-slot='callout'] {

frontend/src/utils/permission/index.ts

@@ -136,7 +136,6 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	AI_ASSISTANT_ICON_PREVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MCP_SERVER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_ASSISTANT_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
-	LLM_OBSERVABILITY_ATTRIBUTE_MAPPING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LLM_OBSERVABILITY_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LLM_OBSERVABILITY_OVERVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LLM_OBSERVABILITY_CONFIGURATION: ['ADMIN', 'EDITOR', 'VIEWER'],

pkg/apiserver/signozapiserver/role.go

@@ -47,7 +47,7 @@ func (provider *provider) addRoleRoutes(router *mux.Router) error {
 			Description:         "This endpoint lists all roles",
 			Request:             nil,
 			RequestContentType:  "",
-			Response:            make([]*authtypes.Role, 0),
+			Response:            make([]*authtypes.GettableRole, 0),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{},
@@ -73,7 +73,7 @@ func (provider *provider) addRoleRoutes(router *mux.Router) error {
 			Description:         "This endpoint gets a role",
 			Request:             nil,
 			RequestContentType:  "",
-			Response:            new(authtypes.RoleWithTransactionGroups),
+			Response:            new(authtypes.Role),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{},

pkg/authz/authz.go

@@ -30,17 +30,14 @@ type AuthZ interface {
 	// Write accepts the insertion tuples and the deletion tuples.
 	Write(context.Context, []*openfgav1.TupleKey, []*openfgav1.TupleKey) error
 
-	// Lists the selectors for objects assigned to subject (s) with relation (r) on resource (s)
-	ListObjects(context.Context, string, authtypes.Relation, coretypes.Type) ([]*coretypes.Object, error)
+	// ReadTuples reads tuples from the authorization server matching the given tuple key filter.
+	ReadTuples(context.Context, *openfgav1.ReadRequestTupleKey) ([]*openfgav1.TupleKey, error)
 
 	// Creates the role with its transaction groups.
-	Create(context.Context, valuer.UUID, *authtypes.RoleWithTransactionGroups) error
-
-	// Gets the role if it exists or creates one.
-	GetOrCreate(context.Context, valuer.UUID, *authtypes.Role) (*authtypes.Role, error)
+	Create(context.Context, valuer.UUID, *authtypes.Role) error
 
 	// Updates the role's metadata and reconciles its transaction groups.
-	Update(context.Context, valuer.UUID, *authtypes.RoleWithTransactionGroups) error
+	Update(context.Context, valuer.UUID, *authtypes.Role) error
 
 	// Deletes the role and tuples in authorization server.
 	Delete(context.Context, valuer.UUID, valuer.UUID) error
@@ -48,9 +45,6 @@ type AuthZ interface {
 	// Gets the role
 	Get(context.Context, valuer.UUID, valuer.UUID) (*authtypes.Role, error)
 
-	// Gets the role with transaction groups
-	GetWithTransactionGroups(context.Context, valuer.UUID, valuer.UUID) (*authtypes.RoleWithTransactionGroups, error)
-
 	// Gets the role by org_id and name
 	GetByOrgIDAndName(context.Context, valuer.UUID, string) (*authtypes.Role, error)
 
@@ -80,9 +74,6 @@ type AuthZ interface {
 
 	// Bootstrap managed roles transactions and user assignments
 	CreateManagedUserRoleTransactions(context.Context, valuer.UUID, valuer.UUID) error
-
-	// ReadTuples reads tuples from the authorization server matching the given tuple key filter.
-	ReadTuples(context.Context, *openfgav1.ReadRequestTupleKey) ([]*openfgav1.TupleKey, error)
 }
 
 // OnBeforeRoleDelete is a callback invoked before a role is deleted.

pkg/authz/openfgaauthz/provider.go

@@ -83,10 +83,6 @@ func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.
 	return provider.store.Get(ctx, orgID, id)
 }
 
-func (provider *provider) GetWithTransactionGroups(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.RoleWithTransactionGroups, error) {
-	return nil, errors.Newf(errors.TypeUnsupported, authtypes.ErrCodeRoleUnsupported, "not implemented")
-}
-
 func (provider *provider) GetByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*authtypes.Role, error) {
 	return provider.store.GetByOrgIDAndName(ctx, orgID, name)
 }
@@ -181,15 +177,11 @@ func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context,
 	return provider.Grant(ctx, orgID, []string{authtypes.SigNozAdminRoleName}, authtypes.MustNewSubject(coretypes.NewResourceUser(), userID.String(), orgID, nil))
 }
 
-func (setter *provider) Create(_ context.Context, _ valuer.UUID, _ *authtypes.RoleWithTransactionGroups) error {
+func (setter *provider) Create(_ context.Context, _ valuer.UUID, _ *authtypes.Role) error {
 	return errors.Newf(errors.TypeUnsupported, authtypes.ErrCodeRoleUnsupported, "not implemented")
 }
 
-func (provider *provider) GetOrCreate(_ context.Context, _ valuer.UUID, _ *authtypes.Role) (*authtypes.Role, error) {
-	return nil, errors.Newf(errors.TypeUnsupported, authtypes.ErrCodeRoleUnsupported, "not implemented")
-}
-
-func (provider *provider) Update(_ context.Context, _ valuer.UUID, _ *authtypes.RoleWithTransactionGroups) error {
+func (provider *provider) Update(_ context.Context, _ valuer.UUID, _ *authtypes.Role) error {
 	return errors.Newf(errors.TypeUnsupported, authtypes.ErrCodeRoleUnsupported, "not implemented")
 }
 

pkg/authz/signozauthzapi/handler.go

@@ -36,14 +36,14 @@ func (handler *handler) Create(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	roleWithTransactionGroups := authtypes.NewRoleWithTransactionGroups(req.Name, req.Description, authtypes.RoleTypeCustom, valuer.MustNewUUID(claims.OrgID), req.TransactionGroups)
-	err = handler.authz.Create(ctx, valuer.MustNewUUID(claims.OrgID), roleWithTransactionGroups)
+	role := authtypes.NewRole(req.Name, req.Description, authtypes.RoleTypeCustom, valuer.MustNewUUID(claims.OrgID), req.TransactionGroups)
+	err = handler.authz.Create(ctx, valuer.MustNewUUID(claims.OrgID), role)
 	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	render.Success(rw, http.StatusCreated, types.Identifiable{ID: roleWithTransactionGroups.ID})
+	render.Success(rw, http.StatusCreated, types.Identifiable{ID: role.ID})
 }
 
 func (handler *handler) Get(rw http.ResponseWriter, r *http.Request) {
@@ -65,13 +65,13 @@ func (handler *handler) Get(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	roleWithTransactionGroups, err := handler.authz.GetWithTransactionGroups(ctx, valuer.MustNewUUID(claims.OrgID), roleID)
+	role, err := handler.authz.Get(ctx, valuer.MustNewUUID(claims.OrgID), roleID)
 	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	render.Success(rw, http.StatusOK, roleWithTransactionGroups)
+	render.Success(rw, http.StatusOK, role)
 }
 
 func (handler *handler) List(rw http.ResponseWriter, r *http.Request) {
@@ -88,7 +88,7 @@ func (handler *handler) List(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	render.Success(rw, http.StatusOK, roles)
+	render.Success(rw, http.StatusOK, authtypes.NewGettableRolesFromRoles(roles))
 }
 
 func (handler *handler) Update(rw http.ResponseWriter, r *http.Request) {
@@ -117,14 +117,13 @@ func (handler *handler) Update(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	roleWithTransactionGroups := authtypes.MakeRoleWithTransactionGroups(role, nil)
-	err = roleWithTransactionGroups.Update(req.Description, req.TransactionGroups)
+	err = role.Update(req.Description, req.TransactionGroups)
 	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	err = handler.authz.Update(ctx, valuer.MustNewUUID(claims.OrgID), roleWithTransactionGroups)
+	err = handler.authz.Update(ctx, valuer.MustNewUUID(claims.OrgID), role)
 	if err != nil {
 		render.Error(rw, err)
 		return

pkg/signoz/provider.go

@@ -218,6 +218,7 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewMigrateSSORoleMappingNamesFactory(sqlstore),
 		sqlmigration.NewAddMetricReductionRulesFactory(sqlstore, sqlschema),
 		sqlmigration.NewRemoveOrganizationTuplesFactory(sqlstore),
+		sqlmigration.NewAddRoleTransactionGroupsFactory(sqlstore, sqlschema),
 	)
 }
 

pkg/sqlmigration/059_add_managed_roles.go

@@ -3,6 +3,7 @@ package sqlmigration
 import (
 	"context"
 	"database/sql"
+	"time"
 
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/sqlschema"
@@ -18,6 +19,30 @@ type addManagedRoles struct {
 	sqlschema sqlschema.SQLSchema
 }
 
+type role struct {
+	bun.BaseModel `bun:"table:role"`
+
+	ID          valuer.UUID `bun:"id,pk,type:text"`
+	CreatedAt   time.Time   `bun:"created_at"`
+	UpdatedAt   time.Time   `bun:"updated_at"`
+	Name        string      `bun:"name,type:string"`
+	Description string      `bun:"description,type:string"`
+	Type        string      `bun:"type,type:string"`
+	OrgID       valuer.UUID `bun:"org_id,type:string"`
+}
+
+func newManagedRole(name, description string, orgID valuer.UUID) *role {
+	return &role{
+		ID:          valuer.GenerateUUID(),
+		CreatedAt:   time.Now(),
+		UpdatedAt:   time.Now(),
+		Name:        name,
+		Description: description,
+		Type:        authtypes.RoleTypeManaged.StringValue(),
+		OrgID:       orgID,
+	}
+}
+
 func NewAddManagedRolesFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
 	return factory.NewProviderFactory(factory.MustNewName("add_managed_roles"), func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
 		return newAddManagedRoles(ctx, ps, c, sqlstore, sqlschema)
@@ -54,28 +79,19 @@ func (migration *addManagedRoles) Up(ctx context.Context, db *bun.DB) error {
 		return err
 	}
 
-	managedRoles := []*authtypes.Role{}
+	managedRoles := []*role{}
 	for _, orgIDStr := range orgIDs {
 		orgID, err := valuer.NewUUID(orgIDStr)
 		if err != nil {
 			return err
 		}
 
-		// signoz admin
-		signozAdminRole := authtypes.NewRole(authtypes.SigNozAdminRoleName, authtypes.SigNozAdminRoleDescription, authtypes.RoleTypeManaged, orgID)
-		managedRoles = append(managedRoles, signozAdminRole)
-
-		// signoz editor
-		signozEditorRole := authtypes.NewRole(authtypes.SigNozEditorRoleName, authtypes.SigNozEditorRoleDescription, authtypes.RoleTypeManaged, orgID)
-		managedRoles = append(managedRoles, signozEditorRole)
-
-		// signoz viewer
-		signozViewerRole := authtypes.NewRole(authtypes.SigNozViewerRoleName, authtypes.SigNozViewerRoleDescription, authtypes.RoleTypeManaged, orgID)
-		managedRoles = append(managedRoles, signozViewerRole)
-
-		// signoz anonymous
-		signozAnonymousRole := authtypes.NewRole(authtypes.SigNozAnonymousRoleName, authtypes.SigNozAnonymousRoleDescription, authtypes.RoleTypeManaged, orgID)
-		managedRoles = append(managedRoles, signozAnonymousRole)
+		managedRoles = append(managedRoles,
+			newManagedRole(authtypes.SigNozAdminRoleName, authtypes.SigNozAdminRoleDescription, orgID),
+			newManagedRole(authtypes.SigNozEditorRoleName, authtypes.SigNozEditorRoleDescription, orgID),
+			newManagedRole(authtypes.SigNozViewerRoleName, authtypes.SigNozViewerRoleDescription, orgID),
+			newManagedRole(authtypes.SigNozAnonymousRoleName, authtypes.SigNozAnonymousRoleDescription, orgID),
+		)
 	}
 
 	if len(managedRoles) > 0 {

pkg/sqlmigration/099_add_role_transaction_groups.go

@@ -0,0 +1,164 @@
+package sqlmigration
+
+import (
+	"context"
+	"database/sql"
+	"encoding/json"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	openfgav1 "github.com/openfga/api/proto/openfga/v1"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/dialect"
+	"github.com/uptrace/bun/migrate"
+)
+
+type addRoleTransactionGroups struct {
+	sqlstore  sqlstore.SQLStore
+	sqlschema sqlschema.SQLSchema
+}
+
+type roles struct {
+	bun.BaseModel `bun:"table:role"`
+
+	ID    string `bun:"id,pk"`
+	Name  string `bun:"name"`
+	OrgID string `bun:"org_id"`
+}
+
+func NewAddRoleTransactionGroupsFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(
+		factory.MustNewName("add_role_transaction_groups"),
+		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
+			return &addRoleTransactionGroups{
+				sqlstore:  sqlstore,
+				sqlschema: sqlschema,
+			}, nil
+		},
+	)
+}
+
+func (migration *addRoleTransactionGroups) Register(migrations *migrate.Migrations) error {
+	return migrations.Register(migration.Up, migration.Down)
+}
+
+func (migration *addRoleTransactionGroups) Up(ctx context.Context, db *bun.DB) error {
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+	defer func() { _ = tx.Rollback() }()
+
+	table, _, err := migration.sqlschema.GetTable(ctx, "role")
+	if err != nil {
+		return err
+	}
+
+	column := &sqlschema.Column{
+		Name:     sqlschema.ColumnName("transaction_groups"),
+		DataType: sqlschema.DataTypeText,
+		Nullable: true,
+	}
+
+	sqls := migration.sqlschema.Operator().AddColumn(table, nil, column, nil)
+	for _, sql := range sqls {
+		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
+			return err
+		}
+	}
+
+	var storeID string
+	err = tx.QueryRowContext(ctx, `SELECT id FROM store WHERE name = ? LIMIT 1`, "signoz").Scan(&storeID)
+	if err != nil {
+		return err
+	}
+
+	customRoles := make([]*roles, 0)
+	err = tx.NewSelect().
+		Model(&customRoles).
+		Column("id", "name", "org_id").
+		Where("type = ?", authtypes.RoleTypeCustom.StringValue()).
+		Where("transaction_groups IS NULL").
+		Scan(ctx)
+	if err != nil {
+		return err
+	}
+
+	isPG := migration.sqlstore.BunDB().Dialect().Name() == dialect.PG
+	for _, role := range customRoles {
+		roleSubject := "organization/" + role.OrgID + "/role/" + role.Name
+
+		var tupleRows *sql.Rows
+		if isPG {
+			tupleRows, err = tx.QueryContext(ctx, `
+				SELECT object_type, object_id, relation FROM tuple
+				WHERE store = ? AND _user = ?`,
+				storeID, "role:"+roleSubject+"#assignee",
+			)
+		} else {
+			tupleRows, err = tx.QueryContext(ctx, `
+				SELECT object_type, object_id, relation FROM tuple
+				WHERE store = ? AND user_object_type = ? AND user_object_id = ? AND user_relation = ?`,
+				storeID, "role", roleSubject, "assignee",
+			)
+		}
+		if err != nil {
+			return err
+		}
+
+		tuples := make([]*openfgav1.TupleKey, 0)
+		for tupleRows.Next() {
+			var objectType, objectID, relation string
+			if err := tupleRows.Scan(&objectType, &objectID, &relation); err != nil {
+				tupleRows.Close()
+				return err
+			}
+			tuples = append(tuples, &openfgav1.TupleKey{Object: objectType + ":" + objectID, Relation: relation})
+		}
+		if err := tupleRows.Err(); err != nil {
+			tupleRows.Close()
+			return err
+		}
+		tupleRows.Close()
+
+		groups := authtypes.MustNewTransactionGroupsFromTuples(tuples)
+		data, err := json.Marshal(groups)
+		if err != nil {
+			return err
+		}
+
+		if _, err := tx.NewUpdate().
+			Model(new(roles)).
+			Set("transaction_groups = ?", string(data)).
+			Where("id = ?", role.ID).
+			Exec(ctx); err != nil {
+			return err
+		}
+	}
+
+	for roleName, transactions := range coretypes.ManagedRoleToTransactions {
+		groups := authtypes.NewTransactionGroupsFromTransactions(transactions)
+		data, err := json.Marshal(groups)
+		if err != nil {
+			return err
+		}
+
+		if _, err := tx.NewUpdate().
+			Model(new(roles)).
+			Set("transaction_groups = ?", string(data)).
+			Where("type = ?", authtypes.RoleTypeManaged.StringValue()).
+			Where("name = ?", roleName).
+			Exec(ctx); err != nil {
+			return err
+		}
+	}
+
+	return tx.Commit()
+}
+
+func (migration *addRoleTransactionGroups) Down(context.Context, *bun.DB) error {
+	return nil
+}

pkg/types/authtypes/role.go

@@ -66,15 +66,20 @@ type Role struct {
 
 	types.Identifiable
 	types.TimeAuditable
-	Name        string        `bun:"name,type:string" json:"name" required:"true"`
-	Description string        `bun:"description,type:string"  json:"description" required:"true"`
-	Type        valuer.String `bun:"type,type:string" json:"type" required:"true"`
-	OrgID       valuer.UUID   `bun:"org_id,type:string" json:"orgId" required:"true"`
+	Name              string            `bun:"name,type:string" json:"name" required:"true"`
+	Description       string            `bun:"description,type:string"  json:"description" required:"true"`
+	Type              valuer.String     `bun:"type,type:string" json:"type" required:"true"`
+	OrgID             valuer.UUID       `bun:"org_id,type:string" json:"orgId" required:"true"`
+	TransactionGroups TransactionGroups `bun:"transaction_groups,type:text" json:"transactionGroups" required:"true" nullable:"false"`
 }
 
-type RoleWithTransactionGroups struct {
-	*Role
-	TransactionGroups TransactionGroups `json:"transactionGroups" required:"true" nullable:"false"`
+type GettableRole struct {
+	types.Identifiable
+	types.TimeAuditable
+	Name        string        `json:"name" required:"true"`
+	Description string        `json:"description" required:"true"`
+	Type        valuer.String `json:"type" required:"true"`
+	OrgID       valuer.UUID   `json:"orgId" required:"true"`
 }
 
 type PostableRole struct {
@@ -88,7 +93,7 @@ type UpdatableRole struct {
 	TransactionGroups TransactionGroups `json:"transactionGroups" required:"true" nullable:"false"`
 }
 
-func NewRole(name, description string, roleType valuer.String, orgID valuer.UUID) *Role {
+func NewRole(name, description string, roleType valuer.String, orgID valuer.UUID, transactionGroups TransactionGroups) *Role {
 	return &Role{
 		Identifiable: types.Identifiable{
 			ID: valuer.GenerateUUID(),
@@ -97,37 +102,37 @@ func NewRole(name, description string, roleType valuer.String, orgID valuer.UUID
 			CreatedAt: time.Now(),
 			UpdatedAt: time.Now(),
 		},
-		Name:        name,
-		Description: description,
-		Type:        roleType,
-		OrgID:       orgID,
-	}
-}
-
-func NewRoleWithTransactionGroups(name, description string, roleType valuer.String, orgID valuer.UUID, transactionGroups TransactionGroups) *RoleWithTransactionGroups {
-	role := NewRole(name, description, roleType, orgID)
-
-	return &RoleWithTransactionGroups{
-		Role:              role,
+		Name:              name,
+		Description:       description,
+		Type:              roleType,
+		OrgID:             orgID,
 		TransactionGroups: transactionGroups,
 	}
 }
 
-func MakeRoleWithTransactionGroups(role *Role, transactionGroups TransactionGroups) *RoleWithTransactionGroups {
-	return &RoleWithTransactionGroups{
-		Role:              role,
-		TransactionGroups: transactionGroups,
+func NewGettableRolesFromRoles(roles []*Role) []*GettableRole {
+	gettableRoles := make([]*GettableRole, len(roles))
+	for index, role := range roles {
+		gettableRoles[index] = &GettableRole{
+			Identifiable:  role.Identifiable,
+			TimeAuditable: role.TimeAuditable,
+			Name:          role.Name,
+			Description:   role.Description,
+			Type:          role.Type,
+			OrgID:         role.OrgID,
+		}
 	}
+
+	return gettableRoles
 }
 
 func NewManagedRoles(orgID valuer.UUID) []*Role {
 	return []*Role{
-		NewRole(SigNozAdminRoleName, SigNozAdminRoleDescription, RoleTypeManaged, orgID),
-		NewRole(SigNozEditorRoleName, SigNozEditorRoleDescription, RoleTypeManaged, orgID),
-		NewRole(SigNozViewerRoleName, SigNozViewerRoleDescription, RoleTypeManaged, orgID),
-		NewRole(SigNozAnonymousRoleName, SigNozAnonymousRoleDescription, RoleTypeManaged, orgID),
+		NewRole(SigNozAdminRoleName, SigNozAdminRoleDescription, RoleTypeManaged, orgID, NewTransactionGroupsFromTransactions(coretypes.ManagedRoleToTransactions[SigNozAdminRoleName])),
+		NewRole(SigNozEditorRoleName, SigNozEditorRoleDescription, RoleTypeManaged, orgID, NewTransactionGroupsFromTransactions(coretypes.ManagedRoleToTransactions[SigNozEditorRoleName])),
+		NewRole(SigNozViewerRoleName, SigNozViewerRoleDescription, RoleTypeManaged, orgID, NewTransactionGroupsFromTransactions(coretypes.ManagedRoleToTransactions[SigNozViewerRoleName])),
+		NewRole(SigNozAnonymousRoleName, SigNozAnonymousRoleDescription, RoleTypeManaged, orgID, NewTransactionGroupsFromTransactions(coretypes.ManagedRoleToTransactions[SigNozAnonymousRoleName])),
 	}
-
 }
 
 func NewStatsFromRoles(roles []*Role) map[string]any {
@@ -144,7 +149,7 @@ func NewStatsFromRoles(roles []*Role) map[string]any {
 	return stats
 }
 
-func (role *RoleWithTransactionGroups) Update(description string, transactionGroups TransactionGroups) error {
+func (role *Role) Update(description string, transactionGroups TransactionGroups) error {
 	err := role.ErrIfManaged()
 	if err != nil {
 		return err

pkg/types/authtypes/transaction.go

@@ -1,6 +1,7 @@
 package authtypes
 
 import (
+	"database/sql/driver"
 	"encoding/json"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -70,6 +71,28 @@ func NewTransactionGroups(data []byte) (TransactionGroups, error) {
 	return groups, nil
 }
 
+func NewTransactionGroupsFromTransactions(transactions []coretypes.Transaction) TransactionGroups {
+	objectsByVerb := make(map[string][]*coretypes.Object)
+	for _, transaction := range transactions {
+		object := transaction.Object
+		objectsByVerb[transaction.Verb.StringValue()] = append(objectsByVerb[transaction.Verb.StringValue()], &object)
+	}
+
+	groups := make(TransactionGroups, 0)
+	for _, verb := range coretypes.Verbs {
+		objects := objectsByVerb[verb.StringValue()]
+		if len(objects) == 0 {
+			continue
+		}
+
+		for _, objectGroup := range coretypes.NewObjectGroupsFromObjects(objects) {
+			groups = append(groups, &TransactionGroup{Relation: Relation{Verb: verb}, ObjectGroup: *objectGroup})
+		}
+	}
+
+	return groups
+}
+
 func NewGettableTransaction(results []*TransactionWithAuthorization) []*GettableTransaction {
 	gettableTransactions := make([]*GettableTransaction, len(results))
 	for i, result := range results {
@@ -87,6 +110,48 @@ func (groups TransactionGroups) Diff(desired TransactionGroups) (additions, dele
 	return desired.subtract(groups), groups.subtract(desired)
 }
 
+func (groups TransactionGroups) MarshalJSON() ([]byte, error) {
+	if groups == nil {
+		return []byte("[]"), nil
+	}
+
+	return json.Marshal([]*TransactionGroup(groups))
+}
+
+func (groups TransactionGroups) Value() (driver.Value, error) {
+	data, err := json.Marshal(groups)
+	if err != nil {
+		return nil, err
+	}
+
+	return string(data), nil
+}
+
+func (groups *TransactionGroups) Scan(value any) error {
+	if value == nil {
+		*groups = nil
+		return nil
+	}
+
+	var data []byte
+	switch typed := value.(type) {
+	case string:
+		data = []byte(typed)
+	case []byte:
+		data = typed
+	default:
+		return errors.Newf(errors.TypeInternal, errors.CodeInternal, "unsupported type %T for transaction groups", value)
+	}
+
+	parsed, err := NewTransactionGroups(data)
+	if err != nil {
+		return err
+	}
+
+	*groups = parsed
+	return nil
+}
+
 func (transaction *Transaction) UnmarshalJSON(data []byte) error {
 	var shadow = struct {
 		Relation Relation

pkg/types/authtypes/tuple.go

@@ -68,7 +68,7 @@ func NewTuplesFromTransactionGroups(name string, orgID valuer.UUID, transactionG
 	return tuples, nil
 }
 
-func MustNewTransactionGroupsFromTuples(tuples []*openfgav1.TupleKey) []*TransactionGroup {
+func MustNewTransactionGroupsFromTuples(tuples []*openfgav1.TupleKey) TransactionGroups {
 	objectsByRelation := make(map[string][]*coretypes.Object)
 
 	for _, tuple := range tuples {
@@ -81,7 +81,7 @@ func MustNewTransactionGroupsFromTuples(tuples []*openfgav1.TupleKey) []*Transac
 		objectsByRelation[verb.StringValue()] = append(objectsByRelation[verb.StringValue()], object)
 	}
 
-	transactionGroups := make([]*TransactionGroup, 0)
+	transactionGroups := make(TransactionGroups, 0)
 	for _, verb := range coretypes.Verbs {
 		objects := objectsByRelation[verb.StringValue()]
 		if len(objects) == 0 {