chore: remove comments

.github/workflows/goci.yaml

@@ -123,20 +123,3 @@ 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,26 +90,3 @@ 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 /root/templates
+COPY ./templates/email /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 /root/templates
+COPY ./templates/email /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 /root/templates
+COPY ./templates/email /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 /root/templates
+COPY ./templates/email /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 /root/templates
+COPY ./templates/email /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 /root/templates
+COPY ./templates/email /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

@@ -1,61 +0,0 @@
-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,7 +17,6 @@ func RegisterGenerate(parentCmd *cobra.Command, logger *slog.Logger) {
 
 	registerGenerateOpenAPI(generateCmd)
 	registerGenerateAuthz(generateCmd)
-	registerGenerateConfig(generateCmd)
 
 	parentCmd.AddCommand(generateCmd)
 }

conf/example.yaml

@@ -182,11 +182,6 @@ 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,8 +129,6 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
-        scope:
-          type: string
         status:
           $ref: '#/components/schemas/AlertmanagertypesMaintenanceStatus'
         updatedAt:
@@ -274,8 +272,6 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
-        scope:
-          type: string
       required:
       - name
       - schedule
@@ -18948,77 +18944,6 @@ paths:
       summary: Get waterfall view for a trace
       tags:
       - tracedetail
-  /api/v4/traces/{traceID}/waterfall:
-    post:
-      deprecated: false
-      description: Returns the waterfall view of spans including all spans if total
-        spans are under a limit, a max count otherwise. Aggregations are dropped compared
-        to v3
-      operationId: GetWaterfallV4
-      parameters:
-      - in: path
-        name: traceID
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/SpantypesPostableWaterfall'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/SpantypesGettableWaterfallTrace'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get waterfall view for a trace
-      tags:
-      - tracedetail
   /api/v5/query_range:
     post:
       deprecated: false

docs/config/web-settings.json

@@ -1,42 +0,0 @@
-{
-  "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.CloudIntegrationDashboardSlug(provider, service.Type, dashboard.ID)
+		slug := cloudintegrationtypes.IntegrationDashboardSlug(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.CloudIntegrationDashboardSlugPrefix(provider, serviceID)
+	slugPrefix := cloudintegrationtypes.IntegrationDashboardSlugPrefix(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.CloudIntegrationDashboardSlug(provider, serviceID, d.ID)
+		slug := cloudintegrationtypes.IntegrationDashboardSlug(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,6 +9,7 @@ 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"
@@ -23,6 +24,7 @@ type APIHandlerOptions struct {
 	DataConnector                 interfaces.Reader
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
+	CloudIntegrationsController   *cloudintegrations.Controller
 	LogsParsingPipelineController *logparsingpipeline.LogParsingPipelineController
 	GatewayUrl                    string
 	// Querier Influx Interval
@@ -40,6 +42,7 @@ 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),
@@ -88,6 +91,17 @@ 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,15 +89,6 @@ 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,6 +30,7 @@ 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"
@@ -85,13 +86,20 @@ 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, signoz.Modules.Dashboard)
+	integrationsController, err := integrations.NewController(signoz.SQLStore)
 	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,
@@ -126,6 +134,7 @@ 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(),
@@ -191,6 +200,7 @@ 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,19 +94,6 @@
 				}
 			})();
 		</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>
 
@@ -148,10 +135,7 @@
 		</script>
 		<script>
 			var APPCUES_APP_ID = '<%- APPCUES_APP_ID %>';
-			var appcuesSettings =
-				((window.signozBootData || {}).settings || {}).appcues || {};
-			var appcuesEnabled = appcuesSettings.enabled !== false;
-			if (APPCUES_APP_ID && appcuesEnabled) {
+			if (APPCUES_APP_ID) {
 				(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|copy-text-to-clipboard)/)',
+		'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)/)',
 		// 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|copy-text-to-clipboard)[^/]*/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)[^/]*/node_modules)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/package.json

@@ -24,8 +24,7 @@
     "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: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 */'"
+    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
   },
   "engines": {
     "node": ">=22.0.0",
@@ -50,7 +49,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.22",
+    "@signozhq/ui": "0.0.21",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -161,8 +160,8 @@
     "@testing-library/user-event": "14.4.3",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "4.2.2",
-    "@types/d3-hierarchy": "1.1.11",
     "@types/event-source-polyfill": "^1.0.0",
+    "@types/d3-hierarchy": "1.1.11",
     "@types/history": "4.7.11",
     "@types/jest": "30.0.0",
     "@types/lodash-es": "^4.17.4",
@@ -188,7 +187,6 @@
     "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",
@@ -243,4 +241,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

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.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)
+        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)
       '@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,9 +449,6 @@ 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
@@ -460,7 +457,7 @@ importers:
         version: 1.3.2(typescript@5.9.3)
       orval:
         specifier: 8.9.1
-        version: 8.9.1(prettier@3.8.3)(typescript@5.9.3)
+        version: 8.9.1(typescript@5.9.3)
       oxfmt:
         specifier: 0.47.0
         version: 0.47.0
@@ -548,10 +545,6 @@ 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'}
@@ -1998,9 +1991,6 @@ 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'}
@@ -3279,8 +3269,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.22':
-    resolution: {integrity: sha512-CJDyA4H+uXG/U2/d7/nRMNY6WIW0YWc843mfzUQALjm+xOhbO4T+qt67THjV4s1wTMs1cZLkmScbMddf+hXLIQ==}
+  '@signozhq/ui@0.0.21':
+    resolution: {integrity: sha512-uLM3Vqwxlk2USXbwtb3qRLpjZR9b9QSHFQq/jtcfYNMDmIE/sNjSj0nRkEhX4RqqRgsLRt2PVA33aeWxDOLO3g==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -6076,11 +6066,6 @@ 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==}
 
@@ -7119,11 +7104,6 @@ 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}
@@ -9064,12 +9044,6 @@ 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
@@ -10824,8 +10798,6 @@ 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
@@ -12041,7 +12013,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@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)':
+  '@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)':
     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)
@@ -15402,18 +15374,6 @@ 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: {}
@@ -16330,7 +16290,7 @@ snapshots:
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
 
-  orval@8.9.1(prettier@3.8.3)(typescript@5.9.3):
+  orval@8.9.1(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)
@@ -16361,8 +16321,6 @@ 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
@@ -16623,8 +16581,6 @@ 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,7 +35,6 @@ 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';
@@ -333,7 +332,7 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		if (isCloudUser || isEnterpriseSelfHostedUser) {
-			if (bootSettings.posthog.enabled && process.env.POSTHOG_KEY) {
+			if (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,10 +225,6 @@ export interface AlertmanagertypesPlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
-	/**
-	 * @type string
-	 */
-	scope?: string;
 	status: AlertmanagertypesMaintenanceStatusDTO;
 	/**
 	 * @type string
@@ -1718,10 +1714,6 @@ export interface AlertmanagertypesPostablePlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
-	/**
-	 * @type string
-	 */
-	scope?: string;
 }
 
 export interface AlertmanagertypesPostableRoutePolicyDTO {
@@ -9232,17 +9224,6 @@ export type GetWaterfall200 = {
 	status: string;
 };
 
-export type GetWaterfallV4PathParameters = {
-	traceID: string;
-};
-export type GetWaterfallV4200 = {
-	data: SpantypesGettableWaterfallTraceDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type QueryRangeV5200 = {
 	data: Querybuildertypesv5QueryRangeResponseDTO;
 	/**

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

@@ -14,8 +14,6 @@ import type {
 import type {
 	GetWaterfall200,
 	GetWaterfallPathParameters,
-	GetWaterfallV4200,
-	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
@@ -122,102 +120,3 @@ export const useGetWaterfall = <
 > => {
 	return useMutation(getGetWaterfallMutationOptions(options));
 };
-/**
- * Returns the waterfall view of spans including all spans if total spans are under a limit, a max count otherwise. Aggregations are dropped compared to v3
- * @summary Get waterfall view for a trace
- */
-export const getWaterfallV4 = (
-	{ traceID }: GetWaterfallV4PathParameters,
-	spantypesPostableWaterfallDTO?: BodyType<SpantypesPostableWaterfallDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetWaterfallV4200>({
-		url: `/api/v4/traces/${traceID}/waterfall`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: spantypesPostableWaterfallDTO,
-		signal,
-	});
-};
-
-export const getGetWaterfallV4MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getWaterfallV4>>,
-		TError,
-		{
-			pathParams: GetWaterfallV4PathParameters;
-			data?: BodyType<SpantypesPostableWaterfallDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof getWaterfallV4>>,
-	TError,
-	{
-		pathParams: GetWaterfallV4PathParameters;
-		data?: BodyType<SpantypesPostableWaterfallDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['getWaterfallV4'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof getWaterfallV4>>,
-		{
-			pathParams: GetWaterfallV4PathParameters;
-			data?: BodyType<SpantypesPostableWaterfallDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return getWaterfallV4(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type GetWaterfallV4MutationResult = NonNullable<
-	Awaited<ReturnType<typeof getWaterfallV4>>
->;
-export type GetWaterfallV4MutationBody =
-	| BodyType<SpantypesPostableWaterfallDTO>
-	| undefined;
-export type GetWaterfallV4MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get waterfall view for a trace
- */
-export const useGetWaterfallV4 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getWaterfallV4>>,
-		TError,
-		{
-			pathParams: GetWaterfallV4PathParameters;
-			data?: BodyType<SpantypesPostableWaterfallDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof getWaterfallV4>>,
-	TError,
-	{
-		pathParams: GetWaterfallV4PathParameters;
-		data?: BodyType<SpantypesPostableWaterfallDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getGetWaterfallV4MutationOptions(options));
-};

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

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

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

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

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

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

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';

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

@@ -259,6 +259,14 @@
 			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
+
+			&:focus:not(:focus-visible),
+			&.ant-btn:focus:not(:focus-visible) {
+				border-color: var(--l2-border);
+				border-left-color: transparent;
+				outline: none;
+				box-shadow: none;
+			}
 		}
 	}
 }
@@ -284,5 +292,21 @@
 		.cm-placeholder {
 			font-size: 12px !important;
 		}
+
+		$add-on-row-height: 38px;
+
+		.periscope-input-with-label {
+			.input {
+				.ant-select {
+					height: $add-on-row-height;
+				}
+			}
+		}
+
+		.input-with-label {
+			.input {
+				height: $add-on-row-height;
+			}
+		}
 	}
 }

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

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

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

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

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

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

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

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

frontend/src/constants/app.ts

@@ -10,6 +10,9 @@ 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,5 +11,4 @@ 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

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

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

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

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -9,10 +9,11 @@ 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';
@@ -39,61 +40,38 @@ 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[] };
-
-/**
- * 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>
-		);
+/** 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>
+			);
 	}
-	return <ActivityGroup key={group.id} items={group.items} />;
 }
 
 interface MessageBubbleProps {
@@ -112,14 +90,6 @@ 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,
@@ -158,7 +128,8 @@ export default function MessageBubble({
 							<p className={styles.text}>{message.content}</p>
 						) : hasBlocks ? (
 							<MessageContext.Provider value={{ messageId: message.id }}>
-								{groups.map((g) => renderGroup(g))}
+								{/* eslint-disable-next-line react/no-array-index-key */}
+								{message.blocks!.map((block, i) => renderBlock(block, i))}
 							</MessageContext.Provider>
 						) : (
 							<MessageContext.Provider value={{ messageId: message.id }}>

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -10,10 +10,11 @@ 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';
@@ -32,59 +33,6 @@ 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…',
@@ -131,11 +79,6 @@ 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}>
@@ -145,28 +88,27 @@ export default function StreamingMessage({
 				)}
 				{isEmpty && !statusLabel && <TypingDots />}
 
-				{/* 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>
-						);
+				{/* 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} />;
 					}
-					const groupIsLive = group.isTrailing && !isWaitingOnUser;
 					return (
-						<ActivityGroup key={group.id} items={group.items} isLive={groupIsLive} />
+						<ReactMarkdown
+							key={i}
+							className={messageStyles.markdown}
+							remarkPlugins={MD_PLUGINS}
+							components={MD_COMPONENTS}
+						>
+							{event.content}
+						</ReactMarkdown>
 					);
 				})}
+				{/* 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,31 +5,11 @@ 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);
 
@@ -43,10 +23,14 @@ export default function ThinkingStep({
 				) : (
 					<ChevronRight size={12} className={styles.chevron} />
 				)}
-				<span className={styles.label}>{thinkingLabel(isLive)}</span>
+				<span className={styles.label}>Thinking</span>
 			</div>
 
-			{expanded && <ThinkingContent content={content} />}
+			{expanded && (
+				<div className={styles.body}>
+					<p className={styles.content}>{content}</p>
+				</div>
+			)}
 		</div>
 	);
 }

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

@@ -10,58 +10,24 @@ 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 { done } = toolCall;
-	const label = getToolDisplayLabel(toolCall);
+	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 toggle = (): void => setExpanded((v) => !v);
 
@@ -78,7 +44,26 @@ export default function ToolCallStep({
 				<span className={styles.label}>{label}</span>
 			</div>
 
-			{expanded && <ToolCallContent toolCall={toolCall} />}
+			{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>
+			)}
 		</div>
 	);
 }

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

@@ -1,3 +1,4 @@
+import { SIGNOZ_UPGRADE_PLAN_URL } from 'constants/app';
 import CreateAlertChannels from 'container/CreateAlertChannels';
 import { ChannelType } from 'container/CreateAlertChannels/config';
 import {
@@ -312,6 +313,16 @@ 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/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
-import { Button, Input, Select, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -1,4 +1,5 @@
-import { Collapse, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Collapse } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';

frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
 import './TimeInput.scss';
 
 export interface TimeInputProps {

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,4 +1,5 @@
-import { Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

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

@@ -16,7 +16,8 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Modal, Popover, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';

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

@@ -1,282 +0,0 @@
-import { Widgets } from 'types/api/dashboard/getAll';
-import {
-	MetricRangePayloadProps,
-	MetricRangePayloadV3,
-} from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { PanelMode } from '../../types';
-import { prepareBarPanelConfig } from '../utils';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-	() => ({
-		getStoredSeriesVisibility: jest.fn(),
-	}),
-);
-
-jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
-	__esModule: true,
-	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
-}));
-
-jest.mock('lib/dashboard/getQueryResults', () => ({
-	getLegend: jest.fn(
-		(_queryData: unknown, _query: unknown, labelName: string) =>
-			`legend-${labelName}`,
-	),
-}));
-
-jest.mock('lib/getLabelName', () => ({
-	__esModule: true,
-	default: jest.fn(
-		(_metric: unknown, _queryName: string, _legend: string) => 'baseLabel',
-	),
-}));
-
-jest.mock(
-	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
-	() => ({
-		getInitialStackedBands: jest.fn().mockReturnValue([]),
-	}),
-);
-
-const getLegendMock = jest.requireMock('lib/dashboard/getQueryResults')
-	.getLegend as jest.Mock;
-const getLabelNameMock = jest.requireMock('lib/getLabelName')
-	.default as jest.Mock;
-const getInitialStackedBandsMock = jest.requireMock(
-	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
-).getInitialStackedBands as jest.Mock;
-
-const createApiResponse = (
-	result: MetricRangePayloadProps['data']['result'] = [],
-): MetricRangePayloadProps => ({
-	data: {
-		result,
-		resultType: 'matrix',
-		newResult: null as unknown as MetricRangePayloadV3,
-	},
-});
-
-const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
-	({
-		id: 'widget-1',
-		yAxisUnit: 'ms',
-		isLogScale: false,
-		thresholds: [],
-		customLegendColors: {},
-		...overrides,
-	}) as Widgets;
-
-const defaultTimezone = {
-	name: 'UTC',
-	value: 'UTC',
-	offset: 'UTC',
-	searchIndex: 'UTC',
-};
-
-describe('BarPanel utils', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		getLabelNameMock.mockReturnValue('baseLabel');
-		getLegendMock.mockImplementation(
-			(_queryData: unknown, _query: unknown, labelName: string) =>
-				`legend-${labelName}`,
-		);
-	});
-
-	describe('prepareBarPanelData', () => {
-		it('returns aligned data with timestamps and empty series when result is empty', () => {
-			const data = prepareChartData(createApiResponse([]));
-			expect(data).toHaveLength(1);
-			expect(data[0]).toStrictEqual([]);
-		});
-
-		it('returns timestamps and one series of y values for single series', () => {
-			const data = prepareChartData(
-				createApiResponse([
-					{
-						metric: {},
-						queryName: 'Q',
-						legend: 'Series A',
-						values: [
-							[1000, '10'],
-							[2000, '20'],
-						],
-					} as MetricRangePayloadProps['data']['result'][0],
-				]),
-			);
-			expect(data).toHaveLength(2);
-			expect(data[0]).toStrictEqual([1000, 2000]);
-			expect(data[1]).toStrictEqual([10, 20]);
-		});
-
-		it('merges timestamps and fills missing values with null for multiple series', () => {
-			const data = prepareChartData(
-				createApiResponse([
-					{
-						metric: {},
-						queryName: 'Q1',
-						values: [
-							[1000, '1'],
-							[3000, '3'],
-						],
-					} as MetricRangePayloadProps['data']['result'][0],
-					{
-						metric: {},
-						queryName: 'Q2',
-						values: [
-							[1000, '10'],
-							[2000, '20'],
-						],
-					} as MetricRangePayloadProps['data']['result'][0],
-				]),
-			);
-			expect(data[0]).toStrictEqual([1000, 2000, 3000]);
-			expect(data[1]).toStrictEqual([1, null, 3]);
-			expect(data[2]).toStrictEqual([10, 20, null]);
-		});
-	});
-
-	describe('prepareBarPanelConfig', () => {
-		const baseParams = {
-			widget: createWidget(),
-			isDarkMode: true,
-			currentQuery: {} as Query,
-			onClick: jest.fn(),
-			onDragSelect: jest.fn(),
-			apiResponse: createApiResponse(),
-			timezone: defaultTimezone,
-			panelMode: PanelMode.DASHBOARD_VIEW,
-		};
-
-		it('adds no series when apiResponse has empty result', () => {
-			const config = prepareBarPanelConfig(baseParams).getConfig();
-			expect(config.series).toHaveLength(1);
-		});
-
-		it('adds one series per result item', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-				{
-					metric: {},
-					queryName: 'Q2',
-					values: [[1000, '2']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			const config = prepareBarPanelConfig({
-				...baseParams,
-				apiResponse,
-			}).getConfig();
-			expect(config.series).toHaveLength(3);
-		});
-
-		it('uses getLegend for label when currentQuery is provided', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					legend: 'L1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			const config = prepareBarPanelConfig({
-				...baseParams,
-				apiResponse,
-				currentQuery: {} as Query,
-			}).getConfig();
-			expect(getLegendMock).toHaveBeenCalled();
-			expect(config.series?.[1]).toMatchObject({ label: 'legend-baseLabel' });
-		});
-
-		it('uses getLabelName for label when currentQuery is null', () => {
-			getLegendMock.mockReset();
-			const apiResponse = createApiResponse([
-				{
-					metric: { __name__: 'requests' },
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			prepareBarPanelConfig({
-				...baseParams,
-				apiResponse,
-				currentQuery: null as unknown as Query,
-			});
-			expect(getLabelNameMock).toHaveBeenCalled();
-			expect(getLegendMock).not.toHaveBeenCalled();
-		});
-
-		it('passes result metric to each series for cross-panel sync', () => {
-			const metric = { host: 'server1', __name__: 'http_requests' };
-			const apiResponse = createApiResponse([
-				{
-					metric,
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			const config = prepareBarPanelConfig({
-				...baseParams,
-				apiResponse,
-			}).getConfig();
-			expect(config.series?.[1]).toMatchObject({ metric });
-		});
-
-		it('uses widget customLegendColors for series stroke', () => {
-			const widget = createWidget({
-				customLegendColors: { 'legend-baseLabel': '#ff0000' },
-			});
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			const config = prepareBarPanelConfig({
-				...baseParams,
-				widget,
-				apiResponse,
-			}).getConfig();
-			expect(config.series?.[1]).toMatchObject({ stroke: '#ff0000' });
-		});
-
-		it('calls getInitialStackedBands when widget is stackedBarChart', () => {
-			const widget = createWidget({ stackedBarChart: true });
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-				{
-					metric: {},
-					queryName: 'Q2',
-					values: [[1000, '2']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			prepareBarPanelConfig({ ...baseParams, widget, apiResponse });
-			// seriesCount = result.length + 1 = 3
-			expect(getInitialStackedBandsMock).toHaveBeenCalledWith(3);
-		});
-
-		it('does not call getInitialStackedBands for non-stacked chart', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			prepareBarPanelConfig({ ...baseParams, apiResponse });
-			expect(getInitialStackedBandsMock).not.toHaveBeenCalled();
-		});
-	});
-});

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

@@ -303,27 +303,6 @@ describe('TimeSeriesPanel utils', () => {
 			expect(seriesConfig!.stroke).toBe('#ff0000');
 		});
 
-		it('passes result metric to each series for cross-panel sync', () => {
-			const metric = { host: 'server1', __name__: 'cpu' };
-			const apiResponse = createApiResponse([
-				{
-					metric,
-					queryName: 'Q',
-					values: [
-						[1000, '1'],
-						[2000, '2'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const config = prepareUPlotConfig({
-				...baseParams,
-				apiResponse,
-			}).getConfig();
-
-			expect(config.series?.[1]).toMatchObject({ metric });
-		});
-
 		it('adds multiple series when result has multiple items', () => {
 			const apiResponse = createApiResponse([
 				{

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -19,11 +19,11 @@ import {
 	Info,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
+import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	ColorPicker,
 	Divider,
-	Input,
 	Modal,
 	RefSelectProps,
 	Select,

frontend/src/container/FormAlertChannels/Settings/Email.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { EmailChannel } from '../../CreateAlertChannels/config';
 
 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
 import { WebhookChannel } from '../../CreateAlertChannels/config';

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,7 +1,8 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, FormInstance, Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
+import { Form, FormInstance, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -6,7 +6,8 @@ import { useIsFetching } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Form, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -5,12 +5,12 @@ import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
 import {
 	Col,
 	Collapse,
 	DatePicker,
 	Form,
-	Input,
 	InputNumber,
 	Modal,
 	Row,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx

@@ -1,4 +1,5 @@
-import { Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
 
 function RenderConnectionFields({

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form } from 'antd';
 import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { ChangeEvent, useState } from 'react';
-import { Button, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,11 +12,11 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
+import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	Dropdown,
 	Flex,
-	Input,
 	MenuProps,
 	Modal,
 	Popover,

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, Check } from '@signozhq/icons';
-import { Button, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/LogDetailedView/Overview.tsx

@@ -2,8 +2,9 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse, Divider, Input, Tag } from 'antd';
+import { Collapse, Divider, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';

frontend/src/container/LogsFilters/index.tsx

@@ -2,7 +2,8 @@ import { ChangeEvent, useCallback, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { CirclePlus, X } from '@signozhq/icons';
-import { Col, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Col } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { AppState } from 'store/reducers';

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx

@@ -2,7 +2,8 @@ import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { SquareX, X } from '@signozhq/icons';
-import { Button, Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Select } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import {
 	ConditionalOperators,

frontend/src/container/MetricsExplorer/Inspect/MetricTimeAggregation.tsx

@@ -1,6 +1,7 @@
-import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Select } from 'antd';
+// TODO(@signozhq/ui-input): migrate this <Input> once @signozhq/ui Input
+// supports the `onWheel` handler (used to blur on scroll for number inputs).
+import { Input, Select } from 'antd';
 import classNames from 'classnames';
 
 import { TIME_AGGREGATION_OPTIONS } from './constants';

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import type { TableColumnsType as ColumnsType } from 'antd';
-import { Button, Collapse, Input, Select, Spin } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Collapse, Select, Spin } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,7 +7,8 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Dropdown, Input, MenuProps, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Divider, Dropdown, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { FieldDataType } from 'api/v5/v5';
 import { SOMETHING_WENT_WRONG } from 'constants/api';

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, Col, Form, Input as AntInput, Input, Row } from 'antd';
+// TODO(@signozhq/ui-input): migrate <Input> once @signozhq/ui Input
+// supports the `spellCheck` prop on the URL input below.
+import { Button, Col, Form, Input, Input as AntInput, Row } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CONTEXT_LINK_FIELDS } from 'container/NewWidget/RightContainer/ContextLinks/constants';
 import {

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Blocks, Check, LoaderCircle } from '@signozhq/icons';
-import { Button, Card, Form, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Server, LoaderCircle } from '@signozhq/icons';
-import { Button, Card, Form, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

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

@@ -295,6 +295,37 @@
 
 		.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 '@signozhq/ui/slider';
+import { Slider } from 'antd';
 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">
+						<div className="slider-container logs-slider-container">
 							<div>
 								<Slider
 									min={0}
 									max={100}
 									value={sliderValues.logsPerDay}
 									marks={marks}
-									onChange={(value): void =>
-										handleSliderChange('logsPerDay', value as number)
+									onChange={(value: number): void =>
+										handleSliderChange('logsPerDay', value)
 									}
 									styles={{
-										range: {
-											backgroundColor: '#4E74F8',
+										track: {
+											background: '#4E74F8',
 										},
 									}}
 									tooltip={{
-										formatter: (): string => `${logsPerDayValue.toLocaleString()} GB`,
+										formatter: (): string => `${logsPerDayValue.toLocaleString()} GB`, // Show whole number
 									}}
 								/>
 							</div>
@@ -238,16 +238,16 @@ function OptimiseSignozNeeds({
 									max={100}
 									value={sliderValues.hostsPerDay}
 									marks={hostMarks}
-									onChange={(value): void =>
-										handleSliderChange('hostsPerDay', value as number)
+									onChange={(value: number): void =>
+										handleSliderChange('hostsPerDay', value)
 									}
 									styles={{
-										range: {
-											backgroundColor: '#4E74F8',
+										track: {
+											background: '#4E74F8',
 										},
 									}}
 									tooltip={{
-										formatter: (): string => `${hostsPerDayValue.toLocaleString()}`,
+										formatter: (): string => `${hostsPerDayValue.toLocaleString()}`, // Show whole number
 									}}
 								/>
 							</div>
@@ -265,16 +265,16 @@ function OptimiseSignozNeeds({
 									max={100}
 									value={sliderValues.services}
 									marks={serviceMarks}
-									onChange={(value): void =>
-										handleSliderChange('services', value as number)
+									onChange={(value: number): void =>
+										handleSliderChange('services', value)
 									}
 									styles={{
-										range: {
-											backgroundColor: '#4E74F8',
+										track: {
+											background: '#4E74F8',
 										},
 									}}
 									tooltip={{
-										formatter: (): string => `${servicesValue.toLocaleString()}`,
+										formatter: (): string => `${servicesValue.toLocaleString()}`, // Show whole number
 									}}
 								/>
 							</div>

frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Plus, Trash2 } from '@signozhq/icons';
-import { Button, Form, FormInstance, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form, FormInstance, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/NameInput.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { ProcessorFormField } from '../../AddNewProcessor/config';
 import { formValidationRules } from '../../config';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/CSVInput.tsx

@@ -1,4 +1,6 @@
 import { ChangeEventHandler, useState } from 'react';
+// TODO(@signozhq/ui-input): migrate to @signozhq/ui Input once the antd
+// `InputProps` spread (`size`, etc.) is no longer needed on this wrapper.
 import { Input, InputProps } from 'antd';
 
 function CSVInput({ value, onChange, ...otherProps }: InputProps): JSX.Element {

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Info } from '@signozhq/icons';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Flex, Form, Input, Space, Tooltip } from 'antd';
+import { Flex, Form, Space, Tooltip } from 'antd';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { PREDEFINED_MAPPING } from '../config';

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
+import { Form, Select, Space } from 'antd';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
 import { ProcessorData } from 'types/api/pipeline/def';
 

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

@@ -81,20 +81,6 @@
 		}
 	}
 
-	.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;
 	}

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -2,7 +2,8 @@ import React, { ChangeEvent, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Form, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Form, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useDeleteDowntimeScheduleByID,

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Check, Info } from '@signozhq/icons';
+import { Check } from '@signozhq/icons';
 import {
 	Button,
 	DatePicker,
@@ -8,11 +8,9 @@ import {
 	FormInstance,
 	Input,
 	Modal,
-	Radio,
 	Select,
 	SelectProps,
 	Spin,
-	Tooltip,
 } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
@@ -72,18 +70,14 @@ 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;
@@ -133,12 +127,6 @@ 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();
 
@@ -152,14 +140,10 @@ export function PlannedDowntimeForm(
 	const saveHandler = useCallback(
 		async (values: PlannedDowntimeFormData) => {
 			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
-				alertIds:
-					values.alertRuleScope === 'all'
-						? []
-						: (values.alertRules
-								.map((alert) => alert.value)
-								.filter((alert) => alert !== undefined) as string[]),
+				alertIds: 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(),
@@ -278,13 +262,12 @@ 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, ''),
-			alertRuleScope:
-				isEditMode && initialAlertIds.length === 0 ? 'all' : 'specific',
-			alertRules: getAlertOptionsFromIds(initialAlertIds, alertOptions),
+			alertRules: getAlertOptionsFromIds(
+				initialValues.alertIds || [],
+				alertOptions,
+			),
 			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
 			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
 			recurrence: {
@@ -295,13 +278,11 @@ 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]);
 
@@ -330,7 +311,7 @@ export function PlannedDowntimeForm(
 			default:
 				return `Scheduled for ${formattedStartDate} starting at ${formattedStartTime}.`;
 		}
-	}, [formData, recurrenceType]);
+	}, [formData, recurrenceType, timezone]);
 
 	const endTimeText = useMemo((): string => {
 		const endTime = formData.endTime;
@@ -341,7 +322,7 @@ export function PlannedDowntimeForm(
 		const formattedEndTime = endTime.format(TIME_FORMAT);
 		const formattedEndDate = endTime.format(DATE_FORMAT);
 		return `Scheduled to end maintenance on ${formattedEndDate} at ${formattedEndTime}.`;
-	}, [formData, recurrenceType]);
+	}, [formData, recurrenceType, timezone]);
 
 	return (
 		<Modal
@@ -364,7 +345,6 @@ 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"
@@ -464,107 +444,50 @@ export function PlannedDowntimeForm(
 					<div className="scheduleTimeInfoText">{endTimeText}</div>
 				)}
 				<div>
-					<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>
+					<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>
-					{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={
+					<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>
-										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>
+										<Spin size="small" /> Loading...
 									</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>
+								) : (
+									<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 style={{ marginBottom: 0 }}>
 					<ModalButtonWrapper>
 						<Button

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -204,7 +204,7 @@ export function CollapseListContent({
 						selectedTags={alertOptions}
 					/>
 				) : (
-					<Tag className="all-alerts-tag">All alert rules</Tag>
+					'-'
 				),
 			)}
 		</Flex>

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

@@ -8,4 +8,16 @@
 	grid-template-columns: 60% 35%;
 	justify-content: space-between;
 	gap: 16px;
+
+	.input-with-label {
+		.label {
+			box-sizing: border-box;
+			height: 36px;
+		}
+
+		.input {
+			box-sizing: border-box;
+			height: 36px;
+		}
+	}
 }

frontend/src/container/QueryTable/Drilldown/BreakoutOptions.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Input, Skeleton } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Skeleton } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';

frontend/src/container/QueryTable/Drilldown/__tests__/useBaseDrilldownNavigate.test.ts

@@ -1,296 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import ROUTES from 'constants/routes';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { getViewQuery } from '../drilldownUtils';
-import { AggregateData } from '../useAggregateDrilldown';
-import useBaseDrilldownNavigate, {
-	buildDrilldownUrl,
-	getRoute,
-} from '../useBaseDrilldownNavigate';
-
-const mockSafeNavigate = jest.fn();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-jest.mock('../drilldownUtils', () => ({
-	...jest.requireActual('../drilldownUtils'),
-	getViewQuery: jest.fn(),
-}));
-
-const mockGetViewQuery = getViewQuery as jest.Mock;
-
-// ─── Fixtures ────────────────────────────────────────────────────────────────
-
-const MOCK_QUERY: Query = {
-	id: 'q1',
-	queryType: 'builder' as any,
-	builder: {
-		queryData: [
-			{
-				queryName: 'A',
-				dataSource: 'metrics' as any,
-				groupBy: [],
-				expression: '',
-				disabled: false,
-				functions: [],
-				legend: '',
-				having: [],
-				limit: null,
-				stepInterval: undefined,
-				orderBy: [],
-			},
-		],
-		queryFormulas: [],
-		queryTraceOperator: [],
-	},
-	promql: [],
-	clickhouse_sql: [],
-};
-
-const MOCK_VIEW_QUERY: Query = {
-	...MOCK_QUERY,
-	builder: {
-		...MOCK_QUERY.builder,
-		queryData: [
-			{
-				...MOCK_QUERY.builder.queryData[0],
-				filters: { items: [], op: 'AND' },
-			},
-		],
-	},
-};
-
-const MOCK_AGGREGATE_DATA: AggregateData = {
-	queryName: 'A',
-	filters: [{ filterKey: 'service_name', filterValue: 'auth', operator: '=' }],
-	timeRange: { startTime: 1000000, endTime: 2000000 },
-};
-
-// ─── getRoute ─────────────────────────────────────────────────────────────────
-
-describe('getRoute', () => {
-	it.each([
-		['view_logs', ROUTES.LOGS_EXPLORER],
-		['view_metrics', ROUTES.METRICS_EXPLORER],
-		['view_traces', ROUTES.TRACES_EXPLORER],
-	])('maps %s to the correct explorer route', (key, expected) => {
-		expect(getRoute(key)).toBe(expected);
-	});
-
-	it('returns empty string for an unknown key', () => {
-		expect(getRoute('view_dashboard')).toBe('');
-	});
-});
-
-// ─── buildDrilldownUrl ────────────────────────────────────────────────────────
-
-describe('buildDrilldownUrl', () => {
-	beforeEach(() => {
-		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('returns null for an unknown drilldown key', () => {
-		const url = buildDrilldownUrl(
-			MOCK_QUERY,
-			MOCK_AGGREGATE_DATA,
-			'view_dashboard',
-		);
-		expect(url).toBeNull();
-	});
-
-	it('returns null when getViewQuery returns null', () => {
-		mockGetViewQuery.mockReturnValue(null);
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(url).toBeNull();
-	});
-
-	it('returns a URL starting with the logs explorer route for view_logs', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(url).not.toBeNull();
-		expect(url).toContain(ROUTES.LOGS_EXPLORER);
-	});
-
-	it('returns a URL starting with the traces explorer route for view_traces', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_traces');
-		expect(url).toContain(ROUTES.TRACES_EXPLORER);
-	});
-
-	it('includes compositeQuery param in the URL', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(url).toContain('compositeQuery=');
-	});
-
-	it('includes startTime and endTime when aggregateData has a timeRange', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(url).toContain('startTime=1000000');
-		expect(url).toContain('endTime=2000000');
-	});
-
-	it('omits startTime and endTime when aggregateData has no timeRange', () => {
-		const { timeRange: _, ...withoutTimeRange } = MOCK_AGGREGATE_DATA;
-		const url = buildDrilldownUrl(MOCK_QUERY, withoutTimeRange, 'view_logs');
-		expect(url).not.toContain('startTime=');
-		expect(url).not.toContain('endTime=');
-	});
-
-	it('includes summaryFilters param for view_metrics', () => {
-		const url = buildDrilldownUrl(
-			MOCK_QUERY,
-			MOCK_AGGREGATE_DATA,
-			'view_metrics',
-		);
-		expect(url).toContain(ROUTES.METRICS_EXPLORER);
-		expect(url).toContain('summaryFilters=');
-	});
-
-	it('does not include summaryFilters param for non-metrics routes', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(url).not.toContain('summaryFilters=');
-	});
-
-	it('handles null aggregateData by passing empty filters and empty queryName', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, null, 'view_logs');
-		expect(url).not.toBeNull();
-		expect(mockGetViewQuery).toHaveBeenCalledWith(
-			MOCK_QUERY,
-			[],
-			'view_logs',
-			'',
-		);
-	});
-
-	it('passes aggregateData filters and queryName to getViewQuery', () => {
-		buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(mockGetViewQuery).toHaveBeenCalledWith(
-			MOCK_QUERY,
-			MOCK_AGGREGATE_DATA.filters,
-			'view_logs',
-			MOCK_AGGREGATE_DATA.queryName,
-		);
-	});
-});
-
-// ─── useBaseDrilldownNavigate ─────────────────────────────────────────────────
-
-describe('useBaseDrilldownNavigate', () => {
-	beforeEach(() => {
-		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('calls safeNavigate with the built URL on a valid key', () => {
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-			}),
-		);
-
-		result.current('view_logs');
-
-		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
-		const [url] = mockSafeNavigate.mock.calls[0];
-		expect(url).toContain(ROUTES.LOGS_EXPLORER);
-		expect(url).toContain('compositeQuery=');
-	});
-
-	it('opens the explorer in a new tab', () => {
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-			}),
-		);
-
-		result.current('view_traces');
-
-		expect(mockSafeNavigate).toHaveBeenCalledWith(expect.any(String), {
-			newTab: true,
-		});
-	});
-
-	it('calls callback after successful navigation', () => {
-		const callback = jest.fn();
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-				callback,
-			}),
-		);
-
-		result.current('view_logs');
-
-		expect(callback).toHaveBeenCalledTimes(1);
-	});
-
-	it('does not call safeNavigate for an unknown key', () => {
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-			}),
-		);
-
-		result.current('view_dashboard');
-
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('still calls callback when the key is unknown', () => {
-		const callback = jest.fn();
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-				callback,
-			}),
-		);
-
-		result.current('view_dashboard');
-
-		expect(callback).toHaveBeenCalledTimes(1);
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('still calls callback when getViewQuery returns null', () => {
-		mockGetViewQuery.mockReturnValue(null);
-		const callback = jest.fn();
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-				callback,
-			}),
-		);
-
-		result.current('view_logs');
-
-		expect(callback).toHaveBeenCalledTimes(1);
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('handles null aggregateData without throwing', () => {
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: null,
-			}),
-		);
-
-		expect(() => result.current('view_logs')).not.toThrow();
-		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx

@@ -168,7 +168,7 @@ export const getAggregateColumnHeader = (
 	};
 };
 
-export const getFiltersFromMetric = (metric: any): FilterData[] =>
+const getFiltersFromMetric = (metric: any): FilterData[] =>
 	Object.keys(metric).map((key) => ({
 		filterKey: key,
 		filterValue: metric[key],

frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx

@@ -2,10 +2,14 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Link, Loader } from '@signozhq/icons';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
 import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { processContextLinks } from 'container/NewWidget/RightContainer/ContextLinks/utils';
 import useContextVariables from 'hooks/dashboard/useContextVariables';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import createQueryParams from 'lib/createQueryParams';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
@@ -14,10 +18,9 @@ import { openInNewTab } from 'utils/navigation';
 
 import { ContextMenuItem } from './contextConfig';
 import { getDataLinks } from './dataLinksUtils';
-import { getAggregateColumnHeader } from './drilldownUtils';
+import { getAggregateColumnHeader, getViewQuery } from './drilldownUtils';
 import { getBaseContextConfig } from './menuOptions';
 import { AggregateData } from './useAggregateDrilldown';
-import useBaseDrilldownNavigate from './useBaseDrilldownNavigate';
 
 interface UseBaseAggregateOptionsProps {
 	query: Query;
@@ -35,6 +38,19 @@ interface BaseAggregateOptionsConfig {
 	items?: ContextMenuItem;
 }
 
+const getRoute = (key: string): string => {
+	switch (key) {
+		case 'view_logs':
+			return ROUTES.LOGS_EXPLORER;
+		case 'view_metrics':
+			return ROUTES.METRICS_EXPLORER;
+		case 'view_traces':
+			return ROUTES.TRACES_EXPLORER;
+		default:
+			return '';
+	}
+};
+
 const useBaseAggregateOptions = ({
 	query,
 	onClose,
@@ -70,6 +86,8 @@ const useBaseAggregateOptions = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [query, aggregateData, panelType]);
 
+	const { safeNavigate } = useSafeNavigate();
+
 	// Use the new useContextVariables hook
 	const { processedVariables } = useContextVariables({
 		maxValues: 2,
@@ -103,16 +121,50 @@ const useBaseAggregateOptions = ({
 					{label}
 				</ContextMenu.Item>
 			));
-		} catch {
+		} catch (error) {
 			return [];
 		}
 	}, [contextLinks, processedVariables, onClose, aggregateData, query]);
 
-	const handleBaseDrilldown = useBaseDrilldownNavigate({
-		resolvedQuery,
-		aggregateData,
-		callback: onClose,
-	});
+	const handleBaseDrilldown = useCallback(
+		(key: string): void => {
+			const route = getRoute(key);
+			const timeRange = aggregateData?.timeRange;
+			const filtersToAdd = aggregateData?.filters || [];
+			const viewQuery = getViewQuery(
+				resolvedQuery,
+				filtersToAdd,
+				key,
+				aggregateData?.queryName || '',
+			);
+
+			let queryParams = {
+				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
+				...(timeRange && {
+					[QueryParams.startTime]: timeRange?.startTime.toString(),
+					[QueryParams.endTime]: timeRange?.endTime.toString(),
+				}),
+			} as Record<string, string>;
+
+			if (route === ROUTES.METRICS_EXPLORER) {
+				queryParams = {
+					...queryParams,
+					[QueryParams.summaryFilters]: JSON.stringify(
+						viewQuery?.builder.queryData[0].filters,
+					),
+				};
+			}
+
+			if (route) {
+				safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
+					newTab: true,
+				});
+			}
+
+			onClose();
+		},
+		[resolvedQuery, safeNavigate, onClose, aggregateData],
+	);
 
 	const { pathname } = useLocation();
 

frontend/src/container/QueryTable/Drilldown/useBaseDrilldownNavigate.ts

@@ -1,117 +0,0 @@
-import { useCallback } from 'react';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import createQueryParams from 'lib/createQueryParams';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { getViewQuery } from './drilldownUtils';
-import { AggregateData } from './useAggregateDrilldown';
-
-type DrilldownKey = 'view_logs' | 'view_metrics' | 'view_traces';
-
-const DRILLDOWN_ROUTE_MAP: Record<DrilldownKey, string> = {
-	view_logs: ROUTES.LOGS_EXPLORER,
-	view_metrics: ROUTES.METRICS_EXPLORER,
-	view_traces: ROUTES.TRACES_EXPLORER,
-};
-
-const getRoute = (key: string): string =>
-	DRILLDOWN_ROUTE_MAP[key as DrilldownKey] ?? '';
-
-interface UseBaseDrilldownNavigateProps {
-	resolvedQuery: Query;
-	aggregateData: AggregateData | null;
-	callback?: () => void;
-}
-
-const useBaseDrilldownNavigate = ({
-	resolvedQuery,
-	aggregateData,
-	callback,
-}: UseBaseDrilldownNavigateProps): ((key: string) => void) => {
-	const { safeNavigate } = useSafeNavigate();
-
-	return useCallback(
-		(key: string): void => {
-			const route = getRoute(key);
-			const viewQuery = getViewQuery(
-				resolvedQuery,
-				aggregateData?.filters ?? [],
-				key,
-				aggregateData?.queryName ?? '',
-			);
-
-			if (!viewQuery || !route) {
-				callback?.();
-				return;
-			}
-
-			const timeRange = aggregateData?.timeRange;
-			let queryParams: Record<string, string> = {
-				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
-				...(timeRange && {
-					[QueryParams.startTime]: timeRange.startTime.toString(),
-					[QueryParams.endTime]: timeRange.endTime.toString(),
-				}),
-			};
-
-			if (route === ROUTES.METRICS_EXPLORER) {
-				queryParams = {
-					...queryParams,
-					[QueryParams.summaryFilters]: JSON.stringify(
-						viewQuery.builder.queryData[0].filters,
-					),
-				};
-			}
-
-			safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
-				newTab: true,
-			});
-
-			callback?.();
-		},
-		[resolvedQuery, safeNavigate, callback, aggregateData],
-	);
-};
-
-export function buildDrilldownUrl(
-	resolvedQuery: Query,
-	aggregateData: AggregateData | null,
-	key: string,
-): string | null {
-	const route = getRoute(key);
-	const viewQuery = getViewQuery(
-		resolvedQuery,
-		aggregateData?.filters ?? [],
-		key,
-		aggregateData?.queryName ?? '',
-	);
-
-	if (!viewQuery || !route) {
-		return null;
-	}
-
-	const timeRange = aggregateData?.timeRange;
-	let queryParams: Record<string, string> = {
-		[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
-		...(timeRange && {
-			[QueryParams.startTime]: timeRange.startTime.toString(),
-			[QueryParams.endTime]: timeRange.endTime.toString(),
-		}),
-	};
-
-	if (route === ROUTES.METRICS_EXPLORER) {
-		queryParams = {
-			...queryParams,
-			[QueryParams.summaryFilters]: JSON.stringify(
-				viewQuery.builder.queryData[0].filters,
-			),
-		};
-	}
-
-	return `${route}?${createQueryParams(queryParams)}`;
-}
-
-export { getRoute };
-export default useBaseDrilldownNavigate;

frontend/src/container/RoutingPolicies/RoutingPolicies.tsx

@@ -1,7 +1,8 @@
 import { ChangeEvent, useMemo } from 'react';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';

frontend/src/container/SpanDetailsDrawer/Events/Events.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Collapse, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Collapse, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { Diamond } from '@signozhq/icons';

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx

@@ -9,10 +9,10 @@ import {
 	useState,
 } from 'react';
 import { useMutation, useQuery } from 'react-query';
+import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	Checkbox,
-	Input,
 	Modal,
 	Select,
 	Skeleton,

frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx

@@ -8,7 +8,8 @@ import {
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import { Slider } from '@signozhq/ui/slider';
+import { Slider } from 'antd';
+import type { SliderRangeProps } from 'antd/lib/slider';
 import getFilters from 'api/trace/getFilters';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 // eslint-disable-next-line no-restricted-imports
@@ -168,15 +169,16 @@ function Duration(): JSX.Element {
 		debouncedFunction(min, max);
 	};
 
-	const onRangeHandler = (value: number | number[]): void => {
-		const [min, max] = value as number[];
+	const onRangeHandler: SliderRangeProps['onChange'] = ([min, max]) => {
 		updatedUrl(min, max);
 	};
 
-	const TipComponent = useCallback(
-		(value: number) => <div>{`${value.toString()}ms`}</div>,
-		[],
-	);
+	const TipComponent = useCallback((value: undefined | number) => {
+		if (value === undefined) {
+			return <div />;
+		}
+		return <div>{`${value?.toString()}ms`}</div>;
+	}, []);
 
 	return (
 		<div>
@@ -208,8 +210,7 @@ function Duration(): JSX.Element {
 					max={Number(getMs(String(preLocalMaxDuration.current || 0)))}
 					range
 					tooltip={{ formatter: TipComponent }}
-					onChange={(value): void => {
-						const [min, max] = value as number[];
+					onChange={([min, max]): void => {
 						onRangeSliderHandler([String(min), String(max)]);
 					}}
 					onAfterChange={onRangeHandler}

frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts

@@ -1,5 +1,7 @@
-import { Input } from 'antd';
+// TODO(@signozhq/ui-input): migrate this styled(Input) once @signozhq/ui
+// Input supports `addonAfter` (the consumer renders `<InputComponent addonAfter="ms">`).
 import { Typography } from '@signozhq/ui/typography';
+import { Input } from 'antd';
 import styled from 'styled-components';
 
 export const DurationText = styled.div`

frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx

@@ -8,7 +8,8 @@ import {
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { AutoComplete, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { AutoComplete } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/Trace/TraceGraphFilter/index.tsx

@@ -2,7 +2,8 @@ import { useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { AutoComplete, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { AutoComplete, Space } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { ArrowLeft, Check, Loader, Plus, Search } from '@signozhq/icons';
-import { Button, Input, Spin } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Spin } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SignozModal from 'components/SignozModal/SignozModal';

frontend/src/container/Version/styles.ts

@@ -1,4 +1,4 @@
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import styled from 'styled-components';
 
 export const InputComponent = styled(Input)`