chore: bridging field evolution with promoted

* chore: added migration setup

* feat(sqlmigration): add integration_dashboards table (migration 079)

Adds the `integration_dashboards` relations table that stores the
integration-specific identity for dashboards provisioned from cloud
or builtin integrations. Columns: id, org_id, dashboard_id, provider,
slug, created_at, updated_at. Includes a unique index on dashboard_id.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(sqlmigration): backfill cloud integration dashboards to DB (migration 080)

One-time idempotent migration that provisions dashboard rows for all
orgs with existing cloud integration services where metrics are enabled.
Each dashboard is inserted into the `dashboard` table with
source="integration" and locked=true, and a companion row is added to
`integration_dashboards` with provider="cloud_integrations" and
slug="{provider}-{service}-{dashboard}" (e.g. aws-alb-overview).
Idempotency is enforced by checking (org_id, provider, slug) on
integration_dashboards before each insert.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore(sqlmigration): clean up stale 079 artifacts, add 079 schema migration

Remove the pre-rename 079_migrate_cloud_integration_dashboards.go and
079_cloud_integration_dashboards/ directory that were left behind when
the backfill migration was renumbered to 080. Add the missing
079_add_integration_dashboards.go (schema-only migration creating the
integration_dashboards table) which provider.go already references.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore: adding comment for fk

* refactor: renaming table name

* refactor: rename and restructure cloud integration dashboard migration types

* chore: file rename

* refactor: dashboard creation and listing flow change

* refactor: removing loose strings

* refactor: adding DeleteBySource on dashboard module

* refactor: review changes and update service flow change

* refactor: simplify comments

* ci: lint staticcheck fix

* refactor: renaming migration and adding integration tests

* ci: py fmt lint fixes

* feat: adding ListSharedServices store method

* ci: golangci-lint fix

* feat(integrations): persist installed integration dashboards in DB

Provisions dashboard DB rows when an integration is installed and
deprovisions them on uninstall. Adds a backfill migration (087) for
users with already-installed integrations. Removes the on-the-fly
filesystem serving path from http_handler in favor of the standard
dashboard module.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refactor: changing dashboard ID and other cleanup

* chore: update code structure for better readability and maintainability

* refactor: removing deprecated cloud integrations and merging
integration types

* refactor: renaming migration files and removing deprecated tests

* refactor: using BunDBCtx method instead

* ci: fix py fmt lint

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

.github/workflows/goci.yaml

@@ -123,3 +123,20 @@ jobs:
         run: |
           go run cmd/enterprise/*.go generate authz
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in authz permissions. Run go run cmd/enterprise/*.go generate authz locally and commit."; exit 1)
+  web-settings:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v4
+      - name: go-install
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.24"
+      - name: generate-web-settings
+        run: |
+          go run cmd/enterprise/*.go generate config web-settings
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in web settings schema. Run go run cmd/enterprise/*.go generate config web-settings locally and commit."; exit 1)

.github/workflows/jsci.yaml

@@ -90,3 +90,26 @@ jobs:
         run: |
           cd frontend && pnpm generate:api
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run pnpm generate:api in frontend/ locally and commit."; exit 1)
+  web-settings:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v4
+      - name: node-install
+        uses: actions/setup-node@v5
+        with:
+          node-version: "22"
+      - name: install-pnpm
+        uses: pnpm/action-setup@v6
+        with:
+          version: 10
+      - name: install-frontend
+        run: cd frontend && pnpm install
+      - name: generate-web-settings
+        run: |
+          cd frontend && pnpm generate:config:web-settings
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated web settings types. Run pnpm generate:config:web-settings in frontend/ locally and commit."; exit 1)

cmd/community/Dockerfile

@@ -11,7 +11,7 @@ RUN apk update && \
 
 
 COPY ./target/${OS}-${TARGETARCH}/signoz-community /root/signoz
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz

cmd/community/Dockerfile.multi-arch

@@ -12,7 +12,7 @@ RUN apk update && \
     rm -rf /var/cache/apk/*
 
 COPY ./target/${OS}-${ARCH}/signoz-community /root/signoz-community
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz-community

cmd/enterprise/Dockerfile

@@ -11,7 +11,7 @@ RUN apk update && \
 
 
 COPY ./target/${OS}-${TARGETARCH}/signoz /root/signoz
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz

cmd/enterprise/Dockerfile.integration

@@ -26,7 +26,7 @@ RUN go mod download
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 
 COPY Makefile Makefile
 RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race

cmd/enterprise/Dockerfile.multi-arch

@@ -12,7 +12,7 @@ RUN apk update && \
     rm -rf /var/cache/apk/*
 
 COPY ./target/${OS}-${ARCH}/signoz /root/signoz
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz

cmd/enterprise/Dockerfile.with-web.integration

@@ -35,7 +35,7 @@ RUN go mod download
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 
 COPY Makefile Makefile
 RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race

cmd/genconfig.go

@@ -0,0 +1,61 @@
+package cmd
+
+import (
+	"encoding/json"
+	"os"
+	"reflect"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/web"
+	"github.com/spf13/cobra"
+	"github.com/swaggest/jsonschema-go"
+)
+
+const webSettingsSchemaPath = "docs/config/web-settings.json"
+
+func registerGenerateConfig(parentCmd *cobra.Command) {
+	configCmd := &cobra.Command{
+		Use:   "config",
+		Short: "Generate JSON Schema for config",
+	}
+
+	configCmd.AddCommand(&cobra.Command{
+		Use:   "web-settings",
+		Short: "Generate JSON Schema for web settings",
+		RunE: func(currCmd *cobra.Command, args []string) error {
+			return generateWebSettings()
+		},
+	})
+
+	parentCmd.AddCommand(configCmd)
+}
+
+func generateWebSettings() error {
+	falseVal := false
+	noAdditional := jsonschema.SchemaOrBool{TypeBoolean: &falseVal}
+
+	reflector := jsonschema.Reflector{}
+	reflector.DefaultOptions = append(reflector.DefaultOptions,
+		jsonschema.InterceptSchema(func(params jsonschema.InterceptSchemaParams) (bool, error) {
+			if params.Value.Kind() == reflect.Struct {
+				params.Schema.AdditionalProperties = &noAdditional
+			}
+			return false, nil
+		}),
+		jsonschema.InterceptDefName(func(t reflect.Type, defaultDefName string) string {
+			return strings.TrimPrefix(defaultDefName, "Web")
+		}),
+	)
+
+	schema, err := reflector.Reflect(web.Settings{})
+	if err != nil {
+		return err
+	}
+
+	data, err := json.MarshalIndent(schema, "", "  ")
+	if err != nil {
+		return err
+	}
+
+	return os.WriteFile(webSettingsSchemaPath, append(data, '\n'), 0o600)
+}

cmd/generate.go

@@ -17,6 +17,7 @@ func RegisterGenerate(parentCmd *cobra.Command, logger *slog.Logger) {
 
 	registerGenerateOpenAPI(generateCmd)
 	registerGenerateAuthz(generateCmd)
+	registerGenerateConfig(generateCmd)
 
 	parentCmd.AddCommand(generateCmd)
 }

conf/example.yaml

@@ -60,6 +60,14 @@ web:
   index: index.html
   # The directory containing the static build files.
   directory: /etc/signoz/web
+  # Settings exposed to the web.
+  settings:
+    posthog:
+      # Whether to enable PostHog in web.
+      enabled: true
+    appcues:
+      # Whether to enable Appcues in web.
+      enabled: true
 
 ##################### Cache #####################
 cache:
@@ -174,6 +182,11 @@ alertmanager:
     poll_interval: 1m
     # The URL under which Alertmanager is externally reachable (for example, if Alertmanager is served via a reverse proxy). Used for generating relative and absolute links back to Alertmanager itself.
     external_url: http://localhost:8080
+    # The list of globs from which SigNoz's alertmanager notification templates are loaded (e.g. the email.signoz.html layout).
+    # This mirrors the upstream alertmanager `templates` config option. The upstream default templates (default.tmpl, email.tmpl)
+    # are always loaded from the embedded alertmanager assets, so only SigNoz's own templates need to be listed here.
+    templates:
+      - /opt/signoz/conf/templates/alertmanager/*.gotmpl
     # The global configuration for the alertmanager. All the exahustive fields can be found in the upstream: https://github.com/prometheus/alertmanager/blob/efa05feffd644ba4accb526e98a8c6545d26a783/config/config.go#L833
     global:
       # ResolveTimeout is the time after which an alert is declared resolved if it has not been updated.

docs/api/openapi.yml

@@ -129,6 +129,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
         status:
           $ref: '#/components/schemas/AlertmanagertypesMaintenanceStatus'
         updatedAt:
@@ -272,6 +274,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
       required:
       - name
       - schedule
@@ -5641,6 +5645,19 @@ components:
       type: object
     Sigv4SigV4Config:
       type: object
+    SpantypesEvent:
+      properties:
+        attributeMap:
+          additionalProperties: {}
+          type: object
+        isError:
+          type: boolean
+        name:
+          type: string
+        timeUnixNano:
+          minimum: 0
+          type: integer
+      type: object
     SpantypesFieldContext:
       enum:
       - attribute
@@ -5655,6 +5672,44 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableWaterfallTrace:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregationResult'
+          nullable: true
+          type: array
+        endTimestampMillis:
+          minimum: 0
+          type: integer
+        hasMissingSpans:
+          type: boolean
+        hasMore:
+          type: boolean
+        rootServiceEntryPoint:
+          type: string
+        rootServiceName:
+          type: string
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesWaterfallSpan'
+          nullable: true
+          type: array
+        startTimestampMillis:
+          minimum: 0
+          type: integer
+        totalErrorSpansCount:
+          minimum: 0
+          type: integer
+        totalSpansCount:
+          minimum: 0
+          type: integer
+        uncollapsedSpans:
+          items:
+            type: string
+          nullable: true
+          type: array
+      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -5682,6 +5737,50 @@ components:
       - name
       - condition
       type: object
+    SpantypesPostableWaterfall:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregation'
+          nullable: true
+          type: array
+        limit:
+          minimum: 0
+          type: integer
+        selectedSpanId:
+          type: string
+        uncollapsedSpans:
+          items:
+            type: string
+          nullable: true
+          type: array
+      type: object
+    SpantypesSpanAggregation:
+      properties:
+        aggregation:
+          $ref: '#/components/schemas/SpantypesSpanAggregationType'
+        field:
+          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+      type: object
+    SpantypesSpanAggregationResult:
+      properties:
+        aggregation:
+          $ref: '#/components/schemas/SpantypesSpanAggregationType'
+        field:
+          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+        value:
+          additionalProperties:
+            minimum: 0
+            type: integer
+          nullable: true
+          type: object
+      type: object
+    SpantypesSpanAggregationType:
+      enum:
+      - span_count
+      - execution_time_percentage
+      - duration
+      type: string
     SpantypesSpanMapper:
       properties:
         config:
@@ -5812,6 +5911,78 @@ components:
           nullable: true
           type: string
       type: object
+    SpantypesWaterfallSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          nullable: true
+          type: object
+        db_name:
+          type: string
+        db_operation:
+          type: string
+        duration_nano:
+          minimum: 0
+          type: integer
+        events:
+          items:
+            $ref: '#/components/schemas/SpantypesEvent'
+          nullable: true
+          type: array
+        external_http_method:
+          type: string
+        external_http_url:
+          type: string
+        flags:
+          minimum: 0
+          type: integer
+        has_children:
+          type: boolean
+        has_error:
+          type: boolean
+        http_host:
+          type: string
+        http_method:
+          type: string
+        http_url:
+          type: string
+        is_remote:
+          type: string
+        kind_string:
+          type: string
+        level:
+          minimum: 0
+          type: integer
+        name:
+          type: string
+        parent_span_id:
+          type: string
+        resource:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        response_status_code:
+          type: string
+        span_id:
+          type: string
+        status_code:
+          type: integer
+        status_code_string:
+          type: string
+        status_message:
+          type: string
+        sub_tree_node_count:
+          minimum: 0
+          type: integer
+        time_unix:
+          minimum: 0
+          type: integer
+        trace_id:
+          type: string
+        trace_state:
+          type: string
+      type: object
     TelemetrytypesFieldContext:
       enum:
       - metric
@@ -5904,179 +6075,6 @@ components:
     TimeDuration:
       format: int64
       type: integer
-    TracedetailtypesEvent:
-      properties:
-        attributeMap:
-          additionalProperties: {}
-          type: object
-        isError:
-          type: boolean
-        name:
-          type: string
-        timeUnixNano:
-          minimum: 0
-          type: integer
-      type: object
-    TracedetailtypesGettableWaterfallTrace:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesSpanAggregationResult'
-          nullable: true
-          type: array
-        endTimestampMillis:
-          minimum: 0
-          type: integer
-        hasMissingSpans:
-          type: boolean
-        hasMore:
-          type: boolean
-        rootServiceEntryPoint:
-          type: string
-        rootServiceName:
-          type: string
-        serviceNameToTotalDurationMap:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
-        spans:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesWaterfallSpan'
-          nullable: true
-          type: array
-        startTimestampMillis:
-          minimum: 0
-          type: integer
-        totalErrorSpansCount:
-          minimum: 0
-          type: integer
-        totalSpansCount:
-          minimum: 0
-          type: integer
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesPostableWaterfall:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesSpanAggregation'
-          nullable: true
-          type: array
-        limit:
-          minimum: 0
-          type: integer
-        selectedSpanId:
-          type: string
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesSpanAggregation:
-      properties:
-        aggregation:
-          $ref: '#/components/schemas/TracedetailtypesSpanAggregationType'
-        field:
-          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-      type: object
-    TracedetailtypesSpanAggregationResult:
-      properties:
-        aggregation:
-          $ref: '#/components/schemas/TracedetailtypesSpanAggregationType'
-        field:
-          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-        value:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
-      type: object
-    TracedetailtypesSpanAggregationType:
-      enum:
-      - span_count
-      - execution_time_percentage
-      - duration
-      type: string
-    TracedetailtypesWaterfallSpan:
-      properties:
-        attributes:
-          additionalProperties: {}
-          nullable: true
-          type: object
-        db_name:
-          type: string
-        db_operation:
-          type: string
-        duration_nano:
-          minimum: 0
-          type: integer
-        events:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesEvent'
-          nullable: true
-          type: array
-        external_http_method:
-          type: string
-        external_http_url:
-          type: string
-        flags:
-          minimum: 0
-          type: integer
-        has_children:
-          type: boolean
-        has_error:
-          type: boolean
-        http_host:
-          type: string
-        http_method:
-          type: string
-        http_url:
-          type: string
-        is_remote:
-          type: string
-        kind_string:
-          type: string
-        level:
-          minimum: 0
-          type: integer
-        name:
-          type: string
-        parent_span_id:
-          type: string
-        resource:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        response_status_code:
-          type: string
-        span_id:
-          type: string
-        status_code:
-          type: integer
-        status_code_string:
-          type: string
-        status_message:
-          type: string
-        sub_tree_node_count:
-          minimum: 0
-          type: integer
-        time_unix:
-          minimum: 0
-          type: integer
-        trace_id:
-          type: string
-        trace_state:
-          type: string
-      type: object
     TypesAlertStatus:
       properties:
         inhibitedBy:
@@ -18896,7 +18894,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/TracedetailtypesPostableWaterfall'
+              $ref: '#/components/schemas/SpantypesPostableWaterfall'
       responses:
         "200":
           content:
@@ -18904,7 +18902,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/TracedetailtypesGettableWaterfallTrace'
+                    $ref: '#/components/schemas/SpantypesGettableWaterfallTrace'
                   status:
                     type: string
                 required:

docs/config/web-settings.json

@@ -0,0 +1,42 @@
+{
+  "required": [
+    "posthog",
+    "appcues"
+  ],
+  "additionalProperties": false,
+  "definitions": {
+    "Appcues": {
+      "required": [
+        "enabled"
+      ],
+      "additionalProperties": false,
+      "properties": {
+        "enabled": {
+          "type": "boolean"
+        }
+      },
+      "type": "object"
+    },
+    "Posthog": {
+      "required": [
+        "enabled"
+      ],
+      "additionalProperties": false,
+      "properties": {
+        "enabled": {
+          "type": "boolean"
+        }
+      },
+      "type": "object"
+    }
+  },
+  "properties": {
+    "appcues": {
+      "$ref": "#/definitions/Appcues"
+    },
+    "posthog": {
+      "$ref": "#/definitions/Posthog"
+    }
+  },
+  "type": "object"
+}

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -535,7 +535,7 @@ func (module *module) getOrCreateAPIKey(ctx context.Context, orgID valuer.UUID,
 func (module *module) provisionDashboards(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, provider cloudintegrationtypes.CloudProviderType, service *cloudintegrationtypes.CloudIntegrationService, serviceDefinition *cloudintegrationtypes.ServiceDefinition) error {
 	// TODO: DB calls are in for loop, can be optimized later.
 	for _, dashboard := range serviceDefinition.Assets.Dashboards {
-		slug := cloudintegrationtypes.IntegrationDashboardSlug(provider, service.Type, dashboard.ID)
+		slug := cloudintegrationtypes.CloudIntegrationDashboardSlug(provider, service.Type, dashboard.ID)
 
 		existing, err := module.store.GetIntegrationDashboardBySlug(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
 		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
@@ -562,7 +562,7 @@ func (module *module) provisionDashboards(ctx context.Context, orgID valuer.UUID
 // deprovisionDashboards deletes all dashboard and integration_dashboard rows for the given service.
 // make sure to call this within a transaction.
 func (module *module) deprovisionDashboards(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, serviceID cloudintegrationtypes.ServiceID) error {
-	slugPrefix := cloudintegrationtypes.IntegrationDashboardSlugPrefix(provider, serviceID)
+	slugPrefix := cloudintegrationtypes.CloudIntegrationDashboardSlugPrefix(provider, serviceID)
 	rows, err := module.store.ListIntegrationDashboardsBySlugPrefix(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slugPrefix)
 	if err != nil {
 		return err
@@ -588,7 +588,7 @@ func (module *module) deprovisionDashboards(ctx context.Context, orgID valuer.UU
 // TODO: remove this hack and send idiomatic response to client.
 func (module *module) enrichDashboardIDs(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, serviceID cloudintegrationtypes.ServiceID, serviceDefinition *cloudintegrationtypes.ServiceDefinition) error {
 	for i, d := range serviceDefinition.Assets.Dashboards {
-		slug := cloudintegrationtypes.IntegrationDashboardSlug(provider, serviceID, d.ID)
+		slug := cloudintegrationtypes.CloudIntegrationDashboardSlug(provider, serviceID, d.ID)
 		row, err := module.store.GetIntegrationDashboardBySlug(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
 		if err != nil {
 			if errors.Ast(err, errors.TypeNotFound) {

ee/query-service/app/api/api.go

@@ -9,7 +9,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
@@ -24,7 +23,6 @@ type APIHandlerOptions struct {
 	DataConnector                 interfaces.Reader
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
-	CloudIntegrationsController   *cloudintegrations.Controller
 	LogsParsingPipelineController *logparsingpipeline.LogParsingPipelineController
 	GatewayUrl                    string
 	// Querier Influx Interval
@@ -42,7 +40,6 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		IntegrationsController:        opts.IntegrationsController,
-		CloudIntegrationsController:   opts.CloudIntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
@@ -91,17 +88,6 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 
 }
 
-func (ah *APIHandler) RegisterCloudIntegrationsRoutes(router *mux.Router, am *middleware.AuthZ) {
-
-	ah.APIHandler.RegisterCloudIntegrationsRoutes(router, am)
-
-	router.HandleFunc(
-		"/api/v1/cloud-integrations/{cloudProvider}/accounts/generate-connection-params",
-		am.EditAccess(ah.CloudIntegrationsGenerateConnectionParams),
-	).Methods(http.MethodGet)
-
-}
-
 func (ah *APIHandler) getVersion(w http.ResponseWriter, r *http.Request) {
 	versionResponse := basemodel.GetVersionResponse{
 		Version:        version.Info.Version(),

ee/query-service/app/api/featureFlags.go

@@ -89,6 +89,15 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
+	useDashboardV2 := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureUseDashboardV2, evalCtx)
+	featureSet = append(featureSet, &licensetypes.Feature{
+		Name:       valuer.NewString(flagger.FeatureUseDashboardV2.String()),
+		Active:     useDashboardV2,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	})
+
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {

ee/query-service/app/server.go

@@ -30,7 +30,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/app/opamp"
@@ -86,20 +85,13 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	// initiate opamp
 	opAmpModel.Init(signoz.SQLStore, signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter)
 
-	integrationsController, err := integrations.NewController(signoz.SQLStore)
+	integrationsController, err := integrations.NewController(signoz.SQLStore, signoz.Modules.Dashboard)
 	if err != nil {
 		return nil, fmt.Errorf(
 			"couldn't create integrations controller: %w", err,
 		)
 	}
 
-	cloudIntegrationsController, err := cloudintegrations.NewController(signoz.SQLStore)
-	if err != nil {
-		return nil, fmt.Errorf(
-			"couldn't create cloud provider integrations controller: %w", err,
-		)
-	}
-
 	// ingestion pipelines manager
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
 		signoz.SQLStore,
@@ -134,7 +126,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		DataConnector:                 reader,
 		UsageManager:                  usageManager,
 		IntegrationsController:        integrationsController,
-		CloudIntegrationsController:   cloudIntegrationsController,
 		LogsParsingPipelineController: logParsingPipelineController,
 		FluxInterval:                  config.Querier.FluxInterval,
 		GatewayUrl:                    config.Gateway.URL.String(),
@@ -200,7 +191,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterIntegrationRoutes(r, am)
-	apiHandler.RegisterCloudIntegrationsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)

frontend/index.html

@@ -94,6 +94,19 @@
 				}
 			})();
 		</script>
+		<script type="application/json" id="signoz-boot-settings">
+			[[.Settings]]
+		</script>
+		<script>
+			try {
+				var _el = document.getElementById('signoz-boot-settings');
+				window.signozBootData = {
+					settings: _el ? JSON.parse(_el.textContent) : null,
+				};
+			} catch (e) {
+				window.signozBootData = { settings: null };
+			}
+		</script>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
 
@@ -135,7 +148,10 @@
 		</script>
 		<script>
 			var APPCUES_APP_ID = '<%- APPCUES_APP_ID %>';
-			if (APPCUES_APP_ID) {
+			var appcuesSettings =
+				((window.signozBootData || {}).settings || {}).appcues || {};
+			var appcuesEnabled = appcuesSettings.enabled !== false;
+			if (APPCUES_APP_ID && appcuesEnabled) {
 				(function (d, t) {
 					var a = d.createElement(t);
 					a.async = 1;

frontend/jest.config.ts

@@ -47,10 +47,10 @@ const config: Config.InitialOptions = {
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
 		// Pattern 1: allow .pnpm virtual store through (handled by pattern 2), plus root-level ESM packages.
-		'node_modules/(?!(\\.pnpm|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid)/)',
+		'node_modules/(?!(\\.pnpm|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard)/)',
 		// Pattern 2: pnpm virtual store — ignore everything except ESM-only packages.
 		// pnpm encodes scoped packages as @scope+name@version, so match on scope prefix.
-		'node_modules/\\.pnpm/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid)[^/]*/node_modules)',
+		'node_modules/\\.pnpm/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard)[^/]*/node_modules)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/package.json

@@ -24,7 +24,8 @@
     "commitlint": "commitlint --edit $1",
     "test": "jest",
     "test:changedsince": "jest --changedSince=main --coverage --silent",
-    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
+    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
+    "generate:config:web-settings": "json2ts ../docs/config/web-settings.json -o src/types/generated/webSettings.ts --style.useTabs --style.tabWidth=1 --style.singleQuote --bannerComment '/* AUTO GENERATED FILE - DO NOT EDIT - GENERATED FROM docs/config/web-settings.json */'"
   },
   "engines": {
     "node": ">=22.0.0",
@@ -49,7 +50,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.21",
+    "@signozhq/ui": "0.0.22",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -160,8 +161,8 @@
     "@testing-library/user-event": "14.4.3",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "4.2.2",
-    "@types/event-source-polyfill": "^1.0.0",
     "@types/d3-hierarchy": "1.1.11",
+    "@types/event-source-polyfill": "^1.0.0",
     "@types/history": "4.7.11",
     "@types/jest": "30.0.0",
     "@types/lodash-es": "^4.17.4",
@@ -187,6 +188,7 @@
     "is-ci": "^3.0.1",
     "jest-environment-jsdom": "29.7.0",
     "jest-styled-components": "^7.2.0",
+    "json-schema-to-typescript": "^15.0.4",
     "lint-staged": "^17.0.4",
     "msw": "1.3.2",
     "orval": "8.9.1",
@@ -241,4 +243,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

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

@@ -19,7 +19,6 @@ const BANNED_COMPONENTS = {
 	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
-	Tag: 'Use @signozhq/ui/badge Bagde instead of antd Tag.',
 };
 
 export default {

frontend/pnpm-lock.yaml

@@ -77,8 +77,8 @@ importers:
         specifier: 0.0.2
         version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/ui':
-        specifier: 0.0.21
-        version: 0.0.21(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.22
+        version: 0.0.22(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -449,6 +449,9 @@ importers:
       jest-styled-components:
         specifier: ^7.2.0
         version: 7.2.0(styled-components@5.3.11(react-dom@18.2.0(react@18.2.0))(react-is@19.2.6)(react@18.2.0))
+      json-schema-to-typescript:
+        specifier: ^15.0.4
+        version: 15.0.4
       lint-staged:
         specifier: ^17.0.4
         version: 17.0.4
@@ -457,7 +460,7 @@ importers:
         version: 1.3.2(typescript@5.9.3)
       orval:
         specifier: 8.9.1
-        version: 8.9.1(typescript@5.9.3)
+        version: 8.9.1(prettier@3.8.3)(typescript@5.9.3)
       oxfmt:
         specifier: 0.47.0
         version: 0.47.0
@@ -545,6 +548,10 @@ packages:
     peerDependencies:
       react: '>=16.9.0'
 
+  '@apidevtools/json-schema-ref-parser@11.9.3':
+    resolution: {integrity: sha512-60vepv88RwcJtSHrD6MjIL6Ta3SOYbgfnkHb+ppAVK+o9mXprRtulx7VlRl3lN3bbvysAfCS7WMVfhUYemB0IQ==}
+    engines: {node: '>= 16'}
+
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -1991,6 +1998,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
+  '@jsdevtools/ono@7.1.3':
+    resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
+
   '@keyv/bigmap@1.3.1':
     resolution: {integrity: sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==}
     engines: {node: '>= 18'}
@@ -3269,8 +3279,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.21':
-    resolution: {integrity: sha512-uLM3Vqwxlk2USXbwtb3qRLpjZR9b9QSHFQq/jtcfYNMDmIE/sNjSj0nRkEhX4RqqRgsLRt2PVA33aeWxDOLO3g==}
+  '@signozhq/ui@0.0.22':
+    resolution: {integrity: sha512-CJDyA4H+uXG/U2/d7/nRMNY6WIW0YWc843mfzUQALjm+xOhbO4T+qt67THjV4s1wTMs1cZLkmScbMddf+hXLIQ==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -6066,6 +6076,11 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
+  json-schema-to-typescript@15.0.4:
+    resolution: {integrity: sha512-Su9oK8DR4xCmDsLlyvadkXzX6+GGXJpbhwoLtOGArAG61dvbW4YQmSEno2y66ahpIdmLMg6YUf/QHLgiwvkrHQ==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -7104,6 +7119,11 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier@3.8.3:
+    resolution: {integrity: sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -9044,6 +9064,12 @@ snapshots:
       resize-observer-polyfill: 1.5.1
       throttle-debounce: 5.0.0
 
+  '@apidevtools/json-schema-ref-parser@11.9.3':
+    dependencies:
+      '@jsdevtools/ono': 7.1.3
+      '@types/json-schema': 7.0.15
+      js-yaml: 4.1.1
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -10798,6 +10824,8 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.5
     optional: true
 
+  '@jsdevtools/ono@7.1.3': {}
+
   '@keyv/bigmap@1.3.1(keyv@5.6.0)':
     dependencies:
       hashery: 1.5.1
@@ -12013,7 +12041,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@signozhq/ui@0.0.21(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.22(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@chenglou/pretext': 0.0.5
       '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -15374,6 +15402,18 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
+  json-schema-to-typescript@15.0.4:
+    dependencies:
+      '@apidevtools/json-schema-ref-parser': 11.9.3
+      '@types/json-schema': 7.0.15
+      '@types/lodash': 4.17.24
+      is-glob: 4.0.3
+      js-yaml: 4.1.1
+      lodash: 4.18.1
+      minimist: 1.2.8
+      prettier: 3.8.3
+      tinyglobby: 0.2.15
+
   json-schema-traverse@0.4.1: {}
 
   json-schema-traverse@1.0.0: {}
@@ -16290,7 +16330,7 @@ snapshots:
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
 
-  orval@8.9.1(typescript@5.9.3):
+  orval@8.9.1(prettier@3.8.3)(typescript@5.9.3):
     dependencies:
       '@commander-js/extra-typings': 14.0.0(commander@14.0.2)
       '@orval/angular': 8.9.1(typescript@5.9.3)
@@ -16321,6 +16361,8 @@ snapshots:
       typedoc: 0.28.19(typescript@5.9.3)
       typedoc-plugin-coverage: 4.0.2(typedoc@0.28.19(typescript@5.9.3))
       typedoc-plugin-markdown: 4.11.0(typedoc@0.28.19(typescript@5.9.3))
+    optionalDependencies:
+      prettier: 3.8.3
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
@@ -16581,6 +16623,8 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier@3.8.3: {}
+
   pretty-format@27.5.1:
     dependencies:
       ansi-regex: 5.0.1

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';
@@ -332,7 +333,7 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		if (isCloudUser || isEnterpriseSelfHostedUser) {
-			if (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

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

@@ -225,6 +225,10 @@ export interface AlertmanagertypesPlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
 	status: AlertmanagertypesMaintenanceStatusDTO;
 	/**
 	 * @type string
@@ -1714,6 +1718,10 @@ export interface AlertmanagertypesPostablePlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
 }
 
 export interface AlertmanagertypesPostableRoutePolicyDTO {
@@ -6655,6 +6663,28 @@ export interface ServiceaccounttypesUpdatableFactorAPIKeyDTO {
 	name: string;
 }
 
+export type SpantypesEventDTOAttributeMap = { [key: string]: unknown };
+
+export interface SpantypesEventDTO {
+	/**
+	 * @type object
+	 */
+	attributeMap?: SpantypesEventDTOAttributeMap;
+	/**
+	 * @type boolean
+	 */
+	isError?: boolean;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	timeUnixNano?: number;
+}
+
 export enum SpantypesFieldContextDTO {
 	attribute = 'attribute',
 	resource = 'resource',
@@ -6721,6 +6751,219 @@ export interface SpantypesGettableSpanMapperGroupsDTO {
 	items: SpantypesSpanMapperGroupDTO[];
 }
 
+export enum SpantypesSpanAggregationTypeDTO {
+	span_count = 'span_count',
+	execution_time_percentage = 'execution_time_percentage',
+	duration = 'duration',
+}
+export type SpantypesSpanAggregationResultDTOValueAnyOf = {
+	[key: string]: number;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesSpanAggregationResultDTOValue =
+	SpantypesSpanAggregationResultDTOValueAnyOf | null;
+
+export interface SpantypesSpanAggregationResultDTO {
+	aggregation?: SpantypesSpanAggregationTypeDTO;
+	field?: TelemetrytypesTelemetryFieldKeyDTO;
+	/**
+	 * @type object,null
+	 */
+	value?: SpantypesSpanAggregationResultDTOValue;
+}
+
+export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
+	[key: string]: unknown;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesWaterfallSpanDTOAttributes =
+	SpantypesWaterfallSpanDTOAttributesAnyOf | null;
+
+export type SpantypesWaterfallSpanDTOResourceAnyOf = { [key: string]: string };
+
+/**
+ * @nullable
+ */
+export type SpantypesWaterfallSpanDTOResource =
+	SpantypesWaterfallSpanDTOResourceAnyOf | null;
+
+export interface SpantypesWaterfallSpanDTO {
+	/**
+	 * @type object,null
+	 */
+	attributes?: SpantypesWaterfallSpanDTOAttributes;
+	/**
+	 * @type string
+	 */
+	db_name?: string;
+	/**
+	 * @type string
+	 */
+	db_operation?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	duration_nano?: number;
+	/**
+	 * @type array,null
+	 */
+	events?: SpantypesEventDTO[] | null;
+	/**
+	 * @type string
+	 */
+	external_http_method?: string;
+	/**
+	 * @type string
+	 */
+	external_http_url?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	flags?: number;
+	/**
+	 * @type boolean
+	 */
+	has_children?: boolean;
+	/**
+	 * @type boolean
+	 */
+	has_error?: boolean;
+	/**
+	 * @type string
+	 */
+	http_host?: string;
+	/**
+	 * @type string
+	 */
+	http_method?: string;
+	/**
+	 * @type string
+	 */
+	http_url?: string;
+	/**
+	 * @type string
+	 */
+	is_remote?: string;
+	/**
+	 * @type string
+	 */
+	kind_string?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	level?: number;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	parent_span_id?: string;
+	/**
+	 * @type object,null
+	 */
+	resource?: SpantypesWaterfallSpanDTOResource;
+	/**
+	 * @type string
+	 */
+	response_status_code?: string;
+	/**
+	 * @type string
+	 */
+	span_id?: string;
+	/**
+	 * @type integer
+	 */
+	status_code?: number;
+	/**
+	 * @type string
+	 */
+	status_code_string?: string;
+	/**
+	 * @type string
+	 */
+	status_message?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	sub_tree_node_count?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	time_unix?: number;
+	/**
+	 * @type string
+	 */
+	trace_id?: string;
+	/**
+	 * @type string
+	 */
+	trace_state?: string;
+}
+
+export interface SpantypesGettableWaterfallTraceDTO {
+	/**
+	 * @type array,null
+	 */
+	aggregations?: SpantypesSpanAggregationResultDTO[] | null;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	endTimestampMillis?: number;
+	/**
+	 * @type boolean
+	 */
+	hasMissingSpans?: boolean;
+	/**
+	 * @type boolean
+	 */
+	hasMore?: boolean;
+	/**
+	 * @type string
+	 */
+	rootServiceEntryPoint?: string;
+	/**
+	 * @type string
+	 */
+	rootServiceName?: string;
+	/**
+	 * @type array,null
+	 */
+	spans?: SpantypesWaterfallSpanDTO[] | null;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	startTimestampMillis?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalErrorSpansCount?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalSpansCount?: number;
+	/**
+	 * @type array,null
+	 */
+	uncollapsedSpans?: string[] | null;
+}
+
 export enum SpantypesSpanMapperOperationDTO {
 	move = 'move',
 	copy = 'copy',
@@ -6770,6 +7013,31 @@ export interface SpantypesPostableSpanMapperGroupDTO {
 	name: string;
 }
 
+export interface SpantypesSpanAggregationDTO {
+	aggregation?: SpantypesSpanAggregationTypeDTO;
+	field?: TelemetrytypesTelemetryFieldKeyDTO;
+}
+
+export interface SpantypesPostableWaterfallDTO {
+	/**
+	 * @type array,null
+	 */
+	aggregations?: SpantypesSpanAggregationDTO[] | null;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	limit?: number;
+	/**
+	 * @type string
+	 */
+	selectedSpanId?: string;
+	/**
+	 * @type array,null
+	 */
+	uncollapsedSpans?: string[] | null;
+}
+
 export interface SpantypesSpanMapperDTO {
 	config: SpantypesSpanMapperConfigDTO;
 	/**
@@ -6878,281 +7146,6 @@ export interface TelemetrytypesGettableFieldValuesDTO {
 	values: TelemetrytypesTelemetryFieldValuesDTO;
 }
 
-export type TracedetailtypesEventDTOAttributeMap = { [key: string]: unknown };
-
-export interface TracedetailtypesEventDTO {
-	/**
-	 * @type object
-	 */
-	attributeMap?: TracedetailtypesEventDTOAttributeMap;
-	/**
-	 * @type boolean
-	 */
-	isError?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	timeUnixNano?: number;
-}
-
-export type TracedetailtypesGettableWaterfallTraceDTOServiceNameToTotalDurationMapAnyOf =
-	{ [key: string]: number };
-
-/**
- * @nullable
- */
-export type TracedetailtypesGettableWaterfallTraceDTOServiceNameToTotalDurationMap =
-	TracedetailtypesGettableWaterfallTraceDTOServiceNameToTotalDurationMapAnyOf | null;
-
-export enum TracedetailtypesSpanAggregationTypeDTO {
-	span_count = 'span_count',
-	execution_time_percentage = 'execution_time_percentage',
-	duration = 'duration',
-}
-export type TracedetailtypesSpanAggregationResultDTOValueAnyOf = {
-	[key: string]: number;
-};
-
-/**
- * @nullable
- */
-export type TracedetailtypesSpanAggregationResultDTOValue =
-	TracedetailtypesSpanAggregationResultDTOValueAnyOf | null;
-
-export interface TracedetailtypesSpanAggregationResultDTO {
-	aggregation?: TracedetailtypesSpanAggregationTypeDTO;
-	field?: TelemetrytypesTelemetryFieldKeyDTO;
-	/**
-	 * @type object,null
-	 */
-	value?: TracedetailtypesSpanAggregationResultDTOValue;
-}
-
-export type TracedetailtypesWaterfallSpanDTOAttributesAnyOf = {
-	[key: string]: unknown;
-};
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallSpanDTOAttributes =
-	TracedetailtypesWaterfallSpanDTOAttributesAnyOf | null;
-
-export type TracedetailtypesWaterfallSpanDTOResourceAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallSpanDTOResource =
-	TracedetailtypesWaterfallSpanDTOResourceAnyOf | null;
-
-export interface TracedetailtypesWaterfallSpanDTO {
-	/**
-	 * @type object,null
-	 */
-	attributes?: TracedetailtypesWaterfallSpanDTOAttributes;
-	/**
-	 * @type string
-	 */
-	db_name?: string;
-	/**
-	 * @type string
-	 */
-	db_operation?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	duration_nano?: number;
-	/**
-	 * @type array,null
-	 */
-	events?: TracedetailtypesEventDTO[] | null;
-	/**
-	 * @type string
-	 */
-	external_http_method?: string;
-	/**
-	 * @type string
-	 */
-	external_http_url?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	flags?: number;
-	/**
-	 * @type boolean
-	 */
-	has_children?: boolean;
-	/**
-	 * @type boolean
-	 */
-	has_error?: boolean;
-	/**
-	 * @type string
-	 */
-	http_host?: string;
-	/**
-	 * @type string
-	 */
-	http_method?: string;
-	/**
-	 * @type string
-	 */
-	http_url?: string;
-	/**
-	 * @type string
-	 */
-	is_remote?: string;
-	/**
-	 * @type string
-	 */
-	kind_string?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	level?: number;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	parent_span_id?: string;
-	/**
-	 * @type object,null
-	 */
-	resource?: TracedetailtypesWaterfallSpanDTOResource;
-	/**
-	 * @type string
-	 */
-	response_status_code?: string;
-	/**
-	 * @type string
-	 */
-	span_id?: string;
-	/**
-	 * @type integer
-	 */
-	status_code?: number;
-	/**
-	 * @type string
-	 */
-	status_code_string?: string;
-	/**
-	 * @type string
-	 */
-	status_message?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	sub_tree_node_count?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	time_unix?: number;
-	/**
-	 * @type string
-	 */
-	trace_id?: string;
-	/**
-	 * @type string
-	 */
-	trace_state?: string;
-}
-
-export interface TracedetailtypesGettableWaterfallTraceDTO {
-	/**
-	 * @type array,null
-	 */
-	aggregations?: TracedetailtypesSpanAggregationResultDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	endTimestampMillis?: number;
-	/**
-	 * @type boolean
-	 */
-	hasMissingSpans?: boolean;
-	/**
-	 * @type boolean
-	 */
-	hasMore?: boolean;
-	/**
-	 * @type string
-	 */
-	rootServiceEntryPoint?: string;
-	/**
-	 * @type string
-	 */
-	rootServiceName?: string;
-	/**
-	 * @type object,null
-	 */
-	serviceNameToTotalDurationMap?: TracedetailtypesGettableWaterfallTraceDTOServiceNameToTotalDurationMap;
-	/**
-	 * @type array,null
-	 */
-	spans?: TracedetailtypesWaterfallSpanDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	startTimestampMillis?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalErrorSpansCount?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalSpansCount?: number;
-	/**
-	 * @type array,null
-	 */
-	uncollapsedSpans?: string[] | null;
-}
-
-export interface TracedetailtypesSpanAggregationDTO {
-	aggregation?: TracedetailtypesSpanAggregationTypeDTO;
-	field?: TelemetrytypesTelemetryFieldKeyDTO;
-}
-
-export interface TracedetailtypesPostableWaterfallDTO {
-	/**
-	 * @type array,null
-	 */
-	aggregations?: TracedetailtypesSpanAggregationDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	limit?: number;
-	/**
-	 * @type string
-	 */
-	selectedSpanId?: string;
-	/**
-	 * @type array,null
-	 */
-	uncollapsedSpans?: string[] | null;
-}
-
 export interface TypesChangePasswordRequestDTO {
 	/**
 	 * @type string
@@ -9232,7 +9225,7 @@ export type GetWaterfallPathParameters = {
 	traceID: string;
 };
 export type GetWaterfall200 = {
-	data: TracedetailtypesGettableWaterfallTraceDTO;
+	data: SpantypesGettableWaterfallTraceDTO;
 	/**
 	 * @type string
 	 */

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

@@ -15,7 +15,7 @@ import type {
 	GetWaterfall200,
 	GetWaterfallPathParameters,
 	RenderErrorResponseDTO,
-	TracedetailtypesPostableWaterfallDTO,
+	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -27,14 +27,14 @@ import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
  */
 export const getWaterfall = (
 	{ traceID }: GetWaterfallPathParameters,
-	tracedetailtypesPostableWaterfallDTO?: BodyType<TracedetailtypesPostableWaterfallDTO>,
+	spantypesPostableWaterfallDTO?: BodyType<SpantypesPostableWaterfallDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetWaterfall200>({
 		url: `/api/v3/traces/${traceID}/waterfall`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: tracedetailtypesPostableWaterfallDTO,
+		data: spantypesPostableWaterfallDTO,
 		signal,
 	});
 };
@@ -48,7 +48,7 @@ export const getGetWaterfallMutationOptions = <
 		TError,
 		{
 			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		},
 		TContext
 	>;
@@ -57,7 +57,7 @@ export const getGetWaterfallMutationOptions = <
 	TError,
 	{
 		pathParams: GetWaterfallPathParameters;
-		data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+		data?: BodyType<SpantypesPostableWaterfallDTO>;
 	},
 	TContext
 > => {
@@ -74,7 +74,7 @@ export const getGetWaterfallMutationOptions = <
 		Awaited<ReturnType<typeof getWaterfall>>,
 		{
 			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -89,7 +89,7 @@ export type GetWaterfallMutationResult = NonNullable<
 	Awaited<ReturnType<typeof getWaterfall>>
 >;
 export type GetWaterfallMutationBody =
-	| BodyType<TracedetailtypesPostableWaterfallDTO>
+	| BodyType<SpantypesPostableWaterfallDTO>
 	| undefined;
 export type GetWaterfallMutationError = ErrorType<RenderErrorResponseDTO>;
 
@@ -105,7 +105,7 @@ export const useGetWaterfall = <
 		TError,
 		{
 			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		},
 		TContext
 	>;
@@ -114,7 +114,7 @@ export const useGetWaterfall = <
 	TError,
 	{
 		pathParams: GetWaterfallPathParameters;
-		data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+		data?: BodyType<SpantypesPostableWaterfallDTO>;
 	},
 	TContext
 > => {

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -9,7 +9,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Select, Tooltip } from 'antd';
+import { Select, Tag, Tooltip } from 'antd';
 import {
 	OPERATORS,
 	QUERY_BUILDER_OPERATORS_BY_TYPES,
@@ -37,7 +37,7 @@ import { validationMapper } from 'hooks/queryBuilder/useIsValidTag';
 import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
-import { ChevronDown, ChevronUp, X } from '@signozhq/icons';
+import { ChevronDown, ChevronUp } from '@signozhq/icons';
 import type { BaseSelectRef } from 'rc-select';
 import {
 	BaseAutocompleteData,
@@ -51,7 +51,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,7 +547,11 @@ function ClientSideQBSearch(
 
 		return (
 			<span className="qb-search-bar-tokenised-tags">
-				<Badge color="vanilla" className={tagDetails?.key?.type || ''}>
+				<Tag
+					closable={!searchValue && closable}
+					onClose={onCloseHandler}
+					className={tagDetails?.key?.type || ''}
+				>
 					<Tooltip title={chipValue}>
 						<TypographyText
 							$isInNin={isInNin}
@@ -563,15 +566,7 @@ function ClientSideQBSearch(
 							{chipValue}
 						</TypographyText>
 					</Tooltip>
-					{!searchValue && closable && (
-						<X
-							size={12}
-							className="close-icon"
-							style={{ cursor: 'pointer' }}
-							onClick={onCloseHandler}
-						/>
-					)}
-				</Badge>
+				</Tag>
 			</span>
 		);
 	};

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/Logs/ListLogView/index.tsx

@@ -5,7 +5,10 @@ import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -196,7 +199,7 @@ function ListLogView({
 							{updatedSelecedFields.some((field) => field.name === 'body') && (
 								<LogGeneralField
 									fieldKey="Log"
-									fieldValue={flattenLogData.body}
+									fieldValue={getBodyDisplayString(logData.body)}
 									linesPerRow={linesPerRow}
 									fontSize={fontSize}
 								/>

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/QuickFilters/FilterRenderers/Duration/Duration.styles.scss

@@ -51,6 +51,10 @@
 			}
 		}
 	}
+	.duration-input-slider {
+		padding: 12px 0px;
+		margin-top: 12px;
+	}
 }
 
 .divider {

frontend/src/components/TableRenderer/LabelColumn.tsx

@@ -1,5 +1,4 @@
-import { Popover } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Popover, Tag } from 'antd';
 
 import { LabelColumnProps } from './TableRenderer.types';
 import TagWithToolTip from './TagWithToolTip';
@@ -7,7 +6,7 @@ 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 => (
-					<TagWithToolTip 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,17 +1,20 @@
-import { Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag, Tooltip } from 'antd';
 
 import { getLabelRenderingValue } from './utils';
 
-function TagWithToolTip({ label, value }: TagWithToolTipProps): JSX.Element {
+function TagWithToolTip({
+	label,
+	value,
+	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>
 	);
@@ -19,6 +22,7 @@ function TagWithToolTip({ label, value }: TagWithToolTipProps): JSX.Element {
 
 type TagWithToolTipProps = {
 	label: string;
+	color?: string;
 	value?: {
 		[key: string]: string;
 	};
@@ -26,6 +30,7 @@ type TagWithToolTipProps = {
 
 TagWithToolTip.defaultProps = {
 	value: undefined,
+	color: undefined,
 };
 
 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,7 +1,6 @@
 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 './Tags.styles.scss';
@@ -47,14 +46,14 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 	return (
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
-				<Badge key={tag} color="vanilla" style={{ userSelect: 'none' }}>
+				<Tag
+					key={tag}
+					closable
+					style={{ userSelect: 'none' }}
+					onClose={(): void => handleClose(tag)}
+				>
 					<span>{tag}</span>
-					<X
-						size={12}
-						style={{ cursor: 'pointer', marginInlineStart: 4 }}
-						onClick={(): void => handleClose(tag)}
-					/>
-				</Badge>
+				</Tag>
 			))}
 
 			{inputVisible && (

frontend/src/constants/app.ts

@@ -10,9 +10,6 @@ export const DEFAULT_AUTH0_APP_REDIRECTION_PATH = ROUTES.APPLICATION;
 
 export const INVITE_MEMBERS_HASH = '#invite-team-members';
 
-export const SIGNOZ_UPGRADE_PLAN_URL =
-	'https://upgrade.signoz.io/upgrade-from-app';
-
 export const DASHBOARD_TIME_IN_DURATION = 'refreshInterval';
 
 export const DEFAULT_ENTITY_VERSION = 'v3';

frontend/src/constants/features.ts

@@ -11,4 +11,5 @@ export enum FeatureKeys {
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
 	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
+	USE_DASHBOARD_V2 = 'use_dashboard_v2',
 }

frontend/src/container/AIAssistant/components/ActivityGroup/ActivityGroup.module.scss

@@ -0,0 +1,64 @@
+// Collapsed activity summary — one row that hides the underlying
+// thinking + tool-call steps. Reuses the same quiet treatment as
+// ThinkingStep / ToolCallStep so it sits flush in the assistant bubble.
+.activityGroup {
+	width: 100%;
+	font-size: 12px;
+}
+
+.activityHeader {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 0;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	color: var(--l3-foreground);
+	user-select: none;
+	transition: color 0.12s ease;
+	width: 100%;
+	text-align: left;
+
+	&:hover {
+		color: var(--l1-foreground);
+	}
+}
+
+.sparkleIcon {
+	flex-shrink: 0;
+	color: var(--accent-primary);
+
+	&.iconPulsing {
+		animation: activityGroupPulse 1.4s ease-in-out infinite;
+	}
+}
+
+@keyframes activityGroupPulse {
+	0%,
+	100% {
+		opacity: 0.55;
+	}
+	50% {
+		opacity: 1;
+	}
+}
+
+.activitySummary {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-weight: 400;
+}
+
+.toggleChevron {
+	flex-shrink: 0;
+	color: inherit;
+}
+
+.activityBody {
+	display: flex;
+	flex-direction: column;
+	padding: 2px 0 4px;
+}

frontend/src/container/AIAssistant/components/ActivityGroup/ActivityGroup.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import { ChevronDown, ChevronRight, Sparkles } from '@signozhq/icons';
+
+import { formatTime } from 'utils/timeUtils';
+
+import { StreamingToolCall } from '../../types';
+import ThinkingStep, { ThinkingContent, thinkingLabel } from '../ThinkingStep';
+import ToolCallStep, {
+	getToolDisplayLabel,
+	ToolCallContent,
+} from '../ToolCallStep';
+
+import styles from './ActivityGroup.module.scss';
+
+export type ActivityItem =
+	| { id: string; kind: 'thinking'; content: string }
+	| { id: string; kind: 'tool'; toolCall: StreamingToolCall };
+
+interface ActivityGroupProps {
+	items: ActivityItem[];
+	/**
+	 * True only for the trailing activity group of an active stream — drives
+	 * the live "Working…" label and the elapsed-time tick (which re-stamps on
+	 * approval/clarification resume so wait time isn't counted).
+	 */
+	isLive?: boolean;
+}
+
+/**
+ * Single-item groups get a step-specific summary so the user doesn't see a
+ * pointless "Worked through 1 step". Multi-item groups roll up into the
+ * generic "Working… / Worked through N steps" treatment.
+ */
+function buildSummary(
+	items: ActivityItem[],
+	isLive: boolean,
+	elapsed: number,
+): string {
+	if (items.length === 1) {
+		const [only] = items;
+		if (only.kind === 'thinking') {
+			return thinkingLabel(isLive);
+		}
+		return getToolDisplayLabel(only.toolCall);
+	}
+	const stepLabel = `${items.length} steps`;
+	if (!isLive) {
+		return `Worked through ${stepLabel}`;
+	}
+	// Suppress the elapsed token until ≥ 1s — the first tick fires after
+	// 1s anyway, and showing "0s" or "<1s" briefly adds noise.
+	return elapsed >= 1000
+		? `Working… · ${formatTime(elapsed / 1000)} · ${stepLabel}`
+		: `Working… · ${stepLabel}`;
+}
+
+/**
+ * Single collapsed summary row that hides a run of thinking + tool-call steps.
+ * Expands to show each underlying step inline. Used for every activity row
+ * (including single-item ones) so all "what the agent did" rows share a
+ * consistent ✨-led visual contract.
+ */
+export default function ActivityGroup({
+	items,
+	isLive = false,
+}: ActivityGroupProps): JSX.Element {
+	const [expanded, setExpanded] = useState(false);
+
+	// Captures the moment this live phase started. Re-stamped on every
+	// false→true transition so a stream that pauses on
+	// approval/clarification and resumes doesn't roll the user's wait time
+	// into the elapsed counter.
+	const startedAtRef = useRef<number>(Date.now());
+	const wasLiveRef = useRef<boolean>(isLive);
+	const [elapsed, setElapsed] = useState(0);
+
+	useEffect(() => {
+		if (isLive && !wasLiveRef.current) {
+			startedAtRef.current = Date.now();
+			setElapsed(0);
+		}
+		wasLiveRef.current = isLive;
+
+		if (!isLive) {
+			return undefined;
+		}
+		// Tick once per second — the display is integer-second precision, so
+		// faster ticks would just re-render the bubble for no visible change.
+		const id = window.setInterval(() => {
+			setElapsed(Date.now() - startedAtRef.current);
+		}, 1000);
+		return (): void => window.clearInterval(id);
+	}, [isLive]);
+
+	const summary = buildSummary(items, isLive, elapsed);
+	const isSingle = items.length === 1;
+
+	const toggle = (): void => setExpanded((v) => !v);
+
+	return (
+		<div className={styles.activityGroup}>
+			<div className={styles.activityHeader} onClick={toggle}>
+				<Sparkles
+					size={12}
+					className={cx(styles.sparkleIcon, { [styles.iconPulsing]: isLive })}
+				/>
+				<span className={styles.activitySummary}>{summary}</span>
+				{expanded ? (
+					<ChevronDown size={12} className={styles.toggleChevron} />
+				) : (
+					<ChevronRight size={12} className={styles.toggleChevron} />
+				)}
+			</div>
+
+			{expanded && (
+				<div className={styles.activityBody}>
+					{isSingle ? (
+						// Single-item: the outer chevron already provides disclosure,
+						// so render the underlying content directly instead of wrapping
+						// it in a second collapsible step row.
+						items[0].kind === 'thinking' ? (
+							<ThinkingContent content={items[0].content} />
+						) : (
+							<ToolCallContent toolCall={items[0].toolCall} />
+						)
+					) : (
+						items.map((item, i) => {
+							// A thinking step is live only while it's the trailing item
+							// in a trailing live group — once any later event (text or
+							// tool) arrives, the pass is done.
+							const isLastItem = i === items.length - 1;
+							return item.kind === 'thinking' ? (
+								<ThinkingStep
+									key={item.id}
+									content={item.content}
+									isLive={isLive && isLastItem}
+								/>
+							) : (
+								<ToolCallStep key={item.id} toolCall={item.toolCall} />
+							);
+						})
+					)}
+				</div>
+			)}
+		</div>
+	);
+}

frontend/src/container/AIAssistant/components/ActivityGroup/index.ts

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

frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -9,11 +9,10 @@ import '../blocks';
 import { useVariant } from '../../VariantContext';
 import { Message, MessageBlock } from '../../types';
 import ActionsSection from '../ActionsSection';
+import ActivityGroup, { ActivityItem } from '../ActivityGroup';
 import { RichCodeBlock } from '../blocks';
 import { MessageContext } from '../MessageContext';
 import MessageFeedback from '../MessageFeedback';
-import ThinkingStep from '../ThinkingStep';
-import ToolCallStep from '../ToolCallStep';
 import UserMessageActions from '../UserMessageActions';
 
 import styles from './MessageBubble.module.scss';
@@ -40,38 +39,61 @@ function SmartPre({ children }: { children?: React.ReactNode }): JSX.Element {
 const MD_PLUGINS = [remarkGfm];
 const MD_COMPONENTS = { code: RichCodeBlock, pre: SmartPre };
 
-/** Renders a single MessageBlock by type. */
-function renderBlock(block: MessageBlock, index: number): JSX.Element {
-	switch (block.type) {
-		case 'thinking':
-			return <ThinkingStep key={index} content={block.content} />;
-		case 'tool_call':
-			// Blocks in a persisted message are always complete — done is always true.
-			return (
-				<ToolCallStep
-					key={index}
-					toolCall={{
-						toolName: block.toolName,
-						input: block.toolInput,
-						result: block.result,
-						done: true,
-						displayText: block.displayText,
-					}}
-				/>
-			);
-		case 'text':
-		default:
-			return (
-				<ReactMarkdown
-					key={index}
-					className={styles.markdown}
-					remarkPlugins={MD_PLUGINS}
-					components={MD_COMPONENTS}
-				>
-					{block.content}
-				</ReactMarkdown>
-			);
+type RenderGroup =
+	| { kind: 'text'; id: string; content: string }
+	| { kind: 'activity'; id: string; items: ActivityItem[] };
+
+/**
+ * Partition message blocks into render groups so consecutive thinking and
+ * tool_call blocks collapse into a single ActivityGroup row. Text blocks
+ * stand alone, mirroring the streaming view.
+ */
+function groupBlocks(blocks: MessageBlock[]): RenderGroup[] {
+	const groups: RenderGroup[] = [];
+	blocks.forEach((block, i) => {
+		if (block.type === 'text') {
+			groups.push({ kind: 'text', id: `text-${i}`, content: block.content });
+			return;
+		}
+		const item: ActivityItem =
+			block.type === 'thinking'
+				? { id: `t-${i}`, kind: 'thinking', content: block.content }
+				: {
+						id: `c-${block.toolCallId}`,
+						kind: 'tool',
+						// Persisted blocks are always complete.
+						toolCall: {
+							toolName: block.toolName,
+							input: block.toolInput,
+							result: block.result,
+							done: true,
+							displayText: block.displayText,
+						},
+					};
+		const last = groups[groups.length - 1];
+		if (last?.kind === 'activity') {
+			last.items.push(item);
+		} else {
+			groups.push({ kind: 'activity', id: `a-${i}`, items: [item] });
+		}
+	});
+	return groups;
+}
+
+function renderGroup(group: RenderGroup): JSX.Element {
+	if (group.kind === 'text') {
+		return (
+			<ReactMarkdown
+				key={group.id}
+				className={styles.markdown}
+				remarkPlugins={MD_PLUGINS}
+				components={MD_COMPONENTS}
+			>
+				{group.content}
+			</ReactMarkdown>
+		);
 	}
+	return <ActivityGroup key={group.id} items={group.items} />;
 }
 
 interface MessageBubbleProps {
@@ -90,6 +112,14 @@ export default function MessageBubble({
 	const isUser = message.role === 'user';
 	const hasBlocks = !isUser && message.blocks && message.blocks.length > 0;
 
+	// Recompute groups only when the blocks array identity changes — store
+	// updates that don't touch this message's blocks should not re-render the
+	// underlying ThinkingStep/ToolCallStep children.
+	const groups = useMemo(
+		() => (hasBlocks ? groupBlocks(message.blocks!) : []),
+		[hasBlocks, message.blocks],
+	);
+
 	const messageClass = cx(
 		styles.message,
 		isUser ? styles.user : styles.assistant,
@@ -128,8 +158,7 @@ export default function MessageBubble({
 							<p className={styles.text}>{message.content}</p>
 						) : hasBlocks ? (
 							<MessageContext.Provider value={{ messageId: message.id }}>
-								{/* eslint-disable-next-line react/no-array-index-key */}
-								{message.blocks!.map((block, i) => renderBlock(block, i))}
+								{groups.map((g) => renderGroup(g))}
 							</MessageContext.Provider>
 						) : (
 							<MessageContext.Provider value={{ messageId: message.id }}>

frontend/src/container/AIAssistant/components/StreamingMessage/StreamingMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -10,11 +10,10 @@ import type {
 
 import { useVariant } from '../../VariantContext';
 import { StreamingEventItem } from '../../types';
+import ActivityGroup, { ActivityItem } from '../ActivityGroup';
 import ApprovalCard from '../ApprovalCard';
 import { RichCodeBlock } from '../blocks';
 import ClarificationForm from '../ClarificationForm';
-import ThinkingStep from '../ThinkingStep';
-import ToolCallStep from '../ToolCallStep';
 
 import messageStyles from '../MessageBubble/MessageBubble.module.scss';
 import styles from './StreamingMessage.module.scss';
@@ -33,6 +32,59 @@ function SmartPre({ children }: { children?: React.ReactNode }): JSX.Element {
 const MD_PLUGINS = [remarkGfm];
 const MD_COMPONENTS = { code: RichCodeBlock, pre: SmartPre };
 
+type RenderGroup =
+	| { kind: 'text'; id: string; content: string }
+	| {
+			kind: 'activity';
+			id: string;
+			items: ActivityItem[];
+			isTrailing: boolean;
+	  };
+
+/**
+ * Partition the streaming event timeline into render groups: runs of
+ * consecutive thinking/tool events fold into a single activity group, text
+ * events stay standalone. The last group is flagged as trailing so the
+ * caller can drive a "live" indicator on it.
+ *
+ * Invariant relied on by the ActivityGroup elapsed-time timer: once a
+ * group exists at a given array index, later events only extend its
+ * `items` — they never shrink the array or re-key existing groups. That
+ * keeps each ActivityGroup React instance stable across re-renders so the
+ * timer's `wasLive` → `isLive` re-stamp captures the right transition.
+ * The id fields below piggyback on that invariant: each event's position in
+ * `events` is stable, so the derived id stays stable across re-renders.
+ */
+function groupStreamingEvents(events: StreamingEventItem[]): RenderGroup[] {
+	const groups: RenderGroup[] = [];
+	events.forEach((event, i) => {
+		if (event.kind === 'text') {
+			groups.push({ kind: 'text', id: `text-${i}`, content: event.content });
+			return;
+		}
+		const item: ActivityItem =
+			event.kind === 'thinking'
+				? { id: `t-${i}`, kind: 'thinking', content: event.content }
+				: { id: `c-${i}`, kind: 'tool', toolCall: event.toolCall };
+		const last = groups[groups.length - 1];
+		if (last?.kind === 'activity') {
+			last.items.push(item);
+		} else {
+			groups.push({
+				kind: 'activity',
+				id: `a-${i}`,
+				items: [item],
+				isTrailing: false,
+			});
+		}
+	});
+	const last = groups[groups.length - 1];
+	if (last?.kind === 'activity') {
+		last.isTrailing = true;
+	}
+	return groups;
+}
+
 /** Human-readable labels for execution status codes shown before any events arrive. */
 const STATUS_LABEL: Record<string, string> = {
 	queued: 'Queued…',
@@ -79,6 +131,11 @@ export default function StreamingMessage({
 		[messageStyles.compact]: isCompact,
 	});
 
+	// Recompute groups only when the events array identity changes. The
+	// streaming reducer pushes new entries into the same array reference
+	// once per tick, so this naturally invalidates as events arrive.
+	const groups = useMemo(() => groupStreamingEvents(events), [events]);
+
 	return (
 		<div className={messageClass}>
 			<div className={messageStyles.bubble}>
@@ -88,27 +145,28 @@ export default function StreamingMessage({
 				)}
 				{isEmpty && !statusLabel && <TypingDots />}
 
-				{/* eslint-disable react/no-array-index-key */}
-				{/* Events rendered in arrival order: text, thinking, and tool calls interleaved */}
-				{events.map((event, i) => {
-					if (event.kind === 'tool') {
-						return <ToolCallStep key={i} toolCall={event.toolCall} />;
-					}
-					if (event.kind === 'thinking') {
-						return <ThinkingStep key={i} content={event.content} />;
+				{/* Runs of consecutive thinking + tool events collapse into a
+				    single ActivityGroup; text events render inline between
+				    them. The trailing group is "live" while streaming is
+				    active and not blocked on the user. */}
+				{groups.map((group) => {
+					if (group.kind === 'text') {
+						return (
+							<ReactMarkdown
+								key={group.id}
+								className={messageStyles.markdown}
+								remarkPlugins={MD_PLUGINS}
+								components={MD_COMPONENTS}
+							>
+								{group.content}
+							</ReactMarkdown>
+						);
 					}
+					const groupIsLive = group.isTrailing && !isWaitingOnUser;
 					return (
-						<ReactMarkdown
-							key={i}
-							className={messageStyles.markdown}
-							remarkPlugins={MD_PLUGINS}
-							components={MD_COMPONENTS}
-						>
-							{event.content}
-						</ReactMarkdown>
+						<ActivityGroup key={group.id} items={group.items} isLive={groupIsLive} />
 					);
 				})}
-				{/* eslint-enable react/no-array-index-key */}
 
 				{/* While events are still streaming, append the typing dots so the
 				    user has a clear "more is coming" signal. Hidden when the agent

frontend/src/container/AIAssistant/components/ThinkingStep/ThinkingStep.tsx

@@ -5,11 +5,31 @@ import styles from './ThinkingStep.module.scss';
 
 interface ThinkingStepProps {
 	content: string;
+	/**
+	 * When false, label reads "Thought for a few seconds" — intentionally
+	 * vague because the API doesn't persist precise timing, so showing
+	 * seconds would be inconsistent between fresh and reloaded threads.
+	 */
+	isLive?: boolean;
+}
+
+/** Body of a thinking step — extracted so ActivityGroup can render it directly. */
+export function ThinkingContent({ content }: { content: string }): JSX.Element {
+	return (
+		<div className={styles.body}>
+			<p className={styles.content}>{content}</p>
+		</div>
+	);
+}
+
+export function thinkingLabel(isLive: boolean): string {
+	return isLive ? 'Thinking…' : 'Thought for a few seconds';
 }
 
 /** Collapsible thinking row — chevron + label, content in the expanded body. */
 export default function ThinkingStep({
 	content,
+	isLive = false,
 }: ThinkingStepProps): JSX.Element {
 	const [expanded, setExpanded] = useState(false);
 
@@ -23,14 +43,10 @@ export default function ThinkingStep({
 				) : (
 					<ChevronRight size={12} className={styles.chevron} />
 				)}
-				<span className={styles.label}>Thinking</span>
+				<span className={styles.label}>{thinkingLabel(isLive)}</span>
 			</div>
 
-			{expanded && (
-				<div className={styles.body}>
-					<p className={styles.content}>{content}</p>
-				</div>
-			)}
+			{expanded && <ThinkingContent content={content} />}
 		</div>
 	);
 }

frontend/src/container/AIAssistant/components/ToolCallStep/ToolCallStep.tsx

@@ -10,24 +10,58 @@ interface ToolCallStepProps {
 	toolCall: StreamingToolCall;
 }
 
+/**
+ * Server-supplied `displayText` is the human-friendly title the backend
+ * wants surfaced. Falls back to a derived label
+ * ("signoz_get_dashboard" → "Get Dashboard") when missing.
+ */
+export function getToolDisplayLabel(toolCall: StreamingToolCall): string {
+	const { toolName, displayText } = toolCall;
+	if (displayText && displayText.trim().length > 0) {
+		return displayText;
+	}
+	return toolName
+		.replace(/^[a-z]+_/, '') // strip prefix like "signoz_"
+		.replace(/_/g, ' ')
+		.replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+/** Body of a tool-call step — extracted so ActivityGroup can render it directly. */
+export function ToolCallContent({
+	toolCall,
+}: {
+	toolCall: StreamingToolCall;
+}): JSX.Element {
+	const { toolName, input, result, done } = toolCall;
+	return (
+		<div className={styles.body}>
+			<div className={styles.section}>
+				<span className={styles.sectionLabel}>Tool</span>
+				<span className={styles.toolName}>{toolName}</span>
+			</div>
+			<div className={styles.section}>
+				<span className={styles.sectionLabel}>Input</span>
+				<pre className={styles.json}>{JSON.stringify(input, null, 2)}</pre>
+			</div>
+			{done && result !== undefined && (
+				<div className={styles.section}>
+					<span className={styles.sectionLabel}>Output</span>
+					<pre className={styles.json}>
+						{typeof result === 'string' ? result : JSON.stringify(result, null, 2)}
+					</pre>
+				</div>
+			)}
+		</div>
+	);
+}
+
 /** Collapsible tool-call row — chevron + label, in/out detail in the body. */
 export default function ToolCallStep({
 	toolCall,
 }: ToolCallStepProps): JSX.Element {
 	const [expanded, setExpanded] = useState(false);
-	const { toolName, input, result, done, displayText } = toolCall;
-
-	// Prefer the server-supplied `displayText` from `ToolCallEventDTO` —
-	// it's the human-friendly title the backend wants surfaced. Fall back
-	// to a derived label ("signoz_get_dashboard" → "Get Dashboard") when
-	// the field is empty / null / missing.
-	const label =
-		displayText && displayText.trim().length > 0
-			? displayText
-			: toolName
-					.replace(/^[a-z]+_/, '') // strip prefix like "signoz_"
-					.replace(/_/g, ' ')
-					.replace(/\b\w/g, (c) => c.toUpperCase());
+	const { done } = toolCall;
+	const label = getToolDisplayLabel(toolCall);
 
 	const toggle = (): void => setExpanded((v) => !v);
 
@@ -44,26 +78,7 @@ export default function ToolCallStep({
 				<span className={styles.label}>{label}</span>
 			</div>
 
-			{expanded && (
-				<div className={styles.body}>
-					<div className={styles.section}>
-						<span className={styles.sectionLabel}>Tool</span>
-						<span className={styles.toolName}>{toolName}</span>
-					</div>
-					<div className={styles.section}>
-						<span className={styles.sectionLabel}>Input</span>
-						<pre className={styles.json}>{JSON.stringify(input, null, 2)}</pre>
-					</div>
-					{done && result !== undefined && (
-						<div className={styles.section}>
-							<span className={styles.sectionLabel}>Output</span>
-							<pre className={styles.json}>
-								{typeof result === 'string' ? result : JSON.stringify(result, null, 2)}
-							</pre>
-						</div>
-					)}
-				</div>
-			)}
+			{expanded && <ToolCallContent toolCall={toolCall} />}
 		</div>
 	);
 }

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx

@@ -1,4 +1,3 @@
-import { SIGNOZ_UPGRADE_PLAN_URL } from 'constants/app';
 import CreateAlertChannels from 'container/CreateAlertChannels';
 import { ChannelType } from 'container/CreateAlertChannels/config';
 import {
@@ -313,16 +312,6 @@ describe('Create Alert Channel (Normal User)', () => {
 				expect(screen.getByText('Microsoft Teams')).toBeInTheDocument();
 			});
 
-			it.skip('Should check if the upgrade plan message is shown', () => {
-				expect(screen.getByText('Upgrade to a Paid Plan')).toBeInTheDocument();
-				expect(
-					screen.getByText(/This feature is available for paid plans only./),
-				).toBeInTheDocument();
-				const link = screen.getByRole('link', { name: 'Click here' });
-				expect(link).toBeInTheDocument();
-				expect(link).toHaveAttribute('href', SIGNOZ_UPGRADE_PLAN_URL);
-				expect(screen.getByText(/to Upgrade/)).toBeInTheDocument();
-			});
 			it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
 				expect(
 					screen.getByRole('button', { name: 'button_save_channel' }),

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { TableColumnType as ColumnType, Tooltip } from 'antd';
+import { TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
 import { Progress } from '@signozhq/ui/progress';
-import { Badge } from '@signozhq/ui/badge';
 import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,
@@ -973,9 +972,13 @@ export const getEndPointsColumnsConfig = (
 					})()}
 					{isGroupedByAttribute
 						? text.split(',').map((value) => (
-								<Badge key={value} color="vanilla" className="endpoint-group-tag-item">
+								<Tag
+									key={value}
+									color={Color.BG_SLATE_100}
+									className="endpoint-group-tag-item"
+								>
 									{value === '' ? '<no-value>' : value}
-								</Badge>
+								</Tag>
 							))
 						: endPointName}
 				</div>

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -14,8 +14,8 @@ import {
 	Skeleton,
 	Table,
 	TableColumnsType as ColumnsType,
+	Tag,
 } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
@@ -434,7 +434,7 @@ export default function BillingContainer(): JSX.Element {
 					<Flex vertical>
 						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
-							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
+							{isFreeTrial ? <Tag color="success"> Free Trial </Tag> : ''}
 						</Typography.Title>
 
 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Row, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
@@ -67,7 +66,13 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 					<AlertTypeCard
 						key={option.selection}
 						title={option.title}
-						extra={option.isBeta ? <Badge color="robin">Beta</Badge> : undefined}
+						extra={
+							option.isBeta ? (
+								<Tag bordered={false} color="geekblue">
+									Beta
+								</Tag>
+							) : undefined
+						}
 						onClick={(e): void => {
 							onSelect(option.selection, isModifierKeyPressed(e));
 						}}

frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx

@@ -91,7 +91,6 @@ function ChartPreview({
 	const renderQBChartPreview = (): JSX.Element => (
 		<ChartPreviewComponent
 			headline={headline}
-			name=""
 			query={stagedQuery}
 			selectedInterval={globalSelectedInterval}
 			alertDef={alertDef}
@@ -107,7 +106,6 @@ function ChartPreview({
 	const renderPromAndChQueryChartPreview = (): JSX.Element => (
 		<ChartPreviewComponent
 			headline={headline}
-			name="Chart Preview"
 			query={stagedQuery}
 			alertDef={alertDef}
 			selectedInterval={globalSelectedInterval}

frontend/src/container/CreateAlertV2/QuerySection/__tests__/ChartPreview.test.tsx

@@ -17,7 +17,6 @@ import { CreateAlertProvider } from '../../context';
 import ChartPreview from '../ChartPreview/ChartPreview';
 
 const REQUESTS_PER_SEC = 'requests/sec';
-const CHART_PREVIEW_NAME = 'Chart Preview';
 const QUERY_TYPE_TEST_ID = 'query-type';
 const GRAPH_TYPE_TEST_ID = 'graph-type';
 const CHART_PREVIEW_COMPONENT_TEST_ID = 'chart-preview-component';
@@ -34,7 +33,6 @@ jest.mock(
 			return (
 				<div data-testid={CHART_PREVIEW_COMPONENT_TEST_ID}>
 					<div data-testid="headline">{props.headline}</div>
-					<div data-testid="name">{props.name}</div>
 					<div data-testid={QUERY_TYPE_TEST_ID}>{props.query?.queryType}</div>
 					<div data-testid="selected-interval">
 						{props.selectedInterval?.startTime}
@@ -175,12 +173,6 @@ describe('ChartPreview', () => {
 		);
 	});
 
-	it('renders QueryBuilder chart preview with empty name when query type is QUERY_BUILDER', () => {
-		renderChartPreview();
-
-		expect(screen.getByTestId('name')).toHaveTextContent('');
-	});
-
 	it('renders QueryBuilder chart preview with correct props', () => {
 		renderChartPreview();
 
@@ -191,7 +183,6 @@ describe('ChartPreview', () => {
 		expect(screen.getByTestId(GRAPH_TYPE_TEST_ID)).toHaveTextContent(
 			PANEL_TYPES.TIME_SERIES,
 		);
-		expect(screen.getByTestId('name')).toHaveTextContent('');
 		expect(screen.getByTestId('headline')).toBeInTheDocument();
 		expect(screen.getByTestId('selected-interval')).toBeInTheDocument();
 	});
@@ -214,7 +205,6 @@ describe('ChartPreview', () => {
 		expect(
 			screen.getByTestId(CHART_PREVIEW_COMPONENT_TEST_ID),
 		).toBeInTheDocument();
-		expect(screen.getByTestId('name')).toHaveTextContent(CHART_PREVIEW_NAME);
 		expect(screen.getByTestId(QUERY_TYPE_TEST_ID)).toHaveTextContent(
 			EQueryType.PROM,
 		);
@@ -238,7 +228,6 @@ describe('ChartPreview', () => {
 		expect(
 			screen.getByTestId(CHART_PREVIEW_COMPONENT_TEST_ID),
 		).toBeInTheDocument();
-		expect(screen.getByTestId('name')).toHaveTextContent(CHART_PREVIEW_NAME);
 		expect(screen.getByTestId(QUERY_TYPE_TEST_ID)).toHaveTextContent(
 			EQueryType.CLICKHOUSE,
 		);

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -16,8 +16,7 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
@@ -507,9 +506,9 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 			{(tags?.length || 0) > 0 && (
 				<div className="dashboard-tags">
 					{tags?.map((tag) => (
-						<Badge key={tag} className="tag" color="vanilla">
+						<Tag key={tag} className="tag">
 							{tag}
-						</Badge>
+						</Tag>
 					))}
 				</div>
 			)}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -359,7 +359,7 @@
 				flex-flow: wrap;
 				gap: 8px;
 
-				[data-slot='badge'] {
+				.ant-tag {
 					height: 30px;
 					color: var(--l1-foreground);
 					font-family: 'Space Mono';

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -5,8 +5,7 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Input, Select } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Collapse, Input, Select, Tag } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
@@ -543,9 +542,9 @@ function VariableItem({
 								}}
 							>
 								Dynamic
-								<Badge color="robin" className="sidenav-beta-tag">
+								<Tag bordered={false} className="sidenav-beta-tag" color="geekblue">
 									Beta
-								</Badge>
+								</Tag>
 							</Button>
 							<Button
 								type="text"
@@ -600,9 +599,9 @@ function VariableItem({
 								}}
 							>
 								Query
-								<Badge color="amber" className="sidenav-beta-tag">
+								<Tag bordered={false} className="sidenav-beta-tag" color="warning">
 									Not Recommended
-								</Badge>
+								</Tag>
 								<div onClick={(e): void => e.stopPropagation()}>
 									<TextToolTip
 										text="Learn why we don't recommend"
@@ -734,9 +733,7 @@ function VariableItem({
 										<Typography style={{ color: orange[5] }}>{errorPreview}</Typography>
 									) : (
 										map(previewValues, (value, idx) => (
-											<Badge key={`${value}${idx}`} color="vanilla">
-												{value.toString()}
-											</Badge>
+											<Tag key={`${value}${idx}`}>{value.toString()}</Tag>
 										))
 									)}
 								</div>

frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/index.tsx

@@ -1,5 +1,4 @@
 import { Dispatch, SetStateAction, useState } from 'react';
-import { X } from '@signozhq/icons';
 import { Col, Tooltip } from 'antd';
 import Input from 'components/Input';
 
@@ -61,7 +60,12 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 				const isLongTag = tag.length > 20;
 
 				const tagElem = (
-					<NewTagContainer key={tag} color="vanilla" className="tag-container">
+					<NewTagContainer
+						closable
+						key={tag}
+						onClose={(): void => handleClose(tag)}
+						className="tag-container"
+					>
 						<span
 							onDoubleClick={(e): void => {
 								setEditInputIndex(index);
@@ -71,11 +75,6 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 						>
 							{isLongTag ? `${tag.slice(0, 20)}...` : tag}
 						</span>
-						<X
-							size={12}
-							style={{ cursor: 'pointer', marginInlineStart: 4 }}
-							onClick={(): void => handleClose(tag)}
-						/>
 					</NewTagContainer>
 				);
 

frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/styles.ts

@@ -1,5 +1,4 @@
-import { Col } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Col, Tag } from 'antd';
 import styled from 'styled-components';
 
 export const TagsContainer = styled.div`
@@ -9,7 +8,7 @@ export const TagsContainer = styled.div`
 	gap: 6px;
 `;
 
-export const NewTagContainer = styled(Badge)`
+export const NewTagContainer = styled(Tag)`
 	&&& {
 		display: flex;
 		justify-content: space-between;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -17,10 +17,11 @@ import { getTimeRange } from 'utils/getTimeRange';
 import BarChart from '../../charts/BarChart/BarChart';
 import ChartManager from '../../components/ChartManager/ChartManager';
 import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
-import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
+import { prepareBarPanelConfig } from './utils';
 
 import '../Panel.styles.scss';
 import TooltipFooter from '../components/TooltipFooter';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 
 function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -99,7 +100,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		if (!queryResponse?.data?.payload) {
 			return [];
 		}
-		return prepareBarPanelData(queryResponse?.data?.payload);
+		return prepareChartData(queryResponse?.data?.payload);
 	}, [queryResponse?.data?.payload]);
 
 	const layoutChildren = useMemo(() => {

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -11,21 +11,10 @@ import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { AlignedData } from 'uplot';
 
 import { PanelMode } from '../types';
-import { fillMissingXAxisTimestamps, getXAxisTimestamps } from '../utils';
 import { buildBaseConfig } from '../utils/baseConfigBuilder';
 
-export function prepareBarPanelData(
-	apiResponse: MetricRangePayloadProps,
-): AlignedData {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-	return [timestampArr, ...yAxisValuesArr];
-}
-
 export function prepareBarPanelConfig({
 	widget,
 	isDarkMode,

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -17,10 +17,11 @@ import { useTimezone } from 'providers/Timezone';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
-import { prepareChartData, prepareUPlotConfig } from '../TimeSeriesPanel/utils';
+import { prepareUPlotConfig } from '../TimeSeriesPanel/utils';
 
 import '../Panel.styles.scss';
 import TooltipFooter from '../components/TooltipFooter';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 
 function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const {

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/__tests__/utils.test.ts

@@ -6,7 +6,8 @@ import {
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { PanelMode } from '../../types';
-import { prepareChartData, prepareUPlotConfig } from '../utils';
+import { prepareUPlotConfig } from '../utils';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 
 jest.mock(
 	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -1,10 +1,6 @@
 import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	fillMissingXAxisTimestamps,
-	getXAxisTimestamps,
-} from 'container/DashboardContainer/visualization/panels/utils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -15,42 +11,15 @@ import {
 	LineStyle,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { isInvalidPlotValue } from 'lib/uPlotV2/utils/dataUtils';
+import { hasSingleVisiblePoint } from 'lib/uPlotV2/utils/dataUtils';
 import get from 'lodash-es/get';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
 
 import { PanelMode } from '../types';
 import { buildBaseConfig } from '../utils/baseConfigBuilder';
 
-export const prepareChartData = (
-	apiResponse: MetricRangePayloadProps,
-): uPlot.AlignedData => {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-
-	return [timestampArr, ...yAxisValuesArr];
-};
-
-function hasSingleVisiblePointForSeries(series: QueryData): boolean {
-	const rawValues = series.values ?? [];
-	let validPointCount = 0;
-
-	for (const [, rawValue] of rawValues) {
-		if (!isInvalidPlotValue(rawValue)) {
-			validPointCount += 1;
-			if (validPointCount > 1) {
-				return false;
-			}
-		}
-	}
-
-	return true;
-}
-
 export const prepareUPlotConfig = ({
 	widget,
 	isDarkMode,
@@ -107,7 +76,7 @@ export const prepareUPlotConfig = ({
 	}
 
 	apiResponse.data.result.forEach((series) => {
-		const hasSingleValidPoint = hasSingleVisiblePointForSeries(series);
+		const hasSingleValidPoint = hasSingleVisiblePoint(series.values);
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query

frontend/src/container/FormAlertRules/ChartPreview/ChartContent.tsx

@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import uPlot from 'uplot';
+
+import {
+	AlertChartPanelType,
+	buildAlertChartConfig,
+	buildChartId,
+} from './utils';
+
+// Panel types that render through the UPlotConfigBuilder pipeline.
+// To support a new modern-chart panel type, add an entry here and extend
+// `AlertChartPanelType` / `buildAlertChartConfig` to handle its series setup.
+const SUPPORTED_CHARTS: Record<
+	AlertChartPanelType,
+	typeof TimeSeries | typeof BarChart
+> = {
+	[PANEL_TYPES.TIME_SERIES]: TimeSeries,
+	[PANEL_TYPES.BAR]: BarChart,
+};
+
+const isSupportedPanelType = (
+	panelType: PANEL_TYPES,
+): panelType is AlertChartPanelType => panelType in SUPPORTED_CHARTS;
+
+export interface ChartContentProps {
+	panelType: PANEL_TYPES;
+	alertId?: string;
+	query: Query;
+	apiResponse?: MetricRangePayloadProps;
+	data: uPlot.AlignedData;
+	thresholds: ThresholdProps[];
+	yAxisUnit: string;
+	legendPosition: LegendPosition;
+	isDarkMode: boolean;
+	timezone: Timezone;
+	width: number;
+	height: number;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+	onDragSelect: (start: number, end: number) => void;
+}
+
+export default function ChartContent({
+	panelType,
+	alertId,
+	query,
+	thresholds,
+	apiResponse,
+	data,
+	yAxisUnit,
+	isDarkMode,
+	timezone,
+	minTimeScale,
+	maxTimeScale,
+	onDragSelect,
+	width,
+	height,
+	legendPosition,
+}: ChartContentProps): JSX.Element | null {
+	const supported = isSupportedPanelType(panelType);
+
+	const config = useMemo(
+		() =>
+			buildAlertChartConfig({
+				id: buildChartId(alertId),
+				panelType: panelType as AlertChartPanelType,
+				query,
+				thresholds,
+				apiResponse,
+				yAxisUnit,
+				isDarkMode,
+				timezone,
+				minTimeScale,
+				maxTimeScale,
+				onDragSelect,
+			}),
+		[
+			alertId,
+			panelType,
+			query,
+			thresholds,
+			apiResponse,
+			yAxisUnit,
+			isDarkMode,
+			timezone,
+			minTimeScale,
+			maxTimeScale,
+			onDragSelect,
+		],
+	);
+
+	if (!supported) {
+		return null;
+	}
+
+	const Component = SUPPORTED_CHARTS[panelType];
+
+	return (
+		<Component
+			config={config}
+			data={data}
+			width={width}
+			height={height}
+			legendConfig={{ position: legendPosition }}
+			canPinTooltip
+			yAxisUnit={yAxisUnit}
+			timezone={timezone}
+		/>
+	);
+}

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -15,8 +15,6 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
 import { INITIAL_CRITICAL_THRESHOLD } from 'container/CreateAlertV2/context/constants';
 import { Threshold } from 'container/CreateAlertV2/context/types';
-import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
-import GridPanelSwitch from 'container/GridPanelSwitch';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { getFormatNameByOptionId } from 'container/NewWidget/RightContainer/alertFomatCategories';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
@@ -32,8 +30,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import history from 'lib/history';
-import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
@@ -41,24 +38,27 @@ import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { AlertDef } from 'types/api/alerts/def';
-import { LegendPosition } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import uPlot from 'uplot';
 import { getGraphType } from 'utils/getGraphType';
 import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 import { getTimeRange } from 'utils/getTimeRange';
 
 import { AlertDetectionTypes } from '..';
+import ChartContent from './ChartContent';
 import { ChartContainer } from './styles';
 import { getThresholds } from './utils';
 
 import './ChartPreview.styles.scss';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+
+// Height reserved for the `.chart-preview-header` strip rendered above the chart.
+const CHART_PREVIEW_HEADER_HEIGHT = 48;
+const CHART_PREVIEW_CONTAINER_PADDING = 16;
 
 export interface ChartPreviewProps {
-	name: string;
 	query: Query | null;
 	graphType?: PANEL_TYPES;
 	selectedTime?: timePreferenceType;
@@ -77,7 +77,6 @@ export interface ChartPreviewProps {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function ChartPreview({
-	name,
 	query,
 	graphType = PANEL_TYPES.TIME_SERIES,
 	selectedTime = 'GLOBAL_TIME',
@@ -113,14 +112,6 @@ function ChartPreview({
 
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const [graphVisibility, setGraphVisibility] = useState<boolean[]>([]);
-	const legendScrollPositionRef = useRef<{
-		scrollTop: number;
-		scrollLeft: number;
-	}>({
-		scrollTop: 0,
-		scrollLeft: 0,
-	});
 	const { currentQuery } = useQueryBuilder();
 
 	const {
@@ -219,18 +210,6 @@ function ChartPreview({
 		setMaxTimeScale(endTime);
 	}, [maxTime, minTime, globalSelectedInterval, queryResponse, setQueryStatus]);
 
-	// Initialize graph visibility from localStorage
-	useEffect(() => {
-		if (queryResponse?.data?.payload?.data?.result) {
-			const { graphVisibilityStates: localStoredVisibilityState } =
-				getLocalStorageGraphVisibilityState({
-					apiResponse: queryResponse.data.payload.data.result,
-					name: 'alert-chart-preview',
-				});
-			setGraphVisibility(localStoredVisibilityState);
-		}
-	}, [queryResponse?.data?.payload?.data?.result]);
-
 	if (queryResponse.data && graphType === PANEL_TYPES.BAR) {
 		const sortedSeriesData = getSortedSeriesData(
 			queryResponse.data?.payload.data.result,
@@ -288,62 +267,17 @@ function ChartPreview({
 		return LegendPosition.RIGHT;
 	}, [queryResponse?.data?.payload?.data?.result?.length, showSideLegend]);
 
-	const options = useMemo(
-		() =>
-			getUPlotChartOptions({
-				id: 'alert_legend_widget',
-				yAxisUnit,
-				apiResponse: queryResponse?.data?.payload,
-				dimensions: {
-					height: containerDimensions?.height ? containerDimensions.height - 48 : 0,
-					width: containerDimensions?.width,
-				},
-				minTimeScale,
-				maxTimeScale,
-				isDarkMode,
-				onDragSelect,
-				thresholds: getThresholds(thresholds, t, optionName, yAxisUnit),
-				softMax: null,
-				softMin: null,
-				panelType: graphType,
-				tzDate: (timestamp: number) =>
-					uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
-				timezone: timezone.value,
-				currentQuery,
-				query: query || currentQuery,
-				graphsVisibilityStates: graphVisibility,
-				setGraphsVisibilityStates: setGraphVisibility,
-				enhancedLegend: true,
-				legendPosition,
-				legendScrollPosition: legendScrollPositionRef.current,
-				setLegendScrollPosition: (position: {
-					scrollTop: number;
-					scrollLeft: number;
-				}) => {
-					legendScrollPositionRef.current = position;
-				},
-			}),
-		[
-			yAxisUnit,
-			queryResponse?.data?.payload,
-			containerDimensions,
-			minTimeScale,
-			maxTimeScale,
-			isDarkMode,
-			onDragSelect,
-			thresholds,
-			t,
-			optionName,
-			graphType,
-			timezone.value,
-			currentQuery,
-			query,
-			graphVisibility,
-			legendPosition,
-		],
+	const resolvedThresholds = useMemo(
+		() => getThresholds(thresholds, t, optionName, yAxisUnit),
+		[thresholds, t, optionName, yAxisUnit],
 	);
 
-	const chartData = getUPlotChartData(queryResponse?.data?.payload);
+	const chartData = useMemo(() => {
+		if (!queryResponse?.data?.payload) {
+			return [];
+		}
+		return prepareChartData(queryResponse?.data?.payload);
+	}, [queryResponse?.data?.payload]);
 
 	const hasResultData = !!queryResponse?.data?.payload?.data?.result?.length;
 
@@ -361,6 +295,14 @@ function ChartPreview({
 			?.active || false;
 
 	const isWarning = !isEmpty(queryResponse.data?.warning);
+
+	const chartWidth = containerDimensions?.width
+		? containerDimensions.width - CHART_PREVIEW_CONTAINER_PADDING
+		: 0;
+	const chartHeight = containerDimensions?.height
+		? containerDimensions.height - CHART_PREVIEW_HEADER_HEIGHT
+		: 0;
+
 	return (
 		<div className="alert-chart-container" ref={graphRef}>
 			<ChartContainer>
@@ -384,16 +326,22 @@ function ChartPreview({
 					)}
 
 					{chartDataAvailable && !isAnomalyDetectionAlert && (
-						<GridPanelSwitch
-							options={options}
+						<ChartContent
 							panelType={graphType}
+							alertId={alertDef?.id}
+							query={query || currentQuery}
+							apiResponse={queryResponse.data?.payload}
 							data={chartData}
-							name={name || 'Chart Preview'}
-							panelData={
-								queryResponse.data?.payload?.data?.newResult?.data?.result || []
-							}
-							query={query || initialQueriesMap.metrics}
+							thresholds={resolvedThresholds}
 							yAxisUnit={yAxisUnit}
+							legendPosition={legendPosition}
+							isDarkMode={isDarkMode}
+							timezone={timezone}
+							width={chartWidth}
+							height={chartHeight}
+							minTimeScale={minTimeScale}
+							maxTimeScale={maxTimeScale}
+							onDragSelect={onDragSelect}
 						/>
 					)}
 

frontend/src/container/FormAlertRules/ChartPreview/utils.ts

@@ -1,6 +1,10 @@
 import { Color } from '@signozhq/design-tokens';
+import { ExecStats } from 'api/v5/v5';
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { Threshold } from 'container/CreateAlertV2/context/types';
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import {
 	BooleanFormats,
@@ -11,6 +15,20 @@ import {
 	TimeFormats,
 } from 'container/NewWidget/RightContainer/types';
 import { TFunction } from 'i18next';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import {
+	DrawStyle,
+	FillMode,
+	LineInterpolation,
+	LineStyle,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { hasSingleVisiblePoint } from 'lib/uPlotV2/utils/dataUtils';
+import { get } from 'lodash-es';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
 	dataFormatConfig,
@@ -20,6 +38,8 @@ import {
 	timeUnitsConfig,
 } from './config';
 
+const CHART_ID_PREFIX = 'alert_legend_widget';
+
 export function covertIntoDataFormats({
 	value,
 	sourceUnit,
@@ -142,3 +162,110 @@ export const getThresholds = (
 	});
 	return thresholdsToReturn;
 };
+
+export type AlertChartPanelType = PANEL_TYPES.TIME_SERIES | PANEL_TYPES.BAR;
+
+export interface BuildAlertChartConfigParams {
+	id: string;
+	panelType: AlertChartPanelType;
+	query: Query;
+	thresholds: ThresholdProps[];
+	apiResponse?: MetricRangePayloadProps;
+	yAxisUnit?: string;
+	isDarkMode: boolean;
+	timezone: Timezone;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+	onDragSelect: (startTime: number, endTime: number) => void;
+	onClick?: OnClickPluginOpts['onClick'];
+}
+
+export const buildAlertChartConfig = ({
+	id,
+	panelType,
+	query,
+	thresholds,
+	apiResponse,
+	yAxisUnit,
+	isDarkMode,
+	timezone,
+	minTimeScale,
+	maxTimeScale,
+	onDragSelect,
+	onClick,
+}: BuildAlertChartConfigParams): UPlotConfigBuilder => {
+	const stepIntervals: ExecStats['stepIntervals'] = get(
+		apiResponse,
+		'data.newResult.meta.stepIntervals',
+		{},
+	);
+	const stepIntervalValues = Object.values(stepIntervals);
+	const minStepInterval = stepIntervalValues.length
+		? Math.min(...stepIntervalValues)
+		: undefined;
+
+	const builder = buildBaseConfig({
+		id,
+		panelType,
+		panelMode: PanelMode.DASHBOARD_VIEW,
+		thresholds,
+		apiResponse,
+		yAxisUnit,
+		isDarkMode,
+		timezone,
+		minTimeScale,
+		maxTimeScale,
+		stepInterval: minStepInterval,
+		onDragSelect,
+		onClick,
+	});
+
+	const seriesList = apiResponse?.data?.result;
+	if (!seriesList?.length) {
+		return builder;
+	}
+
+	const isBar = panelType === PANEL_TYPES.BAR;
+
+	seriesList.forEach((series) => {
+		const baseLabelName = getLabelName(
+			series.metric,
+			series.queryName || '',
+			series.legend || '',
+		);
+		const label = query ? getLegend(series, query, baseLabelName) : baseLabelName;
+
+		if (isBar) {
+			builder.addSeries({
+				scaleKey: 'y',
+				drawStyle: DrawStyle.Bar,
+				label,
+				colorMapping: {},
+				isDarkMode,
+				stepInterval: get(stepIntervals, series.queryName, undefined),
+			});
+			return;
+		}
+
+		const hasSingleValidPoint = hasSingleVisiblePoint(series.values);
+		builder.addSeries({
+			scaleKey: 'y',
+			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
+			label,
+			colorMapping: {},
+			spanGaps: true,
+			lineStyle: LineStyle.Solid,
+			lineInterpolation: LineInterpolation.Spline,
+			showPoints: hasSingleValidPoint,
+			pointSize: 5,
+			fillMode: FillMode.None,
+			isDarkMode,
+			metric: series.metric,
+		});
+	});
+
+	return builder;
+};
+
+export const buildChartId = (id?: string): string =>
+	id ? `${CHART_ID_PREFIX}_${id}` : CHART_ID_PREFIX;

frontend/src/container/FormAlertRules/index.tsx

@@ -719,7 +719,6 @@ function FormAlertRules({
 					panelType={panelType || PANEL_TYPES.TIME_SERIES}
 				/>
 			}
-			name=""
 			query={stagedQuery}
 			selectedInterval={globalSelectedInterval}
 			alertDef={alertDef}
@@ -739,7 +738,6 @@ function FormAlertRules({
 					panelType={panelType || PANEL_TYPES.TIME_SERIES}
 				/>
 			}
-			name="Chart Preview"
 			query={stagedQuery}
 			alertDef={alertDef}
 			selectedInterval={globalSelectedInterval}

frontend/src/container/FormAlertRules/labels/QueryChip.tsx

@@ -1,4 +1,3 @@
-import { X } from '@signozhq/icons';
 import { QueryChipContainer, QueryChipItem } from './styles';
 import { ILabelRecord } from './types';
 
@@ -14,15 +13,11 @@ export default function QueryChip({
 	const { key, value } = queryData;
 	return (
 		<QueryChipContainer>
-			<QueryChipItem color="vanilla">
+			<QueryChipItem
+				closable={key !== 'severity' && key !== 'description'}
+				onClose={(): void => onRemove(key)}
+			>
 				{key}: {value}
-				{key !== 'severity' && key !== 'description' && (
-					<X
-						size={12}
-						style={{ cursor: 'pointer', marginInlineStart: 4 }}
-						onClick={(): void => onRemove(key)}
-					/>
-				)}
 			</QueryChipItem>
 		</QueryChipContainer>
 	);

frontend/src/container/FormAlertRules/labels/styles.ts

@@ -1,5 +1,5 @@
 import { grey } from '@ant-design/colors';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import styled from 'styled-components';
 
 interface SearchContainerProps {
@@ -29,6 +29,6 @@ export const QueryChipContainer = styled.span`
 	}
 `;
 
-export const QueryChipItem = styled(Badge)`
+export const QueryChipItem = styled(Tag)`
 	margin-right: 0.1rem;
 `;

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Button, Skeleton } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Skeleton, Tag } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useListRules } from 'api/generated/services/rules';
 import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
@@ -178,14 +177,12 @@ export default function AlertRules({
 						</div>
 
 						<div className="alert-rule-item-description home-data-item-tag">
-							<Badge color="sienna" variant="outline">
-								{rule?.labels?.severity}
-							</Badge>
+							<Tag color={rule?.labels?.severity}>{rule?.labels?.severity}</Tag>
 
 							{rule.state === 'firing' && (
-								<Badge color="cherry" variant="outline" className="firing-tag">
+								<Tag color="red" className="firing-tag">
 									{rule.state}
-								</Badge>
+								</Tag>
 							)}
 						</div>
 					</div>

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Skeleton } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Skeleton, Tag } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
@@ -149,9 +148,9 @@ export default function Dashboards({
 
 							<div className="alert-rule-item-description home-data-item-tag">
 								{dashboard.data.tags?.map((tag) => (
-									<Badge color="sienna" variant="outline" key={tag}>
+									<Tag color={tag} key={tag}>
 										{tag}
-									</Badge>
+									</Tag>
 								))}
 							</div>
 						</div>

frontend/src/container/Home/Home.styles.scss

@@ -574,7 +574,30 @@
 
 		.home-data-item-tag {
 			display: flex;
-			gap: 6px;
+
+			.ant-tag {
+				display: flex;
+				padding: 2px 12px;
+				justify-content: center;
+				align-items: center;
+				gap: 4px;
+				border-radius: 20px;
+				border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+				background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+
+				color: var(--bg-sienna-400);
+				text-align: center;
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+
+			.firing-tag {
+				color: var(--bg-sakura-500);
+				background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+			}
 		}
 
 		&.services-list-container {

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Skeleton } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Skeleton, Tag } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
 import ROUTES from 'constants/routes';
@@ -250,9 +249,9 @@ export default function SavedViews({
 								}
 
 								return (
-									<Badge color="sienna" key={tag}>
+									<Tag color={tag} key={tag}>
 										{tag}
-									</Badge>
+									</Tag>
 								);
 							})}
 						</div>

frontend/src/container/InfraMonitoringHosts/constants.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import {
@@ -52,14 +52,14 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 		label: 'STATUS',
 		getValue: (h): string => (h.active ? 'ACTIVE' : 'INACTIVE'),
 		render: (value, h): React.ReactNode => (
-			<Badge
-				variant="outline"
+			<Tag
 				className={`${infraHostsStyles.infraMonitoringTags} ${
 					h.active ? infraHostsStyles.tagsActive : infraHostsStyles.tagsInactive
 				}`}
+				bordered
 			>
 				{value}
-			</Badge>
+			</Tag>
 		),
 	},
 	{
@@ -67,9 +67,9 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 		getValue: (h): string => h.os || '-',
 		render: (value): React.ReactNode =>
 			value !== '-' ? (
-				<Badge variant="outline" className={infraHostsStyles.infraMonitoringTags}>
+				<Tag className={infraHostsStyles.infraMonitoringTags} bordered>
 					{value}
-				</Badge>
+				</Tag>
 			) : (
 				<Typography.Text>-</Typography.Text>
 			),

frontend/src/container/InfraMonitoringHosts/table.config.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag, Tooltip } from 'antd';
 import { HostData } from 'api/infraMonitoring/getHostLists';
 import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { getGroupByEl } from 'container/InfraMonitoringK8s/Base/utils';
@@ -93,13 +92,14 @@ export const hostColumnsConfig: TableColumnDef<HostData>[] = [
 		cell: ({ value }): React.ReactNode => {
 			const active = value as boolean;
 			return (
-				<Badge
+				<Tag
+					bordered
 					className={`${styles.statusTag} ${
 						active ? styles.statusTagActive : styles.statusTagInactive
 					}`}
 				>
 					{active ? 'ACTIVE' : 'INACTIVE'}
-				</Badge>
+				</Tag>
 			);
 		},
 	},

frontend/src/container/InfraMonitoringK8s/Base/K8sHeader.module.scss

@@ -14,7 +14,7 @@
 			font-size: 12px;
 		}
 
-		:global([data-slot='badge'] .ant-typography) {
+		:global(.ant-tag .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.module.scss

@@ -19,7 +19,7 @@
 			font-size: 12px;
 		}
 
-		:global([data-slot='badge'] .ant-typography) {
+		:global(.ant-tag .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogs.module.scss

@@ -19,7 +19,7 @@
 			font-size: 12px;
 		}
 
-		:global([data-slot='badge'] .ant-typography) {
+		:global(.ant-tag .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.module.scss

@@ -19,7 +19,7 @@
 			font-size: 12px;
 		}
 
-		:global([data-slot='badge'] .ant-typography) {
+		:global(.ant-tag .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/traceListColumns.tsx

@@ -1,5 +1,4 @@
-import { TableColumnsType as ColumnsType } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { TableColumnsType as ColumnsType, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
@@ -94,9 +93,9 @@ export const getTraceListColumns = (
 				if (primaryKey === 'httpMethod' || primaryKey === 'responseStatusCode') {
 					return (
 						<BlockLink to={getTraceLink(itemData)} openInNewTab>
-							<Badge data-testid={key} color="sakura">
+							<Tag data-testid={key} color="magenta">
 								{getValueForKey(itemData, key)}
-							</Badge>
+							</Tag>
 						</BlockLink>
 					);
 				}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/entityDetails.styles.scss

@@ -213,7 +213,7 @@
 					font-size: 12px;
 				}
 
-				[data-slot='badge'] .ant-typography {
+				.ant-tag .ant-typography {
 					font-size: 12px;
 				}
 			}
@@ -349,7 +349,7 @@
 				font-size: 12px;
 			}
 
-			[data-slot='badge'] .ant-typography {
+			.ant-tag .ant-typography {
 				font-size: 12px;
 			}
 		}

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -18,6 +18,7 @@ import {
 	Table,
 	TablePaginationConfig,
 	TableProps as AntDTableProps,
+	Tag,
 	Tooltip,
 } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
@@ -1054,10 +1055,7 @@ function MultiIngestionSettings(): JSX.Element {
 													<div className="ingestion-key-tags">
 														{APIKey.tags.map((tag, index) => (
 															// eslint-disable-next-line react/no-array-index-key
-															<Badge key={`${tag}-${index}`} color="vanilla">
-																{' '}
-																{tag}{' '}
-															</Badge>
+															<Tag key={`${tag}-${index}`}> {tag} </Tag>
 														))}
 													</div>
 												</div>

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -310,7 +310,9 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					return <Typography>-</Typography>;
 				}
 
-				return <LabelColumn labels={withOutSeverityKeys} value={value} />;
+				return (
+					<LabelColumn labels={withOutSeverityKeys} value={value} color="magenta" />
+				);
 			},
 		},
 	];

frontend/src/container/ListAlertRules/TableComponents/Status.tsx

@@ -1,46 +1,26 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
 
 function Status({ status }: StatusProps): JSX.Element {
 	switch (status) {
 		case 'inactive': {
-			return (
-				<Badge color="forest" variant="outline">
-					OK
-				</Badge>
-			);
+			return <Tag color="green">OK</Tag>;
 		}
 
 		case 'pending': {
-			return (
-				<Badge color="amber" variant="outline">
-					Pending
-				</Badge>
-			);
+			return <Tag color="orange">Pending</Tag>;
 		}
 
 		case 'firing': {
-			return (
-				<Badge color="cherry" variant="outline">
-					Firing
-				</Badge>
-			);
+			return <Tag color="red">Firing</Tag>;
 		}
 
 		case 'disabled': {
-			return (
-				<Badge color="vanilla" variant="outline">
-					Disabled
-				</Badge>
-			);
+			return <Tag>Disabled</Tag>;
 		}
 
 		default: {
-			return (
-				<Badge color="vanilla" variant="outline">
-					Unknown
-				</Badge>
-			);
+			return <Tag color="default">Unknown</Tag>;
 		}
 	}
 }

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -22,9 +22,9 @@ import {
 	Popover,
 	Skeleton,
 	Table,
+	Tag,
 	Tooltip,
 } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { TableProps } from 'antd/lib';
@@ -420,15 +420,15 @@ function DashboardsList(): JSX.Element {
 								{dashboard?.tags && dashboard.tags.length > 0 && (
 									<div className="dashboard-tags">
 										{dashboard.tags.slice(0, 3).map((tag) => (
-											<Badge className="tag" color="vanilla" key={tag}>
+											<Tag className="tag" key={tag}>
 												{tag}
-											</Badge>
+											</Tag>
 										))}
 
 										{dashboard.tags.length > 3 && (
-											<Badge className="tag" color="vanilla" key={dashboard.tags[3]}>
+											<Tag className="tag" key={dashboard.tags[3]}>
 												+ <span> {dashboard.tags.length - 3} </span>
-											</Badge>
+											</Tag>
 										)}
 									</div>
 								)}

frontend/src/container/LogDetailedView/FieldRenderer.styles.ts

@@ -1,7 +1,7 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import styled from 'styled-components';
 
-export const TagContainer = styled(Badge)`
+export const TagContainer = styled(Tag)`
 	&&& {
 		border-color: var(--bg-slate-400);
 		border-radius: 0.25rem;

frontend/src/container/LogDetailedView/Overview.styles.scss

@@ -84,7 +84,7 @@
 		padding-top: 12px;
 	}
 
-	[data-slot='badge'] {
+	.ant-tag-borderless {
 		border-radius: 2px;
 		background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
 	}

frontend/src/container/LogDetailedView/Overview.tsx

@@ -3,8 +3,7 @@ import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse, Divider, Input } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Collapse, Divider, Input, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
@@ -105,11 +104,11 @@ function Overview({
 					{
 						key: '1',
 						label: (
-							<Badge color="vanilla">
+							<Tag bordered={false}>
 								<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
 									body
 								</Typography.Text>
-							</Badge>
+							</Tag>
 						),
 						children: (
 							<div className="logs-body-content">
@@ -143,7 +142,7 @@ function Overview({
 								</div>
 							</div>
 						),
-						// extra: <Badge className="tag" color="vanilla">JSON</Badge>,
+						// extra: <Tag className="tag">JSON</Tag>,
 						className: 'collapse-content',
 					},
 				]}
@@ -164,11 +163,11 @@ function Overview({
 								className="attribute-tab-header"
 								onClick={toogleAttributePanelOpenState}
 							>
-								<Badge color="vanilla">
+								<Tag bordered={false}>
 									<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
 										Attributes
 									</Typography.Text>
-								</Badge>
+								</Tag>
 
 								{isAttributesExpanded && (
 									<Button

frontend/src/container/LogExplorerQuerySection/LogsExplorerQuerySection.styles.scss

@@ -11,7 +11,7 @@
 			font-size: 12px;
 		}
 
-		[data-slot='badge'] .ant-typography {
+		.ant-tag .ant-typography {
 			font-size: 12px;
 		}
 	}

frontend/src/container/MySettings/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
-import { Radio, RadioChangeEvent } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Radio, RadioChangeEvent, Tag } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
@@ -65,7 +64,9 @@ function MySettings(): JSX.Element {
 			label: (
 				<div className="theme-option">
 					<Sun size={12} data-testid="light-theme-icon" /> Light{' '}
-					<Badge color="robin">Beta</Badge>
+					<Tag bordered={false} color="geekblue">
+						Beta
+					</Tag>
 				</div>
 			),
 			value: 'light',

frontend/src/container/NewWidget/styles.ts

@@ -1,4 +1,4 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag as AntDTag } from 'antd';
 import styled from 'styled-components';
 
 export const Container = styled.div`
@@ -20,6 +20,6 @@ export const PanelContainer = styled.div`
 	overflow-y: auto;
 `;
 
-export const Tag = styled(Badge)`
+export const Tag = styled(AntDTag)`
 	margin: 0;
 `;

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss

@@ -295,37 +295,6 @@
 
 		.slider-container {
 			width: calc(100% - 16px);
-
-			.ant-slider .ant-slider-mark {
-				margin-top: 12px;
-
-				.ant-slider-mark-text {
-					color: var(--l3-foreground);
-					font-variant-numeric: lining-nums tabular-nums stacked-fractions
-						slashed-zero;
-					font-feature-settings:
-						'dlig' on,
-						'salt' on,
-						'cpsp' on,
-						'case' on;
-					font-family: Inter;
-					font-size: 11px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 100%;
-				}
-			}
-
-			&.logs-slider-container {
-				.ant-slider .ant-slider-mark {
-					.ant-slider-mark-text {
-						&:last-child {
-							left: calc(100% - 8px) !important;
-							white-space: nowrap;
-						}
-					}
-				}
-			}
 		}
 
 		.do-later-container {

frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
-import { Slider } from 'antd';
+import { Slider } from '@signozhq/ui/slider';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { ArrowRight, LoaderCircle, Minus } from '@signozhq/icons';
@@ -204,23 +204,23 @@ function OptimiseSignozNeeds({
 						<label className="question-slider" htmlFor="organisationName">
 							Logs / Day
 						</label>
-						<div className="slider-container logs-slider-container">
+						<div className="slider-container">
 							<div>
 								<Slider
 									min={0}
 									max={100}
 									value={sliderValues.logsPerDay}
 									marks={marks}
-									onChange={(value: number): void =>
-										handleSliderChange('logsPerDay', value)
+									onChange={(value): void =>
+										handleSliderChange('logsPerDay', value as number)
 									}
 									styles={{
-										track: {
-											background: '#4E74F8',
+										range: {
+											backgroundColor: '#4E74F8',
 										},
 									}}
 									tooltip={{
-										formatter: (): string => `${logsPerDayValue.toLocaleString()} GB`, // Show whole number
+										formatter: (): string => `${logsPerDayValue.toLocaleString()} GB`,
 									}}
 								/>
 							</div>
@@ -238,16 +238,16 @@ function OptimiseSignozNeeds({
 									max={100}
 									value={sliderValues.hostsPerDay}
 									marks={hostMarks}
-									onChange={(value: number): void =>
-										handleSliderChange('hostsPerDay', value)
+									onChange={(value): void =>
+										handleSliderChange('hostsPerDay', value as number)
 									}
 									styles={{
-										track: {
-											background: '#4E74F8',
+										range: {
+											backgroundColor: '#4E74F8',
 										},
 									}}
 									tooltip={{
-										formatter: (): string => `${hostsPerDayValue.toLocaleString()}`, // Show whole number
+										formatter: (): string => `${hostsPerDayValue.toLocaleString()}`,
 									}}
 								/>
 							</div>
@@ -265,16 +265,16 @@ function OptimiseSignozNeeds({
 									max={100}
 									value={sliderValues.services}
 									marks={serviceMarks}
-									onChange={(value: number): void =>
-										handleSliderChange('services', value)
+									onChange={(value): void =>
+										handleSliderChange('services', value as number)
 									}
 									styles={{
-										track: {
-											background: '#4E74F8',
+										range: {
+											backgroundColor: '#4E74F8',
 										},
 									}}
 									tooltip={{
-										formatter: (): string => `${servicesValue.toLocaleString()}`, // Show whole number
+										formatter: (): string => `${servicesValue.toLocaleString()}`,
 									}}
 								/>
 							</div>

frontend/src/container/PipelinePage/PipelineListsView/TableComponents/Tags.tsx

@@ -1,12 +1,12 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 
 function Tags({ tags }: TagsProps): JSX.Element {
 	return (
 		<span>
 			{tags?.map((tag) => (
-				<Badge color="sakura" key={tag}>
+				<Tag color="magenta" key={tag}>
 					{tag}
-				</Badge>
+				</Tag>
 			))}
 		</span>
 	);

frontend/src/container/PipelinePage/components/TagInput.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CircleAlert, CircleX, X } from '@signozhq/icons';
-import { Button, Input, InputRef, message, Modal, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { CircleAlert, CircleX } from '@signozhq/icons';
+import { Button, Input, InputRef, message, Modal, Tag, Tooltip } from 'antd';
 
 import { tagInputStyle } from '../PipelineListsView/config';
 import { TagInputWrapper } from './styles';
@@ -91,7 +90,12 @@ function TagInput({
 		}
 		const isLongTag = tag.length > 20;
 		const tagElem = (
-			<Badge key={tag} color="vanilla" style={{ userSelect: 'none' }}>
+			<Tag
+				key={tag}
+				closable
+				style={{ userSelect: 'none' }}
+				onClose={handleClose(tag)}
+			>
 				<span
 					onDoubleClick={(e): void => {
 						setEditInputIndex(index);
@@ -101,12 +105,7 @@ function TagInput({
 				>
 					{isLongTag ? `${tag.slice(0, 20)}...` : tag}
 				</span>
-				<X
-					size={12}
-					style={{ cursor: 'pointer', marginInlineStart: 4 }}
-					onClick={handleClose(tag)}
-				/>
-			</Badge>
+			</Tag>
 		);
 		return isLongTag ? (
 			<Tooltip title={tag} key={tag}>

frontend/src/container/PipelinePage/tests/__snapshots__/Tags.test.tsx.snap

@@ -4,20 +4,12 @@ exports[`PipelinePage container test should render Tags section 1`] = `
 <DocumentFragment>
   <span>
     <span
-      class="_badge_1jqif_1"
-      data-capitalize="false"
-      data-color="sakura"
-      data-slot="badge"
-      data-variant="default"
+      class="ant-tag ant-tag-magenta css-dev-only-do-not-override-2i2tap"
     >
       server
     </span>
     <span
-      class="_badge_1jqif_1"
-      data-capitalize="false"
-      data-color="sakura"
-      data-slot="badge"
-      data-variant="default"
+      class="ant-tag ant-tag-magenta css-dev-only-do-not-override-2i2tap"
     >
       app
     </span>

frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss

@@ -53,6 +53,12 @@
 		margin-bottom: 8px;
 		overflow: auto;
 		max-height: 100px;
+		.ant-tag {
+			user-select: none;
+			height: 28px;
+			display: inline-flex;
+			align-items: center;
+		}
 	}
 
 	.ant-select {
@@ -75,6 +81,20 @@
 		}
 	}
 
+	.alert-rule-scope {
+		margin-bottom: 12px;
+
+		.ant-radio-wrapper {
+			color: var(--l1-foreground);
+		}
+	}
+
+	.alert-rule-all-warning {
+		font-size: 12px;
+		font-weight: 400;
+		color: var(--l2-foreground);
+	}
+
 	.formItemWithBullet {
 		margin-bottom: 0;
 	}
@@ -89,8 +109,61 @@
 }
 
 .alert-rule-tags {
+	.ant-tag {
+		display: flex;
+		align-items: center;
+		border: 1px solid color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
+		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		padding-right: 0px;
+		border-right: 0;
+		color: var(--bg-robin-400);
+
+		.ant-tag-close-icon {
+			height: 28px;
+			width: 20px !important;
+			justify-content: center;
+			border-left: 1px solid
+				color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
+			border-radius: 0px 2px 2px 0px;
+			background: color-mix(in srgb, var(--bg-robin-400) 30%, transparent);
+			border-right: 1px solid
+				color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
+			margin-right: 0px;
+
+			svg {
+				fill: var(--primary-background);
+			}
+		}
+	}
 	.non-closable-tag {
 		padding-right: 7px;
+		border-right: 1px solid
+			color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
+	}
+
+	.red-tag.non-closable-tag {
+		border-right: 1px solid
+			color-mix(in srgb, var(--bg-sakura-500) 20%, transparent) !important;
+	}
+
+	.red-tag {
+		border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
+		background: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);
+		border-right: 0;
+		color: var(--bg-sakura-400);
+
+		.ant-tag-close-icon {
+			background: color-mix(in srgb, var(--bg-sakura-500) 30%, transparent);
+			border-left: 1px solid
+				color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
+			border-right: 1px solid
+				color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
+
+			svg {
+				fill: var(--bg-sakura-500);
+			}
+		}
 	}
 }
 
@@ -198,6 +271,9 @@
 				line-height: 18px;
 				letter-spacing: -0.07px;
 			}
+			.ant-tag {
+				border-radius: 20px;
+			}
 
 			.action-btn {
 				display: flex;
@@ -252,6 +328,12 @@
 				width: 540px;
 				max-height: 100px;
 				overflow: auto;
+
+				.ant-tag {
+					height: 28px;
+					display: flex;
+					align-items: center;
+				}
 			}
 			.ant-collapse-content-active {
 				border-top: 0;

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Check } from '@signozhq/icons';
+import { Check, Info } from '@signozhq/icons';
 import {
 	Button,
 	DatePicker,
@@ -8,9 +8,11 @@ import {
 	FormInstance,
 	Input,
 	Modal,
+	Radio,
 	Select,
 	SelectProps,
 	Spin,
+	Tooltip,
 } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
@@ -70,14 +72,18 @@ const TZ_OPTIONS: DefaultOptionType[] = ALL_TIME_ZONES.map(
 	}),
 );
 
+type AlertRuleScope = 'all' | 'specific';
+
 interface PlannedDowntimeFormData {
 	name: string;
 	startTime: dayjs.Dayjs | null;
 	endTime: dayjs.Dayjs | null;
 	recurrence?: AlertmanagertypesRecurrenceDTO;
+	alertRuleScope: AlertRuleScope;
 	alertRules: DefaultOptionType[];
 	recurrenceSelect?: AlertmanagertypesRecurrenceDTO;
 	timezone?: string;
+	scope?: string;
 }
 
 const customFormat = DATE_TIME_FORMATS.ORDINAL_DATETIME;
@@ -127,6 +133,12 @@ export function PlannedDowntimeForm(
 			recurrenceOptions.doesNotRepeat.value,
 	);
 
+	const [alertRuleScope, setAlertRuleScope] = useState<AlertRuleScope>(
+		initialValues.id && (initialValues.alertIds || []).length === 0
+			? 'all'
+			: 'specific',
+	);
+
 	const { notifications } = useNotifications();
 	const { showErrorModal } = useErrorModal();
 
@@ -140,10 +152,14 @@ export function PlannedDowntimeForm(
 	const saveHandler = useCallback(
 		async (values: PlannedDowntimeFormData) => {
 			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
-				alertIds: values.alertRules
-					.map((alert) => alert.value)
-					.filter((alert) => alert !== undefined) as string[],
+				alertIds:
+					values.alertRuleScope === 'all'
+						? []
+						: (values.alertRules
+								.map((alert) => alert.value)
+								.filter((alert) => alert !== undefined) as string[]),
 				name: values.name,
+				scope: values.scope,
 				schedule: {
 					startTime: values.startTime?.format(),
 					endTime: values.endTime?.format(),
@@ -262,12 +278,13 @@ export function PlannedDowntimeForm(
 		const startTime = schedule?.recurrence?.startTime || schedule?.startTime;
 		const endTime = schedule?.recurrence?.endTime || schedule?.endTime;
 
+		const initialAlertIds = initialValues.alertIds || [];
+
 		return {
 			name: defaultTo(initialValues.name, ''),
-			alertRules: getAlertOptionsFromIds(
-				initialValues.alertIds || [],
-				alertOptions,
-			),
+			alertRuleScope:
+				isEditMode && initialAlertIds.length === 0 ? 'all' : 'specific',
+			alertRules: getAlertOptionsFromIds(initialAlertIds, alertOptions),
 			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
 			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
 			recurrence: {
@@ -278,11 +295,13 @@ export function PlannedDowntimeForm(
 				duration: getDurationInfo(schedule?.recurrence?.duration)?.value ?? '',
 			} as AlertmanagertypesRecurrenceDTO,
 			timezone: schedule?.timezone as string,
+			scope: initialValues.scope || '',
 		};
 	}, [initialValues, alertOptions]);
 
 	useEffect(() => {
 		setSelectedTags(formattedInitialValues.alertRules);
+		setAlertRuleScope(formattedInitialValues.alertRuleScope);
 		form.setFieldsValue({ ...formattedInitialValues });
 	}, [form, formattedInitialValues, initialValues]);
 
@@ -345,6 +364,7 @@ export function PlannedDowntimeForm(
 				onFinish={onFinish}
 				onValuesChange={(): void => {
 					setRecurrenceType(form.getFieldValue('recurrence')?.repeatType as string);
+					setAlertRuleScope(form.getFieldValue('alertRuleScope') as AlertRuleScope);
 					handleFormData(form.getFieldsValue());
 				}}
 				autoComplete="off"
@@ -444,50 +464,107 @@ export function PlannedDowntimeForm(
 					<div className="scheduleTimeInfoText">{endTimeText}</div>
 				)}
 				<div>
-					<div className="alert-rule-form">
-						<Typography style={{ marginBottom: 8 }}>Silence Alerts</Typography>
-						<Typography style={{ marginBottom: 8 }} className="alert-rule-info">
-							(Leave empty to silence all alerts)
-						</Typography>
-					</div>
-					<Form.Item noStyle shouldUpdate>
-						<AlertRuleTags
-							closable
-							selectedTags={selectedTags}
-							handleClose={handleClose}
-						/>
-					</Form.Item>
-					<Form.Item name={alertRuleFormName}>
-						<Select
-							placeholder="Search for alerts rules or groups..."
-							mode="multiple"
-							status={isError ? 'error' : undefined}
-							loading={isLoading}
-							tagRender={noTagRenderer}
-							onChange={handleAlertRulesChange}
-							showSearch
-							options={alertOptions}
-							filterOption={(input, option): boolean =>
-								(option?.label as string)?.toLowerCase()?.includes(input.toLowerCase())
-							}
-							notFoundContent={
-								isLoading ? (
-									<span>
-										<Spin size="small" /> Loading...
-									</span>
-								) : (
-									<span>No alert available.</span>
-								)
-							}
-						>
-							{alertOptions?.map((option) => (
-								<Select.Option key={option.value} value={option.value}>
-									{option.label}
-								</Select.Option>
-							))}
-						</Select>
+					<Typography style={{ marginBottom: 8 }}>Silence Alerts</Typography>
+					<Form.Item
+						name="alertRuleScope"
+						initialValue="specific"
+						className="alert-rule-scope"
+					>
+						<Radio.Group>
+							<Radio value="all">All alert rules</Radio>
+							<Radio value="specific">Specific alert rules</Radio>
+						</Radio.Group>
 					</Form.Item>
+					{alertRuleScope === 'specific' && (
+						<>
+							<Form.Item noStyle shouldUpdate>
+								<AlertRuleTags
+									closable
+									selectedTags={selectedTags}
+									handleClose={handleClose}
+								/>
+							</Form.Item>
+							<Form.Item
+								name={alertRuleFormName}
+								rules={[
+									{
+										validator: async (
+											_rule,
+											value: DefaultOptionType[] | undefined,
+										): Promise<void> => {
+											if (!value || value.length === 0) {
+												throw new Error(
+													'Select at least one alert rule, or choose "All alert rules" to silence everything.',
+												);
+											}
+										},
+									},
+								]}
+							>
+								<Select
+									placeholder="Search for alert rules or groups..."
+									mode="multiple"
+									status={isError ? 'error' : undefined}
+									loading={isLoading}
+									tagRender={noTagRenderer}
+									onChange={handleAlertRulesChange}
+									showSearch
+									options={alertOptions}
+									filterOption={(input, option): boolean =>
+										(option?.label as string)
+											?.toLowerCase()
+											?.includes(input.toLowerCase())
+									}
+									notFoundContent={
+										isLoading ? (
+											<span>
+												<Spin size="small" /> Loading...
+											</span>
+										) : (
+											<span>No alert available.</span>
+										)
+									}
+								>
+									{alertOptions?.map((option) => (
+										<Select.Option key={option.value} value={option.value}>
+											{option.label}
+										</Select.Option>
+									))}
+								</Select>
+							</Form.Item>
+						</>
+					)}
 				</div>
+				<Form.Item
+					label={
+						<span>
+							Scope&nbsp;
+							<Tooltip
+								mouseLeaveDelay={0.3}
+								title={
+									<span>
+										Scope the planned downtime by alert labels.{' '}
+										<a
+											href="https://signoz.io/docs/alerts-management/planned-maintenance/#scoping-with-label-expressions"
+											target="_blank"
+											rel="noopener noreferrer"
+										>
+											Learn more
+										</a>
+									</span>
+								}
+							>
+								<Info size={13} />
+							</Tooltip>
+						</span>
+					}
+					name="scope"
+				>
+					<Input.TextArea
+						placeholder='e.g. env = "prod" AND region = "us-east-1"'
+						autoSize={{ minRows: 2, maxRows: 4 }}
+					/>
+				</Form.Item>
 				<Form.Item style={{ marginBottom: 0 }}>
 					<ModalButtonWrapper>
 						<Button

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -1,8 +1,7 @@
 import React, { ReactNode, useEffect } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Collapse, Flex, Space, Table, TableProps, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Collapse, Flex, Space, Table, TableProps, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import type {
@@ -16,7 +15,7 @@ import cx from 'classnames';
 import dayjs from 'dayjs';
 import { useNotifications } from 'hooks/useNotifications';
 import { defaultTo } from 'lodash-es';
-import { CalendarClock, PenLine, Trash2, X } from '@signozhq/icons';
+import { CalendarClock, PenLine, Trash2 } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
@@ -49,10 +48,10 @@ export function AlertRuleTags(props: AlertRuleTagsProps): JSX.Element {
 			{selectedTags?.map((tag: DefaultOptionType, index: number) => {
 				const isLongTag = (tag?.label as string)?.length > 20;
 				const tagElem = (
-					<Badge
+					<Tag
 						key={tag.value}
-						color={index % 2 ? 'sakura' : 'robin'}
-						variant="outline"
+						onClose={(): void => handleClose?.(tag?.value)}
+						closable={closable}
 						className={cx(
 							{ 'red-tag': index % 2 },
 							{ 'non-closable-tag': !closable },
@@ -63,14 +62,7 @@ export function AlertRuleTags(props: AlertRuleTagsProps): JSX.Element {
 								? `${(tag?.label as string | null)?.slice(0, 20)}...`
 								: tag?.label}
 						</span>
-						{closable && (
-							<X
-								size={12}
-								style={{ cursor: 'pointer', marginInlineStart: 4 }}
-								onClick={(): void => handleClose?.(tag?.value)}
-							/>
-						)}
-					</Badge>
+					</Tag>
 				);
 				return isLongTag ? (
 					<Tooltip title={tag?.label} key={tag?.value}>
@@ -101,7 +93,7 @@ function HeaderComponent({
 		<Flex className="header-content" justify="space-between">
 			<Flex gap={8}>
 				<Typography>{name}</Typography>
-				<Badge color="vanilla">{duration}</Badge>
+				<Tag>{duration}</Tag>
 			</Flex>
 
 			{isCrudEnabled && (
@@ -163,7 +155,9 @@ export function CollapseListContent({
 				created_by_name ? (
 					<Flex gap={8}>
 						<Typography>{created_by_name}</Typography>
-						{created_by_email && <Badge color="vanilla">{created_by_email}</Badge>}
+						{created_by_email && (
+							<Tag style={{ borderRadius: 20 }}>{created_by_email}</Tag>
+						)}
 					</Flex>
 				) : (
 					'-'
@@ -210,7 +204,7 @@ export function CollapseListContent({
 						selectedTags={alertOptions}
 					/>
 				) : (
-					'-'
+					<Tag className="all-alerts-tag">All alert rules</Tag>
 				),
 			)}
 		</Flex>

frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.styled.ts

@@ -1,11 +1,11 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import styled from 'styled-components';
 
 export const StyledText = styled.span`
 	cursor: pointer;
 `;
 
-export const StyledTag = styled(Badge)`
+export const StyledTag = styled(Tag)`
 	margin-top: 0.125rem;
 	margin-bottom: 0.125rem;
 	padding-left: 0.5rem;

frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.tsx

@@ -1,5 +1,3 @@
-import { X } from '@signozhq/icons';
-
 import { HavingFilterTagProps } from './HavingFilterTag.interfaces';
 import { StyledTag, StyledText } from './HavingFilterTag.styled';
 
@@ -14,17 +12,10 @@ export function HavingFilterTag({
 	};
 
 	return (
-		<StyledTag color="vanilla">
+		<StyledTag closable={closable} onClose={onClose}>
 			<span role="button" tabIndex={0} onClick={handleClick}>
 				<StyledText>{value}</StyledText>
 			</span>
-			{closable && (
-				<X
-					size={12}
-					style={{ cursor: 'pointer', marginInlineStart: 4 }}
-					onClick={onClose}
-				/>
-			)}
 		</StyledTag>
 	);
 }

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx

@@ -9,8 +9,7 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button, Select, Spin, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Select, Spin, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import {
@@ -38,7 +37,6 @@ import {
 	CornerDownLeft,
 	Filter,
 	Slash,
-	X,
 } from '@signozhq/icons';
 import type { BaseSelectRef } from 'rc-select';
 import {
@@ -201,7 +199,7 @@ function QueryBuilderSearch({
 		const isDisabled = !!searchValue;
 
 		return (
-			<Badge color="vanilla">
+			<Tag closable={!searchValue && closable} onClose={onCloseHandler}>
 				<Tooltip title={chipValue}>
 					<TypographyText
 						$isInNin={isInNin}
@@ -215,14 +213,7 @@ function QueryBuilderSearch({
 						{chipValue}
 					</TypographyText>
 				</Tooltip>
-				{!searchValue && closable && (
-					<X
-						size={12}
-						style={{ cursor: 'pointer', marginInlineStart: 4 }}
-						onClick={onCloseHandler}
-					/>
-				)}
-			</Badge>
+			</Tag>
 		);
 	};
 

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts

@@ -1,5 +1,5 @@
 import { Check } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import styled from 'styled-components';
 
 export const TypographyText = styled.span<{
@@ -22,7 +22,7 @@ export const StyledCheckOutlined = styled(Check)`
 	float: right;
 `;
 
-export const TagContainer = styled(Badge)`
+export const TagContainer = styled(Tag)`
 	&&& {
 		display: inline-block;
 		border-radius: 3px;

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss

@@ -225,7 +225,7 @@
 	}
 
 	.qb-search-bar-tokenised-tags {
-		[data-slot='badge'] {
+		.ant-tag {
 			display: flex;
 			align-items: center;
 			border-radius: 2px 0px 0px 2px;
@@ -244,7 +244,7 @@
 				padding: 2px 6px;
 			}
 
-			.close-icon {
+			.ant-tag-close-icon {
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -265,7 +265,7 @@
 					font-size: 14px;
 				}
 
-				.close-icon {
+				.ant-tag-close-icon {
 					background: color-mix(in srgb, var(--bg-aqua-400) 6%, transparent);
 				}
 			}
@@ -278,7 +278,7 @@
 					font-size: 14px;
 				}
 
-				.close-icon {
+				.ant-tag-close-icon {
 					background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
 				}
 			}
@@ -292,7 +292,7 @@
 					font-size: 14px;
 				}
 
-				.close-icon {
+				.ant-tag-close-icon {
 					background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
 				}
 			}