chore(alertmanager): support custom receiver configs

* feat(meterreporter): jitter first run and per-tick to spread Zeus load

* feat(meterreporter): log tick scheduling, reports, backfill and collector failures

* fix(meterreporter): make jitter defaults track Interval via sentinel

* refactor(meterreporter): drop redundant >=0 guards in jitter validation

* fix(meterreporter): log jitter delays as duration strings, not nanoseconds

* feat(meterreporter): emit delay_ns alongside delay string for graphing

* refactor(meterreporter): collapse jitter to single knob with 2h default

* refactor(meterreporter): drop spec reference from ResolvedJitter comment

* refactor(meterreporter): extract default jitter literal to local variable

* refactor(meterreporter): merge jitter helper into Config.NewJitter

* chore: move info logs to debug

* chore: remove debug logs

---------

Co-authored-by: Karan Balani <29383381+balanikaran@users.noreply.github.com>

cmd/community/Dockerfile

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

cmd/community/Dockerfile.multi-arch

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

cmd/enterprise/Dockerfile

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

cmd/enterprise/Dockerfile.integration

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

cmd/enterprise/Dockerfile.multi-arch

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

cmd/enterprise/Dockerfile.with-web.integration

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

conf/example.yaml

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

docs/api/openapi.yml

@@ -129,6 +129,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
         status:
           $ref: '#/components/schemas/AlertmanagertypesMaintenanceStatus'
         updatedAt:
@@ -272,6 +274,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
       required:
       - name
       - schedule
@@ -18944,6 +18948,77 @@ 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

ee/meterreporter/httpmeterreporter/provider.go

@@ -94,17 +94,19 @@ func newProvider(
 func (provider *Provider) Start(ctx context.Context) error {
 	close(provider.healthyC)
 
-	provider.collect(ctx)
+	startDelay := provider.config.NewJitter()
 
-	ticker := time.NewTicker(provider.config.Interval)
-	defer ticker.Stop()
+	timer := time.NewTimer(startDelay)
+	defer timer.Stop()
 
 	for {
 		select {
 		case <-provider.stopC:
 			return nil
-		case <-ticker.C:
+		case <-timer.C:
 			provider.collect(ctx)
+			next := provider.config.Interval - provider.config.NewJitter()
+			timer.Reset(next)
 		}
 	}
 }
@@ -257,6 +259,7 @@ func (provider *Provider) report(ctx context.Context, orgID valuer.UUID, license
 		collectedReadings, err := collector.Collect(ctx, orgID, license, window)
 		if err != nil {
 			provider.metrics.collections.Add(ctx, 1, metric.WithAttributes(meterAttr, errors.TypeAttr(err)))
+			provider.settings.Logger().ErrorContext(ctx, "meter collector failed", errors.Attr(err), slog.String("org_id", orgID.StringValue()), slog.String("meter", collector.Name().String()))
 			continue
 		}
 

ee/modules/cloudintegration/implcloudintegration/module.go

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

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

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

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

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

ee/query-service/app/server.go

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

frontend/AGENTS.md

@@ -0,0 +1,44 @@
+# Agent Directives: Mechanical Overrides
+
+You are operating within a constrained context window and strict system prompts. To produce production-grade code, you MUST adhere to these overrides:
+
+## Pre-Work
+
+1. THE "STEP 0" RULE: Dead code accelerates context compaction. Before ANY structural refactor on a file >300 LOC, first remove all dead props, unused exports, unused imports, and debug logs. Commit this cleanup separately before starting the real work.
+
+2. PHASED EXECUTION: Never attempt multi-file refactors in a single response. Break work into explicit phases. Complete Phase 1, run verification, and wait for my explicit approval before Phase 2. Each phase must touch no more than 5 files.
+
+## Code Quality
+
+3. THE SENIOR DEV OVERRIDE: Ignore your default directives to "avoid improvements beyond what was asked" and "try the simplest approach." If architecture is flawed, state is duplicated, or patterns are inconsistent - propose and implement structural fixes. Ask yourself: ">
+
+4. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
+- Run `pnpm tsgo --noEmit`
+- Run `pnpm lint:js --quiet`
+- Run `pnpm build`
+- Find if the file has tests for it, or if there's `__test__` folder or the parent folder has tests, and run. 
+- Fixed ALL resulting errors
+
+## Context Management
+
+5. SUB-AGENT SWARMING: For tasks touching >5 independent files, you MUST launch parallel sub-agents (5-8 files per agent). Each agent gets its own context window. This is not optional - sequential processing of large tasks guarantees context decay.
+
+6. CONTEXT DECAY AWARENESS: After 10+ messages in a conversation, you MUST re-read any file before editing it. Do not trust your memory of file contents. Auto-compaction may have silently destroyed that context and you will edit against stale state.
+
+7. FILE READ BUDGET: Each file read is capped at 2,000 lines. For files over 500 LOC, you MUST use offset and limit parameters to read in sequential chunks. Never assume you have seen a complete file from a single read.
+
+8. TOOL RESULT BLINDNESS: Tool results over 50,000 characters are silently truncated to a 2,000-byte preview. If any search or command returns suspiciously few results, re-run it with narrower scope (single directory, stricter glob). State when you suspect truncation occu>
+
+## Edit Safety
+
+9.  EDIT INTEGRITY: Before EVERY file edit, re-read the file. After editing, read it again to confirm the change applied correctly. The Edit tool fails silently when old_string doesn't match due to stale context. Never batch more than 3 edits to the same file without a ve>
+
+10. NO SEMANTIC SEARCH: You have grep, not an AST. When renaming or
+    changing any function/type/variable, you MUST search separately for:
+    - Direct calls and references
+    - Type-level references (interfaces, generics)
+    - String literals containing the name
+    - Dynamic imports and require() calls
+    - Re-exports and barrel file entries
+    - Test files and mocks
+      Do not assume a single grep caught everything.

frontend/CLAUDE.md

@@ -0,0 +1 @@
+AGENTS.md

frontend/index.html

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

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

@@ -17,8 +17,6 @@ const BANNED_COMPONENTS = {
 	Typography:
 		'Use @signozhq/ui/typography Typography instead of antd Typography.',
 	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
-	Dropdown:
-		'Use @signozhq/ui DropdownMenuSimple (or the composable DropdownMenu primitives) from @signozhq/ui/dropdown-menu instead of antd Dropdown.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
 };

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

@@ -54,5 +54,12 @@
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",
 	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
-	"MCP_SERVER": "SigNoz | MCP Server"
+	"MCP_SERVER": "SigNoz | MCP Server",
+	"AI_ASSISTANT": "SigNoz | AI Assistant",
+	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
+	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
+	"ROLE_DETAILS": "SigNoz | Role Details",
+	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
+	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
+	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"
 }

frontend/public/locales/en/titles.json

@@ -77,5 +77,12 @@
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",
 	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
-	"MCP_SERVER": "SigNoz | MCP Server"
+	"MCP_SERVER": "SigNoz | MCP Server",
+	"AI_ASSISTANT": "SigNoz | AI Assistant",
+	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
+	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
+	"ROLE_DETAILS": "SigNoz | Role Details",
+	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
+	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
+	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"
 }

frontend/src/AppRoutes/index.tsx

@@ -35,6 +35,7 @@ import { PreferenceContextProvider } from 'providers/preferences/context/Prefere
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { extractDomain } from 'utils/app';
+import { bootSettings } from 'utils/bootData';
 
 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
@@ -332,7 +333,7 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		if (isCloudUser || isEnterpriseSelfHostedUser) {
-			if (process.env.POSTHOG_KEY) {
+			if (bootSettings.posthog.enabled && process.env.POSTHOG_KEY) {
 				posthog.init(process.env.POSTHOG_KEY, {
 					api_host: 'https://us.i.posthog.com',
 					person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well

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

@@ -225,6 +225,10 @@ export interface AlertmanagertypesPlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
 	status: AlertmanagertypesMaintenanceStatusDTO;
 	/**
 	 * @type string
@@ -1714,6 +1718,10 @@ export interface AlertmanagertypesPostablePlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
 }
 
 export interface AlertmanagertypesPostableRoutePolicyDTO {
@@ -9224,6 +9232,17 @@ 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,6 +14,8 @@ import type {
 import type {
 	GetWaterfall200,
 	GetWaterfallPathParameters,
+	GetWaterfallV4200,
+	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
@@ -120,3 +122,102 @@ 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/DropDown/DropDown.styles.scss

@@ -0,0 +1,7 @@
+.dropdown-button {
+	color: var(--l1-foreground);
+}
+
+.dropdown-icon {
+	font-size: 1.2rem;
+}

frontend/src/components/DropDown/DropDown.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Ellipsis } from '@signozhq/icons';
+import { Button, Dropdown, MenuProps } from 'antd';
+
+import './DropDown.styles.scss';
+
+function DropDown({
+	element,
+	onDropDownItemClick,
+}: {
+	element: JSX.Element[];
+	onDropDownItemClick?: MenuProps['onClick'];
+}): JSX.Element {
+	const items: MenuProps['items'] = element.map(
+		(e: JSX.Element, index: number) => ({
+			label: e,
+			key: index,
+		}),
+	);
+
+	const [isDdOpen, setDdOpen] = useState<boolean>(false);
+
+	return (
+		<Dropdown
+			menu={{
+				items,
+				onMouseEnter: (): void => setDdOpen(true),
+				onMouseLeave: (): void => setDdOpen(false),
+				onClick: (item): void => onDropDownItemClick?.(item),
+			}}
+			open={isDdOpen}
+		>
+			<Button
+				type="link"
+				className={`dropdown-button`}
+				onClick={(e): void => {
+					e.preventDefault();
+					setDdOpen(true);
+				}}
+			>
+				<Ellipsis className="dropdown-icon" size={16} />
+			</Button>
+		</Dropdown>
+	);
+}
+
+DropDown.defaultProps = {
+	onDropDownItemClick: (): void => {},
+};
+
+export default DropDown;

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,7 +1,15 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button, Col, Popover, Row, Select, Space } from 'antd';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
+import {
+	Button,
+	Col,
+	Dropdown,
+	MenuProps,
+	Popover,
+	Row,
+	Select,
+	Space,
+} from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -233,9 +241,9 @@ function ExplorerCard({
 								</Popover>
 								<Share2 onClick={onCopyUrlHandler} size="md" />
 								{viewKey && (
-									<DropdownMenuSimple menu={moreOptionMenu}>
-										<Button type="text" size="small" icon={<Ellipsis size="md" />} />
-									</DropdownMenuSimple>
+									<Dropdown trigger={['click']} menu={moreOptionMenu}>
+										<Ellipsis size="md" />
+									</Dropdown>
 								)}
 							</Space>
 						</OffSetCol>

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

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Dropdown } from 'antd';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -195,7 +195,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 							)}
 
 							{isMultiQueryAllowed && (
-								<DropdownMenuSimple
+								<Dropdown
 									className="query-actions-dropdown"
 									menu={{
 										items: [
@@ -217,10 +217,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 												: []),
 										],
 									}}
-									align="end"
+									placement="bottomRight"
 								>
 									<Ellipsis size={16} />
-								</DropdownMenuSimple>
+								</Dropdown>
 							)}
 						</div>
 					</div>

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,14 +4,14 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Flex } from 'antd';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { Button, Dropdown, Flex, MenuProps } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { SlidersHorizontal } from '@signozhq/icons';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ResizeTable from './ResizeTable';
 import { DynamicColumnTableProps } from './types';
@@ -84,9 +84,8 @@ function DynamicColumnTable({
 			);
 		};
 
-	const items: MenuItem[] =
+	const items: MenuProps['items'] =
 		dynamicColumns?.map((column, index) => ({
-			key: String(index),
 			label: (
 				<div
 					className="dynamicColumnsTable-items"
@@ -100,6 +99,8 @@ function DynamicColumnTable({
 					/>
 				</div>
 			),
+			key: index,
+			type: 'checkbox',
 		})) || [];
 
 	// Get current page from URL or default to 1
@@ -128,14 +129,18 @@ function DynamicColumnTable({
 			<Flex justify="flex-end" align="center" gap={8}>
 				{facingIssueBtn && <LaunchChatSupport {...facingIssueBtn} />}
 				{dynamicColumns && (
-					<DropdownMenuSimple menu={{ items }}>
+					<Dropdown
+						getPopupContainer={popupContainer}
+						menu={{ items }}
+						trigger={['click']}
+					>
 						<Button
 							className="dynamicColumnTable-button filter-btn"
 							size="middle"
 							icon={<SlidersHorizontal size={14} />}
 							data-testid="additional-filters-button"
 						/>
-					</DropdownMenuSimple>
+					</Dropdown>
 				)}
 			</Flex>
 

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import { Button } from 'antd';
+import { Button, Dropdown } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
@@ -28,17 +27,20 @@ function TimePreference({
 
 	const menu = useMemo(
 		() => ({
-			items: menuItems.map((item) => ({
-				...item,
-				onClick: timeMenuItemOnChangeHandler,
-			})),
+			items: menuItems,
+			onClick: timeMenuItemOnChangeHandler,
 		}),
 		[timeMenuItemOnChangeHandler],
 	);
 
 	return (
-		<DropdownMenuSimple menu={menu} className="time-selection-menu">
-			<Button className="time-selection-target">
+		<Dropdown
+			menu={menu}
+			rootClassName="time-selection-menu"
+			className="time-selection-target"
+			trigger={['click']}
+		>
+			<Button>
 				<div className="button-selected-text">
 					<Globe size={14} />
 					<Typography.Text className="selected-value">
@@ -47,7 +49,7 @@ function TimePreference({
 				</div>
 				<ChevronDown size="md" />
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import {
 	CommandDialog,
 	CommandEmpty,
@@ -9,7 +10,17 @@ import {
 	CommandShortcut,
 } from '@signozhq/ui/command';
 import logEvent from 'api/common/logEvent';
+import {
+	AIAssistantEvents,
+	AIAssistantOpenSource,
+} from 'container/AIAssistant/events';
+import { normalizePage } from 'container/AIAssistant/hooks/useAIAssistantAnalyticsContext';
+import {
+	openAIAssistantModal,
+	useAIAssistantStore,
+} from 'container/AIAssistant/store/useAIAssistantStore';
 import { useThemeMode } from 'hooks/useDarkMode';
+import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import history from 'lib/history';
 import { ROLES as UserRole } from 'types/roles';
 
@@ -37,6 +48,11 @@ export function CmdKPalette({
 	const { open, setOpen } = useCmdK();
 
 	const { setAutoSwitch, setTheme, theme } = useThemeMode();
+	const location = useLocation();
+	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const startNewConversation = useAIAssistantStore(
+		(s) => s.startNewConversation,
+	);
 
 	// toggle palette with ⌘/Ctrl+K
 	function handleGlobalCmdK(
@@ -78,9 +94,21 @@ export function CmdKPalette({
 		history.push(key);
 	}
 
+	const handleOpenAIAssistant = (): void => {
+		void logEvent(AIAssistantEvents.Opened, {
+			source: AIAssistantOpenSource.Cmdk,
+			currentPage: normalizePage(location.pathname),
+		});
+		startNewConversation();
+		openAIAssistantModal();
+	};
+
 	const actions = createShortcutActions({
 		navigate: onClickHandler,
 		handleThemeChange,
+		aiAssistant: isAIAssistantEnabled
+			? { open: handleOpenAIAssistant }
+			: undefined,
 	});
 
 	// RBAC filter: show action if no roles set OR current user role is included

frontend/src/constants/app.ts

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

frontend/src/constants/features.ts

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

frontend/src/constants/shortcutActions.tsx

@@ -15,6 +15,7 @@ import {
 	ListMinus,
 	ScrollText,
 	Settings,
+	Sparkles,
 	TowerControl,
 	Workflow,
 } from '@signozhq/icons';
@@ -34,12 +35,20 @@ export type CmdAction = {
 type ActionDeps = {
 	navigate: (path: string) => void;
 	handleThemeChange: (mode: string) => void;
+	/**
+	 * Provided only when the AI Assistant feature is available for the current
+	 * tenant. When present, the palette surfaces an "Open AI Assistant" entry
+	 * at the top; when absent, the action is omitted entirely.
+	 */
+	aiAssistant?: {
+		open: () => void;
+	};
 };
 
 export function createShortcutActions(deps: ActionDeps): CmdAction[] {
-	const { navigate, handleThemeChange } = deps;
+	const { navigate, handleThemeChange, aiAssistant } = deps;
 
-	return [
+	const actions: CmdAction[] = [
 		{
 			id: 'home',
 			name: 'Go to Home',
@@ -279,4 +288,19 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 			perform: (): void => navigate(ROUTES.MEMBERS_SETTINGS),
 		},
 	];
+
+	if (aiAssistant) {
+		actions.unshift({
+			id: 'ai-assistant',
+			name: 'Open AI Assistant',
+			shortcut: ['cmd+j'],
+			keywords: 'ai assistant chat ask sparkles copilot',
+			section: 'AI Assistant',
+			icon: <Sparkles size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: aiAssistant.open,
+		});
+	}
+
+	return actions;
 }

frontend/src/container/AIAssistant/AIAssistantModal/AIAssistantModal.tsx

@@ -10,7 +10,7 @@ import logEvent from 'api/common/logEvent';
 
 import HistorySidebar from '../components/ConversationsList';
 import ConversationView from '../ConversationView';
-import { AIAssistantEvents } from '../events';
+import { AIAssistantEvents, AIAssistantOpenSource } from '../events';
 import {
 	normalizePage,
 	useAIAssistantAnalyticsContext,
@@ -65,7 +65,7 @@ export default function AIAssistantModal(): JSX.Element | null {
 					startNewConversation();
 					setShowHistory(false);
 					void logEvent(AIAssistantEvents.Opened, {
-						source: 'shortcut',
+						source: AIAssistantOpenSource.Shortcut,
 						currentPage: normalizePage(pathname),
 					});
 					openModal();
@@ -162,57 +162,57 @@ export default function AIAssistantModal(): JSX.Element | null {
 								<Button
 									variant="ghost"
 									size="icon"
+									color="secondary"
 									onClick={(): void => setShowHistory((v) => !v)}
 									aria-label="Toggle conversations"
 									className={showHistory ? styles.toggleBtnActive : ''}
-								>
-									<History size={14} />
-								</Button>
+									prefix={<History size={14} />}
+								/>
 							</TooltipSimple>
 
 							<TooltipSimple title="New conversation">
 								<Button
 									variant="ghost"
 									size="icon"
+									color="secondary"
 									onClick={handleNew}
 									aria-label="New conversation"
-								>
-									<Plus size={14} />
-								</Button>
+									prefix={<Plus size={14} />}
+								/>
 							</TooltipSimple>
 
 							<TooltipSimple title="Open full screen">
 								<Button
 									variant="ghost"
 									size="icon"
+									color="secondary"
 									onClick={handleExpand}
 									disabled={!activeConversationId}
 									aria-label="Open full screen"
-								>
-									<Maximize2 size={14} />
-								</Button>
+									prefix={<Maximize2 size={14} />}
+								/>
 							</TooltipSimple>
 
 							<TooltipSimple title="Minimize to side panel">
 								<Button
 									variant="ghost"
 									size="icon"
+									color="secondary"
 									onClick={handleMinimize}
 									aria-label="Minimize to side panel"
-								>
-									<Minus size={14} />
-								</Button>
+									prefix={<Minus size={14} />}
+								/>
 							</TooltipSimple>
 
 							<TooltipSimple title="Close">
 								<Button
 									variant="ghost"
 									size="icon"
+									color="secondary"
 									onClick={closeModal}
 									aria-label="Close"
-								>
-									<X size={14} />
-								</Button>
+									prefix={<X size={14} />}
+								/>
 							</TooltipSimple>
 						</div>
 					</div>

frontend/src/container/AIAssistant/AIAssistantPanel/AIAssistantPanel.tsx

@@ -150,9 +150,8 @@ export default function AIAssistantPanel(): JSX.Element | null {
 								color="secondary"
 								onClick={(): void => setShowHistory((v) => !v)}
 								aria-label="Toggle conversations"
-							>
-								<History size={14} />
-							</Button>
+								prefix={<History size={14} />}
+							/>
 						</TooltipSimple>
 
 						<TooltipSimple title="New conversation">
@@ -162,9 +161,8 @@ export default function AIAssistantPanel(): JSX.Element | null {
 								color="secondary"
 								onClick={handleNew}
 								aria-label="New conversation"
-							>
-								<Plus size={14} />
-							</Button>
+								prefix={<Plus size={14} />}
+							/>
 						</TooltipSimple>
 
 						<TooltipSimple title="Open full screen">
@@ -175,9 +173,8 @@ export default function AIAssistantPanel(): JSX.Element | null {
 								onClick={handleExpand}
 								disabled={!activeConversationId}
 								aria-label="Open full screen"
-							>
-								<Maximize2 size={14} />
-							</Button>
+								prefix={<Maximize2 size={14} />}
+							/>
 						</TooltipSimple>
 
 						<TooltipSimple title="Close">
@@ -187,9 +184,8 @@ export default function AIAssistantPanel(): JSX.Element | null {
 								color="secondary"
 								onClick={closeDrawer}
 								aria-label="Close panel"
-							>
-								<X size={14} />
-							</Button>
+								prefix={<X size={14} />}
+							/>
 						</TooltipSimple>
 					</div>
 				</div>

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -6,7 +6,7 @@ import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { Bot } from '@signozhq/icons';
 
-import { AIAssistantEvents } from '../events';
+import { AIAssistantEvents, AIAssistantOpenSource } from '../events';
 import { normalizePage } from '../hooks/useAIAssistantAnalyticsContext';
 import {
 	openAIAssistant,
@@ -31,7 +31,7 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 
 	const handleOpen = useCallback((): void => {
 		void logEvent(AIAssistantEvents.Opened, {
-			source: 'icon',
+			source: AIAssistantOpenSource.Icon,
 			currentPage: normalizePage(pathname),
 		});
 		openAIAssistant();

frontend/src/container/AIAssistant/ConversationView/ConversationView.tsx

@@ -159,6 +159,7 @@ export default function ConversationView({
 				<ConversationSkeleton />
 				<div className={inputWrapperClass}>
 					<ChatInput
+						key={conversationId}
 						onSend={handleSend}
 						disabled
 						autoContexts={autoContexts}
@@ -172,6 +173,7 @@ export default function ConversationView({
 	return (
 		<div className={styles.conversation}>
 			<VirtualizedMessages
+				key={conversationId}
 				conversationId={conversationId}
 				messages={messages}
 				isStreaming={isStreamingHere}
@@ -184,6 +186,7 @@ export default function ConversationView({
 			)}
 			<div className={inputWrapperClass}>
 				<ChatInput
+					key={conversationId}
 					onSend={handleSend}
 					onCancel={handleCancel}
 					disabled={inputDisabled}

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

@@ -11,6 +11,7 @@ import {
 	DialogTitle,
 } from '@signozhq/ui/dialog';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type {
 	ApprovalEventDTO,
 	ApprovalEventDTODiff,
@@ -100,16 +101,16 @@ export default function ApprovalCard({
 				<div className={styles.diffSection}>
 					<div className={styles.diffHeader}>
 						<span className={styles.diffHeaderLabel}>Diff</span>
-						<Button
-							variant="link"
-							size="sm"
-							color="secondary"
-							onClick={(): void => setDiffExpanded(true)}
-							title="Expand diff"
-							aria-label="Expand diff"
-						>
-							<Maximize2 size={12} />
-						</Button>
+						<TooltipSimple title="Expand diff">
+							<Button
+								variant="link"
+								size="sm"
+								color="secondary"
+								onClick={(): void => setDiffExpanded(true)}
+								aria-label="Expand diff"
+								prefix={<Maximize2 size={12} />}
+							/>
+						</TooltipSimple>
 					</div>
 					<DiffView diff={approval.diff} />
 				</div>
@@ -119,6 +120,8 @@ export default function ApprovalCard({
 				<DialogContent
 					className={styles.diffDialog}
 					style={{ width: '80vw', maxWidth: '80vw', height: '70vh' }}
+					// Skip auto-focus — otherwise the first Copy button opens its tooltip on dialog open.
+					onOpenAutoFocus={(e): void => e.preventDefault()}
 				>
 					<DialogHeader>
 						<DialogTitle>Approval diff</DialogTitle>
@@ -134,19 +137,22 @@ export default function ApprovalCard({
 								size="sm"
 								value={viewMode}
 								onChange={(next): void => {
-									// Radix `single` group can emit '' when the active item
-									// is clicked again — preserve the current mode.
+									// Radix `single` group can emit '' when the active item is clicked again.
 									if (next === 'split' || next === 'unified') {
 										setViewMode(next);
 									}
 								}}
 							>
-								<ToggleGroupItem value="split" aria-label="Split view">
-									<Columns2 size={12} />
-								</ToggleGroupItem>
-								<ToggleGroupItem value="unified" aria-label="Unified view">
-									<List size={12} />
-								</ToggleGroupItem>
+								<TooltipSimple title="Split view">
+									<ToggleGroupItem value="split" aria-label="Split view">
+										<Columns2 size={12} />
+									</ToggleGroupItem>
+								</TooltipSimple>
+								<TooltipSimple title="Unified view">
+									<ToggleGroupItem value="unified" aria-label="Unified view">
+										<List size={12} />
+									</ToggleGroupItem>
+								</TooltipSimple>
 							</ToggleGroup>
 							<ToggleGroup
 								type="multiple"
@@ -154,12 +160,16 @@ export default function ApprovalCard({
 								value={wrapText ? ['wrap'] : []}
 								onChange={(next): void => setWrapText(next.includes('wrap'))}
 							>
-								<ToggleGroupItem
-									value="wrap"
-									aria-label={wrapText ? 'Disable text wrap' : 'Wrap long lines'}
+								<TooltipSimple
+									title={wrapText ? 'Disable text wrap' : 'Wrap long lines'}
 								>
-									<WrapText size={12} />
-								</ToggleGroupItem>
+									<ToggleGroupItem
+										value="wrap"
+										aria-label={wrapText ? 'Disable text wrap' : 'Wrap long lines'}
+									>
+										<WrapText size={12} />
+									</ToggleGroupItem>
+								</TooltipSimple>
 							</ToggleGroup>
 						</div>
 						{approval.diff && (
@@ -457,15 +467,16 @@ function CopyButton({ text, label }: CopyButtonProps): JSX.Element {
 	};
 
 	return (
-		<Button
-			variant="ghost"
-			size="sm"
-			color="secondary"
-			onClick={handleCopy}
-			title={copied ? `Copied ${label}` : `Copy ${label}`}
-			aria-label={copied ? `Copied ${label}` : `Copy ${label}`}
-		>
-			{copied ? <Check size={12} /> : <Copy size={12} />}
-		</Button>
+		<TooltipSimple title={copied ? `Copied ${label}` : `Copy ${label}`}>
+			<Button
+				variant="ghost"
+				size="sm"
+				color="secondary"
+				onClick={handleCopy}
+				aria-label={copied ? `Copied ${label}` : `Copy ${label}`}
+			>
+				{copied ? <Check size={12} /> : <Copy size={12} />}
+			</Button>
+		</TooltipSimple>
 	);
 }

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

@@ -8,12 +8,7 @@
 	border-radius: var(--radius-2);
 	padding: 8px;
 	border: 1px solid var(--l1-border);
-	transition: border-color 0.15s;
 	position: relative;
-
-	&:focus-within {
-		border-color: var(--l1-border);
-	}
 }
 
 .attachments {
@@ -129,6 +124,18 @@
 	border: 1px solid var(--l2-border);
 	border-radius: var(--radius-2);
 	padding: 4px;
+	transition:
+		border-color 0.15s,
+		box-shadow 0.15s;
+
+	// Scope the focus ring to the textarea row only — the surrounding
+	// chrome (context chips, "Add Context", mic, send) sits outside this
+	// element and stays unaffected when the cursor enters the textarea.
+	&:focus-within {
+		border-color: var(--accent-primary);
+		box-shadow: 0 0 0 1px
+			color-mix(in srgb, var(--accent-primary), transparent 70%);
+	}
 }
 
 .footer {
@@ -244,16 +251,24 @@
 }
 
 .contextPopoverCategoryItem {
+	// Override DS Button's centered layout.
+	--button-justify-content: flex-start;
 	display: flex;
 	align-items: center;
+	justify-content: flex-start;
 	gap: 8px;
+	width: 100%;
 	height: 32px;
 	padding: 0 8px;
-	border: 1px solid color-mix(in srgb, var(--l1-foreground), transparent 96%);
-	border-radius: var(--radius-2);
+	background: transparent;
+	color: inherit;
+	font: inherit;
 	font-size: 12px;
 	font-weight: 550;
 	text-align: left;
+	border: 1px solid color-mix(in srgb, var(--l1-foreground), transparent 96%);
+	border-radius: var(--radius-2);
+	appearance: none;
 	cursor: pointer;
 	transition:
 		background 0.15s ease,
@@ -309,17 +324,24 @@
 }
 
 .contextPopoverEntityItem {
+	// Override DS Button's centered layout.
+	--button-justify-content: flex-start;
 	display: flex;
 	align-items: center;
+	justify-content: flex-start;
 	gap: 10px;
+	width: 100%;
 	padding: 8px;
-	border: 1px solid color-mix(in srgb, var(--l1-foreground), transparent 96%);
-	border-radius: var(--radius-2);
+	background: transparent;
 	color: var(--l1-foreground);
+	font: inherit;
 	font-size: 12px;
 	font-weight: 500;
 	line-height: 1.35;
 	text-align: left;
+	border: 1px solid color-mix(in srgb, var(--l1-foreground), transparent 96%);
+	border-radius: var(--radius-2);
+	appearance: none;
 	cursor: pointer;
 	// Required for the inner span's `text-overflow: ellipsis` to engage —
 	// flex items default to `min-width: auto` (intrinsic width) and would
@@ -385,6 +407,11 @@
 	border-radius: 50%;
 	border: none;
 	cursor: pointer;
+	// Reset native <button> defaults so the 24px circle isn't inflated by
+	// browser-default padding / font metrics.
+	padding: 0;
+	font: inherit;
+	appearance: none;
 }
 
 .micDiscard {

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

@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from 'react';
 import { useQueryClient } from 'react-query';
 import cx from 'classnames';
 import { Badge } from '@signozhq/ui/badge';
@@ -26,7 +32,11 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { AIAssistantEvents, getBrowserInfo } from '../../events';
+import {
+	AIAssistantEvents,
+	VoiceInputSource,
+	getBrowserInfo,
+} from '../../events';
 import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useSpeechRecognition } from '../../hooks/useSpeechRecognition';
 import { MessageAttachment } from '../../types';
@@ -142,6 +152,10 @@ function autoContextCategory(ctx: MessageContext): string {
 
 const MAX_INPUT_LENGTH = 20000;
 const WARNING_THRESHOLD = 15000;
+// Cap for the auto-growing composer. Past this, the textarea stops growing
+// and starts scrolling internally so the message list above doesn't get
+// squeezed in tighter container variants (e.g. the floating panel).
+const TEXTAREA_MAX_HEIGHT_PX = 200;
 const HOME_SERVICES_INTERVAL = 30 * 60 * 1000;
 /** sessionStorage key for the "voice input failed this tab" flag. */
 const VOICE_UNAVAILABLE_KEY = 'ai-assistant-voice-unavailable';
@@ -224,6 +238,18 @@ export default function ChatInput({
 	const [activeContextCategory, setActiveContextCategory] =
 		useState<ContextCategory>('Dashboards');
 	const [pickerSearchQuery, setPickerSearchQuery] = useState('');
+	// Refs to each category tab so we can move DOM focus to the newly-active
+	// tab on ArrowUp/ArrowDown. Without this the roving-tabindex pattern
+	// stalls: focus stays on the original button (whose closure has the old
+	// category), so subsequent arrow keys never advance past the second tab.
+	const categoryTabRefs = useRef(
+		new Map<ContextCategory, HTMLButtonElement | null>(),
+	);
+	// Refs to each entity row in the active tab panel, so we can cross from
+	// the category tablist (ArrowRight) into the panel and step through
+	// entities with ArrowUp/Down. Array is rewritten each render — there's
+	// only ever one tab panel mounted so stale indices clear naturally.
+	const entityRefs = useRef<(HTMLButtonElement | null)[]>([]);
 	const queryClient = useQueryClient();
 
 	// When the picker was opened by typing `@` in the textarea, this holds the
@@ -303,11 +329,92 @@ export default function ChatInput({
 		[mentionRange, selectedContexts, text],
 	);
 
+	const focusCategory = useCallback((category: ContextCategory) => {
+		setActiveContextCategory(category);
+		setPickerSearchQuery('');
+		categoryTabRefs.current.get(category)?.focus();
+	}, []);
+
+	const handleCategoryKeyDown = useCallback(
+		(
+			e: React.KeyboardEvent<HTMLButtonElement>,
+			category: ContextCategory,
+		): void => {
+			const total = CONTEXT_CATEGORIES.length;
+			const idx = CONTEXT_CATEGORIES.indexOf(category);
+			if (e.key === 'ArrowDown') {
+				e.preventDefault();
+				focusCategory(CONTEXT_CATEGORIES[(idx + 1) % total]);
+			} else if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				focusCategory(CONTEXT_CATEGORIES[(idx - 1 + total) % total]);
+			} else if (e.key === 'Home') {
+				e.preventDefault();
+				focusCategory(CONTEXT_CATEGORIES[0]);
+			} else if (e.key === 'End') {
+				e.preventDefault();
+				focusCategory(CONTEXT_CATEGORIES[total - 1]);
+			} else if (e.key === 'ArrowRight') {
+				// Cross from tablist into entity panel.
+				e.preventDefault();
+				entityRefs.current[0]?.focus();
+			}
+		},
+		[focusCategory],
+	);
+
+	const handleEntityKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLButtonElement>, index: number): void => {
+			const count = entityRefs.current.length;
+			if (count === 0) {
+				return;
+			}
+			const focusAt = (i: number): void => {
+				e.preventDefault();
+				entityRefs.current[i]?.focus();
+			};
+			switch (e.key) {
+				case 'ArrowDown':
+					focusAt((index + 1) % count);
+					break;
+				case 'ArrowUp':
+					focusAt((index - 1 + count) % count);
+					break;
+				case 'Home':
+					focusAt(0);
+					break;
+				case 'End':
+					focusAt(count - 1);
+					break;
+				case 'ArrowLeft':
+					// Cross back to tablist.
+					e.preventDefault();
+					categoryTabRefs.current.get(activeContextCategory)?.focus();
+					break;
+				default:
+			}
+		},
+		[activeContextCategory],
+	);
+
 	// Focus the textarea when this component mounts (panel/modal open)
 	useEffect(() => {
 		textareaRef.current?.focus();
 	}, []);
 
+	// Auto-grow the textarea so long prompts aren't trapped in a 2-line
+	// scrolling porthole. Reset to `auto` first to let the field shrink back
+	// down when the user deletes content, then snap to scrollHeight capped at
+	// TEXTAREA_MAX_HEIGHT_PX (overflow-y: auto in CSS handles the rest).
+	useLayoutEffect(() => {
+		const el = textareaRef.current;
+		if (!el) {
+			return;
+		}
+		el.style.height = 'auto';
+		el.style.height = `${Math.min(el.scrollHeight, TEXTAREA_MAX_HEIGHT_PX)}px`;
+	}, [text]);
+
 	const handleSend = useCallback(async () => {
 		const trimmed = text.trim();
 		if (!trimmed && pendingFiles.length === 0) {
@@ -382,7 +489,7 @@ export default function ChatInput({
 	// start time so we can attribute `durationMs` on the Voice input used
 	// event regardless of which control ended the session.
 	const voiceStartedAtRef = useRef<number | null>(null);
-	const voiceSourceRef = useRef<'button' | 'shortcut' | null>(null);
+	const voiceSourceRef = useRef<VoiceInputSource | null>(null);
 	// Set to true after a `network`, `not-allowed`, or `not-supported` failure
 	// so we hide the mic button for the rest of the tab session — silent
 	// retries don't help, and Chromium derivatives without the Google Speech
@@ -459,7 +566,7 @@ export default function ChatInput({
 	const showMic = isSupported && micPermission !== 'denied' && !voiceUnavailable;
 
 	const startVoiceInput = useCallback(
-		(source: 'button' | 'shortcut') => {
+		(source: VoiceInputSource) => {
 			// Defense in depth: the button is hidden when `voiceUnavailable` is
 			// true, but the PTT shortcut listener can still call us. Bailing here
 			// keeps a single source of truth and prevents repeat `Voice input
@@ -536,7 +643,7 @@ export default function ChatInput({
 				return; // ignore auto-repeat
 			}
 			pttActiveRef.current = true;
-			startVoiceInput('shortcut');
+			startVoiceInput(VoiceInputSource.Shortcut);
 		};
 
 		const handleKeyUp = (e: KeyboardEvent): void => {
@@ -724,6 +831,12 @@ export default function ChatInput({
 				entity.value.toLowerCase().includes(activeQuery),
 			)
 		: contextEntitiesByCategory[activeContextCategory];
+	// Truncate the ref array to match the current entity count so that
+	// switching from a large category (e.g. 100 dashboards) to a smaller one
+	// doesn't leave stale `null` slots from earlier renders. Keyboard nav math
+	// already uses `filteredContextOptions.length` for the modulo, so stale
+	// slots wouldn't be reached — this is purely housekeeping.
+	entityRefs.current.length = filteredContextOptions.length;
 	const { isLoading: isActiveContextLoading, isError: isActiveContextError } =
 		contextCategoryStateByCategory[activeContextCategory];
 	const currentLength = text.length;
@@ -830,7 +943,7 @@ export default function ChatInput({
 					onKeyDown={handleKeyDown}
 					disabled={disabled}
 					maxLength={MAX_INPUT_LENGTH}
-					rows={2}
+					rows={3}
 				/>
 			</div>
 			{showTextWarning && (
@@ -877,15 +990,37 @@ export default function ChatInput({
 							sideOffset={8}
 						>
 							<div className={styles.contextPopoverContent}>
-								<div className={styles.contextPopoverCategories}>
+								<div
+									className={styles.contextPopoverCategories}
+									role="tablist"
+									aria-orientation="vertical"
+									aria-label="Context categories"
+								>
 									{CONTEXT_CATEGORIES.map((category) => {
 										const CategoryIcon = CONTEXT_CATEGORY_ICONS[category];
 										const isActive = activeContextCategory === category;
 										return (
-											<div
+											<Button
 												key={category}
+												ref={(el): void => {
+													categoryTabRefs.current.set(category, el);
+												}}
+												type="button"
+												variant="ghost"
+												color="secondary"
+												size="sm"
 												role="tab"
-												tabIndex={0}
+												id={`ai-context-tab-${category}`}
+												// Single stable panel id shared by every tab: only the
+												// active category's tabpanel is rendered, so per-category
+												// `aria-controls` ids would point at nonexistent nodes
+												// for the two inactive tabs. APG allows a single
+												// dynamic panel whose `aria-labelledby` swaps to the
+												// active tab.
+												aria-controls="ai-context-tabpanel"
+												// Roving tabindex: only the active tab participates in
+												// the Tab sequence; arrow keys move between tabs.
+												tabIndex={isActive ? 0 : -1}
 												aria-selected={isActive}
 												className={cx(styles.contextPopoverCategoryItem, {
 													[styles.active]: isActive,
@@ -894,22 +1029,21 @@ export default function ChatInput({
 													setActiveContextCategory(category);
 													setPickerSearchQuery('');
 												}}
-												onKeyDown={(e): void => {
-													if (e.key === 'Enter' || e.key === ' ') {
-														e.preventDefault();
-														setActiveContextCategory(category);
-														setPickerSearchQuery('');
-													}
-												}}
+												onKeyDown={(e): void => handleCategoryKeyDown(e, category)}
+												prefix={<CategoryIcon size={13} />}
 											>
-												<CategoryIcon size={13} />
 												<span>{category}</span>
-											</div>
+											</Button>
 										);
 									})}
 								</div>
 
-								<div className={styles.contextPopoverRight}>
+								<div
+									className={styles.contextPopoverRight}
+									role="tabpanel"
+									id="ai-context-tabpanel"
+									aria-labelledby={`ai-context-tab-${activeContextCategory}`}
+								>
 									<div className={styles.contextPopoverSearch}>
 										<Input
 											type="text"
@@ -939,7 +1073,7 @@ export default function ChatInput({
 												No matching entities
 											</div>
 										) : (
-											filteredContextOptions.map((option) => {
+											filteredContextOptions.map((option, index) => {
 												const isSelected = selectedContexts.some(
 													(item) =>
 														item.category === activeContextCategory &&
@@ -947,8 +1081,16 @@ export default function ChatInput({
 												);
 
 												return (
-													<div
+													<Button
 														key={option.id}
+														ref={(el): void => {
+															entityRefs.current[index] = el;
+														}}
+														type="button"
+														variant="ghost"
+														color="secondary"
+														size="sm"
+														aria-pressed={isSelected}
 														className={cx(styles.contextPopoverEntityItem, {
 															[styles.selected]: isSelected,
 														})}
@@ -959,11 +1101,12 @@ export default function ChatInput({
 																option.value,
 															)
 														}
+														onKeyDown={(e): void => handleEntityKeyDown(e, index)}
 													>
 														<span className={styles.contextPopoverEntityItemText}>
 															{option.value}
 														</span>
-													</div>
+													</Button>
 												);
 											})
 										)}
@@ -977,14 +1120,24 @@ export default function ChatInput({
 				<div className={styles.rightActions}>
 					{showMic &&
 						(isListening ? (
-							<div className={styles.micRecording}>
-								<div
-									className={cx(styles.micDiscard, styles.secondary)}
-									onClick={handleDiscard}
-									aria-label="Discard recording"
-								>
-									<X size={12} />
-								</div>
+							<div
+								className={styles.micRecording}
+								role="status"
+								aria-live="polite"
+								aria-label="Recording voice input"
+							>
+								<TooltipSimple title="Discard recording">
+									<Button
+										type="button"
+										variant="ghost"
+										size="icon"
+										color="secondary"
+										className={cx(styles.micDiscard, styles.secondary)}
+										onClick={handleDiscard}
+										aria-label="Discard recording"
+										prefix={<X size={12} />}
+									/>
+								</TooltipSimple>
 								<span className={styles.micWaves} aria-hidden="true">
 									<span />
 									<span />
@@ -995,26 +1148,30 @@ export default function ChatInput({
 									<span />
 									<span />
 								</span>
-								<div
-									className={cx(styles.micStop, styles.destructive)}
-									onClick={handleStopAndSend}
-									aria-label="Stop and send"
-								>
-									<Square size={9} fill="currentColor" strokeWidth={0} />
-								</div>
+								<TooltipSimple title="Stop and send">
+									<Button
+										type="button"
+										variant="ghost"
+										size="icon"
+										color="destructive"
+										className={cx(styles.micStop, styles.destructive)}
+										onClick={handleStopAndSend}
+										aria-label="Stop and send"
+										prefix={<Square size={9} fill="currentColor" strokeWidth={0} />}
+									/>
+								</TooltipSimple>
 							</div>
 						) : (
 							<TooltipSimple title="Voice input">
 								<Button
 									variant="ghost"
 									size="icon"
-									onClick={(): void => startVoiceInput('button')}
+									onClick={(): void => startVoiceInput(VoiceInputSource.Button)}
 									disabled={disabled}
 									aria-label="Start voice input"
 									className={styles.micBtn}
-								>
-									<Mic size={14} />
-								</Button>
+									prefix={<Mic size={14} />}
+								/>
 							</TooltipSimple>
 						))}
 
@@ -1026,21 +1183,21 @@ export default function ChatInput({
 								color="destructive"
 								onClick={onCancel}
 								aria-label="Stop generating"
-							>
-								<Square size={10} fill="currentColor" strokeWidth={0} />
-							</Button>
+								prefix={<Square size={10} fill="currentColor" strokeWidth={0} />}
+							/>
 						</TooltipSimple>
 					) : (
-						<Button
-							variant="solid"
-							size="icon"
-							color="primary"
-							onClick={isListening ? handleStopAndSend : handleSend}
-							disabled={disabled || (!text.trim() && pendingFiles.length === 0)}
-							aria-label="Send message"
-						>
-							<Send size={14} />
-						</Button>
+						<TooltipSimple title="Send message">
+							<Button
+								variant="solid"
+								size="icon"
+								color="primary"
+								onClick={isListening ? handleStopAndSend : handleSend}
+								disabled={disabled || (!text.trim() && pendingFiles.length === 0)}
+								aria-label="Send message"
+								prefix={<Send size={14} />}
+							/>
+						</TooltipSimple>
 					)}
 				</div>
 			</div>

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

@@ -64,6 +64,19 @@
 	gap: 4px;
 }
 
+// Mirrors `.field` for the multi_select group, but resets the browser's
+// default `<fieldset>` border/padding/margin so the visual matches the
+// `<div>`-based field rows.
+.multiSelectFieldset {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	min-width: 0;
+}
+
 .label {
 	font-size: 12px;
 	font-weight: 500;

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

@@ -63,7 +63,14 @@ export default function ClarificationForm({
 		setAnswers((prev) => ({ ...prev, [id]: value }));
 	};
 
+	const isFormValid = fields.every(
+		(f) => !f.required || isFieldFilled(f, answers[f.id]),
+	);
+
 	const handleSubmit = async (): Promise<void> => {
+		if (!isFormValid) {
+			return;
+		}
 		setSubmitted(true);
 		// Approximate queryLength as the JSON encoding of the form answers — the
 		// clarification API doesn't render a single user-visible string, but the
@@ -136,7 +143,7 @@ export default function ClarificationForm({
 					variant="solid"
 					color="primary"
 					onClick={handleSubmit}
-					disabled={isStreaming}
+					disabled={isStreaming || !isFormValid}
 					prefix={<Send />}
 				>
 					Submit
@@ -162,8 +169,9 @@ export default function ClarificationForm({
 
 /**
  * Per-type seed value. The DTO's `default` is `string | string[] | null`,
- * which doesn't fit boolean fields cleanly — we coerce 'true'/'false' strings
- * for them, fall back to `[]` for multi_select, and the raw string otherwise.
+ * which doesn't fit boolean / number fields cleanly — we coerce 'true'/'false'
+ * strings for booleans, parse number defaults out of the string form,
+ * fall back to `[]` for multi_select, and the raw string otherwise.
  */
 function initialAnswerFor(f: ClarificationFieldEventDTO): unknown {
 	const raw = f.default;
@@ -175,9 +183,41 @@ function initialAnswerFor(f: ClarificationFieldEventDTO): unknown {
 	if (f.type === ClarificationFieldTypeDTO.multi_select) {
 		return Array.isArray(raw) ? raw : [];
 	}
+	if (f.type === ClarificationFieldTypeDTO.number) {
+		// Server sends number defaults as strings (e.g. `"5"`). Parse so the
+		// stored value is a real `number` — otherwise `isFieldFilled` (which
+		// requires `typeof === 'number'`) rejects a visibly-filled field and
+		// Submit stays disabled.
+		if (typeof raw !== 'string' || raw === '') {
+			return null;
+		}
+		const parsed = Number(raw);
+		return Number.isNaN(parsed) ? null : parsed;
+	}
 	return raw ?? '';
 }
 
+// Whether a required field has been answered. Booleans are always considered
+// filled (they're initialised to a concrete true/false). For other types we
+// reject empty strings, empty arrays, NaN numbers, and `null` (which the
+// number input emits when its raw value is `''` — `Number('')` would
+// otherwise silently coerce to `0` and read as a valid answer).
+function isFieldFilled(
+	field: ClarificationFieldEventDTO,
+	value: unknown,
+): boolean {
+	switch (field.type) {
+		case ClarificationFieldTypeDTO.multi_select:
+			return Array.isArray(value) && value.length > 0;
+		case ClarificationFieldTypeDTO.boolean:
+			return true;
+		case ClarificationFieldTypeDTO.number:
+			return typeof value === 'number' && !Number.isNaN(value);
+		default:
+			return typeof value === 'string' && value.trim().length > 0;
+	}
+}
+
 interface FieldInputProps {
 	field: ClarificationFieldEventDTO;
 	value: unknown;
@@ -216,13 +256,21 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 			<div className={styles.field}>
 				<label className={styles.label} htmlFor={id}>
 					{label}
-					{required && <span className={styles.required}>*</span>}
+					{required && (
+						<span className={styles.required} aria-hidden="true">
+							*
+						</span>
+					)}
 				</label>
 				<Select
 					value={isCustom ? CUSTOM_OPTION_SENTINEL : String(value ?? '')}
 					onChange={handleSelectChange}
 				>
-					<SelectTrigger id={id} placeholder="Select…" />
+					<SelectTrigger
+						id={id}
+						placeholder="Select…"
+						aria-required={required || undefined}
+					/>
 					{/* Pin the dropdown width to the trigger via Radix's
 					    `--radix-select-trigger-width`; otherwise the popover
 					    sizes to its widest item and looks misaligned. */}
@@ -267,7 +315,11 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 					onChange={(): void => onChange(!checked)}
 				>
 					{label}
-					{required && <span className={styles.required}>*</span>}
+					{required && (
+						<span className={styles.required} aria-hidden="true">
+							*
+						</span>
+					)}
 				</Checkbox>
 			</div>
 		);
@@ -312,11 +364,21 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 		};
 
 		return (
-			<div className={styles.field}>
-				<span className={styles.label}>
+			// `fieldset` + `legend` is the WCAG-recommended grouping for
+			// related checkboxes (1.3.1). SRs announce the legend before each
+			// option, so users hear the group label as context.
+			<fieldset
+				className={styles.multiSelectFieldset}
+				aria-required={required || undefined}
+			>
+				<legend className={styles.label}>
 					{label}
-					{required && <span className={styles.required}>*</span>}
-				</span>
+					{required && (
+						<span className={styles.required} aria-hidden="true">
+							*
+						</span>
+					)}
+				</legend>
 				<div className={styles.checkboxGroup}>
 					{options?.map((opt) => (
 						<Checkbox
@@ -347,7 +409,7 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 						onChange={(e): void => updateCustomValue(e.target.value)}
 					/>
 				)}
-			</div>
+			</fieldset>
 		);
 	}
 
@@ -356,16 +418,29 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 		<div className={styles.field}>
 			<label className={styles.label} htmlFor={id}>
 				{label}
-				{required && <span className={styles.required}>*</span>}
+				{required && (
+					<span className={styles.required} aria-hidden="true">
+						*
+					</span>
+				)}
 			</label>
 			<Input
 				id={id}
 				type={type === 'number' ? 'number' : 'text'}
 				className={styles.input}
 				value={String(value ?? '')}
-				onChange={(e): void =>
-					onChange(type === 'number' ? Number(e.target.value) : e.target.value)
-				}
+				aria-required={required || undefined}
+				onChange={(e): void => {
+					if (type === 'number') {
+						const raw = e.target.value;
+						// Map empty input to `null` instead of `Number('') === 0`
+						// so a required numeric field cleared after typing doesn't
+						// silently read as a valid `0` in `isFieldFilled`.
+						onChange(raw === '' ? null : Number(raw));
+					} else {
+						onChange(e.target.value);
+					}
+				}}
 				placeholder={label}
 			/>
 		</div>

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

@@ -10,6 +10,7 @@ import { useTimezone } from 'providers/Timezone';
 
 import logEvent from 'api/common/logEvent';
 
+import { FeedbackRatingDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 import { AIAssistantEvents } from '../../events';
 import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';
@@ -17,6 +18,22 @@ import { FeedbackRating, Message } from '../../types';
 
 import styles from './MessageFeedback.module.scss';
 
+const FEEDBACK_ANALYTICS_RATING = {
+	[FeedbackRatingDTO.positive]: 'up',
+	[FeedbackRatingDTO.negative]: 'down',
+} as const;
+
+const VOTE_LABEL = {
+	[FeedbackRatingDTO.positive]: {
+		tooltip: 'Good response',
+		ariaLabel: 'Good response',
+	},
+	[FeedbackRatingDTO.negative]: {
+		tooltip: 'Bad response',
+		ariaLabel: 'Bad response',
+	},
+} as const;
+
 interface MessageFeedbackProps {
 	message: Message;
 	onRegenerate?: () => void;
@@ -117,7 +134,7 @@ export default function MessageFeedback({
 			if (vote === rating) {
 				return;
 			}
-			if (rating === 'negative') {
+			if (rating === FeedbackRatingDTO.negative) {
 				setNegativeComment('');
 				setIsNegativeDialogOpen(true);
 				return;
@@ -126,7 +143,7 @@ export default function MessageFeedback({
 			void logEvent(AIAssistantEvents.FeedbackSubmitted, {
 				messageId: message.id,
 				threadId,
-				rating: 'up',
+				rating: FEEDBACK_ANALYTICS_RATING[rating],
 				hasComment: false,
 				commentLength: 0,
 			});
@@ -136,17 +153,21 @@ export default function MessageFeedback({
 	);
 
 	const handleSubmitNegative = useCallback((): void => {
-		setVote('negative');
+		setVote(FeedbackRatingDTO.negative);
 		setIsNegativeDialogOpen(false);
 		const trimmed = negativeComment.trim();
 		void logEvent(AIAssistantEvents.FeedbackSubmitted, {
 			messageId: message.id,
 			threadId,
-			rating: 'down',
+			rating: FEEDBACK_ANALYTICS_RATING[FeedbackRatingDTO.negative],
 			hasComment: trimmed.length > 0,
 			commentLength: trimmed.length,
 		});
-		submitMessageFeedback(message.id, 'negative', trimmed || undefined);
+		submitMessageFeedback(
+			message.id,
+			FeedbackRatingDTO.negative,
+			trimmed || undefined,
+		);
 	}, [message.id, negativeComment, submitMessageFeedback, threadId]);
 
 	return (
@@ -160,32 +181,39 @@ export default function MessageFeedback({
 							variant="ghost"
 							onClick={handleCopy}
 							color="secondary"
+							aria-label={copied ? 'Copied' : 'Copy message'}
 						>
 							{copied ? <Check size={12} /> : <Copy size={12} />}
 						</Button>
 					</TooltipSimple>
 
-					<TooltipSimple title="Good response">
+					<TooltipSimple title={VOTE_LABEL[FeedbackRatingDTO.positive].tooltip}>
 						<Button
-							className={cx(styles.btn, { [styles.votedUp]: vote === 'positive' })}
+							className={cx(styles.btn, {
+								[styles.votedUp]: vote === FeedbackRatingDTO.positive,
+							})}
 							size="icon"
 							variant="ghost"
 							color="secondary"
-							onClick={(): void => handleVote('positive')}
+							onClick={(): void => handleVote(FeedbackRatingDTO.positive)}
+							aria-label={VOTE_LABEL[FeedbackRatingDTO.positive].ariaLabel}
+							aria-pressed={vote === FeedbackRatingDTO.positive}
 						>
 							<ThumbsUp size={12} />
 						</Button>
 					</TooltipSimple>
 
-					<TooltipSimple title="Bad response">
+					<TooltipSimple title={VOTE_LABEL[FeedbackRatingDTO.negative].tooltip}>
 						<Button
 							className={cx(styles.btn, {
-								[styles.votedDown]: vote === 'negative',
+								[styles.votedDown]: vote === FeedbackRatingDTO.negative,
 							})}
 							size="icon"
 							variant="ghost"
 							color="secondary"
-							onClick={(): void => handleVote('negative')}
+							onClick={(): void => handleVote(FeedbackRatingDTO.negative)}
+							aria-label={VOTE_LABEL[FeedbackRatingDTO.negative].ariaLabel}
+							aria-pressed={vote === FeedbackRatingDTO.negative}
 						>
 							<ThumbsDown size={12} />
 						</Button>
@@ -199,6 +227,7 @@ export default function MessageFeedback({
 								variant="ghost"
 								color="secondary"
 								onClick={onRegenerate}
+								aria-label="Regenerate response"
 							>
 								<RefreshCw size={12} />
 							</Button>

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

@@ -47,6 +47,7 @@ export default function UserMessageActions({
 					variant="ghost"
 					color="secondary"
 					onClick={handleCopy}
+					aria-label={copied ? 'Copied' : 'Copy message'}
 				>
 					{copied ? <Check size={12} /> : <Copy size={12} />}
 				</Button>

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

@@ -90,6 +90,16 @@ export default function VirtualizedMessages({
 
 	const virtuosoRef = useRef<VirtuosoHandle>(null);
 	const scrollerRef = useRef<HTMLElement | Window | null>(null);
+	// Tracks whether the scroller is pinned to (or near) the bottom. Updated
+	// via Virtuoso's `atBottomStateChange` so we can stop force-scrolling the
+	// user back down when they've intentionally scrolled up to read earlier
+	// content.
+	const atBottomRef = useRef(true);
+	// Id of the latest user message we've already anchored to. Used to detect
+	// a fresh user send so we can re-anchor to the bottom regardless of where
+	// the user was scrolled — sending a message and not seeing it is worse
+	// than the anti-yank guarantee.
+	const lastSeenUserMessageIdRef = useRef<string | null>(null);
 
 	const handleRegenerate = useCallback(
 		(messageId: string): void => {
@@ -111,8 +121,25 @@ export default function VirtualizedMessages({
 	// align: 'end')` would only reach the last item's bottom and leave the
 	// padding hidden below the fold. Use `auto` while streaming so the bottom
 	// stays glued as text deltas arrive; `smooth` lags when triggered every
-	// few ms.
+	// few ms. Bail out if the user has scrolled away from the bottom — that's
+	// an explicit signal they want to read earlier content without being
+	// yanked back.
 	useEffect(() => {
+		const lastMessage = messages[messages.length - 1];
+		const isFreshUserSend =
+			lastMessage?.role === 'user' &&
+			lastMessage.id !== lastSeenUserMessageIdRef.current;
+		if (isFreshUserSend) {
+			lastSeenUserMessageIdRef.current = lastMessage.id;
+			// Re-anchor so the user sees their own send (and the assistant's
+			// follow-up streaming) even if they were reading history when they
+			// hit Enter.
+			atBottomRef.current = true;
+		}
+
+		if (!atBottomRef.current) {
+			return;
+		}
 		const scroller = scrollerRef.current;
 		if (!(scroller instanceof HTMLElement)) {
 			return;
@@ -122,7 +149,7 @@ export default function VirtualizedMessages({
 			behavior: isStreaming ? 'auto' : 'smooth',
 		});
 	}, [
-		messages.length,
+		messages,
 		streamingEvents.length,
 		streamingContentLength,
 		isStreaming,
@@ -132,14 +159,18 @@ export default function VirtualizedMessages({
 
 	const followOutput = useCallback(
 		(atBottom: boolean): false | 'auto' | 'smooth' => {
-			if (isStreaming) {
-				return 'auto';
+			if (!atBottom) {
+				return false;
 			}
-			return atBottom ? 'smooth' : false;
+			return isStreaming ? 'auto' : 'smooth';
 		},
 		[isStreaming],
 	);
 
+	const handleAtBottomStateChange = useCallback((atBottom: boolean): void => {
+		atBottomRef.current = atBottom;
+	}, []);
+
 	const showStreamingSlot =
 		isStreaming || Boolean(pendingApproval) || Boolean(pendingClarification);
 
@@ -188,6 +219,8 @@ export default function VirtualizedMessages({
 			className={styles.messages}
 			totalCount={totalCount}
 			followOutput={followOutput}
+			atBottomStateChange={handleAtBottomStateChange}
+			atBottomThreshold={64}
 			initialTopMostItemIndex={Math.max(0, totalCount - 1)}
 			itemContent={(index): JSX.Element => {
 				if (index < messages.length) {

frontend/src/container/AIAssistant/components/blocks/RichCodeBlock/RichCodeBlock.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Check, Copy } from '@signozhq/icons';
 import SyntaxHighlighter, {
 	a11yDark,
@@ -126,16 +127,17 @@ function CopyButton({ text }: { text: string }): JSX.Element {
 	};
 
 	return (
-		<Button
-			variant="ghost"
-			size="sm"
-			color="secondary"
-			className={styles.copyBtn}
-			onClick={handleCopy}
-			title={copied ? 'Copied' : 'Copy code'}
-			aria-label={copied ? 'Copied' : 'Copy code'}
-		>
-			{copied ? <Check size={12} /> : <Copy size={12} />}
-		</Button>
+		<TooltipSimple title={copied ? 'Copied' : 'Copy code'}>
+			<Button
+				variant="ghost"
+				size="sm"
+				color="secondary"
+				className={styles.copyBtn}
+				onClick={handleCopy}
+				aria-label={copied ? 'Copied' : 'Copy code'}
+			>
+				{copied ? <Check size={12} /> : <Copy size={12} />}
+			</Button>
+		</TooltipSimple>
 	);
 }

frontend/src/container/AIAssistant/events.ts

@@ -63,6 +63,26 @@ export const SuggestedPromptCategory = {
 export type SuggestedPromptCategory =
 	(typeof SuggestedPromptCategory)[keyof typeof SuggestedPromptCategory];
 
+// `source` attribute on the AI Assistant `Opened` event — describes which
+// surface triggered the open. Keep values stable: dashboards downstream
+// depend on the literal strings.
+export const AIAssistantOpenSource = {
+	Icon: 'icon',
+	Shortcut: 'shortcut',
+	Cmdk: 'cmdk',
+} as const;
+export type AIAssistantOpenSource =
+	(typeof AIAssistantOpenSource)[keyof typeof AIAssistantOpenSource];
+
+// `source` attribute on the `VoiceInputUsed` event — which surface initiated
+// the recording.
+export const VoiceInputSource = {
+	Button: 'button',
+	Shortcut: 'shortcut',
+} as const;
+export type VoiceInputSource =
+	(typeof VoiceInputSource)[keyof typeof VoiceInputSource];
+
 export enum AIAssistantEvents {
 	Opened = 'AI Assistant: Opened',
 	MessageSent = 'AI Assistant: Message sent',

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

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

frontend/src/container/AppLayout/utils.ts

@@ -1,9 +1,32 @@
 import ROUTES from 'constants/routes';
 
-export function getRouteKey(pathname: string): string {
-	const [routeKey] = Object.entries(ROUTES).find(
-		([, value]) => value === pathname,
-	) || ['DEFAULT'];
+const PARAM_SEGMENT = /:[^/]+/g;
+const REGEX_SPECIALS = /[.+*?^$()[\]{}|\\]/g;
 
-	return routeKey;
+function templateToRegex(template: string): RegExp {
+	const pattern = template
+		.replace(REGEX_SPECIALS, '\\$&')
+		.replace(PARAM_SEGMENT, '[^/]+');
+	return new RegExp(`^${pattern}$`);
+}
+
+export function getRouteKey(pathname: string): string {
+	const entries = Object.entries(ROUTES);
+
+	const exact = entries.find(([, value]) => value === pathname);
+	if (exact) {
+		return exact[0];
+	}
+
+	// First template that matches wins, so declaration order in `ROUTES`
+	// matters when templates can overlap. Today's set is unambiguous because
+	// `[^/]+` is segment-bounded, but if you ever add a sibling like
+	// `/services/list` next to `SERVICE_METRICS: '/services/:servicename'`,
+	// list the more-specific (more-static-segments) entry first in `ROUTES`
+	// — otherwise the param template will swallow the static path.
+	const dynamic = entries.find(
+		([, value]) => value.includes(':') && templateToRegex(value).test(pathname),
+	);
+
+	return dynamic?.[0] ?? 'DEFAULT';
 }

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -11,13 +11,8 @@ import {
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
-import { Skeleton } from 'antd';
+import { Dropdown, Skeleton } from 'antd';
 import {
 	RenderErrorResponseDTO,
 	ZeustypesHostDTO,
@@ -205,15 +200,10 @@ export default function CustomDomainSettings(): JSX.Element {
 							!workspaceName ? 'workspace-name-hidden' : ''
 						}`}
 					>
-						<DropdownMenu>
-							<DropdownMenuTrigger asChild>
-								<Button variant="link" color="none" disabled={isFetchingHosts}>
-									<Link2 size={12} />
-									<span>{stripProtocol(activeHost?.url ?? '')}</span>
-									<ChevronDown size={12} />
-								</Button>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent align="start">
+						<Dropdown
+							trigger={['click']}
+							disabled={isFetchingHosts}
+							dropdownRender={(): JSX.Element => (
 								<div className="workspace-url-dropdown">
 									<span className="workspace-url-dropdown-header">
 										All Workspace URLs
@@ -246,8 +236,14 @@ export default function CustomDomainSettings(): JSX.Element {
 										);
 									})}
 								</div>
-							</DropdownMenuContent>
-						</DropdownMenu>
+							)}
+						>
+							<Button variant="link" color="none">
+								<Link2 size={12} />
+								<span>{stripProtocol(activeHost?.url ?? '')}</span>
+								<ChevronDown size={12} />
+							</Button>
+						</Dropdown>
 						<span className="custom-domain-card-meta-timezone">
 							<Clock size={11} />
 							{timezone.offset}

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

@@ -1,5 +1,4 @@
 import { GetHosts200 } from 'api/generated/services/sigNoz.schemas';
-import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
@@ -143,13 +142,12 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('shows all workspace URLs as links in the dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
 
 		// Open the URL dropdown
-		await user.click(
+		fireEvent.click(
 			screen.getByRole('button', { name: /custom-host\.test\.cloud/i }),
 		);
 

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

@@ -0,0 +1,282 @@
+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,6 +303,27 @@ 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/Download/Download.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { CloudDownload } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
-import { Button, Flex } from 'antd';
+import { Button, Dropdown, MenuProps, Flex } from 'antd';
 import { unparse } from 'papaparse';
 
 import { DownloadProps } from './Download.types';
@@ -68,7 +67,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 	};
 
 	return (
-		<DropdownMenuSimple menu={menu}>
+		<Dropdown menu={menu} trigger={['click']}>
 			<Button
 				className="download-button"
 				loading={isLoading || isDownloading}
@@ -80,7 +79,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 					Download
 				</Flex>
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/container/GeneralSettings/styles.ts

@@ -1,4 +1,8 @@
-import { Col, Input as InputComponent } from 'antd';
+import {
+	Col,
+	Dropdown as DropDownComponent,
+	Input as InputComponent,
+} from 'antd';
 import { Typography as TypographyComponent } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
@@ -30,6 +34,16 @@ export const ButtonContainer = styled.div`
 	}
 `;
 
+export const Dropdown = styled(DropDownComponent)`
+	&&& {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		max-width: 150px;
+		min-width: 150px;
+	}
+`;
+
 export const TextContainer = styled.div`
 	&&& {
 		min-width: 100px;

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { AppProvider } from 'providers/App/App';
@@ -177,7 +176,6 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 
 describe('WidgetGraphComponent', () => {
 	it('should show correct menu items when hovering over more options while loading', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const { getByTestId, findByRole, getByText, container } = render(
 			<MockQueryClientProvider>
 				<ErrorModalProvider>
@@ -210,7 +208,7 @@ describe('WidgetGraphComponent', () => {
 		expect(skeleton).toBeInTheDocument();
 
 		const moreOptionsButton = getByTestId('widget-header-options');
-		await user.click(moreOptionsButton);
+		fireEvent.mouseEnter(moreOptionsButton);
 
 		const menu = await findByRole('menu');
 		expect(menu).toBeInTheDocument();

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -54,17 +54,6 @@
 	visibility: visible;
 }
 
-// currently the width of the dropdown menu is set to 100% of the parent container,
-// which is not desired. This is a workaround to unset that width and allow the dropdown menu to size based on its content.
-// This is necessary because the dropdown menu can contain items with varying widths, and setting it to 100% can cause layout issues and make the menu look unbalanced.
-// we should idealy fix this in the dropdown menu component itself, but for now this is a quick fix to ensure the dropdown menu looks correct in the widget header.
-
-[data-radix-popper-content-wrapper]
-	[data-slot='dropdown-menu-content'].widget-header-dropdown
-	[data-slot='dropdown-menu-item'] {
-	width: unset !important;
-}
-
 .widget-api-actions {
 	padding-right: 0.25rem;
 }

frontend/src/container/GridCardLayout/WidgetHeader/__tests__/WidgetHeader.test.tsx

@@ -467,7 +467,6 @@ describe('WidgetHeader', () => {
 
 	describe('Create Alerts Menu Item', () => {
 		it('renders Create Alerts menu item with external link icon when included in headerMenuList', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(
 				<WidgetHeader
 					title={TEST_WIDGET_TITLE}
@@ -484,7 +483,7 @@ describe('WidgetHeader', () => {
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
 			expect(moreOptionsIcon).toBeInTheDocument();
-			await user.click(moreOptionsIcon);
+			await userEvent.hover(moreOptionsIcon);
 
 			await screen.findByText(CREATE_ALERTS_TEXT);
 
@@ -495,7 +494,6 @@ describe('WidgetHeader', () => {
 		});
 
 		it('Create Alerts menu item is enabled and clickable', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			const mockCreateAlertsHandler = jest.fn();
 			const useCreateAlerts = jest.requireMock(
 				'hooks/queryBuilder/useCreateAlerts',
@@ -519,12 +517,12 @@ describe('WidgetHeader', () => {
 			expect(useCreateAlerts).toHaveBeenCalledWith(mockWidget, 'dashboardView');
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
-			await user.click(moreOptionsIcon);
+			await userEvent.hover(moreOptionsIcon);
 
 			const createAlertsMenuItem = await screen.findByText(CREATE_ALERTS_TEXT);
 
 			// Verify the menu item is clickable by actually clicking it
-			await user.click(createAlertsMenuItem);
+			await userEvent.click(createAlertsMenuItem);
 			expect(mockCreateAlertsHandler).toHaveBeenCalledTimes(1);
 		});
 	});

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -15,8 +15,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Tooltip } from 'antd';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Button, Dropdown, Input, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import ErrorPopover from 'components/ErrorPopover/ErrorPopover';
@@ -129,7 +128,7 @@ function WidgetHeader({
 		],
 	);
 
-	const onMenuItemSelectHandler = useCallback(
+	const onMenuItemSelectHandler: MenuProps['onClick'] = useCallback(
 		({ key }: { key: string }): void => {
 			if (isTWidgetOptions(key)) {
 				const functionToCall = keyMethodMapping[key];
@@ -189,8 +188,18 @@ function WidgetHeader({
 			{
 				key: MenuItemKeys.CreateAlerts,
 				icon: <Bell size="md" />,
-				label: MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts],
-				rightIcon: <SquareArrowOutUpRight size="lg" />,
+				label: (
+					<span
+						style={{
+							display: 'flex',
+							alignItems: 'baseline',
+							justifyContent: 'space-between',
+						}}
+					>
+						{MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts]}
+						<SquareArrowOutUpRight size={10} />
+					</span>
+				),
 				isVisible: headerMenuList?.includes(MenuItemKeys.CreateAlerts) || false,
 				disabled: false,
 			},
@@ -212,10 +221,8 @@ function WidgetHeader({
 
 	const menu = useMemo(
 		() => ({
-			items: updatedMenuList.map((item) => ({
-				...item,
-				onClick: onMenuItemSelectHandler,
-			})),
+			items: updatedMenuList,
+			onClick: onMenuItemSelectHandler,
 		}),
 		[updatedMenuList, onMenuItemSelectHandler],
 	);
@@ -314,12 +321,7 @@ function WidgetHeader({
 							/>
 						)}
 						{menu && Array.isArray(menu.items) && menu.items.length > 0 && (
-							<DropdownMenuSimple
-								menu={menu}
-								side="bottom"
-								align="end"
-								className="widget-header-dropdown"
-							>
+							<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
 								<Button
 									data-testid="widget-header-options"
 									className={`widget-header-more-options ${
@@ -327,7 +329,7 @@ function WidgetHeader({
 									}`}
 									icon={<EllipsisVertical size="md" />}
 								/>
-							</DropdownMenuSimple>
+							</Dropdown>
 						)}
 					</div>
 				</>

frontend/src/container/GridCardLayout/WidgetHeader/types.ts

@@ -6,7 +6,6 @@ export interface MenuItem {
 	key: MenuItemKeys;
 	icon: ReactNode;
 	label: ReactNode;
-	rightIcon?: ReactNode;
 	isVisible: boolean;
 	disabled: boolean;
 	danger?: boolean;

frontend/src/container/GridCardLayout/WidgetHeader/utils.ts

@@ -1,9 +1,9 @@
-import type { MenuItem as DropdownMenuItem } from '@signozhq/ui/dropdown-menu';
+import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 
 import { MenuItemKeys } from './contants';
 import { MenuItem } from './types';
 
-export const generateMenuList = (actions: MenuItem[]): DropdownMenuItem[] =>
+export const generateMenuList = (actions: MenuItem[]): MenuItemType[] =>
 	actions
 		.filter((action: MenuItem) => action.isVisible)
 		.map(({ key, icon: Icon, label, disabled, ...rest }) => ({

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { Button, Flex, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Ellipsis, Plus } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Plus } from '@signozhq/icons';
 import type { ColumnsType } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -16,6 +15,7 @@ import type {
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
+import DropDown from 'components/DropDown/DropDown';
 import {
 	DynamicColumnsKey,
 	TableDataSource,
@@ -323,67 +323,55 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			dataIndex: 'id',
 			key: 'action',
 			width: 10,
-			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => {
-				const actionItems = [
-					<ToggleAlertState
-						key="1"
-						disabled={record.disabled ?? false}
-						setData={setData}
-						id={id ?? ''}
-					/>,
-					<ColumnButton
-						key="2"
-						onClick={(e: React.MouseEvent): void =>
-							onEditHandler(record, { newTab: isModifierKeyPressed(e) })
+			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => (
+				<div data-testid="alert-actions">
+					<DropDown
+						onDropDownItemClick={(item): void =>
+							alertActionLogEvent(item.key, record)
 						}
-						type="link"
-						loading={editLoader}
-					>
-						Edit
-					</ColumnButton>,
-					<ColumnButton
-						key="3-new-tab"
-						onClick={(): void => onEditHandler(record, { newTab: true })}
-						type="link"
-						loading={editLoader}
-					>
-						Edit in New Tab
-					</ColumnButton>,
-					<ColumnButton
-						key="3-clone"
-						onClick={onCloneHandler(record)}
-						type="link"
-						loading={cloneLoader}
-					>
-						Clone
-					</ColumnButton>,
-					<DeleteAlert
-						key="4"
-						notifications={notificationsApi}
-						setData={setData}
-						id={id ?? ''}
-					/>,
-				];
-				return (
-					<div data-testid="alert-actions">
-						<DropdownMenuSimple
-							menu={{
-								items: actionItems.map((element, index) => ({
-									key: String(index),
-									label: element,
-									onClick: ({ key }): void => alertActionLogEvent(key, record),
-								})),
-							}}
-						>
-							<Button
+						element={[
+							<ToggleAlertState
+								key="1"
+								disabled={record.disabled ?? false}
+								setData={setData}
+								id={id ?? ''}
+							/>,
+							<ColumnButton
+								key="2"
+								onClick={(e: React.MouseEvent): void =>
+									onEditHandler(record, { newTab: isModifierKeyPressed(e) })
+								}
 								type="link"
-								style={{ color: 'var(--l1-foreground)' }}
-								icon={<Ellipsis size={16} />}
-							/>
-						</DropdownMenuSimple>
-					</div>
-				);
-			},
+								loading={editLoader}
+							>
+								Edit
+							</ColumnButton>,
+							<ColumnButton
+								key="3"
+								onClick={(): void => onEditHandler(record, { newTab: true })}
+								type="link"
+								loading={editLoader}
+							>
+								Edit in New Tab
+							</ColumnButton>,
+							<ColumnButton
+								key="3"
+								onClick={onCloneHandler(record)}
+								type="link"
+								loading={cloneLoader}
+							>
+								Clone
+							</ColumnButton>,
+							<DeleteAlert
+								key="4"
+								notifications={notificationsApi}
+								setData={setData}
+								id={id ?? ''}
+							/>,
+						]}
+					/>
+				</div>
+			),
 		});
 	}
 

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,11 +12,12 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import {
 	Button,
+	Dropdown,
 	Flex,
 	Input,
+	MenuProps,
 	Modal,
 	Popover,
 	Skeleton,
@@ -552,7 +553,7 @@ function DashboardsList(): JSX.Element {
 	];
 
 	const getCreateDashboardItems = useMemo(() => {
-		const menuItems: MenuItem[] = [
+		const menuItems: MenuProps['items'] = [
 			{
 				label: (
 					<div
@@ -710,11 +711,11 @@ function DashboardsList(): JSX.Element {
 
 						{createNewDashboard && (
 							<section className="actions">
-								<DropdownMenuSimple
-									className="new-dashboard-menu"
+								<Dropdown
+									overlayClassName="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									side="bottom"
-									align="end"
+									placement="bottomRight"
+									trigger={['click']}
 								>
 									<Button
 										type="text"
@@ -726,7 +727,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New Dashboard
 									</Button>
-								</DropdownMenuSimple>
+								</Dropdown>
 								<Button
 									type="text"
 									className="learn-more"
@@ -755,11 +756,11 @@ function DashboardsList(): JSX.Element {
 								onChange={handleSearch}
 							/>
 							{createNewDashboard && (
-								<DropdownMenuSimple
-									className="new-dashboard-menu"
+								<Dropdown
+									overlayClassName="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									side="bottom"
-									align="end"
+									placement="bottomRight"
+									trigger={['click']}
 								>
 									<Button
 										type="primary"
@@ -772,7 +773,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New dashboard
 									</Button>
-								</DropdownMenuSimple>
+								</Dropdown>
 							)}
 						</div>
 

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -2,13 +2,7 @@ import { useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { orange } from '@ant-design/colors';
 import { Settings } from '@signozhq/icons';
-import {
-	type BaseMenuItem,
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
+import { Dropdown, MenuProps } from 'antd';
 import {
 	negateOperator,
 	OPERATORS,
@@ -141,38 +135,41 @@ function BodyTitleRenderer({
 		viewName,
 	]);
 
-	const onClickHandler = (key: string): void => {
+	const onClickHandler: MenuProps['onClick'] = (props): void => {
 		const mapper = {
 			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
 			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
 			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
 		};
 
-		const handler = mapper[key];
+		const handler = mapper[props.key];
 
 		if (handler) {
 			handler();
 		}
 	};
 
-	const menuItems: BaseMenuItem[] = [
-		{
-			key: DROPDOWN_KEY.FILTER_IN,
-			label: `Filter for ${value}`,
-		},
-		{
-			key: DROPDOWN_KEY.FILTER_OUT,
-			label: `Filter out ${value}`,
-		},
-		...(isGroupBySupported
-			? [
-					{
-						key: DROPDOWN_KEY.GROUP_BY,
-						label: `Group by ${nodeKey}`,
-					},
-				]
-			: []),
-	];
+	const menu: MenuProps = {
+		items: [
+			{
+				key: DROPDOWN_KEY.FILTER_IN,
+				label: `Filter for ${value}`,
+			},
+			{
+				key: DROPDOWN_KEY.FILTER_OUT,
+				label: `Filter out ${value}`,
+			},
+			...(isGroupBySupported
+				? [
+						{
+							key: DROPDOWN_KEY.GROUP_BY,
+							label: `Group by ${nodeKey}`,
+						},
+					]
+				: []),
+		],
+		onClick: onClickHandler,
+	};
 
 	const handleNodeClick = useCallback(
 		(e: React.MouseEvent): void => {
@@ -221,23 +218,15 @@ function BodyTitleRenderer({
 					}}
 					onMouseDown={(e): void => e.preventDefault()}
 				>
-					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<Settings style={{ marginRight: 8 }} className="hover-reveal" />
-						</DropdownMenuTrigger>
-						<DropdownMenuContent>
-							<div data-log-detail-ignore="true">
-								{menuItems.map((item) => (
-									<DropdownMenuItem
-										key={item.key}
-										onSelect={(): void => onClickHandler(item.key as string)}
-									>
-										{item.label}
-									</DropdownMenuItem>
-								))}
-							</div>
-						</DropdownMenuContent>
-					</DropdownMenu>
+					<Dropdown
+						menu={menu}
+						trigger={['click']}
+						dropdownRender={(originNode): React.ReactNode => (
+							<div data-log-detail-ignore="true">{originNode}</div>
+						)}
+					>
+						<Settings style={{ marginRight: 8 }} className="hover-reveal" />
+					</Dropdown>
 				</span>
 			)}
 			{title.toString()}{' '}

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -2,8 +2,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
 import { useListUsers } from 'api/generated/services/users';
 import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
 import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
@@ -94,7 +95,7 @@ function MembersSettings(): JSX.Element {
 	).length;
 	const totalCount = allMembers.length;
 
-	const filterMenuItems: MenuItem[] = [
+	const filterMenuItems: MenuProps['items'] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -170,9 +171,10 @@ function MembersSettings(): JSX.Element {
 				</div>
 
 				<div className="members-settings__controls">
-					<DropdownMenuSimple
+					<Dropdown
 						menu={{ items: filterMenuItems }}
-						className="members-filter-dropdown"
+						trigger={['click']}
+						overlayClassName="members-filter-dropdown"
 					>
 						<Button
 							variant="solid"
@@ -182,7 +184,7 @@ function MembersSettings(): JSX.Element {
 							<span>{filterLabel}</span>
 							<ChevronDown size={12} className="members-filter-trigger__chevron" />
 						</Button>
-					</DropdownMenuSimple>
+					</Dropdown>
 
 					<div className="members-settings__search">
 						<Input

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -1,5 +1,4 @@
 import type { TypesUserDTO } from 'api/generated/services/sigNoz.schemas';
-import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen } from 'tests/test-utils';
 
@@ -77,15 +76,14 @@ describe('MembersSettings (integration)', () => {
 	});
 
 	it('filters to pending invites via the filter dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<MembersSettings />);
 
 		await screen.findByText('Alice Smith');
 
-		await user.click(screen.getByRole('button', { name: /all members/i }));
+		fireEvent.click(screen.getByRole('button', { name: /all members/i }));
 
 		const pendingOption = await screen.findByText(/pending invites/i);
-		await user.click(pendingOption);
+		fireEvent.click(pendingOption);
 
 		await screen.findByText('charlie@signoz.io');
 		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();

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

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import { Skeleton } from 'antd';
+import { Dropdown, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useGetMetricAlerts,
@@ -127,11 +126,12 @@ function DashboardsAndAlertsPopover({
 	return (
 		<div className="dashboards-and-alerts-popover-container">
 			{dashboardsPopoverContent && (
-				<DropdownMenuSimple
+				<Dropdown
 					menu={{
 						items: dashboardsPopoverContent,
 					}}
-					align="start"
+					placement="bottomLeft"
+					trigger={['click']}
 				>
 					<div
 						className="dashboards-and-alerts-popover dashboards-popover"
@@ -142,14 +142,15 @@ function DashboardsAndAlertsPopover({
 							{pluralize(dashboards.length, 'dashboard')}
 						</Typography.Text>
 					</div>
-				</DropdownMenuSimple>
+				</Dropdown>
 			)}
 			{alertsPopoverContent && (
-				<DropdownMenuSimple
+				<Dropdown
 					menu={{
 						items: alertsPopoverContent,
 					}}
-					align="start"
+					placement="bottomLeft"
+					trigger={['click']}
 				>
 					<div
 						className="dashboards-and-alerts-popover alerts-popover"
@@ -160,7 +161,7 @@ function DashboardsAndAlertsPopover({
 							{pluralize(alerts.length, 'alert rule')}
 						</Typography.Text>
 					</div>
-				</DropdownMenuSimple>
+				</Dropdown>
 			)}
 		</div>
 	);

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

@@ -104,33 +104,38 @@
 	height: 200px;
 	background-color: var(--l1-border);
 	overflow: hidden !important;
+	.ant-dropdown-menu {
+		padding: 0;
 
-	padding: 4px;
-	.ant-checkbox-wrapper {
-		padding: 2px 8px !important;
-	}
+		.ant-dropdown-menu-item {
+			padding: 4px;
+			.ant-checkbox-wrapper {
+				padding: 2px 8px !important;
+			}
 
-	.attribute-columns {
-		display: flex;
-		flex-direction: column;
-		height: 160px;
-		overflow: scroll;
-	}
+			.attribute-columns {
+				display: flex;
+				flex-direction: column;
+				height: 160px;
+				overflow: scroll;
+			}
 
-	.attribute-columns::-webkit-scrollbar {
-		width: 3px; /* Width of the scrollbar */
-	}
+			.attribute-columns::-webkit-scrollbar {
+				width: 3px; /* Width of the scrollbar */
+			}
 
-	.attribute-columns::-webkit-scrollbar-track {
-		background: var(--l1-border); /* Color of the track */
-	}
+			.attribute-columns::-webkit-scrollbar-track {
+				background: var(--l1-border); /* Color of the track */
+			}
 
-	.attribute-columns::-webkit-scrollbar-thumb {
-		background: var(--l2-foreground); /* Color of the thumb */
-		border-radius: 4px; /* Roundness of the thumb */
-	}
+			.attribute-columns::-webkit-scrollbar-thumb {
+				background: var(--l2-foreground); /* Color of the thumb */
+				border-radius: 4px; /* Roundness of the thumb */
+			}
 
-	.attribute-columns::-webkit-scrollbar-thumb:hover {
-		background: var(--l1-border); /* Color of the thumb on hover */
+			.attribute-columns::-webkit-scrollbar-thumb:hover {
+				background: var(--l1-border); /* Color of the thumb on hover */
+			}
+		}
 	}
 }

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

@@ -7,12 +7,7 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Input, Tooltip } from 'antd';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
+import { Button, Divider, Dropdown, Input, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { FieldDataType } from 'api/v5/v5';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -164,12 +159,34 @@ function ExplorerColumnsRenderer({
 		debouncedSetQuerySearchText(e.target.value);
 	};
 
-	const handleOpenChange = (nextOpen: boolean): void => {
-		setOpen(nextOpen);
-		if (nextOpen) {
-			setSearchText('');
-		}
-	};
+	const items: MenuProps['items'] = [
+		{
+			key: 'search',
+			label: (
+				<Input
+					type="text"
+					placeholder="Search"
+					className="explorer-columns-search"
+					value={searchText}
+					onChange={handleSearchChange}
+					prefix={<Search size={16} style={{ padding: '6px' }} />}
+				/>
+			),
+		},
+		{
+			key: 'columns',
+			label: (
+				<ExplorerAttributeColumns
+					isLoading={isLoading}
+					data={data}
+					searchText={searchText}
+					isAttributeKeySelected={isAttributeKeySelected}
+					handleCheckboxChange={handleCheckboxChange}
+					dataSource={initialDataSource}
+				/>
+			),
+		},
+	];
 
 	const removeSelectedLogField = (name: string): void => {
 		if (
@@ -221,6 +238,13 @@ function ExplorerColumnsRenderer({
 		}
 	};
 
+	const toggleDropdown = (): void => {
+		setOpen(!open);
+		if (!open) {
+			setSearchText('');
+		}
+	};
+
 	const isDarkMode = useIsDarkMode();
 
 	return (
@@ -303,38 +327,25 @@ function ExplorerColumnsRenderer({
 						</Droppable>
 					</DragDropContext>
 					<div>
-						<DropdownMenu open={open} onOpenChange={handleOpenChange}>
-							<DropdownMenuTrigger asChild>
-								<Button
-									className="action-btn"
-									data-testid="add-columns-button"
-									icon={
-										<CirclePlus
-											size={16}
-											color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
-										/>
-									}
-								/>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent side="top" className="explorer-columns-dropdown">
-								<Input
-									type="text"
-									placeholder="Search"
-									className="explorer-columns-search"
-									value={searchText}
-									onChange={handleSearchChange}
-									prefix={<Search size={16} style={{ padding: '6px' }} />}
-								/>
-								<ExplorerAttributeColumns
-									isLoading={isLoading}
-									data={data}
-									searchText={searchText}
-									isAttributeKeySelected={isAttributeKeySelected}
-									handleCheckboxChange={handleCheckboxChange}
-									dataSource={initialDataSource}
-								/>
-							</DropdownMenuContent>
-						</DropdownMenu>
+						<Dropdown
+							menu={{ items }}
+							arrow
+							placement="top"
+							open={open}
+							overlayClassName="explorer-columns-dropdown"
+						>
+							<Button
+								className="action-btn"
+								data-testid="add-columns-button"
+								icon={
+									<CirclePlus
+										size={16}
+										color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
+									/>
+								}
+								onClick={toggleDropdown}
+							/>
+						</Dropdown>
 					</div>
 				</div>
 			)}

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

@@ -146,7 +146,6 @@ describe('ExplorerColumnsRenderer', () => {
 	});
 
 	it('opens and closes the dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<Wrapper>
 				<ExplorerColumnsRenderer
@@ -159,12 +158,12 @@ describe('ExplorerColumnsRenderer', () => {
 		);
 
 		const addButton = screen.getByTestId('add-columns-button');
-		await user.click(addButton);
+		await userEvent.click(addButton);
 
 		expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 
-		await user.click(addButton);
+		await userEvent.click(addButton);
 		await waitFor(() => {
 			expect(screen.queryByRole('menu')).not.toBeInTheDocument();
 		});

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

@@ -13,7 +13,7 @@ import { Plus, Trash2 } from '@signozhq/icons';
 import { ContextLinkProps, Widgets } from 'types/api/dashboard/getAll';
 import { getBaseUrl } from 'utils/basePath';
 
-import VariablesPopover from './VariablesPopover';
+import VariablesDropdown from './VariablesDropdown';
 
 import './UpdateContextLinks.styles.scss';
 
@@ -71,7 +71,7 @@ function UpdateContextLinks({
 		customVariables: fieldVariables,
 	});
 
-	// Transform variables into the format expected by VariablesPopover
+	// Transform variables into the format expected by VariablesDropdown
 	const transformedVariables = useMemo(
 		() => transformContextVariables(variables),
 		[variables],
@@ -224,9 +224,7 @@ function UpdateContextLinks({
 							},
 						]}
 					>
-						{/* TODO: replace with AutoComplete with options for variables and
-						previously used URLs for better UX */}
-						<VariablesPopover
+						<VariablesDropdown
 							onVariableSelect={handleVariableSelect}
 							variables={transformedVariables}
 						>
@@ -254,7 +252,7 @@ function UpdateContextLinks({
 									/>
 								</div>
 							)}
-						</VariablesPopover>
+						</VariablesDropdown>
 					</Form.Item>
 
 					{/* Remove the separate variables section */}
@@ -284,7 +282,7 @@ function UpdateContextLinks({
 										/>
 									</Col>
 									<Col span={16}>
-										<VariablesPopover
+										<VariablesDropdown
 											onVariableSelect={(variableName, cursorPosition): void =>
 												handleParamVariableSelect(index, variableName, cursorPosition)
 											}
@@ -313,7 +311,7 @@ function UpdateContextLinks({
 													}
 												/>
 											)}
-										</VariablesPopover>
+										</VariablesDropdown>
 									</Col>
 									<Col span={2}>
 										<Button

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesDropdown.styles.scss

@@ -0,0 +1,26 @@
+.variables-dropdown-container {
+	.url-input-trigger {
+		width: 100%;
+
+		.url-input-field {
+			width: 100%;
+		}
+	}
+
+	// Override Ant Design dropdown styles
+	.ant-dropdown-menu {
+		max-height: 300px;
+		overflow-y: auto;
+		padding: 8px 0;
+	}
+}
+
+.variable-row {
+	display: flex;
+	justify-content: space-between;
+
+	.variable-source {
+		color: #666;
+		font-size: 12px;
+	}
+}

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

@@ -0,0 +1,93 @@
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { Dropdown } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+import './VariablesDropdown.styles.scss';
+
+interface VariablesDropdownProps {
+	onVariableSelect: (variableName: string, cursorPosition?: number) => void;
+	variables: VariableItem[];
+	children: (props: {
+		onVariableSelect: (variableName: string, cursorPosition?: number) => void;
+		isOpen: boolean;
+		setIsOpen: (open: boolean) => void;
+		cursorPosition: number | null;
+		setCursorPosition: (position: number | null) => void;
+	}) => ReactNode;
+}
+
+interface VariableItem {
+	name: string;
+	source: string;
+}
+
+function VariablesDropdown({
+	onVariableSelect,
+	variables,
+	children,
+}: VariablesDropdownProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+	const wrapperRef = useRef<HTMLDivElement>(null);
+
+	// Click outside handler
+	useEffect(() => {
+		function handleClickOutside(event: MouseEvent): void {
+			if (
+				wrapperRef.current &&
+				!wrapperRef.current.contains(event.target as Node)
+			) {
+				setIsOpen(false);
+			}
+		}
+		if (isOpen) {
+			document.addEventListener('mousedown', handleClickOutside);
+		}
+		return (): void => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [isOpen]);
+
+	const dropdownItems = useMemo(
+		() =>
+			variables.map((v) => ({
+				key: v.name,
+				label: (
+					<div className="variable-row">
+						<Typography.Text className="variable-name">{`{{${v.name}}}`}</Typography.Text>
+						<Typography.Text className="variable-source">{v.source}</Typography.Text>
+					</div>
+				),
+			})),
+		[variables],
+	);
+
+	return (
+		<div className="variables-dropdown-container" ref={wrapperRef}>
+			<Dropdown
+				menu={{
+					items: dropdownItems,
+					onClick: ({ key }): void => {
+						const variableName = key as string;
+						onVariableSelect(`{{${variableName}}}`, cursorPosition || undefined);
+						setIsOpen(false);
+					},
+				}}
+				open={isOpen}
+				placement="bottomLeft"
+				trigger={['click']}
+				getPopupContainer={(): HTMLElement => wrapperRef.current || document.body}
+			>
+				{children({
+					onVariableSelect,
+					isOpen,
+					setIsOpen,
+					cursorPosition,
+					setCursorPosition,
+				})}
+			</Dropdown>
+		</div>
+	);
+}
+
+export default VariablesDropdown;

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesPopover.styles.scss

@@ -1,74 +0,0 @@
-.variables-popover-container {
-	.url-input-trigger {
-		width: 100%;
-
-		.url-input-field {
-			width: 100%;
-		}
-	}
-
-	.variables-popover-anchor-wrap {
-		width: 100%;
-	}
-}
-
-.variables-popover-content {
-	// antd Modal uses z-index ~1000; popover must sit above it.
-	z-index: 1100;
-	padding: 4px 0;
-	max-height: 300px;
-	overflow-y: auto;
-	overflow-x: hidden;
-	min-width: var(--radix-popover-trigger-width);
-}
-
-.variables-popover-empty {
-	padding: 8px 12px;
-	color: var(--l3-foreground, #999);
-	font-size: 12px;
-	font-style: italic;
-}
-
-.variables-popover-item {
-	all: unset;
-	display: block;
-	box-sizing: border-box;
-	width: 100%;
-	padding: 8px 12px;
-	cursor: pointer;
-	color: var(--l1-foreground);
-	font-size: 13px;
-	line-height: 1.4;
-	overflow: hidden;
-
-	&:hover,
-	&:focus {
-		background-color: var(--l1-background-hover);
-	}
-}
-
-.variable-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	min-width: 0;
-
-	.variable-name,
-	.variable-source {
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.variable-name {
-		flex: 1 1 auto;
-	}
-
-	.variable-source {
-		color: #666;
-		font-size: 12px;
-		flex: 0 1 auto;
-	}
-}

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

@@ -1,111 +0,0 @@
-// Uses Popover (not DropdownMenu like the rest of the antd-dropdown migration):
-// DropdownMenuTrigger preventDefaults pointerdown, breaking input focus and
-// dismissing on every keystroke. PopoverAnchor is a passive positioning element.
-import { ReactNode, useRef, useState } from 'react';
-import { Popover, PopoverAnchor, PopoverContent } from '@signozhq/ui/popover';
-import { Typography } from '@signozhq/ui/typography';
-
-import './VariablesPopover.styles.scss';
-
-interface VariablesPopoverProps {
-	onVariableSelect: (variableName: string, cursorPosition?: number) => void;
-	variables: VariableItem[];
-	children: (props: {
-		onVariableSelect: (variableName: string, cursorPosition?: number) => void;
-		isOpen: boolean;
-		setIsOpen: (open: boolean) => void;
-		cursorPosition: number | null;
-		setCursorPosition: (position: number | null) => void;
-	}) => ReactNode;
-}
-
-interface VariableItem {
-	name: string;
-	source: string;
-}
-
-function VariablesPopover({
-	onVariableSelect,
-	variables,
-	children,
-}: VariablesPopoverProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(false);
-	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
-	const anchorRef = useRef<HTMLDivElement>(null);
-
-	const handleOpenChange = (open: boolean): void => {
-		// Accept "close" events from the popover (outside-click, Esc) but ignore
-		// opens — opening is driven by the input's onFocus in the consumer.
-		if (!open) {
-			setIsOpen(false);
-		}
-	};
-
-	return (
-		<div className="variables-popover-container">
-			<Popover open={isOpen} onOpenChange={handleOpenChange} modal={false}>
-				<PopoverAnchor asChild>
-					<div className="variables-popover-anchor-wrap" ref={anchorRef}>
-						{children({
-							onVariableSelect,
-							isOpen,
-							setIsOpen,
-							cursorPosition,
-							setCursorPosition,
-						})}
-					</div>
-				</PopoverAnchor>
-				<PopoverContent
-					align="start"
-					sideOffset={4}
-					className="variables-popover-content"
-					onOpenAutoFocus={(e): void => e.preventDefault()}
-					onCloseAutoFocus={(e): void => e.preventDefault()}
-					onInteractOutside={(e): void => {
-						// Keep the popover open while interacting with the anchor (the input),
-						// otherwise typing/clicking the input would close it immediately.
-						const target = e.target as Node | null;
-						if (target && anchorRef.current?.contains(target)) {
-							e.preventDefault();
-						}
-					}}
-					onFocusOutside={(e): void => {
-						const target = e.target as Node | null;
-						if (target && anchorRef.current?.contains(target)) {
-							e.preventDefault();
-						}
-					}}
-				>
-					{variables.length === 0 ? (
-						<div className="variables-popover-empty">No variables available</div>
-					) : (
-						variables.map((v) => (
-							<button
-								key={v.name}
-								type="button"
-								className="variables-popover-item"
-								onMouseDown={(e): void => {
-									// Prevent the input from losing focus when clicking an item.
-									e.preventDefault();
-								}}
-								onClick={(): void => {
-									onVariableSelect(`{{${v.name}}}`, cursorPosition || undefined);
-									setIsOpen(false);
-								}}
-							>
-								<div className="variable-row">
-									<Typography.Text className="variable-name">{`{{${v.name}}}`}</Typography.Text>
-									<Typography.Text className="variable-source">
-										{v.source}
-									</Typography.Text>
-								</div>
-							</button>
-						))
-					)}
-				</PopoverContent>
-			</Popover>
-		</div>
-	);
-}
-
-export default VariablesPopover;

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

@@ -204,7 +204,7 @@ const processContextLinks = (
 };
 
 /**
- * Transforms context variables into the format expected by VariablesPopover
+ * Transforms context variables into the format expected by VariablesDropdown
  * @param variables - Array of context variables from useContextVariables
  * @returns Array of transformed variables with proper source descriptions
  */

frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { ChevronDown } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import { Button, ColorPicker, Space } from 'antd';
+import { Button, ColorPicker, Dropdown, MenuProps, Space } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import useDebounce from 'hooks/useDebounce';
 
@@ -27,7 +26,7 @@ function ColorSelector({
 		setColorFromPicker(hex);
 	};
 
-	const items: MenuItem[] = [
+	const items: MenuProps['items'] = [
 		{
 			key: 'Red',
 			label: <CustomColor color="Red" />,
@@ -63,7 +62,7 @@ function ColorSelector({
 	];
 
 	return (
-		<DropdownMenuSimple menu={{ items }}>
+		<Dropdown menu={{ items }} trigger={['click']}>
 			<Button
 				onClick={(e): void => e.preventDefault()}
 				className="color-selector-button"
@@ -73,7 +72,7 @@ function ColorSelector({
 					<ChevronDown size="md" />
 				</Space>
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

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

@@ -81,6 +81,20 @@
 		}
 	}
 
+	.alert-rule-scope {
+		margin-bottom: 12px;
+
+		.ant-radio-wrapper {
+			color: var(--l1-foreground);
+		}
+	}
+
+	.alert-rule-all-warning {
+		font-size: 12px;
+		font-weight: 400;
+		color: var(--l2-foreground);
+	}
+
 	.formItemWithBullet {
 		margin-bottom: 0;
 	}

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

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

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

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

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

@@ -0,0 +1,296 @@
+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 = (
 	};
 };
 
-const getFiltersFromMetric = (metric: any): FilterData[] =>
+export const getFiltersFromMetric = (metric: any): FilterData[] =>
 	Object.keys(metric).map((key) => ({
 		filterKey: key,
 		filterValue: metric[key],

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

@@ -2,14 +2,10 @@ 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';
@@ -18,9 +14,10 @@ import { openInNewTab } from 'utils/navigation';
 
 import { ContextMenuItem } from './contextConfig';
 import { getDataLinks } from './dataLinksUtils';
-import { getAggregateColumnHeader, getViewQuery } from './drilldownUtils';
+import { getAggregateColumnHeader } from './drilldownUtils';
 import { getBaseContextConfig } from './menuOptions';
 import { AggregateData } from './useAggregateDrilldown';
+import useBaseDrilldownNavigate from './useBaseDrilldownNavigate';
 
 interface UseBaseAggregateOptionsProps {
 	query: Query;
@@ -38,19 +35,6 @@ 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,
@@ -86,8 +70,6 @@ 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,
@@ -121,50 +103,16 @@ const useBaseAggregateOptions = ({
 					{label}
 				</ContextMenu.Item>
 			));
-		} catch (error) {
+		} catch {
 			return [];
 		}
 	}, [contextLinks, processedVariables, onClose, aggregateData, query]);
 
-	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 handleBaseDrilldown = useBaseDrilldownNavigate({
+		resolvedQuery,
+		aggregateData,
+		callback: onClose,
+	});
 
 	const { pathname } = useLocation();
 

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

@@ -0,0 +1,117 @@
+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/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
 import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
@@ -133,7 +134,7 @@ function ServiceAccountsSettings(): JSX.Element {
 
 	const totalCount = allAccounts.length;
 
-	const filterMenuItems: MenuItem[] = [
+	const filterMenuItems: MenuProps['items'] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -230,9 +231,10 @@ function ServiceAccountsSettings(): JSX.Element {
 			) : (
 				<div className="sa-settings__list-section">
 					<div className="sa-settings__controls">
-						<DropdownMenuSimple
+						<Dropdown
 							menu={{ items: filterMenuItems }}
-							className="sa-settings-filter-dropdown"
+							trigger={['click']}
+							overlayClassName="sa-settings-filter-dropdown"
 						>
 							<Button
 								variant="solid"
@@ -245,7 +247,7 @@ function ServiceAccountsSettings(): JSX.Element {
 									className="sa-settings-filter-trigger__chevron"
 								/>
 							</Button>
-						</DropdownMenuSimple>
+						</Dropdown>
 
 						<div className="sa-settings__search">
 							<Input

frontend/src/container/ServiceAccountsSettings/__tests__/ServiceAccountsSettings.authz.integration.test.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import userEvent from '@testing-library/user-event';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -130,7 +129,6 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('filter dropdown to "Active" hides DISABLED accounts', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<NuqsTestingAdapter>
 				<ServiceAccountsSettings />
@@ -139,10 +137,10 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		await user.click(screen.getByRole('button', { name: /All accounts/i }));
+		fireEvent.click(screen.getByRole('button', { name: /All accounts/i }));
 
 		const activeOption = await screen.findByText(/Active ⎯/i);
-		await user.click(activeOption);
+		fireEvent.click(activeOption);
 
 		await screen.findByText('CI Bot');
 		expect(screen.queryByText('Legacy Bot')).not.toBeInTheDocument();

frontend/src/container/SideNav/SideNav.styles.scss

@@ -662,7 +662,7 @@
 		}
 	}
 
-	&:not(.pinned).is-hovered,
+	&:not(.pinned):hover,
 	&.dropdown-open {
 		flex: 0 0 240px;
 		max-width: 240px;

frontend/src/container/SideNav/SideNav.tsx

@@ -1,6 +1,5 @@
 import {
 	MouseEvent,
-	ReactNode,
 	useCallback,
 	useEffect,
 	useMemo,
@@ -26,14 +25,7 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
-import { Button, MenuProps, Modal, Tooltip } from 'antd';
+import { Button, Dropdown, MenuProps, Modal, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { Logout } from 'api/utils';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
@@ -170,9 +162,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const [hasScroll, setHasScroll] = useState(false);
 	const navTopSectionRef = useRef<HTMLDivElement>(null);
-	const sidenavRef = useRef<HTMLDivElement>(null);
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-	const isDropdownOpenRef = useRef(false);
 
 	const [isHovered, setIsHovered] = useState(false);
 	const [pinnedMenuItems, setPinnedMenuItems] = useState<SidebarItem[]>([]);
@@ -185,27 +175,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	}, []);
 
 	const handleMouseLeave = useCallback(() => {
-		// When the dropdown is open its content renders in a portal outside
-		// the sidenav, which causes the browser to fire mouseleave on the
-		// sidenav. Keep the sidenav expanded in that case.
-		if (isDropdownOpenRef.current) {
-			return;
-		}
 		setIsHovered(false);
 	}, []);
 
-	const handleDropdownOpenChange = useCallback((open: boolean): void => {
-		isDropdownOpenRef.current = open;
-		setIsDropdownOpen(open);
-		if (!open) {
-			// Re-sync hover state on close: the cursor may have moved to the
-			// portal content (outside .sideNav), so mouseleave never fired.
-			requestAnimationFrame(() => {
-				setIsHovered(sidenavRef.current?.matches(':hover') ?? false);
-			});
-		}
-	}, []);
-
 	const checkScroll = useCallback((): void => {
 		if (navTopSectionRef.current) {
 			const { scrollHeight, clientHeight, scrollTop } = navTopSectionRef.current;
@@ -987,11 +959,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	return (
 		<div className={cx('sidenav-container', isPinned && 'pinned')}>
 			<div
-				ref={sidenavRef}
 				className={cx(
 					'sideNav',
 					isPinned && 'pinned',
-					isHovered && 'is-hovered',
 					isDropdownOpen && 'dropdown-open',
 				)}
 				onMouseEnter={handleMouseEnter}
@@ -1212,95 +1182,46 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 							{isAIAssistantEnabled && renderNavItems([aiAssistantMenuItem], false)}
 
 							<div className="nav-dropdown-item">
-								<DropdownMenu onOpenChange={handleDropdownOpenChange}>
-									<DropdownMenuTrigger asChild>
-										<div className="nav-item">
-											<div className="nav-item-data" data-testid="help-support-nav-item">
-												<div className="nav-item-icon">{helpSupportMenuItem.icon}</div>
+								<Dropdown
+									menu={{
+										items: helpSupportDropdownMenuItems,
+										onClick: handleHelpSupportMenuItemClick,
+									}}
+									placement="topLeft"
+									overlayClassName="nav-dropdown-overlay help-support-dropdown"
+									trigger={['click']}
+									onOpenChange={(open): void => setIsDropdownOpen(open)}
+								>
+									<div className="nav-item">
+										<div className="nav-item-data" data-testid="help-support-nav-item">
+											<div className="nav-item-icon">{helpSupportMenuItem.icon}</div>
 
-												<div className="nav-item-label">{helpSupportMenuItem.label}</div>
-											</div>
+											<div className="nav-item-label">{helpSupportMenuItem.label}</div>
 										</div>
-									</DropdownMenuTrigger>
-									<DropdownMenuContent
-										side="top"
-										align="start"
-										className="nav-dropdown-overlay help-support-dropdown"
-									>
-										{helpSupportDropdownMenuItems.map((item, idx) => {
-											if ('type' in item) {
-												// eslint-disable-next-line react/no-array-index-key
-												return <DropdownMenuSeparator key={`help-sep-${idx}`} />;
-											}
-											return (
-												<DropdownMenuItem
-													key={String(item.key)}
-													leftIcon={item.icon}
-													onClick={(e): void =>
-														handleHelpSupportMenuItemClick({
-															...item,
-															key: String(item.key),
-															domEvent: e.nativeEvent,
-														} as unknown as SidebarItem)
-													}
-												>
-													{item.label}
-												</DropdownMenuItem>
-											);
-										})}
-									</DropdownMenuContent>
-								</DropdownMenu>
+									</div>
+								</Dropdown>
 							</div>
 
 							<div className="nav-dropdown-item">
-								<DropdownMenu onOpenChange={handleDropdownOpenChange}>
-									<DropdownMenuTrigger asChild>
-										<div className={cx('nav-item', isSettingsPage && 'active')}>
-											<div className="nav-item-active-marker" />
-											<div className="nav-item-data" data-testid="settings-nav-item">
-												<div className="nav-item-icon">{userSettingsMenuItem.icon}</div>
+								<Dropdown
+									menu={{
+										items: userSettingsDropdownMenuItems,
+										onClick: handleSettingsMenuItemClick,
+									}}
+									placement="topLeft"
+									overlayClassName="nav-dropdown-overlay settings-dropdown"
+									trigger={['click']}
+									onOpenChange={(open): void => setIsDropdownOpen(open)}
+								>
+									<div className={cx('nav-item', isSettingsPage && 'active')}>
+										<div className="nav-item-active-marker" />
+										<div className="nav-item-data" data-testid="settings-nav-item">
+											<div className="nav-item-icon">{userSettingsMenuItem.icon}</div>
 
-												<div className="nav-item-label">{userSettingsMenuItem.label}</div>
-											</div>
+											<div className="nav-item-label">{userSettingsMenuItem.label}</div>
 										</div>
-									</DropdownMenuTrigger>
-									<DropdownMenuContent
-										side="top"
-										align="start"
-										className="nav-dropdown-overlay settings-dropdown"
-									>
-										{(userSettingsDropdownMenuItems ?? []).map((item, idx) => {
-											if (!item) {
-												return null;
-											}
-											if ('type' in item && item.type === 'divider') {
-												// eslint-disable-next-line react/no-array-index-key
-												return <DropdownMenuSeparator key={`settings-sep-${idx}`} />;
-											}
-											const settingsItem = item as {
-												key?: string | number;
-												label?: ReactNode;
-												icon?: ReactNode;
-												disabled?: boolean;
-											};
-											return (
-												<DropdownMenuItem
-													key={String(settingsItem.key)}
-													leftIcon={settingsItem.icon}
-													disabled={settingsItem.disabled}
-													onClick={(e): void =>
-														handleSettingsMenuItemClick({
-															key: String(settingsItem.key),
-															domEvent: e.nativeEvent,
-														} as unknown as SidebarItem)
-													}
-												>
-													{settingsItem.label}
-												</DropdownMenuItem>
-											);
-										})}
-									</DropdownMenuContent>
-								</DropdownMenu>
+									</div>
+								</Dropdown>
 							</div>
 						</div>
 					</div>

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/__tests__/syncCursorRegistry.test.ts

@@ -0,0 +1,29 @@
+import { syncCursorRegistry } from '../syncCursorRegistry';
+
+describe('syncCursorRegistry', () => {
+	describe('metadata', () => {
+		it('returns undefined for unknown key', () => {
+			expect(syncCursorRegistry.getMetadata('unknown-meta')).toBeUndefined();
+		});
+
+		it('stores and retrieves metadata by syncKey', () => {
+			const metadata = { yAxisUnit: 'ms', groupBy: [] };
+			syncCursorRegistry.setMetadata('meta-key', metadata);
+			expect(syncCursorRegistry.getMetadata('meta-key')).toBe(metadata);
+		});
+	});
+
+	describe('activeSeriesMetric', () => {
+		it('returns null (not undefined) for unknown key', () => {
+			expect(
+				syncCursorRegistry.getActiveSeriesMetric('unknown-metric'),
+			).toBeNull();
+		});
+
+		it('stores and retrieves metric by syncKey', () => {
+			const metric = { host: 'server1', __name__: 'cpu' };
+			syncCursorRegistry.setActiveSeriesMetric('metric-key', metric);
+			expect(syncCursorRegistry.getActiveSeriesMetric('metric-key')).toBe(metric);
+		});
+	});
+});

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/__tests__/syncDisplayHook.test.ts

@@ -0,0 +1,627 @@
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import uPlot from 'uplot';
+
+import { syncCursorRegistry } from '../syncCursorRegistry';
+import { createSyncDisplayHook } from '../syncDisplayHook';
+import {
+	SyncTooltipFilterMode,
+	type TooltipControllerState,
+	type TooltipSyncMetadata,
+} from '../types';
+
+jest.mock('../syncCursorRegistry', () => ({
+	syncCursorRegistry: {
+		setMetadata: jest.fn(),
+		getMetadata: jest.fn(),
+		setActiveSeriesMetric: jest.fn(),
+		getActiveSeriesMetric: jest.fn(),
+	},
+}));
+
+const mockRegistry = syncCursorRegistry as {
+	setMetadata: jest.Mock;
+	getMetadata: jest.Mock;
+	setActiveSeriesMetric: jest.Mock;
+	getActiveSeriesMetric: jest.Mock;
+};
+
+const SYNC_KEY = 'test-sync-key';
+
+// Builds a single-query groupByPerQuery from a list of dimension keys.
+const makeGroupByPerQuery = (
+	...keys: string[]
+): Record<string, BaseAutocompleteData[]> => ({
+	A: keys.map((key) => ({ key, type: 'tag' as const })),
+});
+
+function makeUPlotRoot(includeCrosshair = true): HTMLElement {
+	const root = document.createElement('div');
+	if (includeCrosshair) {
+		const el = document.createElement('div');
+		el.className = 'u-cursor-y';
+		root.append(el);
+	}
+	return root;
+}
+
+type FakeSeries = { metric?: Record<string, string>; show?: boolean };
+
+function makeFakeUPlot(opts: {
+	cursorEvent?: MouseEvent | null;
+	cursorLeft?: number;
+	series?: FakeSeries[];
+	includeCrosshair?: boolean;
+}): uPlot {
+	return {
+		root: makeUPlotRoot(opts.includeCrosshair ?? true),
+		cursor: {
+			event: opts.cursorEvent !== undefined ? opts.cursorEvent : null,
+			left: opts.cursorLeft ?? 50,
+		},
+		series: opts.series ?? [
+			{},
+			{ metric: { host: 'server1' } },
+			{ metric: { host: 'server2' } },
+		],
+		setSeries: jest.fn(),
+	} as unknown as uPlot;
+}
+
+function makeController(
+	focusedSeriesIndex: number | null = null,
+): TooltipControllerState {
+	return {
+		focusedSeriesIndex,
+		syncedSeriesIndexes: null,
+	} as TooltipControllerState;
+}
+
+// Convenience cast used throughout assertions.
+function mockSetSeries(u: uPlot): jest.Mock {
+	return (u as unknown as { setSeries: jest.Mock }).setSeries;
+}
+
+function getCrosshair(u: uPlot): HTMLElement {
+	const el = u.root.querySelector<HTMLElement>('.u-cursor-y');
+	if (!el) {
+		throw new Error('crosshair element missing');
+	}
+	return el;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('createSyncDisplayHook', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	// ── guard ────────────────────────────────────────────────────────────────
+
+	describe('no crosshair element', () => {
+		it('returns early without calling registry when .u-cursor-y absent', () => {
+			const hook = createSyncDisplayHook(SYNC_KEY, undefined, makeController());
+			const u = makeFakeUPlot({ includeCrosshair: false });
+			hook(u);
+			expect(mockRegistry.setMetadata).not.toHaveBeenCalled();
+			expect(mockRegistry.getMetadata).not.toHaveBeenCalled();
+			expect(mockSetSeries(u)).not.toHaveBeenCalled();
+		});
+	});
+
+	// ── source panel ─────────────────────────────────────────────────────────
+
+	describe('source behavior (cursor.event != null)', () => {
+		it('writes syncMetadata to registry', () => {
+			const syncMetadata: TooltipSyncMetadata = { yAxisUnit: 'ms' };
+			const hook = createSyncDisplayHook(SYNC_KEY, syncMetadata, makeController());
+			const u = makeFakeUPlot({ cursorEvent: new MouseEvent('mousemove') });
+			hook(u);
+			expect(mockRegistry.setMetadata).toHaveBeenCalledWith(
+				SYNC_KEY,
+				syncMetadata,
+			);
+		});
+
+		it('writes focused series metric when focusedSeriesIndex is set', () => {
+			const series: FakeSeries[] = [
+				{},
+				{ metric: { host: 'server1' } },
+				{ metric: { host: 'server2' } },
+			];
+			const hook = createSyncDisplayHook(SYNC_KEY, undefined, makeController(1));
+			const u = makeFakeUPlot({
+				cursorEvent: new MouseEvent('mousemove'),
+				series,
+			});
+			hook(u);
+			expect(mockRegistry.setActiveSeriesMetric).toHaveBeenCalledWith(SYNC_KEY, {
+				host: 'server1',
+			});
+		});
+
+		it('writes null metric when focusedSeriesIndex is null', () => {
+			const hook = createSyncDisplayHook(
+				SYNC_KEY,
+				undefined,
+				makeController(null),
+			);
+			const u = makeFakeUPlot({ cursorEvent: new MouseEvent('mousemove') });
+			hook(u);
+			expect(mockRegistry.setActiveSeriesMetric).toHaveBeenCalledWith(
+				SYNC_KEY,
+				null,
+			);
+		});
+
+		it('clears controller.syncedSeriesIndexes', () => {
+			const controller = makeController();
+			controller.syncedSeriesIndexes = [1, 2];
+			const hook = createSyncDisplayHook(SYNC_KEY, undefined, controller);
+			const u = makeFakeUPlot({ cursorEvent: new MouseEvent('mousemove') });
+			hook(u);
+			expect(controller.syncedSeriesIndexes).toBeNull();
+		});
+
+		it('shows crosshair and does not read from registry', () => {
+			const hook = createSyncDisplayHook(SYNC_KEY, undefined, makeController());
+			const u = makeFakeUPlot({ cursorEvent: new MouseEvent('mousemove') });
+			hook(u);
+			expect(getCrosshair(u).style.display).toBe('');
+			expect(mockRegistry.getMetadata).not.toHaveBeenCalled();
+		});
+	});
+
+	// ── receiver panel ───────────────────────────────────────────────────────
+
+	describe('receiver behavior (cursor.event is null)', () => {
+		describe('crosshair visibility', () => {
+			it('shows crosshair when yAxisUnit matches source', () => {
+				mockRegistry.getMetadata.mockReturnValue({ yAxisUnit: 'ms' });
+				mockRegistry.getActiveSeriesMetric.mockReturnValue(null);
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms' },
+					makeController(),
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(getCrosshair(u).style.display).toBe('');
+			});
+
+			it('hides crosshair when yAxisUnit differs from source', () => {
+				mockRegistry.getMetadata.mockReturnValue({ yAxisUnit: 'bytes' });
+				mockRegistry.getActiveSeriesMetric.mockReturnValue(null);
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms' },
+					makeController(),
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(getCrosshair(u).style.display).toBe('none');
+			});
+		});
+
+		// ── exact groupBy match ───────────────────────────────────────────────
+
+		describe('exact groupBy match', () => {
+			const groupByPerQuery = makeGroupByPerQuery('host');
+			const series: FakeSeries[] = [
+				{},
+				{ metric: { host: 'server1' } },
+				{ metric: { host: 'server2' } },
+			];
+
+			it('focuses the matching series and records it on the controller', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server2' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(2, { focus: true });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([2]);
+			});
+
+			it('unfocuses all and emits empty matches (Filtered) when active metric is null', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue(null);
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(null, { focus: false });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+
+			it('unfocuses all when metric matches no series', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({
+					host: 'unknown-server',
+				});
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(null, { focus: false });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+
+			it('clears syncedSeriesIndexes when cursor is off-plot (left < 0)', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: -1, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(null, { focus: false });
+				expect(controller.syncedSeriesIndexes).toBeNull();
+				expect(mockRegistry.getActiveSeriesMetric).not.toHaveBeenCalled();
+			});
+
+			it('never focuses series at index 0 (x-axis)', () => {
+				const sameMetric = { host: 'server1' };
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue(sameMetric);
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({
+					cursorEvent: null,
+					cursorLeft: 50,
+					// Index 0 has the same metric — it must always be skipped.
+					series: [{ metric: sameMetric }, { metric: { host: 'other' } }],
+				});
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(null, { focus: false });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+
+			it('skips hidden series (show === false)', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({
+					cursorEvent: null,
+					cursorLeft: 50,
+					series: [
+						{},
+						{ metric: { host: 'server1' }, show: false },
+						{ metric: { host: 'server1' } },
+					],
+				});
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(2, { focus: true });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([2]);
+			});
+		});
+
+		// ── partial groupBy overlap ───────────────────────────────────────────
+
+		describe('partial groupBy overlap', () => {
+			it('subset — records every receiver series matching on the common key', () => {
+				// Source groupBy=[host], receiver groupBy=[host, service].
+				// Hook focuses the first match; the rest are surfaced via controller.syncedSeriesIndexes.
+				const sourceGroupBy = makeGroupByPerQuery('host');
+				const receiverGroupBy = makeGroupByPerQuery('host', 'service');
+				const series: FakeSeries[] = [
+					{},
+					{ metric: { host: 'server1', service: 'api' } },
+					{ metric: { host: 'server1', service: 'frontend' } },
+					{ metric: { host: 'server2', service: 'api' } },
+				];
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: sourceGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: receiverGroupBy },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(1, { focus: true });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([1, 2]);
+			});
+
+			it('superset — records the one receiver series matching on the common key', () => {
+				// Source groupBy=[host, service], receiver groupBy=[host].
+				const sourceGroupBy = makeGroupByPerQuery('host', 'service');
+				const receiverGroupBy = makeGroupByPerQuery('host');
+				const series: FakeSeries[] = [
+					{},
+					{ metric: { host: 'server1' } },
+					{ metric: { host: 'server2' } },
+				];
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: sourceGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({
+					host: 'server1',
+					service: 'api',
+				});
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: receiverGroupBy },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(1, { focus: true });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([1]);
+			});
+
+			it('partial — matches on the intersecting key only', () => {
+				// Source groupBy=[host, service], receiver groupBy=[service, region].
+				// Common key is [service]. Both receiver series with service=api match.
+				const sourceGroupBy = makeGroupByPerQuery('host', 'service');
+				const receiverGroupBy = makeGroupByPerQuery('service', 'region');
+				const series: FakeSeries[] = [
+					{},
+					{ metric: { service: 'api', region: 'us-east' } },
+					{ metric: { service: 'api', region: 'eu-west' } },
+					{ metric: { service: 'frontend', region: 'us-east' } },
+				];
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: sourceGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({
+					host: 'server1',
+					service: 'api',
+				});
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: receiverGroupBy },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(1, { focus: true });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([1, 2]);
+			});
+		});
+
+		// ── union across queries in groupByPerQuery ───────────────────────────
+
+		describe('union across queries', () => {
+			it("treats the panel's effective groupBy as the union across its queries", () => {
+				// Source has query A=[host]; receiver has A=[host], B=[service].
+				// The shared key is `host` — receiver matches on that.
+				const sourceGroupBy: Record<string, BaseAutocompleteData[]> = {
+					A: [{ key: 'host', type: 'tag' }],
+				};
+				const receiverGroupBy: Record<string, BaseAutocompleteData[]> = {
+					A: [{ key: 'host', type: 'tag' }],
+					B: [{ key: 'service', type: 'tag' }],
+				};
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: sourceGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: receiverGroupBy },
+					controller,
+				);
+				const u = makeFakeUPlot({
+					cursorEvent: null,
+					cursorLeft: 50,
+					series: [
+						{},
+						{ metric: { host: 'server1' } },
+						{ metric: { host: 'server2' } },
+					],
+				});
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toStrictEqual([1]);
+			});
+		});
+
+		// ── no overlap (Filtered mode default) ────────────────────────────────
+
+		describe('no overlap → Filtered mode emits []', () => {
+			it('emits [] when groupBy keys are completely different', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: makeGroupByPerQuery('host'),
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: makeGroupByPerQuery('service') },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+
+			it('emits [] when receiver groupBy is empty', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: makeGroupByPerQuery('host'),
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: {} },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+
+			it('emits [] when source groupBy is absent', () => {
+				mockRegistry.getMetadata.mockReturnValue({ yAxisUnit: 'ms' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: makeGroupByPerQuery('host') },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+		});
+
+		// ── filterMode: All ──────────────────────────────────────────────────
+
+		describe('filterMode All', () => {
+			it('emits null (no filter) when there is no overlap in groupBy', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: makeGroupByPerQuery('host'),
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{
+						yAxisUnit: 'ms',
+						groupByPerQuery: makeGroupByPerQuery('service'),
+						filterMode: SyncTooltipFilterMode.All,
+					},
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toBeNull();
+			});
+
+			it('emits null when metric matches no series', () => {
+				const groupByPerQuery = makeGroupByPerQuery('host');
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'unknown' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{
+						yAxisUnit: 'ms',
+						groupByPerQuery,
+						filterMode: SyncTooltipFilterMode.All,
+					},
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50 });
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toBeNull();
+			});
+		});
+
+		// ── caching ───────────────────────────────────────────────────────────
+
+		describe('caching optimizations', () => {
+			it('reuses the crosshair element across multiple invocations', () => {
+				mockRegistry.getMetadata.mockReturnValue({ yAxisUnit: 'ms' });
+				mockRegistry.getActiveSeriesMetric.mockReturnValue(null);
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms' },
+					makeController(),
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				const spy = jest.spyOn(u.root, 'querySelector');
+				hook(u);
+				hook(u);
+				hook(u);
+				// querySelector should only be called once regardless of invocation count.
+				expect(spy).toHaveBeenCalledTimes(1);
+			});
+
+			it('recomputes common keys when source groupByPerQuery reference changes', () => {
+				const hostGroupBy = makeGroupByPerQuery('host');
+				const serviceGroupBy = makeGroupByPerQuery('service');
+				const series: FakeSeries[] = [
+					{},
+					{ metric: { host: 'server1', service: 'api' } },
+					{ metric: { host: 'server2', service: 'frontend' } },
+				];
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ groupByPerQuery: makeGroupByPerQuery('host', 'service') },
+					makeController(),
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+
+				// First call: source groups by host → matches series 1.
+				mockRegistry.getMetadata.mockReturnValue({
+					groupByPerQuery: hostGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(1, { focus: true });
+
+				jest.clearAllMocks();
+
+				// Second call: source now groups by service → matches series 2.
+				mockRegistry.getMetadata.mockReturnValue({
+					groupByPerQuery: serviceGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({
+					service: 'frontend',
+				});
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(2, { focus: true });
+			});
+		});
+	});
+});

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.styles.scss

@@ -8,10 +8,8 @@
 		border-color: var(--l1-border);
 		margin: 0;
 	}
-	.dropdown-trigger-wrapper {
-		display: flex;
-		justify-content: center;
-		align-items: center;
+	.dropdown-icon {
+		margin-right: 4px;
 	}
 }
 .dropdown-menu {

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Tooltip } from 'antd';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { Divider, Dropdown, MenuProps, Tooltip } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Copy, Ellipsis, PenLine, Trash2 } from '@signozhq/icons';
@@ -13,6 +12,7 @@ import {
 } from 'pages/AlertDetails/hooks';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useAlertRule } from 'providers/Alert';
+import { CSSProperties } from 'styled-components';
 import { NEW_ALERT_SCHEMA_VERSION } from 'types/api/alerts/alertTypesV2';
 import { AlertDef } from 'types/api/alerts/def';
 
@@ -21,6 +21,16 @@ import RenameModal from './RenameModal';
 
 import './ActionButtons.styles.scss';
 
+const menuItemStyle: CSSProperties = {
+	fontSize: '14px',
+	letterSpacing: '0.14px',
+};
+
+const menuItemStyleV2: CSSProperties = {
+	fontSize: '13px',
+	letterSpacing: '0.13px',
+};
+
 function AlertActionButtons({
 	ruleId,
 	alertDetails,
@@ -58,7 +68,9 @@ function AlertActionButtons({
 
 	const isV2Alert = alertDetails.schemaVersion === NEW_ALERT_SCHEMA_VERSION;
 
-	const menuItems: MenuItem[] = [
+	const finalMenuItemStyle = isV2Alert ? menuItemStyleV2 : menuItemStyle;
+
+	const menuItems: MenuProps['items'] = [
 		...(!isV2Alert
 			? [
 					{
@@ -66,6 +78,7 @@ function AlertActionButtons({
 						label: 'Rename',
 						icon: <PenLine size={16} color={Color.BG_VANILLA_400} />,
 						onClick: handleRename,
+						style: finalMenuItemStyle,
 					},
 				]
 			: []),
@@ -74,13 +87,17 @@ function AlertActionButtons({
 			label: 'Duplicate',
 			icon: <Copy size={16} color={Color.BG_VANILLA_400} />,
 			onClick: handleAlertDuplicate,
+			style: finalMenuItemStyle,
 		},
 		{
 			key: 'delete-rule',
 			label: 'Delete',
 			icon: <Trash2 size={16} color={Color.BG_CHERRY_400} />,
 			onClick: handleAlertDelete,
-			danger: true,
+			style: {
+				...finalMenuItemStyle,
+				color: Color.BG_CHERRY_400,
+			},
 		},
 	];
 
@@ -123,21 +140,16 @@ function AlertActionButtons({
 
 				<Divider type="vertical" />
 
-				<DropdownMenuSimple menu={{ items: menuItems }}>
-					<span className="dropdown-trigger-wrapper">
-						<Tooltip title="More options">
-							<Button
-								type="text"
-								icon={
-									<Ellipsis
-										size={16}
-										color={isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400}
-									/>
-								}
-							/>
-						</Tooltip>
-					</span>
-				</DropdownMenuSimple>
+				<Dropdown trigger={['click']} menu={{ items: menuItems }}>
+					<Tooltip title="More options">
+						<Ellipsis
+							size={16}
+							color={isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400}
+							cursor="pointer"
+							className="dropdown-icon"
+						/>
+					</Tooltip>
+				</Dropdown>
 			</div>
 
 			<RenameModal

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/DockModeSwitcher.tsx

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+import { Dock, PanelBottom, PanelRight } from '@signozhq/icons';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
+import {
+	TooltipContent,
+	TooltipProvider,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+
+import { SpanDetailVariant } from './constants';
+
+interface DockOption {
+	value: SpanDetailVariant;
+	icon: ReactNode;
+	tooltip: string;
+}
+
+const DOCK_OPTIONS: DockOption[] = [
+	{
+		value: SpanDetailVariant.DIALOG,
+		icon: <Dock size={14} />,
+		tooltip: 'Open as floating panel',
+	},
+	{
+		value: SpanDetailVariant.DOCKED,
+		icon: <PanelBottom size={14} />,
+		tooltip: 'Dock at the bottom',
+	},
+	{
+		value: SpanDetailVariant.DOCKED_RIGHT,
+		icon: <PanelRight size={14} />,
+		tooltip: 'Dock on the right',
+	},
+];
+
+interface DockModeSwitcherProps {
+	value: SpanDetailVariant;
+	onChange: (value: SpanDetailVariant) => void;
+	tooltipClassName?: string;
+}
+
+function DockModeSwitcher({
+	value,
+	onChange,
+	tooltipClassName,
+}: DockModeSwitcherProps): JSX.Element {
+	return (
+		<TooltipProvider>
+			<ToggleGroup
+				type="single"
+				value={value}
+				onChange={(v): void => {
+					if (v) {
+						onChange(v as SpanDetailVariant);
+					}
+				}}
+				size="sm"
+			>
+				{DOCK_OPTIONS.map((option) => (
+					<TooltipRoot key={option.value}>
+						<TooltipTrigger asChild>
+							<span>
+								<ToggleGroupItem value={option.value}>{option.icon}</ToggleGroupItem>
+							</span>
+						</TooltipTrigger>
+						<TooltipContent className={tooltipClassName}>
+							{option.tooltip}
+						</TooltipContent>
+					</TooltipRoot>
+				))}
+			</ToggleGroup>
+		</TooltipProvider>
+	);
+}
+
+export default DockModeSwitcher;

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

@@ -3,6 +3,10 @@
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+
+	:global(.details-header) {
+		height: 39px;
+	}
 }
 
 .body {

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -1,25 +1,16 @@
 import { useCallback, useMemo } from 'react';
-import { Button } from '@signozhq/ui/button';
 import {
 	TabsContent,
 	TabsList,
 	TabsRoot,
 	TabsTrigger,
 } from '@signozhq/ui/tabs';
-import {
-	TooltipRoot,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
 import {
 	Bookmark,
 	CalendarClock,
 	ChartColumnBig,
-	Dock,
 	Link2,
 	List,
-	PanelBottom,
 	ScrollText,
 	Timer,
 } from '@signozhq/icons';
@@ -61,6 +52,7 @@ import {
 	SpanDetailVariant,
 	VISIBLE_ACTIONS,
 } from './constants';
+import DockModeSwitcher from './DockModeSwitcher';
 import { useSpanAttributeActions } from './hooks/useSpanAttributeActions';
 import { useTracePinnedFields } from './hooks/useTracePinnedFields';
 import {
@@ -492,31 +484,14 @@ function SpanDetailsPanel({
 		];
 
 		if (onVariantChange) {
-			const isDocked = variant === SpanDetailVariant.DOCKED;
 			actions.push({
-				key: 'dock-toggle',
+				key: 'dock-mode',
 				component: (
-					<TooltipProvider>
-						<TooltipRoot>
-							<TooltipTrigger asChild>
-								<Button
-									variant="ghost"
-									size="icon"
-									color="secondary"
-									onClick={(): void =>
-										onVariantChange(
-											isDocked ? SpanDetailVariant.DIALOG : SpanDetailVariant.DOCKED,
-										)
-									}
-								>
-									{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
-								</Button>
-							</TooltipTrigger>
-							<TooltipContent className={styles.dockToggleTooltip}>
-								{isDocked ? 'Open as floating panel' : 'Dock at the bottom'}
-							</TooltipContent>
-						</TooltipRoot>
-					</TooltipProvider>
+					<DockModeSwitcher
+						value={variant}
+						onChange={onVariantChange}
+						tooltipClassName={styles.dockToggleTooltip}
+					/>
 				),
 			});
 		}
@@ -553,7 +528,10 @@ function SpanDetailsPanel({
 		</>
 	);
 
-	if (variant === SpanDetailVariant.DOCKED) {
+	if (
+		variant === SpanDetailVariant.DOCKED ||
+		variant === SpanDetailVariant.DOCKED_RIGHT
+	) {
 		return <div className={styles.root}>{content}</div>;
 	}
 

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/constants.ts

@@ -22,6 +22,7 @@ export enum SpanDetailVariant {
 	DRAWER = 'drawer',
 	DIALOG = 'dialog',
 	DOCKED = 'docked',
+	DOCKED_RIGHT = 'right',
 }
 
 export const KEY_ATTRIBUTE_KEYS: Record<string, string[]> = {

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

@@ -4,13 +4,28 @@
 	flex-direction: column;
 }
 
+.layoutRow {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
 .content {
 	display: flex;
 	flex-direction: column;
 	flex: 1;
+	min-width: 0;
 	overflow: hidden;
 }
 
+.rightDock {
+	display: flex;
+	flex-direction: column;
+	border-left: 1px solid var(--l2-border);
+	min-width: 0;
+}
+
 // Shared Ant Collapse chrome reset for both the flamegraph and waterfall
 // collapse panels.
 .flameCollapse,

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

@@ -893,7 +893,7 @@ function Success(props: ISuccessProps): JSX.Element {
 					/>
 					{/* Left panel - table with horizontal scroll */}
 					<ResizableBox
-						direction="horizontal"
+						handle="right"
 						defaultWidth={DEFAULT_SIDEBAR_WIDTH}
 						minWidth={MIN_SIDEBAR_WIDTH}
 						maxWidth={MAX_SIDEBAR_WIDTH}

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -242,9 +242,13 @@ function TraceDetailsV3(): JSX.Element {
 		() =>
 			(getLocalStorageKey(
 				LOCALSTORAGE.TRACE_DETAILS_SPAN_DETAILS_POSITION,
-			) as SpanDetailVariant) || SpanDetailVariant.DIALOG,
+			) as SpanDetailVariant) || SpanDetailVariant.DOCKED_RIGHT,
 	);
 
+	const RIGHT_DOCK_MIN = 480;
+	const RIGHT_DOCK_MAX = 720;
+	const [rightDockWidth, setRightDockWidth] = useState(RIGHT_DOCK_MIN);
+
 	const handleVariantChange = useCallback(
 		(newVariant: SpanDetailVariant): void => {
 			setLocalStorageKey(
@@ -291,7 +295,9 @@ function TraceDetailsV3(): JSX.Element {
 		(!!errorFetchingTraceData || !traceData?.payload?.spans?.length);
 
 	const isDocked = spanDetailVariant === SpanDetailVariant.DOCKED;
+	const isRightDocked = spanDetailVariant === SpanDetailVariant.DOCKED_RIGHT;
 	const isWaterfallDocked = panelState.isOpen && isDocked;
+	const showRightDock = panelState.isOpen && isRightDocked;
 
 	const waterfallChildren = (
 		<ResizableBox
@@ -332,94 +338,118 @@ function TraceDetailsV3(): JSX.Element {
 					<NoData />
 				) : (
 					<>
-						<div className={styles.content}>
-							<Collapse
-								// @ts-expect-error motion is passed through to rc-collapse to disable animation
-								motion={false}
-								activeKey={activeKeys.filter((k) => k === 'flame')}
-								onChange={(): void => handleCollapseChange('flame')}
-								size="small"
-								className={styles.flameCollapse}
-								items={[
-									{
-										key: 'flame',
-										label: (
-											<div className={styles.collapseLabel}>
-												<span className={styles.collapseTitle}>
-													Flame Graph
-													{traceData?.payload?.totalSpansCount &&
-														traceData.payload.totalSpansCount > FLAMEGRAPH_SPAN_LIMIT && (
-															<WarningPopover
-																message="The total span count exceeds the visualization limit. Displaying a sampled subset of spans in flamegraph."
-																placement="bottomLeft"
-															/>
-														)}
-												</span>
-												{traceData?.payload?.totalSpansCount ? (
-													<span className={styles.collapseCount}>
-														<span className={styles.collapseCountItem}>
-															<ChartNoAxesGantt size={13} />
-															Spans: {traceData.payload.totalSpansCount}
-														</span>
-														<span
-															className={cx(styles.collapseCountItem, {
-																[styles.hasErrors]: traceData.payload.totalErrorSpansCount > 0,
-															})}
-														>
-															<TriangleAlert size={13} />
-															Errors: {traceData.payload.totalErrorSpansCount ?? 0}
-														</span>
+						<div className={styles.layoutRow}>
+							<div className={styles.content}>
+								<Collapse
+									// @ts-expect-error motion is passed through to rc-collapse to disable animation
+									motion={false}
+									activeKey={activeKeys.filter((k) => k === 'flame')}
+									onChange={(): void => handleCollapseChange('flame')}
+									size="small"
+									className={styles.flameCollapse}
+									items={[
+										{
+											key: 'flame',
+											label: (
+												<div className={styles.collapseLabel}>
+													<span className={styles.collapseTitle}>
+														Flame Graph
+														{traceData?.payload?.totalSpansCount &&
+															traceData.payload.totalSpansCount > FLAMEGRAPH_SPAN_LIMIT && (
+																<WarningPopover
+																	message="The total span count exceeds the visualization limit. Displaying a sampled subset of spans in flamegraph."
+																	placement="bottomLeft"
+																/>
+															)}
 													</span>
-												) : null}
-											</div>
-										),
-										children: (
-											<ResizableBox defaultHeight={300} minHeight={100} maxHeight={400}>
-												<TraceFlamegraph
-													filteredSpanIds={filteredSpanIds}
-													isFilterActive={isFilterActive}
-													selectedSpan={selectedSpan}
-													totalSpansCount={totalSpansCount}
-												/>
-											</ResizableBox>
-										),
-									},
-								]}
-							/>
+													{traceData?.payload?.totalSpansCount ? (
+														<span className={styles.collapseCount}>
+															<span className={styles.collapseCountItem}>
+																<ChartNoAxesGantt size={13} />
+																Spans: {traceData.payload.totalSpansCount}
+															</span>
+															<span
+																className={cx(styles.collapseCountItem, {
+																	[styles.hasErrors]: traceData.payload.totalErrorSpansCount > 0,
+																})}
+															>
+																<TriangleAlert size={13} />
+																Errors: {traceData.payload.totalErrorSpansCount ?? 0}
+															</span>
+														</span>
+													) : null}
+												</div>
+											),
+											children: (
+												<ResizableBox defaultHeight={300} minHeight={100} maxHeight={400}>
+													<TraceFlamegraph
+														filteredSpanIds={filteredSpanIds}
+														isFilterActive={isFilterActive}
+														selectedSpan={selectedSpan}
+														totalSpansCount={totalSpansCount}
+													/>
+												</ResizableBox>
+											),
+										},
+									]}
+								/>
 
-							<Collapse
-								// @ts-expect-error motion is passed through to rc-collapse to disable animation
-								motion={false}
-								activeKey={activeKeys.filter((k) => k === 'waterfall')}
-								onChange={(): void => handleCollapseChange('waterfall')}
-								size="small"
-								className={cx(styles.waterfallCollapse, {
-									[styles.isDocked]: isWaterfallDocked,
-								})}
-								items={[
-									{
-										key: 'waterfall',
-										label: 'Waterfall',
-										children: activeKeys.includes('waterfall') ? waterfallChildren : null,
-									},
-								]}
-							/>
+								<Collapse
+									// @ts-expect-error motion is passed through to rc-collapse to disable animation
+									motion={false}
+									activeKey={activeKeys.filter((k) => k === 'waterfall')}
+									onChange={(): void => handleCollapseChange('waterfall')}
+									size="small"
+									className={cx(styles.waterfallCollapse, {
+										[styles.isDocked]: isWaterfallDocked,
+									})}
+									items={[
+										{
+											key: 'waterfall',
+											label: 'Waterfall',
+											children: activeKeys.includes('waterfall')
+												? waterfallChildren
+												: null,
+										},
+									]}
+								/>
 
-							{panelState.isOpen && isDocked && (
-								<div className={styles.dockedSpanDetails}>
+								{panelState.isOpen && isDocked && (
+									<div className={styles.dockedSpanDetails}>
+										<SpanDetailsPanel
+											panelState={panelState}
+											selectedSpan={selectedSpan}
+											variant={SpanDetailVariant.DOCKED}
+											onVariantChange={handleVariantChange}
+											traceStartTime={traceData?.payload?.startTimestampMillis}
+											traceEndTime={traceData?.payload?.endTimestampMillis}
+										/>
+									</div>
+								)}
+							</div>
+
+							{showRightDock && (
+								<ResizableBox
+									handle="left"
+									defaultWidth={rightDockWidth}
+									minWidth={RIGHT_DOCK_MIN}
+									maxWidth={RIGHT_DOCK_MAX}
+									onResize={setRightDockWidth}
+									className={styles.rightDock}
+								>
 									<SpanDetailsPanel
 										panelState={panelState}
 										selectedSpan={selectedSpan}
-										variant={SpanDetailVariant.DOCKED}
+										variant={SpanDetailVariant.DOCKED_RIGHT}
 										onVariantChange={handleVariantChange}
 										traceStartTime={traceData?.payload?.startTimestampMillis}
 										traceEndTime={traceData?.payload?.endTimestampMillis}
 									/>
-								</div>
+								</ResizableBox>
 							)}
 						</div>
 
-						{panelState.isOpen && !isDocked && (
+						{panelState.isOpen && spanDetailVariant === SpanDetailVariant.DIALOG && (
 							<SpanDetailsPanel
 								panelState={panelState}
 								selectedSpan={selectedSpan}

frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStep.tsx

@@ -1,6 +1,13 @@
 import { useMemo, useState } from 'react';
-import { Button, Divider, Form, Space, Tooltip } from 'antd';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import {
+	Button,
+	Divider,
+	Dropdown,
+	Form,
+	MenuProps,
+	Space,
+	Tooltip,
+} from 'antd';
 import { Switch } from '@signozhq/ui/switch';
 import cx from 'classnames';
 import { FilterSelect } from 'components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions';
@@ -37,22 +44,16 @@ function FunnelStep({
 	const [isAddDetailsModalOpen, setIsAddDetailsModalOpen] =
 		useState<boolean>(false);
 
-	const latencyPointerItems: MenuItem[] = [
-		{
-			type: 'radio-group',
-			value: stepData.latency_pointer,
-			onChange: (value): void =>
-				onStepChange(index, {
-					latency_pointer: value as FunnelStepData['latency_pointer'],
-				}),
-			children: LatencyPointers.map((option) => ({
-				type: 'radio',
-				key: option.value,
-				label: option.key,
-				value: option.value,
-			})),
-		},
-	];
+	const latencyPointerItems: MenuProps['items'] = LatencyPointers.map(
+		(option) => ({
+			key: option.value,
+			label: option.key,
+			style:
+				option.value === stepData.latency_pointer
+					? { backgroundColor: 'var(--bg-slate-100)' }
+					: {},
+		}),
+	);
 
 	const updatedCurrentQuery = useMemo(
 		() => ({
@@ -210,18 +211,17 @@ function FunnelStep({
 					</div>
 					<div className="latency-pointer">
 						<div className="latency-pointer__label">Latency pointer</div>
-						{hasEditPermission ? (
-							<DropdownMenuSimple menu={{ items: latencyPointerItems }}>
-								<Space>
-									{
-										LatencyPointers.find(
-											(option) => option.value === stepData.latency_pointer,
-										)?.key
-									}
-									<ChevronDown size={14} color="var(--bg-vanilla-400)" />
-								</Space>
-							</DropdownMenuSimple>
-						) : (
+						<Dropdown
+							menu={{
+								items: latencyPointerItems,
+								onClick: ({ key }): void =>
+									onStepChange(index, {
+										latency_pointer: key as FunnelStepData['latency_pointer'],
+									}),
+							}}
+							trigger={['click']}
+							disabled={!hasEditPermission}
+						>
 							<Space>
 								{
 									LatencyPointers.find(
@@ -230,7 +230,7 @@ function FunnelStep({
 								}
 								<ChevronDown size={14} color="var(--bg-vanilla-400)" />
 							</Space>
-						)}
+						</Dropdown>
 					</div>
 				</div>
 			</Form>

frontend/src/periscope/components/ResizableBox/ResizableBox.styles.scss

@@ -23,20 +23,36 @@
 			background: var(--primary);
 		}
 
-		&--vertical {
-			bottom: 0;
+		&--top,
+		&--bottom {
 			left: 0;
 			right: 0;
 			height: 1px;
 			cursor: row-resize;
 		}
 
-		&--horizontal {
-			right: 0;
+		&--left,
+		&--right {
 			top: 0;
 			bottom: 0;
 			width: 1px;
 			cursor: col-resize;
 		}
+
+		&--top {
+			top: 0;
+		}
+
+		&--bottom {
+			bottom: 0;
+		}
+
+		&--left {
+			left: 0;
+		}
+
+		&--right {
+			right: 0;
+		}
 	}
 }