chore: add avatar to no-antd components

* feat: update routing and permissions for AI Assistant feature

* feat: ai assistant routing, mid-execution auth recovery

* chore: remove local overrides

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.

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.125.1
+    image: signoz/signoz:v0.126.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.125.1
+    image: signoz/signoz:v0.126.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.125.1}
+    image: signoz/signoz:${VERSION:-v0.126.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.125.1}
+    image: signoz/signoz:${VERSION:-v0.126.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -18948,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/package.json

@@ -50,7 +50,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.22",
+    "@signozhq/ui": "0.0.23",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

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

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

frontend/pnpm-lock.yaml

@@ -77,8 +77,8 @@ importers:
         specifier: 0.0.2
         version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/ui':
-        specifier: 0.0.22
-        version: 0.0.22(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.23
+        version: 0.0.23(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3279,8 +3279,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.22':
-    resolution: {integrity: sha512-CJDyA4H+uXG/U2/d7/nRMNY6WIW0YWc843mfzUQALjm+xOhbO4T+qt67THjV4s1wTMs1cZLkmScbMddf+hXLIQ==}
+  '@signozhq/ui@0.0.23':
+    resolution: {integrity: sha512-JqIYlVHksPf07rLGWm1mgV+qpaTFfXIrXUdW0YsDN57wnW5Mu2TaMcertegJVJz/XK/sWcUVVCGXwmx1F//wqQ==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -12041,7 +12041,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@signozhq/ui@0.0.22(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.23(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@chenglou/pretext': 0.0.5
       '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

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/Private.tsx

@@ -102,7 +102,11 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return <>{children}</>;
 	}
 
-	if (pathname.startsWith('/ai-assistant/') && !isAIAssistantEnabled) {
+	if (
+		(pathname === ROUTES.AI_ASSISTANT_BASE ||
+			pathname.startsWith('/ai-assistant/')) &&
+		!isAIAssistantEnabled
+	) {
 		return <Redirect to={ROUTES.HOME} />;
 	}
 

frontend/src/AppRoutes/index.tsx

@@ -229,18 +229,18 @@ function App(): JSX.Element {
 		}
 
 		setRoutes((prev) => {
-			const hasAi = prev.some((r) => r.path === ROUTES.AI_ASSISTANT);
+			const hasAi = prev.some((r) => r.key === 'AI_ASSISTANT');
 			if (isAIAssistantEnabled === hasAi) {
 				return prev;
 			}
 			if (isAIAssistantEnabled) {
-				const aiRoute = defaultRoutes.find((r) => r.path === ROUTES.AI_ASSISTANT);
+				const aiRoute = defaultRoutes.find((r) => r.key === 'AI_ASSISTANT');
 				if (!aiRoute) {
 					return prev;
 				}
-				return [...prev.filter((r) => r.path !== ROUTES.AI_ASSISTANT), aiRoute];
+				return [...prev.filter((r) => r.key !== 'AI_ASSISTANT'), aiRoute];
 			}
-			return prev.filter((r) => r.path !== ROUTES.AI_ASSISTANT);
+			return prev.filter((r) => r.key !== 'AI_ASSISTANT');
 		});
 	}, [isLoggedInState, isAIAssistantEnabled]);
 
@@ -254,6 +254,7 @@ function App(): JSX.Element {
 		if (
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
+			pathname === '/ai-assistant' ||
 			pathname.startsWith('/ai-assistant/')
 		) {
 			window.Pylon?.('hideChatBubble');

frontend/src/AppRoutes/routes.ts

@@ -501,7 +501,7 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.AI_ASSISTANT,
+		path: [ROUTES.AI_ASSISTANT_BASE, ROUTES.AI_ASSISTANT],
 		exact: true,
 		component: AIAssistantPage,
 		key: 'AI_ASSISTANT',

frontend/src/api/AIAPIInstance.ts

@@ -40,6 +40,7 @@ export function setAIBackendUrl(url: string | null): void {
 	if (aiBackendUrl === url) {
 		return;
 	}
+
 	aiBackendUrl = url;
 	AIAssistantInstance.defaults.baseURL = url ? `${url}${AI_API_PATH}` : '';
 }

frontend/src/api/ai-assistant/sigNozAIAssistantAPI.schemas.ts

@@ -37,6 +37,16 @@ export enum ApplyFilterSignalDTO {
 	traces = 'traces',
 	metrics = 'metrics',
 }
+export enum ApprovalStateDTO {
+	pending = 'pending',
+	approved = 'approved',
+	rejected = 'rejected',
+	superseded = 'superseded',
+}
+export enum ApprovalActionTypeDTO {
+	modify = 'modify',
+	delete = 'delete',
+}
 /**
  * Resolved approval (approved/rejected/superseded) anchored on the assistant message that proposed it. Pending approvals never appear here - they live at the top-level pendingApproval slot.
  */
@@ -63,16 +73,6 @@ export interface ApprovalActionSummaryDTO {
 	resolvedAt: string;
 }
 
-export enum ApprovalActionTypeDTO {
-	modify = 'modify',
-	delete = 'delete',
-}
-export enum ApprovalStateDTO {
-	pending = 'pending',
-	approved = 'approved',
-	rejected = 'rejected',
-	superseded = 'superseded',
-}
 export type ApprovalSummaryDTODiff = { [key: string]: unknown };
 
 export interface ApprovalSummaryDTO {
@@ -139,6 +139,16 @@ export interface CancelRequestDTO {
 	threadId: string;
 }
 
+export enum ExecutionStateDTO {
+	queued = 'queued',
+	running = 'running',
+	awaiting_approval = 'awaiting_approval',
+	awaiting_clarification = 'awaiting_clarification',
+	resumed = 'resumed',
+	completed = 'completed',
+	failed = 'failed',
+	canceled = 'canceled',
+}
 export interface CancelResponseDTO {
 	/**
 	 * @type string
@@ -153,6 +163,13 @@ export type ClarificationFieldDTOOptions = string[] | null;
 
 export type ClarificationFieldDTODefault = string | string[] | null;
 
+export enum ClarificationFieldTypeDTO {
+	text = 'text',
+	number = 'number',
+	select = 'select',
+	multi_select = 'multi_select',
+	boolean = 'boolean',
+}
 export interface ClarificationFieldDTO {
 	/**
 	 * @type string
@@ -175,13 +192,6 @@ export interface ClarificationFieldDTO {
 	default?: ClarificationFieldDTODefault;
 }
 
-export enum ClarificationFieldTypeDTO {
-	text = 'text',
-	number = 'number',
-	select = 'select',
-	multi_select = 'multi_select',
-	boolean = 'boolean',
-}
 export enum ClarificationStateDTO {
 	pending = 'pending',
 	submitted = 'submitted',
@@ -252,178 +262,21 @@ export interface ClarifyResponseDTO {
 	executionId: string;
 }
 
-export type CreateMessageRequestDTOContexts = MessageContextDTO[] | null;
-
-export type CreateMessageRequestDTOForkFromMessageId = string | null;
-
-export interface CreateMessageRequestDTO {
-	/**
-	 * @type string
-	 * @maxLength 20000
-	 * @minLength 1
-	 */
-	content: string;
-	contexts?: CreateMessageRequestDTOContexts;
-	forkFromMessageId?: CreateMessageRequestDTOForkFromMessageId;
-}
-
-export interface CreateMessageResponseDTO {
-	/**
-	 * @type string
-	 * @format uuid
-	 */
-	executionId: string;
-}
-
-export type CreateThreadRequestDTOTitle = string | null;
-
-export interface CreateThreadRequestDTO {
-	title?: CreateThreadRequestDTOTitle;
-}
-
-export interface CreateThreadResponseDTO {
-	/**
-	 * @type string
-	 * @format uuid
-	 */
-	threadId: string;
-}
-
-export type ErrorBodyDTOErrors = ErrorResponseAdditionalDTO[] | null;
-
-export type ErrorBodyDTOUrl = string | null;
-
 /**
- * Inner error object — matches Go ErrorsJSON.
- */
-export interface ErrorBodyDTO {
-	/**
-	 * @type string
-	 * @pattern ^[a-z_]+$
-	 */
-	code: string;
-	/**
-	 * @type string
-	 */
-	message: string;
-	errors?: ErrorBodyDTOErrors;
-	url?: ErrorBodyDTOUrl;
-}
-
-/**
- * Top-level error envelope — matches Go RenderErrorResponse.
- */
-export interface ErrorResponseDTO {
-	/**
-	 * @type string
-	 */
-	status?: string;
-	error: ErrorBodyDTO;
-}
-
-/**
- * Single sub-error entry — matches Go ErrorsResponseerroradditional.
- */
-export interface ErrorResponseAdditionalDTO {
-	/**
-	 * @type string
-	 */
-	message: string;
-}
-
-export enum ExecutionStateDTO {
-	queued = 'queued',
-	running = 'running',
-	awaiting_approval = 'awaiting_approval',
-	awaiting_clarification = 'awaiting_clarification',
-	resumed = 'resumed',
-	completed = 'completed',
-	failed = 'failed',
-	canceled = 'canceled',
-}
-export enum FeedbackRatingDTO {
-	positive = 'positive',
-	negative = 'negative',
-}
-export type FeedbackRequestDTOComment = string | null;
-
-export interface FeedbackRequestDTO {
-	rating: FeedbackRatingDTO;
-	comment?: FeedbackRequestDTOComment;
-}
-
-export interface FeedbackResponseDTO {
-	[key: string]: unknown;
-}
-
-export interface HTTPValidationErrorDTO {
-	/**
-	 * @type array
-	 */
-	detail?: ValidationErrorDTO[];
-}
-
-export const HealthResponseDTOValue = {
-	/**
-	 * @type string
-	 */
-	status: 'ok',
-} as const;
-export type HealthResponseDTO = typeof HealthResponseDTOValue;
-
-export type MessageActionDTOActionMetadataId = string | null;
-
-export type MessageActionDTOResourceType = string | null;
-
-export type MessageActionDTOResourceId = string | null;
-
-export type MessageActionDTOState = string | null;
-
-export type MessageActionDTOInputAnyOf = { [key: string]: unknown };
-
-export type MessageActionDTOInput = MessageActionDTOInputAnyOf | null;
-
-export type MessageActionDTOTooltip = string | null;
-
-export type MessageActionDTOSignal = ApplyFilterSignalDTO | null;
-
-export type MessageActionDTOQueryAnyOf = { [key: string]: unknown };
-
-export type MessageActionDTOQuery = MessageActionDTOQueryAnyOf | null;
-
-export type MessageActionDTOUrl = string | null;
-
-/**
- * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url.
- */
-export interface MessageActionDTO {
-	kind: MessageActionKindDTO;
-	/**
-	 * @type string
-	 */
-	label: string;
-	actionMetadataId?: MessageActionDTOActionMetadataId;
-	resourceType?: MessageActionDTOResourceType;
-	resourceId?: MessageActionDTOResourceId;
-	state?: MessageActionDTOState;
-	input?: MessageActionDTOInput;
-	tooltip?: MessageActionDTOTooltip;
-	signal?: MessageActionDTOSignal;
-	query?: MessageActionDTOQuery;
-	url?: MessageActionDTOUrl;
-}
-
-export enum MessageActionKindDTO {
-	undo = 'undo',
-	revert = 'revert',
-	restore = 'restore',
-	follow_up = 'follow_up',
-	open_resource = 'open_resource',
-	open_docs = 'open_docs',
-	apply_filter = 'apply_filter',
-}
-export enum MessageContentTypeDTO {
-	markdown = 'markdown',
+   * Identifier exposed on the wire for each counter row.
+  
+  Mirrors the ``RateLimitCounterType`` model enum minus the cost
+  counter. The daily-cost limit is enforced internally (Redis
+  counter + 429 from the pre-flight gate) but never surfaced on the
+  customer-facing API: shipping the raw provider cost to tenant users
+  pins our public pricing model to what we pay Anthropic and forecloses
+  markup, per-seat bundling, or tiered pricing. Cost stays internal on
+  ``assistant_executions`` + Redis for billing.
+   */
+export enum CounterTypeNameDTO {
+	hourly_message = 'hourly_message',
+	daily_message = 'daily_message',
+	daily_token = 'daily_token',
 }
 /**
  * "auto" if derived from current page; "mention" if explicitly @-picked.
@@ -482,6 +335,193 @@ export interface MessageContextDTO {
 	metadata?: MessageContextDTOMetadata;
 }
 
+export type CreateMessageRequestDTOContexts = MessageContextDTO[] | null;
+
+export type CreateMessageRequestDTOForkFromMessageId = string | null;
+
+export interface CreateMessageRequestDTO {
+	/**
+	 * @type string
+	 * @maxLength 20000
+	 * @minLength 1
+	 */
+	content: string;
+	contexts?: CreateMessageRequestDTOContexts;
+	forkFromMessageId?: CreateMessageRequestDTOForkFromMessageId;
+}
+
+export interface CreateMessageResponseDTO {
+	/**
+	 * @type string
+	 * @format uuid
+	 */
+	executionId: string;
+}
+
+export type CreateThreadRequestDTOTitle = string | null;
+
+export interface CreateThreadRequestDTO {
+	title?: CreateThreadRequestDTOTitle;
+}
+
+export interface CreateThreadResponseDTO {
+	/**
+	 * @type string
+	 * @format uuid
+	 */
+	threadId: string;
+}
+
+/**
+ * Single sub-error entry — matches Go ErrorsResponseerroradditional.
+ */
+export interface ErrorResponseAdditionalDTO {
+	/**
+	 * @type string
+	 */
+	message: string;
+}
+
+export type ErrorBodyDTOErrors = ErrorResponseAdditionalDTO[] | null;
+
+export type ErrorBodyDTOUrl = string | null;
+
+/**
+ * Inner error object — matches Go ErrorsJSON.
+ */
+export interface ErrorBodyDTO {
+	/**
+	 * @type string
+	 * @pattern ^[a-z_]+$
+	 */
+	code: string;
+	/**
+	 * @type string
+	 */
+	message: string;
+	errors?: ErrorBodyDTOErrors;
+	url?: ErrorBodyDTOUrl;
+}
+
+/**
+ * Top-level error envelope — matches Go RenderErrorResponse.
+ */
+export interface ErrorResponseDTO {
+	/**
+	 * @type string
+	 */
+	status?: string;
+	error: ErrorBodyDTO;
+}
+
+export enum FeedbackRatingDTO {
+	positive = 'positive',
+	negative = 'negative',
+}
+export type FeedbackRequestDTOComment = string | null;
+
+export interface FeedbackRequestDTO {
+	rating: FeedbackRatingDTO;
+	comment?: FeedbackRequestDTOComment;
+}
+
+export interface FeedbackResponseDTO {
+	[key: string]: unknown;
+}
+
+export type ValidationErrorDTOLocItem = string | number;
+
+export type ValidationErrorDTOCtx = { [key: string]: unknown };
+
+export interface ValidationErrorDTO {
+	/**
+	 * @type array
+	 */
+	loc: ValidationErrorDTOLocItem[];
+	/**
+	 * @type string
+	 */
+	msg: string;
+	/**
+	 * @type string
+	 */
+	type: string;
+	input?: unknown;
+	/**
+	 * @type object
+	 */
+	ctx?: ValidationErrorDTOCtx;
+}
+
+export interface HTTPValidationErrorDTO {
+	/**
+	 * @type array
+	 */
+	detail?: ValidationErrorDTO[];
+}
+
+export const HealthResponseDTOValue = {
+	/**
+	 * @type string
+	 */
+	status: 'ok',
+} as const;
+export type HealthResponseDTO = typeof HealthResponseDTOValue;
+
+export type MessageActionDTOActionMetadataId = string | null;
+
+export type MessageActionDTOResourceType = string | null;
+
+export type MessageActionDTOResourceId = string | null;
+
+export type MessageActionDTOState = string | null;
+
+export type MessageActionDTOInputAnyOf = { [key: string]: unknown };
+
+export type MessageActionDTOInput = MessageActionDTOInputAnyOf | null;
+
+export type MessageActionDTOTooltip = string | null;
+
+export type MessageActionDTOSignal = ApplyFilterSignalDTO | null;
+
+export type MessageActionDTOQueryAnyOf = { [key: string]: unknown };
+
+export type MessageActionDTOQuery = MessageActionDTOQueryAnyOf | null;
+
+export type MessageActionDTOUrl = string | null;
+
+export enum MessageActionKindDTO {
+	undo = 'undo',
+	revert = 'revert',
+	restore = 'restore',
+	follow_up = 'follow_up',
+	open_resource = 'open_resource',
+	open_docs = 'open_docs',
+	apply_filter = 'apply_filter',
+}
+/**
+ * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url.
+ */
+export interface MessageActionDTO {
+	kind: MessageActionKindDTO;
+	/**
+	 * @type string
+	 */
+	label: string;
+	actionMetadataId?: MessageActionDTOActionMetadataId;
+	resourceType?: MessageActionDTOResourceType;
+	resourceId?: MessageActionDTOResourceId;
+	state?: MessageActionDTOState;
+	input?: MessageActionDTOInput;
+	tooltip?: MessageActionDTOTooltip;
+	signal?: MessageActionDTOSignal;
+	query?: MessageActionDTOQuery;
+	url?: MessageActionDTOUrl;
+}
+
+export enum MessageContentTypeDTO {
+	markdown = 'markdown',
+}
 export enum MessageRoleDTO {
 	user = 'user',
 	assistant = 'assistant',
@@ -616,6 +656,10 @@ export interface RevertRequestDTO {
 	actionMetadataId: string;
 }
 
+export enum ScopeDTO {
+	user = 'user',
+	org = 'org',
+}
 export type ThreadDetailResponseDTOTitle = string | null;
 
 export type ThreadDetailResponseDTOState = ExecutionStateDTO | null;
@@ -663,18 +707,6 @@ export interface ThreadDetailResponseDTO {
 
 export type ThreadListResponseDTONextCursor = string | null;
 
-export interface ThreadListResponseDTO {
-	/**
-	 * @type array
-	 */
-	threads: ThreadSummaryDTO[];
-	nextCursor?: ThreadListResponseDTONextCursor;
-	/**
-	 * @type boolean
-	 */
-	hasMore?: boolean;
-}
-
 export type ThreadSummaryDTOTitle = string | null;
 
 export type ThreadSummaryDTOState = ExecutionStateDTO | null;
@@ -709,6 +741,18 @@ export interface ThreadSummaryDTO {
 	updatedAt: string;
 }
 
+export interface ThreadListResponseDTO {
+	/**
+	 * @type array
+	 */
+	threads: ThreadSummaryDTO[];
+	nextCursor?: ThreadListResponseDTONextCursor;
+	/**
+	 * @type boolean
+	 */
+	hasMore?: boolean;
+}
+
 export interface UndoRequestDTO {
 	/**
 	 * @type string
@@ -726,28 +770,29 @@ export interface UpdateThreadRequestDTO {
 	archived?: UpdateThreadRequestDTOArchived;
 }
 
-export type ValidationErrorDTOLocItem = string | number;
+export type UsageResponseDTONextPage = string | null;
 
-export type ValidationErrorDTOCtx = { [key: string]: unknown };
+/**
+ * One row in the ``GET /usage`` response.
+ */
+export interface UsageRowDTO {
+	type: CounterTypeNameDTO;
+	scope: ScopeDTO;
+	used: number;
+	limit: number;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	resetsAt: string;
+}
 
-export interface ValidationErrorDTO {
+export interface UsageResponseDTO {
 	/**
 	 * @type array
 	 */
-	loc: ValidationErrorDTOLocItem[];
-	/**
-	 * @type string
-	 */
-	msg: string;
-	/**
-	 * @type string
-	 */
-	type: string;
-	input?: unknown;
-	/**
-	 * @type object
-	 */
-	ctx?: ValidationErrorDTOCtx;
+	data: UsageRowDTO[];
+	nextPage?: UsageResponseDTONextPage;
 }
 
 export type ApprovalEventDTODiff = { [key: string]: unknown };
@@ -909,6 +954,20 @@ export interface ErrorEventDTO {
 	retryAction?: RetryActionDTO;
 }
 
+/**
+   * Per-connection SSE keep-alive emitted every `sse_heartbeat_interval_seconds`.
+  
+  Carries no `executionId` and no `eventId` — heartbeats are wire-level
+  keep-alives, not part of the replayable event log.
+   */
+export const HeartbeatEventDTOValue = {
+	/**
+	 * @type string
+	 */
+	type: 'heartbeat',
+} as const;
+export type HeartbeatEventDTO = typeof HeartbeatEventDTOValue;
+
 export type MessageActionEventDTOActionMetadataId = string | null;
 
 export type MessageActionEventDTOResourceType = string | null;
@@ -1315,3 +1374,14 @@ export type SubmitFeedbackApiV1AssistantMessagesMessageIdFeedbackPostHeaders = {
 	 */
 	'X-SigNoz-URL'?: string | null;
 };
+
+export type GetUsageApiV1AssistantUsageGetHeaders = {
+	/**
+	 * @description SigNoz auth token (Bearer or raw JWT)
+	 */
+	authorization?: string | null;
+	/**
+	 * @description SigNoz instance base URL for multi-tenant deployments. Falls back to SIGNOZ_API_URL env var when omitted.
+	 */
+	'X-SigNoz-URL'?: string | null;
+};

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

@@ -9232,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/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/routes.ts

@@ -88,6 +88,7 @@ const ROUTES = {
 	PUBLIC_DASHBOARD: '/public/dashboard/:dashboardId',
 	SERVICE_ACCOUNTS_SETTINGS: '/settings/service-accounts',
 	AI_ASSISTANT: '/ai-assistant/:conversationId',
+	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
 } as const;

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/MessageBubble/MessageBubble.tsx

@@ -178,7 +178,7 @@ export default function MessageBubble({
 					</div>
 				</div>
 
-				{!isUser && (
+				{!isUser && !message.isRateLimitError && (
 					<MessageFeedback
 						message={message}
 						onRegenerate={onRegenerate}

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/AIAssistant/store/useAIAssistantStore.ts

@@ -1,10 +1,12 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+import axios from 'axios';
 import { v4 as uuidv4 } from 'uuid';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 
 import type {
+	ErrorResponseDTO,
 	MessageActionDTO,
 	MessageSummaryDTOBlocksAnyOfItem,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
@@ -21,7 +23,6 @@ import {
 	regenerateMessage,
 	rejectExecution,
 	sendMessage as sendMessageToThread,
-	SSEStreamError,
 	streamEvents,
 	submitFeedback,
 	ThreadSummary,
@@ -193,13 +194,75 @@ function resetStreamingState(
 	};
 }
 
+/**
+ * Marker thrown by `runStreamingLoop` when an SSE event reports
+ * `invalid_token`. Callers that own an originating action (sendMessage /
+ * approve / clarify / regenerate) catch this and re-issue that action via
+ * `streamWithAuthRetry`; the retry's first REST call will 401, at which point
+ * the shared axios `interceptorRejected` rotates the access token and replays.
+ */
+class AuthExpiredError extends Error {
+	constructor() {
+		super('Access token expired during execution');
+		this.name = 'AuthExpiredError';
+	}
+}
+
+/**
+ * Runs the originating action (e.g. sendMessage POST) and streams the
+ * resulting execution. On `AuthExpiredError`, re-issues `start` once — the
+ * retry's REST call hits 401, the shared axios interceptor rotates the
+ * access token and replays, and the new SSE picks up the rotated token from
+ * localStorage. Backend signals `retryAction: 'manual'` for `invalid_token`,
+ * so the dead execution can't be resumed — only a fresh one helps.
+ */
+async function streamWithAuthRetry(
+	conversationId: string,
+	start: () => Promise<string>,
+	set: StoreSetter,
+): Promise<void> {
+	for (let attempt = 0; attempt <= 1; attempt += 1) {
+		if (attempt > 0) {
+			// Drop any partial content/events from the previous attempt so the
+			// retried execution's stream isn't concatenated with the dead one.
+			set((s) => {
+				resetStreamingState(s, conversationId);
+			});
+		}
+		// eslint-disable-next-line no-await-in-loop
+		const executionId = await start();
+		const ctrl = newStreamController(conversationId);
+		try {
+			// eslint-disable-next-line no-await-in-loop
+			await runStreamingLoop(executionId, {
+				conversationId,
+				set,
+				signal: ctrl.signal,
+			});
+			streamControllers.delete(conversationId);
+			return;
+		} catch (err) {
+			streamControllers.delete(conversationId);
+			if (err instanceof AuthExpiredError && attempt < 1) {
+				continue;
+			}
+			throw err;
+		}
+	}
+}
+
 /**
  * Runs one SSE execution stream, updating the per-conversation stream state.
  *
  * Breaks early and sets pendingApproval / pendingClarification when the
  * agent needs user input before it can continue.
  *
- * Throws on `error` events — the caller's catch block handles UI feedback.
+ * On an `invalid_token` error event (e.g. MCP auth expired mid-execution),
+ * throws `AuthExpiredError` so the caller can re-issue the originating
+ * action via `streamWithAuthRetry`. We don't refresh here ourselves — the
+ * retry's REST call will 401 and the shared axios `interceptorRejected`
+ * handles rotation + replay. Throws on any other `error` event — the
+ * caller's catch block handles UI feedback.
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 async function runStreamingLoop(
@@ -325,6 +388,15 @@ async function runStreamingLoop(
 			});
 			break;
 		} else if (event.type === 'error') {
+			// MCP/SigNoz auth expired mid-execution — signal the caller to
+			// re-issue the originating action. The retry's REST call will hit
+			// 401 and the shared axios `interceptorRejected` will rotate the
+			// access token + replay, so we don't refresh here ourselves.
+			// (Backend sets `retryAction: 'manual'`, so the failed execution
+			// can't itself be resumed — only a fresh one helps.)
+			if (event.error.code === 'invalid_token') {
+				throw new AuthExpiredError();
+			}
 			throw Object.assign(new Error(event.error.message), {
 				retryAction: event.retryAction,
 			});
@@ -412,13 +484,41 @@ function hasPendingInput(conversationId: string, get: StoreGetter): boolean {
 	return Boolean(stream?.pendingApproval || stream?.pendingClarification);
 }
 
+function parseErrorBody(value: unknown): string | null {
+	if (typeof value === 'string') {
+		try {
+			return parseErrorBody(JSON.parse(value));
+		} catch {
+			return null;
+		}
+	}
+	const message = (value as ErrorResponseDTO | undefined)?.error?.message;
+	return typeof message === 'string' && message.length > 0 ? message : null;
+}
+
 /**
- * Commits an error message and removes the stream entry.
+ * Returns the backend's `error.message` when `err` is a 429 axios response
+ * (typically from the threads API surface — createThread, sendMessage, approve,
+ * clarify, regenerate). Returns null for any other error so callers fall
+ * through to their generic copy.
+ */
+function rateLimitMessage(err: unknown): string | null {
+	if (axios.isAxiosError(err) && err.response?.status === 429) {
+		return parseErrorBody(err.response.data);
+	}
+	return null;
+}
+
+/**
+ * Commits an error message and removes the stream entry. When `isRateLimit`
+ * is true, the committed message is flagged so the feedback/regenerate bar
+ * is hidden — clicking regenerate would just 429 again.
  */
 function finalizeStreamingError(
 	conversationId: string,
 	errorContent: string,
 	set: StoreSetter,
+	isRateLimit = false,
 ): void {
 	set((s) => {
 		const conv = s.conversations[conversationId];
@@ -428,6 +528,7 @@ function finalizeStreamingError(
 				role: 'assistant',
 				content: errorContent,
 				createdAt: Date.now(),
+				...(isRateLimit ? { isRateLimitError: true } : {}),
 			});
 			conv.updatedAt = Date.now();
 		}
@@ -801,7 +902,12 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					});
 
 					// Reconnect to SSE if backend execution is still running
-					// and we don't already have an active SSE reader for this thread
+					// and we don't already have an active SSE reader for this
+					// thread. No auth-retry wrapper here: on `invalid_token`
+					// there's no "originating action" to redo — reopening the
+					// same dead executionId would just re-emit the failure.
+					// Let the error bubble; the user can send a new message,
+					// which will go through `streamWithAuthRetry`.
 					if (
 						detail.activeExecutionId &&
 						!streamControllers.has(threadId) &&
@@ -1052,14 +1158,12 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 							}
 						});
 					}
-					const executionId = await sendMessageToThread(threadId, text, contexts);
-					const ctrl = newStreamController(convId);
-					await runStreamingLoop(executionId, {
-						conversationId: convId,
+					const tid = threadId;
+					await streamWithAuthRetry(
+						convId,
+						() => sendMessageToThread(tid, text, contexts),
 						set,
-						signal: ctrl.signal,
-					});
-					streamControllers.delete(convId);
+					);
 
 					if (!hasPendingInput(convId, get)) {
 						finalizeStreamingMessage(convId, set, get);
@@ -1070,11 +1174,14 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] sendMessage failed:', err);
-					const message =
-						err instanceof SSEStreamError && err.status === 429
-							? 'You sent that a bit too quickly. Please wait a moment and try again.'
-							: 'Something went wrong while fetching the response. Please try again.';
-					finalizeStreamingError(convId, message, set);
+					const rateLimit = rateLimitMessage(err);
+					finalizeStreamingError(
+						convId,
+						rateLimit ??
+							'Something went wrong while fetching the response. Please try again.',
+						set,
+						rateLimit !== null,
+					);
 				}
 			},
 
@@ -1094,14 +1201,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				});
 
 				try {
-					const executionId = await approveExecution(approvalId);
-					const ctrl = newStreamController(conversationId);
-					await runStreamingLoop(executionId, {
+					await streamWithAuthRetry(
 						conversationId,
+						() => approveExecution(approvalId),
 						set,
-						signal: ctrl.signal,
-					});
-					streamControllers.delete(conversationId);
+					);
 					if (!hasPendingInput(conversationId, get)) {
 						finalizeStreamingMessage(conversationId, set, get);
 					}
@@ -1110,10 +1214,13 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] approveAction failed:', err);
+					const rateLimit = rateLimitMessage(err);
 					finalizeStreamingError(
 						conversationId,
-						'Something went wrong while processing the approval. Please try again.',
+						rateLimit ??
+							'Something went wrong while processing the approval. Please try again.',
 						set,
+						rateLimit !== null,
 					);
 				}
 			},
@@ -1176,14 +1283,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				});
 
 				try {
-					const executionId = await regenerateMessage(messageId);
-					const ctrl = newStreamController(conversationId);
-					await runStreamingLoop(executionId, {
+					await streamWithAuthRetry(
 						conversationId,
+						() => regenerateMessage(messageId),
 						set,
-						signal: ctrl.signal,
-					});
-					streamControllers.delete(conversationId);
+					);
 					if (!hasPendingInput(conversationId, get)) {
 						finalizeStreamingMessage(conversationId, set, get);
 					}
@@ -1192,10 +1296,13 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] regenerateAssistantMessage failed:', err);
+					const rateLimit = rateLimitMessage(err);
 					finalizeStreamingError(
 						conversationId,
-						'Something went wrong while regenerating the response. Please try again.',
+						rateLimit ??
+							'Something went wrong while regenerating the response. Please try again.',
 						set,
+						rateLimit !== null,
 					);
 				}
 			},
@@ -1245,14 +1352,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				});
 
 				try {
-					const executionId = await clarifyExecution(clarificationId, answers);
-					const ctrl = newStreamController(conversationId);
-					await runStreamingLoop(executionId, {
+					await streamWithAuthRetry(
 						conversationId,
+						() => clarifyExecution(clarificationId, answers),
 						set,
-						signal: ctrl.signal,
-					});
-					streamControllers.delete(conversationId);
+					);
 					if (!hasPendingInput(conversationId, get)) {
 						finalizeStreamingMessage(conversationId, set, get);
 					}
@@ -1261,10 +1365,13 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] submitClarification failed:', err);
+					const rateLimit = rateLimitMessage(err);
 					finalizeStreamingError(
 						conversationId,
-						'Something went wrong while processing your answers. Please try again.',
+						rateLimit ??
+							'Something went wrong while processing your answers. Please try again.',
 						set,
+						rateLimit !== null,
 					);
 				}
 			},

frontend/src/container/AIAssistant/types.ts

@@ -86,6 +86,11 @@ export interface Message {
 	actions?: MessageActionDTO[];
 	/** Persisted feedback rating — set after user votes and the API confirms. */
 	feedbackRating?: FeedbackRating | null;
+	/**
+	 * Set on client-side rate-limit error messages so the feedback/regenerate
+	 * bar (copy/vote/regenerate) is hidden — retrying would just 429 again.
+	 */
+	isRateLimitError?: boolean;
 	createdAt: number;
 }
 

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/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/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/TypeSelect.tsx

@@ -15,7 +15,7 @@ function TypeSelect({ onChange, value }: TypeSelectProps): JSX.Element {
 
 	return (
 		<ProcessorTypeWrapper>
-			<PipelineIndexIcon size="small">1</PipelineIndexIcon>
+			<PipelineIndexIcon>1</PipelineIndexIcon>
 			<ProcessorTypeContainer>
 				<ProcessorType>{t('processor_type')}</ProcessorType>
 				<StyledSelect

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

@@ -76,9 +76,7 @@ function ProcessorFieldInput({
 			}
 		>
 			{!fieldData?.compact && (
-				<PipelineIndexIcon size="small">
-					{Number(fieldData.id) + 1}
-				</PipelineIndexIcon>
+				<PipelineIndexIcon>{Number(fieldData.id) + 1}</PipelineIndexIcon>
 			)}
 			<FormWrapper>
 				{fieldData.name === 'enable_flattening' ? (

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

@@ -1,14 +1,15 @@
-import { Avatar, Select } from 'antd';
-import { themeColors } from 'constants/theme';
+import { ReactNode } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Select } from 'antd';
 import styled from 'styled-components';
 
-export const PipelineIndexIcon = styled(Avatar)`
-	background-color: ${themeColors.navyBlue};
-	height: 1.5rem;
-	width: 1.5rem;
-	font-size: 0.875rem;
-	line-height: 1.375rem;
-`;
+export function PipelineIndexIcon({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	return <Badge color="robin">{children}</Badge>;
+}
 
 export const ProcessorTypeWrapper = styled.div`
 	display: flex;

frontend/src/container/PipelinePage/PipelineListsView/styles.tsx

@@ -1,4 +1,6 @@
-import { Avatar, Button, Table, TableProps } from 'antd';
+import { ReactNode } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Button, Table, TableProps } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { themeColors } from 'constants/theme';
 import { StyledCSS } from 'container/GantChart/Trace/styles';
@@ -34,14 +36,13 @@ export const ListDataStyle = styled.div`
 	line-height: 1.25rem;
 `;
 
-export const ProcessorIndexIcon = styled(Avatar)`
-	background-color: ${themeColors.navyBlue};
-	height: 1rem;
-	width: 1rem;
-	font-size: 0.75rem;
-	line-height: 0.813rem;
-	font-weight: 400;
-`;
+export function ProcessorIndexIcon({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	return <Badge color="robin">{children}</Badge>;
+}
 
 export const StyledTable: React.FC<TableProps<any> & { isDarkMode: boolean }> =
 	styled(Table)`

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

@@ -2,7 +2,7 @@
 
 exports[`PipelinePage should render PipelineExpandView section 1`] = `
 <DocumentFragment>
-  .c2 {
+  .c1 {
   margin: 0.125rem;
   padding: 0.313rem;
   border: none;
@@ -12,15 +12,6 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
   line-height: 1.25rem;
 }
 
-.c1 {
-  background-color: #1668DC;
-  height: 1rem;
-  width: 1rem;
-  font-size: 0.75rem;
-  line-height: 0.813rem;
-  font-weight: 400;
-}
-
 .c0 .ant-table-tbody > tr > td {
   border: none;
 }
@@ -72,14 +63,13 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: right;"
                     >
                       <span
-                        class="ant-avatar ant-avatar-circle c1 css-dev-only-do-not-override-2i2tap"
+                        class="_badge_1etd5_1"
+                        data-capitalize="false"
+                        data-color="robin"
+                        data-slot="badge"
+                        data-variant="default"
                       >
-                        <span
-                          class="ant-avatar-string"
-                          style="transform: scale(1) translateX(-50%);"
-                        >
-                          1
-                        </span>
+                        1
                       </span>
                     </td>
                     <td
@@ -87,7 +77,7 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: left;"
                     >
                       <div
-                        class="c2"
+                        class="c1"
                       >
                         grok use common asd
                       </div>
@@ -103,14 +93,13 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: right;"
                     >
                       <span
-                        class="ant-avatar ant-avatar-circle c1 css-dev-only-do-not-override-2i2tap"
+                        class="_badge_1etd5_1"
+                        data-capitalize="false"
+                        data-color="robin"
+                        data-slot="badge"
+                        data-variant="default"
                       >
-                        <span
-                          class="ant-avatar-string"
-                          style="transform: scale(1) translateX(-50%);"
-                        >
-                          2
-                        </span>
+                        2
                       </span>
                     </td>
                     <td
@@ -118,7 +107,7 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: left;"
                     >
                       <div
-                        class="c2"
+                        class="c1"
                       >
                         rename auth
                       </div>
@@ -134,14 +123,13 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: right;"
                     >
                       <span
-                        class="ant-avatar ant-avatar-circle c1 css-dev-only-do-not-override-2i2tap"
+                        class="_badge_1etd5_1"
+                        data-capitalize="false"
+                        data-color="robin"
+                        data-slot="badge"
+                        data-variant="default"
                       >
-                        <span
-                          class="ant-avatar-string"
-                          style="transform: scale(1) translateX(-50%);"
-                        >
-                          3
-                        </span>
+                        3
                       </span>
                     </td>
                     <td
@@ -149,7 +137,7 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: left;"
                     >
                       <div
-                        class="c2"
+                        class="c1"
                       >
                         json parser
                       </div>

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

@@ -8,6 +8,7 @@ import {
 	FormInstance,
 	Input,
 	Modal,
+	Radio,
 	Select,
 	SelectProps,
 	Spin,
@@ -71,11 +72,14 @@ const TZ_OPTIONS: DefaultOptionType[] = ALL_TIME_ZONES.map(
 	}),
 );
 
+type AlertRuleScope = 'all' | 'specific';
+
 interface PlannedDowntimeFormData {
 	name: string;
 	startTime: dayjs.Dayjs | null;
 	endTime: dayjs.Dayjs | null;
 	recurrence?: AlertmanagertypesRecurrenceDTO;
+	alertRuleScope: AlertRuleScope;
 	alertRules: DefaultOptionType[];
 	recurrenceSelect?: AlertmanagertypesRecurrenceDTO;
 	timezone?: string;
@@ -129,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();
 
@@ -142,9 +152,12 @@ 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: {
@@ -265,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: {
@@ -287,6 +301,7 @@ export function PlannedDowntimeForm(
 
 	useEffect(() => {
 		setSelectedTags(formattedInitialValues.alertRules);
+		setAlertRuleScope(formattedInitialValues.alertRuleScope);
 		form.setFieldsValue({ ...formattedInitialValues });
 	}, [form, formattedInitialValues, initialValues]);
 
@@ -349,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"
@@ -448,49 +464,76 @@ 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={

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/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/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/TraceDetailsHeader/TraceDetailsHeader.module.scss

@@ -8,6 +8,7 @@
 	align-items: center;
 	padding: 8px 16px;
 	gap: 8px;
+	min-height: 52px;
 
 	// KeyValueLabel renders with a global `.key-value-label` root; keep it from
 	// shrinking on the trace details header.
@@ -20,6 +21,28 @@
 	flex-shrink: 0;
 }
 
+.traceIdSection {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
+.filterSection {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	margin-left: auto;
+}
+
+.headerActions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
 .filter {
 	min-width: 0;
 }
@@ -29,15 +52,6 @@
 	flex: 1;
 }
 
-.oldViewBtn {
-	flex-shrink: 0;
-}
-
-.analyticsBtn {
-	flex-shrink: 0;
-	margin-left: auto;
-}
-
 .subHeader {
 	display: flex;
 	align-items: center;

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

@@ -21,6 +21,7 @@ import {
 	ArrowLeft,
 	CalendarClock,
 	ChartPie,
+	CornerUpLeft,
 	Server,
 	Timer,
 } from '@signozhq/icons';
@@ -117,7 +118,7 @@ function TraceDetailsHeader({
 		<div className={styles.wrapper}>
 			<div className={styles.header}>
 				{!isFilterExpanded && (
-					<>
+					<div className={styles.traceIdSection}>
 						<Button
 							variant="solid"
 							color="secondary"
@@ -133,20 +134,39 @@ function TraceDetailsHeader({
 							badgeValue={traceID || ''}
 							maxCharacters={100}
 						/>
-					</>
+					</div>
 				)}
 				{isDataLoaded && (
-					<>
+					<div
+						className={cx(
+							styles.filterSection,
+							isFilterExpanded && styles.isExpanded,
+						)}
+					>
 						{!isFilterExpanded && (
-							<>
-								<TooltipProvider>
+							<TooltipProvider>
+								<div className={styles.headerActions}>
 									<TooltipRoot>
 										<TooltipTrigger asChild>
 											<Button
 												variant="ghost"
 												size="icon"
 												color="secondary"
-												className={styles.analyticsBtn}
+												aria-label="Switch to legacy trace view"
+												onClick={handleSwitchToOldView}
+											>
+												<CornerUpLeft size={14} />
+											</Button>
+										</TooltipTrigger>
+										<TooltipContent>Switch to legacy trace view</TooltipContent>
+									</TooltipRoot>
+									<TooltipRoot>
+										<TooltipTrigger asChild>
+											<Button
+												variant="ghost"
+												size="icon"
+												color="secondary"
+												aria-label="Analytics"
 												onClick={(): void => setIsAnalyticsOpen((prev) => !prev)}
 											>
 												<ChartPie size={14} />
@@ -154,15 +174,18 @@ function TraceDetailsHeader({
 										</TooltipTrigger>
 										<TooltipContent>Analytics</TooltipContent>
 									</TooltipRoot>
-								</TooltipProvider>
-								<TraceOptionsMenu
-									showTraceDetails={showTraceDetails}
-									onToggleTraceDetails={handleToggleTraceDetails}
-									onOpenPreviewFields={(): void => setIsPreviewFieldsOpen(true)}
-								/>
-							</>
+									<TraceOptionsMenu
+										showTraceDetails={showTraceDetails}
+										onToggleTraceDetails={handleToggleTraceDetails}
+										onOpenPreviewFields={(): void => setIsPreviewFieldsOpen(true)}
+									/>
+								</div>
+							</TooltipProvider>
 						)}
-						<div className={cx(styles.filter, isFilterExpanded && styles.isExpanded)}>
+						<div
+							key="filter"
+							className={cx(styles.filter, isFilterExpanded && styles.isExpanded)}
+						>
 							<Filters
 								startTime={filterMetadata.startTime}
 								endTime={filterMetadata.endTime}
@@ -173,18 +196,7 @@ function TraceDetailsHeader({
 								onCollapse={(): void => setIsFilterExpanded(false)}
 							/>
 						</div>
-						{!isFilterExpanded && (
-							<Button
-								variant="solid"
-								color="secondary"
-								size="sm"
-								className={styles.oldViewBtn}
-								onClick={handleSwitchToOldView}
-							>
-								Legacy View
-							</Button>
-						)}
-					</>
+					</div>
 				)}
 			</div>
 

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

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
-import { Ellipsis } from '@signozhq/icons';
+import { Settings2 } from '@signozhq/icons';
 
 import { useTraceStore } from '../stores/traceStore';
 
@@ -93,7 +93,8 @@ function TraceOptionsMenu({
 				variant="ghost"
 				size="icon"
 				color="secondary"
-				prefix={<Ellipsis size={14} />}
+				aria-label="Trace options"
+				prefix={<Settings2 size={14} />}
 			/>
 		</Dropdown>
 	);

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

@@ -6,6 +6,7 @@ import TraceDetailsHeader from '../TraceDetailsHeader';
 
 const mockGoBack = jest.fn();
 const mockPush = jest.fn();
+const mockReplace = jest.fn();
 const mockHasInAppHistory = jest.fn();
 
 jest.mock('lib/history', () => ({
@@ -13,13 +14,47 @@ jest.mock('lib/history', () => ({
 	default: {
 		goBack: (): void => mockGoBack(),
 		push: (path: string): void => mockPush(path),
-		replace: jest.fn(),
+		replace: (path: string): void => mockReplace(path),
 		location: { pathname: '/', search: '' },
 		listen: (): (() => void) => (): void => undefined,
 	},
 	hasInAppHistory: (): boolean => mockHasInAppHistory(),
 }));
 
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useParams: (): { id: string } => ({ id: 'trace-123' }),
+}));
+
+const mockSetLocalStorageKey = jest.fn();
+jest.mock('api/browser/localstorage/set', () => ({
+	__esModule: true,
+	default: (key: string, value: string): void =>
+		mockSetLocalStorageKey(key, value),
+}));
+
+jest.mock(
+	'../../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters',
+	() => ({
+		__esModule: true,
+		default: (): JSX.Element => <div data-testid="filters-stub" />,
+	}),
+);
+
+jest.mock('../../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel', () => ({
+	__esModule: true,
+	default: ({ isOpen }: { isOpen: boolean }): JSX.Element => (
+		<div data-testid="analytics-panel" data-open={isOpen ? 'true' : 'false'} />
+	),
+}));
+
+jest.mock('components/FieldsSelector', () => ({
+	__esModule: true,
+	default: ({ isOpen }: { isOpen: boolean }): JSX.Element => (
+		<div data-testid="fields-selector" data-open={isOpen ? 'true' : 'false'} />
+	),
+}));
+
 const baseProps = {
 	filterMetadata: {
 		startTime: 0,
@@ -58,3 +93,70 @@ describe('TraceDetailsHeader – back button', () => {
 		expect(mockGoBack).not.toHaveBeenCalled();
 	});
 });
+
+describe('TraceDetailsHeader – action cluster', () => {
+	beforeEach(() => {
+		mockReplace.mockClear();
+		mockSetLocalStorageKey.mockClear();
+	});
+
+	it('does not render the action buttons while data is still loading', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded={false} />);
+
+		expect(
+			screen.queryByRole('button', { name: /switch to legacy trace view/i }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /^analytics$/i }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /trace options/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders Legacy View, Analytics, and Settings action buttons once data is loaded', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
+
+		expect(
+			screen.getByRole('button', { name: /switch to legacy trace view/i }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /^analytics$/i }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /trace options/i }),
+		).toBeInTheDocument();
+	});
+
+	it('routes to the legacy trace view and persists the preference on click', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
+
+		fireEvent.click(
+			screen.getByRole('button', { name: /switch to legacy trace view/i }),
+		);
+
+		expect(mockSetLocalStorageKey).toHaveBeenCalledWith(
+			'TRACE_DETAILS_PREFER_OLD_VIEW',
+			'true',
+		);
+		expect(mockReplace).toHaveBeenCalledTimes(1);
+		expect(mockReplace).toHaveBeenCalledWith(
+			expect.stringContaining('/trace-old/trace-123'),
+		);
+	});
+
+	it('toggles the AnalyticsPanel open state when the Analytics button is clicked', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
+
+		const panel = screen.getByTestId('analytics-panel');
+		expect(panel).toHaveAttribute('data-open', 'false');
+
+		const analyticsBtn = screen.getByRole('button', { name: /^analytics$/i });
+
+		fireEvent.click(analyticsBtn);
+		expect(panel).toHaveAttribute('data-open', 'true');
+
+		fireEvent.click(analyticsBtn);
+		expect(panel).toHaveAttribute('data-open', 'false');
+	});
+});

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/Filters/Filters.module.scss

@@ -3,12 +3,6 @@
 	align-items: center;
 	gap: 12px;
 
-	// QuerySearch child sets `query-builder-search-v2` globally; size it to the
-	// search container by reaching into the descendant.
-	:global(.query-builder-search-v2) {
-		width: 100%;
-	}
-
 	// ToggleGroup children use generated class names; nest the global selectors
 	// under the local row so they only apply inside this filter row.
 	:global([class*='toggle-group']) {
@@ -20,8 +14,43 @@
 	}
 }
 
+// Expanded-mode root: grows to fill .filter wrapper, and lets the search
+// input flex within. In collapsed mode none of these grow — the whole
+// Filters region is content-sized (just the pill + result + toggle).
 .isExpanded {
 	flex: 1;
+
+	.searchInput {
+		flex: 1;
+	}
+
+	.searchAndNav {
+		flex: 1;
+	}
+}
+
+.categoryControls {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.searchInput {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+}
+
+.searchPill {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.searchAndNav {
+	display: flex;
+	align-items: center;
+	min-width: 0;
 }
 
 .searchContainer {
@@ -29,6 +58,25 @@
 	min-width: 0;
 }
 
+.resultActions {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex-shrink: 0;
+}
+
+.expandedActions {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.highlightControl {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
 .pill {
 	display: flex;
 	align-items: center;
@@ -85,14 +133,6 @@
 	border-radius: 4px;
 }
 
-.collapseBtn {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: none;
-}
-
 .highlightErrorsToggle {
 	display: flex;
 	align-items: center;
@@ -100,37 +140,3 @@
 	flex-shrink: 0;
 	white-space: nowrap;
 }
-
-.preNextToggle {
-	display: flex;
-	flex-shrink: 0;
-	gap: 12px;
-}
-
-.preNextCount {
-	display: flex;
-	align-items: center;
-	margin: auto;
-	color: var(--l2-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.filterStatus {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	flex-shrink: 0;
-	color: var(--l2-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.hasError {
-	color: var(--destructive);
-	cursor: help;
-}

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

@@ -1,15 +1,7 @@
 import { useCallback, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
-import {
-	ChevronDown,
-	ChevronUp,
-	Copy,
-	Info,
-	Loader,
-	Search,
-	X,
-} from '@signozhq/icons';
+import { ChevronsRight, Copy, Search, X } from '@signozhq/icons';
 import { Switch } from '@signozhq/ui/switch';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { toast } from '@signozhq/ui/sonner';
@@ -21,7 +13,6 @@ import {
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
@@ -42,6 +33,7 @@ import {
 	SpanCategory,
 	useSpanCategoryFilter,
 } from './hooks/useSpanCategoryFilter';
+import QueryResult from './QueryResult';
 
 import styles from './Filters.module.scss';
 
@@ -152,6 +144,16 @@ function Filters({
 		runQuery(expressionRef.current);
 	}, [runQuery]);
 
+	const handleClear = useCallback((): void => {
+		setExpression('');
+		expressionRef.current = '';
+		setFilters({ items: [], op: 'AND' });
+		setFilteredSpanIds([]);
+		onFilteredSpansChange?.([], false);
+		setCurrentSearchedIndex(0);
+		setNoData(false);
+	}, [onFilteredSpansChange]);
+
 	// Expression-based filter hooks
 	const filterProps = {
 		expression,
@@ -266,164 +268,167 @@ function Filters({
 		</div>
 	);
 
-	const statusIndicators = (
-		<>
-			{isFetching && <Loader className="animate-spin" />}
-			{error && (
-				<TooltipRoot>
-					<TooltipTrigger asChild>
-						<span className={cx(styles.filterStatus, styles.hasError)}>
-							<Info />
-							API error
-						</span>
-					</TooltipTrigger>
-					<TooltipContent>
-						{(error as AxiosError)?.message || 'Something went wrong'}
-					</TooltipContent>
-				</TooltipRoot>
-			)}
-			{!error && noData && (
-				<Typography.Text className={styles.filterStatus}>
-					No results found
-				</Typography.Text>
-			)}
-		</>
+	const hasExpression = expression.trim().length > 0;
+	const hasResults = filteredSpanIds.length > 0;
+
+	const handlePrev = useCallback((): void => {
+		handlePrevNext(currentSearchedIndex - 1);
+		setCurrentSearchedIndex((prev) => prev - 1);
+	}, [currentSearchedIndex, handlePrevNext]);
+
+	const handleNext = useCallback((): void => {
+		handlePrevNext(currentSearchedIndex + 1);
+		setCurrentSearchedIndex((prev) => prev + 1);
+	}, [currentSearchedIndex, handlePrevNext]);
+
+	const pill = (
+		/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+		<div className={styles.pill} onClick={onExpand}>
+			<Search size={12} />
+			<span className={styles.pillText}>{expression || 'Search...'}</span>
+			{expression && <span className={styles.pillIndicator} />}
+		</div>
 	);
 
-	// --- COLLAPSED VIEW ---
-	if (!isExpanded) {
-		const pill = (
-			/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-			<div className={styles.pill} onClick={onExpand}>
-				<Search size={12} />
-				<span className={styles.pillText}>{expression || 'Search...'}</span>
-				{expression && <span className={styles.pillIndicator} />}
-			</div>
-		);
+	const pillWithPopover = expression ? (
+		<TooltipRoot>
+			<TooltipTrigger asChild>{pill}</TooltipTrigger>
+			<TooltipContent side="bottom" align="start">
+				<div className={styles.pillPopover}>
+					<div className={styles.pillPopoverHeader}>
+						<Typography.Text>Search query</Typography.Text>
+						<Button
+							variant="ghost"
+							size="icon"
+							color="secondary"
+							onClick={(): void => {
+								setCopy(expression);
+								toast.success('Copied to clipboard', {
+									richColors: false,
+									position: 'top-right',
+								});
+							}}
+						>
+							<Copy size={12} />
+						</Button>
+					</div>
+					<div className={styles.pillPopoverExpression}>{expression}</div>
+				</div>
+			</TooltipContent>
+		</TooltipRoot>
+	) : (
+		pill
+	);
 
-		return (
-			<TooltipProvider>
-				<div className={styles.root}>
-					{expression ? (
-						<TooltipRoot>
-							<TooltipTrigger asChild>{pill}</TooltipTrigger>
-							<TooltipContent side="bottom" align="start">
-								<div className={styles.pillPopover}>
-									<div className={styles.pillPopoverHeader}>
-										<Typography.Text>Search query</Typography.Text>
+	// Mode-conditional render: only one of (pill | QuerySearch) is mounted
+	// at a time. Collapsing unmounts the editor — half-written queries are
+	// dropped, so collapse can't accidentally commit a malformed expression
+	// and fire an erroring /query_range request.
+	return (
+		<TooltipProvider>
+			{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+			<div
+				className={cx(styles.root, isExpanded && styles.isExpanded)}
+				ref={containerRef}
+				onBlur={(e): void => {
+					const relatedTarget = e.relatedTarget as Node | null;
+					const blurredIntoSelf = !!containerRef.current?.contains(relatedTarget);
+					if (!blurredIntoSelf) {
+						handleBlur();
+					}
+				}}
+			>
+				{isExpanded && (
+					<div className={styles.categoryControls}>
+						<ToggleGroup
+							type="single"
+							value={selectedCategory}
+							onChange={(value): void => {
+								if (value) {
+									handleCategoryChange(value as SpanCategory);
+								}
+							}}
+							size="sm"
+						>
+							{categories.map((category) => (
+								<ToggleGroupItem key={category} value={category}>
+									{category}
+								</ToggleGroupItem>
+							))}
+						</ToggleGroup>
+					</div>
+				)}
+
+				<div className={styles.searchInput}>
+					{isExpanded ? (
+						<div className={styles.searchAndNav}>
+							<div className={styles.searchContainer}>
+								<QuerySearch
+									queryData={{
+										...BASE_FILTER_QUERY,
+										filters,
+										filter: { expression },
+									}}
+									onChange={handleExpressionChange}
+									onRun={handleRunQuery}
+									dataSource={DataSource.TRACES}
+									placeholder="Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')"
+								/>
+							</div>
+						</div>
+					) : (
+						<div className={styles.searchPill}>{pillWithPopover}</div>
+					)}
+				</div>
+
+				<div className={styles.resultActions}>
+					<QueryResult
+						hasExpression={hasExpression}
+						hasResults={hasResults}
+						isFetching={isFetching}
+						error={error}
+						noData={noData}
+						currentIndex={currentSearchedIndex}
+						total={filteredSpanIds.length}
+						onPrev={handlePrev}
+						onNext={handleNext}
+						showNavigation={isExpanded}
+					/>
+					{isExpanded && (
+						<div className={styles.expandedActions}>
+							{hasExpression && (
+								<TooltipRoot>
+									<TooltipTrigger asChild>
 										<Button
 											variant="ghost"
 											size="icon"
 											color="secondary"
-											onClick={(): void => {
-												setCopy(expression);
-												toast.success('Copied to clipboard', {
-													richColors: false,
-													position: 'top-right',
-												});
-											}}
+											onClick={handleClear}
 										>
-											<Copy size={12} />
+											<X size={14} />
 										</Button>
-									</div>
-									<div className={styles.pillPopoverExpression}>{expression}</div>
-								</div>
-							</TooltipContent>
-						</TooltipRoot>
-					) : (
-						pill
+									</TooltipTrigger>
+									<TooltipContent>Clear filter</TooltipContent>
+								</TooltipRoot>
+							)}
+							<TooltipRoot>
+								<TooltipTrigger asChild>
+									<Button
+										variant="ghost"
+										size="icon"
+										color="secondary"
+										onClick={onCollapse}
+									>
+										<ChevronsRight size={14} />
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent>Collapse filters</TooltipContent>
+							</TooltipRoot>
+						</div>
 					)}
-					{highlightErrorsToggle}
-					{statusIndicators}
 				</div>
-			</TooltipProvider>
-		);
-	}
 
-	// --- EXPANDED VIEW ---
-	return (
-		<TooltipProvider>
-			<div className={cx(styles.root, styles.isExpanded)}>
-				<ToggleGroup
-					type="single"
-					value={selectedCategory}
-					onChange={(value): void => {
-						if (value) {
-							handleCategoryChange(value as SpanCategory);
-						}
-					}}
-					size="sm"
-				>
-					{categories.map((category) => (
-						<ToggleGroupItem key={category} value={category}>
-							{category}
-						</ToggleGroupItem>
-					))}
-				</ToggleGroup>
-				{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-				<div
-					className={styles.searchContainer}
-					ref={containerRef}
-					onBlur={(e): void => {
-						if (!containerRef.current?.contains(e.relatedTarget as Node)) {
-							handleBlur();
-						}
-					}}
-				>
-					<QuerySearch
-						queryData={{
-							...BASE_FILTER_QUERY,
-							filters,
-							filter: { expression },
-						}}
-						onChange={handleExpressionChange}
-						onRun={handleRunQuery}
-						dataSource={DataSource.TRACES}
-						placeholder="Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')"
-					/>
-				</div>
-				{filteredSpanIds.length > 0 && (
-					<div className={styles.preNextToggle}>
-						<Typography.Text className={styles.preNextCount}>
-							{currentSearchedIndex + 1} / {filteredSpanIds.length}
-						</Typography.Text>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							disabled={currentSearchedIndex === 0}
-							onClick={(): void => {
-								handlePrevNext(currentSearchedIndex - 1);
-								setCurrentSearchedIndex((prev) => prev - 1);
-							}}
-						>
-							<ChevronUp size={14} />
-						</Button>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							disabled={currentSearchedIndex === filteredSpanIds.length - 1}
-							onClick={(): void => {
-								handlePrevNext(currentSearchedIndex + 1);
-								setCurrentSearchedIndex((prev) => prev + 1);
-							}}
-						>
-							<ChevronDown size={14} />
-						</Button>
-					</div>
-				)}
-				<Button
-					variant="ghost"
-					size="icon"
-					color="secondary"
-					className={styles.collapseBtn}
-					onClick={onCollapse}
-				>
-					<X size={14} />
-				</Button>
-				{highlightErrorsToggle}
-				{statusIndicators}
+				<div className={styles.highlightControl}>{highlightErrorsToggle}</div>
 			</div>
 		</TooltipProvider>
 	);

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

@@ -0,0 +1,32 @@
+.resultNavCount {
+	padding: 0 6px;
+	white-space: nowrap;
+	color: var(--l1-foreground);
+	font-family: 'Geist Mono';
+	font-size: 12px;
+}
+
+.resultNavDivider {
+	width: 1px;
+	height: 14px;
+	background: var(--l3-border);
+	margin: 0 4px;
+	flex-shrink: 0;
+}
+
+.filterStatus {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+	font-family: 'Geist Mono';
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 18px;
+}
+
+.hasError {
+	color: var(--destructive);
+	cursor: help;
+}

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

@@ -0,0 +1,111 @@
+import { ChevronDown, ChevronUp, Info, Loader } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import cx from 'classnames';
+
+import styles from './QueryResult.module.scss';
+
+type QueryResultProps = {
+	hasExpression: boolean;
+	hasResults: boolean;
+	isFetching: boolean;
+	error: unknown;
+	noData: boolean;
+	currentIndex: number;
+	total: number;
+	onPrev: () => void;
+	onNext: () => void;
+	showNavigation?: boolean;
+};
+
+function QueryResult({
+	hasExpression,
+	hasResults,
+	isFetching,
+	error,
+	noData,
+	currentIndex,
+	total,
+	onPrev,
+	onNext,
+	showNavigation = true,
+}: QueryResultProps): JSX.Element | null {
+	if (!hasExpression) {
+		return null;
+	}
+
+	let content: JSX.Element | null = null;
+	if (hasResults && showNavigation) {
+		// Prefer count over loader on refresh so stale results stay visible.
+		content = (
+			<>
+				<Typography.Text className={styles.resultNavCount}>
+					{currentIndex + 1} / {total}
+				</Typography.Text>
+				<Button
+					variant="ghost"
+					size="icon"
+					color="secondary"
+					disabled={currentIndex === 0}
+					onClick={onPrev}
+				>
+					<ChevronUp size={14} />
+				</Button>
+				<Button
+					variant="ghost"
+					size="icon"
+					color="secondary"
+					disabled={currentIndex === total - 1}
+					onClick={onNext}
+				>
+					<ChevronDown size={14} />
+				</Button>
+			</>
+		);
+	} else if (isFetching) {
+		content = <Loader className="animate-spin" />;
+	} else if (error) {
+		content = (
+			<TooltipRoot>
+				<TooltipTrigger asChild>
+					<span className={cx(styles.filterStatus, styles.hasError)}>
+						<Info />
+						API error
+					</span>
+				</TooltipTrigger>
+				<TooltipContent>
+					{(error as AxiosError)?.message || 'Something went wrong'}
+				</TooltipContent>
+			</TooltipRoot>
+		);
+	} else if (noData) {
+		content = (
+			<Typography.Text className={styles.filterStatus}>
+				No results found
+			</Typography.Text>
+		);
+	}
+
+	if (!content) {
+		return null;
+	}
+
+	return (
+		<>
+			{content}
+			{showNavigation && <span className={styles.resultNavDivider} />}
+		</>
+	);
+}
+
+QueryResult.defaultProps = {
+	showNavigation: true,
+};
+
+export default QueryResult;

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/WorkspaceLocked/CustomerStoryCard.tsx

@@ -1,4 +1,5 @@
-import { Avatar, Card, Space } from 'antd';
+import { Avatar } from '@signozhq/ui/avatar';
+import { Card, Space } from 'antd';
 
 import './customerStoryCard.styles.scss';
 
@@ -22,7 +23,7 @@ function CustomerStoryCard({
 			<Card className="customer-story-card">
 				<Space size="middle" direction="vertical">
 					<Card.Meta
-						avatar={<Avatar size={48} src={avatar} />}
+						avatar={<Avatar size="xl" src={avatar} />}
 						title={personName}
 						description={role}
 					/>

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;
+		}
 	}
 }

frontend/src/periscope/components/ResizableBox/ResizableBox.tsx

@@ -2,9 +2,15 @@ import { useCallback, useRef, useState } from 'react';
 
 import './ResizableBox.styles.scss';
 
+export type ResizableBoxHandle = 'top' | 'right' | 'bottom' | 'left';
+
 export interface ResizableBoxProps {
 	children: React.ReactNode;
-	direction?: 'vertical' | 'horizontal';
+	// Which edge the resize handle sits on. The edge determines the axis:
+	// 'top'/'bottom' → vertical resize (height), 'left'/'right' → horizontal
+	// resize (width). Dragging the handle away from the content grows the box;
+	// dragging it toward the content shrinks it.
+	handle?: ResizableBoxHandle;
 	defaultHeight?: number;
 	minHeight?: number;
 	maxHeight?: number;
@@ -18,7 +24,7 @@ export interface ResizableBoxProps {
 
 function ResizableBox({
 	children,
-	direction = 'vertical',
+	handle = 'bottom',
 	defaultHeight = 200,
 	minHeight = 50,
 	maxHeight = Infinity,
@@ -29,7 +35,8 @@ function ResizableBox({
 	disabled = false,
 	className,
 }: ResizableBoxProps): JSX.Element {
-	const isHorizontal = direction === 'horizontal';
+	const isHorizontal = handle === 'left' || handle === 'right';
+	const isStartHandle = handle === 'top' || handle === 'left';
 	const [size, setSize] = useState(isHorizontal ? defaultWidth : defaultHeight);
 	const containerRef = useRef<HTMLDivElement>(null);
 
@@ -40,10 +47,13 @@ function ResizableBox({
 			const startSize = size;
 			const min = isHorizontal ? minWidth : minHeight;
 			const max = isHorizontal ? maxWidth : maxHeight;
+			// Start-edge handle: pointer moving away from content (negative delta)
+			// grows the box, so invert the sign.
+			const deltaSign = isStartHandle ? -1 : 1;
 
 			const onMouseMove = (moveEvent: MouseEvent): void => {
 				const currentPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-				const delta = currentPos - startPos;
+				const delta = (currentPos - startPos) * deltaSign;
 				const newSize = Math.min(max, Math.max(min, startSize + delta));
 				setSize(newSize);
 				onResize?.(newSize);
@@ -61,7 +71,16 @@ function ResizableBox({
 			document.addEventListener('mousemove', onMouseMove);
 			document.addEventListener('mouseup', onMouseUp);
 		},
-		[size, isHorizontal, minWidth, maxWidth, minHeight, maxHeight, onResize],
+		[
+			size,
+			isHorizontal,
+			isStartHandle,
+			minWidth,
+			maxWidth,
+			minHeight,
+			maxHeight,
+			onResize,
+		],
 	);
 
 	const containerStyle = disabled
@@ -69,7 +88,7 @@ function ResizableBox({
 		: isHorizontal
 			? { width: size }
 			: { height: size };
-	const handleClass = `resizable-box__handle resizable-box__handle--${direction}`;
+	const handleClass = `resizable-box__handle resizable-box__handle--${handle}`;
 
 	return (
 		<div

frontend/src/styles.scss

@@ -825,4 +825,5 @@ body.ai-assistant-panel-open {
 // overrides
 :root {
 	--input-focus-outline-width: 0;
+	--radius-2: 4px;
 }

frontend/src/utils/permission/index.ts

@@ -135,4 +135,5 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	AI_ASSISTANT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_ASSISTANT_ICON_PREVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MCP_SERVER: ['ADMIN', 'EDITOR', 'VIEWER'],
+	AI_ASSISTANT_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
 };

pkg/alertmanager/alertmanagernotify/email/email.go

@@ -23,7 +23,13 @@ import (
 	"sync"
 	"time"
 
+	htmltemplate "html/template"
+
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/templating/markdownrenderer"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	commoncfg "github.com/prometheus/common/config"
 
 	"github.com/prometheus/alertmanager/config"
@@ -34,20 +40,39 @@ import (
 
 const (
 	Integration = "email"
+
+	// alertEmailLayoutTemplate is the name of the HTML layout template that
+	// wraps the rendered alert bodies. It is loaded into the notification
+	// template (n.tmpl) from the alertmanager templates config and lives at
+	// templates/alertmanager/email.gotmpl.
+	alertEmailLayoutTemplate = "email.signoz.html"
 )
 
 // Email implements a Notifier for email notifications.
 type Email struct {
-	conf     *config.EmailConfig
-	tmpl     *template.Template
-	logger   *slog.Logger
-	hostname string
+	conf      *config.EmailConfig
+	tmpl      *template.Template
+	logger    *slog.Logger
+	hostname  string
+	templater alertmanagertypes.Templater
+}
+
+// layoutData is the value passed to the email.signoz.html layout
+// template. It embeds NotificationTemplateData so templates can reference
+// `.Alert.Status`, `.Alert.TotalFiring`, `.Alert.TotalResolved`,
+// `.NotificationTemplateData.ExternalURL`, etc. alongside the rendered
+// Title and per-alert Bodies.
+type layoutData struct {
+	alertmanagertypes.NotificationTemplateData
+	Title  string
+	Bodies []htmltemplate.HTML
 }
 
 var errNoAuthUsernameConfigured = errors.NewInternalf(errors.CodeInternal, "no auth username configured")
 
-// New returns a new Email notifier.
-func New(c *config.EmailConfig, t *template.Template, l *slog.Logger) *Email {
+// New returns a new Email notifier. When the email.signoz.html layout is
+// not defined in t, custom-body alerts fall back to plain <div>-wrapped HTML.
+func New(c *config.EmailConfig, t *template.Template, l *slog.Logger, templater alertmanagertypes.Templater) *Email {
 	if _, ok := c.Headers["Subject"]; !ok {
 		c.Headers["Subject"] = config.DefaultEmailSubject
 	}
@@ -63,7 +88,7 @@ func New(c *config.EmailConfig, t *template.Template, l *slog.Logger) *Email {
 	if err != nil {
 		h = "localhost.localdomain"
 	}
-	return &Email{conf: c, tmpl: t, logger: l, hostname: h}
+	return &Email{conf: c, tmpl: t, logger: l, hostname: h, templater: templater}
 }
 
 // auth resolves a string of authentication mechanisms.
@@ -199,9 +224,9 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 
 	if ok, mech := c.Extension("AUTH"); ok {
 		auth, err := n.auth(mech)
-		if err != nil && err != errNoAuthUsernameConfigured {
+		if err != nil && !errors.Is(err, errNoAuthUsernameConfigured) {
 			return true, errors.WrapInternalf(err, errors.CodeInternal, "find auth mechanism")
-		} else if err == errNoAuthUsernameConfigured {
+		} else if errors.Is(err, errNoAuthUsernameConfigured) {
 			n.logger.DebugContext(ctx, "no auth username configured. Attempting to send email without authenticating")
 		}
 		if auth != nil {
@@ -245,6 +270,16 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 		}
 	}
 
+	// Prepare the content for the email. subject, when non-empty, overrides
+	// the configured Subject header for this notification only. We deliberately
+	// do not mutate n.conf.Headers here: the config map is shared across
+	// concurrent notifications to the same receiver.
+	subject, htmlBody, err := n.prepareContent(ctx, as)
+	if err != nil {
+		n.logger.ErrorContext(ctx, "failed to prepare notification content", errors.Attr(err))
+		return false, err
+	}
+
 	// Send the email headers and body.
 	message, err := c.Data()
 	if err != nil {
@@ -262,6 +297,10 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 
 	buffer := &bytes.Buffer{}
 	for header, t := range n.conf.Headers {
+		if header == "Subject" {
+			fmt.Fprintf(buffer, "%s: %s\r\n", header, mime.QEncoding.Encode("utf-8", subject))
+			continue
+		}
 		value, err := n.tmpl.ExecuteTextString(t, data)
 		if err != nil {
 			return false, errors.WrapInternalf(err, errors.CodeInternal, "execute %q header template", header)
@@ -336,7 +375,7 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 		}
 	}
 
-	if len(n.conf.HTML) > 0 {
+	if htmlBody != "" {
 		// Html template
 		// Preferred alternative placed last per section 5.1.4 of RFC 2046
 		// https://www.ietf.org/rfc/rfc2046.txt
@@ -347,12 +386,8 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 		if err != nil {
 			return false, errors.WrapInternalf(err, errors.CodeInternal, "create part for html template")
 		}
-		body, err := n.tmpl.ExecuteHTMLString(n.conf.HTML, data)
-		if err != nil {
-			return false, errors.WrapInternalf(err, errors.CodeInternal, "execute html template")
-		}
 		qw := quotedprintable.NewWriter(w)
-		_, err = qw.Write([]byte(body))
+		_, err = qw.Write([]byte(htmlBody))
 		if err != nil {
 			return true, errors.WrapInternalf(err, errors.CodeInternal, "write HTML part")
 		}
@@ -381,6 +416,124 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 	return false, nil
 }
 
+// prepareContent returns a subject override (empty when the default config
+// Subject should be used) and the HTML body for the email. Callers must treat
+// the subject as local state and never write it back to n.conf.Headers.
+func (n *Email) prepareContent(ctx context.Context, alerts []*types.Alert) (string, string, error) {
+	customTitle, customBody := alertmanagertemplate.ExtractTemplatesFromAnnotations(alerts)
+	result, err := n.templater.Expand(ctx, alertmanagertypes.ExpandRequest{
+		TitleTemplate:        customTitle,
+		BodyTemplate:         customBody,
+		DefaultTitleTemplate: n.conf.Headers["Subject"],
+		DefaultBodyTemplate:  n.conf.HTML,
+	}, alerts)
+	if err != nil {
+		return "", "", err
+	}
+
+	subject := result.Title
+
+	if !result.IsDefaultBody {
+		// Custom-body path: render each expanded markdown body to HTML, then
+		// wrap the whole thing in the email.signoz.html layout (or fall
+		// back to plain <div> wrapping when the layout template is not loaded).
+		for i, body := range result.Body {
+			if body == "" {
+				continue
+			}
+			rendered, err := markdownrenderer.RenderHTML(body)
+			if err != nil {
+				return "", "", err
+			}
+			result.Body[i] = rendered
+		}
+		appendRelatedLinkButtons(alerts, result.Body)
+		html, err := n.renderLayout(result)
+		if err != nil {
+			n.logger.WarnContext(ctx, "custom email template rendering failed, falling back to plain <div> wrap", errors.Attr(err))
+			return subject, wrapBodiesAsDivs(result.Body), nil
+		}
+		return subject, html, nil
+	}
+
+	return subject, result.Body[0], nil
+}
+
+// renderLayout wraps result in the email.signoz.html HTML layout loaded
+// into n.tmpl from the alertmanager templates config. Returns an error when the
+// layout template is not defined (e.g. in tests where no templates are loaded)
+// so prepareContent can fall back to plain <div> wrapping.
+func (n *Email) renderLayout(result *alertmanagertypes.ExpandResult) (string, error) {
+	bodies := make([]htmltemplate.HTML, 0, len(result.Body))
+	for _, b := range result.Body {
+		bodies = append(bodies, htmltemplate.HTML(b))
+	}
+	data := layoutData{Title: result.Title, Bodies: bodies}
+	if result.NotificationData != nil {
+		data.NotificationTemplateData = *result.NotificationData
+	}
+	html, err := n.tmpl.ExecuteHTMLString(`{{ template "`+alertEmailLayoutTemplate+`" . }}`, data)
+	if err != nil {
+		return "", errors.WrapInternalf(err, errors.CodeInternal, "failed to render email layout")
+	}
+	return html, nil
+}
+
+// appendRelatedLinkButtons appends "View Related Logs/Traces" buttons to each
+// per-alert body when the rule manager attached the corresponding annotation.
+// bodies is positionally aligned with alerts (see alertmanagertemplate.Prepare);
+// empty bodies are skipped so we never attach a button to an alert that produced
+// no visible content.
+func appendRelatedLinkButtons(alerts []*types.Alert, bodies []string) {
+	for i := range bodies {
+		if i >= len(alerts) || bodies[i] == "" {
+			continue
+		}
+		if link := alerts[i].Annotations[ruletypes.AnnotationRelatedLogs]; link != "" {
+			bodies[i] += htmlButton("View Related Logs", string(link))
+		}
+		if link := alerts[i].Annotations[ruletypes.AnnotationRelatedTraces]; link != "" {
+			bodies[i] += htmlButton("View Related Traces", string(link))
+		}
+	}
+}
+
+func wrapBodiesAsDivs(bodies []string) string {
+	var b strings.Builder
+	for _, part := range bodies {
+		if part == "" {
+			continue
+		}
+		b.WriteString("<div>")
+		b.WriteString(part)
+		b.WriteString("</div>")
+	}
+	return b.String()
+}
+
+func htmlButton(text, url string) string {
+	return fmt.Sprintf(`
+	<a href="%s" target="_blank" style="text-decoration: none;">
+<button style="
+    padding: 6px 16px;
+    /* Default System Font */
+    font-family: sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.5;
+    /* Light Theme & Dynamic Background (Solid) */
+    color: #111827;
+    background-color: #f9fafb;
+    /* Static Outline */
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    cursor: pointer;
+">
+  %s
+</button>
+</a>`, url, text)
+}
+
 type loginAuth struct {
 	username, password string
 }

pkg/alertmanager/alertmanagernotify/email/email_test.go

@@ -8,6 +8,7 @@ import (
 	"context"
 	"fmt"
 	"io"
+	"log/slog"
 	"net"
 	"net/http"
 	"net/url"
@@ -17,7 +18,10 @@ import (
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/emersion/go-smtp"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
@@ -42,6 +46,11 @@ const (
 	emailFrom = "alertmanager@example.com"
 )
 
+// testTemplater returns a Templater bound to tmpl with a discard logger.
+func testTemplater(tmpl *template.Template) alertmanagertypes.Templater {
+	return alertmanagertemplate.New(tmpl, slog.New(slog.DiscardHandler))
+}
+
 // email represents an email returned by the MailDev REST API.
 // See https://github.com/djfarrelly/MailDev/blob/master/docs/rest.md.
 type email struct {
@@ -162,7 +171,7 @@ func notifyEmailWithContext(ctx context.Context, t *testing.T, cfg *config.Email
 		return nil, false, err
 	}
 
-	email := New(cfg, tmpl, promslog.NewNopLogger())
+	email := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
 
 	retry, err := email.Notify(ctx, firingAlert)
 	if err != nil {
@@ -706,7 +715,7 @@ func TestEmailRejected(t *testing.T) {
 	tmpl, firingAlert, err := prepare(cfg)
 	require.NoError(t, err)
 
-	e := New(cfg, tmpl, promslog.NewNopLogger())
+	e := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
 
 	// Send the alert to mock SMTP server.
 	retry, err := e.Notify(context.Background(), firingAlert)
@@ -1030,6 +1039,135 @@ func TestEmailImplicitTLS(t *testing.T) {
 	}
 }
 
+func TestPrepareContent(t *testing.T) {
+	t.Run("default title template; custom body template", func(t *testing.T) {
+		tmpl, err := template.FromGlobs([]string{})
+		require.NoError(t, err)
+		tmpl.ExternalURL, _ = url.Parse("http://am")
+
+		bodyTpl := "line $labels.instance"
+		a1 := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					model.LabelName("instance"): model.LabelValue("one"),
+				},
+				Annotations: model.LabelSet{
+					model.LabelName(ruletypes.AnnotationBodyTemplate): model.LabelValue(bodyTpl),
+				},
+			},
+		}
+		a2 := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					model.LabelName("instance"): model.LabelValue("two"),
+				},
+				Annotations: model.LabelSet{
+					model.LabelName(ruletypes.AnnotationBodyTemplate): model.LabelValue(bodyTpl),
+				},
+			},
+		}
+		alerts := []*types.Alert{a1, a2}
+
+		cfg := &config.EmailConfig{Headers: map[string]string{"Subject": "subj"}}
+		n := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
+
+		ctx := context.Background()
+		subject, htmlBody, err := n.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "subj", subject)
+		require.Equal(t, "<div><p>line one</p>\n</div><div><p>line two</p>\n</div>", htmlBody)
+	})
+
+	t.Run("custom title template; default body HTML template", func(t *testing.T) {
+		tmpl, err := template.FromGlobs([]string{})
+		require.NoError(t, err)
+		tmpl.ExternalURL, _ = url.Parse("http://am")
+
+		firingAlert := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{},
+				Annotations: model.LabelSet{
+					model.LabelName(ruletypes.AnnotationTitleTemplate): model.LabelValue("fixed from $alert.status"),
+				},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+		alerts := []*types.Alert{firingAlert}
+		cfg := &config.EmailConfig{
+			Headers: map[string]string{},
+			HTML:    "Status: {{ .Status }}",
+		}
+		n := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
+
+		ctx := context.Background()
+		subject, htmlBody, err := n.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "Status: firing", htmlBody)
+		require.Equal(t, "fixed from firing", subject)
+	})
+
+	t.Run("default template without HTML", func(t *testing.T) {
+		cfg := &config.EmailConfig{Headers: map[string]string{"Subject": "the email subject"}}
+		tmpl, err := template.FromGlobs([]string{})
+		require.NoError(t, err)
+		tmpl.ExternalURL, _ = url.Parse("http://am")
+		n := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
+
+		firingAlert := &types.Alert{
+			Alert: model.Alert{
+				Labels:   model.LabelSet{},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+		alerts := []*types.Alert{firingAlert}
+		ctx := context.Background()
+		subject, htmlBody, err := n.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "", htmlBody)
+		require.Equal(t, "the email subject", subject)
+	})
+
+	t.Run("custom title template; custom body template", func(t *testing.T) {
+		// Load the email.signoz.html layout into the notification template
+		// the same way the alertmanager server does via the templates config.
+		tmpl, err := template.FromGlobs([]string{"../../../../templates/alertmanager/*.gotmpl"})
+		require.NoError(t, err)
+		tmpl.ExternalURL, _ = url.Parse("http://am")
+
+		firingAlert := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					model.LabelName("instance"): model.LabelValue("two"),
+				},
+				Annotations: model.LabelSet{
+					model.LabelName(ruletypes.AnnotationTitleTemplate): model.LabelValue("fixed from $alert.status"),
+					model.LabelName(ruletypes.AnnotationBodyTemplate):  model.LabelValue("line $labels.instance"),
+				},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+		alerts := []*types.Alert{firingAlert}
+		cfg := &config.EmailConfig{
+			Headers: map[string]string{"Subject": "subject"},
+			HTML:    "Well, what are you?",
+		}
+
+		n := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
+
+		ctx := context.Background()
+		subject, htmlBody, err := n.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.Contains(t, htmlBody, "<!DOCTYPE html>")
+		require.Contains(t, htmlBody, "<p>line two</p>")
+		require.NotContains(t, htmlBody, "Well, what are you?")
+		require.Equal(t, subject, "fixed from firing")
+		require.NotContains(t, subject, "subject")
+	})
+}
+
 func ptrTo(b bool) *bool {
 	return &b
 }

pkg/alertmanager/alertmanagernotify/msteamsv2/msteamsv2.go

@@ -15,7 +15,9 @@ import (
 	"slices"
 	"strings"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 
@@ -44,6 +46,7 @@ type Notifier struct {
 	retrier      *notify.Retrier
 	webhookURL   *config.SecretURL
 	postJSONFunc func(ctx context.Context, client *http.Client, url string, body io.Reader) (*http.Response, error)
+	templater    alertmanagertypes.Templater
 }
 
 // https://learn.microsoft.com/en-us/connectors/teams/?tabs=text1#adaptivecarditemschema
@@ -52,7 +55,7 @@ type Content struct {
 	Type    string   `json:"type"`
 	Version string   `json:"version"`
 	Body    []Body   `json:"body"`
-	Msteams Msteams  `json:"msteams,omitempty"`
+	Msteams Msteams  `json:"msteams,omitzero"`
 	Actions []Action `json:"actions"`
 }
 
@@ -94,7 +97,7 @@ type teamsMessage struct {
 }
 
 // New returns a new notifier that uses the Microsoft Teams Power Platform connector.
-func New(c *config.MSTeamsV2Config, t *template.Template, titleLink string, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
+func New(c *config.MSTeamsV2Config, t *template.Template, titleLink string, l *slog.Logger, templater alertmanagertypes.Templater, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
 	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
 	if err != nil {
 		return nil, err
@@ -109,6 +112,7 @@ func New(c *config.MSTeamsV2Config, t *template.Template, titleLink string, l *s
 		retrier:      &notify.Retrier{},
 		webhookURL:   c.WebhookURL,
 		postJSONFunc: notify.PostJSON,
+		templater:    templater,
 	}
 
 	return n, nil
@@ -128,25 +132,11 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 		return false, err
 	}
 
-	title := tmpl(n.conf.Title)
-	if err != nil {
-		return false, err
-	}
-
 	titleLink := tmpl(n.titleLink)
 	if err != nil {
 		return false, err
 	}
 
-	alerts := types.Alerts(as...)
-	color := colorGrey
-	switch alerts.Status() {
-	case model.AlertFiring:
-		color = colorRed
-	case model.AlertResolved:
-		color = colorGreen
-	}
-
 	var url string
 	if n.conf.WebhookURL != nil {
 		url = n.conf.WebhookURL.String()
@@ -158,6 +148,12 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 		url = strings.TrimSpace(string(content))
 	}
 
+	bodyBlocks, err := n.prepareContent(ctx, as)
+	if err != nil {
+		n.logger.ErrorContext(ctx, "failed to prepare notification content", errors.Attr(err))
+		return false, err
+	}
+
 	// A message as referenced in https://learn.microsoft.com/en-us/connectors/teams/?tabs=text1%2Cdotnet#request-body-schema
 	t := teamsMessage{
 		Type: "message",
@@ -169,17 +165,7 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 					Schema:  "http://adaptivecards.io/schemas/adaptive-card.json",
 					Type:    "AdaptiveCard",
 					Version: "1.2",
-					Body: []Body{
-						{
-							Type:   "TextBlock",
-							Text:   title,
-							Weight: "Bolder",
-							Size:   "Medium",
-							Wrap:   true,
-							Style:  "heading",
-							Color:  color,
-						},
-					},
+					Body:    bodyBlocks,
 					Actions: []Action{
 						{
 							Type:  "Action.OpenUrl",
@@ -195,20 +181,6 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 		},
 	}
 
-	// add labels and annotations to the body of all alerts
-	for _, alert := range as {
-		t.Attachments[0].Content.Body = append(t.Attachments[0].Content.Body, Body{
-			Type:   "TextBlock",
-			Text:   "Alerts",
-			Weight: "Bolder",
-			Size:   "Medium",
-			Wrap:   true,
-			Color:  color,
-		})
-
-		t.Attachments[0].Content.Body = append(t.Attachments[0].Content.Body, n.createLabelsAndAnnotationsBody(alert)...)
-	}
-
 	var payload bytes.Buffer
 	if err = json.NewEncoder(&payload).Encode(t); err != nil {
 		return false, err
@@ -228,6 +200,75 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 	return shouldRetry, err
 }
 
+// prepareContent builds the Adaptive Card body blocks for the notification.
+// The first block is always the title; the remainder depends on whether the
+// alerts carried a custom body template.
+func (n *Notifier) prepareContent(ctx context.Context, alerts []*types.Alert) ([]Body, error) {
+	customTitle, customBody := alertmanagertemplate.ExtractTemplatesFromAnnotations(alerts)
+	result, err := n.templater.Expand(ctx, alertmanagertypes.ExpandRequest{
+		TitleTemplate:        customTitle,
+		BodyTemplate:         customBody,
+		DefaultTitleTemplate: n.conf.Title,
+		DefaultBodyTemplate:  n.conf.Text,
+	}, alerts)
+	if err != nil {
+		return nil, err
+	}
+
+	color := colorGrey
+	switch types.Alerts(alerts...).Status() {
+	case model.AlertFiring:
+		color = colorRed
+	case model.AlertResolved:
+		color = colorGreen
+	}
+
+	blocks := []Body{{
+		Type:   "TextBlock",
+		Text:   result.Title,
+		Weight: "Bolder",
+		Size:   "Medium",
+		Wrap:   true,
+		Style:  "heading",
+		Color:  color,
+	}}
+
+	if result.IsDefaultBody {
+		for _, alert := range alerts {
+			blocks = append(blocks, Body{
+				Type:   "TextBlock",
+				Text:   "Alerts",
+				Weight: "Bolder",
+				Size:   "Medium",
+				Wrap:   true,
+				Color:  color,
+			})
+			blocks = append(blocks, n.createLabelsAndAnnotationsBody(alert)...)
+		}
+		return blocks, nil
+	}
+
+	// Custom body path: result.Body is positionally aligned with alerts;
+	// entries for alerts whose template rendered empty are kept as "" so we
+	// can skip them here without shifting the per-alert color index.
+	for i, body := range result.Body {
+		if body == "" || i >= len(alerts) {
+			continue
+		}
+		perAlertColor := colorRed
+		if alerts[i].Resolved() {
+			perAlertColor = colorGreen
+		}
+		blocks = append(blocks, Body{
+			Type:  "TextBlock",
+			Text:  body,
+			Wrap:  true,
+			Color: perAlertColor,
+		})
+	}
+	return blocks, nil
+}
+
 func (*Notifier) createLabelsAndAnnotationsBody(alert *types.Alert) []Body {
 	bodies := []Body{}
 	bodies = append(bodies, Body{
@@ -258,7 +299,8 @@ func (*Notifier) createLabelsAndAnnotationsBody(alert *types.Alert) []Body {
 
 	annotationsFacts := []Fact{}
 	for k, v := range alert.Annotations {
-		if slices.Contains([]string{"summary", "related_logs", "related_traces"}, string(k)) {
+		if slices.Contains([]string{"summary", "related_logs", "related_traces"}, string(k)) ||
+			alertmanagertypes.IsPrivateAnnotation(string(k)) {
 			continue
 		}
 		annotationsFacts = append(annotationsFacts, Fact{Title: string(k), Value: string(v)})

pkg/alertmanager/alertmanagernotify/msteamsv2/msteamsv2_test.go

@@ -8,6 +8,7 @@ import (
 	"context"
 	"encoding/json"
 	"io"
+	"log/slog"
 	"net/http"
 	"net/http/httptest"
 	"net/url"
@@ -15,6 +16,9 @@ import (
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 	"github.com/prometheus/common/promslog"
@@ -23,21 +27,28 @@ import (
 	test "github.com/SigNoz/signoz/pkg/alertmanager/alertmanagernotify/alertmanagernotifytest"
 	"github.com/prometheus/alertmanager/config"
 	"github.com/prometheus/alertmanager/notify"
+	"github.com/prometheus/alertmanager/template"
 	"github.com/prometheus/alertmanager/types"
 )
 
+func newTestTemplater(tmpl *template.Template) alertmanagertypes.Templater {
+	return alertmanagertemplate.New(tmpl, slog.New(slog.DiscardHandler))
+}
+
 // This is a test URL that has been modified to not be valid.
 var testWebhookURL, _ = url.Parse("https://example.westeurope.logic.azure.com:443/workflows/xxx/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=xxx")
 
 func TestMSTeamsV2Retry(t *testing.T) {
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.MSTeamsV2Config{
 			WebhookURL: &config.SecretURL{URL: testWebhookURL},
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		`{{ template "msteamsv2.default.titleLink" . }}`,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -64,14 +75,16 @@ func TestNotifier_Notify_WithReason(t *testing.T) {
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
+			tmpl := test.CreateTmpl(t)
 			notifier, err := New(
 				&config.MSTeamsV2Config{
 					WebhookURL: &config.SecretURL{URL: testWebhookURL},
 					HTTPConfig: &commoncfg.HTTPClientConfig{},
 				},
-				test.CreateTmpl(t),
+				tmpl,
 				`{{ template "msteamsv2.default.titleLink" . }}`,
 				promslog.NewNopLogger(),
+				newTestTemplater(tmpl),
 			)
 			require.NoError(t, err)
 
@@ -153,7 +166,8 @@ func TestMSTeamsV2Templating(t *testing.T) {
 		t.Run(tc.title, func(t *testing.T) {
 			tc.cfg.WebhookURL = &config.SecretURL{URL: u}
 			tc.cfg.HTTPConfig = &commoncfg.HTTPClientConfig{}
-			pd, err := New(tc.cfg, test.CreateTmpl(t), tc.titleLink, promslog.NewNopLogger())
+			tmpl := test.CreateTmpl(t)
+			pd, err := New(tc.cfg, tmpl, tc.titleLink, promslog.NewNopLogger(), newTestTemplater(tmpl))
 			require.NoError(t, err)
 
 			ctx := context.Background()
@@ -186,20 +200,124 @@ func TestMSTeamsV2RedactedURL(t *testing.T) {
 	defer fn()
 
 	secret := "secret"
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.MSTeamsV2Config{
 			WebhookURL: &config.SecretURL{URL: u},
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		`{{ template "msteamsv2.default.titleLink" . }}`,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
 	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, secret)
 }
 
+func TestPrepareContent(t *testing.T) {
+	t.Run("default template - firing alerts", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		notifier, err := New(
+			&config.MSTeamsV2Config{
+				WebhookURL: &config.SecretURL{URL: testWebhookURL},
+				HTTPConfig: &commoncfg.HTTPClientConfig{},
+				Title:      "Alertname: {{ .CommonLabels.alertname }}",
+			},
+			tmpl,
+			`{{ template "msteamsv2.default.titleLink" . }}`,
+			promslog.NewNopLogger(),
+			newTestTemplater(tmpl),
+		)
+		require.NoError(t, err)
+
+		ctx := context.Background()
+		ctx = notify.WithGroupKey(ctx, "1")
+
+		alerts := []*types.Alert{
+			{
+				Alert: model.Alert{
+					Labels: model.LabelSet{"alertname": "test"},
+					// Custom body template
+					Annotations: model.LabelSet{
+						ruletypes.AnnotationBodyTemplate: "Firing alert: $alertname",
+					},
+					StartsAt: time.Now(),
+					EndsAt:   time.Now().Add(time.Hour),
+				},
+			},
+		}
+		blocks, err := notifier.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.NotEmpty(t, blocks)
+		// First block should be the title with color (firing = red)
+		require.Equal(t, "Bolder", blocks[0].Weight)
+		require.Equal(t, colorRed, blocks[0].Color)
+		// verify title text
+		require.Equal(t, "Alertname: test", blocks[0].Text)
+		// verify body text
+		require.Equal(t, "Firing alert: test", blocks[1].Text)
+	})
+
+	t.Run("custom template - per-alert color", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		notifier, err := New(
+			&config.MSTeamsV2Config{
+				WebhookURL: &config.SecretURL{URL: testWebhookURL},
+				HTTPConfig: &commoncfg.HTTPClientConfig{},
+			},
+			tmpl,
+			`{{ template "msteamsv2.default.titleLink" . }}`,
+			promslog.NewNopLogger(),
+			newTestTemplater(tmpl),
+		)
+		require.NoError(t, err)
+
+		ctx := context.Background()
+		ctx = notify.WithGroupKey(ctx, "1")
+
+		alerts := []*types.Alert{
+			{
+				Alert: model.Alert{
+					Labels: model.LabelSet{"alertname": "test1"},
+					Annotations: model.LabelSet{
+						"summary":                         "test",
+						ruletypes.AnnotationTitleTemplate: "Custom Title",
+						ruletypes.AnnotationBodyTemplate:  "custom body $alertname",
+					},
+					StartsAt: time.Now(),
+					EndsAt:   time.Now().Add(time.Hour),
+				},
+			},
+			{
+				Alert: model.Alert{
+					Labels: model.LabelSet{"alertname": "test2"},
+					Annotations: model.LabelSet{
+						"summary":                         "test",
+						ruletypes.AnnotationTitleTemplate: "Custom Title",
+						ruletypes.AnnotationBodyTemplate:  "custom body $alertname",
+					},
+					StartsAt: time.Now().Add(-time.Hour),
+					EndsAt:   time.Now().Add(-time.Minute),
+				},
+			},
+		}
+		blocks, err := notifier.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.NotEmpty(t, blocks)
+		// total 3 blocks: title and 2 body blocks
+		require.True(t, len(blocks) == 3)
+		// First block: title color is overall color of the alerts
+		require.Equal(t, colorRed, blocks[0].Color)
+		// verify title text
+		require.Equal(t, "Custom Title", blocks[0].Text)
+		// Body blocks should have per-alert color
+		require.Equal(t, colorRed, blocks[1].Color)   // firing
+		require.Equal(t, colorGreen, blocks[2].Color) // resolved
+	})
+}
+
 func TestMSTeamsV2ReadingURLFromFile(t *testing.T) {
 	ctx, u, fn := test.GetContextWithCancelingURL()
 	defer fn()
@@ -209,14 +327,16 @@ func TestMSTeamsV2ReadingURLFromFile(t *testing.T) {
 	_, err = f.WriteString(u.String() + "\n")
 	require.NoError(t, err, "writing to temp file failed")
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.MSTeamsV2Config{
 			WebhookURLFile: f.Name(),
 			HTTPConfig:     &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		`{{ template "msteamsv2.default.titleLink" . }}`,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 

pkg/alertmanager/alertmanagernotify/opsgenie/opsgenie.go

@@ -15,7 +15,10 @@ import (
 	"os"
 	"strings"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/templating/markdownrenderer"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 
@@ -34,25 +37,27 @@ const maxMessageLenRunes = 130
 
 // Notifier implements a Notifier for OpsGenie notifications.
 type Notifier struct {
-	conf    *config.OpsGenieConfig
-	tmpl    *template.Template
-	logger  *slog.Logger
-	client  *http.Client
-	retrier *notify.Retrier
+	conf      *config.OpsGenieConfig
+	tmpl      *template.Template
+	logger    *slog.Logger
+	client    *http.Client
+	retrier   *notify.Retrier
+	templater alertmanagertypes.Templater
 }
 
 // New returns a new OpsGenie notifier.
-func New(c *config.OpsGenieConfig, t *template.Template, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
+func New(c *config.OpsGenieConfig, t *template.Template, l *slog.Logger, templater alertmanagertypes.Templater, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
 	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
 	if err != nil {
 		return nil, err
 	}
 	return &Notifier{
-		conf:    c,
-		tmpl:    t,
-		logger:  l,
-		client:  client,
-		retrier: &notify.Retrier{RetryCodes: []int{http.StatusTooManyRequests}},
+		conf:      c,
+		tmpl:      t,
+		logger:    l,
+		client:    client,
+		retrier:   &notify.Retrier{RetryCodes: []int{http.StatusTooManyRequests}},
+		templater: templater,
 	}, nil
 }
 
@@ -123,6 +128,55 @@ func safeSplit(s, sep string) []string {
 	return b
 }
 
+// prepareContent expands alert templates and returns the OpsGenie-ready title
+// (truncated to the 130-rune limit) and HTML description. Custom bodies are
+// rendered to HTML and stitched together with <hr> dividers; default bodies
+// are joined with newlines (OpsGenie's legacy plain-text description).
+func (n *Notifier) prepareContent(ctx context.Context, alerts []*types.Alert) (string, string, error) {
+	customTitle, customBody := alertmanagertemplate.ExtractTemplatesFromAnnotations(alerts)
+	result, err := n.templater.Expand(ctx, alertmanagertypes.ExpandRequest{
+		TitleTemplate:        customTitle,
+		BodyTemplate:         customBody,
+		DefaultTitleTemplate: n.conf.Message,
+		DefaultBodyTemplate:  n.conf.Description,
+	}, alerts)
+	if err != nil {
+		return "", "", err
+	}
+
+	var description string
+	if result.IsDefaultBody {
+		description = strings.Join(result.Body, "\n")
+	} else {
+		var b strings.Builder
+		first := true
+		for _, part := range result.Body {
+			if part == "" {
+				continue
+			}
+			rendered, renderErr := markdownrenderer.RenderHTML(part)
+			if renderErr != nil {
+				return "", "", renderErr
+			}
+			if !first {
+				b.WriteString("<hr>")
+			}
+			b.WriteString("<div>")
+			b.WriteString(rendered)
+			b.WriteString("</div>")
+			first = false
+		}
+		description = b.String()
+	}
+
+	title, truncated := notify.TruncateInRunes(result.Title, maxMessageLenRunes)
+	if truncated {
+		n.logger.WarnContext(ctx, "Truncated message", slog.Int("max_runes", maxMessageLenRunes))
+	}
+
+	return title, description, nil
+}
+
 // Create requests for a list of alerts.
 func (n *Notifier) createRequests(ctx context.Context, as ...*types.Alert) ([]*http.Request, bool, error) {
 	key, err := notify.ExtractGroupKey(ctx)
@@ -168,9 +222,10 @@ func (n *Notifier) createRequests(ctx context.Context, as ...*types.Alert) ([]*h
 		}
 		requests = append(requests, req.WithContext(ctx))
 	default:
-		message, truncated := notify.TruncateInRunes(tmpl(n.conf.Message), maxMessageLenRunes)
-		if truncated {
-			logger.WarnContext(ctx, "Truncated message", slog.Any("alert", key), slog.Int("max_runes", maxMessageLenRunes))
+		message, description, err := n.prepareContent(ctx, as)
+		if err != nil {
+			n.logger.ErrorContext(ctx, "failed to prepare notification content", errors.Attr(err))
+			return nil, false, err
 		}
 
 		createEndpointURL := n.conf.APIURL.Copy()
@@ -209,7 +264,7 @@ func (n *Notifier) createRequests(ctx context.Context, as ...*types.Alert) ([]*h
 		msg := &opsGenieCreateMessage{
 			Alias:       alias,
 			Message:     message,
-			Description: tmpl(n.conf.Description),
+			Description: description,
 			Details:     details,
 			Source:      tmpl(n.conf.Source),
 			Responders:  responders,

pkg/alertmanager/alertmanagernotify/opsgenie/opsgenie_test.go

@@ -8,12 +8,16 @@ import (
 	"context"
 	"fmt"
 	"io"
+	"log/slog"
 	"net/http"
 	"net/url"
 	"os"
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 	"github.com/prometheus/common/promslog"
@@ -22,16 +26,23 @@ import (
 	"github.com/prometheus/alertmanager/config"
 	"github.com/prometheus/alertmanager/notify"
 	"github.com/prometheus/alertmanager/notify/test"
+	"github.com/prometheus/alertmanager/template"
 	"github.com/prometheus/alertmanager/types"
 )
 
+func newTestTemplater(tmpl *template.Template) alertmanagertypes.Templater {
+	return alertmanagertemplate.New(tmpl, slog.New(slog.DiscardHandler))
+}
+
 func TestOpsGenieRetry(t *testing.T) {
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.OpsGenieConfig{
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -47,14 +58,16 @@ func TestOpsGenieRedactedURL(t *testing.T) {
 	defer fn()
 
 	key := "key"
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.OpsGenieConfig{
 			APIURL:     &config.URL{URL: u},
 			APIKey:     config.Secret(key),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -72,14 +85,16 @@ func TestGettingOpsGegineApikeyFromFile(t *testing.T) {
 	_, err = f.WriteString(key)
 	require.NoError(t, err, "writing to temp file failed")
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.OpsGenieConfig{
 			APIURL:     &config.URL{URL: u},
 			APIKeyFile: f.Name(),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -202,7 +217,7 @@ func TestOpsGenie(t *testing.T) {
 		},
 	} {
 		t.Run(tc.title, func(t *testing.T) {
-			notifier, err := New(tc.cfg, tmpl, logger)
+			notifier, err := New(tc.cfg, tmpl, logger, newTestTemplater(tmpl))
 			require.NoError(t, err)
 
 			ctx := context.Background()
@@ -278,7 +293,7 @@ func TestOpsGenieWithUpdate(t *testing.T) {
 		APIURL:       &config.URL{URL: u},
 		HTTPConfig:   &commoncfg.HTTPClientConfig{},
 	}
-	notifierWithUpdate, err := New(&opsGenieConfigWithUpdate, tmpl, promslog.NewNopLogger())
+	notifierWithUpdate, err := New(&opsGenieConfigWithUpdate, tmpl, promslog.NewNopLogger(), newTestTemplater(tmpl))
 	alert := &types.Alert{
 		Alert: model.Alert{
 			StartsAt: time.Now(),
@@ -321,7 +336,7 @@ func TestOpsGenieApiKeyFile(t *testing.T) {
 		APIURL:     &config.URL{URL: u},
 		HTTPConfig: &commoncfg.HTTPClientConfig{},
 	}
-	notifierWithUpdate, err := New(&opsGenieConfigWithUpdate, tmpl, promslog.NewNopLogger())
+	notifierWithUpdate, err := New(&opsGenieConfigWithUpdate, tmpl, promslog.NewNopLogger(), newTestTemplater(tmpl))
 
 	require.NoError(t, err)
 	requests, _, err := notifierWithUpdate.createRequests(ctx)
@@ -329,6 +344,99 @@ func TestOpsGenieApiKeyFile(t *testing.T) {
 	require.Equal(t, "GenieKey my_secret_api_key", requests[0].Header.Get("Authorization"))
 }
 
+func TestPrepareContent(t *testing.T) {
+	t.Run("default template", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		logger := promslog.NewNopLogger()
+
+		notifier := &Notifier{
+			conf: &config.OpsGenieConfig{
+				Message:     `{{ .CommonLabels.Message }}`,
+				Description: `{{ .CommonLabels.Description }}`,
+			},
+			tmpl:      tmpl,
+			logger:    logger,
+			templater: newTestTemplater(tmpl),
+		}
+
+		ctx := context.Background()
+		ctx = notify.WithGroupKey(ctx, "1")
+
+		alert := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					"Message":     "Firing alert: test",
+					"Description": "Check runbook for more details",
+				},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+
+		alerts := []*types.Alert{alert}
+
+		title, desc, prepErr := notifier.prepareContent(ctx, alerts)
+		require.NoError(t, prepErr)
+		require.Equal(t, "Firing alert: test", title)
+		require.Equal(t, "Check runbook for more details", desc)
+	})
+
+	t.Run("custom template", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		logger := promslog.NewNopLogger()
+
+		notifier := &Notifier{
+			conf: &config.OpsGenieConfig{
+				Message:     `{{ .CommonLabels.Message }}`,
+				Description: `{{ .CommonLabels.Description }}`,
+			},
+			tmpl:      tmpl,
+			logger:    logger,
+			templater: newTestTemplater(tmpl),
+		}
+
+		ctx := context.Background()
+		ctx = notify.WithGroupKey(ctx, "1")
+
+		alert1 := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					"service":   "payment",
+					"namespace": "potter-the-harry",
+				},
+				Annotations: model.LabelSet{
+					ruletypes.AnnotationTitleTemplate: "High request throughput for $service",
+					ruletypes.AnnotationBodyTemplate:  "Alert firing in NS: $labels.namespace",
+				},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+		alert2 := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					"service":   "payment",
+					"namespace": "smart-the-rat",
+				},
+				Annotations: model.LabelSet{
+					ruletypes.AnnotationTitleTemplate: "High request throughput for $service",
+					ruletypes.AnnotationBodyTemplate:  "Alert firing in NS: $labels.namespace",
+				},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+
+		alerts := []*types.Alert{alert1, alert2}
+
+		title, desc, err := notifier.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "High request throughput for payment", title)
+		// Each alert body wrapped in <div>, separated by <hr>
+		require.Equal(t, "<div><p>Alert firing in NS: potter-the-harry</p>\n</div><hr><div><p>Alert firing in NS: smart-the-rat</p>\n</div>", desc)
+	})
+}
+
 func readBody(t *testing.T, r *http.Request) string {
 	t.Helper()
 	body, err := io.ReadAll(r.Body)

pkg/alertmanager/alertmanagernotify/pagerduty/pagerduty.go

@@ -15,7 +15,9 @@ import (
 	"os"
 	"strings"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 	"github.com/alecthomas/units"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
@@ -40,21 +42,22 @@ const (
 
 // Notifier implements a Notifier for PagerDuty notifications.
 type Notifier struct {
-	conf    *config.PagerdutyConfig
-	tmpl    *template.Template
-	logger  *slog.Logger
-	apiV1   string // for tests.
-	client  *http.Client
-	retrier *notify.Retrier
+	conf      *config.PagerdutyConfig
+	tmpl      *template.Template
+	logger    *slog.Logger
+	apiV1     string // for tests.
+	client    *http.Client
+	retrier   *notify.Retrier
+	templater alertmanagertypes.Templater
 }
 
 // New returns a new PagerDuty notifier.
-func New(c *config.PagerdutyConfig, t *template.Template, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
+func New(c *config.PagerdutyConfig, t *template.Template, l *slog.Logger, templater alertmanagertypes.Templater, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
 	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
 	if err != nil {
 		return nil, err
 	}
-	n := &Notifier{conf: c, tmpl: t, logger: l, client: client}
+	n := &Notifier{conf: c, tmpl: t, logger: l, client: client, templater: templater}
 	if c.ServiceKey != "" || c.ServiceKeyFile != "" {
 		n.apiV1 = "https://events.pagerduty.com/generic/2010-04-15/create_event.json"
 		// Retrying can solve the issue on 403 (rate limiting) and 5xx response codes.
@@ -143,11 +146,12 @@ func (n *Notifier) notifyV1(
 	key notify.Key,
 	data *template.Data,
 	details map[string]any,
+	title string,
 ) (bool, error) {
 	var tmplErr error
 	tmpl := notify.TmplText(n.tmpl, data, &tmplErr)
 
-	description, truncated := notify.TruncateInRunes(tmpl(n.conf.Description), maxV1DescriptionLenRunes)
+	description, truncated := notify.TruncateInRunes(title, maxV1DescriptionLenRunes)
 	if truncated {
 		n.logger.WarnContext(ctx, "Truncated description", slog.Any("key", key), slog.Int("max_runes", maxV1DescriptionLenRunes))
 	}
@@ -203,6 +207,7 @@ func (n *Notifier) notifyV2(
 	key notify.Key,
 	data *template.Data,
 	details map[string]any,
+	title string,
 ) (bool, error) {
 	var tmplErr error
 	tmpl := notify.TmplText(n.tmpl, data, &tmplErr)
@@ -211,7 +216,7 @@ func (n *Notifier) notifyV2(
 		n.conf.Severity = "error"
 	}
 
-	summary, truncated := notify.TruncateInRunes(tmpl(n.conf.Description), maxV2SummaryLenRunes)
+	summary, truncated := notify.TruncateInRunes(title, maxV2SummaryLenRunes)
 	if truncated {
 		n.logger.WarnContext(ctx, "Truncated summary", slog.Any("key", key), slog.Int("max_runes", maxV2SummaryLenRunes))
 	}
@@ -294,6 +299,22 @@ func (n *Notifier) notifyV2(
 	return retry, err
 }
 
+// prepareTitle expands the notification title. PagerDuty has no body surface
+// we care about — the description/summary field is what users see as the
+// incident headline, so we feed the configured Description as the default
+// title template and ignore any custom body_template entirely.
+func (n *Notifier) prepareTitle(ctx context.Context, alerts []*types.Alert) (string, error) {
+	customTitle, _ := alertmanagertemplate.ExtractTemplatesFromAnnotations(alerts)
+	result, err := n.templater.Expand(ctx, alertmanagertypes.ExpandRequest{
+		TitleTemplate:        customTitle,
+		DefaultTitleTemplate: n.conf.Description,
+	}, alerts)
+	if err != nil {
+		return "", err
+	}
+	return result.Title, nil
+}
+
 // Notify implements the Notifier interface.
 func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 	key, err := notify.ExtractGroupKey(ctx)
@@ -302,6 +323,12 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 	}
 	logger := n.logger.With(slog.Any("group_key", key))
 
+	title, err := n.prepareTitle(ctx, as)
+	if err != nil {
+		n.logger.ErrorContext(ctx, "failed to prepare notification content", errors.Attr(err))
+		return false, err
+	}
+
 	var (
 		alerts    = types.Alerts(as...)
 		data      = notify.GetTemplateData(ctx, n.tmpl, as, logger)
@@ -329,7 +356,7 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 	if n.apiV1 != "" {
 		nf = n.notifyV1
 	}
-	retry, err := nf(ctx, eventType, key, data, details)
+	retry, err := nf(ctx, eventType, key, data, details, title)
 	if err != nil {
 		if ctx.Err() != nil {
 			err = errors.WrapInternalf(err, errors.CodeInternal, "failed to notify PagerDuty: %v", context.Cause(ctx))

pkg/alertmanager/alertmanagernotify/pagerduty/pagerduty_test.go

@@ -9,6 +9,7 @@ import (
 	"context"
 	"encoding/json"
 	"io"
+	"log/slog"
 	"net/http"
 	"net/http/httptest"
 	"net/url"
@@ -17,7 +18,10 @@ import (
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 	"github.com/prometheus/common/promslog"
@@ -30,14 +34,20 @@ import (
 	"github.com/prometheus/alertmanager/types"
 )
 
+func newTestTemplater(tmpl *template.Template) alertmanagertypes.Templater {
+	return alertmanagertemplate.New(tmpl, slog.New(slog.DiscardHandler))
+}
+
 func TestPagerDutyRetryV1(t *testing.T) {
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			ServiceKey: config.Secret("01234567890123456789012345678901"),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -49,13 +59,15 @@ func TestPagerDutyRetryV1(t *testing.T) {
 }
 
 func TestPagerDutyRetryV2(t *testing.T) {
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			RoutingKey: config.Secret("01234567890123456789012345678901"),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -71,13 +83,15 @@ func TestPagerDutyRedactedURLV1(t *testing.T) {
 	defer fn()
 
 	key := "01234567890123456789012345678901"
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			ServiceKey: config.Secret(key),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 	notifier.apiV1 = u.String()
@@ -90,14 +104,16 @@ func TestPagerDutyRedactedURLV2(t *testing.T) {
 	defer fn()
 
 	key := "01234567890123456789012345678901"
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			URL:        &config.URL{URL: u},
 			RoutingKey: config.Secret(key),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -114,13 +130,15 @@ func TestPagerDutyV1ServiceKeyFromFile(t *testing.T) {
 	ctx, u, fn := test.GetContextWithCancelingURL()
 	defer fn()
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			ServiceKeyFile: f.Name(),
 			HTTPConfig:     &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 	notifier.apiV1 = u.String()
@@ -138,14 +156,16 @@ func TestPagerDutyV2RoutingKeyFromFile(t *testing.T) {
 	ctx, u, fn := test.GetContextWithCancelingURL()
 	defer fn()
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			URL:            &config.URL{URL: u},
 			RoutingKeyFile: f.Name(),
 			HTTPConfig:     &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -302,7 +322,8 @@ func TestPagerDutyTemplating(t *testing.T) {
 		t.Run(tc.title, func(t *testing.T) {
 			tc.cfg.URL = &config.URL{URL: u}
 			tc.cfg.HTTPConfig = &commoncfg.HTTPClientConfig{}
-			pd, err := New(tc.cfg, test.CreateTmpl(t), promslog.NewNopLogger())
+			tmpl := test.CreateTmpl(t)
+			pd, err := New(tc.cfg, tmpl, promslog.NewNopLogger(), newTestTemplater(tmpl))
 			require.NoError(t, err)
 			if pd.apiV1 != "" {
 				pd.apiV1 = u.String()
@@ -392,13 +413,15 @@ func TestEventSizeEnforcement(t *testing.T) {
 		Details:    bigDetailsV1,
 	}
 
+	tmpl := test.CreateTmpl(t)
 	notifierV1, err := New(
 		&config.PagerdutyConfig{
 			ServiceKey: config.Secret("01234567890123456789012345678901"),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -420,8 +443,9 @@ func TestEventSizeEnforcement(t *testing.T) {
 			RoutingKey: config.Secret("01234567890123456789012345678901"),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -536,7 +560,8 @@ func TestPagerDutyEmptySrcHref(t *testing.T) {
 		Links:      links,
 	}
 
-	pagerDuty, err := New(&pagerDutyConfig, test.CreateTmpl(t), promslog.NewNopLogger())
+	pdTmpl := test.CreateTmpl(t)
+	pagerDuty, err := New(&pagerDutyConfig, pdTmpl, promslog.NewNopLogger(), newTestTemplater(pdTmpl))
 	require.NoError(t, err)
 
 	ctx := context.Background()
@@ -603,7 +628,8 @@ func TestPagerDutyTimeout(t *testing.T) {
 				Timeout:    tt.timeout,
 			}
 
-			pd, err := New(&cfg, test.CreateTmpl(t), promslog.NewNopLogger())
+			tmpl := test.CreateTmpl(t)
+			pd, err := New(&cfg, tmpl, promslog.NewNopLogger(), newTestTemplater(tmpl))
 			require.NoError(t, err)
 
 			ctx := context.Background()
@@ -881,3 +907,79 @@ func TestRenderDetails(t *testing.T) {
 		})
 	}
 }
+
+func TestPrepareContent(t *testing.T) {
+	prepareContext := func() context.Context {
+		ctx := context.Background()
+		ctx = notify.WithGroupKey(ctx, "1")
+		ctx = notify.WithReceiverName(ctx, "test-receiver")
+		ctx = notify.WithGroupLabels(ctx, model.LabelSet{"alertname": "HighCPU for Payment service"})
+		return ctx
+	}
+	t.Run("default template uses go text template config for title", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		notifier, err := New(
+			&config.PagerdutyConfig{
+				RoutingKey:  config.Secret("01234567890123456789012345678901"),
+				HTTPConfig:  &commoncfg.HTTPClientConfig{},
+				Description: `{{ .CommonLabels.alertname }} ({{ .Status | toUpper }})`,
+			},
+			tmpl,
+			promslog.NewNopLogger(),
+			newTestTemplater(tmpl),
+		)
+		require.NoError(t, err)
+
+		ctx := prepareContext()
+
+		alerts := []*types.Alert{
+			{
+				Alert: model.Alert{
+					Labels:   model.LabelSet{"alertname": "HighCPU for Payment service"},
+					StartsAt: time.Now(),
+					EndsAt:   time.Now().Add(time.Hour),
+				},
+			},
+		}
+
+		title, err := notifier.prepareTitle(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "HighCPU for Payment service (FIRING)", title)
+	})
+
+	t.Run("custom template uses $variable annotation for title", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		notifier, err := New(
+			&config.PagerdutyConfig{
+				RoutingKey: config.Secret("01234567890123456789012345678901"),
+				HTTPConfig: &commoncfg.HTTPClientConfig{},
+			},
+			tmpl,
+			promslog.NewNopLogger(),
+			newTestTemplater(tmpl),
+		)
+		require.NoError(t, err)
+
+		ctx := prepareContext()
+
+		alerts := []*types.Alert{
+			{
+				Alert: model.Alert{
+					Labels: model.LabelSet{
+						"alertname": "HighCPU",
+						"service":   "api-server",
+					},
+					Annotations: model.LabelSet{
+						ruletypes.AnnotationTitleTemplate: "$rule.name on $service is in $alert.status state",
+					},
+					StartsAt: time.Now().Add(-time.Hour),
+					EndsAt:   time.Now(),
+				},
+			},
+		}
+
+		title, err := notifier.prepareTitle(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "HighCPU on api-server is in resolved state", title)
+	})
+}

pkg/alertmanager/alertmanagernotify/receiver.go

@@ -26,7 +26,7 @@ var customNotifierIntegrations = []string{
 	msteamsv2.Integration,
 }
 
-func NewReceiverIntegrations(nc alertmanagertypes.Receiver, tmpl *template.Template, logger *slog.Logger) ([]notify.Integration, error) {
+func NewReceiverIntegrations(nc alertmanagertypes.Receiver, tmpl *template.Template, logger *slog.Logger, templater alertmanagertypes.Templater) ([]notify.Integration, error) {
 	upstreamIntegrations, err := receiver.BuildReceiverIntegrations(nc, tmpl, logger)
 	if err != nil {
 		return nil, err
@@ -53,23 +53,25 @@ func NewReceiverIntegrations(nc alertmanagertypes.Receiver, tmpl *template.Templ
 	}
 
 	for i, c := range nc.WebhookConfigs {
-		add(webhook.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return webhook.New(c, tmpl, l) })
+		add(webhook.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return webhook.New(c, tmpl, l, templater) })
 	}
 	for i, c := range nc.EmailConfigs {
-		add(email.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return email.New(c, tmpl, l), nil })
+		add(email.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) {
+			return email.New(c, tmpl, l, templater), nil
+		})
 	}
 	for i, c := range nc.PagerdutyConfigs {
-		add(pagerduty.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return pagerduty.New(c, tmpl, l) })
+		add(pagerduty.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return pagerduty.New(c, tmpl, l, templater) })
 	}
 	for i, c := range nc.OpsGenieConfigs {
-		add(opsgenie.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return opsgenie.New(c, tmpl, l) })
+		add(opsgenie.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return opsgenie.New(c, tmpl, l, templater) })
 	}
 	for i, c := range nc.SlackConfigs {
-		add(slack.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return slack.New(c, tmpl, l) })
+		add(slack.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return slack.New(c, tmpl, l, templater) })
 	}
 	for i, c := range nc.MSTeamsV2Configs {
 		add(msteamsv2.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) {
-			return msteamsv2.New(c, tmpl, `{{ template "msteamsv2.default.titleLink" . }}`, l)
+			return msteamsv2.New(c, tmpl, `{{ template "msteamsv2.default.titleLink" . }}`, l, templater)
 		})
 	}