feat(components): migrate from ant select to signozhq/ui select/combobox

.github/CODEOWNERS

@@ -169,22 +169,3 @@ go.mod @therealpandey
 ## Dashboard V2
 /frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
 /frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend
-
-## Infrastructure Monitoring
-/frontend/src/pages/InfrastructureMonitoring/ @SigNoz/pulse-frontend
-/frontend/src/container/InfraMonitoringHosts/ @SigNoz/pulse-frontend
-/frontend/src/container/InfraMonitoringK8s/ @SigNoz/pulse-frontend
-
-## Alerts
-/frontend/src/pages/AlertList/ @SigNoz/pulse-frontend
-/frontend/src/pages/AlertDetails/ @SigNoz/pulse-frontend
-/frontend/src/pages/CreateAlert/ @SigNoz/pulse-frontend
-/frontend/src/pages/EditRules/ @SigNoz/pulse-frontend
-/frontend/src/container/AlertHistory/ @SigNoz/pulse-frontend
-/frontend/src/container/CreateAlertRule/ @SigNoz/pulse-frontend
-/frontend/src/container/CreateAlertV2/ @SigNoz/pulse-frontend
-/frontend/src/container/EditAlertV2/ @SigNoz/pulse-frontend
-/frontend/src/container/FormAlertRules/ @SigNoz/pulse-frontend
-/frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
-/frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
-/frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend

.github/workflows/build-enterprise.yaml

@@ -58,6 +58,8 @@ jobs:
         run: |
           mkdir -p frontend
           echo 'CI=1' > frontend/.env
+          echo 'VITE_INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' >> frontend/.env
+          echo 'VITE_SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
           echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
           echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
           echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env

.github/workflows/gor-signoz.yaml

@@ -24,6 +24,8 @@ jobs:
       - name: dotenv-frontend
         working-directory: frontend
         run: |
+          echo 'VITE_INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > .env
+          echo 'VITE_SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> .env
           echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> .env
           echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> .env
           echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> .env

.github/workflows/integrationci.yaml

@@ -52,7 +52,6 @@ jobs:
           - rootuser
           - serviceaccount
           - querier_json_body
-          - querier_skip_resource_fingerprint
           - ttl
         sqlstore-provider:
           - postgres

conf/example.yaml

@@ -64,16 +64,10 @@ web:
   settings:
     posthog:
       # Whether to enable PostHog in web.
-      enabled: false
+      enabled: true
     appcues:
       # Whether to enable Appcues in web.
-      enabled: false
-    sentry:
-      # Whether to enable Sentry in web.
-      enabled: false
-    pylon:
-      # Whether to enable Pylon in web.
-      enabled: false
+      enabled: true
 
 ##################### Cache #####################
 cache:

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.0
+    image: signoz/signoz:v0.126.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.0
+    image: signoz/signoz:v0.126.0
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.0}
+    image: signoz/signoz:${VERSION:-v0.126.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.0}
+    image: signoz/signoz:${VERSION:-v0.126.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

docs/api/openapi.yml

@@ -3237,20 +3237,8 @@ components:
           items:
             $ref: '#/components/schemas/ErrorsResponseerroradditional'
           type: array
-        invalidReferences:
-          items:
-            type: string
-          type: array
         message:
           type: string
-        retry:
-          $ref: '#/components/schemas/ErrorsResponseretryjson'
-        suggestions:
-          items:
-            type: string
-          type: array
-        type:
-          type: string
         url:
           type: string
       required:
@@ -3262,11 +3250,6 @@ components:
         message:
           type: string
       type: object
-    ErrorsResponseretryjson:
-      properties:
-        delay:
-          $ref: '#/components/schemas/TimeDuration'
-      type: object
     FactoryResponse:
       properties:
         healthy:
@@ -6525,15 +6508,6 @@ components:
       required:
       - items
       type: object
-    SpantypesGettableTraceAggregations:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/SpantypesSpanAggregationResult'
-          type: array
-      required:
-      - aggregations
-      type: object
     SpantypesGettableWaterfallTrace:
       properties:
         aggregations:
@@ -6572,15 +6546,6 @@ components:
           nullable: true
           type: array
       type: object
-    SpantypesOtelSpanRef:
-      properties:
-        refType:
-          type: string
-        spanId:
-          type: string
-        traceId:
-          type: string
-      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -6608,15 +6573,6 @@ components:
       - name
       - condition
       type: object
-    SpantypesPostableTraceAggregations:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/SpantypesSpanAggregation'
-          type: array
-      required:
-      - aggregations
-      type: object
     SpantypesPostableWaterfall:
       properties:
         aggregations:
@@ -6641,9 +6597,6 @@ components:
           $ref: '#/components/schemas/SpantypesSpanAggregationType'
         field:
           $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-      required:
-      - field
-      - aggregation
       type: object
     SpantypesSpanAggregationResult:
       properties:
@@ -6657,10 +6610,6 @@ components:
             type: integer
           nullable: true
           type: object
-      required:
-      - field
-      - aggregation
-      - value
       type: object
     SpantypesSpanAggregationType:
       enum:
@@ -6844,10 +6793,6 @@ components:
           type: string
         parent_span_id:
           type: string
-        references:
-          items:
-            $ref: '#/components/schemas/SpantypesOtelSpanRef'
-          type: array
         resource:
           additionalProperties:
             type: string
@@ -6873,8 +6818,6 @@ components:
           type: string
         trace_state:
           type: string
-      required:
-      - references
       type: object
     TagtypesPostableTag:
       properties:
@@ -7125,13 +7068,6 @@ components:
       required:
       - name
       type: object
-    TypesPostableVerifyResetPasswordToken:
-      properties:
-        token:
-          type: string
-      required:
-      - token
-      type: object
     TypesResetPasswordToken:
       properties:
         expiresAt:
@@ -12305,75 +12241,6 @@ paths:
       summary: Test notification channel (deprecated)
       tags:
       - channels
-  /api/v1/traces/{traceID}/aggregations:
-    post:
-      deprecated: false
-      description: Computes span aggregations grouped by requested field.
-      operationId: GetTraceAggregations
-      parameters:
-      - in: path
-        name: traceID
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/SpantypesPostableTraceAggregations'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/SpantypesGettableTraceAggregations'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get aggregations for a trace
-      tags:
-      - tracedetail
   /api/v1/user:
     get:
       deprecated: false
@@ -14982,41 +14849,6 @@ paths:
       summary: Readiness check
       tags:
       - health
-  /api/v2/reset_password_tokens/verify:
-    post:
-      deprecated: false
-      description: This endpoint verifies whether a reset password token exists and
-        is not expired
-      operationId: VerifyResetPasswordToken
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/TypesPostableVerifyResetPasswordToken'
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      summary: Verify a reset password token
-      tags:
-      - users
   /api/v2/roles/{id}/users:
     get:
       deprecated: false

docs/config/web-settings.json

@@ -1,9 +1,7 @@
 {
   "required": [
     "posthog",
-    "appcues",
-    "sentry",
-    "pylon"
+    "appcues"
   ],
   "additionalProperties": false,
   "definitions": {
@@ -30,30 +28,6 @@
         }
       },
       "type": "object"
-    },
-    "Pylon": {
-      "required": [
-        "enabled"
-      ],
-      "additionalProperties": false,
-      "properties": {
-        "enabled": {
-          "type": "boolean"
-        }
-      },
-      "type": "object"
-    },
-    "Sentry": {
-      "required": [
-        "enabled"
-      ],
-      "additionalProperties": false,
-      "properties": {
-        "enabled": {
-          "type": "boolean"
-        }
-      },
-      "type": "object"
     }
   },
   "properties": {
@@ -62,12 +36,6 @@
     },
     "posthog": {
       "$ref": "#/definitions/Posthog"
-    },
-    "pylon": {
-      "$ref": "#/definitions/Pylon"
-    },
-    "sentry": {
-      "$ref": "#/definitions/Sentry"
     }
   },
   "type": "object"

ee/query-service/rules/manager_test.go

@@ -26,7 +26,7 @@ import (
 	"github.com/stretchr/testify/mock"
 	"github.com/stretchr/testify/require"
 
-	cmock "github.com/SigNoz/clickhouse-go-mock"
+	cmock "github.com/srikanthccv/ClickHouse-go-mock"
 )
 
 func TestManager_TestNotification_SendUnmatched_ThresholdRule(t *testing.T) {

frontend/.oxlintrc.json

@@ -123,7 +123,6 @@
     "react/require-render-return": "error",
     "react/no-unsafe": "off",
     "no-array-constructor": "error",
-    "jsdoc/check-tag-names": "off",
     "@typescript-eslint/no-duplicate-enum-values": "warn",
     // TODO: Change to error after migration to oxlint
     "@typescript-eslint/no-empty-object-type": "error",
@@ -198,7 +197,10 @@
         ]
       }
     ],
-    "max-params": "off",
+    "max-params": [
+      "warn",
+      3
+    ],
     // Warns when functions have more than 3 parameters
     "@typescript-eslint/explicit-function-return-type": "error",
     // Requires explicit return types on functions
@@ -536,10 +538,7 @@
         "signoz/no-raw-absolute-path":"off",
         "no-restricted-globals": "off",
         // Tests need raw localStorage/sessionStorage to seed DOM state for isolation
-        "signoz/no-zustand-getstate-in-hooks": "off",
-        "@typescript-eslint/no-explicit-any": "off", // Tests often need any for mocks/stubs
-        "@typescript-eslint/explicit-module-boundary-types": "off", // Return types not required in tests
-        "@typescript-eslint/explicit-function-return-type": "off" // Same as above rule, don't need to care about return type
+        "signoz/no-zustand-getstate-in-hooks": "off"
       }
     },
     {

frontend/index.html

@@ -112,10 +112,7 @@
 
 		<script>
 			var PYLON_APP_ID = '<%- PYLON_APP_ID %>';
-			var pylonSettings =
-				((window.signozBootData || {}).settings || {}).pylon || {};
-			var pylonEnabled = pylonSettings.enabled !== false;
-			if (PYLON_APP_ID && pylonEnabled) {
+			if (PYLON_APP_ID) {
 				(function () {
 					var e = window;
 					var t = document;

frontend/plugins/rules/no-antd-components.mjs

@@ -25,7 +25,8 @@ const BANNED_COMPONENTS = {
 	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
 	Avatar: 'Use @signozhq/ui/avatar instead of antd Avatar.',
 	Divider: 'Use @signozhq/ui/divider Divider instead of antd Divider.',
-	Tag: 'Use @signozhq/ui/badge Bagde instead of antd Tag.',
+	Select:
+		'Use SelectSimple / ComboboxSimple from @signozhq/ui/select or @signozhq/ui/combobox instead of antd Select.',
 };
 
 export default {

frontend/public/locales/en-GB/alerts.json

@@ -4,7 +4,7 @@
 	"no_alerts_found": "No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.",
 	"button_testrule": "Test Notification",
 	"label_channel_select": "Notification Channels",
-	"placeholder_channel_select": "select one or more channels",
+	"placeholder_channel_select": "Select one or more channels",
 	"channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
 	"preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
 	"preview_chart_threshold_label": "Threshold",

frontend/public/locales/en/alerts.json

@@ -4,7 +4,7 @@
 	"no_alerts_found": "No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.",
 	"button_testrule": "Test Notification",
 	"label_channel_select": "Notification Channels",
-	"placeholder_channel_select": "select one or more channels",
+	"placeholder_channel_select": "Select one or more channels",
 	"channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
 	"preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
 	"preview_chart_threshold_label": "Threshold",

frontend/src/AppRoutes/index.tsx

@@ -35,6 +35,7 @@ import { PreferenceContextProvider } from 'providers/preferences/context/Prefere
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { extractDomain } from 'utils/app';
+import { bootSettings } from 'utils/bootData';
 
 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
@@ -291,8 +292,7 @@ function App(): JSX.Element {
 				isLoggedInState &&
 				isChatSupportEnabled &&
 				!showAddCreditCardModal &&
-				(isCloudUser || isEnterpriseSelfHostedUser) &&
-				(window.signozBootData?.settings?.pylon.enabled ?? true)
+				(isCloudUser || isEnterpriseSelfHostedUser)
 			) {
 				const email = user.email || '';
 				const secret = process.env.PYLON_IDENTITY_SECRET || '';
@@ -334,20 +334,14 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		if (isCloudUser || isEnterpriseSelfHostedUser) {
-			if (
-				(window.signozBootData?.settings?.posthog.enabled ?? true) &&
-				process.env.POSTHOG_KEY
-			) {
+			if (bootSettings.posthog.enabled && process.env.POSTHOG_KEY) {
 				posthog.init(process.env.POSTHOG_KEY, {
 					api_host: 'https://us.i.posthog.com',
 					person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
 				});
 			}
 
-			if (
-				!isSentryInitialized &&
-				(window.signozBootData?.settings?.sentry.enabled ?? true)
-			) {
+			if (!isSentryInitialized) {
 				Sentry.init({
 					dsn: process.env.SENTRY_DSN,
 					tunnel: process.env.TUNNEL_URL,

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

@@ -2051,10 +2051,6 @@ export interface ErrorsResponseerroradditionalDTO {
 	message?: string;
 }
 
-export interface ErrorsResponseretryjsonDTO {
-	delay?: TimeDurationDTO;
-}
-
 export interface ErrorsJSONDTO {
 	/**
 	 * @type string
@@ -2064,23 +2060,10 @@ export interface ErrorsJSONDTO {
 	 * @type array
 	 */
 	errors?: ErrorsResponseerroradditionalDTO[];
-	/**
-	 * @type array
-	 */
-	invalidReferences?: string[];
 	/**
 	 * @type string
 	 */
 	message: string;
-	retry?: ErrorsResponseretryjsonDTO;
-	/**
-	 * @type array
-	 */
-	suggestions?: string[];
-	/**
-	 * @type string
-	 */
-	type?: string;
 	/**
 	 * @type string
 	 */
@@ -7753,34 +7736,12 @@ export type SpantypesSpanAggregationResultDTOValue =
 	SpantypesSpanAggregationResultDTOValueAnyOf | null;
 
 export interface SpantypesSpanAggregationResultDTO {
-	aggregation: SpantypesSpanAggregationTypeDTO;
-	field: TelemetrytypesTelemetryFieldKeyDTO;
+	aggregation?: SpantypesSpanAggregationTypeDTO;
+	field?: TelemetrytypesTelemetryFieldKeyDTO;
 	/**
 	 * @type object,null
 	 */
-	value: SpantypesSpanAggregationResultDTOValue;
-}
-
-export interface SpantypesGettableTraceAggregationsDTO {
-	/**
-	 * @type array
-	 */
-	aggregations: SpantypesSpanAggregationResultDTO[];
-}
-
-export interface SpantypesOtelSpanRefDTO {
-	/**
-	 * @type string
-	 */
-	refType?: string;
-	/**
-	 * @type string
-	 */
-	spanId?: string;
-	/**
-	 * @type string
-	 */
-	traceId?: string;
+	value?: SpantypesSpanAggregationResultDTOValue;
 }
 
 export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
@@ -7877,10 +7838,6 @@ export interface SpantypesWaterfallSpanDTO {
 	 * @type string
 	 */
 	parent_span_id?: string;
-	/**
-	 * @type array
-	 */
-	references: SpantypesOtelSpanRefDTO[];
 	/**
 	 * @type object,null
 	 */
@@ -8026,15 +7983,8 @@ export interface SpantypesPostableSpanMapperGroupDTO {
 }
 
 export interface SpantypesSpanAggregationDTO {
-	aggregation: SpantypesSpanAggregationTypeDTO;
-	field: TelemetrytypesTelemetryFieldKeyDTO;
-}
-
-export interface SpantypesPostableTraceAggregationsDTO {
-	/**
-	 * @type array
-	 */
-	aggregations: SpantypesSpanAggregationDTO[];
+	aggregation?: SpantypesSpanAggregationTypeDTO;
+	field?: TelemetrytypesTelemetryFieldKeyDTO;
 }
 
 export interface SpantypesPostableWaterfallDTO {
@@ -8358,13 +8308,6 @@ export interface TypesPostableRoleDTO {
 	name: string;
 }
 
-export interface TypesPostableVerifyResetPasswordTokenDTO {
-	/**
-	 * @type string
-	 */
-	token: string;
-}
-
 export interface TypesResetPasswordTokenDTO {
 	/**
 	 * @type string
@@ -9377,17 +9320,6 @@ export type UpdateSpanMapperPathParameters = {
 	groupId: string;
 	mapperId: string;
 };
-export type GetTraceAggregationsPathParameters = {
-	traceID: string;
-};
-export type GetTraceAggregations200 = {
-	data: SpantypesGettableTraceAggregationsDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListUsersDeprecated200 = {
 	/**
 	 * @type array

frontend/src/api/generated/services/tracedetail/index.ts

@@ -12,120 +12,17 @@ import type {
 } from 'react-query';
 
 import type {
-	GetTraceAggregations200,
-	GetTraceAggregationsPathParameters,
 	GetWaterfall200,
 	GetWaterfallPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
-	SpantypesPostableTraceAggregationsDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-/**
- * Computes span aggregations grouped by requested field.
- * @summary Get aggregations for a trace
- */
-export const getTraceAggregations = (
-	{ traceID }: GetTraceAggregationsPathParameters,
-	spantypesPostableTraceAggregationsDTO?: BodyType<SpantypesPostableTraceAggregationsDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetTraceAggregations200>({
-		url: `/api/v1/traces/${traceID}/aggregations`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: spantypesPostableTraceAggregationsDTO,
-		signal,
-	});
-};
-
-export const getGetTraceAggregationsMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getTraceAggregations>>,
-		TError,
-		{
-			pathParams: GetTraceAggregationsPathParameters;
-			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof getTraceAggregations>>,
-	TError,
-	{
-		pathParams: GetTraceAggregationsPathParameters;
-		data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['getTraceAggregations'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof getTraceAggregations>>,
-		{
-			pathParams: GetTraceAggregationsPathParameters;
-			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return getTraceAggregations(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type GetTraceAggregationsMutationResult = NonNullable<
-	Awaited<ReturnType<typeof getTraceAggregations>>
->;
-export type GetTraceAggregationsMutationBody =
-	| BodyType<SpantypesPostableTraceAggregationsDTO>
-	| undefined;
-export type GetTraceAggregationsMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get aggregations for a trace
- */
-export const useGetTraceAggregations = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getTraceAggregations>>,
-		TError,
-		{
-			pathParams: GetTraceAggregationsPathParameters;
-			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof getTraceAggregations>>,
-	TError,
-	{
-		pathParams: GetTraceAggregationsPathParameters;
-		data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getGetTraceAggregationsMutationOptions(options));
-};
 /**
  * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
  * @summary Get waterfall view for a trace

frontend/src/api/generated/services/users/index.ts

@@ -48,7 +48,6 @@ import type {
 	TypesPostableInviteDTO,
 	TypesPostableResetPasswordDTO,
 	TypesPostableRoleDTO,
-	TypesPostableVerifyResetPasswordTokenDTO,
 	TypesUpdatableUserDTO,
 	UpdateUserDeprecated200,
 	UpdateUserDeprecatedPathParameters,
@@ -948,90 +947,6 @@ export const useForgotPassword = <
 > => {
 	return useMutation(getForgotPasswordMutationOptions(options));
 };
-/**
- * This endpoint verifies whether a reset password token exists and is not expired
- * @summary Verify a reset password token
- */
-export const verifyResetPasswordToken = (
-	typesPostableVerifyResetPasswordTokenDTO?: BodyType<TypesPostableVerifyResetPasswordTokenDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/reset_password_tokens/verify`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: typesPostableVerifyResetPasswordTokenDTO,
-		signal,
-	});
-};
-
-export const getVerifyResetPasswordTokenMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof verifyResetPasswordToken>>,
-		TError,
-		{ data?: BodyType<TypesPostableVerifyResetPasswordTokenDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof verifyResetPasswordToken>>,
-	TError,
-	{ data?: BodyType<TypesPostableVerifyResetPasswordTokenDTO> },
-	TContext
-> => {
-	const mutationKey = ['verifyResetPasswordToken'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof verifyResetPasswordToken>>,
-		{ data?: BodyType<TypesPostableVerifyResetPasswordTokenDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return verifyResetPasswordToken(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type VerifyResetPasswordTokenMutationResult = NonNullable<
-	Awaited<ReturnType<typeof verifyResetPasswordToken>>
->;
-export type VerifyResetPasswordTokenMutationBody =
-	| BodyType<TypesPostableVerifyResetPasswordTokenDTO>
-	| undefined;
-export type VerifyResetPasswordTokenMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Verify a reset password token
- */
-export const useVerifyResetPasswordToken = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof verifyResetPasswordToken>>,
-		TError,
-		{ data?: BodyType<TypesPostableVerifyResetPasswordTokenDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof verifyResetPasswordToken>>,
-	TError,
-	{ data?: BodyType<TypesPostableVerifyResetPasswordTokenDTO> },
-	TContext
-> => {
-	return useMutation(getVerifyResetPasswordTokenMutationOptions(options));
-};
 /**
  * This endpoint returns the users having the role by role id
  * @summary Get users by role id

frontend/src/api/index.ts

@@ -120,8 +120,7 @@ export const interceptorRejected = async (
 				!(
 					response.config.url === '/sessions' && response.config.method === 'delete'
 				) &&
-				response.config.url !== '/authz/check' &&
-				response.config.url !== '/api/v2/reset_password_tokens/verify'
+				response.config.url !== '/authz/check'
 			) {
 				try {
 					const accessToken = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN);

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -349,7 +349,7 @@ function convertV5DataByType(
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function convertV5ResponseToLegacy(
-	v5Response: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5>,
+	v5Response: SuccessResponse<MetricRangePayloadV5>,
 	legendMap: Record<string, string>,
 	formatForWeb?: boolean,
 ): SuccessResponse<MetricRangePayloadV3> & { warning?: Warning } {
@@ -357,7 +357,7 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		params?.compositeQuery?.queries
+		(params as QueryRangeRequestV5)?.compositeQuery?.queries
 			?.filter((query) => query.type === 'builder_query')
 			.reduce(
 				(acc, query) => {

frontend/src/assets/Icons/solid-x-circle.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_4062_7291)" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="M7 12.833A5.833 5.833 0 107 1.167a5.833 5.833 0 000 11.666z" fill="#E5484D" stroke="#E5484D"/><path d="M8.75 5.25l-3.5 3.5M5.25 5.25l3.5 3.5" stroke="#121317"/></g><defs><clipPath id="prefix__clip0_4062_7291"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -11,6 +11,7 @@
 }
 
 .divider {
-	--divider-color: var(--l1-border);
-	--divider-margin: 10px 0 16px 0;
+	border-color: var(--l1-border);
+	margin: 16px 0;
+	margin-top: 10px;
 }

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.module.scss

@@ -1,31 +0,0 @@
-.emptyState {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 12px;
-	padding: 48px 24px;
-	text-align: center;
-}
-
-.icon {
-	color: var(--danger-background);
-}
-
-.title {
-	font-size: 16px;
-	font-weight: 500;
-	color: var(--text-vanilla-100);
-}
-
-.subtitle {
-	font-size: 14px;
-	color: var(--text-vanilla-400);
-	max-width: 400px;
-}
-
-.actions {
-	display: flex;
-	gap: 8px;
-	margin-top: 4px;
-}

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx

@@ -1,61 +0,0 @@
-import { useCallback } from 'react';
-import { LifeBuoy, RefreshCw, TriangleAlert } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { handleContactSupport } from 'container/Integrations/utils';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-
-import styles from './ErrorEmptyState.module.scss';
-
-interface ErrorEmptyStateProps {
-	title?: string;
-	subtitle?: string;
-	onRefresh?: () => void;
-}
-
-function ErrorEmptyState({
-	title = 'Something went wrong',
-	subtitle = 'Our team is getting on top to resolve this. Please reach out to support if the issue persists.',
-	onRefresh,
-}: ErrorEmptyStateProps): JSX.Element {
-	const { isCloudUser } = useGetTenantLicense();
-
-	const onContactSupport = useCallback((): void => {
-		handleContactSupport(isCloudUser);
-	}, [isCloudUser]);
-
-	return (
-		<div className={styles.emptyState} data-testid="error-empty-state">
-			<TriangleAlert className={styles.icon} size={32} />
-			<div className={styles.title} data-testid="error-title">
-				{title}
-			</div>
-			<div className={styles.subtitle} data-testid="error-subtitle">
-				{subtitle}
-			</div>
-			<div className={styles.actions}>
-				<Button
-					variant="solid"
-					color="secondary"
-					prefix={<LifeBuoy size={14} />}
-					onClick={onContactSupport}
-					data-testid="error-contact-support-button"
-				>
-					Contact Support
-				</Button>
-				{onRefresh && (
-					<Button
-						variant="outlined"
-						color="secondary"
-						prefix={<RefreshCw size={14} />}
-						onClick={onRefresh}
-						data-testid="error-refresh-button"
-					>
-						Refresh
-					</Button>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default ErrorEmptyState;

frontend/src/components/Alerts/ErrorEmptyState/index.ts

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

frontend/src/components/Alerts/LabelColumn/LabelColumn.module.scss

@@ -1,68 +0,0 @@
-.labelColumn {
-	display: flex;
-	gap: 4px;
-	align-items: center;
-	overflow: hidden;
-	max-width: 100%;
-	width: 100%;
-}
-
-.labelBadge {
-	cursor: default;
-	font-size: 12px;
-
-	--badge-display: inline;
-
-	max-width: 180px;
-	text-overflow: ellipsis;
-}
-
-.overflowTrigger {
-	all: unset;
-	cursor: pointer;
-}
-
-.overflowBadge {
-	cursor: pointer;
-	font-size: 12px;
-}
-
-.labelPopover {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	padding: 8px;
-	max-height: 300px;
-	overflow-y: auto;
-}
-
-.labelTooltip {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	max-height: 300px;
-	overflow-y: auto;
-}
-
-.labelValue {
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.tooltipContent {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.copyButton {
-	all: unset;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	opacity: 0.7;
-
-	&:hover {
-		opacity: 1;
-	}
-}

frontend/src/components/Alerts/LabelColumn/LabelColumn.test.tsx

@@ -1,142 +0,0 @@
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { act, render, screen } from '@testing-library/react';
-
-import LabelColumn from './LabelColumn';
-
-let resizeCallback: ResizeObserverCallback | null = null;
-
-class MockResizeObserver {
-	constructor(callback: ResizeObserverCallback) {
-		resizeCallback = callback;
-	}
-
-	observe = jest.fn();
-	unobserve = jest.fn();
-	disconnect = jest.fn();
-}
-
-function triggerResize(width: number): void {
-	if (resizeCallback) {
-		act(() => {
-			resizeCallback?.(
-				[{ contentRect: { width } } as ResizeObserverEntry],
-				{} as ResizeObserver,
-			);
-		});
-	}
-}
-
-beforeAll(() => {
-	global.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
-});
-
-afterEach(() => {
-	resizeCallback = null;
-});
-
-function renderWithProviders(
-	ui: React.ReactElement,
-): ReturnType<typeof render> {
-	return render(<TooltipProvider>{ui}</TooltipProvider>);
-}
-
-describe('LabelColumn', () => {
-	it('should render all labels when 5 or fewer', () => {
-		const labels = ['env', 'service', 'region'];
-
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
-		expect(screen.getByTestId('label-tag-service')).toBeInTheDocument();
-		expect(screen.getByTestId('label-tag-region')).toBeInTheDocument();
-	});
-
-	it('should truncate labels and show +N badge when container is narrow', () => {
-		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
-
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		// Simulate narrow container that fits ~3 badges
-		// Badge widths: env=37, service=65, region=58, team=44, owner=51, version=65
-		// 220px available = 3 badges (160px) + gaps (8px) + overflow (44px)
-		triggerResize(220);
-
-		// First 3 visible
-		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
-		expect(screen.getByTestId('label-tag-service')).toBeInTheDocument();
-		expect(screen.getByTestId('label-tag-region')).toBeInTheDocument();
-
-		// Remaining in overflow badge
-		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
-	});
-
-	it('should render label with value when value prop provided', () => {
-		const labels = ['env'];
-		const value = { env: 'production' };
-
-		renderWithProviders(<LabelColumn labels={labels} value={value} />);
-
-		expect(screen.getByTestId('label-tag-env')).toHaveTextContent(
-			'env: production',
-		);
-	});
-
-	it('should render labels without value when value is not provided for that label', () => {
-		const labels = ['env', 'service'];
-		const value = { env: 'production' };
-
-		renderWithProviders(<LabelColumn labels={labels} value={value} />);
-
-		expect(screen.getByTestId('label-tag-env')).toHaveTextContent(
-			'env: production',
-		);
-		expect(screen.getByTestId('label-tag-service')).toHaveTextContent('service');
-	});
-
-	it('should show overflow badge with remaining count when container is narrow', () => {
-		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
-
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		// Simulate narrow container to trigger overflow (shows 3 labels)
-		// 220px fits first 3 badges before overflow
-		triggerResize(220);
-
-		// Overflow badge shows +3 (remaining labels)
-		const overflowBadge = screen.getByTestId('label-overflow-badge');
-		expect(overflowBadge).toBeInTheDocument();
-		expect(overflowBadge).toHaveTextContent('+3');
-	});
-
-	it('should render empty when no labels provided', () => {
-		renderWithProviders(<LabelColumn labels={[]} />);
-
-		const column = screen.getByTestId('label-column');
-		expect(column.children).toHaveLength(0);
-	});
-
-	it('should use primary color by default', () => {
-		const labels = ['env'];
-
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
-	});
-
-	it('should show all labels when container is wide enough', () => {
-		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
-
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		// Simulate wide container
-		triggerResize(1000);
-
-		// All labels visible
-		labels.forEach((label) => {
-			expect(screen.getByTestId(`label-tag-${label}`)).toBeInTheDocument();
-		});
-
-		// No overflow badge
-		expect(screen.queryByTestId('label-overflow-badge')).not.toBeInTheDocument();
-	});
-});

frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx

@@ -1,150 +0,0 @@
-import { Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { toast } from '@signozhq/ui/sonner';
-import {
-	TooltipContent,
-	TooltipRoot,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
-
-import LabelTag from './LabelTag';
-
-import styles from './LabelColumn.module.scss';
-import { BADGE_GAP, estimateBadgeWidth, OVERFLOW_BADGE_WIDTH } from './utils';
-
-export interface LabelColumnProps {
-	labels: string[];
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
-	value?: { [key: string]: string };
-}
-
-function LabelColumn({
-	labels,
-	value,
-	color = 'primary',
-}: LabelColumnProps): JSX.Element {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const [maxVisibleCount, setMaxVisibleCount] = useState(labels.length);
-	const [, copyToClipboard] = useCopyToClipboard();
-
-	const calculateMaxVisible = useCallback(
-		(width: number): number => {
-			if (width <= 0) {
-				return 1;
-			}
-
-			const availableWidth = width - OVERFLOW_BADGE_WIDTH - BADGE_GAP;
-			let usedWidth = 0;
-			let count = 0;
-
-			for (const label of labels) {
-				const badgeWidth = estimateBadgeWidth(label, value?.[label]) + BADGE_GAP;
-				if (usedWidth + badgeWidth > availableWidth && count > 0) {
-					break;
-				}
-				usedWidth += badgeWidth;
-				count++;
-			}
-
-			return Math.max(1, count);
-		},
-		[labels, value],
-	);
-
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container) {
-			return;
-		}
-
-		const observer = new ResizeObserver((entries) => {
-			const entry = entries[0];
-			if (entry && entry.contentRect.width > 0) {
-				setMaxVisibleCount(calculateMaxVisible(entry.contentRect.width));
-			}
-		});
-
-		observer.observe(container);
-
-		if (container.clientWidth > 0) {
-			setMaxVisibleCount(calculateMaxVisible(container.clientWidth));
-		}
-
-		return (): void => observer.disconnect();
-	}, [calculateMaxVisible]);
-
-	const needsOverflow = labels.length > maxVisibleCount;
-	const visibleLabels = needsOverflow
-		? labels.slice(0, maxVisibleCount)
-		: labels;
-	const remainingLabels = needsOverflow ? labels.slice(maxVisibleCount) : [];
-
-	return (
-		<div
-			ref={containerRef}
-			className={styles.labelColumn}
-			data-testid="label-column"
-		>
-			{visibleLabels.map((label) => (
-				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
-			))}
-			{remainingLabels.length > 0 && (
-				<TooltipRoot>
-					<TooltipTrigger asChild>
-						<span>
-							<Badge
-								color={color}
-								className={styles.overflowBadge}
-								variant="outline"
-								data-testid="label-overflow-badge"
-							>
-								+{remainingLabels.length}
-							</Badge>
-						</span>
-					</TooltipTrigger>
-					<TooltipContent side="bottom" align="end">
-						<div className={styles.tooltipContent}>
-							<span>
-								{remainingLabels
-									.map((label) => (value?.[label] ? `${label}: ${value[label]}` : label))
-									.join(', ')}
-							</span>
-							<button
-								type="button"
-								className={styles.copyButton}
-								onClick={(e): void => {
-									e.stopPropagation();
-									const searchFormat = remainingLabels
-										.map((label) => (value?.[label] ? `${label} ${value[label]}` : label))
-										.join(' ');
-									copyToClipboard(searchFormat);
-									toast.success('Copied! Use in search to filter alerts.');
-								}}
-								aria-label="Copy to clipboard"
-							>
-								<Copy size={12} />
-							</button>
-						</div>
-					</TooltipContent>
-				</TooltipRoot>
-			)}
-		</div>
-	);
-}
-
-export default LabelColumn;

frontend/src/components/Alerts/LabelColumn/LabelTag.module.scss

@@ -1,30 +0,0 @@
-.labelBadge {
-	cursor: default;
-	font-size: 12px;
-
-	max-width: 180px;
-	text-overflow: ellipsis;
-}
-
-.labelValue {
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.tooltipContent {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.copyButton {
-	all: unset;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	opacity: 0.7;
-
-	&:hover {
-		opacity: 1;
-	}
-}

frontend/src/components/Alerts/LabelColumn/LabelTag.tsx

@@ -1,74 +0,0 @@
-import { Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { toast } from '@signozhq/ui/sonner';
-import {
-	TooltipContent,
-	TooltipRoot,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
-import { useCopyToClipboard } from 'react-use';
-
-import styles from './LabelTag.module.scss';
-
-export interface LabelTagProps {
-	label: string;
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
-	value?: string;
-}
-
-function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
-	const [, copyToClipboard] = useCopyToClipboard();
-	const displayText = value ? `${label}: ${value}` : label;
-	const searchFormat = value ? `${label} ${value}` : label;
-
-	const handleCopy = (e: React.MouseEvent): void => {
-		e.stopPropagation();
-		copyToClipboard(searchFormat);
-		toast.success('Copied! Use in search to filter alerts.');
-	};
-
-	return (
-		<TooltipRoot>
-			<TooltipTrigger asChild>
-				<span>
-					<Badge
-						color={color}
-						className={styles.labelBadge}
-						variant="outline"
-						data-testid={`label-tag-${label}`}
-					>
-						<span className={styles.labelValue}>{displayText}</span>
-					</Badge>
-				</span>
-			</TooltipTrigger>
-			<TooltipContent>
-				<div className={styles.tooltipContent}>
-					<span>{displayText}</span>
-					<button
-						type="button"
-						className={styles.copyButton}
-						onClick={handleCopy}
-						aria-label="Copy to clipboard"
-					>
-						<Copy size={12} />
-					</button>
-				</div>
-			</TooltipContent>
-		</TooltipRoot>
-	);
-}
-
-export default LabelTag;

frontend/src/components/Alerts/LabelColumn/index.ts

@@ -1,2 +0,0 @@
-export { default } from './LabelColumn';
-export type { LabelColumnProps } from './LabelColumn';

frontend/src/components/Alerts/LabelColumn/utils.ts

@@ -1,14 +0,0 @@
-export const BADGE_GAP = 4;
-export const OVERFLOW_BADGE_WIDTH = 40;
-
-export const BADGE_MAX_WIDTH = 180;
-export const BADGE_PADDING = 16;
-export const CHAR_WIDTH = 7;
-
-export function estimateBadgeWidth(label: string, value?: string): number {
-	const displayText = value ? `${label}: ${value}` : label;
-	return Math.min(
-		displayText.length * CHAR_WIDTH + BADGE_PADDING,
-		BADGE_MAX_WIDTH,
-	);
-}

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.module.scss

@@ -1,30 +0,0 @@
-.emptyState {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 12px;
-	padding: 48px 24px;
-	text-align: center;
-}
-
-.icon {
-	color: var(--text-vanilla-400);
-}
-
-.title {
-	font-size: 16px;
-	font-weight: 500;
-	color: var(--text-vanilla-100);
-}
-
-.subtitle {
-	font-size: 14px;
-	color: var(--text-vanilla-400);
-	max-width: 400px;
-}
-
-.actions {
-	display: flex;
-	gap: 8px;
-}

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.test.tsx

@@ -1,71 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import NoResultsEmptyState from './NoResultsEmptyState';
-
-describe('NoResultsEmptyState', () => {
-	it('should render with default props', () => {
-		render(<NoResultsEmptyState />);
-
-		expect(screen.getByTestId('no-results-empty-state')).toBeInTheDocument();
-		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
-			'No matching results',
-		);
-		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
-			'No items match your current filters. Try adjusting your search criteria.',
-		);
-	});
-
-	it('should render with custom title and subtitle', () => {
-		render(
-			<NoResultsEmptyState title="Custom Title" subtitle="Custom Subtitle" />,
-		);
-
-		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
-			'Custom Title',
-		);
-		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
-			'Custom Subtitle',
-		);
-	});
-
-	it('should not render clear button when onClear is not provided', () => {
-		render(<NoResultsEmptyState />);
-
-		expect(
-			screen.queryByTestId('no-results-clear-button'),
-		).not.toBeInTheDocument();
-	});
-
-	it('should render clear button when onClear is provided', () => {
-		const onClear = jest.fn();
-
-		render(<NoResultsEmptyState onClear={onClear} />);
-
-		expect(screen.getByTestId('no-results-clear-button')).toBeInTheDocument();
-		expect(screen.getByTestId('no-results-clear-button')).toHaveTextContent(
-			'Clear Filters',
-		);
-	});
-
-	it('should render custom clear button text', () => {
-		render(
-			<NoResultsEmptyState onClear={jest.fn()} clearButtonText="Reset All" />,
-		);
-
-		expect(screen.getByTestId('no-results-clear-button')).toHaveTextContent(
-			'Reset All',
-		);
-	});
-
-	it('should call onClear when clear button is clicked', async () => {
-		const user = userEvent.setup();
-		const onClear = jest.fn();
-
-		render(<NoResultsEmptyState onClear={onClear} />);
-
-		await user.click(screen.getByTestId('no-results-clear-button'));
-
-		expect(onClear).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx

@@ -1,57 +0,0 @@
-import { RefreshCw, Search } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-
-import styles from './NoResultsEmptyState.module.scss';
-
-interface NoResultsEmptyStateProps {
-	title?: string;
-	subtitle?: string;
-	onClear?: () => void;
-	clearButtonText?: string;
-	onRefresh?: () => void;
-}
-
-function NoResultsEmptyState({
-	title = 'No matching results',
-	subtitle = 'No items match your current filters. Try adjusting your search criteria.',
-	onClear,
-	clearButtonText = 'Clear Filters',
-	onRefresh,
-}: NoResultsEmptyStateProps): JSX.Element {
-	return (
-		<div className={styles.emptyState} data-testid="no-results-empty-state">
-			<Search className={styles.icon} size={16} />
-			<div className={styles.title} data-testid="no-results-title">
-				{title}
-			</div>
-			<div className={styles.subtitle} data-testid="no-results-subtitle">
-				{subtitle}
-			</div>
-			<div className={styles.actions}>
-				{onClear && (
-					<Button
-						variant="outlined"
-						color="secondary"
-						onClick={onClear}
-						data-testid="no-results-clear-button"
-					>
-						{clearButtonText}
-					</Button>
-				)}
-				{onRefresh && (
-					<Button
-						variant="outlined"
-						color="secondary"
-						prefix={<RefreshCw size={14} />}
-						onClick={onRefresh}
-						data-testid="no-results-refresh-button"
-					>
-						Refresh
-					</Button>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default NoResultsEmptyState;

frontend/src/components/Alerts/NoResultsEmptyState/index.ts

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

frontend/src/components/Alerts/constants.ts

@@ -1,32 +0,0 @@
-import type { BadgeColor } from '@signozhq/ui/badge';
-
-export const STATE_ORDER = ['firing', 'pending', 'inactive', 'disabled'];
-export const SEVERITY_ORDER = ['critical', 'error', 'warning', 'info'];
-
-export const STATE_LABELS: Record<string, string> = {
-	firing: 'Firing',
-	pending: 'Pending',
-	inactive: 'OK',
-	disabled: 'Disabled',
-};
-
-export const STATE_COLORS: Record<string, string> = {
-	firing: 'var(--bg-cherry-500)',
-	pending: 'var(--bg-amber-500)',
-	inactive: 'var(--bg-forest-500)',
-	disabled: 'var(--l2-foreground)',
-};
-
-export const SEVERITY_COLORS: Record<string, string> = {
-	critical: 'var(--bg-cherry-500)',
-	error: 'var(--bg-cherry-400)',
-	warning: 'var(--bg-amber-500)',
-	info: 'var(--bg-robin-500)',
-};
-
-export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
-	critical: 'error',
-	error: 'error',
-	warning: 'warning',
-	info: 'primary',
-};

frontend/src/components/Alerts/types.ts

@@ -1,7 +0,0 @@
-export interface FilterValue {
-	value: string;
-}
-
-export interface AlertWithLabels {
-	labels?: Record<string, string>;
-}

frontend/src/components/Alerts/utils.test.ts

@@ -1,287 +0,0 @@
-import type { SortState } from 'components/TanStackTableView/types';
-
-import type { AlertWithLabels, FilterValue } from './types';
-import { filterByLabels, searchByLabels, sortByColumn } from './utils';
-
-interface TestAlert extends AlertWithLabels {
-	name: string;
-	value: number;
-}
-
-const createAlert = (
-	name: string,
-	value: number,
-	labels?: Record<string, string>,
-): TestAlert => ({
-	name,
-	value,
-	labels,
-});
-
-describe('sortByColumn', () => {
-	const alerts: TestAlert[] = [
-		createAlert('Alert C', 3),
-		createAlert('Alert A', 1),
-		createAlert('Alert B', 2),
-	];
-
-	const getSortValue = (
-		item: TestAlert,
-		columnName: string,
-	): string | number => {
-		if (columnName === 'name') {
-			return item.name;
-		}
-		if (columnName === 'value') {
-			return item.value;
-		}
-		return '';
-	};
-
-	it('should return items unchanged when no orderBy provided', () => {
-		const result = sortByColumn(alerts, null, getSortValue);
-		expect(result).toStrictEqual(alerts);
-	});
-
-	it('should sort by string column ascending', () => {
-		const orderBy: SortState = { columnName: 'name', order: 'asc' };
-		const result = sortByColumn(alerts, orderBy, getSortValue);
-		expect(result.map((a) => a.name)).toStrictEqual([
-			'Alert A',
-			'Alert B',
-			'Alert C',
-		]);
-	});
-
-	it('should sort by string column descending', () => {
-		const orderBy: SortState = { columnName: 'name', order: 'desc' };
-		const result = sortByColumn(alerts, orderBy, getSortValue);
-		expect(result.map((a) => a.name)).toStrictEqual([
-			'Alert C',
-			'Alert B',
-			'Alert A',
-		]);
-	});
-
-	it('should sort by number column ascending', () => {
-		const orderBy: SortState = { columnName: 'value', order: 'asc' };
-		const result = sortByColumn(alerts, orderBy, getSortValue);
-		expect(result.map((a) => a.value)).toStrictEqual([1, 2, 3]);
-	});
-
-	it('should sort by number column descending', () => {
-		const orderBy: SortState = { columnName: 'value', order: 'desc' };
-		const result = sortByColumn(alerts, orderBy, getSortValue);
-		expect(result.map((a) => a.value)).toStrictEqual([3, 2, 1]);
-	});
-
-	it('should use defaultSort when orderBy is null', () => {
-		const defaultSort: SortState = { columnName: 'value', order: 'asc' };
-		const result = sortByColumn(alerts, null, getSortValue, defaultSort);
-		expect(result.map((a) => a.value)).toStrictEqual([1, 2, 3]);
-	});
-
-	it('should not mutate original array', () => {
-		const original = [...alerts];
-		const orderBy: SortState = { columnName: 'name', order: 'asc' };
-		sortByColumn(alerts, orderBy, getSortValue);
-		expect(alerts).toStrictEqual(original);
-	});
-
-	it('should handle empty array', () => {
-		const result = sortByColumn(
-			[],
-			{ columnName: 'name', order: 'asc' },
-			getSortValue,
-		);
-		expect(result).toStrictEqual([]);
-	});
-
-	it('should handle equal values', () => {
-		const duplicates = [
-			createAlert('Same', 1),
-			createAlert('Same', 1),
-			createAlert('Same', 1),
-		];
-		const orderBy: SortState = { columnName: 'name', order: 'asc' };
-		const result = sortByColumn(duplicates, orderBy, getSortValue);
-		expect(result).toHaveLength(3);
-	});
-});
-
-describe('searchByLabels', () => {
-	const alerts: TestAlert[] = [
-		createAlert('CPU High', 1, { severity: 'critical', team: 'infra' }),
-		createAlert('Memory Warning', 2, { severity: 'warning', team: 'backend' }),
-		createAlert('Disk Full', 3, { severity: 'error', region: 'us-east' }),
-		createAlert('Network Slow', 4, {}),
-		createAlert('No Labels', 5),
-	];
-
-	const getAlertName = (alert: TestAlert): string => alert.name;
-
-	it('should return all items when search is empty', () => {
-		const result = searchByLabels(alerts, '', getAlertName);
-		expect(result).toStrictEqual(alerts);
-	});
-
-	it('should return all items when search is whitespace', () => {
-		const result = searchByLabels(alerts, '   ', getAlertName);
-		expect(result).toStrictEqual(alerts);
-	});
-
-	it('should search by alert name', () => {
-		const result = searchByLabels(alerts, 'CPU', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('CPU High');
-	});
-
-	it('should search by alert name case-insensitive', () => {
-		const result = searchByLabels(alerts, 'cpu', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('CPU High');
-	});
-
-	it('should search by severity label', () => {
-		const result = searchByLabels(alerts, 'critical', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('CPU High');
-	});
-
-	it('should search by any label key', () => {
-		const result = searchByLabels(alerts, 'team', getAlertName);
-		expect(result).toHaveLength(2);
-	});
-
-	it('should search by any label value', () => {
-		const result = searchByLabels(alerts, 'infra', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('CPU High');
-	});
-
-	it('should handle alerts with no labels', () => {
-		const result = searchByLabels(alerts, 'No Labels', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('No Labels');
-	});
-
-	it('should handle partial matches', () => {
-		const result = searchByLabels(alerts, 'warn', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('Memory Warning');
-	});
-
-	it('should return empty for no matches', () => {
-		const result = searchByLabels(alerts, 'nonexistent', getAlertName);
-		expect(result).toStrictEqual([]);
-	});
-
-	it('should trim search text', () => {
-		const result = searchByLabels(alerts, '  CPU  ', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('CPU High');
-	});
-});
-
-describe('filterByLabels', () => {
-	const alerts: TestAlert[] = [
-		createAlert('A1', 1, { severity: 'critical', team: 'infra', env: 'prod' }),
-		createAlert('A2', 2, { severity: 'critical', team: 'backend', env: 'prod' }),
-		createAlert('A3', 3, { severity: 'warning', team: 'infra', env: 'staging' }),
-		createAlert('A4', 4, { severity: 'info', team: 'frontend', env: 'dev' }),
-		createAlert('A5', 5, {}),
-		createAlert('A6', 6),
-	];
-
-	const createFilter = (value: string): FilterValue => ({ value });
-
-	it('should return all items when filters are empty', () => {
-		const result = filterByLabels(alerts, []);
-		expect(result).toStrictEqual(alerts);
-	});
-
-	it('should return all items when filters is null-ish', () => {
-		const result = filterByLabels(alerts, null as unknown as FilterValue[]);
-		expect(result).toStrictEqual(alerts);
-	});
-
-	it('should filter by single label', () => {
-		const filters = [createFilter('severity:critical')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-		expect(result.map((a) => a.name)).toStrictEqual(['A1', 'A2']);
-	});
-
-	it('should use OR logic for same key', () => {
-		const filters = [
-			createFilter('severity:critical'),
-			createFilter('severity:warning'),
-		];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(3);
-		expect(result.map((a) => a.name)).toStrictEqual(['A1', 'A2', 'A3']);
-	});
-
-	it('should use AND logic for different keys', () => {
-		const filters = [
-			createFilter('severity:critical'),
-			createFilter('team:infra'),
-		];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('A1');
-	});
-
-	it('should handle case-insensitive keys', () => {
-		const filters = [createFilter('SEVERITY:critical')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-	});
-
-	it('should handle case-insensitive values', () => {
-		const filters = [createFilter('severity:CRITICAL')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-	});
-
-	it('should trim whitespace', () => {
-		const filters = [createFilter(' severity : critical ')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-	});
-
-	it('should return empty for invalid filter format', () => {
-		const filters = [createFilter('invalid')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toStrictEqual([]);
-	});
-
-	it('should ignore invalid filters mixed with valid', () => {
-		const filters = [createFilter('invalid'), createFilter('severity:critical')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-	});
-
-	it('should exclude alerts without matching label key', () => {
-		const filters = [createFilter('nonexistent:value')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toStrictEqual([]);
-	});
-
-	it('should exclude alerts with no labels', () => {
-		const filters = [createFilter('severity:critical')];
-		const result = filterByLabels(alerts, filters);
-		expect(result.every((a) => a.labels !== undefined)).toBe(true);
-	});
-
-	it('should handle complex AND/OR combinations', () => {
-		const filters = [
-			createFilter('env:prod'),
-			createFilter('env:staging'),
-			createFilter('team:infra'),
-		];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-		expect(result.map((a) => a.name)).toStrictEqual(['A1', 'A3']);
-	});
-});

frontend/src/components/Alerts/utils.ts

@@ -1,116 +0,0 @@
-import type { SortState } from 'components/TanStackTableView/types';
-
-import type { AlertWithLabels, FilterValue } from './types';
-
-/**
- * Generic sort function for alert-like data
- */
-export function sortByColumn<T>(
-	items: T[],
-	orderBy: SortState | null,
-	getSortValue: (item: T, columnName: string) => string | number,
-	defaultSort?: SortState,
-): T[] {
-	const sortState = orderBy ?? defaultSort;
-	if (!sortState) {
-		return items;
-	}
-
-	const { columnName, order } = sortState;
-	const multiplier = order === 'asc' ? 1 : -1;
-
-	return [...items].sort((a, b) => {
-		const aVal = getSortValue(a, columnName);
-		const bVal = getSortValue(b, columnName);
-
-		if (aVal < bVal) {
-			return -1 * multiplier;
-		}
-		if (aVal > bVal) {
-			return 1 * multiplier;
-		}
-		return 0;
-	});
-}
-
-/**
- * Search alerts/rules by name, severity, and all labels
- */
-export function searchByLabels<T extends AlertWithLabels>(
-	items: T[],
-	searchText: string,
-	getAlertName: (item: T) => string,
-): T[] {
-	if (!searchText.trim()) {
-		return items;
-	}
-
-	const value = searchText.toLowerCase().trim();
-
-	return items.filter((item) => {
-		const alertName = getAlertName(item).toLowerCase();
-		const severity = item.labels?.severity?.toLowerCase() ?? '';
-
-		const labelSearchString = Object.entries(item.labels ?? {})
-			.map(([key, val]) => `${key} ${val}`)
-			.join(' ')
-			.toLowerCase();
-
-		return (
-			alertName.includes(value) ||
-			severity.includes(value) ||
-			labelSearchString.includes(value)
-		);
-	});
-}
-
-/**
- * Filter alerts by label key:value pairs
- * Same key uses OR logic, different keys use AND logic
- */
-export function filterByLabels<T extends AlertWithLabels>(
-	items: T[],
-	selectedFilters: FilterValue[],
-): T[] {
-	if (!selectedFilters?.length) {
-		return items;
-	}
-
-	const validFilters = selectedFilters
-		.map((e) => e.value)
-		.filter((v) => v.split(':').length === 2);
-
-	if (!validFilters.length) {
-		return [];
-	}
-
-	// Group values by key - same key uses OR, different keys use AND
-	const filtersByKey = new Map<string, string[]>();
-	validFilters.forEach((f) => {
-		const [key, value] = f.split(':');
-		const trimmedKey = key.trim().toLowerCase();
-		const trimmedValue = value.trim().toLowerCase();
-		const existing = filtersByKey.get(trimmedKey) ?? [];
-		existing.push(trimmedValue);
-		filtersByKey.set(trimmedKey, existing);
-	});
-
-	return items.filter((item) => {
-		if (!item.labels) {
-			return false;
-		}
-
-		// All keys must match (AND), any value per key can match (OR)
-		return Array.from(filtersByKey.entries()).every(([filterKey, values]) => {
-			// Case-insensitive key lookup
-			const matchingKey = Object.keys(item.labels ?? {}).find(
-				(k) => k.toLowerCase() === filterKey,
-			);
-			if (!matchingKey) {
-				return false;
-			}
-			const labelValue = item.labels?.[matchingKey]?.toLowerCase();
-			return values.some((v) => labelValue === v);
-		});
-	});
-}

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { Row, Select, Spin } from 'antd';
+import { Row } from 'antd';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import {
 	getValuesFromQueryParams,
 	setQueryParamsFromOptions,
 } from 'components/CeleryTask/CeleryUtils';
 import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOptions';
-import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
 
@@ -48,7 +48,7 @@ export function FilterSelect({
 			: getValuesFromQueryParams(queryParam, urlQuery) || [];
 
 	// Memoize options to include the typed value if not present
-	const mergedOptions = useMemo(() => {
+	const mergedOptions = useMemo<ComboboxSimpleItem[]>(() => {
 		if (
 			!!searchValue.trim().length &&
 			!options.some((opt) => opt.value === searchValue)
@@ -84,35 +84,16 @@ export function FilterSelect({
 		],
 	);
 
-	// Update searchValue on user input
-	const handleSearchInput = (input: string): void => {
-		setSearchValue(input);
-		handleSearch(input);
-	};
-
 	return (
-		<Select
+		<ComboboxSimple
 			key={filterType.toString()}
 			placeholder={placeholder}
-			showSearch
-			{...(isMultiple ? { mode: 'multiple' } : {})}
-			options={mergedOptions}
+			multiple={isMultiple}
+			items={mergedOptions}
 			loading={isFetching}
 			className="config-select-option"
-			onSearch={handleSearchInput}
-			maxTagCount={4}
-			allowClear
-			maxTagPlaceholder={SelectMaxTagPlaceholder}
 			value={selectValue}
-			notFoundContent={
-				isFetching ? (
-					<span>
-						<Spin size="small" /> Loading...
-					</span>
-				) : (
-					<span>No {placeholder} found</span>
-				)
-			}
+			emptyPlaceholder={`No ${placeholder} found`}
 			onChange={handleSelectChange}
 		/>
 	);

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,7 +1,6 @@
 import { useHistory, useLocation } from 'react-router-dom';
-import { Select, Spin } from 'antd';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
 import { Typography } from '@signozhq/ui/typography';
-import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
 
@@ -27,30 +26,18 @@ function CeleryTaskConfigOptions(): JSX.Element {
 				<Typography.Text style={{ whiteSpace: 'nowrap' }}>
 					Task Name
 				</Typography.Text>
-				<Select
+				<ComboboxSimple
 					placeholder="Task Name"
-					showSearch
-					mode="multiple"
-					options={options}
+					multiple
+					items={options}
 					loading={isFetching}
 					className="config-select-option"
-					onSearch={handleSearch}
-					maxTagCount={4}
-					maxTagPlaceholder={SelectMaxTagPlaceholder}
 					value={getValuesFromQueryParams(QueryParams.taskName, urlQuery) || []}
-					notFoundContent={
-						isFetching ? (
-							<span>
-								<Spin size="small" /> Loading...
-							</span>
-						) : (
-							<span>No Task Name found</span>
-						)
-					}
+					emptyPlaceholder="No Task Name found"
 					onChange={(value): void => {
 						handleSearch('');
 						setQueryParamsFromOptions(
-							value,
+							value as string[],
 							urlQuery,
 							history,
 							location,

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import type { DefaultOptionType } from 'antd/es/select';
+import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
 import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -21,7 +21,7 @@ export interface Filters {
 }
 
 export interface GetAllFiltersResponse {
-	options: DefaultOptionType[];
+	options: ComboboxSimpleItem[];
 	isFetching: boolean;
 }
 

frontend/src/components/CeleryTask/useCeleryFilterOptions.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { DefaultOptionType } from 'antd/es/select';
+import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
@@ -17,7 +17,7 @@ export const useCeleryFilterOptions = (
 	searchText: string;
 	handleSearch: (value: string) => void;
 	isFetching: boolean;
-	options: DefaultOptionType[];
+	options: ComboboxSimpleItem[];
 } => {
 	const [searchText, setSearchText] = useState<string>('');
 	const { isFetching, options } = useGetAllFilters({

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -9,7 +9,8 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Select, Tooltip } from 'antd';
+// oxlint-disable-next-line signoz/no-antd-components This component for now is too complex to be migrated in one PR
+import { Select, Tag, Tooltip } from 'antd';
 import {
 	OPERATORS,
 	QUERY_BUILDER_OPERATORS_BY_TYPES,
@@ -51,7 +52,6 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './ClientSideQBSearch.styles.scss';
-import { Badge } from '@signozhq/ui/badge';
 
 export interface AttributeKey {
 	key: string;
@@ -548,14 +548,10 @@ function ClientSideQBSearch(
 
 		return (
 			<span className="qb-search-bar-tokenised-tags">
-				<Badge
-					color="vanilla"
-					className={tagDetails?.key?.type || ''}
+				<Tag
 					closable={!searchValue && closable}
-					onClose={(e): void => {
-						e.preventDefault();
-						onCloseHandler();
-					}}
+					onClose={onCloseHandler}
+					className={tagDetails?.key?.type || ''}
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
@@ -571,7 +567,7 @@ function ClientSideQBSearch(
 							{chipValue}
 						</TypographyText>
 					</Tooltip>
-				</Badge>
+				</Tag>
 			</span>
 		);
 	};

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -359,7 +359,8 @@ function CustomTimePickerPopoverContent({
 						<Clock
 							color={Color.BG_ROBIN_400}
 							className="timezone-container__clock-icon"
-							size={14}
+							height={12}
+							width={12}
 						/>
 
 						<span className="timezone__name">{timezone.name}</span>

frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss

@@ -41,22 +41,14 @@ $item-spacing: 8px;
 		width: 100%;
 		background: transparent;
 		border: none;
-		border-radius: 0;
-		box-shadow: none;
 		outline: none;
-		height: auto;
 		color: var(--l1-foreground);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		padding: 0;
-
-		&:focus,
-		&:focus-visible,
-		&:hover {
-			border: none;
+		&.ant-input:focus {
 			box-shadow: none;
-			outline: none;
 		}
 
 		&::placeholder {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Modal } from 'antd';
+import { Button, Modal, Tag } from 'antd';
 import { CircleAlert, X } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';
@@ -9,7 +9,6 @@ import APIError from 'types/api/error';
 import ErrorContent from './components/ErrorContent';
 
 import './ErrorModal.styles.scss';
-import { Badge } from '@signozhq/ui/badge';
 
 type Props = {
 	error: APIError;
@@ -46,17 +45,14 @@ function ErrorModal({
 	return (
 		<>
 			{!triggerComponent ? (
-				<span
+				<Tag
 					className="error-modal__trigger"
-					role="button"
-					tabIndex={0}
+					icon={<CircleAlert size={14} color={Color.BG_CHERRY_500} />}
+					color="error"
 					onClick={(): void => setVisible(true)}
-					onKeyDown={undefined}
 				>
-					<Badge color="error">
-						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
-					</Badge>
-				</span>
+					error
+				</Tag>
 			) : (
 				React.cloneElement(triggerComponent, {
 					onClick: () => setVisible(true),

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button, Col, Popover, Row, Select, Space } from 'antd';
+import { Button, Col, Popover, Row, Space } from 'antd';
 import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -23,11 +24,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { ExploreHeaderToolTip, SaveButtonText } from './constants';
 import MenuItemGenerator from './MenuItemGenerator';
 import SaveViewWithName from './SaveViewWithName';
-import {
-	DropDownOverlay,
-	ExplorerCardHeadContainer,
-	OffSetCol,
-} from './styles';
+import { ExplorerCardHeadContainer, OffSetCol } from './styles';
 import { ExplorerCardProps } from './types';
 import { deleteViewHandler } from './utils';
 import { Ellipsis, Save, Share2, Trash2 } from '@signozhq/icons';
@@ -156,6 +153,26 @@ function ExplorerCard({
 
 	const showSaveView = false;
 
+	const viewItems = useMemo(
+		() =>
+			(viewsData?.data.data ?? []).map((view) => ({
+				value: view.name,
+				label: (
+					<MenuItemGenerator
+						viewName={view.name}
+						viewKey={viewKey}
+						createdBy={view.createdBy}
+						uuid={view.id}
+						refetchAllView={refetchAllView}
+						viewData={viewsData?.data.data ?? []}
+						sourcePage={sourcepage}
+					/>
+				),
+				displayValue: view.name,
+			})),
+		[refetchAllView, sourcepage, viewKey, viewsData?.data.data],
+	);
+
 	return (
 		<>
 			{showSaveView && (
@@ -175,30 +192,12 @@ function ExplorerCard({
 							<Space size="large">
 								{viewsData?.data.data && viewsData?.data.data.length && (
 									<Space>
-										<Select
-											getPopupContainer={popupContainer}
+										<ComboboxSimple
 											loading={isLoading || isRefetching}
-											showSearch
 											placeholder="Select a view"
-											dropdownStyle={DropDownOverlay}
-											dropdownMatchSelectWidth={false}
-											optionLabelProp="value"
+											items={viewItems}
 											value={viewName || undefined}
-										>
-											{viewsData?.data.data.map((view) => (
-												<Select.Option key={view.id} value={view.name}>
-													<MenuItemGenerator
-														viewName={view.name}
-														viewKey={viewKey}
-														createdBy={view.createdBy}
-														uuid={view.id}
-														refetchAllView={refetchAllView}
-														viewData={viewsData.data.data}
-														sourcePage={sourcepage}
-													/>
-												</Select.Option>
-											))}
-										</Select>
+										/>
 									</Space>
 								)}
 								{isQueryUpdated && (

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Card, Form } from 'antd';
+import { Card, Form, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -27,15 +27,13 @@ function SortableField({
 	field,
 	onRemove,
 	allowDrag,
-	isRequired,
 }: {
 	field: TelemetryFieldKey;
 	onRemove: (field: TelemetryFieldKey) => void;
 	allowDrag: boolean;
-	isRequired: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: field.key as string });
+		useSortable({ id: field.name });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -55,17 +53,15 @@ function SortableField({
 				{allowDrag && <GripVertical size={14} />}
 				<span className={styles.fieldKey}>{field.name}</span>
 			</div>
-			{!isRequired && (
-				<Button
-					className={cx(styles.removeBtn, 'periscope-btn')}
-					variant="outlined"
-					color="destructive"
-					size="sm"
-					onClick={(): void => onRemove(field)}
-				>
-					Remove
-				</Button>
-			)}
+			<Button
+				className={cx(styles.removeBtn, 'periscope-btn')}
+				variant="outlined"
+				color="destructive"
+				size="sm"
+				onClick={(): void => onRemove(field)}
+			>
+				Remove
+			</Button>
 		</div>
 	);
 }
@@ -75,7 +71,6 @@ interface AddedFieldsProps {
 	fields: TelemetryFieldKey[];
 	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
 	maxFields?: number;
-	requiredFields?: readonly string[];
 }
 
 function AddedFields({
@@ -83,18 +78,14 @@ function AddedFields({
 	fields,
 	onFieldsChange,
 	maxFields,
-	requiredFields = [],
 }: AddedFieldsProps): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
-	// Contract: caller (FieldsSelector) normalizes `fields` so every entry has
-	// `.key` populated. AddedFields reads it directly.
-
 	const handleDragEnd = (event: DragEndEvent): void => {
 		const { active, over } = event;
 		if (over && active.id !== over.id) {
-			const oldIndex = fields.findIndex((f) => f.key === active.id);
-			const newIndex = fields.findIndex((f) => f.key === over.id);
+			const oldIndex = fields.findIndex((f) => f.name === active.id);
+			const newIndex = fields.findIndex((f) => f.name === over.id);
 			onFieldsChange(arrayMove(fields, oldIndex, newIndex));
 		}
 	};
@@ -108,7 +99,7 @@ function AddedFields({
 	);
 
 	const handleRemove = (field: TelemetryFieldKey): void => {
-		onFieldsChange(fields.filter((f) => f.key !== field.key));
+		onFieldsChange(fields.filter((f) => f.name !== field.name));
 	};
 
 	const allowDrag = inputValue.length === 0;
@@ -134,17 +125,16 @@ function AddedFields({
 							<div className={styles.noValues}>No values found</div>
 						) : (
 							<SortableContext
-								items={fields.map((f) => f.key as string)}
+								items={fields.map((f) => f.name)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>
 								{filteredFields.map((field) => (
 									<SortableField
-										key={field.key}
+										key={field.name}
 										field={field}
 										onRemove={handleRemove}
 										allowDrag={allowDrag}
-										isRequired={requiredFields.includes(field.key as string)}
 									/>
 								))}
 							</SortableContext>

frontend/src/components/FieldsSelector/FieldsSelector.module.scss

@@ -76,8 +76,11 @@
 	min-height: 0;
 	overflow: hidden;
 
+	// Ant Skeleton.Input rendered inside the loading state — override its
+	// hard-coded width.
 	:global(.ant-skeleton-input) {
-		width: 50% !important;
+		width: 300px;
+		margin: 8px 12px;
 	}
 }
 
@@ -92,8 +95,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	height: 36px;
-	padding: 0 12px;
+	padding: 6px 12px;
 	border-radius: 4px;
 	user-select: none;
 	font-size: 13px;
@@ -130,7 +132,7 @@
 }
 
 .isDragDisabled {
-	cursor: default;
+	padding: 6px 12px;
 }
 
 .otherFieldItem {

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -5,7 +5,6 @@ import { Input } from '@signozhq/ui/input';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { FloatingPanel } from 'periscope/components/FloatingPanel';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -27,36 +26,33 @@ interface FieldsSelectorProps {
 	onClose: () => void;
 	signal: DataSource;
 	maxFields?: number;
-	requiredFields?: readonly string[];
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
 }
 
-type FieldsSelectorContentProps = Omit<FieldsSelectorProps, 'isOpen'>;
-
-// Inner component: holds all hooks + UI. Gets mounted/unmounted via the
-// outer gate so opening always seeds a fresh draft from `fields`.
-// Assumes `fields` arrives normalized (key populated) — see outer gate.
-function FieldsSelectorContent({
+function FieldsSelector({
+	isOpen,
 	title,
 	fields,
 	onFieldsChange,
 	onClose,
 	signal,
 	maxFields,
-	requiredFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
-}: FieldsSelectorContentProps): JSX.Element {
+}: FieldsSelectorProps): JSX.Element | null {
+	if (!isOpen) {
+		return null;
+	}
+
 	const resolvedHeight =
 		height ?? window.innerHeight - DEFAULT_PANEL_HEIGHT_OFFSET;
 	const resolvedPosition = defaultPosition ?? {
 		x: window.innerWidth - width - DEFAULT_PANEL_RIGHT_INSET,
 		y: DEFAULT_PANEL_TOP_INSET,
 	};
-
 	const [draftFields, setDraftFields] = useState<TelemetryFieldKey[]>(fields);
 	const [inputValue, setInputValue] = useState('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState('');
@@ -76,17 +72,15 @@ function FieldsSelectorContent({
 
 	const handleAdd = useCallback(
 		(field: TelemetryFieldKey): void => {
-			setDraftFields((prev) => {
-				if (maxFields !== undefined && prev.length >= maxFields) {
-					return prev;
-				}
-				if (prev.some((f) => f.key === field.key)) {
-					return prev;
-				}
-				return [...prev, field];
-			});
+			if (maxFields !== undefined && draftFields.length >= maxFields) {
+				return;
+			}
+			if (draftFields.some((f) => f.name === field.name)) {
+				return;
+			}
+			setDraftFields((prev) => [...prev, field]);
 		},
-		[maxFields],
+		[draftFields, maxFields],
 	);
 
 	const handleSave = useCallback((): void => {
@@ -105,7 +99,7 @@ function FieldsSelectorContent({
 		() =>
 			!(
 				draftFields.length === fields.length &&
-				draftFields.every((f, i) => f.key === fields[i]?.key)
+				draftFields.every((f, i) => f.name === fields[i]?.name)
 			),
 		[draftFields, fields],
 	);
@@ -144,7 +138,6 @@ function FieldsSelectorContent({
 					fields={draftFields}
 					onFieldsChange={setDraftFields}
 					maxFields={maxFields}
-					requiredFields={requiredFields}
 				/>
 
 				<OtherFields
@@ -180,27 +173,4 @@ function FieldsSelectorContent({
 	);
 }
 
-// Outer gate: normalizes `fields` once (populates `key` so downstream code
-// can read it directly) and decides whether the inner component renders.
-// When isOpen flips false→true, the inner remounts → draft state seeds fresh.
-function FieldsSelector({
-	isOpen,
-	fields,
-	...rest
-}: FieldsSelectorProps): JSX.Element | null {
-	const normalizedFields = useMemo<TelemetryFieldKey[]>(
-		() =>
-			fields.map((f) => ({
-				...f,
-				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
-			})),
-		[fields],
-	);
-
-	if (!isOpen) {
-		return null;
-	}
-	return <FieldsSelectorContent {...rest} fields={normalizedFields} />;
-}
-
 export default FieldsSelector;

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -4,7 +4,6 @@ import { Skeleton } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import {
 	FieldContext,
@@ -48,22 +47,15 @@ function OtherFields({
 
 	const otherFields: TelemetryFieldKey[] = useMemo(() => {
 		const suggestions = Object.values(data?.data.data.keys || {}).flat();
-		// Normalize: synthesize `key` once so downstream reads can trust it.
-		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
-			(attr) => ({
+		const addedNames = new Set(addedFields.map((f) => f.name));
+		return suggestions
+			.filter((attr) => !addedNames.has(attr.name))
+			.map((attr) => ({
 				...attr,
-				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
 				fieldDataType: attr.fieldDataType as FieldDataType,
-			}),
-		);
-		const addedIds = new Set(
-			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
-		);
-		return normalizedSuggestions.filter(
-			(attr) => !addedIds.has(attr.key as string),
-		);
+			}));
 	}, [data, addedFields]);
 
 	if (isFetching) {
@@ -72,13 +64,8 @@ function OtherFields({
 				<div className={styles.sectionHeader}>OTHER FIELDS</div>
 				<div className={styles.otherList}>
 					{Array.from({ length: 5 }).map((_, i) => (
-						<div
-							// eslint-disable-next-line react/no-array-index-key
-							key={i}
-							className={cx(styles.fieldItem, styles.otherFieldItem)}
-						>
-							<Skeleton.Input active size="small" block />
-						</div>
+						// eslint-disable-next-line react/no-array-index-key
+						<Skeleton.Input active size="small" key={i} />
 					))}
 				</div>
 			</div>
@@ -96,7 +83,7 @@ function OtherFields({
 						) : (
 							otherFields.map((attr) => (
 								<div
-									key={attr.key}
+									key={attr.name}
 									className={cx(styles.fieldItem, styles.otherFieldItem)}
 								>
 									<span className={styles.fieldKey}>{attr.name}</span>

frontend/src/components/FieldsSelector/__tests__/AddedFields.test.tsx

@@ -1,111 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-import AddedFields from '../AddedFields';
-
-// AddedFields assumes the caller has populated `key` (the parent
-// FieldsSelector does this via its normalization useMemo). Tests pre-populate
-// it directly.
-const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
-	name,
-	signal: 'logs',
-	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
-	fieldDataType: 'string',
-	key: `${fieldContext}.${name}`,
-});
-
-describe('AddedFields — requiredFields', () => {
-	it('renders a Remove button for every field when no requiredFields are passed', () => {
-		const fields = [makeField('a'), makeField('b'), makeField('c')];
-
-		render(
-			<AddedFields inputValue="" fields={fields} onFieldsChange={jest.fn()} />,
-		);
-
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(3);
-	});
-
-	it('hides the Remove button for fields whose composite key is in requiredFields', () => {
-		const fields = [makeField('a'), makeField('b'), makeField('c')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.a', 'log.c']}
-			/>,
-		);
-
-		// Only 'b' is removable.
-		const removeButtons = screen.getAllByRole('button', { name: /remove/i });
-		expect(removeButtons).toHaveLength(1);
-	});
-
-	it('still renders the field name for required fields', () => {
-		const fields = [makeField('a'), makeField('b')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.a']}
-			/>,
-		);
-
-		expect(screen.getByText('a')).toBeInTheDocument();
-		expect(screen.getByText('b')).toBeInTheDocument();
-	});
-
-	it('locks ONLY the canonical variant — a same-name field from another context stays removable', () => {
-		// Two `body` fields with different contexts. requiredFields holds the
-		// canonical composite key only, so the attribute variant is deletable.
-		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
-			/>,
-		);
-
-		// One Remove button: the attribute variant. log variant is locked.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
-	});
-
-	it('does not lock anything when a bare name is passed (composite key required)', () => {
-		// Bare `body` no longer matches — matching is composite-key only now.
-		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['body']}
-			/>,
-		);
-
-		// Neither variant locked → both removable.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(2);
-	});
-
-	it('treats requiredFields as exact composite-key match (substring does not lock)', () => {
-		const fields = [makeField('body'), makeField('body_extra')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
-			/>,
-		);
-
-		// 'log.body' locked, 'log.body_extra' removable.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
-	});
-});

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -1,10 +1,8 @@
 import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Dot } from '@signozhq/icons';
+import { Dot, Sparkles } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
-import Noz from 'components/Noz/Noz';
-import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 import { Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { AIAssistantEvents } from 'container/AIAssistant/events';
@@ -23,7 +21,6 @@ import FeedbackModal from './FeedbackModal';
 import ShareURLModal from './ShareURLModal';
 
 import './HeaderRightSection.styles.scss';
-import { Typography } from '@signozhq/ui/typography';
 
 interface HeaderRightSectionProps {
 	enableAnnouncements: boolean;
@@ -110,22 +107,21 @@ function HeaderRightSection({
 						</span>
 					) : null}
 
-					<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
+					<TooltipSimple title="AI Assistant">
 						<Button
 							variant="solid"
 							color="secondary"
-							className="noz-wave"
 							onClick={handleOpenAIAssistant}
 							aria-label={
 								showHeaderPendingBadge
 									? pendingUserInputCount === 1
-										? 'Open Noz, 1 action needs your response'
-										: `Open Noz, ${pendingUserInputCount} actions need your response`
-									: 'Open Noz'
+										? 'Open AI Assistant, 1 action needs your response'
+										: `Open AI Assistant, ${pendingUserInputCount} actions need your response`
+									: 'Open AI Assistant'
 							}
-							prefix={<Noz size={20} />}
+							prefix={<Sparkles size={14} color="var(--primary)" />}
 						>
-							<Typography.Text>Noz</Typography.Text>
+							AI Assistant
 						</Button>
 					</TooltipSimple>
 				</div>

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

@@ -20,9 +20,9 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		color: var(--l2-foreground);
+		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));
 
 		display: flex;
 		justify-content: flex-start;
@@ -35,21 +35,28 @@
 		min-width: 150px;
 		font-family: 'Space Mono', monospace !important;
 
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		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));
+		color: var(--input-with-label-color, var(--l2-foreground));
 
-		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: 27px;
+		line-height: 25px;
+
+		&.input__has-label-after {
+			border-left: none;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+		}
+
+		&.input__has-close-button {
+			border-right: none;
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+		}
 
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--input-with-label-color, var(--l3-foreground)) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -63,25 +70,24 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		height: 38px;
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		height: 100%;
 		width: 38px;
 	}
 
 	&.labelAfter {
 		.input {
-			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			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-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}
 
 		.label {
 			border-left: none;
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
+			border-radius: 0px 2px 2px 0px;
 		}
 	}
 }

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';
@@ -45,7 +44,10 @@ function InputWithLabel({
 		>
 			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			<Input
-				className="input"
+				className={cx('input', {
+					'input__has-label-after': !labelAfter,
+					'input__has-close-button': !!onClose,
+				})}
 				placeholder={placeholder}
 				type={type}
 				value={inputValue}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Style } from '@signozhq/design-tokens';
-import { ChevronDown, Plus, Trash2, X } from '@signozhq/icons';
+import { Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
 import { toast } from '@signozhq/ui/sonner';
-import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { cloneDeep, debounce } from 'lodash-es';
@@ -15,7 +15,6 @@ import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
 import { getBaseUrl } from 'utils/basePath';
-import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './InviteMembersModal.styles.scss';
@@ -254,18 +253,17 @@ function InviteMembersModal({
 										)}
 									</div>
 									<div className="team-member-cell role-cell">
-										<Select
+										<SelectSimple
 											value={row.role || undefined}
 											onChange={(role): void => updateRole(row.id, role as ROLES)}
 											className="team-member-role-select"
 											placeholder="Select roles"
-											suffixIcon={<ChevronDown size={14} />}
-											getPopupContainer={popupContainer}
-										>
-											<Select.Option value="VIEWER">Viewer</Select.Option>
-											<Select.Option value="EDITOR">Editor</Select.Option>
-											<Select.Option value="ADMIN">Admin</Select.Option>
-										</Select>
+											items={[
+												{ value: 'VIEWER', label: 'Viewer' },
+												{ value: 'EDITOR', label: 'Editor' },
+												{ value: 'ADMIN', label: 'Admin' },
+											]}
+										/>
 									</div>
 									<div className="team-member-cell action-cell">
 										{rows.length > 1 && (

frontend/src/components/Logs/TableView/__tests__/useLogsTableColumns.test.tsx

@@ -1,145 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-import { IField } from 'types/api/logs/fields';
-
-import { useLogsTableColumns } from '../useLogsTableColumns';
-
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): { formatTimezoneAdjustedTimestamp: jest.Mock } => ({
-		formatTimezoneAdjustedTimestamp: jest.fn(() => 'TS'),
-	}),
-}));
-
-const field = (name: string, type = ''): IField => ({
-	name,
-	type,
-	dataType: 'string',
-});
-
-describe('useLogsTableColumns — selectColumns-order respected', () => {
-	it('prepends stateIndicator and renders user fields in array order', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('c'), field('a'), field('b')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'c',
-			'a',
-			'b',
-		]);
-	});
-
-	it('slots body and timestamp at their position in the fields array', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [
-					field('service.name'),
-					field('body', 'log'),
-					field('request.id'),
-					field('timestamp', 'log'),
-				],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		// body/timestamp appear where the caller placed them, keyed by their
-		// composite IDs ('log.*'); contextless user fields collapse to bare name.
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'service.name',
-			'log.body',
-			'request.id',
-			'log.timestamp',
-		]);
-	});
-
-	it('renders a same-name field from another context as a DISTINCT column (no collision)', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('body', 'log'), field('body', 'attribute')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// Attribute variant is its own column, not a duplicate 'log.body'.
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'log.body',
-			'attribute.body',
-		]);
-		expect(byId.get('log.body')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
-	});
-
-	it('applies the same distinct-column treatment to timestamp variants', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('timestamp', 'log'), field('timestamp', 'attribute')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'log.timestamp',
-			'attribute.timestamp',
-		]);
-		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
-	});
-
-	it('skips the synthetic "id" field name', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('id'), field('a'), field('b')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'a',
-			'b',
-		]);
-	});
-
-	it('uses the special body/timestamp coldefs (canBeHidden=false), not the generic user field def', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [
-					field('body', 'log'),
-					field('timestamp', 'log'),
-					field('user_field'),
-				],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// body + timestamp are locked from the table-X removal pathway.
-		expect(byId.get('log.body')?.canBeHidden).toBe(false);
-		expect(byId.get('log.body')?.enableRemove).toBe(false);
-		expect(byId.get('log.timestamp')?.canBeHidden).toBe(false);
-		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
-		// User-added fields stay removable. User field has type='' so composite
-		// collapses to bare name.
-		expect(byId.get('user_field')?.enableRemove).toBe(true);
-	});
-
-	it('renders only the stateIndicator when fields is empty', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual(['state-indicator']);
-	});
-});

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -7,7 +7,6 @@ import {
 	getSanitizedLogBody,
 } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
 import { IField } from 'types/api/logs/fields';
@@ -19,11 +18,13 @@ import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 type UseLogsTableColumnsProps = {
 	fields: IField[];
 	fontSize: FontSize;
+	appendTo?: 'center' | 'end';
 };
 
 export function useLogsTableColumns({
 	fields,
 	fontSize,
+	appendTo = 'center',
 }: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
@@ -46,74 +47,71 @@ export function useLogsTableColumns({
 			),
 		};
 
-		const timestampCol: TableColumnDef<ILog> = {
-			id: buildCompositeKey('timestamp', 'log'),
-			header: 'Timestamp',
-			accessorFn: (log): unknown => log.timestamp,
-			canBeHidden: false,
-			enableRemove: false,
-			width: { default: 170, min: 170 },
-			cell: ({ value }): ReactElement => {
-				const ts = value as string | number;
-				const formatted =
-					typeof ts === 'string'
-						? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-						: formatTimezoneAdjustedTimestamp(
-								ts / 1e6,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							);
-				return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
-			},
-		};
+		const fieldColumns: TableColumnDef<ILog>[] = fields
+			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
+			.map(
+				(f): TableColumnDef<ILog> => ({
+					id: f.name,
+					header: f.name,
+					accessorFn: (log): unknown => FlatLogData(log)[f.name],
+					enableRemove: true,
+					width: { min: 192 },
+					cell: ({ value }): ReactElement => (
+						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+					),
+				}),
+			);
 
-		const bodyCol: TableColumnDef<ILog> = {
-			id: buildCompositeKey('body', 'log'),
-			header: 'Body',
-			accessorFn: (log): string => getBodyDisplayString(log.body),
-			canBeHidden: false,
-			enableRemove: false,
-			width: { default: '100%', min: 300 },
-			cell: ({ value, isActive }): ReactElement => (
-				<TanStackTable.Text
-					dangerouslySetInnerHTML={{
-						__html: getSanitizedLogBody(value as string, {
-							shouldEscapeHtml: true,
-						}),
-					}}
-					data-active={isActive}
-				/>
-			),
-		};
-
-		const makeUserFieldCol = (f: IField): TableColumnDef<ILog> => ({
-			id: buildCompositeKey(f.name, f.type),
-			header: f.name,
-			accessorFn: (log): unknown => FlatLogData(log)[f.name],
-			enableRemove: true,
-			width: { min: 192 },
-			cell: ({ value }): ReactElement => (
-				<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-			),
-		});
-
-		// Match body/timestamp by composite key, not bare name — else a variant
-		// like `attribute.body` collapses onto `log.body`, duplicating the column.
-		const fieldCols = fields
-			.map((f): TableColumnDef<ILog> | null => {
-				if (f.name === 'id') {
-					return null;
+		const timestampCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'timestamp',
+		)
+			? {
+					id: 'timestamp',
+					header: 'Timestamp',
+					accessorFn: (log): unknown => log.timestamp,
+					width: { default: 170, min: 170 },
+					cell: ({ value }): ReactElement => {
+						const ts = value as string | number;
+						const formatted =
+							typeof ts === 'string'
+								? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
+								: formatTimezoneAdjustedTimestamp(
+										ts / 1e6,
+										DATE_TIME_FORMATS.ISO_DATETIME_MS,
+									);
+						return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
+					},
 				}
-				const compositeKey = buildCompositeKey(f.name, f.type);
-				if (compositeKey === timestampCol.id) {
-					return timestampCol;
-				}
-				if (compositeKey === bodyCol.id) {
-					return bodyCol;
-				}
-				return makeUserFieldCol(f);
-			})
-			.filter((c): c is TableColumnDef<ILog> => c !== null);
+			: null;
 
-		return [stateIndicatorCol, ...fieldCols];
-	}, [fields, fontSize, formatTimezoneAdjustedTimestamp]);
+		const bodyCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'body',
+		)
+			? {
+					id: 'body',
+					header: 'Body',
+					accessorFn: (log): string => getBodyDisplayString(log.body),
+					canBeHidden: false,
+					width: { default: '100%', min: 300 },
+					cell: ({ value, isActive }): ReactElement => (
+						<TanStackTable.Text
+							dangerouslySetInnerHTML={{
+								__html: getSanitizedLogBody(value as string, {
+									shouldEscapeHtml: true,
+								}),
+							}}
+							data-active={isActive}
+						/>
+					),
+				}
+			: null;
+
+		return [
+			stateIndicatorCol,
+			...(timestampCol ? [timestampCol] : []),
+			...(appendTo === 'center' ? fieldColumns : []),
+			...(bodyCol ? [bodyCol] : []),
+			...(appendTo === 'end' ? fieldColumns : []),
+		];
+	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
 }

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -256,34 +256,6 @@
 				}
 			}
 
-			.edit-columns-container {
-				padding: 12px;
-
-				.edit-columns-btn {
-					display: flex;
-					width: 100%;
-					height: 20px;
-					padding: 4px 0px;
-					justify-content: space-between;
-					align-items: center;
-					border: none !important;
-
-					.edit-columns-text {
-						color: var(--l2-foreground);
-						font-family: Inter;
-						font-size: 13px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: normal;
-						letter-spacing: 0.14px;
-					}
-				}
-
-				.edit-columns-btn:hover {
-					background-color: unset !important;
-				}
-			}
-
 			.add-new-column-container {
 				display: flex;
 				flex-direction: column;

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,9 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Button, InputNumber, Popover, Tooltip } from 'antd';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
 import {
 	Check,
 	ChevronLeft,
@@ -11,6 +13,7 @@ import {
 	Minus,
 	Plus,
 	SlidersVertical,
+	X,
 } from '@signozhq/icons';
 
 import './LogsFormatOptionsMenu.styles.scss';
@@ -19,21 +22,14 @@ interface LogsFormatOptionsMenuProps {
 	items: any;
 	selectedOptionFormat: any;
 	config: OptionsMenuConfig;
-	onOpenColumns?: () => void;
-}
-
-interface OptionsMenuContentProps extends LogsFormatOptionsMenuProps {
-	closePopover: () => void;
 }
 
 function OptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
-	onOpenColumns,
-	closePopover,
-}: OptionsMenuContentProps): JSX.Element {
-	const { maxLines, format, fontSize } = config;
+}: LogsFormatOptionsMenuProps): JSX.Element {
+	const { maxLines, format, addColumn, fontSize } = config;
 	const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
 	const maxLinesNumber = (maxLines?.value as number) || 1;
 	const [maxLinesPerRow, setMaxLinesPerRow] = useState<number>(maxLinesNumber);
@@ -43,6 +39,13 @@ function OptionsMenu({
 	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] =
 		useState<boolean>(false);
 
+	const [showAddNewColumnContainer, setShowAddNewColumnContainer] =
+		useState(false);
+
+	const [selectedValue, setSelectedValue] = useState<string | null>(null);
+	const listRef = useRef<HTMLDivElement>(null);
+	const initialMouseEnterRef = useRef<boolean>(false);
+
 	const onChange = useCallback(
 		(key: LogViewMode) => {
 			if (!format) {
@@ -57,6 +60,7 @@ function OptionsMenu({
 	const handleMenuItemClick = (key: LogViewMode): void => {
 		setSelectedItem(key);
 		onChange(key);
+		setShowAddNewColumnContainer(false);
 	};
 
 	const incrementMaxLinesPerRow = (): void => {
@@ -71,6 +75,20 @@ function OptionsMenu({
 		}
 	};
 
+	const handleSearchValueChange = useDebouncedFn((event): void => {
+		// @ts-expect-error
+		const value = event?.target?.value || '';
+
+		if (addColumn && addColumn?.onSearch) {
+			addColumn?.onSearch(value);
+		}
+	}, 300);
+
+	const handleToggleAddNewColumn = (): void => {
+		addColumn?.onSearch?.('');
+		setShowAddNewColumnContainer(!showAddNewColumnContainer);
+	};
+
 	const handleLinesPerRowChange = (maxLinesPerRow: number | null): void => {
 		if (
 			maxLinesPerRow &&
@@ -81,11 +99,6 @@ function OptionsMenu({
 		}
 	};
 
-	const handleEditColumns = (): void => {
-		onOpenColumns?.();
-		closePopover();
-	};
-
 	useEffect(() => {
 		if (maxLinesPerRow && config && config.maxLines?.onChange) {
 			config.maxLines.onChange(maxLinesPerRow);
@@ -98,10 +111,106 @@ function OptionsMenu({
 		}
 	}, [fontSizeValue]);
 
+	function handleColumnSelection(
+		currentIndex: number,
+		optionsData: ComboboxSimpleItem[],
+	): void {
+		const itemLength = optionsData.length;
+		if (addColumn && addColumn?.onSelect && selectedValue) {
+			addColumn?.onSelect(selectedValue);
+
+			// if the last element is selected then select the previous one
+			if (currentIndex === itemLength - 1) {
+				// there should be more than 1 element in the list
+				if (currentIndex - 1 >= 0) {
+					const prevValue = optionsData[currentIndex - 1]?.value || null;
+					setSelectedValue(prevValue as string | null);
+				} else {
+					// if there is only one element then just select and do nothing
+					setSelectedValue(null);
+				}
+			} else {
+				// selecting any random element from the list except the last one
+				const nextIndex = currentIndex + 1;
+
+				const nextValue = optionsData[nextIndex]?.value || null;
+
+				setSelectedValue(nextValue as string | null);
+			}
+		}
+	}
+
+	const handleKeyDown = (e: KeyboardEvent): void => {
+		if (!selectedValue) {
+			return;
+		}
+
+		const optionsData = addColumn?.options || [];
+
+		const currentIndex = optionsData.findIndex(
+			(item) => item?.value === selectedValue,
+		);
+
+		const itemLength = optionsData.length;
+
+		switch (e.key) {
+			case 'ArrowUp': {
+				const newValue = optionsData[Math.max(0, currentIndex - 1)]?.value;
+
+				setSelectedValue(newValue as string | null);
+				e.preventDefault();
+				break;
+			}
+			case 'ArrowDown': {
+				const newValue =
+					optionsData[Math.min(itemLength - 1, currentIndex + 1)]?.value;
+
+				setSelectedValue(newValue as string | null);
+				e.preventDefault();
+				break;
+			}
+			case 'Enter':
+				e.preventDefault();
+				handleColumnSelection(currentIndex, optionsData as ComboboxSimpleItem[]);
+				break;
+			default:
+				break;
+		}
+	};
+
+	useEffect(() => {
+		// Scroll the selected item into view
+		const listNode = listRef.current;
+		if (listNode && selectedValue) {
+			const optionsData = addColumn?.options || [];
+			const currentIndex = optionsData.findIndex(
+				(item) => item?.value === selectedValue,
+			);
+			const itemNode = listNode.children[currentIndex] as HTMLElement;
+			if (itemNode) {
+				itemNode.scrollIntoView({
+					behavior: 'smooth',
+					block: 'nearest',
+				});
+			}
+		}
+	}, [selectedValue]);
+
+	useEffect(() => {
+		window.addEventListener('keydown', handleKeyDown);
+		return (): void => {
+			window.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [selectedValue]);
+
 	return (
 		<div
-			className="nested-menu-container"
+			className={cx(
+				'nested-menu-container',
+				showAddNewColumnContainer ? 'active' : '',
+			)}
 			onClick={(event): void => {
+				// this is to restrict click events to propogate to parent
 				event.stopPropagation();
 			}}
 		>
@@ -155,7 +264,74 @@ function OptionsMenu({
 						</Button>
 					</div>
 				</div>
-			) : (
+			) : null}
+
+			{showAddNewColumnContainer && (
+				<div className="add-new-column-container">
+					<div className="add-new-column-header">
+						<div className="title">
+							<div className="periscope-btn ghost" onClick={handleToggleAddNewColumn}>
+								<ChevronLeft
+									size={14}
+									className="back-icon"
+									onClick={handleToggleAddNewColumn}
+								/>
+							</div>
+							Add New Column
+						</div>
+
+						<Input
+							tabIndex={0}
+							type="text"
+							autoFocus
+							onFocus={addColumn?.onFocus}
+							onChange={handleSearchValueChange}
+							placeholder="Search..."
+						/>
+					</div>
+
+					<div className="add-new-column-content">
+						{addColumn?.isFetching && (
+							<div className="loading-container"> Loading ... </div>
+						)}
+
+						<div className="column-format-new-options" ref={listRef}>
+							{addColumn?.options?.map(({ label, value }, index) => (
+								<div
+									className={cx('column-name', value === selectedValue && 'selected')}
+									key={value}
+									onMouseEnter={(): void => {
+										if (!initialMouseEnterRef.current) {
+											setSelectedValue(value as string | null);
+										}
+
+										initialMouseEnterRef.current = true;
+									}}
+									onMouseMove={(): void => {
+										// this is added to handle the mouse move explicit event and not the re-rendered on mouse enter event
+										setSelectedValue(value as string | null);
+									}}
+									onClick={(eve): void => {
+										eve.stopPropagation();
+										handleColumnSelection(
+											index,
+											(addColumn?.options || []) as ComboboxSimpleItem[],
+										);
+									}}
+								>
+									<div className="name">
+										<Tooltip placement="left" title={label}>
+											{label}
+										</Tooltip>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				</div>
+			)}
+
+			{!isFontSizeOptionsOpen && !showAddNewColumnContainer && (
 				<div>
 					<div className="font-size-container">
 						<div className="title">Font Size</div>
@@ -195,52 +371,72 @@ function OptionsMenu({
 
 					{selectedItem && (
 						<>
-							<div className="horizontal-line" />
-							<div className="max-lines-per-row">
-								<div className="title"> max lines per row </div>
-								<div className="raw-format max-lines-per-row-input">
-									<button
-										type="button"
-										className="periscope-btn"
-										onClick={decrementMaxLinesPerRow}
-									>
-										{' '}
-										<Minus size={12} />{' '}
-									</button>
-									<InputNumber
-										min={1}
-										max={10}
-										value={maxLinesPerRow}
-										onChange={handleLinesPerRowChange}
-									/>
-									<button
-										type="button"
-										className="periscope-btn"
-										onClick={incrementMaxLinesPerRow}
-									>
-										{' '}
-										<Plus size={12} />{' '}
-									</button>
+							<>
+								<div className="horizontal-line" />
+								<div className="max-lines-per-row">
+									<div className="title"> max lines per row </div>
+									<div className="raw-format max-lines-per-row-input">
+										<button
+											type="button"
+											className="periscope-btn"
+											onClick={decrementMaxLinesPerRow}
+										>
+											{' '}
+											<Minus size={12} />{' '}
+										</button>
+										<InputNumber
+											min={1}
+											max={10}
+											value={maxLinesPerRow}
+											onChange={handleLinesPerRowChange}
+										/>
+										<button
+											type="button"
+											className="periscope-btn"
+											onClick={incrementMaxLinesPerRow}
+										>
+											{' '}
+											<Plus size={12} />{' '}
+										</button>
+									</div>
 								</div>
-							</div>
-						</>
-					)}
+							</>
 
-					{selectedItem === 'table' && onOpenColumns && (
-						<>
-							<div className="horizontal-line" />
-							<div className="edit-columns-container">
-								<Button
-									className="edit-columns-btn"
-									type="text"
-									onClick={handleEditColumns}
-									data-testid="periscope-btn-edit-columns"
-								>
-									<Typography.Text className="edit-columns-text">
-										Edit columns
-									</Typography.Text>
-									<ChevronRight size={14} className="icon" />
-								</Button>
+							<div className="selected-item-content-container active">
+								{!showAddNewColumnContainer && <div className="horizontal-line" />}
+
+								<div className="item-content">
+									{!showAddNewColumnContainer && (
+										<div className="title">
+											columns
+											<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
+										</div>
+									)}
+
+									<div className="column-format">
+										{addColumn?.value?.map(({ name }) => (
+											<div className="column-name" key={name}>
+												<div className="name">
+													<Tooltip placement="left" title={name}>
+														{name}
+													</Tooltip>
+												</div>
+												{addColumn?.value?.length > 1 && (
+													<X
+														className="delete-btn"
+														size={14}
+														onClick={(): void => addColumn.onRemove(name)}
+													/>
+												)}
+											</div>
+										))}
+										{addColumn && addColumn?.value?.length === 0 && (
+											<div className="column-name no-columns-selected">
+												No columns selected
+											</div>
+										)}
+									</div>
+								</div>
 							</div>
 						</>
 					)}
@@ -254,7 +450,6 @@ function LogsFormatOptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
-	onOpenColumns,
 }: LogsFormatOptionsMenuProps): JSX.Element {
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	return (
@@ -264,8 +459,6 @@ function LogsFormatOptionsMenu({
 					items={items}
 					selectedOptionFormat={selectedOptionFormat}
 					config={config}
-					onOpenColumns={onOpenColumns}
-					closePopover={(): void => setIsPopoverOpen(false)}
 				/>
 			}
 			trigger="click"

frontend/src/components/LogsFormatOptionsMenu/__tests__/LogsFormatOptionsMenu.test.tsx

@@ -62,7 +62,6 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 						onSearch: jest.fn(),
 						onSelect: jest.fn(),
 						onRemove: jest.fn(),
-						onReorder: jest.fn(),
 					},
 				}}
 			/>,
@@ -155,66 +154,4 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 			expect(fontSizeOnChange).toHaveBeenCalledWith(FontSize.MEDIUM);
 		});
 	});
-
-	function renderWithOnOpen(
-		onOpenColumns?: jest.Mock,
-		selectedOptionFormat: 'table' | 'raw' | 'list' = 'table',
-	): { getByTestId: ReturnType<typeof render>['getByTestId'] } {
-		const items = [
-			{ key: 'raw', label: 'Raw', data: { title: 'max lines per row' } },
-			{ key: 'list', label: 'Default' },
-			{ key: 'table', label: 'Column', data: { title: 'columns' } },
-		];
-
-		const { getByTestId } = render(
-			<LogsFormatOptionsMenu
-				items={items}
-				selectedOptionFormat={selectedOptionFormat}
-				config={{
-					format: { value: selectedOptionFormat, onChange: jest.fn() },
-					maxLines: { value: 1, onChange: jest.fn() },
-					fontSize: { value: FontSize.SMALL, onChange: jest.fn() },
-				}}
-				onOpenColumns={onOpenColumns}
-			/>,
-		);
-		fireEvent.click(getByTestId('periscope-btn-format-options'));
-		return { getByTestId };
-	}
-
-	it('renders "Edit columns" row when format=table and onOpenColumns provided', () => {
-		const onOpenColumns = jest.fn();
-		const { getByTestId } = renderWithOnOpen(onOpenColumns, 'table');
-
-		expect(getByTestId('periscope-btn-edit-columns')).toBeInTheDocument();
-	});
-
-	it('does not render "Edit columns" row when onOpenColumns is not provided', () => {
-		renderWithOnOpen(undefined, 'table');
-
-		expect(
-			document.querySelector('[data-testid="periscope-btn-edit-columns"]'),
-		).toBeNull();
-	});
-
-	it('does not render "Edit columns" row when format is not table', () => {
-		renderWithOnOpen(jest.fn(), 'raw');
-
-		expect(
-			document.querySelector('[data-testid="periscope-btn-edit-columns"]'),
-		).toBeNull();
-	});
-
-	it('fires onOpenColumns and closes the popover when "Edit columns" is clicked', async () => {
-		const onOpenColumns = jest.fn();
-		const { getByTestId } = renderWithOnOpen(onOpenColumns, 'table');
-
-		fireEvent.click(getByTestId('periscope-btn-edit-columns'));
-
-		expect(onOpenColumns).toHaveBeenCalledTimes(1);
-		await waitFor(() => {
-			// Popover content unmounts on close.
-			expect(document.querySelector('.menu-container')).toBeNull();
-		});
-	});
 });

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -10,7 +10,8 @@ import {
 	Loader,
 	X,
 } from '@signozhq/icons';
-import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
+import { Modal, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -181,8 +182,8 @@ function AttributeCheckList({
 	const [filter, setFilter] = useState<AttributesFilters>(AttributesFilters.ALL);
 	const [treeData, setTreeData] = useState<TreeDataNode[]>([]);
 
-	const handleFilterChange = (value: AttributesFilters): void => {
-		setFilter(value);
+	const handleFilterChange = (value: string | string[]): void => {
+		setFilter(value as AttributesFilters);
 	};
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const history = useHistory();
@@ -237,11 +238,11 @@ function AttributeCheckList({
 				</div>
 			) : (
 				<div className="modal-content">
-					<Select
+					<SelectSimple
 						defaultValue={AttributesFilters.ALL}
 						className="attribute-select"
 						onChange={handleFilterChange}
-						options={[
+						items={[
 							{
 								value: AttributesFilters.ALL,
 								label: AttributeLabels({ title: 'Attributes: All' }),

frontend/src/components/MessagingQueues/MQCommon/MQCommon.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
-import type { DefaultOptionType } from 'antd/es/select';
+import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { Info } from '@signozhq/icons';
 
 import './MQCommon.styles.scss';
@@ -35,7 +35,7 @@ export function ComingSoon(): JSX.Element {
 }
 
 export function SelectMaxTagPlaceholder(
-	omittedValues: Partial<DefaultOptionType>[],
+	omittedValues: Partial<ComboboxSimpleItem>[],
 ): JSX.Element {
 	return (
 		<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -18,8 +18,9 @@ import {
 	RefreshCw,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
+// oxlint-disable-next-line signoz/no-antd-components This component for now is too complex to be migrated in one PR
+import { Button, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -16,6 +16,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
+// oxlint-disable-next-line signoz/no-antd-components This component for now is too complex to be migrated in one PR
 import { Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';

frontend/src/components/NewSelect/styles.scss

@@ -109,16 +109,6 @@ $custom-border-color: #2c3044;
 		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
 	}
 
-	.ant-select-clear {
-		background-color: var(--l2-background);
-		color: var(--l2-foreground);
-		font-size: 12px;
-
-		&:hover {
-			color: var(--l1-foreground);
-		}
-	}
-
 	// Customize tags in multiselect (dark mode by default)
 	.ant-select-selection-item {
 		background-color: var(--l1-border);
@@ -402,9 +392,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	// Tall enough to hold the react-virtuoso list (<=300px) + header/footer
-	// so only the list scrolls (avoids a second scrollbar on this container).
-	max-height: 410px;
+	max-height: 350px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -495,12 +483,8 @@ $custom-border-color: #2c3044;
 		.option-checkbox {
 			width: 100%;
 
-			// @signozhq/ui Checkbox renders children inside a <label> that is
-			// content-sized by default. Make it fill the row (min-width: 0 lets it
-			// shrink) so the option text below can truncate instead of overflowing.
-			> label {
-				flex: 1 1 auto;
-				min-width: 0;
+			> span:not(.ant-checkbox) {
+				width: 100%;
 			}
 
 			.all-option-text {
@@ -517,12 +501,7 @@ $custom-border-color: #2c3044;
 				width: 100%;
 
 				.option-label-text {
-					flex: 1 1 auto;
-					min-width: 0;
 					margin-bottom: 0;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
 				}
 
 				.option-badge {
@@ -535,30 +514,26 @@ $custom-border-color: #2c3044;
 				}
 			}
 
-			// Size the buttons to the row's resting content height (20px) and fully
-			// override antd's default 32px Button box, so revealing them on hover
-			// never changes the row height.
-			.only-btn,
+			.only-btn {
+				display: none;
+			}
 			.toggle-btn {
 				display: none;
-				align-items: center;
-				justify-content: center;
-				height: 18px;
-				min-height: 0;
-				padding: 0 6px;
-				font-size: 12px;
-				line-height: 1;
-				border: none;
-				box-shadow: none;
+			}
 
-				&:hover {
-					background-color: unset;
-				}
+			.only-btn:hover {
+				background-color: unset;
+			}
+			.toggle-btn:hover {
+				background-color: unset;
 			}
 
 			.option-content:hover {
 				.only-btn {
 					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 21px;
 				}
 				.toggle-btn {
 					display: none;
@@ -573,6 +548,9 @@ $custom-border-color: #2c3044;
 		.option-checkbox:hover {
 			.toggle-btn {
 				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 21px;
 			}
 			.option-badge {
 				display: none;

frontend/src/components/Noz/Noz.constants.ts

@@ -1,2 +0,0 @@
-/** Shared hover copy for every Noz entry point (header, floating trigger, sidebar). */
-export const NOZ_TOOLTIP_TITLE = 'Noz, your AI teammate';

frontend/src/components/Noz/Noz.module.scss

@@ -1,86 +0,0 @@
-@keyframes noz-wave-wiggle {
-	0%,
-	100% {
-		transform: rotate(0deg);
-	}
-	25% {
-		transform: rotate(20deg);
-	}
-	75% {
-		transform: rotate(-20deg);
-	}
-}
-
-.noz {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	line-height: 0;
-	overflow: visible;
-
-	svg {
-		display: block;
-		overflow: visible;
-	}
-
-	:global {
-		.noz-arm-left {
-			transform-origin: 4.18383px 13.4752px;
-			transform: rotate(0deg);
-			transition: transform 0.55s cubic-bezier(0.34, 1.7, 0.5, 1);
-			will-change: transform;
-		}
-
-		.noz-arm-wiggle {
-			transform-origin: 4.18383px 13.4752px;
-			transform: rotate(0deg);
-			will-change: transform;
-		}
-
-		.noz-head {
-			transform-origin: 12.02px 18.37px;
-			transform: rotate(0deg);
-			transition: transform 0.5s cubic-bezier(0.34, 1.7, 0.5, 1);
-			will-change: transform;
-		}
-	}
-
-	&:hover {
-		:global(.noz-arm-left) {
-			transform: rotate(145deg) scale(1, 1.7);
-		}
-
-		:global(.noz-arm-wiggle) {
-			animation: noz-wave-wiggle 0.7s ease-in-out 0.2s infinite;
-		}
-
-		:global(.noz-head) {
-			transform: rotate(9deg);
-		}
-	}
-}
-
-:global(.noz-wave):hover {
-	:global(.noz-arm-left) {
-		transform: rotate(145deg) scale(1, 1.7);
-	}
-
-	:global(.noz-arm-wiggle) {
-		animation: noz-wave-wiggle 0.7s ease-in-out 0.2s infinite;
-	}
-
-	:global(.noz-head) {
-		transform: rotate(9deg);
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.noz {
-		:global(.noz-arm-left),
-		:global(.noz-arm-wiggle),
-		:global(.noz-head) {
-			transition: none;
-			animation: none !important;
-		}
-	}
-}

frontend/src/components/Noz/Noz.tsx

@@ -1,100 +0,0 @@
-import cx from 'classnames';
-
-import styles from './Noz.module.scss';
-
-interface NozProps {
-	size?: number;
-	className?: string;
-}
-
-/**
- * Noz — the SigNoz AI assistant mascot. Waves on hover.
- *
- * Hover behavior:
- *  - Hovering the icon itself triggers the wave.
- *  - To make a parent element (e.g. a Button) trigger the wave on its own
- *    hover, add the class `noz-wave` to that parent.
- */
-export default function Noz({ size = 24, className }: NozProps): JSX.Element {
-	return (
-		<span
-			className={cx(styles.noz, className)}
-			style={{ width: size, height: size }}
-			aria-hidden="true"
-		>
-			<svg
-				viewBox="-2 0.5 28 28"
-				width={size}
-				height={size}
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				{/* body */}
-				<rect
-					x="4.35938"
-					y="8.49908"
-					width="15.4569"
-					height="11.978"
-					rx="1.76147"
-					fill="#E5484D"
-				/>
-				{/* legs */}
-				<rect
-					x="6.87012"
-					y="19.0679"
-					width="3.34679"
-					height="3.69908"
-					rx="0.880734"
-					fill="#E5484D"
-				/>
-				<rect
-					x="13.916"
-					y="19.0679"
-					width="3.34679"
-					height="3.69908"
-					rx="0.880734"
-					fill="#E5484D"
-				/>
-				{/* right arm (static) */}
-				<rect
-					x="18.7598"
-					y="13.4752"
-					width="2.11376"
-					height="3.69908"
-					rx="0.880734"
-					fill="#E5484D"
-				/>
-				{/* left arm: outer group does the "lift", inner does the wiggle */}
-				<g className="noz-arm-left">
-					<g className="noz-arm-wiggle">
-						<rect
-							x="3.12695"
-							y="13.4752"
-							width="2.11376"
-							height="3.69908"
-							rx="0.880734"
-							fill="#E5484D"
-						/>
-					</g>
-				</g>
-				{/* head: face + eye + hat tilt together */}
-				<g className="noz-head">
-					<circle cx="12.0217" cy="14.4881" r="3.87523" fill="#F5F5F5" />
-					<path
-						d="M12.0237 12.8024C12.0237 13.7328 11.2673 14.4892 10.337 14.4892C10.0339 14.4892 9.74926 14.4101 9.50152 14.2678C9.47517 14.5551 9.49888 14.8502 9.57795 15.1428C9.93901 16.4921 11.3279 17.2933 12.6773 16.9323C14.0267 16.5712 14.8279 15.1823 14.4668 13.8329C14.1453 12.6285 13.0041 11.8616 11.8023 11.967C11.942 12.2121 12.0237 12.4967 12.0237 12.8024Z"
-						fill="#0A0C10"
-					/>
-					<path
-						d="M8.33833 7.94578L9.83358 4.31319C10.1302 3.59261 10.6676 2.99939 11.355 2.63299L13.9181 1.26684C14.1327 1.15169 14.3804 1.34885 14.3194 1.58439L13.6703 4.06892C13.6511 4.14046 13.6424 4.21374 13.6424 4.28876C13.6424 4.39868 13.6633 4.5086 13.7052 4.61154L15.0382 7.94578H11.4248L11.6307 7.32813L12.3356 7.09259C12.449 7.05421 12.5257 6.94778 12.5257 6.82739C12.5257 6.707 12.449 6.60057 12.3356 6.56218L11.6307 6.32664L11.3951 5.62176C11.3568 5.51009 11.2503 5.43333 11.1299 5.43333C11.0096 5.43333 10.9031 5.5101 10.8647 5.6235L10.6292 6.32839L9.92431 6.56393C9.8109 6.60231 9.73413 6.70874 9.73413 6.82913C9.73413 6.94952 9.8109 7.05595 9.92431 7.09434L10.6292 7.32988L10.8351 7.94752H8.33833V7.94578ZM12.1 3.43558C12.0808 3.378 12.0285 3.33962 11.9674 3.33962C11.9064 3.33962 11.854 3.378 11.8348 3.43558L11.7179 3.78802L11.3655 3.90492C11.3079 3.92411 11.2695 3.97645 11.2695 4.03752C11.2695 4.09859 11.3079 4.15093 11.3655 4.17012L11.7179 4.28702L11.8348 4.63946C11.854 4.69704 11.9064 4.73542 11.9674 4.73542C12.0285 4.73542 12.0808 4.69704 12.1 4.63946L12.2169 4.28702L12.5694 4.17012C12.6269 4.15093 12.6653 4.09859 12.6653 4.03752C12.6653 3.97645 12.6269 3.92411 12.5694 3.90492L12.2169 3.78802L12.1 3.43558ZM7.78 7.91088H15.5965C15.9053 7.91088 16.1548 8.16038 16.1548 8.4692C16.1548 8.77803 15.9053 9.02753 15.5965 9.02753H7.78C7.47118 9.02753 7.22168 8.77803 7.22168 8.4692C7.22168 8.16038 7.47118 7.91088 7.78 7.91088Z"
-						fill="#4E74F8"
-					/>
-				</g>
-			</svg>
-		</span>
-	);
-}
-
-Noz.defaultProps = {
-	size: 24,
-	className: undefined,
-};

frontend/src/components/OrderBy/ListViewOrderBy.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Select, Spin } from 'antd';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
@@ -13,48 +13,25 @@ interface ListViewOrderByProps {
 	dataSource: DataSource;
 }
 
-// Loader component for the dropdown when loading or no results
-function Loader({ isLoading }: { isLoading: boolean }): JSX.Element {
-	return (
-		<div className="order-by-loading-container">
-			{isLoading ? <Spin size="default" /> : 'No results found'}
-		</div>
-	);
-}
-
 function ListViewOrderBy({
 	value,
 	onChange,
 	dataSource,
 }: ListViewOrderByProps): JSX.Element {
-	const [searchInput, setSearchInput] = useState('');
-	const [debouncedInput, setDebouncedInput] = useState('');
-	const [selectOptions, setSelectOptions] = useState<
-		{ label: string; value: string }[]
-	>([]);
-	const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const [selectOptions, setSelectOptions] = useState<ComboboxSimpleItem[]>([]);
 
-	// Fetch key suggestions based on debounced input
+	// Fetch key suggestions once; ComboboxSimple handles local filtering.
 	const { data, isLoading } = useQuery({
-		queryKey: ['orderByKeySuggestions', dataSource, debouncedInput],
+		queryKey: ['orderByKeySuggestions', dataSource],
 		queryFn: async () => {
 			const response = await getKeySuggestions({
 				signal: dataSource,
-				searchText: debouncedInput,
+				searchText: '',
 			});
 			return response.data;
 		},
 	});
 
-	useEffect(
-		() => (): void => {
-			if (debounceTimer.current) {
-				clearTimeout(debounceTimer.current);
-			}
-		},
-		[],
-	);
-
 	// Update options when API data changes
 	useEffect(() => {
 		const rawKeys: QueryKeyDataSuggestionsProps[] = data?.data?.keys
@@ -62,52 +39,33 @@ function ListViewOrderBy({
 			: [];
 
 		const keyNames = rawKeys.map((key) => key.name);
-		const uniqueKeys = [
-			...new Set(searchInput ? keyNames : ['timestamp', ...keyNames]),
-		];
+		const uniqueKeys = [...new Set(['timestamp', ...keyNames])];
 
-		const updatedOptions = uniqueKeys.flatMap((key) => [
+		const updatedOptions: ComboboxSimpleItem[] = uniqueKeys.flatMap((key) => [
 			{ label: `${key} (desc)`, value: `${key}:desc` },
 			{ label: `${key} (asc)`, value: `${key}:asc` },
 		]);
 
 		setSelectOptions(updatedOptions);
-	}, [data, searchInput]);
+	}, [data]);
 
-	// Handle search input with debounce
-	const handleSearch = (input: string): void => {
-		setSearchInput(input);
-
-		// Filter current options for instant client-side match
-		const filteredOptions = selectOptions.filter((option) =>
-			option.value.toLowerCase().includes(input.trim().toLowerCase()),
-		);
-
-		// If no match found or input is empty, trigger debounced fetch
-		if (filteredOptions.length === 0 || input === '') {
-			if (debounceTimer.current) {
-				clearTimeout(debounceTimer.current);
-			}
-
-			debounceTimer.current = setTimeout(() => {
-				setDebouncedInput(input);
-			}, 100);
-		}
-	};
+	const handleChange = useMemo(
+		() =>
+			(val: string | string[]): void => {
+				onChange(val as string);
+			},
+		[onChange],
+	);
 
 	return (
-		<Select
-			showSearch
+		<ComboboxSimple
 			value={value}
-			onChange={onChange}
-			onSearch={handleSearch}
-			notFoundContent={<Loader isLoading={isLoading} />}
+			onChange={handleChange}
+			loading={isLoading}
 			placeholder="Select a field"
 			style={{ width: 200 }}
-			options={selectOptions}
-			filterOption={(input, option): boolean =>
-				(option?.value ?? '').toLowerCase().includes(input.trim().toLowerCase())
-			}
+			items={selectOptions}
+			emptyPlaceholder="No results found"
 		/>
 	);
 }

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

@@ -22,6 +22,37 @@
 	border-right: none;
 	border-left: none;
 
+	--select-trigger-height: 2.25rem;
+	--select-trigger-background-color: var(
+		--query-builder-v2-background-color,
+		var(--l2-background)
+	);
+	--select-trigger-border-color: var(
+		--query-builder-v2-border-color,
+		var(--l2-border)
+	);
+
+	--combobox-trigger-height: 2.25rem;
+	--combobox-trigger-padding: 7px var(--spacing-6);
+	--combobox-trigger-background-color: var(
+		--query-builder-v2-background-color,
+		var(--l2-background)
+	);
+	--combobox-trigger-border-color: var(
+		--query-builder-v2-border-color,
+		var(--l2-border)
+	);
+
+	[data-slot='combobox-trigger'],
+	[data-slot='select-trigger'] {
+		color: var(--query-builder-v2-color, var(--l2-foreground));
+	}
+
+	[data-slot='combobox-placeholder'],
+	[data-slot='select-placeholder'] {
+		color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
+	}
+
 	.qb-content-container {
 		display: flex;
 		flex-direction: column;
@@ -80,8 +111,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--l1-border),
-					var(--l1-border) 4px,
+					var(--query-builder-v2-border-color, var(--l2-border)),
+					var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -101,7 +132,8 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted var(--l1-border);
+					border-left: 6px dotted
+						var(--query-builder-v2-border-color, var(--l2-border));
 				}
 
 				/* Horizontal line pointing from vertical to the item */
@@ -114,8 +146,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -241,7 +273,8 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted var(--l1-border);
+						border-left: 6px dotted
+							var(--query-builder-v2-border-color, var(--l2-border));
 					}
 
 					/* Horizontal line pointing from vertical to the item */
@@ -254,8 +287,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							var(--l1-border),
-							var(--l1-border) 4px,
+							var(--query-builder-v2-border-color, var(--l2-border)),
+							var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -273,6 +306,16 @@
 					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 {
@@ -282,15 +325,30 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--l2-background);
-						color: var(--l2-foreground);
+						background: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						);
+						color: var(--query-builder-v2-color, var(--l2-foreground));
 						font-size: 12px;
 						font-weight: 300;
+
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 					}
 
 					.ant-input {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
+
+						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));
+						}
 					}
 				}
 			}
@@ -323,8 +381,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -395,8 +453,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -412,7 +470,7 @@
 				min-width: 120px;
 
 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 				background: var(--l1-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
@@ -457,7 +515,7 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border) !important;
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
 			background: var(--l1-background) !important;
 			height: 34px !important;
 			box-sizing: border-box !important;

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

@@ -57,6 +57,7 @@
 
 		.group-by-filter-container {
 			min-width: 340px !important;
+			--combobox-trigger-height: auto;
 		}
 
 		.metrics-aggregation-section-content-item {
@@ -146,17 +147,3 @@
 		}
 	}
 }
-
-.metrics-operators-select {
-	border-radius: 2px;
-	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;
-	font-weight: 400;
-	line-height: 20px; /* 142.857% */
-	letter-spacing: -0.07px;
-}

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -118,7 +118,6 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										value={queryAggregation.timeAggregation || ''}
 										onChange={handleChangeOperator}
 										operators={operators}
-										className="metrics-operators-select"
 									/>
 								</div>
 							</div>

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

@@ -6,11 +6,13 @@
 	gap: 8px;
 	width: 100%;
 
+	--select-trigger-width: auto;
+
 	.ant-select-selection-search-input {
 		font-size: 12px !important;
-		line-height: 27px;
+		line-height: 25px;
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -22,9 +24,9 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l1-background);
-		color: var(--l1-foreground);
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
+		background: var(--query-builder-v2-background-color, var(--l2-background));
+		color: var(--query-builder-v2-color, var(--l2-foreground));
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -33,20 +35,23 @@
 		min-height: 36px;
 
 		.ant-select-selection-placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(
+				--query-builder-v2-placeholder-color,
+				var(--l3-foreground)
+			) !important;
 			font-size: 12px !important;
 		}
 	}
 
 	.ant-select-dropdown {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
+		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-item {
-			color: var(--l1-foreground);
+			color: var(--query-builder-v2-color, var(--l2-foreground));
 			font-family: 'Geist Mono';
 			font-size: 13px;
 			font-style: normal;
@@ -55,12 +60,18 @@
 
 			&:hover,
 			&.ant-select-item-option-active {
-				background: var(--l3-background) !important;
+				background: var(
+					--query-builder-v2-selected-background-color,
+					var(--l3-background)
+				) !important;
 			}
 
 			&.ant-select-item-option-selected {
-				background: var(--l3-background) !important;
-				border: 1px solid var(--l1-border);
+				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;
 			}
 		}

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

@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo } from 'react';
-import { Select } from 'antd';
+import { SelectSimple, type SelectSimpleItem } from '@signozhq/ui/select';
 import {
 	initialQueriesMap,
 	initialQueryMeterWithType,
@@ -10,7 +10,6 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
-import { SelectOption } from 'types/common/select';
 
 import {
 	getPreviousQueryFromKey,
@@ -21,7 +20,7 @@ import {
 
 import './MetricsSelect.styles.scss';
 
-export const SOURCE_OPTIONS: SelectOption<string, string>[] = [
+export const SOURCE_OPTIONS: SelectSimpleItem[] = [
 	{ value: 'metrics', label: 'Metrics' },
 	{ value: 'meter', label: 'Meter' },
 ];
@@ -140,14 +139,14 @@ export const MetricsSelect = memo(function MetricsSelect({
 	return (
 		<div className="metrics-source-select-container">
 			{signalSourceChangeEnabled && (
-				<Select
+				<SelectSimple
 					className="source-selector"
 					placeholder="Source"
-					options={SOURCE_OPTIONS}
+					items={SOURCE_OPTIONS}
 					value={source}
 					defaultValue="metrics"
-					data-testid={`metrics-source-selector-${index}`}
-					onChange={handleSignalSourceChange}
+					testId={`metrics-source-selector-${index}`}
+					onChange={(value): void => handleSignalSourceChange(value as string)}
 				/>
 			)}
 

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

@@ -29,32 +29,33 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);
 
-			color: var(--l2-foreground);
+			color: var(--query-builder-v2-color, var(--l2-foreground));
 		}
 
 		> button {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
 			&:first-child {
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid
+					var(--query-builder-v2-border-color, var(--l2-border));
 			}
 
 			&::before {
-				background: var(--l1-border);
+				background: var(--query-builder-v2-border-color, var(--l2-border));
 			}
 
 			&[data-state='on'] {
 				color: var(--text-robin-500);
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 
 				display: none;
 
 				&::before {
-					background: var(--l1-border);
+					background: var(--query-builder-v2-border-color, var(--l2-border));
 				}
 			}
 		}
@@ -65,7 +66,7 @@
 		height: 30px;
 
 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
@@ -78,10 +79,13 @@
 	align-items: center;
 
 	.having-filter-select-container {
+		position: relative;
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		align-items: center;
+		align-items: flex-start;
+		background: var(--query-builder-v2-background-color, var(--l2-background));
+		padding-right: 38px;
 
 		.having-filter-select-editor {
 			border-radius: 2px;
@@ -106,15 +110,17 @@
 				}
 
 				.cm-content {
-					border-radius: 2px;
-					border: 1px solid var(--l1-border);
-					border-top-right-radius: 0px;
-					border-bottom-right-radius: 0px;
+					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+					border-left-width: 0px;
+					border-right-width: 0px;
 					padding: 0px !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
 
 					&:focus-within {
-						border-color: var(--l1-border);
+						border-color: var(--query-builder-v2-border-color, var(--l2-border));
 					}
 				}
 
@@ -218,17 +224,32 @@
 				}
 
 				.cm-line {
-					line-height: 36px !important;
+					min-height: 34px;
+					line-height: 32px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
+
+					&,
+					.ͼ1a {
+						color: var(--query-builder-v2-color, var(--l2-foreground));
+					}
 
 					::-moz-selection {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}
 
 					::selection {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}
 
@@ -237,8 +258,11 @@
 					}
 
 					.chip-decorator {
-						background: var(--l3-background) !important;
-						color: var(--l1-foreground) !important;
+						background: var(
+							--query-builder-v2-chip-decorator-background-color,
+							var(--l3-background)
+						) !important;
+						color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -246,34 +270,38 @@
 				}
 
 				.cm-selectionBackground {
-					background: var(--l3-background) !important;
+					background: var(
+						--query-builder-v2-selection-background-color,
+						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(--l2-border);
-			background: var(--l2-background);
-			height: 38px;
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			background: var(--query-builder-v2-background-color, var(--l2-background));
+			height: 100%;
 			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;
-			}
 		}
 	}
 }
@@ -299,21 +327,5 @@
 		.cm-placeholder {
 			font-size: 12px !important;
 		}
-
-		$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(--l2-foreground) !important;
+				color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 
 				&.error {
 					.cm-editor {
@@ -51,14 +51,15 @@
 
 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--l1-border);
-						border-top-right-radius: 0px;
-						border-bottom-right-radius: 0px;
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 						padding: 0px !important;
-						background-color: var(--l1-background) !important;
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						) !important;
 
 						&:focus-within {
-							border-color: var(--l1-border);
+							border-color: var(--query-builder-v2-border-color, var(--l2-border));
 						}
 					}
 
@@ -74,7 +75,7 @@
 						right: 0px !important;
 
 						border-radius: 4px;
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 						background: linear-gradient(
 							139deg,
 							color-mix(in srgb, var(--card) 80%, transparent) 0%,
@@ -118,7 +119,7 @@
 								box-sizing: border-box;
 								overflow: hidden;
 
-								color: var(--l2-foreground) !important;
+								color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 								font-family: 'Space Mono', monospace !important;
 
 								.cm-completionIcon {
@@ -127,7 +128,10 @@
 
 								&:hover,
 								&[aria-selected='true'] {
-									background: var(--l3-background) !important;
+									background: var(
+										--query-builder-v2-selection-background-color,
+										var(--l3-background)
+									) !important;
 									color: var(--l1-foreground) !important;
 									font-weight: 600 !important;
 								}
@@ -142,15 +146,24 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(--l2-background) !important;
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						) !important;
 
 						::-moz-selection {
-							background: var(--l3-background) !important;
+							background: var(
+								--query-builder-v2-selection-background-color,
+								var(--l3-background)
+							) !important;
 							opacity: 0.5 !important;
 						}
 
 						::selection {
-							background: var(--l3-background) !important;
+							background: var(
+								--query-builder-v2-selection-background-color,
+								var(--l3-background)
+							) !important;
 							opacity: 0.5 !important;
 						}
 
@@ -159,8 +172,11 @@
 						}
 
 						.chip-decorator {
-							background: var(--l3-background) !important;
-							color: var(--l1-foreground) !important;
+							background: var(
+								--query-builder-v2-chip-decorator-background-color,
+								var(--l3-background)
+							) !important;
+							color: var(--query-builder-v2-color, var(--l1-foreground)) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -168,7 +184,10 @@
 					}
 
 					.cm-selectionBackground {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -201,12 +220,11 @@
 
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
-				height: 38px;
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				background: var(--query-builder-v2-background-color, var(--l2-background));
+				height: 100%;
 				width: 38px;
 
-				border-left: transparent;
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
 			}
@@ -217,13 +235,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 			font-family: 'Space Mono', monospace !important;
 
 			&::placeholder {
-				color: var(--l1-foreground);
+				color: var(--query-builder-v2-color, var(--l2-foreground));
 				opacity: 0.5;
 			}
 		}
@@ -240,7 +258,7 @@
 					input {
 						max-width: 120px;
 						&::placeholder {
-							color: var(--l2-foreground);
+							color: var(--query-builder-v2-color, var(--l2-foreground));
 						}
 					}
 				}
@@ -251,8 +269,8 @@
 
 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--l1-border);
-		border: 1px solid var(--l1-border);
+		background-color: var(--query-builder-v2-border-color, var(--l2-border));
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-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(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+	background: var(--query-builder-v2-background-color, var(--l2-background));
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }

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

@@ -34,11 +34,14 @@
 		.query-status-container {
 			width: 32px;
 
-			background-color: var(--l1-background) !important;
+			background-color: var(
+				--query-builder-v2-background-color,
+				var(--l2-background)
+			) !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -77,16 +80,16 @@
 
 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			padding: 0px !important;
 
 			&:focus-within {
-				border-color: var(--l1-border);
+				border-color: var(--query-builder-v2-border-color, var(--l2-border));
 			}
 		}
 
 		&.cm-focused {
-			outline: 1px solid var(--l1-border);
+			outline: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		}
 
 		.cm-tooltip-autocomplete {
@@ -148,11 +151,17 @@
 
 					font-family: 'Space Mono', monospace !important;
 
-					background-color: var(--l1-background) !important;
-					color: var(--l2-foreground) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
+					color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 
 					&:hover {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 					}
 
 					.cm-completionIcon {
@@ -160,7 +169,10 @@
 					}
 
 					&[aria-selected='true'] {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						font-weight: 600 !important;
 					}
 				}
@@ -172,25 +184,49 @@
 		}
 
 		.cm-line {
-			line-height: 34px !important;
+			line-height: 36px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(--l2-background) !important;
+			background-color: var(
+				--query-builder-v2-background-color,
+				var(--l2-background)
+			) !important;
+
+			&,
+			.ͼ1a {
+				color: var(--query-builder-v2-color, var(--l2-foreground));
+			}
 
 			::-moz-selection {
-				background: var(--l3-background) !important;
+				background: var(
+					--query-builder-v2-selection-background-color,
+					var(--l3-background)
+				) !important;
 				opacity: 0.5 !important;
 			}
 
 			::selection {
-				background: var(--l3-background) !important;
+				background: var(
+					--query-builder-v2-selection-background-color,
+					var(--l3-background)
+				) !important;
 				opacity: 0.5 !important;
 			}
 		}
 
 		.cm-selectionBackground {
-			background: var(--l3-background) !important;
+			background: var(
+				--query-builder-v2-selection-background-color,
+				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/QuerySearch/QuerySearch.tsx

@@ -14,8 +14,7 @@ import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
-import { Button, Card, Collapse, Popover, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Card, Collapse, Popover, Tag, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
@@ -665,26 +664,26 @@ function QuerySearch({
 	// Helper function to render a badge for the current context mode
 	const renderContextBadge = (): JSX.Element => {
 		if (!editingMode) {
-			return <Badge color="vanilla">Unknown</Badge>;
+			return <Tag>Unknown</Tag>;
 		}
 
 		switch (editingMode) {
 			case 'key':
-				return <Badge color="robin">Key</Badge>;
+				return <Tag color="blue">Key</Tag>;
 			case 'operator':
-				return <Badge color="sakura">Operator</Badge>;
+				return <Tag color="purple">Operator</Tag>;
 			case 'value':
-				return <Badge color="forest">Value</Badge>;
+				return <Tag color="green">Value</Tag>;
 			case 'conjunction':
-				return <Badge color="amber">Conjunction</Badge>;
+				return <Tag color="orange">Conjunction</Tag>;
 			case 'function':
-				return <Badge color="aqua">Function</Badge>;
+				return <Tag color="cyan">Function</Tag>;
 			case 'parenthesis':
-				return <Badge color="sakura">Parenthesis</Badge>;
+				return <Tag color="magenta">Parenthesis</Tag>;
 			case 'bracketList':
-				return <Badge color="cherry">Bracket List</Badge>;
+				return <Tag color="red">Bracket List</Tag>;
 			default:
-				return <Badge color="vanilla">Unknown</Badge>;
+				return <Tag>Unknown</Tag>;
 		}
 	};
 
@@ -1305,37 +1304,34 @@ function QuerySearch({
 					Currently editing: {renderContextBadge()}
 					{queryContext?.keyToken && (
 						<span className="triplet-info">
-							Key: <Badge color="vanilla">{queryContext.keyToken}</Badge>
+							Key: <Tag>{queryContext.keyToken}</Tag>
 						</span>
 					)}
 					{queryContext?.operatorToken && (
 						<span className="triplet-info">
-							Operator: <Badge color="vanilla">{queryContext.operatorToken}</Badge>
+							Operator: <Tag>{queryContext.operatorToken}</Tag>
 						</span>
 					)}
 					{queryContext?.valueToken && (
 						<span className="triplet-info">
-							Value: <Badge color="vanilla">{queryContext.valueToken}</Badge>
+							Value: <Tag>{queryContext.valueToken}</Tag>
 						</span>
 					)}
 					{queryContext?.currentPair && (
 						<span className="triplet-info query-pair-info">
-							Current pair: <Badge color="robin">{queryContext.currentPair.key}</Badge>
-							<Badge color="sakura">{queryContext.currentPair.operator}</Badge>
+							Current pair: <Tag color="blue">{queryContext.currentPair.key}</Tag>
+							<Tag color="purple">{queryContext.currentPair.operator}</Tag>
 							{queryContext.currentPair.value && (
-								<Badge color="forest">{queryContext.currentPair.value}</Badge>
+								<Tag color="green">{queryContext.currentPair.value}</Tag>
 							)}
-							<Badge
-								color={queryContext.currentPair.isComplete ? 'success' : 'warning'}
-							>
+							<Tag color={queryContext.currentPair.isComplete ? 'success' : 'warning'}>
 								{queryContext.currentPair.isComplete ? 'Complete' : 'Incomplete'}
-							</Badge>
+							</Tag>
 						</span>
 					)}
 					{queryContext?.queryPairs && queryContext.queryPairs.length > 0 && (
 						<span className="triplet-info">
-							Total pairs:{' '}
-							<Badge color="robin">{queryContext.queryPairs.length}</Badge>
+							Total pairs: <Tag color="blue">{queryContext.queryPairs.length}</Tag>
 						</span>
 					)}
 				</div>

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

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
-import { QueryProps } from 'container/QueryBuilder/type';
+import { QueryProps } from 'container/QueryBuilder/components/Query/Query.interfaces';
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -4,23 +4,6 @@
 	padding: 12px;
 	gap: 12px;
 	border-bottom: 1px solid var(--l1-border);
-
-	.search {
-		input {
-			--input-background: var(--l2-background);
-			--input-hover-background: var(--l2-background);
-			--input-focus-background: var(--l2-background);
-			&::placeholder {
-				color: var(--l3-foreground);
-			}
-			--input-font-size: 14px;
-			--input-border-color: var(--l1-border);
-			--input-focus-border-color: var(--primary-background);
-			--input-focus-outline-width: 0;
-			--input-focus-outline-offset: 0;
-		}
-	}
-
 	.filter-header-checkbox {
 		display: flex;
 		align-items: center;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Skeleton } from 'antd';
+import { Button, Input, Skeleton } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -1,12 +1,10 @@
 import { CircleAlert, RefreshCw } from '@signozhq/icons';
-import { Select } from 'antd';
-import { Checkbox } from '@signozhq/ui/checkbox';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useListRoles } from 'api/generated/services/role';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import APIError from 'types/api/error';
-import { popupContainer } from 'utils/selectPopupContainer';
 
 import './RolesSelect.styles.scss';
 
@@ -75,7 +73,6 @@ interface BaseProps {
 	id?: string;
 	placeholder?: string;
 	className?: string;
-	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
 	roles?: AuthtypesRoleDTO[];
 	loading?: boolean;
 	isError?: boolean;
@@ -113,14 +110,13 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 	});
 
 	const roles = externalRoles ?? data?.data ?? [];
-	const options = getRoleOptions(roles);
+	const items: ComboboxSimpleItem[] = getRoleOptions(roles);
 
 	const {
 		mode,
 		id,
 		placeholder = 'Select role',
 		className,
-		getPopupContainer = popupContainer,
 		loading = internalLoading,
 		isError = internalError,
 		error = convertToApiError(internalErrorObj),
@@ -128,54 +124,47 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 		disabled,
 	} = props;
 
-	const notFoundContent = isError ? (
-		<ErrorContent error={error} onRefetch={onRefetch} />
-	) : undefined;
+	const emptyPlaceholder = isError
+		? error?.message || 'Failed to load roles'
+		: 'No roles available';
 
 	if (mode === 'multiple') {
 		const { value = [], onChange } = props as MultipleProps;
 		return (
-			<Select
-				id={id}
-				mode="multiple"
-				value={value}
-				onChange={onChange}
-				placeholder={placeholder}
-				className={cx('roles-select', className)}
-				loading={loading}
-				notFoundContent={notFoundContent}
-				options={options}
-				optionFilterProp="label"
-				optionRender={(option): JSX.Element => (
-					<div style={{ pointerEvents: 'none' }}>
-						<Checkbox value={value.includes(option.value as string)}>
-							{option.label}
-						</Checkbox>
-					</div>
-				)}
-				getPopupContainer={getPopupContainer}
-				disabled={disabled}
-			/>
+			<>
+				<ComboboxSimple
+					id={id}
+					multiple
+					value={value}
+					onChange={(v): void => onChange?.(v as string[])}
+					placeholder={placeholder}
+					className={cx('roles-select', className)}
+					loading={loading}
+					emptyPlaceholder={emptyPlaceholder}
+					items={items}
+					style={disabled ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
+				/>
+				{isError && <ErrorContent error={error} onRefetch={onRefetch} />}
+			</>
 		);
 	}
 
-	const { value, onChange, allowClear = true } = props as SingleProps;
+	const { value, onChange } = props as SingleProps;
 	return (
-		<Select
-			id={id}
-			showSearch
-			value={value || undefined}
-			onChange={onChange}
-			placeholder={placeholder}
-			allowClear={allowClear}
-			className={cx('roles-single-select', className)}
-			loading={loading}
-			notFoundContent={notFoundContent}
-			options={options}
-			optionFilterProp="label"
-			getPopupContainer={getPopupContainer}
-			disabled={disabled}
-		/>
+		<>
+			<ComboboxSimple
+				id={id}
+				value={value || undefined}
+				onChange={(v): void => onChange?.((v as string) || undefined)}
+				placeholder={placeholder}
+				className={cx('roles-single-select', className)}
+				loading={loading}
+				emptyPlaceholder={emptyPlaceholder}
+				items={items}
+				style={disabled ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
+			/>
+			{isError && <ErrorContent error={error} onRefetch={onRefetch} />}
+		</>
 	);
 }
 

frontend/src/components/TableRenderer/LabelColumn.tsx

@@ -1,13 +1,12 @@
-import { Popover } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Popover, Tag } from 'antd';
 
 import { LabelColumnProps } from './TableRenderer.types';
-import BadgeWithTooltip from './BadgeWithTooltip';
+import TagWithToolTip from './TagWithToolTip';
 import { getLabelAndValueContent } from './utils';
 
 import './LabelColumn.styles.scss';
 
-function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
+function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 	const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
 	const remainingLabels = labels.length > 3 ? labels.slice(3) : [];
 
@@ -15,7 +14,7 @@ function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 		<div className="label-column">
 			{newLabels.map(
 				(label: string): JSX.Element => (
-					<BadgeWithTooltip key={label} label={label} value={value} />
+					<TagWithToolTip key={label} label={label} color={color} value={value} />
 				),
 			)}
 			{remainingLabels.length > 0 && (
@@ -27,9 +26,9 @@ function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 							{labels.map(
 								(label: string): JSX.Element => (
 									<div key={label}>
-										<Badge className="label-column--tag" color="vanilla">
+										<Tag className="label-column--tag" color={color}>
 											{getLabelAndValueContent(label, value && value[label])}
-										</Badge>
+										</Tag>
 									</div>
 								),
 							)}
@@ -37,9 +36,9 @@ function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 					}
 					trigger="hover"
 				>
-					<Badge className="label-column--tag" color="vanilla">
+					<Tag className="label-column--tag" color={color}>
 						+{remainingLabels.length}
-					</Badge>
+					</Tag>
 				</Popover>
 			)}
 		</div>

frontend/src/components/TableRenderer/TagWithToolTip.tsx

@@ -1,34 +1,36 @@
-import { Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag, Tooltip } from 'antd';
 
 import { getLabelRenderingValue } from './utils';
 
-function BadgeWithTooltip({
+function TagWithToolTip({
 	label,
 	value,
-}: BadgeWithTooltipProps): JSX.Element {
+	color,
+}: TagWithToolTipProps): JSX.Element {
 	const tooltipTitle =
 		value && value[label] ? `${label}: ${value[label]}` : label;
 	return (
 		<div key={label}>
 			<Tooltip title={tooltipTitle}>
-				<Badge className="label-column--tag" color="vanilla">
+				<Tag className="label-column--tag" color={color}>
 					{getLabelRenderingValue(label, value && value[label])}
-				</Badge>
+				</Tag>
 			</Tooltip>
 		</div>
 	);
 }
 
-type BadgeWithTooltipProps = {
+type TagWithToolTipProps = {
 	label: string;
+	color?: string;
 	value?: {
 		[key: string]: string;
 	};
 };
 
-BadgeWithTooltip.defaultProps = {
+TagWithToolTip.defaultProps = {
 	value: undefined,
+	color: undefined,
 };
 
-export default BadgeWithTooltip;
+export default TagWithToolTip;

frontend/src/components/Tags/Tags.styles.scss

@@ -14,6 +14,11 @@
 	.ant-form-item {
 		margin-bottom: 0;
 	}
+
+	.ant-tag {
+		margin-right: 0;
+		background: var(--card);
+	}
 }
 
 .add-tag-container {

frontend/src/components/Tags/Tags.tsx

@@ -1,12 +1,11 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
-import { Button, Flex } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Flex, Tag } from 'antd';
 import Input from 'components/Input';
 
-import './Badges.styles.scss';
+import './Tags.styles.scss';
 
-function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
+function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [inputVisible, setInputVisible] = useState<boolean>(false);
 
@@ -47,18 +46,14 @@ function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 	return (
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
-				<Badge
+				<Tag
 					key={tag}
-					color="vanilla"
-					style={{ userSelect: 'none' }}
 					closable
-					onClose={(e): void => {
-						e.preventDefault();
-						handleClose(tag);
-					}}
+					style={{ userSelect: 'none' }}
+					onClose={(): void => handleClose(tag)}
 				>
-					{tag}
-				</Badge>
+					<span>{tag}</span>
+				</Tag>
 			))}
 
 			{inputVisible && (
@@ -118,4 +113,4 @@ interface AddTagsProps {
 	setTags: Dispatch<SetStateAction<string[]>>;
 }
 
-export default Badges;
+export default Tags;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -16,7 +16,7 @@ import {
 	horizontalListSortingStrategy,
 	SortableContext,
 } from '@dnd-kit/sortable';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { Pagination } from '@signozhq/ui/pagination';
 import type { Row } from '@tanstack/react-table';
@@ -51,7 +51,7 @@ import { useEffectiveData } from './useEffectiveData';
 import { useFlatItems } from './useFlatItems';
 import { useRowKeyData } from './useRowKeyData';
 import { useTableParams } from './useTableParams';
-import { buildPageSizeItems, buildTanstackColumnDef } from './utils';
+import { buildTanstackColumnDef } from './utils';
 import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
 
 import tableStyles from './TanStackTable.module.scss';
@@ -66,13 +66,20 @@ const INCREASE_VIEWPORT_BY = { top: 500, bottom: 500 };
 
 const noopColumnVisibility = (): void => {};
 
+const paginationPageSizeItems: ComboboxSimpleItem[] = [10, 20, 30, 50, 100].map(
+	(value) => ({
+		value: value.toString(),
+		label: value.toString(),
+		displayValue: value.toString(),
+	}),
+);
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function TanStackTableInner<TData>(
 	{
 		data,
 		columns,
 		columnStorageKey,
-		respectColumnOrder = true,
 		columnSizing: columnSizingProp,
 		onColumnSizingChange,
 		onColumnOrderChange,
@@ -82,6 +89,7 @@ function TanStackTableInner<TData>(
 		enableQueryParams,
 		pagination,
 		paginationClassname,
+		onSort,
 		onEndReached,
 		getRowKey,
 		getItemKey,
@@ -94,7 +102,6 @@ function TanStackTableInner<TData>(
 		onRowClick,
 		onRowClickNewTab,
 		onRowDeactivate,
-		onSort,
 		activeRowIndex,
 		renderExpandedRow,
 		getRowCanExpand,
@@ -122,22 +129,17 @@ function TanStackTableInner<TData>(
 	const {
 		page,
 		limit,
-		setPage: internalSetPage,
-		setLimit: internalSetLimit,
+		setPage,
+		setLimit,
 		orderBy,
 		setOrderBy: internalSetOrderBy,
 		expanded,
 		setExpanded,
 	} = useTableParams(enableQueryParams, {
 		page: pagination?.defaultPage,
-		limit: pagination?.defaultLimit ?? pagination?.calculatedPageSize ?? 10,
+		limit: pagination?.defaultLimit,
 	});
 
-	const pageSizeItems = useMemo(
-		() => buildPageSizeItems(pagination?.calculatedPageSize),
-		[pagination?.calculatedPageSize],
-	);
-
 	const setOrderBy = useCallback(
 		(sort: SortState | null) => {
 			internalSetOrderBy(sort);
@@ -146,23 +148,6 @@ function TanStackTableInner<TData>(
 		[internalSetOrderBy, onSort],
 	);
 
-	const setPage = useCallback(
-		(p: number) => {
-			internalSetPage(p);
-			pagination?.onPageChange?.(p);
-		},
-		[internalSetPage, pagination],
-	);
-
-	const setLimit = useCallback(
-		(l: number) => {
-			internalSetLimit(l);
-			internalSetPage(1);
-			pagination?.onLimitChange?.(l);
-		},
-		[internalSetLimit, internalSetPage, pagination],
-	);
-
 	const isGrouped = (groupBy?.length ?? 0) > 0;
 
 	const {
@@ -176,7 +161,6 @@ function TanStackTableInner<TData>(
 		storageKey: columnStorageKey,
 		columns,
 		isGrouped,
-		respectColumnOrder,
 	});
 
 	// Use store values when columnStorageKey is provided, otherwise fall back to props/defaults
@@ -208,7 +192,6 @@ function TanStackTableInner<TData>(
 		handleRemoveColumn,
 	} = useColumnHandlers({
 		columnStorageKey,
-		respectColumnOrder,
 		effectiveSizing,
 		storeSetSizing,
 		storeSetOrder,
@@ -325,7 +308,9 @@ function TanStackTableInner<TData>(
 	});
 
 	const hasSingleColumn = useMemo(
-		() => effectiveColumns.filter((c) => !c.pin).length <= 1,
+		() =>
+			effectiveColumns.filter((c) => !c.pin && c.enableRemove !== false).length <=
+			1,
 		[effectiveColumns],
 	);
 
@@ -636,7 +621,6 @@ function TanStackTableInner<TData>(
 							{pagination.showPageSize !== false && (
 								<div className={viewStyles.paginationPageSize}>
 									<ComboboxSimple
-										testId="pagination-page-size"
 										value={limit?.toString()}
 										defaultValue="10"
 										onChange={(value): void => {
@@ -647,7 +631,7 @@ function TanStackTableInner<TData>(
 												pagination.onPageChange?.(1);
 											}
 										}}
-										items={pageSizeItems}
+										items={paginationPageSizeItems}
 									/>
 								</div>
 							)}

frontend/src/components/TanStackTableView/TanStackTableText.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import cx from 'classnames';
 
 import tableStyles from './TanStackTable.module.scss';
@@ -22,19 +22,21 @@ type WithDangerousHtml = BaseProps & {
 
 export type TanStackTableTextProps = WithChildren | WithDangerousHtml;
 
-const TanStackTableText = forwardRef<HTMLSpanElement, TanStackTableTextProps>(
-	({ children, className, dangerouslySetInnerHTML, ...rest }, ref) => (
+function TanStackTableText({
+	children,
+	className,
+	dangerouslySetInnerHTML,
+	...rest
+}: TanStackTableTextProps): JSX.Element {
+	return (
 		<span
-			ref={ref}
 			className={cx(tableStyles.tableCellText, className)}
 			dangerouslySetInnerHTML={dangerouslySetInnerHTML}
 			{...rest}
 		>
 			{children}
 		</span>
-	),
-);
-
-TanStackTableText.displayName = 'TanStackTableText';
+	);
+}
 
 export default TanStackTableText;

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor, within } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UrlUpdateEvent } from 'nuqs/adapters/testing';
 
@@ -23,15 +23,12 @@ jest.mock('../TanStackTable.module.scss', () => ({
 	},
 }));
 
-beforeAll(() => {
-	// jsdom doesn't include ResizeObserver — must direct-assign rather than
-	// spyOn (spyOn requires the property to already exist).
-	window.ResizeObserver = jest.fn().mockImplementation(() => ({
-		disconnect: jest.fn(),
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-	}));
-});
+// Mock ResizeObserver for combobox tests
+global.ResizeObserver = class ResizeObserver {
+	observe(): void {}
+	unobserve(): void {}
+	disconnect(): void {}
+};
 
 describe('TanStackTableView Integration', () => {
 	describe('rendering', () => {
@@ -405,22 +402,6 @@ describe('TanStackTableView Integration', () => {
 			});
 		});
 
-		it('preserves page from URL on initial mount', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100, defaultPage: 1, defaultLimit: 10 },
-					enableQueryParams: true,
-				},
-				queryParams: { page: '3' },
-			});
-
-			const nav = await screen.findByRole('navigation');
-			const page3Button = within(nav).getByRole('button', { name: '3' });
-
-			// Page 3 should be active (from URL), not reset to defaultPage 1
-			expect(page3Button).toHaveAttribute('aria-current', 'page');
-		});
-
 		it('resets page to 1 when limit changes', async () => {
 			const user = userEvent.setup();
 			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
@@ -869,110 +850,4 @@ describe('TanStackTableView Integration', () => {
 			expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
 		});
 	});
-
-	describe('hasSingleColumn — gates the Remove popover per-column', () => {
-		const hasSingleColumnFlagPresent = (): boolean =>
-			Boolean(document.querySelector('th[data-single-column="true"]'));
-
-		it('is true when only one non-pinned column exists', async () => {
-			renderTanStackTable({
-				props: {
-					data: [{ id: '1', name: 'Item 1', value: 100 }],
-					columns: [
-						{
-							id: 'name',
-							header: 'Name',
-							accessorKey: 'name',
-							cell: ({ value }): string => String(value),
-						},
-					],
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			expect(hasSingleColumnFlagPresent()).toBe(true);
-		});
-
-		it('is false when multiple non-pinned columns exist (all removable)', async () => {
-			renderTanStackTable({});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// 3 default columns (id/name/value), none pinned, none non-removable
-			// → table is not single-column.
-			expect(hasSingleColumnFlagPresent()).toBe(false);
-		});
-
-		it('is false when removable + non-removable mix exists (the body/timestamp case)', async () => {
-			renderTanStackTable({
-				props: {
-					data: [{ id: '1', name: 'Item 1', value: 100 }],
-					columns: [
-						{
-							id: 'name',
-							header: 'Timestamp',
-							accessorKey: 'name',
-							enableRemove: false,
-							cell: ({ value }): string => String(value),
-						},
-						{
-							id: 'value',
-							header: 'Body',
-							accessorKey: 'value',
-							enableRemove: false,
-							cell: ({ value }): string => String(value),
-						},
-						{
-							id: 'id',
-							header: 'User',
-							accessorKey: 'id',
-							enableRemove: true,
-							cell: ({ value }): string => String(value),
-						},
-					],
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			expect(hasSingleColumnFlagPresent()).toBe(false);
-		});
-
-		it('does not count pinned columns toward the total', async () => {
-			renderTanStackTable({
-				props: {
-					data: [{ id: '1', name: 'Item 1', value: 100 }],
-					columns: [
-						{
-							id: 'stateIndicator',
-							header: '',
-							pin: 'left',
-							accessorKey: 'id',
-							cell: ({ value }): string => String(value),
-						},
-						{
-							id: 'name',
-							header: 'Name',
-							accessorKey: 'name',
-							cell: ({ value }): string => String(value),
-						},
-					],
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// 1 pinned + 1 non-pinned → only the non-pinned counts → single-column.
-			expect(hasSingleColumnFlagPresent()).toBe(true);
-		});
-	});
 });

frontend/src/components/TanStackTableView/__tests__/useCalculatedPageSize.test.ts

@@ -1,25 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { useCalculatedPageSize } from '../useCalculatedPageSize';
-
-describe('useCalculatedPageSize', () => {
-	it('returns containerRef and null calculatedPageSize initially', () => {
-		const { result } = renderHook(() => useCalculatedPageSize());
-		expect(result.current.containerRef).toBeDefined();
-		expect(result.current.containerRef.current).toBeNull();
-		expect(result.current.calculatedPageSize).toBeNull();
-	});
-
-	it('accepts custom config', () => {
-		const { result } = renderHook(() =>
-			useCalculatedPageSize({
-				rowHeight: 50,
-				headerHeight: 40,
-				paginationHeight: 50,
-				minPageSize: 3,
-				maxPageSize: 20,
-			}),
-		);
-		expect(result.current.containerRef).toBeDefined();
-	});
-});