chore: fix comment

This is to avoid the contract change in existing v3

.github/workflows/goci.yaml

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

.github/workflows/jsci.yaml

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

cmd/genconfig.go

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

cmd/generate.go

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

conf/example.yaml

@@ -60,6 +60,14 @@ web:
   index: index.html
   # The directory containing the static build files.
   directory: /etc/signoz/web
+  # Settings exposed to the web.
+  settings:
+    posthog:
+      # Whether to enable PostHog in web.
+      enabled: true
+    appcues:
+      # Whether to enable Appcues in web.
+      enabled: true
 
 ##################### Cache #####################
 cache:

docs/api/openapi.yml

@@ -129,6 +129,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
         status:
           $ref: '#/components/schemas/AlertmanagertypesMaintenanceStatus'
         updatedAt:
@@ -272,6 +274,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
       required:
       - name
       - schedule
@@ -5641,6 +5645,19 @@ components:
       type: object
     Sigv4SigV4Config:
       type: object
+    SpantypesEvent:
+      properties:
+        attributeMap:
+          additionalProperties: {}
+          type: object
+        isError:
+          type: boolean
+        name:
+          type: string
+        timeUnixNano:
+          minimum: 0
+          type: integer
+      type: object
     SpantypesFieldContext:
       enum:
       - attribute
@@ -5655,6 +5672,44 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableWaterfallTrace:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregationResult'
+          nullable: true
+          type: array
+        endTimestampMillis:
+          minimum: 0
+          type: integer
+        hasMissingSpans:
+          type: boolean
+        hasMore:
+          type: boolean
+        rootServiceEntryPoint:
+          type: string
+        rootServiceName:
+          type: string
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesWaterfallSpan'
+          nullable: true
+          type: array
+        startTimestampMillis:
+          minimum: 0
+          type: integer
+        totalErrorSpansCount:
+          minimum: 0
+          type: integer
+        totalSpansCount:
+          minimum: 0
+          type: integer
+        uncollapsedSpans:
+          items:
+            type: string
+          nullable: true
+          type: array
+      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -5682,6 +5737,50 @@ components:
       - name
       - condition
       type: object
+    SpantypesPostableWaterfall:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregation'
+          nullable: true
+          type: array
+        limit:
+          minimum: 0
+          type: integer
+        selectedSpanId:
+          type: string
+        uncollapsedSpans:
+          items:
+            type: string
+          nullable: true
+          type: array
+      type: object
+    SpantypesSpanAggregation:
+      properties:
+        aggregation:
+          $ref: '#/components/schemas/SpantypesSpanAggregationType'
+        field:
+          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+      type: object
+    SpantypesSpanAggregationResult:
+      properties:
+        aggregation:
+          $ref: '#/components/schemas/SpantypesSpanAggregationType'
+        field:
+          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+        value:
+          additionalProperties:
+            minimum: 0
+            type: integer
+          nullable: true
+          type: object
+      type: object
+    SpantypesSpanAggregationType:
+      enum:
+      - span_count
+      - execution_time_percentage
+      - duration
+      type: string
     SpantypesSpanMapper:
       properties:
         config:
@@ -5812,6 +5911,78 @@ components:
           nullable: true
           type: string
       type: object
+    SpantypesWaterfallSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          nullable: true
+          type: object
+        db_name:
+          type: string
+        db_operation:
+          type: string
+        duration_nano:
+          minimum: 0
+          type: integer
+        events:
+          items:
+            $ref: '#/components/schemas/SpantypesEvent'
+          nullable: true
+          type: array
+        external_http_method:
+          type: string
+        external_http_url:
+          type: string
+        flags:
+          minimum: 0
+          type: integer
+        has_children:
+          type: boolean
+        has_error:
+          type: boolean
+        http_host:
+          type: string
+        http_method:
+          type: string
+        http_url:
+          type: string
+        is_remote:
+          type: string
+        kind_string:
+          type: string
+        level:
+          minimum: 0
+          type: integer
+        name:
+          type: string
+        parent_span_id:
+          type: string
+        resource:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        response_status_code:
+          type: string
+        span_id:
+          type: string
+        status_code:
+          type: integer
+        status_code_string:
+          type: string
+        status_message:
+          type: string
+        sub_tree_node_count:
+          minimum: 0
+          type: integer
+        time_unix:
+          minimum: 0
+          type: integer
+        trace_id:
+          type: string
+        trace_state:
+          type: string
+      type: object
     TelemetrytypesFieldContext:
       enum:
       - metric
@@ -5904,179 +6075,6 @@ components:
     TimeDuration:
       format: int64
       type: integer
-    TracedetailtypesEvent:
-      properties:
-        attributeMap:
-          additionalProperties: {}
-          type: object
-        isError:
-          type: boolean
-        name:
-          type: string
-        timeUnixNano:
-          minimum: 0
-          type: integer
-      type: object
-    TracedetailtypesGettableWaterfallTrace:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesSpanAggregationResult'
-          nullable: true
-          type: array
-        endTimestampMillis:
-          minimum: 0
-          type: integer
-        hasMissingSpans:
-          type: boolean
-        hasMore:
-          type: boolean
-        rootServiceEntryPoint:
-          type: string
-        rootServiceName:
-          type: string
-        serviceNameToTotalDurationMap:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
-        spans:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesWaterfallSpan'
-          nullable: true
-          type: array
-        startTimestampMillis:
-          minimum: 0
-          type: integer
-        totalErrorSpansCount:
-          minimum: 0
-          type: integer
-        totalSpansCount:
-          minimum: 0
-          type: integer
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesPostableWaterfall:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesSpanAggregation'
-          nullable: true
-          type: array
-        limit:
-          minimum: 0
-          type: integer
-        selectedSpanId:
-          type: string
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesSpanAggregation:
-      properties:
-        aggregation:
-          $ref: '#/components/schemas/TracedetailtypesSpanAggregationType'
-        field:
-          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-      type: object
-    TracedetailtypesSpanAggregationResult:
-      properties:
-        aggregation:
-          $ref: '#/components/schemas/TracedetailtypesSpanAggregationType'
-        field:
-          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-        value:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
-      type: object
-    TracedetailtypesSpanAggregationType:
-      enum:
-      - span_count
-      - execution_time_percentage
-      - duration
-      type: string
-    TracedetailtypesWaterfallSpan:
-      properties:
-        attributes:
-          additionalProperties: {}
-          nullable: true
-          type: object
-        db_name:
-          type: string
-        db_operation:
-          type: string
-        duration_nano:
-          minimum: 0
-          type: integer
-        events:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesEvent'
-          nullable: true
-          type: array
-        external_http_method:
-          type: string
-        external_http_url:
-          type: string
-        flags:
-          minimum: 0
-          type: integer
-        has_children:
-          type: boolean
-        has_error:
-          type: boolean
-        http_host:
-          type: string
-        http_method:
-          type: string
-        http_url:
-          type: string
-        is_remote:
-          type: string
-        kind_string:
-          type: string
-        level:
-          minimum: 0
-          type: integer
-        name:
-          type: string
-        parent_span_id:
-          type: string
-        resource:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        response_status_code:
-          type: string
-        span_id:
-          type: string
-        status_code:
-          type: integer
-        status_code_string:
-          type: string
-        status_message:
-          type: string
-        sub_tree_node_count:
-          minimum: 0
-          type: integer
-        time_unix:
-          minimum: 0
-          type: integer
-        trace_id:
-          type: string
-        trace_state:
-          type: string
-      type: object
     TypesAlertStatus:
       properties:
         inhibitedBy:
@@ -18896,7 +18894,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/TracedetailtypesPostableWaterfall'
+              $ref: '#/components/schemas/SpantypesPostableWaterfall'
       responses:
         "200":
           content:
@@ -18904,7 +18902,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/TracedetailtypesGettableWaterfallTrace'
+                    $ref: '#/components/schemas/SpantypesGettableWaterfallTrace'
                   status:
                     type: string
                 required:
@@ -18950,6 +18948,77 @@ paths:
       summary: Get waterfall view for a trace
       tags:
       - tracedetail
+  /api/v4/traces/{traceID}/waterfall:
+    post:
+      deprecated: false
+      description: 'Two-step fetch: minimal fields for all spans to build the tree,
+        full fields only for the visible window. Aggregations are not included in
+        the response.'
+      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 (OOM-safe)
+      tags:
+      - tracedetail
   /api/v5/query_range:
     post:
       deprecated: false

docs/config/web-settings.json

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

ee/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 {

frontend/index.html

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

frontend/jest.config.ts

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

frontend/package.json

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

frontend/pnpm-lock.yaml

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

frontend/src/AppRoutes/index.tsx

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

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

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

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

@@ -14,8 +14,10 @@ import type {
 import type {
 	GetWaterfall200,
 	GetWaterfallPathParameters,
+	GetWaterfallV4200,
+	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
-	TracedetailtypesPostableWaterfallDTO,
+	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -27,14 +29,14 @@ import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
  */
 export const getWaterfall = (
 	{ traceID }: GetWaterfallPathParameters,
-	tracedetailtypesPostableWaterfallDTO?: BodyType<TracedetailtypesPostableWaterfallDTO>,
+	spantypesPostableWaterfallDTO?: BodyType<SpantypesPostableWaterfallDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetWaterfall200>({
 		url: `/api/v3/traces/${traceID}/waterfall`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: tracedetailtypesPostableWaterfallDTO,
+		data: spantypesPostableWaterfallDTO,
 		signal,
 	});
 };
@@ -48,7 +50,7 @@ export const getGetWaterfallMutationOptions = <
 		TError,
 		{
 			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		},
 		TContext
 	>;
@@ -57,7 +59,7 @@ export const getGetWaterfallMutationOptions = <
 	TError,
 	{
 		pathParams: GetWaterfallPathParameters;
-		data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+		data?: BodyType<SpantypesPostableWaterfallDTO>;
 	},
 	TContext
 > => {
@@ -74,7 +76,7 @@ export const getGetWaterfallMutationOptions = <
 		Awaited<ReturnType<typeof getWaterfall>>,
 		{
 			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -89,7 +91,7 @@ export type GetWaterfallMutationResult = NonNullable<
 	Awaited<ReturnType<typeof getWaterfall>>
 >;
 export type GetWaterfallMutationBody =
-	| BodyType<TracedetailtypesPostableWaterfallDTO>
+	| BodyType<SpantypesPostableWaterfallDTO>
 	| undefined;
 export type GetWaterfallMutationError = ErrorType<RenderErrorResponseDTO>;
 
@@ -105,7 +107,7 @@ export const useGetWaterfall = <
 		TError,
 		{
 			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		},
 		TContext
 	>;
@@ -114,9 +116,108 @@ export const useGetWaterfall = <
 	TError,
 	{
 		pathParams: GetWaterfallPathParameters;
-		data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+		data?: BodyType<SpantypesPostableWaterfallDTO>;
 	},
 	TContext
 > => {
 	return useMutation(getGetWaterfallMutationOptions(options));
 };
+/**
+ * Two-step fetch: minimal fields for all spans to build the tree, full fields only for the visible window. Aggregations are not included in the response.
+ * @summary Get waterfall view for a trace (OOM-safe)
+ */
+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 (OOM-safe)
+ */
+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/Logs/ListLogView/index.tsx

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

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

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

frontend/src/components/ValueGraph/index.tsx

@@ -93,7 +93,6 @@ function ValueGraph({
 		<div
 			ref={containerRef}
 			className="value-graph-container"
-			data-testid="value-graph-container"
 			style={{
 				backgroundColor:
 					threshold.thresholdFormat === 'Background'

frontend/src/constants/features.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/FormAlertRules/index.tsx

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

frontend/src/container/GridTableComponent/index.tsx

@@ -159,8 +159,6 @@ function GridTableComponent({
 				if (threshold && idx !== -1) {
 					return (
 						<div
-							data-testid="threshold-styled-cell"
-							data-threshold-format={threshold.thresholdFormat}
 							style={
 								threshold.thresholdFormat === 'Background'
 									? { backgroundColor: threshold.thresholdColor }

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

@@ -231,14 +231,12 @@ function Threshold({
 							type="text"
 							icon={<Pencil size={14} />}
 							className="edit-btn"
-							data-testid="threshold-edit-btn"
 							onClick={editHandler}
 						/>
 						<Button
 							type="text"
 							icon={<Trash2 size={14} />}
 							className="delete-btn"
-							data-testid="threshold-delete-btn"
 							onClick={deleteHandler}
 						/>
 					</div>

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

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

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

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

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Check } from '@signozhq/icons';
+import { Check, Info } from '@signozhq/icons';
 import {
 	Button,
 	DatePicker,
@@ -11,6 +11,7 @@ import {
 	Select,
 	SelectProps,
 	Spin,
+	Tooltip,
 } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
@@ -78,6 +79,7 @@ interface PlannedDowntimeFormData {
 	alertRules: DefaultOptionType[];
 	recurrenceSelect?: AlertmanagertypesRecurrenceDTO;
 	timezone?: string;
+	scope?: string;
 }
 
 const customFormat = DATE_TIME_FORMATS.ORDINAL_DATETIME;
@@ -144,6 +146,7 @@ export function PlannedDowntimeForm(
 					.map((alert) => alert.value)
 					.filter((alert) => alert !== undefined) as string[],
 				name: values.name,
+				scope: values.scope,
 				schedule: {
 					startTime: values.startTime?.format(),
 					endTime: values.endTime?.format(),
@@ -278,6 +281,7 @@ export function PlannedDowntimeForm(
 				duration: getDurationInfo(schedule?.recurrence?.duration)?.value ?? '',
 			} as AlertmanagertypesRecurrenceDTO,
 			timezone: schedule?.timezone as string,
+			scope: initialValues.scope || '',
 		};
 	}, [initialValues, alertOptions]);
 
@@ -488,6 +492,36 @@ export function PlannedDowntimeForm(
 						</Select>
 					</Form.Item>
 				</div>
+				<Form.Item
+					label={
+						<span>
+							Scope&nbsp;
+							<Tooltip
+								mouseLeaveDelay={0.3}
+								title={
+									<span>
+										Scope the planned downtime by alert labels.{' '}
+										<a
+											href="https://signoz.io/docs/alerts-management/planned-maintenance/#scoping-with-label-expressions"
+											target="_blank"
+											rel="noopener noreferrer"
+										>
+											Learn more
+										</a>
+									</span>
+								}
+							>
+								<Info size={13} />
+							</Tooltip>
+						</span>
+					}
+					name="scope"
+				>
+					<Input.TextArea
+						placeholder='e.g. env = "prod" AND region = "us-east-1"'
+						autoSize={{ minRows: 2, maxRows: 4 }}
+					/>
+				</Form.Item>
 				<Form.Item style={{ marginBottom: 0 }}>
 					<ModalButtonWrapper>
 						<Button

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

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

frontend/src/lib/uPlotV2/utils/dataUtils.ts

@@ -1,3 +1,9 @@
+import {
+	fillMissingXAxisTimestamps,
+	getXAxisTimestamps,
+} from 'container/DashboardContainer/visualization/panels/utils';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
 /**
  * Checks if a value is invalid for plotting
  *
@@ -52,6 +58,28 @@ export function normalizePlotValue(
 	return value as number;
 }
 
+/**
+ * Returns true if at most one entry in `values` is a valid plot value.
+ *
+ * Used to decide whether a series should render as a single point (drawStyle:
+ * Points) vs a line — a continuous line with only one visible sample is
+ * invisible to the user.
+ */
+export function hasSingleVisiblePoint(
+	values: ReadonlyArray<readonly [unknown, unknown]> | undefined,
+): boolean {
+	let validPointCount = 0;
+	for (const [, rawValue] of values ?? []) {
+		if (!isInvalidPlotValue(rawValue)) {
+			validPointCount += 1;
+			if (validPointCount > 1) {
+				return false;
+			}
+		}
+	}
+	return true;
+}
+
 export interface SeriesSpanGapsOption {
 	spanGaps?: boolean | number;
 }
@@ -226,3 +254,21 @@ export function applySpanGapsToAlignedData(
 
 	return [newX, ...transformedSeries] as uPlot.AlignedData;
 }
+
+/** * Transforms raw API response into aligned data format expected by uPlot.
+ *
+ * The API response contains multiple series of time-value pairs, each with its
+ * own set of timestamps. uPlot requires a single shared x-axis (timestamps)
+ * and separate y-value arrays for each series, aligned by index. This function
+ * extracts the unique sorted timestamps across all series and fills in missing
+ * values with null to maintain alignment.
+ */
+export const prepareChartData = (
+	apiResponse: MetricRangePayloadProps,
+): uPlot.AlignedData => {
+	const seriesList = apiResponse?.data?.result || [];
+	const timestampArr = getXAxisTimestamps(seriesList);
+	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
+
+	return [timestampArr, ...yAxisValuesArr];
+};

frontend/src/pages/TracesExplorer/Filter/DurationSection.tsx

@@ -7,8 +7,8 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { Input, Slider } from 'antd';
-import type { SliderRangeProps } from 'antd/es/slider';
+import { Input } from 'antd';
+import { Slider } from '@signozhq/ui/slider';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 
@@ -88,16 +88,15 @@ export function DurationSection(props: DurationProps): JSX.Element {
 		debouncedFunction(min, max);
 	};
 
-	const onRangeHandler: SliderRangeProps['onChange'] = ([min, max]) => {
+	const onRangeHandler = (value: number | number[]): void => {
+		const [min, max] = value as number[];
 		updateDurationFilter(min.toString(), max.toString());
 	};
 
-	const TipComponent = useCallback((value: undefined | number) => {
-		if (value === undefined) {
-			return <div />;
-		}
-		return <div>{`${value?.toString()}ms`}</div>;
-	}, []);
+	const TipComponent = useCallback(
+		(value: number) => <div>{`${value.toString()}ms`}</div>,
+		[],
+	);
 
 	return (
 		<div>
@@ -123,13 +122,14 @@ export function DurationSection(props: DurationProps): JSX.Element {
 					addonAfter="ms"
 				/>
 			</div>
-			<div>
+			<div className="duration-input-slider">
 				<Slider
 					min={0}
 					max={100000}
 					range
 					tooltip={{ formatter: TipComponent }}
-					onChange={([min, max]): void => {
+					onChange={(value): void => {
+						const [min, max] = value as number[];
 						onRangeSliderHandler([String(min), String(max)]);
 					}}
 					onAfterChange={onRangeHandler}

frontend/src/types/generated/webSettings.ts

@@ -0,0 +1,12 @@
+/* AUTO GENERATED FILE - DO NOT EDIT - GENERATED FROM docs/config/web-settings.json */
+
+export interface WebSettings {
+	appcues: Appcues;
+	posthog: Posthog;
+}
+export interface Appcues {
+	enabled: boolean;
+}
+export interface Posthog {
+	enabled: boolean;
+}

frontend/src/typings/window.ts

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { compose, Store } from 'redux';
+import type { WebSettings } from 'types/generated/webSettings';
 
 declare global {
 	interface Window {
@@ -7,6 +8,7 @@ declare global {
 		pylon: any;
 		Appcues: Record<string, any>;
 		__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
+		signozBootData?: { settings: WebSettings | null };
 	}
 }
 

frontend/src/utils/__tests__/bootData.test.ts

@@ -0,0 +1,74 @@
+export {};
+
+type BootData = typeof import('../bootData');
+
+function loadModule(settings?: object | null): BootData {
+	(window as any).signozBootData =
+		settings !== undefined ? { settings } : undefined;
+	let mod!: BootData;
+	jest.isolateModules(() => {
+		// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
+		mod = require('../bootData');
+	});
+	return mod;
+}
+
+afterEach(() => {
+	delete (window as any).signozBootData;
+});
+
+describe('when window.signozBootData is absent', () => {
+	it('defaults posthog and appcues to enabled', () => {
+		const { bootSettings } = loadModule();
+		expect(bootSettings.posthog.enabled).toBe(true);
+		expect(bootSettings.appcues.enabled).toBe(true);
+	});
+});
+
+describe('when window.signozBootData.settings is null (injection failed)', () => {
+	it('defaults posthog and appcues to enabled', () => {
+		const { bootSettings } = loadModule(null);
+		expect(bootSettings.posthog.enabled).toBe(true);
+		expect(bootSettings.appcues.enabled).toBe(true);
+	});
+});
+
+describe('when window.signozBootData.settings is populated', () => {
+	it('reads posthog enabled: true', () => {
+		const { bootSettings } = loadModule({ posthog: { enabled: true } });
+		expect(bootSettings.posthog.enabled).toBe(true);
+	});
+
+	it('reads posthog enabled: false', () => {
+		const { bootSettings } = loadModule({ posthog: { enabled: false } });
+		expect(bootSettings.posthog.enabled).toBe(false);
+	});
+
+	it('reads appcues enabled: true', () => {
+		const { bootSettings } = loadModule({ appcues: { enabled: true } });
+		expect(bootSettings.appcues.enabled).toBe(true);
+	});
+
+	it('reads appcues enabled: false', () => {
+		const { bootSettings } = loadModule({ appcues: { enabled: false } });
+		expect(bootSettings.appcues.enabled).toBe(false);
+	});
+
+	it('missing sub-namespace defaults to enabled', () => {
+		const { bootSettings } = loadModule({ posthog: { enabled: false } });
+		expect(bootSettings.appcues.enabled).toBe(true);
+	});
+});
+
+describe('when window.signozBootData exists but settings is undefined', () => {
+	it('defaults posthog and appcues to enabled', () => {
+		(window as any).signozBootData = {};
+		let mod!: BootData;
+		jest.isolateModules(() => {
+			// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
+			mod = require('../bootData');
+		});
+		expect(mod.bootSettings.posthog.enabled).toBe(true);
+		expect(mod.bootSettings.appcues.enabled).toBe(true);
+	});
+});

frontend/src/utils/bootData.ts

@@ -0,0 +1,11 @@
+import type { WebSettings } from 'types/generated/webSettings';
+
+const raw = window.signozBootData?.settings as
+	| Partial<WebSettings>
+	| null
+	| undefined;
+
+export const bootSettings: Readonly<WebSettings> = {
+	posthog: { enabled: raw?.posthog?.enabled ?? true },
+	appcues: { enabled: raw?.appcues?.enabled ?? true },
+};

frontend/vite.config.ts

@@ -23,6 +23,20 @@ function devBasePathPlugin(basePath: string): Plugin {
 	};
 }
 
+function devBootDataPlugin(env: Record<string, string>): Plugin {
+	return {
+		name: 'dev-boot-data',
+		apply: 'serve',
+		transformIndexHtml(html): string {
+			const settings = {
+				posthog: { enabled: env.VITE_POSTHOG_ENABLED !== 'false' },
+				appcues: { enabled: env.VITE_APPCUES_ENABLED !== 'false' },
+			};
+			return html.replaceAll('[[.Settings]]', JSON.stringify(settings));
+		},
+	};
+}
+
 function rawMarkdownPlugin(): Plugin {
 	return {
 		name: 'raw-markdown',
@@ -47,6 +61,7 @@ export default defineConfig(({ mode }): UserConfig => {
 		tsconfigPaths(),
 		rawMarkdownPlugin(),
 		devBasePathPlugin(basePath),
+		devBootDataPlugin(env),
 		react(),
 		createHtmlPlugin({
 			inject: {

pkg/alertmanager/alertmanagerserver/maintenance_muter.go

@@ -42,7 +42,14 @@ func (m *MaintenanceMuter) Mutes(ctx context.Context, lset model.LabelSet) bool
 	}
 	now := time.Now()
 	for _, mw := range m.getMaintenances(ctx) {
-		if mw.ShouldSkip(ruleID, now) {
+		skip, err := mw.ShouldSkip(ruleID, now, lset)
+		if err != nil {
+			m.logger.ErrorContext(ctx, "failed to test maintenance window skip condition",
+				slog.String("maintenance_id", mw.ID.StringValue()),
+				slog.String("scope", mw.Scope),
+				slog.Any("error", err),
+			)
+		} else if skip {
 			return true
 		}
 	}
@@ -61,7 +68,14 @@ func (m *MaintenanceMuter) MutedBy(ctx context.Context, lset model.LabelSet) []s
 	var ids []string
 	now := time.Now()
 	for _, mw := range m.getMaintenances(ctx) {
-		if mw.ShouldSkip(ruleID, now) {
+		skip, err := mw.ShouldSkip(ruleID, now, lset)
+		if err != nil {
+			m.logger.ErrorContext(ctx, "failed to test maintenance window skip condition",
+				slog.String("maintenance_id", mw.ID.StringValue()),
+				slog.String("scope", mw.Scope),
+				slog.Any("error", err),
+			)
+		} else if skip {
 			ids = append(ids, mw.ID.String())
 		}
 	}

pkg/alertmanager/alertmanagerserver/server_e2e_test.go

@@ -41,7 +41,7 @@ func TestEndToEndAlertManagerFlow(t *testing.T) {
 			Identifiable: types.Identifiable{
 				ID: valuer.GenerateUUID(),
 			},
-			Expression:     `ruleId == "high-cpu-usage" && severity == "critical"`,
+			Expression:     `ruleId = "high-cpu-usage" AND severity = "critical"`,
 			ExpressionKind: alertmanagertypes.RuleBasedExpression,
 			Name:           "high-cpu-usage",
 			Description:    "High CPU critical alerts to webhook",
@@ -53,7 +53,7 @@ func TestEndToEndAlertManagerFlow(t *testing.T) {
 			Identifiable: types.Identifiable{
 				ID: valuer.GenerateUUID(),
 			},
-			Expression:     `ruleId == "high-cpu-usage" && severity == "warning"`,
+			Expression:     `ruleId = "high-cpu-usage" AND severity = "warning"`,
 			ExpressionKind: alertmanagertypes.RuleBasedExpression,
 			Name:           "high-cpu-usage",
 			Description:    "High CPU warning alerts to webhook",
@@ -87,18 +87,25 @@ func TestEndToEndAlertManagerFlow(t *testing.T) {
 	err = notificationManager.SetNotificationConfig(orgID, "high-cpu-usage", &notifConfig)
 	require.NoError(t, err)
 
-	mwID := valuer.GenerateUUID()
+	activeSchedule := &alertmanagertypes.Schedule{
+		Timezone:  "UTC",
+		StartTime: time.Now().Add(-time.Hour),
+		EndTime:   time.Now().Add(time.Hour),
+	}
+	// mwRuleIDAndScope: only critical high-cpu-usage alerts.
+	mwRuleIDAndScope := valuer.GenerateUUID()
+	// mwRuleIDOnly: all high-cpu-usage alerts regardless of severity.
+	mwRuleIDOnly := valuer.GenerateUUID()
+	// mwScopeOnly: all critical alerts regardless of rule ID.
+	mwScopeOnly := valuer.GenerateUUID()
+
 	maintenanceStore := alertmanagertypestest.NewMockMaintenanceStore(t)
 	maintenanceStore.On("ListPlannedMaintenance", mock.Anything, orgID).Return(
-		[]*alertmanagertypes.PlannedMaintenance{{
-			ID: mwID,
-			Schedule: &alertmanagertypes.Schedule{
-				Timezone:  "UTC",
-				StartTime: time.Now().Add(-time.Hour),
-				EndTime:   time.Now().Add(time.Hour),
-			},
-			RuleIDs: []string{"high-cpu-usage"},
-		}}, nil,
+		[]*alertmanagertypes.PlannedMaintenance{
+			{ID: mwRuleIDAndScope, Schedule: activeSchedule, RuleIDs: []string{"high-cpu-usage"}, Scope: `severity = "critical"`},
+			{ID: mwRuleIDOnly, Schedule: activeSchedule, RuleIDs: []string{"high-cpu-usage"}},
+			{ID: mwScopeOnly, Schedule: activeSchedule, Scope: `severity = "critical"`},
+		}, nil,
 	)
 
 	srvCfg := NewConfig()
@@ -249,18 +256,42 @@ func TestEndToEndAlertManagerFlow(t *testing.T) {
 		require.Equal(t, "{__receiver__=\"webhook\"}:{cluster=\"prod-cluster\", instance=\"server-03\", ruleId=\"high-cpu-usage\"}", alertGroups[2].GroupKey)
 	})
 
-	t.Run("verify_muting", func(t *testing.T) {
-		req, err := http.NewRequest(http.MethodGet, "/alerts", nil)
-		require.NoError(t, err)
-		params, err := alertmanagertypes.NewGettableAlertsParams(req)
-		require.NoError(t, err)
-		alerts, err := server.GetAlerts(ctx, params)
-		require.NoError(t, err)
+	req, err := http.NewRequest(http.MethodGet, "/alerts", nil)
+	require.NoError(t, err)
+	params, err := alertmanagertypes.NewGettableAlertsParams(req)
+	require.NoError(t, err)
+	alerts, err := server.GetAlerts(ctx, params)
+	require.NoError(t, err)
+
+	t.Run("verify_muting_ruleid_and_scope", func(t *testing.T) {
+		// Window with ruleID + scope mutes only alerts matching both.
+		for _, alert := range alerts {
+			if alert.Labels["ruleId"] == "high-cpu-usage" && alert.Labels["severity"] == "critical" {
+				require.Contains(t, alert.Status.MutedBy, mwRuleIDAndScope.String())
+			} else {
+				require.NotContains(t, alert.Status.MutedBy, mwRuleIDAndScope.String())
+			}
+		}
+	})
+
+	t.Run("verify_muting_ruleid_only", func(t *testing.T) {
+		// Window with ruleID but no scope mutes all severities for that rule.
 		for _, alert := range alerts {
 			if alert.Labels["ruleId"] == "high-cpu-usage" {
-				require.Equal(t, []string{mwID.String()}, alert.Status.MutedBy)
+				require.Contains(t, alert.Status.MutedBy, mwRuleIDOnly.String())
 			} else {
-				require.Empty(t, alert.Status.MutedBy)
+				require.NotContains(t, alert.Status.MutedBy, mwRuleIDOnly.String())
+			}
+		}
+	})
+
+	t.Run("verify_muting_scope_only", func(t *testing.T) {
+		// Window with scope but no ruleIDs mutes all critical alerts regardless of rule.
+		for _, alert := range alerts {
+			if alert.Labels["severity"] == "critical" {
+				require.Contains(t, alert.Status.MutedBy, mwScopeOnly.String())
+			} else {
+				require.NotContains(t, alert.Status.MutedBy, mwScopeOnly.String())
 			}
 		}
 	})

pkg/alertmanager/alertmanagerstore/sqlalertmanagerstore/maintenance.go

@@ -89,6 +89,7 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 		Description: maintenance.Description,
 		Schedule:    maintenance.Schedule,
 		OrgID:       claims.OrgID,
+		Scope:       maintenance.Scope,
 	}
 
 	maintenanceRules := make([]*alertmanagertypes.StorablePlannedMaintenanceRule, 0)
@@ -123,7 +124,6 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 				NewInsert().
 				Model(&maintenanceRules).
 				Exec(ctx)
-
 			if err != nil {
 				return err
 			}
@@ -141,6 +141,7 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 		Description: storablePlannedMaintenance.Description,
 		Schedule:    storablePlannedMaintenance.Schedule,
 		RuleIDs:     maintenance.AlertIds,
+		Scope:       maintenance.Scope,
 		CreatedAt:   storablePlannedMaintenance.CreatedAt,
 		CreatedBy:   storablePlannedMaintenance.CreatedBy,
 		UpdatedAt:   storablePlannedMaintenance.UpdatedAt,
@@ -189,6 +190,7 @@ func (r *maintenance) UpdatePlannedMaintenance(ctx context.Context, maintenance
 		Description: maintenance.Description,
 		Schedule:    maintenance.Schedule,
 		OrgID:       claims.OrgID,
+		Scope:       maintenance.Scope,
 	}
 
 	storablePlannedMaintenanceRules := make([]*alertmanagertypes.StorablePlannedMaintenanceRule, 0)
@@ -224,7 +226,6 @@ func (r *maintenance) UpdatePlannedMaintenance(ctx context.Context, maintenance
 			Model(new(alertmanagertypes.StorablePlannedMaintenanceRule)).
 			Where("planned_maintenance_id = ?", storablePlannedMaintenance.ID.StringValue()).
 			Exec(ctx)
-
 		if err != nil {
 			return err
 		}
@@ -241,7 +242,6 @@ func (r *maintenance) UpdatePlannedMaintenance(ctx context.Context, maintenance
 		}
 
 		return nil
-
 	})
 	if err != nil {
 		return err

pkg/alertmanager/nfmanager/rulebasednotification/provider.go

@@ -3,7 +3,6 @@ package rulebasednotification
 import (
 	"context"
 	"log/slog"
-	"strings"
 	"sync"
 
 	"github.com/SigNoz/signoz/pkg/alertmanager/nfmanager"
@@ -235,65 +234,13 @@ func (r *provider) Match(ctx context.Context, orgID string, ruleID string, set m
 	return matchedChannels, nil
 }
 
-// convertLabelSetToEnv converts a flat label set with dotted keys into a nested map structure for expr env.
-// when both a leaf and a deeper nested path exist (e.g. "foo" and "foo.bar"),
-// the nested structure takes precedence. That means we will replace an existing leaf at any
-// intermediate path with a map so we can materialize the deeper structure.
-// TODO(srikanthccv): we need a better solution to handle this, remove the following
-// when we update the expr to support dotted keys.
+// convertLabelSetToEnv delegates to alertmanagertypes.ConvertLabelSetToEnv and
+// logs when a key is a prefix of another (e.g. "foo" alongside "foo.bar").
 func (r *provider) convertLabelSetToEnv(ctx context.Context, labelSet model.LabelSet) map[string]interface{} {
-	env := make(map[string]interface{})
-
-	logForReview := false
-
-	for lk, lv := range labelSet {
-		key := strings.TrimSpace(string(lk))
-		value := string(lv)
-
-		if strings.Contains(key, ".") {
-			parts := strings.Split(key, ".")
-			current := env
-
-			for i, raw := range parts {
-				part := strings.TrimSpace(raw)
-
-				last := i == len(parts)-1
-				if last {
-					if _, isMap := current[part].(map[string]interface{}); isMap {
-						logForReview = true
-						// deeper structure already exists; do not overwrite.
-						break
-					}
-					current[part] = value
-					break
-				}
-
-				// ensure a map so we can keep descending.
-				if nextMap, ok := current[part].(map[string]interface{}); ok {
-					current = nextMap
-					continue
-				}
-
-				// if absent or a leaf, replace it with a map.
-				newMap := make(map[string]interface{})
-				current[part] = newMap
-				current = newMap
-			}
-			continue
-		}
-
-		// if a map already sits here (due to nested keys), keep the map (nested wins).
-		if _, isMap := env[key].(map[string]interface{}); isMap {
-			logForReview = true
-			continue
-		}
-		env[key] = value
-	}
-
-	if logForReview {
+	env, conflict := alertmanagertypes.ConvertLabelSetToEnv(labelSet)
+	if conflict {
 		r.settings.Logger().InfoContext(ctx, "found label set with conflicting prefix dotted keys", slog.Any("labels", labelSet))
 	}
-
 	return env
 }
 

pkg/alertmanager/nfmanager/rulebasednotification/provider_test.go

@@ -925,72 +925,3 @@ func TestProvider_CreateRoutes(t *testing.T) {
 		})
 	}
 }
-
-func TestConvertLabelSetToEnv(t *testing.T) {
-	tests := []struct {
-		name     string
-		labelSet model.LabelSet
-		expected map[string]interface{}
-	}{
-		{
-			name: "simple keys",
-			labelSet: model.LabelSet{
-				"key1": "value1",
-				"key2": "value2",
-			},
-			expected: map[string]interface{}{
-				"key1": "value1",
-				"key2": "value2",
-			},
-		},
-		{
-			name: "nested keys",
-			labelSet: model.LabelSet{
-				"foo.bar": "value1",
-				"foo.baz": "value2",
-			},
-			expected: map[string]interface{}{
-				"foo": map[string]interface{}{
-					"bar": "value1",
-					"baz": "value2",
-				},
-			},
-		},
-		{
-			name: "conflict - nested structure wins",
-			labelSet: model.LabelSet{
-				"foo.bar.baz": "deep",
-				"foo.bar":     "shallow",
-			},
-			expected: map[string]interface{}{
-				"foo": map[string]interface{}{
-					"bar": map[string]interface{}{
-						"baz": "deep",
-					},
-				},
-			},
-		},
-		{
-			name: "conflict - leaf value vs nested",
-			labelSet: model.LabelSet{
-				"foo.bar": "value",
-				"foo":     "should_be_ignored",
-			},
-			expected: map[string]interface{}{
-				"foo": map[string]interface{}{
-					"bar": "value",
-				},
-			},
-		},
-	}
-
-	provider := &provider{
-		settings: factory.NewScopedProviderSettings(createTestProviderSettings(), "provider_test"),
-	}
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			result := provider.convertLabelSetToEnv(context.Background(), tt.labelSet)
-			assert.Equal(t, tt.expected, result)
-		})
-	}
-}

pkg/apiserver/signozapiserver/tracedetail.go

@@ -5,7 +5,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/http/handler"
 	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/tracedetailtypes"
+	"github.com/SigNoz/signoz/pkg/types/spantypes"
 	"github.com/gorilla/mux"
 )
 
@@ -17,9 +17,28 @@ func (provider *provider) addTraceDetailRoutes(router *mux.Router) error {
 			Tags:                []string{"tracedetail"},
 			Summary:             "Get waterfall view for a trace",
 			Description:         "Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination",
-			Request:             new(tracedetailtypes.PostableWaterfall),
+			Request:             new(spantypes.PostableWaterfall),
 			RequestContentType:  "application/json",
-			Response:            new(tracedetailtypes.GettableWaterfallTrace),
+			Response:            new(spantypes.GettableWaterfallTrace),
+			ResponseContentType: "application/json",
+			SuccessStatusCode:   http.StatusOK,
+			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		},
+	)).Methods(http.MethodPost).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v4/traces/{traceID}/waterfall", handler.New(
+		provider.authzMiddleware.ViewAccess(provider.traceDetailHandler.GetWaterfallV4),
+		handler.OpenAPIDef{
+			ID:                  "GetWaterfallV4",
+			Tags:                []string{"tracedetail"},
+			Summary:             "Get waterfall view for a trace (OOM-safe)",
+			Description:         "Two-step fetch: minimal fields for all spans to build the tree, full fields only for the visible window. Aggregations are not included in the response.",
+			Request:             new(spantypes.PostableWaterfall),
+			RequestContentType:  "application/json",
+			Response:            new(spantypes.GettableWaterfallTrace),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},

pkg/config/envprovider/provider_test.go

@@ -2,6 +2,8 @@ package envprovider
 
 import (
 	"context"
+	"os"
+	"strings"
 	"testing"
 
 	"github.com/SigNoz/signoz/pkg/config"
@@ -9,7 +11,21 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
+// clearSignozEnv unsets all existing SIGNOZ_* env vars for the duration of the test.
+func clearSignozEnv(t *testing.T) {
+	t.Helper()
+	for _, kv := range os.Environ() {
+		if strings.HasPrefix(kv, prefix) {
+			key := strings.SplitN(kv, "=", 2)[0]
+			orig, _ := os.LookupEnv(key)
+			os.Unsetenv(key)
+			t.Cleanup(func() { os.Setenv(key, orig) })
+		}
+	}
+}
+
 func TestGetWithStrings(t *testing.T) {
+	clearSignozEnv(t)
 	t.Setenv("SIGNOZ_K1_K2", "string")
 	t.Setenv("SIGNOZ_K3__K4", "string")
 	t.Setenv("SIGNOZ_K5__K6_K7__K8", "string")
@@ -31,6 +47,7 @@ func TestGetWithStrings(t *testing.T) {
 }
 
 func TestGetWithNoPrefix(t *testing.T) {
+	clearSignozEnv(t)
 	t.Setenv("K1_K2", "string")
 	t.Setenv("K3_K4", "string")
 	expected := map[string]any{}
@@ -43,6 +60,7 @@ func TestGetWithNoPrefix(t *testing.T) {
 }
 
 func TestGetWithGoTypes(t *testing.T) {
+	clearSignozEnv(t)
 	t.Setenv("SIGNOZ_BOOL", "true")
 	t.Setenv("SIGNOZ_STRING", "string")
 	t.Setenv("SIGNOZ_INT", "1")

pkg/flagger/registry.go

@@ -3,14 +3,15 @@ package flagger
 import "github.com/SigNoz/signoz/pkg/types/featuretypes"
 
 var (
-	FeatureUseSpanMetrics    = featuretypes.MustNewName("use_span_metrics")
-	FeatureKafkaSpanEval     = featuretypes.MustNewName("kafka_span_eval")
-	FeatureHideRootUser      = featuretypes.MustNewName("hide_root_user")
-	FeatureGetMetersFromZeus = featuretypes.MustNewName("get_meters_from_zeus")
-	FeaturePutMetersInZeus   = featuretypes.MustNewName("put_meters_in_zeus")
-	FeatureUseMeterReporter  = featuretypes.MustNewName("use_meter_reporter")
-	FeatureUseJSONBody            = featuretypes.MustNewName("use_json_body")
-	FeatureUseFineGrainedAuthz    = featuretypes.MustNewName("use_fine_grained_authz")
+	FeatureUseSpanMetrics      = featuretypes.MustNewName("use_span_metrics")
+	FeatureKafkaSpanEval       = featuretypes.MustNewName("kafka_span_eval")
+	FeatureHideRootUser        = featuretypes.MustNewName("hide_root_user")
+	FeatureGetMetersFromZeus   = featuretypes.MustNewName("get_meters_from_zeus")
+	FeaturePutMetersInZeus     = featuretypes.MustNewName("put_meters_in_zeus")
+	FeatureUseMeterReporter    = featuretypes.MustNewName("use_meter_reporter")
+	FeatureUseJSONBody         = featuretypes.MustNewName("use_json_body")
+	FeatureUseFineGrainedAuthz = featuretypes.MustNewName("use_fine_grained_authz")
+	FeatureUseDashboardV2      = featuretypes.MustNewName("use_dashboard_v2")
 )
 
 func MustNewRegistry() featuretypes.Registry {
@@ -79,6 +80,14 @@ func MustNewRegistry() featuretypes.Registry {
 			DefaultVariant: featuretypes.MustNewName("disabled"),
 			Variants:       featuretypes.NewBooleanVariants(),
 		},
+		&featuretypes.Feature{
+			Name:           FeatureUseDashboardV2,
+			Kind:           featuretypes.KindBoolean,
+			Stage:          featuretypes.StageExperimental,
+			Description:    "Controls whether dashboard v2 is enabled",
+			DefaultVariant: featuretypes.MustNewName("disabled"),
+			Variants:       featuretypes.NewBooleanVariants(),
+		},
 	)
 	if err != nil {
 		panic(err)

pkg/modules/spanmapper/implspanmapper/module.go

@@ -2,8 +2,11 @@ package implspanmapper
 
 import (
 	"context"
+	"encoding/json"
 
 	"github.com/SigNoz/signoz/pkg/modules/spanmapper"
+	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
+	"github.com/SigNoz/signoz/pkg/types/opamptypes"
 	"github.com/SigNoz/signoz/pkg/types/spantypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
@@ -34,11 +37,22 @@ func (module *module) UpdateGroup(ctx context.Context, orgID, id valuer.UUID, na
 		return err
 	}
 	group.Update(name, condition, enabled, updatedBy)
-	return module.store.UpdateGroup(ctx, group)
+
+	err = module.store.UpdateGroup(ctx, group)
+	if err != nil {
+		return err
+	}
+	agentConf.NotifyConfigUpdate(ctx)
+	return nil
 }
 
 func (module *module) DeleteGroup(ctx context.Context, orgID, id valuer.UUID) error {
-	return module.store.DeleteGroup(ctx, orgID, id)
+	err := module.store.DeleteGroup(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+	agentConf.NotifyConfigUpdate(ctx)
+	return nil
 }
 
 func (module *module) ListMappers(ctx context.Context, orgID, groupID valuer.UUID) ([]*spantypes.SpanMapper, error) {
@@ -54,7 +68,12 @@ func (module *module) CreateMapper(ctx context.Context, orgID, groupID valuer.UU
 	if _, err := module.store.GetGroup(ctx, orgID, groupID); err != nil {
 		return err
 	}
-	return module.store.CreateMapper(ctx, mapper)
+	err := module.store.CreateMapper(ctx, mapper)
+	if err != nil {
+		return err
+	}
+	agentConf.NotifyConfigUpdate(ctx)
+	return nil
 }
 
 func (module *module) UpdateMapper(ctx context.Context, orgID, groupID, id valuer.UUID, fieldContext spantypes.FieldContext, config *spantypes.SpanMapperConfig, enabled *bool, updatedBy string) error {
@@ -66,9 +85,72 @@ func (module *module) UpdateMapper(ctx context.Context, orgID, groupID, id value
 		return err
 	}
 	mapper.Update(fieldContext, config, enabled, updatedBy)
-	return module.store.UpdateMapper(ctx, mapper)
+	err = module.store.UpdateMapper(ctx, mapper)
+	if err != nil {
+		return err
+	}
+	agentConf.NotifyConfigUpdate(ctx)
+	return nil
 }
 
 func (module *module) DeleteMapper(ctx context.Context, orgID, groupID, id valuer.UUID) error {
-	return module.store.DeleteMapper(ctx, orgID, groupID, id)
+	err := module.store.DeleteMapper(ctx, orgID, groupID, id)
+	if err != nil {
+		return err
+	}
+	agentConf.NotifyConfigUpdate(ctx)
+	return nil
+}
+
+func (module *module) AgentFeatureType() agentConf.AgentFeatureType {
+	return spantypes.SpanAttrMappingFeatureType
+}
+
+func (module *module) RecommendAgentConfig(orgID valuer.UUID, currentConfYaml []byte, configVersion *opamptypes.AgentConfigVersion) ([]byte, string, error) {
+	ctx := context.Background()
+
+	enabled, err := module.listEnabledGroupsWithMappers(ctx, orgID)
+	if err != nil {
+		return nil, "", err
+	}
+
+	updatedConf, err := spantypes.GenerateCollectorConfigWithSpanMapperProcessor(currentConfYaml, enabled)
+	if err != nil {
+		return nil, "", err
+	}
+
+	serialized, err := json.Marshal(enabled)
+	if err != nil {
+		return nil, "", err
+	}
+
+	return updatedConf, string(serialized), nil
+}
+
+// listEnabledGroupsWithMappers returns groups with their mappers.
+func (module *module) listEnabledGroupsWithMappers(ctx context.Context, orgID valuer.UUID) ([]*spantypes.SpanMapperGroupWithMappers, error) {
+	enabled := true
+	groups, err := module.store.ListGroups(ctx, orgID, &spantypes.ListSpanMapperGroupsQuery{Enabled: &enabled})
+	if err != nil {
+		return nil, err
+	}
+
+	out := make([]*spantypes.SpanMapperGroupWithMappers, 0, len(groups))
+	for _, g := range groups {
+		mappers, err := module.store.ListMappers(ctx, orgID, g.ID)
+		if err != nil {
+			return nil, err
+		}
+		enabledMappers := make([]*spantypes.SpanMapper, 0, len(mappers))
+		for _, m := range mappers {
+			if m.Enabled {
+				enabledMappers = append(enabledMappers, m)
+			}
+		}
+		if len(enabledMappers) == 0 {
+			continue
+		}
+		out = append(out, &spantypes.SpanMapperGroupWithMappers{Group: g, Mappers: enabledMappers})
+	}
+	return out, nil
 }

pkg/modules/spanmapper/spanmapper.go

@@ -4,12 +4,16 @@ import (
 	"context"
 	"net/http"
 
+	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	"github.com/SigNoz/signoz/pkg/types/spantypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 // Module defines the business logic for span attribute mapping groups and mappers.
 type Module interface {
+	// Since this module interacts with OpAMP, it must implement the AgentFeature interface.
+	agentConf.AgentFeature
+
 	// Group operations
 	ListGroups(ctx context.Context, orgID valuer.UUID, q *spantypes.ListSpanMapperGroupsQuery) ([]*spantypes.SpanMapperGroup, error)
 	GetGroup(ctx context.Context, orgID, id valuer.UUID) (*spantypes.SpanMapperGroup, error)

pkg/modules/tracedetail/impltracedetail/handler.go

@@ -6,7 +6,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/http/binding"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/modules/tracedetail"
-	"github.com/SigNoz/signoz/pkg/types/tracedetailtypes"
+	"github.com/SigNoz/signoz/pkg/types/spantypes"
 	"github.com/gorilla/mux"
 )
 
@@ -19,7 +19,7 @@ func NewHandler(module tracedetail.Module) tracedetail.Handler {
 }
 
 func (h *handler) GetWaterfall(rw http.ResponseWriter, r *http.Request) {
-	req := new(tracedetailtypes.PostableWaterfall)
+	req := new(spantypes.PostableWaterfall)
 	if err := binding.JSON.BindBody(r.Body, req); err != nil {
 		render.Error(rw, err)
 		return
@@ -38,3 +38,24 @@ func (h *handler) GetWaterfall(rw http.ResponseWriter, r *http.Request) {
 
 	render.Success(rw, http.StatusOK, result)
 }
+
+func (h *handler) GetWaterfallV4(rw http.ResponseWriter, r *http.Request) {
+	req := new(spantypes.PostableWaterfall)
+	if err := binding.JSON.BindBody(r.Body, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	if err := req.Validate(); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	result, err := h.module.GetWaterfallV4(r.Context(), mux.Vars(r)["traceID"], req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, result)
+}

pkg/modules/tracedetail/impltracedetail/module.go

@@ -5,16 +5,16 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/modules/tracedetail"
-	"github.com/SigNoz/signoz/pkg/types/tracedetailtypes"
+	"github.com/SigNoz/signoz/pkg/types/spantypes"
 )
 
 type module struct {
-	store    tracedetailtypes.TraceStore
+	store    spantypes.TraceStore
 	settings factory.ScopedProviderSettings
 	config   tracedetail.Config
 }
 
-func NewModule(traceStore tracedetailtypes.TraceStore, providerSettings factory.ProviderSettings, cfg tracedetail.Config) *module {
+func NewModule(traceStore spantypes.TraceStore, providerSettings factory.ProviderSettings, cfg tracedetail.Config) *module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/modules/tracedetail/impltracedetail")
 	return &module{
 		config:   cfg,
@@ -23,7 +23,7 @@ func NewModule(traceStore tracedetailtypes.TraceStore, providerSettings factory.
 	}
 }
 
-func (m *module) GetWaterfall(ctx context.Context, traceID string, req *tracedetailtypes.PostableWaterfall) (*tracedetailtypes.GettableWaterfallTrace, error) {
+func (m *module) GetWaterfall(ctx context.Context, traceID string, req *spantypes.PostableWaterfall) (*spantypes.GettableWaterfallTrace, error) {
 	waterfallTrace, err := m.getTraceData(ctx, traceID)
 	if err != nil {
 		return nil, err
@@ -37,16 +37,16 @@ func (m *module) GetWaterfall(ctx context.Context, traceID string, req *tracedet
 		m.config.Waterfall.MaxDepthToAutoExpand,
 	)
 
-	aggregationResults := make([]tracedetailtypes.SpanAggregationResult, 0, len(req.Aggregations))
+	aggregationResults := make([]spantypes.SpanAggregationResult, 0, len(req.Aggregations))
 	for _, a := range req.Aggregations {
 		aggregationResults = append(aggregationResults, waterfallTrace.GetSpanAggregation(a.Aggregation, a.Field))
 	}
 
-	return tracedetailtypes.NewGettableWaterfallTrace(waterfallTrace, selectedSpans, uncollapsedSpans, selectedAllSpans, aggregationResults), nil
+	return spantypes.NewGettableWaterfallTrace(waterfallTrace, selectedSpans, uncollapsedSpans, selectedAllSpans, aggregationResults), nil
 }
 
-// getTraceData returns the waterfall cache for the given traceID with fallback on DB.
-func (m *module) getTraceData(ctx context.Context, traceID string) (*tracedetailtypes.WaterfallTrace, error) {
+// getTraceData fetches all spans for a trace and builds the WaterfallTrace.
+func (m *module) getTraceData(ctx context.Context, traceID string) (*spantypes.WaterfallTrace, error) {
 	summary, err := m.store.GetTraceSummary(ctx, traceID)
 	if err != nil {
 		return nil, err
@@ -58,9 +58,89 @@ func (m *module) getTraceData(ctx context.Context, traceID string) (*tracedetail
 	}
 
 	if len(spanItems) == 0 {
-		return nil, tracedetailtypes.ErrTraceNotFound
+		return nil, spantypes.ErrTraceNotFound
 	}
 
-	traceData := tracedetailtypes.NewWaterfallTraceFromSpans(spanItems)
-	return traceData, nil
+	nodes := make([]*spantypes.WaterfallSpan, len(spanItems))
+	for i := range spanItems {
+		nodes[i] = spanItems[i].ToWaterfallSpan()
+	}
+	return spantypes.NewWaterfallTraceFromSpans(nodes), nil
+}
+
+// GetWaterfallV4 is the OOM-safe V4 waterfall.
+// For large traces (NumSpans > effectiveLimit) it uses a two-step fetch:
+// minimal fields for all spans to build the tree, then full fields for the
+// visible window only. Aggregations are not returned.
+func (m *module) GetWaterfallV4(ctx context.Context, traceID string, req *spantypes.PostableWaterfall) (*spantypes.GettableWaterfallTrace, error) {
+	summary, err := m.store.GetTraceSummary(ctx, traceID)
+	if err != nil {
+		return nil, err
+	}
+	effectiveLimit := min(req.Limit, m.config.Waterfall.MaxLimitToSelectAllSpans)
+	if summary.NumSpans > uint64(effectiveLimit) {
+		return m.getWindowedWaterfall(ctx, traceID, req, summary, effectiveLimit)
+	}
+	return m.getFullWaterfall(ctx, traceID, summary)
+}
+
+func (m *module) getFullWaterfall(ctx context.Context, traceID string, summary *spantypes.TraceSummary) (*spantypes.GettableWaterfallTrace, error) {
+	spanItems, err := m.store.GetTraceSpans(ctx, traceID, summary)
+	if err != nil {
+		return nil, err
+	}
+
+	if len(spanItems) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	nodes := make([]*spantypes.WaterfallSpan, len(spanItems))
+	for i := range spanItems {
+		nodes[i] = spanItems[i].ToWaterfallSpan()
+	}
+	waterfallTrace := spantypes.NewWaterfallTraceFromSpans(nodes)
+	selectedSpans := waterfallTrace.GetAllSpans()
+
+	return spantypes.NewGettableWaterfallTrace(waterfallTrace, selectedSpans, nil, true, nil), nil
+}
+
+// getWindowedWaterfall builds the waterfall tree with minimal data and then returns only a window of full spans.
+func (m *module) getWindowedWaterfall(ctx context.Context, traceID string, req *spantypes.PostableWaterfall, summary *spantypes.TraceSummary, effectiveLimit uint) (*spantypes.GettableWaterfallTrace, error) {
+	// Step 1: minimal fetch → build full tree → select visible window
+	minimalSpans, err := m.store.GetMinimalSpans(ctx, traceID, summary)
+	if err != nil {
+		return nil, err
+	}
+	if len(minimalSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	nodes := make([]*spantypes.WaterfallSpan, len(minimalSpans))
+	for i := range minimalSpans {
+		nodes[i] = minimalSpans[i].ToWaterfallSpan()
+	}
+	waterfallTrace := spantypes.NewWaterfallTraceFromSpans(nodes)
+
+	selectedSpans, uncollapsedSpans := waterfallTrace.GetSelectedSpans(
+		req.UncollapsedSpans,
+		req.SelectedSpanID,
+		m.config.Waterfall.SpanPageSize,
+		m.config.Waterfall.MaxDepthToAutoExpand,
+	)
+
+	// Step 2: full fetch for the selected window only
+	spanIDs := make([]string, len(selectedSpans))
+	for i, s := range selectedSpans {
+		spanIDs[i] = s.SpanID
+	}
+	fullSpans, err := m.store.GetTraceSpansByIDs(ctx, traceID, summary, spanIDs)
+	if err != nil {
+		return nil, err
+	}
+
+	spantypes.EnrichSelectedSpans(selectedSpans, fullSpans)
+
+	return spantypes.NewGettableWaterfallTrace(
+		waterfallTrace, selectedSpans, uncollapsedSpans, false, nil,
+	), nil
 }

pkg/modules/tracedetail/impltracedetail/store.go

@@ -9,9 +9,12 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/types/tracedetailtypes"
+	"github.com/SigNoz/signoz/pkg/types/spantypes"
 )
 
+// The $$$$ becomes $$ since go-sqlbuilder escapes $ sign.
+const serviceNameCol = "resource_string_service$$$$name"
+
 type traceStore struct {
 	telemetryStore telemetrystore.TelemetryStore
 }
@@ -20,28 +23,28 @@ func NewTraceStore(ts telemetrystore.TelemetryStore) *traceStore {
 	return &traceStore{telemetryStore: ts}
 }
 
-func (s *traceStore) GetTraceSummary(ctx context.Context, traceID string) (*tracedetailtypes.TraceSummary, error) {
+func (s *traceStore) GetTraceSummary(ctx context.Context, traceID string) (*spantypes.TraceSummary, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("trace_id", "min(start) AS start", "max(end) AS end", "sum(num_spans) AS num_spans")
-	sb.From(fmt.Sprintf("%s.%s", tracedetailtypes.TraceDB, tracedetailtypes.TraceSummaryTable))
+	sb.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceSummaryTable))
 	sb.Where(sb.E("trace_id", traceID))
 	sb.GroupBy("trace_id")
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 
-	var summary tracedetailtypes.TraceSummary
+	var summary spantypes.TraceSummary
 	err := s.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(
 		&summary.TraceID, &summary.Start, &summary.End, &summary.NumSpans,
 	)
 	if err != nil {
 		if errors.Is(err, sql.ErrNoRows) {
-			return nil, tracedetailtypes.ErrTraceNotFound
+			return nil, spantypes.ErrTraceNotFound
 		}
 		return nil, errors.WrapInternalf(err, errors.CodeInternal, "error querying trace summary")
 	}
 	return &summary, nil
 }
 
-func (s *traceStore) GetTraceSpans(ctx context.Context, traceID string, summary *tracedetailtypes.TraceSummary) ([]tracedetailtypes.StorableSpan, error) {
+func (s *traceStore) GetTraceSpans(ctx context.Context, traceID string, summary *spantypes.TraceSummary) ([]spantypes.StorableSpan, error) {
 	// DISTINCT ON (span_id) is ClickHouse-specific syntax not supported by sqlbuilder
 	query := fmt.Sprintf(`
 		SELECT DISTINCT ON (span_id)
@@ -55,9 +58,9 @@ func (s *traceStore) GetTraceSpans(ctx context.Context, traceID string, summary
 		FROM %s.%s
 		WHERE trace_id=? AND ts_bucket_start>=? AND ts_bucket_start<=?
 		ORDER BY timestamp ASC, name ASC`,
-		tracedetailtypes.TraceDB, tracedetailtypes.TraceTable,
+		spantypes.TraceDB, spantypes.TraceTable,
 	)
-	var spanItems []tracedetailtypes.StorableSpan
+	var spanItems []spantypes.StorableSpan
 	err := s.telemetryStore.ClickhouseDB().Select(
 		ctx, &spanItems, query,
 		traceID,
@@ -69,3 +72,64 @@ func (s *traceStore) GetTraceSpans(ctx context.Context, traceID string, summary
 	}
 	return spanItems, nil
 }
+
+func (s *traceStore) GetMinimalSpans(ctx context.Context, traceID string, summary *spantypes.TraceSummary) ([]spantypes.MinimalSpan, error) {
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(
+		"DISTINCT ON (span_id) span_id",
+		"parent_span_id", "timestamp", "duration_nano", "has_error",
+		serviceNameCol,
+	)
+	sb.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceTable))
+	sb.Where(
+		sb.E("trace_id", traceID),
+		sb.GE("ts_bucket_start", summary.Start.Unix()-1800),
+		sb.LE("ts_bucket_start", summary.End.Unix()),
+	)
+	sb.OrderByAsc("timestamp")
+	sb.OrderByAsc("name")
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	var spans []spantypes.MinimalSpan
+	if err := s.telemetryStore.ClickhouseDB().Select(ctx, &spans, query, args...); err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "error querying minimal spans")
+	}
+	return spans, nil
+}
+
+func (s *traceStore) GetTraceSpansByIDs(ctx context.Context, traceID string, summary *spantypes.TraceSummary, spanIDs []string) ([]spantypes.StorableSpan, error) {
+	if len(spanIDs) == 0 {
+		return []spantypes.StorableSpan{}, nil
+	}
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(
+		"DISTINCT ON (span_id) timestamp",
+		"duration_nano", "span_id", "trace_id", "has_error", "kind",
+		serviceNameCol, "name", "links as references",
+		"attributes_string", "attributes_number", "attributes_bool", "resources_string",
+		"events", "status_message", "status_code_string", "kind_string", "parent_span_id",
+		"flags", "is_remote", "trace_state", "status_code",
+		"db_name", "db_operation", "http_method", "http_url", "http_host",
+		"external_http_method", "external_http_url", "response_status_code",
+	)
+	sb.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceTable))
+	ids := make([]any, len(spanIDs))
+	for i, id := range spanIDs {
+		ids[i] = id
+	}
+	sb.Where(
+		sb.E("trace_id", traceID),
+		sb.In("span_id", ids...),
+		sb.GE("ts_bucket_start", summary.Start.Unix()-1800),
+		sb.LE("ts_bucket_start", summary.End.Unix()),
+	)
+	sb.OrderByAsc("timestamp")
+	sb.OrderByAsc("name")
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	var spans []spantypes.StorableSpan
+	if err := s.telemetryStore.ClickhouseDB().Select(ctx, &spans, query, args...); err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "error querying trace spans by IDs")
+	}
+	return spans, nil
+}

pkg/modules/tracedetail/impltracedetail/waterfall_test.go

@@ -37,7 +37,7 @@ import (
 	"fmt"
 	"testing"
 
-	"github.com/SigNoz/signoz/pkg/types/tracedetailtypes"
+	"github.com/SigNoz/signoz/pkg/types/spantypes"
 	"github.com/stretchr/testify/assert"
 )
 
@@ -45,8 +45,8 @@ import (
 // Helpers
 // ─────────────────────────────────────────────────────────────────────────────
 
-func mkSpan(id, service string, children ...*tracedetailtypes.WaterfallSpan) *tracedetailtypes.WaterfallSpan {
-	return &tracedetailtypes.WaterfallSpan{
+func mkSpan(id, service string, children ...*spantypes.WaterfallSpan) *spantypes.WaterfallSpan {
+	return &spantypes.WaterfallSpan{
 		SpanID:      id,
 		ServiceName: service,
 		Name:        id + "-op",
@@ -54,7 +54,7 @@ func mkSpan(id, service string, children ...*tracedetailtypes.WaterfallSpan) *tr
 	}
 }
 
-func spanIDs(spans []*tracedetailtypes.WaterfallSpan) []string {
+func spanIDs(spans []*spantypes.WaterfallSpan) []string {
 	ids := make([]string, len(spans))
 	for i, s := range spans {
 		ids[i] = s.SpanID
@@ -62,10 +62,10 @@ func spanIDs(spans []*tracedetailtypes.WaterfallSpan) []string {
 	return ids
 }
 
-func buildSpanMap(roots ...*tracedetailtypes.WaterfallSpan) map[string]*tracedetailtypes.WaterfallSpan {
-	m := map[string]*tracedetailtypes.WaterfallSpan{}
-	var walk func(*tracedetailtypes.WaterfallSpan)
-	walk = func(s *tracedetailtypes.WaterfallSpan) {
+func buildSpanMap(roots ...*spantypes.WaterfallSpan) map[string]*spantypes.WaterfallSpan {
+	m := map[string]*spantypes.WaterfallSpan{}
+	var walk func(*spantypes.WaterfallSpan)
+	walk = func(s *spantypes.WaterfallSpan) {
 		m[s.SpanID] = s
 		for _, c := range s.Children {
 			walk(c)
@@ -80,8 +80,8 @@ func buildSpanMap(roots ...*tracedetailtypes.WaterfallSpan) map[string]*tracedet
 }
 
 // makeChain builds a linear trace: span0 → span1 → … → span(n-1).
-func makeChain(n int) (*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan, []string) {
-	spans := make([]*tracedetailtypes.WaterfallSpan, n)
+func makeChain(n int) (*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan, []string) {
+	spans := make([]*spantypes.WaterfallSpan, n)
 	for i := n - 1; i >= 0; i-- {
 		if i == n-1 {
 			spans[i] = mkSpan(fmt.Sprintf("span%d", i), "svc")
@@ -96,8 +96,8 @@ func makeChain(n int) (*tracedetailtypes.WaterfallSpan, map[string]*tracedetailt
 	return spans[0], buildSpanMap(spans[0]), uncollapsed
 }
 
-func getWaterfallTrace(roots []*tracedetailtypes.WaterfallSpan, spanMap map[string]*tracedetailtypes.WaterfallSpan) *tracedetailtypes.WaterfallTrace {
-	return tracedetailtypes.NewWaterfallTrace(0, 0, uint64(len(spanMap)), 0, spanMap, nil, roots, false)
+func getWaterfallTrace(roots []*spantypes.WaterfallSpan, spanMap map[string]*spantypes.WaterfallSpan) *spantypes.WaterfallTrace {
+	return spantypes.NewWaterfallTrace(0, 0, uint64(len(spanMap)), 0, spanMap, roots, false)
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -107,7 +107,7 @@ func getWaterfallTrace(roots []*tracedetailtypes.WaterfallSpan, spanMap map[stri
 func TestGetSelectedSpans_SpanOrdering(t *testing.T) {
 	tests := []struct {
 		name             string
-		buildRoots       func() ([]*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan)
+		buildRoots       func() ([]*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan)
 		uncollapsedSpans []string
 		selectedSpanID   string
 		wantSpanIDs      []string
@@ -115,12 +115,12 @@ func TestGetSelectedSpans_SpanOrdering(t *testing.T) {
 		{
 			// Pre-order traversal is preserved: parent before children, siblings left-to-right.
 			name: "pre_order_traversal",
-			buildRoots: func() ([]*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoots: func() ([]*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc",
 					mkSpan("child1", "svc", mkSpan("grandchild", "svc")),
 					mkSpan("child2", "svc"),
 				)
-				return []*tracedetailtypes.WaterfallSpan{root}, buildSpanMap(root)
+				return []*spantypes.WaterfallSpan{root}, buildSpanMap(root)
 			},
 			uncollapsedSpans: []string{"root", "child1"},
 			selectedSpanID:   "root",
@@ -133,12 +133,12 @@ func TestGetSelectedSpans_SpanOrdering(t *testing.T) {
 			//	  ├─ childA (uncollapsed) → grandchildA ✓
 			//	  └─ childB (uncollapsed) → grandchildB ✓
 			name: "multiple_uncollapsed",
-			buildRoots: func() ([]*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoots: func() ([]*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc",
 					mkSpan("childA", "svc", mkSpan("grandchildA", "svc")),
 					mkSpan("childB", "svc", mkSpan("grandchildB", "svc")),
 				)
-				return []*tracedetailtypes.WaterfallSpan{root}, buildSpanMap(root)
+				return []*spantypes.WaterfallSpan{root}, buildSpanMap(root)
 			},
 			uncollapsedSpans: []string{"root", "childA", "childB"},
 			selectedSpanID:   "root",
@@ -154,7 +154,7 @@ func TestGetSelectedSpans_SpanOrdering(t *testing.T) {
 			// │    └─ grandchild2 ✓
 			// └─ childB                        ← selected (not expanded)
 			name: "manual_uncollapse",
-			buildRoots: func() ([]*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoots: func() ([]*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc",
 					mkSpan("childA", "svc",
 						mkSpan("grandchild1", "svc", mkSpan("greatGrandchild", "svc")),
@@ -162,7 +162,7 @@ func TestGetSelectedSpans_SpanOrdering(t *testing.T) {
 					),
 					mkSpan("childB", "svc"),
 				)
-				return []*tracedetailtypes.WaterfallSpan{root}, buildSpanMap(root)
+				return []*spantypes.WaterfallSpan{root}, buildSpanMap(root)
 			},
 			uncollapsedSpans: []string{"childA"},
 			selectedSpanID:   "childB",
@@ -171,12 +171,12 @@ func TestGetSelectedSpans_SpanOrdering(t *testing.T) {
 		{
 			// A collapsed span hides all children.
 			name: "collapsed_span_hides_children",
-			buildRoots: func() ([]*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoots: func() ([]*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc",
 					mkSpan("child1", "svc"),
 					mkSpan("child2", "svc"),
 				)
-				return []*tracedetailtypes.WaterfallSpan{root}, buildSpanMap(root)
+				return []*spantypes.WaterfallSpan{root}, buildSpanMap(root)
 			},
 			uncollapsedSpans: []string{},
 			selectedSpanID:   "root",
@@ -187,13 +187,13 @@ func TestGetSelectedSpans_SpanOrdering(t *testing.T) {
 			//
 			//	root → parent → selected
 			name: "path_to_selected_is_uncollapsed",
-			buildRoots: func() ([]*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoots: func() ([]*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc",
 					mkSpan("parent", "svc",
 						mkSpan("selected", "svc"),
 					),
 				)
-				return []*tracedetailtypes.WaterfallSpan{root}, buildSpanMap(root)
+				return []*spantypes.WaterfallSpan{root}, buildSpanMap(root)
 			},
 			uncollapsedSpans: []string{},
 			selectedSpanID:   "selected",
@@ -206,14 +206,14 @@ func TestGetSelectedSpans_SpanOrdering(t *testing.T) {
 			//	  ├─ unrelated → unrelated-child (✗)
 			//	  └─ parent → selected
 			name: "siblings_not_expanded",
-			buildRoots: func() ([]*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoots: func() ([]*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc",
 					mkSpan("unrelated", "svc", mkSpan("unrelated-child", "svc")),
 					mkSpan("parent", "svc",
 						mkSpan("selected", "svc"),
 					),
 				)
-				return []*tracedetailtypes.WaterfallSpan{root}, buildSpanMap(root)
+				return []*spantypes.WaterfallSpan{root}, buildSpanMap(root)
 			},
 			uncollapsedSpans: []string{},
 			selectedSpanID:   "selected",
@@ -223,9 +223,9 @@ func TestGetSelectedSpans_SpanOrdering(t *testing.T) {
 		{
 			// An unknown selectedSpanID must not panic; returns a window from index 0.
 			name: "unknown_selected_span",
-			buildRoots: func() ([]*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoots: func() ([]*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc", mkSpan("child", "svc"))
-				return []*tracedetailtypes.WaterfallSpan{root}, buildSpanMap(root)
+				return []*spantypes.WaterfallSpan{root}, buildSpanMap(root)
 			},
 			uncollapsedSpans: []string{},
 			selectedSpanID:   "nonexistent",
@@ -257,10 +257,10 @@ func TestGetSelectedSpans_MultipleRoots(t *testing.T) {
 	root2 := mkSpan("root2", "svc-b", mkSpan("child2", "svc-b"))
 	spanMap := buildSpanMap(root1, root2)
 
-	trace := getWaterfallTrace([]*tracedetailtypes.WaterfallSpan{root1, root2}, spanMap)
+	trace := getWaterfallTrace([]*spantypes.WaterfallSpan{root1, root2}, spanMap)
 	spans, _ := trace.GetSelectedSpans([]string{"root1", "root2"}, "root1", 500, 5)
 
-	traceRespnose := tracedetailtypes.NewGettableWaterfallTrace(trace, spans, nil, false, nil)
+	traceRespnose := spantypes.NewGettableWaterfallTrace(trace, spans, nil, false, nil)
 
 	assert.Equal(t, []string{"root1", "child1", "root2", "child2"}, spanIDs(spans), "root1 subtree must precede root2 subtree")
 	assert.Equal(t, "svc-a", traceRespnose.RootServiceName, "metadata comes from first root")
@@ -274,7 +274,7 @@ func TestGetSelectedSpans_MultipleRoots(t *testing.T) {
 func TestGetSelectedSpans_UncollapsedTracking(t *testing.T) {
 	tests := []struct {
 		name             string
-		buildRoot        func() (*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan)
+		buildRoot        func() (*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan)
 		uncollapsedSpans []string
 		selectedSpanID   string
 		wantSpanIDs      []string
@@ -283,7 +283,7 @@ func TestGetSelectedSpans_UncollapsedTracking(t *testing.T) {
 		{
 			// The path-to-selected spans are returned in updatedUncollapsedSpans.
 			name: "path_returned_in_uncollapsed",
-			buildRoot: func() (*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoot: func() (*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc",
 					mkSpan("parent", "svc",
 						mkSpan("selected", "svc"),
@@ -301,7 +301,7 @@ func TestGetSelectedSpans_UncollapsedTracking(t *testing.T) {
 		{
 			// Siblings of ancestors are not tracked as uncollapsed.
 			name: "siblings_not_in_uncollapsed",
-			buildRoot: func() (*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoot: func() (*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc",
 					mkSpan("unrelated", "svc", mkSpan("unrelated-child", "svc")),
 					mkSpan("parent", "svc",
@@ -330,7 +330,7 @@ func TestGetSelectedSpans_UncollapsedTracking(t *testing.T) {
 			//	       └─ grandchildB (internal ✓)
 			//	            └─ leafB (leaf ✗)
 			name: "auto_expanded_spans_returned",
-			buildRoot: func() (*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoot: func() (*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc",
 					mkSpan("childA", "svc",
 						mkSpan("grandchildA", "svc",
@@ -361,7 +361,7 @@ func TestGetSelectedSpans_UncollapsedTracking(t *testing.T) {
 			// If the selected span is already in uncollapsedSpans,
 			// it should appear exactly once in the result.
 			name: "duplicate_in_uncollapsed",
-			buildRoot: func() (*tracedetailtypes.WaterfallSpan, map[string]*tracedetailtypes.WaterfallSpan) {
+			buildRoot: func() (*spantypes.WaterfallSpan, map[string]*spantypes.WaterfallSpan) {
 				root := mkSpan("root", "svc",
 					mkSpan("selected", "svc", mkSpan("child", "svc")),
 				)
@@ -384,7 +384,7 @@ func TestGetSelectedSpans_UncollapsedTracking(t *testing.T) {
 	for _, tc := range tests {
 		t.Run(tc.name, func(t *testing.T) {
 			root, spanMap := tc.buildRoot()
-			trace := getWaterfallTrace([]*tracedetailtypes.WaterfallSpan{root}, spanMap)
+			trace := getWaterfallTrace([]*spantypes.WaterfallSpan{root}, spanMap)
 			spans, uncollapsed := trace.GetSelectedSpans(tc.uncollapsedSpans, tc.selectedSpanID, 500, 5)
 			if tc.wantSpanIDs != nil {
 				assert.Equal(t, tc.wantSpanIDs, spanIDs(spans))
@@ -412,10 +412,10 @@ func TestGetSelectedSpans_SpanMetadata(t *testing.T) {
 		mkSpan("child2", "svc"),
 	)
 	spanMap := buildSpanMap(root)
-	trace := getWaterfallTrace([]*tracedetailtypes.WaterfallSpan{root}, spanMap)
+	trace := getWaterfallTrace([]*spantypes.WaterfallSpan{root}, spanMap)
 	spans, _ := trace.GetSelectedSpans([]string{"root", "child1"}, "root", 500, 5)
 
-	byID := map[string]*tracedetailtypes.WaterfallSpan{}
+	byID := map[string]*spantypes.WaterfallSpan{}
 	for _, s := range spans {
 		byID[s.SpanID] = s
 	}
@@ -478,7 +478,7 @@ func TestGetSelectedSpans_Window(t *testing.T) {
 	for _, tc := range tests {
 		t.Run(tc.name, func(t *testing.T) {
 			root, spanMap, uncollapsed := makeChain(600)
-			trace := getWaterfallTrace([]*tracedetailtypes.WaterfallSpan{root}, spanMap)
+			trace := getWaterfallTrace([]*spantypes.WaterfallSpan{root}, spanMap)
 			spans, _ := trace.GetSelectedSpans(uncollapsed, tc.selectedSpanID, 500, 5)
 
 			assert.Equal(t, tc.wantLen, len(spans), "window size")
@@ -536,7 +536,7 @@ func TestGetSelectedSpans_DepthCountedFromSelectedSpan(t *testing.T) {
 	root := mkSpan("root", "svc", mkSpan("A", "svc", selected))
 
 	spanMap := buildSpanMap(root)
-	trace := getWaterfallTrace([]*tracedetailtypes.WaterfallSpan{root}, spanMap)
+	trace := getWaterfallTrace([]*spantypes.WaterfallSpan{root}, spanMap)
 	spans, _ := trace.GetSelectedSpans([]string{"selected"}, "selected", 500, 5)
 	ids := spanIDs(spans)
 
@@ -565,9 +565,9 @@ func TestGetAllSpans(t *testing.T) {
 			),
 		),
 	)
-	trace := getWaterfallTrace([]*tracedetailtypes.WaterfallSpan{root}, nil)
+	trace := getWaterfallTrace([]*spantypes.WaterfallSpan{root}, nil)
 	spans := trace.GetAllSpans()
-	traceResponse := tracedetailtypes.NewGettableWaterfallTrace(trace, spans, nil, true, nil)
+	traceResponse := spantypes.NewGettableWaterfallTrace(trace, spans, nil, true, nil)
 	assert.ElementsMatch(t, spanIDs(spans), []string{"root", "childA", "grandchildA", "leafA", "childB", "grandchildB", "leafB"})
 	assert.Equal(t, "svc", traceResponse.RootServiceName)
 	assert.Equal(t, "root-op", traceResponse.RootServiceEntryPoint)

pkg/modules/tracedetail/tracedetail.go

@@ -4,15 +4,17 @@ import (
 	"context"
 	"net/http"
 
-	"github.com/SigNoz/signoz/pkg/types/tracedetailtypes"
+	"github.com/SigNoz/signoz/pkg/types/spantypes"
 )
 
 // Handler exposes HTTP handlers for trace detail APIs.
 type Handler interface {
 	GetWaterfall(http.ResponseWriter, *http.Request)
+	GetWaterfallV4(http.ResponseWriter, *http.Request)
 }
 
 // Module defines the business logic for trace detail operations.
 type Module interface {
-	GetWaterfall(ctx context.Context, traceID string, req *tracedetailtypes.PostableWaterfall) (*tracedetailtypes.GettableWaterfallTrace, error)
+	GetWaterfall(ctx context.Context, traceID string, req *spantypes.PostableWaterfall) (*spantypes.GettableWaterfallTrace, error)
+	GetWaterfallV4(ctx context.Context, traceID string, req *spantypes.PostableWaterfall) (*spantypes.GettableWaterfallTrace, error)
 }

pkg/query-service/app/http_handler.go

@@ -1770,6 +1770,15 @@ func (aH *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
+	useDashboardV2 := aH.Signoz.Flagger.BooleanOrEmpty(r.Context(), 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 {

pkg/signoz/provider.go

@@ -206,6 +206,7 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddIntegrationDashboardFactory(sqlstore, sqlschema),
 		sqlmigration.NewAddSourceToDashboardFactory(sqlstore, sqlschema),
 		sqlmigration.NewMigrateCloudIntegrationDashboardsFactory(sqlstore),
+		sqlmigration.NewAddScopeToPlannedMaintenanceFactory(sqlstore, sqlschema),
 	)
 }
 

pkg/sqlmigration/087_add_scope_to_planned_maintenance.go

@@ -0,0 +1,70 @@
+package sqlmigration
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+)
+
+type addScopeToPlannedMaintenance struct {
+	sqlstore  sqlstore.SQLStore
+	sqlschema sqlschema.SQLSchema
+}
+
+func NewAddScopeToPlannedMaintenanceFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(
+		factory.MustNewName("add_scope_to_planned"),
+		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
+			return &addScopeToPlannedMaintenance{
+				sqlstore:  sqlstore,
+				sqlschema: sqlschema,
+			}, nil
+		},
+	)
+}
+
+func (migration *addScopeToPlannedMaintenance) Register(migrations *migrate.Migrations) error {
+	if err := migrations.Register(migration.Up, migration.Down); err != nil {
+		return err
+	}
+	return nil
+}
+
+func (migration *addScopeToPlannedMaintenance) Up(ctx context.Context, db *bun.DB) error {
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		_ = tx.Rollback()
+	}()
+
+	table, _, err := migration.sqlschema.GetTable(ctx, "planned_maintenance")
+	if err != nil {
+		return err
+	}
+
+	column := &sqlschema.Column{
+		Name:     sqlschema.ColumnName("scope"),
+		DataType: sqlschema.DataTypeText,
+		Nullable: true,
+	}
+
+	sqls := migration.sqlschema.Operator().AddColumn(table, nil, column, nil)
+	for _, sql := range sqls {
+		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
+			return err
+		}
+	}
+
+	return tx.Commit()
+}
+
+func (migration *addScopeToPlannedMaintenance) Down(ctx context.Context, db *bun.DB) error {
+	return nil
+}

pkg/types/alertmanagertypes/expression.go

@@ -0,0 +1,88 @@
+package alertmanagertypes
+
+import (
+	"strings"
+
+	"github.com/expr-lang/expr"
+	"github.com/prometheus/common/model"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+)
+
+var ErrCodeInvalidScopeExpression = errors.MustNewCode("invalid_scope_expression")
+
+// ConvertLabelSetToEnv converts a label set into a map suitable for use as an
+// expr environment. Dotted keys (e.g. "kubernetes.node") are expanded into
+// nested maps so that expr can resolve them without panicking. When a dotted
+// path conflicts with a plain key, the nested structure takes precedence.
+//
+// The second return value reports whether such a prefix conflict was detected
+// (a plain key collided with a nested map, or a nested path overwrote a plain
+// leaf).
+func ConvertLabelSetToEnv(lset model.LabelSet) (map[string]any, bool) {
+	env := map[string]any{}
+	conflict := false
+	for lk, lv := range lset {
+		key := strings.TrimSpace(string(lk))
+		value := string(lv)
+		if strings.Contains(key, ".") {
+			parts := strings.Split(key, ".")
+			current := env
+			for i, raw := range parts {
+				part := strings.TrimSpace(raw)
+				if i == len(parts)-1 {
+					// Last segment: if a nested map already exists here, a
+					// deeper path has been processed first — keep it and flag.
+					if _, isMap := current[part].(map[string]any); isMap {
+						conflict = true
+						break
+					}
+					current[part] = value
+					break
+				}
+				if nextMap, ok := current[part].(map[string]any); ok {
+					current = nextMap
+				} else {
+					// Intermediate segment hit a plain leaf — overwrite with a
+					// map so the deeper path can be materialised, and flag.
+					if _, exists := current[part]; exists {
+						conflict = true
+					}
+					newMap := map[string]any{}
+					current[part] = newMap
+					current = newMap
+				}
+			}
+			continue
+		}
+		// Plain key collides with an already-built nested map — keep the map
+		// (nested wins) and flag.
+		if _, isMap := env[key].(map[string]any); isMap {
+			conflict = true
+			continue
+		}
+		env[key] = value
+	}
+	return env, conflict
+}
+
+// EvalScopeExpression compiles and runs the expression against the provided
+// labels. It returns (result, error). Callers should log the error and
+// decide how to handle a failed evaluation (the maintenance muter treats a
+// failure as "don't skip" so alerts pass through).
+func EvalScopeExpression(expression string, lset model.LabelSet) (bool, error) {
+	env, _ := ConvertLabelSetToEnv(lset)
+	program, err := expr.Compile(expression, expr.Env(env), expr.AllowUndefinedVariables())
+	if err != nil {
+		return false, errors.Wrapf(err, errors.TypeInvalidInput, ErrCodeInvalidScopeExpression, "compile scope expression %q", expression)
+	}
+	output, err := expr.Run(program, env)
+	if err != nil {
+		return false, errors.Wrapf(err, errors.TypeInternal, ErrCodeInvalidScopeExpression, "run scope expression %q", expression)
+	}
+	result, ok := output.(bool)
+	if !ok {
+		return false, errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidScopeExpression, "scope expression %q returned non-bool value %T (%v)", expression, output, output)
+	}
+	return result, nil
+}

pkg/types/alertmanagertypes/expression_test.go

@@ -0,0 +1,163 @@
+package alertmanagertypes
+
+import (
+	"reflect"
+	"testing"
+
+	"github.com/prometheus/common/model"
+)
+
+func TestEvalScopeExpression(t *testing.T) {
+	cases := []struct {
+		name       string
+		expression string
+		lset       model.LabelSet
+		want       bool
+		wantErr    bool
+	}{
+		{
+			name:       "equality match",
+			expression: `env = "production"`,
+			lset:       model.LabelSet{"env": "production"},
+			want:       true,
+		},
+		{
+			name:       "equality no match",
+			expression: `env = "production"`,
+			lset:       model.LabelSet{"env": "staging"},
+			want:       false,
+		},
+		{
+			name:       "inequality match",
+			expression: `env != "production"`,
+			lset:       model.LabelSet{"env": "staging"},
+			want:       true,
+		},
+		{
+			name:       "AND - both match",
+			expression: `env = "production" AND service = "api"`,
+			lset:       model.LabelSet{"env": "production", "service": "api"},
+			want:       true,
+		},
+		{
+			name:       "AND - partial match",
+			expression: `env = "production" AND service = "api"`,
+			lset:       model.LabelSet{"env": "production", "service": "worker"},
+			want:       false,
+		},
+		{
+			name:       "OR - first matches",
+			expression: `env = "production" OR env = "staging"`,
+			lset:       model.LabelSet{"env": "production"},
+			want:       true,
+		},
+		{
+			name:       "OR - second matches",
+			expression: `env = "production" OR env = "staging"`,
+			lset:       model.LabelSet{"env": "staging"},
+			want:       true,
+		},
+		{
+			name:       "OR - none match",
+			expression: `env = "production" OR env = "staging"`,
+			lset:       model.LabelSet{"env": "development"},
+			want:       false,
+		},
+		{
+			name:       "undefined label returns false",
+			expression: `env = "production"`,
+			lset:       model.LabelSet{"service": "api"},
+			want:       false,
+		},
+		{
+			name:       "in list - present",
+			expression: `env in ["production", "staging"]`,
+			lset:       model.LabelSet{"env": "production"},
+			want:       true,
+		},
+		{
+			name:       "in list - absent",
+			expression: `env in ["production", "staging"]`,
+			lset:       model.LabelSet{"env": "development"},
+			want:       false,
+		},
+		{
+			name:       "invalid expression returns error",
+			expression: `env =`,
+			lset:       model.LabelSet{"env": "production"},
+			want:       false,
+			wantErr:    true,
+		},
+		{
+			name:       "non-bool expression returns error",
+			expression: `env`,
+			lset:       model.LabelSet{"env": "production"},
+			want:       false,
+			wantErr:    true,
+		},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			got, err := EvalScopeExpression(c.expression, c.lset)
+			if (err != nil) != c.wantErr {
+				t.Errorf("EvalScopeExpression(%q, %v) error = %v, wantErr %v", c.expression, c.lset, err, c.wantErr)
+			}
+			if got != c.want {
+				t.Errorf("EvalScopeExpression(%q, %v) = %v, want %v", c.expression, c.lset, got, c.want)
+			}
+		})
+	}
+}
+
+func TestConvertLabelSetToEnv(t *testing.T) {
+	cases := []struct {
+		name         string
+		lset         model.LabelSet
+		expected     map[string]interface{}
+		wantConflict bool
+	}{
+		{
+			name:     "simple keys",
+			lset:     model.LabelSet{"key1": "value1", "key2": "value2"},
+			expected: map[string]interface{}{"key1": "value1", "key2": "value2"},
+		},
+		{
+			name: "dotted keys become nested maps",
+			lset: model.LabelSet{"foo.bar": "value1", "foo.baz": "value2"},
+			expected: map[string]interface{}{
+				"foo": map[string]interface{}{"bar": "value1", "baz": "value2"},
+			},
+		},
+		{
+			name: "deeper dotted key wins over shallow dotted key",
+			lset: model.LabelSet{"foo.bar.baz": "deep", "foo.bar": "shallow"},
+			expected: map[string]interface{}{
+				"foo": map[string]interface{}{
+					"bar": map[string]interface{}{"baz": "deep"},
+				},
+			},
+			wantConflict: true,
+		},
+		{
+			name: "nested structure wins over plain key",
+			lset: model.LabelSet{"foo.bar": "value", "foo": "ignored"},
+			expected: map[string]interface{}{
+				"foo": map[string]interface{}{"bar": "value"},
+			},
+			wantConflict: true,
+		},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			got, gotConflict := ConvertLabelSetToEnv(c.lset)
+			if !reflect.DeepEqual(got, c.expected) {
+				t.Errorf("ConvertLabelSetToEnv() map = %v, want %v", got, c.expected)
+			}
+			if gotConflict != c.wantConflict {
+				t.Errorf("ConvertLabelSetToEnv() conflict = %v, want %v", gotConflict, c.wantConflict)
+			}
+		})
+	}
+}

pkg/types/alertmanagertypes/maintenance.go

@@ -5,14 +5,19 @@ import (
 	"encoding/json"
 	"time"
 
+	"github.com/expr-lang/expr"
+	"github.com/prometheus/common/model"
+	"github.com/uptrace/bun"
+
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/uptrace/bun"
 )
 
 var ErrCodeInvalidPlannedMaintenancePayload = errors.MustNewCode("invalid_planned_maintenance_payload")
 
+const scopeDocUrl = "https://signoz.io/docs/alerts-management/planned-maintenance/#scoping-with-label-expressions"
+
 type MaintenanceStatus struct {
 	valuer.String
 }
@@ -58,6 +63,7 @@ type StorablePlannedMaintenance struct {
 	Description string    `bun:"description,type:text"`
 	Schedule    *Schedule `bun:"schedule,type:text,notnull"`
 	OrgID       string    `bun:"org_id,type:text"`
+	Scope       string    `bun:"scope,type:text"`
 }
 
 type PlannedMaintenance struct {
@@ -66,6 +72,7 @@ type PlannedMaintenance struct {
 	Description string            `json:"description"`
 	Schedule    *Schedule         `json:"schedule" required:"true"`
 	RuleIDs     []string          `json:"alertIds"`
+	Scope       string            `json:"scope,omitempty"`
 	CreatedAt   time.Time         `json:"createdAt"`
 	CreatedBy   string            `json:"createdBy"`
 	UpdatedAt   time.Time         `json:"updatedAt"`
@@ -82,6 +89,7 @@ type PostablePlannedMaintenance struct {
 	Description string    `json:"description"`
 	Schedule    *Schedule `json:"schedule" required:"true"`
 	AlertIds    []string  `json:"alertIds"`
+	Scope       string    `json:"scope"`
 }
 
 func (p *PostablePlannedMaintenance) Validate() error {
@@ -116,6 +124,15 @@ func (p *PostablePlannedMaintenance) Validate() error {
 			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "end time cannot be before start time")
 		}
 	}
+	if p.Scope != "" {
+		if _, err := expr.Compile(p.Scope, expr.AllowUndefinedVariables(), expr.AsBool()); err != nil {
+			err := errors.Newf(
+				errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload,
+				"invalid scope: %s", err.Error(),
+			)
+			return err.WithUrl(scopeDocUrl)
+		}
+	}
 	return nil
 }
 
@@ -151,7 +168,7 @@ func (m *PlannedMaintenance) HasScheduleRecurrenceBoundsMismatch() bool {
 		(recurrence.EndTime != nil && !recurrence.EndTime.Equal(m.Schedule.EndTime))
 }
 
-func (m *PlannedMaintenance) ShouldSkip(ruleID string, now time.Time) bool {
+func (m *PlannedMaintenance) ShouldSkip(ruleID string, now time.Time, lset model.LabelSet) (bool, error) {
 	// Check if the alert ID is in the maintenance window
 	found := false
 	if len(m.RuleIDs) > 0 {
@@ -168,9 +185,27 @@ func (m *PlannedMaintenance) ShouldSkip(ruleID string, now time.Time) bool {
 	}
 
 	if !found {
-		return false
+		return false, nil
 	}
 
+	if !m.IsActive(now) {
+		return false, nil
+	}
+
+	if m.Scope != "" {
+		result, err := EvalScopeExpression(m.Scope, lset)
+		if err != nil {
+			return false, err
+		}
+		if !result {
+			return false, nil
+		}
+	}
+	return true, nil
+}
+
+// IsActive reports whether [now] falls inside the maintenance window's schedule.
+func (m *PlannedMaintenance) IsActive(now time.Time) bool {
 	// If alert is found, we check if it should be skipped based on the schedule
 	loc, err := time.LoadLocation(m.Schedule.Timezone)
 	if err != nil {
@@ -301,14 +336,6 @@ func (m *PlannedMaintenance) checkMonthly(currentTime time.Time, rec *Recurrence
 	return currentTime.Sub(candidate) <= rec.Duration.Duration()
 }
 
-func (m *PlannedMaintenance) IsActive(now time.Time) bool {
-	ruleID := "maintenance"
-	if len(m.RuleIDs) > 0 {
-		ruleID = (m.RuleIDs)[0]
-	}
-	return m.ShouldSkip(ruleID, now)
-}
-
 func (m *PlannedMaintenance) IsUpcoming() bool {
 	loc, err := time.LoadLocation(m.Schedule.Timezone)
 	if err != nil {
@@ -389,6 +416,7 @@ func (m PlannedMaintenance) MarshalJSON() ([]byte, error) {
 		Description string            `json:"description" db:"description"`
 		Schedule    *Schedule         `json:"schedule" db:"schedule"`
 		AlertIds    []string          `json:"alertIds" db:"alert_ids"`
+		Scope       string            `json:"scope,omitempty" db:"scope"`
 		CreatedAt   time.Time         `json:"createdAt" db:"created_at"`
 		CreatedBy   string            `json:"createdBy" db:"created_by"`
 		UpdatedAt   time.Time         `json:"updatedAt" db:"updated_at"`
@@ -401,6 +429,7 @@ func (m PlannedMaintenance) MarshalJSON() ([]byte, error) {
 		Description: m.Description,
 		Schedule:    m.Schedule,
 		AlertIds:    m.RuleIDs,
+		Scope:       m.Scope,
 		CreatedAt:   m.CreatedAt,
 		CreatedBy:   m.CreatedBy,
 		UpdatedAt:   m.UpdatedAt,
@@ -424,6 +453,7 @@ func (m *PlannedMaintenanceWithRules) ToPlannedMaintenance() *PlannedMaintenance
 		Description: m.Description,
 		Schedule:    m.Schedule,
 		RuleIDs:     ruleIDs,
+		Scope:       m.Scope,
 		CreatedAt:   m.CreatedAt,
 		UpdatedAt:   m.UpdatedAt,
 		CreatedBy:   m.CreatedBy,

pkg/types/alertmanagertypes/maintenance_test.go

@@ -5,6 +5,7 @@ import (
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/prometheus/common/model"
 )
 
 // Helper function to create a time pointer.
@@ -668,9 +669,193 @@ func TestShouldSkipMaintenance(t *testing.T) {
 	}
 
 	for idx, c := range cases {
-		result := c.maintenance.ShouldSkip(c.name, c.ts)
+		result, err := c.maintenance.ShouldSkip(c.name, c.ts, model.LabelSet{})
+		if err != nil {
+			t.Errorf("unexpected error: %v", err)
+		}
 		if result != c.skip {
 			t.Errorf("skip %v, got %v, case:%d - %s", c.skip, result, idx, c.name)
 		}
 	}
 }
+
+func TestShouldSkip_Scope(t *testing.T) {
+	activeSchedule := func() *Schedule {
+		return &Schedule{
+			Timezone:  "UTC",
+			StartTime: time.Now().UTC().Add(-time.Hour),
+			EndTime:   time.Now().UTC().Add(time.Hour),
+		}
+	}
+	now := time.Now().UTC()
+
+	cases := []struct {
+		name        string
+		maintenance *PlannedMaintenance
+		ruleID      string
+		ts          time.Time
+		lset        model.LabelSet
+		skip        bool
+	}{
+		{
+			name:        "empty scope - no label filtering applied",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule()},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "production"},
+			skip:        true,
+		},
+		{
+			name:        "scope matches labels",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "production"},
+			skip:        true,
+		},
+		{
+			name:        "scope does not match labels",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "staging"},
+			skip:        false,
+		},
+		{
+			name:        "AND expression - both conditions match",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" AND service = "api"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "production", "service": "api"},
+			skip:        true,
+		},
+		{
+			name:        "AND expression - one condition does not match",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" AND service = "api"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "production", "service": "worker"},
+			skip:        false,
+		},
+		{
+			name:        "OR expression - first alternative matches",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" OR env = "staging"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "production"},
+			skip:        true,
+		},
+		{
+			name:        "OR expression - second alternative matches",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" OR env = "staging"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "staging"},
+			skip:        true,
+		},
+		{
+			name:        "OR expression - neither alternative matches",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" OR env = "staging"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "development"},
+			skip:        false,
+		},
+		{
+			name:        "scope references label absent from lset",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"service": "api"},
+			skip:        false,
+		},
+		{
+			name:        "in expression - value is in list",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env in ["production", "staging"]`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "staging"},
+			skip:        true,
+		},
+		{
+			name:        "in expression - value not in list",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env in ["production", "staging"]`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "development"},
+			skip:        false,
+		},
+		{
+			name:        "ruleID in list and scope matches - should skip",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), RuleIDs: []string{"rule-1", "rule-2"}, Scope: `env = "production"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "production"},
+			skip:        true,
+		},
+		{
+			name:        "ruleID not in list and scope matches - ruleID gate prevents skip",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), RuleIDs: []string{"rule-2"}, Scope: `env = "production"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "production"},
+			skip:        false,
+		},
+		{
+			name:        "ruleID in list but scope does not match - should not skip",
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), RuleIDs: []string{"rule-1"}, Scope: `env = "production"`},
+			ruleID:      "rule-1",
+			ts:          now,
+			lset:        model.LabelSet{"env": "staging"},
+			skip:        false,
+		},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			got, err := c.maintenance.ShouldSkip(c.ruleID, c.ts, c.lset)
+			if err != nil {
+				t.Errorf("unexpected error: %v", err)
+			}
+			if got != c.skip {
+				t.Errorf("ShouldSkip() = %v, want %v", got, c.skip)
+			}
+		})
+	}
+}
+
+func TestPostablePlannedMaintenance_ValidateScope(t *testing.T) {
+	validSchedule := &Schedule{
+		Timezone:  "UTC",
+		StartTime: time.Now().UTC(),
+		EndTime:   time.Now().UTC().Add(time.Hour),
+	}
+
+	cases := []struct {
+		name    string
+		scope   string
+		wantErr bool
+	}{
+		{name: "empty scope", scope: "", wantErr: false},
+		{name: "simple equality", scope: `env = "production"`, wantErr: false},
+		{name: "AND expression", scope: `env = "production" AND service = "api"`, wantErr: false},
+		{name: "OR expression", scope: `env = "production" OR env = "staging"`, wantErr: false},
+		{name: "in expression", scope: `env in ["production", "staging"]`, wantErr: false},
+		{name: "incomplete expression", scope: `env =`, wantErr: true},
+		{name: "non-bool expression", scope: `"just a string"`, wantErr: true},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			p := &PostablePlannedMaintenance{
+				Name:     "test",
+				Schedule: validSchedule,
+				Scope:    c.scope,
+			}
+			err := p.Validate()
+			if (err != nil) != c.wantErr {
+				t.Errorf("Validate() error = %v, wantErr %v", err, c.wantErr)
+			}
+		})
+	}
+}

pkg/types/alertmanagertypes/schedule.go

@@ -108,6 +108,7 @@ func (s *Schedule) UnmarshalJSON(data []byte) error {
 		if err != nil {
 			return err
 		}
+		// TODO(jatinderjit): if endTime.IsZero() then we should not set the endTime
 		s.EndTime = time.Date(endTime.Year(), endTime.Month(), endTime.Day(), endTime.Hour(), endTime.Minute(), endTime.Second(), endTime.Nanosecond(), loc)
 	}
 

pkg/types/spantypes/aggregation.go

@@ -1,4 +1,4 @@
-package tracedetailtypes
+package spantypes
 
 import (
 	"slices"

pkg/types/spantypes/aggregation_test.go

@@ -1,4 +1,4 @@
-package tracedetailtypes
+package spantypes
 
 import (
 	"testing"
@@ -33,7 +33,7 @@ func buildTraceFromSpans(spans ...*WaterfallSpan) *WaterfallTrace {
 			endTime = end
 		}
 	}
-	return NewWaterfallTrace(startTime, endTime, uint64(len(spanMap)), 0, spanMap, nil, nil, false)
+	return NewWaterfallTrace(startTime, endTime, uint64(len(spanMap)), 0, spanMap, nil, false)
 }
 
 var (

pkg/types/spantypes/mappergroup.go

@@ -13,7 +13,9 @@ var (
 	ErrCodeMappingGroupAlreadyExists = errors.MustNewCode("span_attribute_mapping_group_already_exists")
 )
 
-// A group runs when any of the listed attribute/resource key patterns match.
+// SpanMapperGroupCondition gates whether a group's rules run for a given span.
+// A group runs when any attribute or resource key on the span CONTAINS one of
+// the listed substrings (plain substring match — no glob syntax).
 type SpanMapperGroupCondition struct {
 	Attributes []string `json:"attributes" required:"true" nullable:"true"`
 	Resource   []string `json:"resource" required:"true" nullable:"true"`

pkg/types/spantypes/spanmapperprocessor.go

@@ -0,0 +1,140 @@
+package spantypes
+
+import (
+	"sort"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
+	"gopkg.in/yaml.v3"
+)
+
+const (
+	SpanAttrMappingFeatureType agentConf.AgentFeatureType = "span_attr_mapping"
+
+	ProcessorName = "signozspanmapper"
+)
+
+var (
+	ErrCodeInvalidCollectorConfig      = errors.MustNewCode("invalid_collector_config")
+	ErrCodeBuildMappingProcessorConfig = errors.MustNewCode("build_mapping_processor_config")
+)
+
+type SpanMapperGroupWithMappers struct {
+	Group   *SpanMapperGroup `json:"group"`
+	Mappers []*SpanMapper    `json:"mappers"`
+}
+
+// spanMapperProcessorConfig is the collector config for signozspanmapper.
+type spanMapperProcessorConfig struct {
+	Groups []spanMapperProcessorGroup `yaml:"groups" json:"groups"`
+}
+
+type spanMapperProcessorGroup struct {
+	ID         string                         `yaml:"id" json:"id"`
+	ExistsAny  spanMapperProcessorExistsAny   `yaml:"exists_any" json:"exists_any"`
+	Attributes []spanMapperProcessorAttribute `yaml:"attributes" json:"attributes"`
+}
+
+type spanMapperProcessorExistsAny struct {
+	Attributes []string `yaml:"attributes,omitempty" json:"attributes,omitempty"`
+	Resource   []string `yaml:"resource,omitempty" json:"resource,omitempty"`
+}
+
+type spanMapperProcessorAttribute struct {
+	Target  string                      `yaml:"target" json:"target"`
+	Context string                      `yaml:"context,omitempty" json:"context,omitempty"`
+	Sources []spanMapperProcessorSource `yaml:"sources" json:"sources"`
+}
+
+type spanMapperProcessorSource struct {
+	Key    string `yaml:"key" json:"key"`
+	Action string `yaml:"action,omitempty" json:"action,omitempty"`
+}
+
+func GenerateCollectorConfigWithSpanMapperProcessor(currentConfYaml []byte, groups []*SpanMapperGroupWithMappers) ([]byte, error) {
+	var collectorConf map[string]any
+	if err := yaml.Unmarshal(currentConfYaml, &collectorConf); err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, ErrCodeInvalidCollectorConfig, "failed to unmarshal collector config")
+	}
+	// rare but don't do anything in this case, also means it's just comments.
+	if collectorConf == nil {
+		collectorConf = map[string]any{}
+	}
+
+	processors := map[string]any{}
+	if existing, ok := collectorConf["processors"]; ok && existing != nil {
+		p, ok := existing.(map[string]any)
+		if !ok {
+			return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidCollectorConfig, "collector config 'processors' must be a mapping, got %T", existing)
+		}
+		processors = p
+	}
+
+	procConfig := buildProcessorConfig(groups)
+
+	processors[ProcessorName] = procConfig
+	collectorConf["processors"] = processors
+
+	out, err := yaml.Marshal(collectorConf)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, ErrCodeBuildMappingProcessorConfig, "failed to marshal collector config")
+	}
+	return out, nil
+}
+
+func buildProcessorConfig(groups []*SpanMapperGroupWithMappers) *spanMapperProcessorConfig {
+	out := make([]spanMapperProcessorGroup, 0, len(groups))
+
+	for _, gm := range groups {
+		rules := make([]spanMapperProcessorAttribute, 0, len(gm.Mappers))
+		for _, m := range gm.Mappers {
+			rules = append(rules, buildAttributeRule(m))
+		}
+
+		out = append(out, spanMapperProcessorGroup{
+			ID: gm.Group.Name,
+			ExistsAny: spanMapperProcessorExistsAny{
+				Attributes: gm.Group.Condition.Attributes,
+				Resource:   gm.Group.Condition.Resource,
+			},
+			Attributes: rules,
+		})
+	}
+
+	return &spanMapperProcessorConfig{Groups: out}
+}
+
+// buildAttributeRule maps a single SpanMapper to a collector attribute rule.
+// Sources are sorted by Priority DESC (highest-priority first); read-from-
+// resource sources are encoded via the "resource." prefix on the key. Each
+// source carries its own action — "copy" is omitted to keep the emitted YAML
+// compact, and only "move" is set explicitly.
+func buildAttributeRule(m *SpanMapper) spanMapperProcessorAttribute {
+	sources := make([]SpanMapperSource, len(m.Config.Sources))
+	copy(sources, m.Config.Sources)
+	sort.SliceStable(sources, func(i, j int) bool { return sources[i].Priority > sources[j].Priority })
+
+	out := make([]spanMapperProcessorSource, 0, len(sources))
+	for _, s := range sources {
+		key := s.Key
+		if s.Context == FieldContextResource {
+			key = FieldContextResource.StringValue() + "." + s.Key
+		}
+		var action string
+		if s.Operation == SpanMapperOperationMove {
+			action = SpanMapperOperationMove.StringValue()
+		}
+		out = append(out, spanMapperProcessorSource{Key: key, Action: action})
+	}
+
+	ctx := FieldContextSpanAttribute
+	if m.FieldContext == FieldContextResource {
+		ctx = FieldContextResource
+	}
+
+	return spanMapperProcessorAttribute{
+		Target:  m.Name,
+		Context: ctx.StringValue(),
+		Sources: out,
+	}
+}

pkg/types/spantypes/spanmapperprocessor_test.go

@@ -0,0 +1,198 @@
+package spantypes
+
+import (
+	"os"
+	"path/filepath"
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+	"gopkg.in/yaml.v3"
+)
+
+func TestGenerateCollectorConfigWithSpanMapperProcessor(t *testing.T) {
+	t.Parallel()
+
+	baseline := loadFixture(t, "collector_baseline.yaml")
+
+	tests := []struct {
+		name   string
+		groups []*SpanMapperGroupWithMappers
+		want   string
+	}{
+		{
+			name: "no_groups",
+			want: "collector_no_groups.yaml",
+		},
+		{
+			name: "with_groups",
+			groups: []*SpanMapperGroupWithMappers{
+				{
+					Group: newGroup("llm", []string{"model"}, []string{"service.name"}),
+					Mappers: []*SpanMapper{
+						newMapper("gen_ai.request.model", FieldContextResource,
+							attrSrc("gen_ai.llm.model", SpanMapperOperationCopy, 3),
+							attrSrc("llm.model", SpanMapperOperationCopy, 2),
+							resSrc("service.name", SpanMapperOperationCopy, 1),
+						),
+						newMapper("gen_ai.request.tokens", FieldContextSpanAttribute,
+							attrSrc("gen_ai.request_tokens", SpanMapperOperationCopy, 2),
+							attrSrc("llm.tokens", SpanMapperOperationCopy, 1),
+						),
+						newMapper("gen_ai.request.input", FieldContextSpanAttribute,
+							attrSrc("gen_ai.input", SpanMapperOperationMove, 2),
+							attrSrc("llm.input", SpanMapperOperationMove, 1),
+						),
+					},
+				},
+				{
+					Group: newGroup("agent", []string{"agent."}, nil),
+					Mappers: []*SpanMapper{
+						newMapper("gen_ai.agent.name", FieldContextSpanAttribute,
+							attrSrc("agent.name", SpanMapperOperationCopy, 2),
+							attrSrc("llm.agent.name", SpanMapperOperationCopy, 1),
+						),
+						newMapper("gen_ai.agent.id", FieldContextSpanAttribute,
+							attrSrc("gen_ai.agent.id", SpanMapperOperationCopy, 2),
+							attrSrc("llm.agent.id", SpanMapperOperationCopy, 1),
+						),
+					},
+				},
+				{
+					Group: newGroup("tool", []string{"agent."}, nil),
+					Mappers: []*SpanMapper{
+						newMapper("gen_ai.tool.name", FieldContextSpanAttribute,
+							attrSrc("ai.tool.name", SpanMapperOperationCopy, 2),
+							attrSrc("llm.tool.name", SpanMapperOperationCopy, 1),
+						),
+					},
+				},
+			},
+			want: "collector_with_groups.yaml",
+		},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			t.Parallel()
+			got, err := GenerateCollectorConfigWithSpanMapperProcessor(baseline, tc.groups)
+			require.NoError(t, err)
+			assertYAMLEqual(t, loadFixture(t, tc.want), got)
+		})
+	}
+}
+
+func TestGenerateCollectorConfigWithSpanMapperProcessor_Errors(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name string
+		in   []byte
+	}{
+		{"processors_not_a_map", []byte("processors: not-a-map\n")},
+		{"malformed_yaml", []byte(": :")},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			t.Parallel()
+			_, err := GenerateCollectorConfigWithSpanMapperProcessor(tc.in, nil)
+			require.Error(t, err)
+			assert.True(t, errors.Ast(err, errors.TypeInvalidInput), "want TypeInvalidInput, got %v", err)
+			assert.True(t, errors.Asc(err, ErrCodeInvalidCollectorConfig), "want ErrCodeInvalidCollectorConfig, got %v", err)
+		})
+	}
+}
+
+func TestBuildAttributeRule(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name   string
+		mapper *SpanMapper
+		want   spanMapperProcessorAttribute
+	}{
+		{
+			name: "priority_sort_and_resource_prefix",
+			mapper: newMapper("gen_ai.request.model", FieldContextResource,
+				attrSrc("llm.model", SpanMapperOperationCopy, 20),
+				resSrc("service.name", SpanMapperOperationCopy, 10),
+				attrSrc("gen_ai.llm.model", SpanMapperOperationCopy, 30),
+			),
+			want: spanMapperProcessorAttribute{
+				Target:  "gen_ai.request.model",
+				Context: FieldContextResource.StringValue(),
+				Sources: []spanMapperProcessorSource{
+					{Key: "gen_ai.llm.model"},
+					{Key: "llm.model"},
+					{Key: "resource.service.name"},
+				},
+			},
+		},
+		{
+			name: "per_source_actions",
+			mapper: newMapper("gen_ai.request.input", FieldContextSpanAttribute,
+				attrSrc("gen_ai.input", SpanMapperOperationMove, 20),
+				attrSrc("llm.input", SpanMapperOperationCopy, 10),
+			),
+			want: spanMapperProcessorAttribute{
+				Target:  "gen_ai.request.input",
+				Context: FieldContextSpanAttribute.StringValue(),
+				Sources: []spanMapperProcessorSource{
+					{Key: "gen_ai.input", Action: SpanMapperOperationMove.StringValue()},
+					{Key: "llm.input"},
+				},
+			},
+		},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			t.Parallel()
+			assert.Equal(t, tc.want, buildAttributeRule(tc.mapper))
+		})
+	}
+}
+
+func loadFixture(t *testing.T, name string) []byte {
+	t.Helper()
+	b, err := os.ReadFile(filepath.Join("testdata", name))
+	require.NoError(t, err)
+	return b
+}
+
+// assertYAMLEqual compares two YAML documents structurally so key order and
+// slice formatting do not matter.
+func assertYAMLEqual(t *testing.T, want, got []byte) {
+	t.Helper()
+	var w, g any
+	require.NoError(t, yaml.Unmarshal(want, &w))
+	require.NoError(t, yaml.Unmarshal(got, &g))
+	assert.Equal(t, w, g)
+}
+
+func newGroup(name string, attrs, res []string) *SpanMapperGroup {
+	return &SpanMapperGroup{
+		Name:      name,
+		Condition: SpanMapperGroupCondition{Attributes: attrs, Resource: res},
+		Enabled:   true,
+	}
+}
+
+func newMapper(name string, target FieldContext, sources ...SpanMapperSource) *SpanMapper {
+	return &SpanMapper{
+		Name:         name,
+		FieldContext: target,
+		Config:       SpanMapperConfig{Sources: sources},
+		Enabled:      true,
+	}
+}
+
+func attrSrc(key string, op SpanMapperOperation, priority int) SpanMapperSource {
+	return SpanMapperSource{Key: key, Context: FieldContextSpanAttribute, Operation: op, Priority: priority}
+}
+
+func resSrc(key string, op SpanMapperOperation, priority int) SpanMapperSource {
+	return SpanMapperSource{Key: key, Context: FieldContextResource, Operation: op, Priority: priority}
+}

pkg/types/spantypes/store.go

@@ -21,3 +21,11 @@ type SpanMapperStore interface {
 	UpdateMapper(ctx context.Context, mapper *SpanMapper) error
 	DeleteMapper(ctx context.Context, orgID, groupID, id valuer.UUID) error
 }
+
+// TraceStore defines the data access interface for trace detail queries.
+type TraceStore interface {
+	GetTraceSummary(ctx context.Context, traceID string) (*TraceSummary, error)
+	GetTraceSpans(ctx context.Context, traceID string, summary *TraceSummary) ([]StorableSpan, error)
+	GetMinimalSpans(ctx context.Context, traceID string, summary *TraceSummary) ([]MinimalSpan, error)
+	GetTraceSpansByIDs(ctx context.Context, traceID string, summary *TraceSummary, spanIDs []string) ([]StorableSpan, error)
+}

pkg/types/spantypes/testdata/collector_baseline.yaml

@@ -0,0 +1,17 @@
+receivers:
+  otlp:
+    protocols:
+      grpc:
+processors:
+  signozspanmapper:
+    groups: []
+  batch: {}
+exporters:
+  otlp:
+    endpoint: localhost:4317
+service:
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: [signozspanmapper, batch]
+      exporters: [otlp]

pkg/types/spantypes/testdata/collector_no_groups.yaml

@@ -0,0 +1,17 @@
+receivers:
+  otlp:
+    protocols:
+      grpc:
+processors:
+  signozspanmapper:
+    groups: []
+  batch: {}
+exporters:
+  otlp:
+    endpoint: localhost:4317
+service:
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: [signozspanmapper, batch]
+      exporters: [otlp]

pkg/types/spantypes/testdata/collector_with_groups.yaml

@@ -0,0 +1,67 @@
+receivers:
+  otlp:
+    protocols:
+      grpc:
+processors:
+  signozspanmapper:
+    groups:
+      - id: llm
+        exists_any:
+          attributes:
+            - model
+          resource:
+            - service.name
+        attributes:
+          - target: gen_ai.request.model
+            context: resource
+            sources:
+              - key: gen_ai.llm.model
+              - key: llm.model
+              - key: resource.service.name
+          - target: gen_ai.request.tokens
+            context: attribute
+            sources:
+              - key: gen_ai.request_tokens
+              - key: llm.tokens
+          - target: gen_ai.request.input
+            context: attribute
+            sources:
+              - key: gen_ai.input
+                action: move
+              - key: llm.input
+                action: move
+      - id: agent
+        exists_any:
+          attributes:
+            - agent.
+        attributes:
+          - target: gen_ai.agent.name
+            context: attribute
+            sources:
+              - key: agent.name
+              - key: llm.agent.name
+          - target: gen_ai.agent.id
+            context: attribute
+            sources:
+              - key: gen_ai.agent.id
+              - key: llm.agent.id
+      - id: tool
+        exists_any:
+          attributes:
+            - agent.
+        attributes:
+          - target: gen_ai.tool.name
+            context: attribute
+            sources:
+              - key: ai.tool.name
+              - key: llm.tool.name
+  batch: {}
+exporters:
+  otlp:
+    endpoint: localhost:4317
+service:
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: [signozspanmapper, batch]
+      exporters: [otlp]

pkg/types/spantypes/waterfall_span.go

@@ -1,4 +1,4 @@
-package tracedetailtypes
+package spantypes
 
 import (
 	"encoding/json"
@@ -132,6 +132,31 @@ type StorableSpan struct {
 	ResponseStatusCode string             `ch:"response_status_code"`
 }
 
+// MinimalSpan with only the fields needed to build the parent-child tree.
+type MinimalSpan struct {
+	SpanID       string    `ch:"span_id"`
+	ParentSpanID string    `ch:"parent_span_id"`
+	StartTime    time.Time `ch:"timestamp"`
+	DurationNano uint64    `ch:"duration_nano"`
+	HasError     bool      `ch:"has_error"`
+	ServiceName  string    `ch:"resource_string_service$$name"`
+}
+
+func (item *MinimalSpan) ToWaterfallSpan() *WaterfallSpan {
+	return &WaterfallSpan{
+		SpanID:       item.SpanID,
+		ParentSpanID: item.ParentSpanID,
+		TimeUnix:     uint64(item.StartTime.UnixNano()),
+		DurationNano: item.DurationNano,
+		HasError:     item.HasError,
+		ServiceName:  item.ServiceName,
+		Resource:     map[string]string{"service.name": item.ServiceName},
+		Children:     make([]*WaterfallSpan, 0),
+		Attributes:   make(map[string]any),
+		Events:       make([]Event, 0),
+	}
+}
+
 // NewMissingWaterfallSpan creates a synthetic placeholder span for a parent that has no recorded data.
 func NewMissingWaterfallSpan(spanID, traceID string, timeUnixNano, durationNano uint64) *WaterfallSpan {
 	return &WaterfallSpan{
@@ -297,6 +322,24 @@ func (item *StorableSpan) ToWaterfallSpan() *WaterfallSpan {
 	}
 }
 
+func EnrichSelectedSpans(window []*WaterfallSpan, fullSpans []StorableSpan) {
+	fullByID := make(map[string]*StorableSpan, len(fullSpans))
+	for i := range fullSpans {
+		fullByID[fullSpans[i].SpanID] = &fullSpans[i]
+	}
+	for i, ws := range window {
+		full, ok := fullByID[ws.SpanID]
+		if !ok {
+			continue // synthesized MissingSpan — keep empty shell
+		}
+		newWS := full.ToWaterfallSpan()
+		newWS.Level = ws.Level
+		newWS.HasChildren = ws.HasChildren
+		newWS.SubTreeNodeCount = ws.SubTreeNodeCount
+		window[i] = newWS
+	}
+}
+
 // getSpanIndex returns the index of matched span and -1 for no match.
 func getSpanIndex(spans []*WaterfallSpan, targetSpanID string) int {
 	for i, s := range spans {

pkg/types/spantypes/waterfall_trace.go

@@ -1,4 +1,4 @@
-package tracedetailtypes
+package spantypes
 
 import (
 	"encoding/json"
@@ -20,73 +20,66 @@ type TraceSummary struct {
 
 // WaterfallTrace holds processed trace data with childern populated in spans.
 type WaterfallTrace struct {
-	StartTime                     uint64                    `json:"startTime"`
-	EndTime                       uint64                    `json:"endTime"`
-	TotalSpans                    uint64                    `json:"totalSpans"`
-	TotalErrorSpans               uint64                    `json:"totalErrorSpans"`
-	ServiceNameToTotalDurationMap map[string]uint64         `json:"serviceNameToTotalDurationMap"`
-	SpanIDToSpanNodeMap           map[string]*WaterfallSpan `json:"spanIdToSpanNodeMap"`
-	TraceRoots                    []*WaterfallSpan          `json:"traceRoots"`
-	HasMissingSpans               bool                      `json:"hasMissingSpans"`
+	StartTime           uint64                    `json:"startTime"`
+	EndTime             uint64                    `json:"endTime"`
+	TotalSpans          uint64                    `json:"totalSpans"`
+	TotalErrorSpans     uint64                    `json:"totalErrorSpans"`
+	SpanIDToSpanNodeMap map[string]*WaterfallSpan `json:"spanIdToSpanNodeMap"`
+	TraceRoots          []*WaterfallSpan          `json:"traceRoots"`
+	HasMissingSpans     bool                      `json:"hasMissingSpans"`
 }
 
 // GettableWaterfallTrace is the response for the v3 waterfall API.
 type GettableWaterfallTrace struct {
-	StartTimestampMillis  uint64 `json:"startTimestampMillis"`
-	EndTimestampMillis    uint64 `json:"endTimestampMillis"`
-	RootServiceName       string `json:"rootServiceName"`
-	RootServiceEntryPoint string `json:"rootServiceEntryPoint"`
-	TotalSpansCount       uint64 `json:"totalSpansCount"`
-	TotalErrorSpansCount  uint64 `json:"totalErrorSpansCount"`
-	// Deprecated: use Aggregations with SpanAggregationExecutionTimePercentage on the service.name field instead.
-	ServiceNameToTotalDurationMap map[string]uint64       `json:"serviceNameToTotalDurationMap"`
-	Spans                         []*WaterfallSpan        `json:"spans"`
-	HasMissingSpans               bool                    `json:"hasMissingSpans"`
-	UncollapsedSpans              []string                `json:"uncollapsedSpans"`
-	HasMore                       bool                    `json:"hasMore"`
-	Aggregations                  []SpanAggregationResult `json:"aggregations"`
+	StartTimestampMillis  uint64                  `json:"startTimestampMillis"`
+	EndTimestampMillis    uint64                  `json:"endTimestampMillis"`
+	RootServiceName       string                  `json:"rootServiceName"`
+	RootServiceEntryPoint string                  `json:"rootServiceEntryPoint"`
+	TotalSpansCount       uint64                  `json:"totalSpansCount"`
+	TotalErrorSpansCount  uint64                  `json:"totalErrorSpansCount"`
+	Spans                 []*WaterfallSpan        `json:"spans"`
+	HasMissingSpans       bool                    `json:"hasMissingSpans"`
+	UncollapsedSpans      []string                `json:"uncollapsedSpans"`
+	HasMore               bool                    `json:"hasMore"`
+	Aggregations          []SpanAggregationResult `json:"aggregations"`
 }
 
 // NewWaterfallTrace constructs a WaterfallTrace from processed span data.
 func NewWaterfallTrace(
 	startTime, endTime, totalSpans, totalErrorSpans uint64,
 	spanIDToSpanNodeMap map[string]*WaterfallSpan,
-	serviceNameToTotalDurationMap map[string]uint64,
 	traceRoots []*WaterfallSpan,
 	hasMissingSpans bool,
 ) *WaterfallTrace {
 	return &WaterfallTrace{
-		StartTime:                     startTime,
-		EndTime:                       endTime,
-		TotalSpans:                    totalSpans,
-		TotalErrorSpans:               totalErrorSpans,
-		SpanIDToSpanNodeMap:           spanIDToSpanNodeMap,
-		ServiceNameToTotalDurationMap: serviceNameToTotalDurationMap,
-		TraceRoots:                    traceRoots,
-		HasMissingSpans:               hasMissingSpans,
+		StartTime:           startTime,
+		EndTime:             endTime,
+		TotalSpans:          totalSpans,
+		TotalErrorSpans:     totalErrorSpans,
+		SpanIDToSpanNodeMap: spanIDToSpanNodeMap,
+		TraceRoots:          traceRoots,
+		HasMissingSpans:     hasMissingSpans,
 	}
 }
 
-func NewWaterfallTraceFromSpans(spans []StorableSpan) *WaterfallTrace {
+// NewWaterfallTraceFromSpans requires WaterfallSpan nodes with only below fields:
+// SpanID, ParentSpanID, TimeUnix, DurationNano, HasError, and ServiceName.
+func NewWaterfallTraceFromSpans(nodes []*WaterfallSpan) *WaterfallTrace {
 	var (
 		startTime, endTime, totalErrorSpans uint64
-		spanIDToSpanNodeMap                 = make(map[string]*WaterfallSpan, len(spans))
+		spanIDToSpanNodeMap                 = make(map[string]*WaterfallSpan, len(nodes))
 		traceRoots                          []*WaterfallSpan
 		hasMissingSpans                     bool
 	)
 
-	for _, item := range spans {
-		span := item.ToWaterfallSpan()
-		startTimeUnixNano := uint64(item.StartTime.UnixNano())
-		if startTime == 0 || startTimeUnixNano < startTime {
-			startTime = startTimeUnixNano
+	for _, span := range nodes {
+		if startTime == 0 || span.TimeUnix < startTime {
+			startTime = span.TimeUnix
 		}
-		endTime = max(endTime, startTimeUnixNano+span.DurationNano)
-
+		endTime = max(endTime, span.TimeUnix+span.DurationNano)
 		if span.HasError {
 			totalErrorSpans++
 		}
-
 		spanIDToSpanNodeMap[span.SpanID] = span
 	}
 
@@ -121,10 +114,9 @@ func NewWaterfallTraceFromSpans(spans []StorableSpan) *WaterfallTrace {
 	return NewWaterfallTrace(
 		startTime,
 		endTime,
-		uint64(len(spans)),
+		uint64(len(nodes)),
 		totalErrorSpans,
 		spanIDToSpanNodeMap,
-		calculateServiceTime(spanIDToSpanNodeMap),
 		traceRoots,
 		hasMissingSpans,
 	)
@@ -206,23 +198,19 @@ func (wt *WaterfallTrace) CalculateUncollapsedSpanIDs(uncollapsedSpanIDs []strin
 }
 
 func (wt *WaterfallTrace) Clone() cachetypes.Cacheable {
-	copyOfServiceNameToTotalDurationMap := make(map[string]uint64)
-	maps.Copy(copyOfServiceNameToTotalDurationMap, wt.ServiceNameToTotalDurationMap)
-
 	copyOfSpanIDToSpanNodeMap := make(map[string]*WaterfallSpan)
 	maps.Copy(copyOfSpanIDToSpanNodeMap, wt.SpanIDToSpanNodeMap)
 
 	copyOfTraceRoots := make([]*WaterfallSpan, len(wt.TraceRoots))
 	copy(copyOfTraceRoots, wt.TraceRoots)
 	return &WaterfallTrace{
-		StartTime:                     wt.StartTime,
-		EndTime:                       wt.EndTime,
-		TotalSpans:                    wt.TotalSpans,
-		TotalErrorSpans:               wt.TotalErrorSpans,
-		ServiceNameToTotalDurationMap: copyOfServiceNameToTotalDurationMap,
-		SpanIDToSpanNodeMap:           copyOfSpanIDToSpanNodeMap,
-		TraceRoots:                    copyOfTraceRoots,
-		HasMissingSpans:               wt.HasMissingSpans,
+		StartTime:           wt.StartTime,
+		EndTime:             wt.EndTime,
+		TotalSpans:          wt.TotalSpans,
+		TotalErrorSpans:     wt.TotalErrorSpans,
+		SpanIDToSpanNodeMap: copyOfSpanIDToSpanNodeMap,
+		TraceRoots:          copyOfTraceRoots,
+		HasMissingSpans:     wt.HasMissingSpans,
 	}
 }
 
@@ -257,11 +245,6 @@ func NewGettableWaterfallTrace(
 		rootServiceEntryPoint = traceData.TraceRoots[0].Name
 	}
 
-	serviceDurationsMillis := make(map[string]uint64, len(traceData.ServiceNameToTotalDurationMap))
-	for svc, dur := range traceData.ServiceNameToTotalDurationMap {
-		serviceDurationsMillis[svc] = dur / 1_000_000
-	}
-
 	// convert start timestamp to millis because client is expecting it in millis
 	for _, span := range selectedSpans {
 		span.TimeUnix = span.TimeUnix / 1_000_000
@@ -277,18 +260,17 @@ func NewGettableWaterfallTrace(
 	}
 
 	return &GettableWaterfallTrace{
-		Spans:                         selectedSpans,
-		UncollapsedSpans:              uncollapsedSpans,
-		StartTimestampMillis:          traceData.StartTime / 1_000_000,
-		EndTimestampMillis:            traceData.EndTime / 1_000_000,
-		TotalSpansCount:               traceData.TotalSpans,
-		TotalErrorSpansCount:          traceData.TotalErrorSpans,
-		RootServiceName:               rootServiceName,
-		RootServiceEntryPoint:         rootServiceEntryPoint,
-		ServiceNameToTotalDurationMap: serviceDurationsMillis,
-		HasMissingSpans:               traceData.HasMissingSpans,
-		HasMore:                       !selectAllSpans,
-		Aggregations:                  aggregations,
+		Spans:                 selectedSpans,
+		UncollapsedSpans:      uncollapsedSpans,
+		StartTimestampMillis:  traceData.StartTime / 1_000_000,
+		EndTimestampMillis:    traceData.EndTime / 1_000_000,
+		TotalSpansCount:       traceData.TotalSpans,
+		TotalErrorSpansCount:  traceData.TotalErrorSpans,
+		RootServiceName:       rootServiceName,
+		RootServiceEntryPoint: rootServiceEntryPoint,
+		HasMissingSpans:       traceData.HasMissingSpans,
+		HasMore:               !selectAllSpans,
+		Aggregations:          aggregations,
 	}
 }
 
@@ -311,21 +293,6 @@ func windowAroundIndex(selectedIndex, total int, spanLimitPerRequest float64) (s
 	return
 }
 
-func calculateServiceTime(spanIDToSpanNodeMap map[string]*WaterfallSpan) map[string]uint64 {
-	serviceSpans := make(map[string][]*WaterfallSpan)
-	for _, span := range spanIDToSpanNodeMap {
-		if span.ServiceName != "" {
-			serviceSpans[span.ServiceName] = append(serviceSpans[span.ServiceName], span)
-		}
-	}
-
-	totalTimes := make(map[string]uint64)
-	for service, spans := range serviceSpans {
-		totalTimes[service] = mergeSpanIntervals(spans)
-	}
-	return totalTimes
-}
-
 // mergeSpanIntervals computes non-overlapping execution time for a set of spans.
 func mergeSpanIntervals(spans []*WaterfallSpan) uint64 {
 	if len(spans) == 0 {

pkg/types/tracedetailtypes/store.go

@@ -1,9 +0,0 @@
-package tracedetailtypes
-
-import "context"
-
-// TraceStore defines the data access interface for trace detail queries.
-type TraceStore interface {
-	GetTraceSummary(ctx context.Context, traceID string) (*TraceSummary, error)
-	GetTraceSpans(ctx context.Context, traceID string, summary *TraceSummary) ([]StorableSpan, error)
-}

pkg/web/config.go

@@ -14,6 +14,23 @@ type Config struct {
 
 	// The directory from which to serve the web files.
 	Directory string `mapstructure:"directory"`
+
+	// Web settings configuration.
+	Settings SettingsConfig `mapstructure:"settings"`
+}
+
+// SettingsConfig holds the configuration for web settings.
+type SettingsConfig struct {
+	Posthog PosthogConfig `mapstructure:"posthog"`
+	Appcues AppcuesConfig `mapstructure:"appcues"`
+}
+
+type PosthogConfig struct {
+	Enabled bool `mapstructure:"enabled"`
+}
+
+type AppcuesConfig struct {
+	Enabled bool `mapstructure:"enabled"`
 }
 
 func NewConfigFactory() factory.ConfigFactory {
@@ -25,6 +42,14 @@ func newConfig() factory.Config {
 		Enabled:   true,
 		Index:     "index.html",
 		Directory: "/etc/signoz/web",
+		Settings: SettingsConfig{
+			Posthog: PosthogConfig{
+				Enabled: true,
+			},
+			Appcues: AppcuesConfig{
+				Enabled: true,
+			},
+		},
 	}
 }
 

pkg/web/config_test.go

@@ -38,6 +38,7 @@ func TestNewWithEnvProvider(t *testing.T) {
 		Enabled:   false,
 		Index:     def.Index,
 		Directory: def.Directory,
+		Settings:  def.Settings,
 	}
 
 	assert.Equal(t, expected, actual)

pkg/web/routerweb/provider.go

@@ -2,6 +2,8 @@ package routerweb
 
 import (
 	"context"
+	"encoding/json"
+	"html/template"
 	"net/http"
 	"os"
 	"path/filepath"
@@ -42,8 +44,17 @@ func New(ctx context.Context, settings factory.ProviderSettings, config web.Conf
 		return nil, errors.WrapInvalidInputf(err, errors.CodeInvalidInput, "cannot read %q in web directory", config.Index)
 	}
 
+	webSettings := web.NewSettings(config)
+	settingsJSON, err := json.Marshal(webSettings)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "cannot marshal web settings to JSON")
+	}
+
 	logger := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/pkg/web/routerweb").Logger()
-	indexContents := web.NewIndex(ctx, logger, config.Index, raw, web.TemplateData{BaseHref: globalConfig.ExternalPathTrailing()})
+	indexContents := web.NewIndex(ctx, logger, config.Index, raw, web.TemplateData{
+		BaseHref: globalConfig.ExternalPathTrailing(),
+		Settings: template.JS(settingsJSON),
+	})
 
 	return &provider{
 		config:        config,

pkg/web/routerweb/provider_test.go

@@ -2,6 +2,7 @@ package routerweb
 
 import (
 	"context"
+	"encoding/json"
 	"io"
 	"net"
 	"net/http"
@@ -19,6 +20,11 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
+func expectedHTML(baseHref string, settings web.Settings) string {
+	settingsJSON, _ := json.Marshal(settings)
+	return `<html><head><base href="` + baseHref + `" /></head><body><script>window.signozBootData={settings:` + string(settingsJSON) + `}</script>Welcome to test data!!!</body></html>`
+}
+
 func startServer(t *testing.T, config web.Config, globalConfig global.Config) string {
 	t.Helper()
 
@@ -54,53 +60,79 @@ func httpGet(t *testing.T, url string) string {
 func TestServeTemplatedIndex(t *testing.T) {
 	t.Parallel()
 
+	emptySettings := web.Settings{}
+
 	testCases := []struct {
 		name         string
 		path         string
 		globalConfig global.Config
+		webConfig    web.Config
 		expected     string
 	}{
 		{
 			name:         "RootBaseHrefAtRoot",
 			path:         "/",
 			globalConfig: global.Config{},
-			expected:     `<html><head><base href="/" /></head><body>Welcome to test data!!!</body></html>`,
+			webConfig:    web.Config{Index: "valid_template.html", Directory: "testdata"},
+			expected:     expectedHTML("/", emptySettings),
 		},
 		{
 			name:         "RootBaseHrefAtNonExistentPath",
 			path:         "/does-not-exist",
 			globalConfig: global.Config{},
-			expected:     `<html><head><base href="/" /></head><body>Welcome to test data!!!</body></html>`,
+			webConfig:    web.Config{Index: "valid_template.html", Directory: "testdata"},
+			expected:     expectedHTML("/", emptySettings),
 		},
 		{
 			name:         "RootBaseHrefAtDirectory",
 			path:         "/assets",
 			globalConfig: global.Config{},
-			expected:     `<html><head><base href="/" /></head><body>Welcome to test data!!!</body></html>`,
+			webConfig:    web.Config{Index: "valid_template.html", Directory: "testdata"},
+			expected:     expectedHTML("/", emptySettings),
 		},
 		{
 			name:         "SubPathBaseHrefAtRoot",
 			path:         "/",
 			globalConfig: global.Config{ExternalURL: &url.URL{Scheme: "https", Host: "example.com", Path: "/signoz"}},
-			expected:     `<html><head><base href="/signoz/" /></head><body>Welcome to test data!!!</body></html>`,
+			webConfig:    web.Config{Index: "valid_template.html", Directory: "testdata"},
+			expected:     expectedHTML("/signoz/", emptySettings),
 		},
 		{
 			name:         "SubPathBaseHrefAtNonExistentPath",
 			path:         "/does-not-exist",
 			globalConfig: global.Config{ExternalURL: &url.URL{Scheme: "https", Host: "example.com", Path: "/signoz"}},
-			expected:     `<html><head><base href="/signoz/" /></head><body>Welcome to test data!!!</body></html>`,
+			webConfig:    web.Config{Index: "valid_template.html", Directory: "testdata"},
+			expected:     expectedHTML("/signoz/", emptySettings),
 		},
 		{
 			name:         "SubPathBaseHrefAtDirectory",
 			path:         "/assets",
 			globalConfig: global.Config{ExternalURL: &url.URL{Scheme: "https", Host: "example.com", Path: "/signoz"}},
-			expected:     `<html><head><base href="/signoz/" /></head><body>Welcome to test data!!!</body></html>`,
+			webConfig:    web.Config{Index: "valid_template.html", Directory: "testdata"},
+			expected:     expectedHTML("/signoz/", emptySettings),
+		},
+		{
+			name:         "WithPopulatedSettings",
+			path:         "/",
+			globalConfig: global.Config{},
+			webConfig: web.Config{
+				Index:     "valid_template.html",
+				Directory: "testdata",
+				Settings: web.SettingsConfig{
+					Posthog: web.PosthogConfig{Enabled: true},
+					Appcues: web.AppcuesConfig{Enabled: true},
+				},
+			},
+			expected: expectedHTML("/", web.Settings{
+				Posthog: web.Posthog{Enabled: true},
+				Appcues: web.Appcues{Enabled: true},
+			}),
 		},
 	}
 
 	for _, testCase := range testCases {
 		t.Run(testCase.name, func(t *testing.T) {
-			base := startServer(t, web.Config{Index: "valid_template.html", Directory: "testdata"}, testCase.globalConfig)
+			base := startServer(t, testCase.webConfig, testCase.globalConfig)
 
 			assert.Equal(t, testCase.expected, strings.TrimSuffix(httpGet(t, base+testCase.path), "\n"))
 		})

pkg/web/routerweb/testdata/valid_template.html

@@ -1 +1 @@
-<html><head><base href="[[.BaseHref]]" /></head><body>Welcome to test data!!!</body></html>
+<html><head><base href="[[.BaseHref]]" /></head><body><script>window.signozBootData={settings:[[.Settings]]}</script>Welcome to test data!!!</body></html>

pkg/web/settings.go

@@ -0,0 +1,25 @@
+package web
+
+type Settings struct {
+	Posthog Posthog `json:"posthog" required:"true"`
+	Appcues Appcues `json:"appcues" required:"true"`
+}
+
+type Posthog struct {
+	Enabled bool `json:"enabled" required:"true"`
+}
+
+type Appcues struct {
+	Enabled bool `json:"enabled" required:"true"`
+}
+
+func NewSettings(config Config) Settings {
+	return Settings{
+		Posthog: Posthog{
+			Enabled: config.Settings.Posthog.Enabled,
+		},
+		Appcues: Appcues{
+			Enabled: config.Settings.Appcues.Enabled,
+		},
+	}
+}

pkg/web/template.go

@@ -11,8 +11,14 @@ import (
 
 // Field names map to the HTML attributes they populate in the template:
 //   - BaseHref  → <base href="[[.BaseHref]]" />
+//   - Settings  → window.signozBootData = { settings: [[.Settings]] }
 type TemplateData struct {
 	BaseHref string
+
+	// Settings is the pre-serialized JSON of web.Settings for injection into a
+	// <script> block. The template.JS type prevents html/template from
+	// HTML-escaping the value.
+	Settings template.JS
 }
 
 // If the template cannot be parsed or executed, the raw bytes are

tests/e2e/helpers/dashboards.ts

@@ -8,10 +8,6 @@ import {
 } from '@playwright/test';
 
 import apmMetricsTemplate from '../testdata/apm-metrics.json';
-import queriesData from '../testdata/queries.json';
-
-export type SignalType = 'metrics' | 'logs' | 'traces';
-export type QueriesData = typeof queriesData;
 import chartDataTemplate from '../testdata/chart-data-dashboard.json';
 import variablesTemplate from '../testdata/variables-dashboard.json';
 
@@ -370,56 +366,6 @@ export async function findDashboardIdByTitle(
 	return body.data.find((d) => d.data.title === title)?.id;
 }
 
-/** Shape of a single persisted widget — only the fields these specs assert on. */
-export interface PersistedWidget {
-	id?: string;
-	title?: string;
-	description?: string;
-	panelTypes?: string;
-	timePreferance?: string;
-	yAxisUnit?: string;
-	decimalPrecision?: number;
-	thresholds?: Array<{
-		thresholdFormat?: string;
-		thresholdOperator?: string;
-		thresholdValue?: number;
-		thresholdColor?: string;
-		thresholdTableOptions?: string;
-	}>;
-	columnUnits?: Record<string, string>;
-	[key: string]: unknown;
-}
-
-/** Shape of the persisted dashboard payload returned by GET /api/v1/dashboards/<id>. */
-export interface DashboardData {
-	title: string;
-	description?: string;
-	tags?: string[];
-	widgets?: PersistedWidget[];
-	variables?: Record<string, Record<string, unknown>>;
-	layout?: unknown[];
-}
-
-/**
- * Fetch the persisted dashboard payload via API. Use this for "did the save
- * actually land on the server?" assertions — UI-only checks can pass on
- * optimistic-update bugs.
- */
-export async function fetchDashboardData(
-	page: Page,
-	id: string,
-): Promise<DashboardData> {
-	const token = await authToken(page);
-	const res = await page.request.get(`/api/v1/dashboards/${id}`, {
-		headers: { Authorization: `Bearer ${token}` },
-	});
-	if (!res.ok()) {
-		throw new Error(`GET /dashboards/${id} ${res.status()}: ${await res.text()}`);
-	}
-	const body = (await res.json()) as { data: { data: DashboardData } };
-	return body.data.data;
-}
-
 // ─── List page UI helpers ────────────────────────────────────────────────
 
 /**
@@ -441,235 +387,3 @@ export async function openDashboardActionMenu(
 	await icon.click();
 	return page.getByRole('tooltip');
 }
-
-// ─── Dashboard detail page helpers ──────────────────────────────────────────
-
-/**
- * Click the Configure button (`data-testid="show-drawer"`) on a dashboard
- * detail page and wait for the settings drawer (`.settings-container-root`) to
- * be visible. Works from both the empty-state view and the populated toolbar —
- * both render the same testid.
- *
- * Returns the drawer locator so callers can scope further assertions to it.
- */
-export async function openDashboardSettingsDrawer(page: Page): Promise<Locator> {
-	await page.getByTestId('show-drawer').first().click();
-	const drawer = page.locator('.settings-container-root');
-	await drawer.waitFor({ state: 'visible' });
-	return drawer;
-}
-
-/**
- * Click `data-testid="save-dashboard-config"` and wait for the resulting
- * `PUT /api/v1/dashboards/<id>` response. The Save button is only rendered
- * when there is at least one unsaved change — callers must ensure the drawer
- * has been dirtied before calling this.
- */
-export async function saveDashboardSettings(page: Page): Promise<void> {
-	const patchResponse = page.waitForResponse(
-		(r) =>
-			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-	);
-	await page.getByTestId('save-dashboard-config').click();
-	await patchResponse;
-}
-
-/**
- * Rename a dashboard via the toolbar options popover:
- * opens the popover (`data-testid="options"`), clicks "Rename", fills the
- * input, clicks "Rename Dashboard", and waits for the PUT response.
- *
- * Pre-condition: the caller must be on the dashboard detail page.
- */
-export async function renameDashboardViaToolbar(
-	page: Page,
-	newTitle: string,
-): Promise<void> {
-	await page.getByTestId('options').click();
-	await page.getByRole('button', { name: 'Rename' }).click();
-
-	const modal = page.getByRole('dialog');
-	await modal.waitFor({ state: 'visible' });
-
-	const input = modal.getByTestId('dashboard-name');
-	await input.clear();
-	await input.fill(newTitle);
-
-	const patchResponse = page.waitForResponse(
-		(r) =>
-			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-	);
-	await page.getByRole('button', { name: 'Rename Dashboard' }).click();
-	await patchResponse;
-
-	await modal.waitFor({ state: 'hidden' });
-}
-
-// ─── Add panel flow ─────────────────────────────────────────────────────────
-
-/**
- * From the dashboard detail page (must already be loaded), drive the full
- * "Add Panel" flow for the given signal type:
- *   1. Click the empty-state `add-panel` CTA to open the New Panel modal.
- *   2. Pick the Time Series panel type.
- *   3. Fill the panel name in the right pane (drives the post-save assertion).
- *   4. For metrics: type the metric name from `queries.json` into the metric
- *      AutoComplete and select it from the dropdown. For logs/traces: switch
- *      the data-source selector to LOGS / TRACES; default Query Builder state
- *      is sufficient (queries.json query strings are empty by design).
- *   5. Click Save Changes and wait for the PUT /api/v1/dashboards/<id> response.
- *
- * Throws if the PUT response is not 2xx. After return, the page is back on
- * the dashboard detail page; the caller asserts the panel rendered.
- */
-export async function configureAndSavePanel(
-	page: Page,
-	signal: SignalType,
-	panelTitle: string,
-): Promise<void> {
-	await page.getByTestId('add-panel').click();
-
-	const newPanelModal = page
-		.getByRole('dialog')
-		.filter({ hasText: 'New Panel' });
-	await newPanelModal.waitFor({ state: 'visible' });
-	await newPanelModal.getByTestId('panel-type-graph').click();
-
-	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
-	await page.getByTestId('panel-name-input').fill(panelTitle);
-
-	if (signal === 'metrics') {
-		const metricName = queriesData.metrics.metricName;
-		// The testid is on the Ant Select wrapper <div>; the editable input
-		// lives inside it. Target the descendant input for fill().
-		const metricInput = page.getByTestId('metric-name-selector-0').locator('input');
-		await metricInput.click();
-		await metricInput.fill(metricName);
-		// AutoComplete debounces and fetches; wait for the option then click.
-		await page
-			.locator('.ant-select-item-option-content', { hasText: metricName })
-			.first()
-			.click();
-	} else {
-		// logs / traces — switch the data source. Default query is sufficient.
-		await page.getByTestId('query-data-source-selector-0').click();
-		await page
-			.locator('.ant-select-item-option-content', {
-				hasText: signal.toUpperCase(),
-			})
-			.click();
-	}
-
-	const putResponse = page.waitForResponse(
-		(r) =>
-			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-	);
-	await page.getByTestId('new-widget-save').click();
-
-	const res = await putResponse;
-	if (!res.ok()) {
-		throw new Error(
-			`PUT /api/v1/dashboards failed ${res.status()}: ${await res.text()}`,
-		);
-	}
-
-	// Save navigates back to /dashboard/<id> (no /new suffix).
-	await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-}
-
-// ─── Widget editor (re-open existing panel) ────────────────────────────────
-
-/**
- * Display labels surfaced in the `panel-change-select` Ant Select inside the
- * widget editor. The mapping to URL `graphType` values comes from the
- * `PANEL_TYPES` enum: TIME_SERIES='graph', VALUE='value', and so on.
- */
-export type PanelDisplayLabel =
-	| 'Time Series'
-	| 'Number'
-	| 'Table'
-	| 'List'
-	| 'Bar'
-	| 'Pie'
-	| 'Histogram';
-
-const PANEL_DISPLAY_TO_GRAPH_TYPE: Record<PanelDisplayLabel, string> = {
-	'Time Series': 'graph',
-	Number: 'value',
-	Table: 'table',
-	List: 'list',
-	Bar: 'bar',
-	Pie: 'pie',
-	Histogram: 'histogram',
-};
-
-/**
- * Open the widget editor for an existing panel by driving the panel header
- * options menu (the three-dot Ant `Dropdown` next to the title).
- *
- * The widget-header-options button is `visibility: hidden` until the panel is
- * hovered (see `GridCardLayout.styles.scss`) — except on TABLE panels, where
- * `globalSearchAvailable` keeps it permanently visible. Hovering the title
- * testid first works for both states.
- */
-export async function openWidgetEditor(
-	page: Page,
-	panelTitle: string,
-): Promise<void> {
-	await page.getByTestId(panelTitle).first().hover();
-	await page.getByTestId('widget-header-options').first().click();
-	await page
-		.getByRole('menuitem', { name: /^edit$/i })
-		.first()
-		.click();
-	await page.waitForURL(/widgetId=/);
-	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
-}
-
-/**
- * Click "Save Changes" in the widget editor, await the dashboard PUT response,
- * and wait for navigation back to `/dashboard/<id>`. Throws if the PUT
- * response is not 2xx. NewWidget's save handler calls the mutation and
- * navigates on success — there is no confirmation modal in this flow.
- */
-export async function saveWidgetEdit(page: Page): Promise<void> {
-	const putResponse = page.waitForResponse(
-		(r) =>
-			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-	);
-	await page.getByTestId('new-widget-save').click();
-	const res = await putResponse;
-	if (!res.ok()) {
-		throw new Error(
-			`PUT /api/v1/dashboards failed ${res.status()}: ${await res.text()}`,
-		);
-	}
-	await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-}
-
-/**
- * Switch the editor's panel display type via the Ant `Select` exposed as
- * `data-testid="panel-change-select"`. The select options carry the display
- * label as visible text (matches `PanelDisplay` enum values). After the
- * change, this helper waits for the URL `graphType` param to reflect the new
- * panel type and for the Save Changes button to re-render — the editor
- * re-routes mid-flow via `redirectWithQueryBuilderData`.
- *
- * Note: the "List" option is filtered out of the dropdown when the current
- * query contains a metrics data source (see VisualizationSettingsSection).
- */
-export async function changePanelType(
-	page: Page,
-	displayLabel: PanelDisplayLabel,
-): Promise<void> {
-	const expectedGraphType = PANEL_DISPLAY_TO_GRAPH_TYPE[displayLabel];
-	await page.getByTestId('panel-change-select').click();
-	// Each option renders a .select-option containing the display text — match
-	// against the typography element to avoid matching the trigger itself.
-	await page
-		.locator('.ant-select-item-option .display', { hasText: displayLabel })
-		.first()
-		.click();
-	await page.waitForURL(new RegExp(`graphType=${expectedGraphType}`));
-	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
-}

tests/e2e/testdata/queries.json

@@ -1,12 +0,0 @@
-{
-    "logs": {
-        "query": ""
-    },
-    "metrics": {
-        "metricName": "signoz_calls_total",
-        "query": ""
-    },
-    "traces": {
-        "query": ""
-    }
-}

tests/e2e/tests/dashboards/create.spec.ts

@@ -1,779 +0,0 @@
-import path from 'path';
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { newAdminContext } from '../../helpers/auth';
-import {
-	APM_METRICS_TITLE,
-	authToken,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	fetchDashboardData,
-	gotoDashboardsList,
-	openDashboardSettingsDrawer,
-	renameDashboardViaToolbar,
-	SEARCH_PLACEHOLDER,
-} from '../../helpers/dashboards';
-
-// All tests mutate dashboard state (create / rename / delete). Run serially to
-// prevent cross-test interference on the list and detail pages.
-test.describe.configure({ mode: 'serial' });
-
-// ─── Suite-level seed registry ────────────────────────────────────────────────
-//
-// Every dashboard created by any test is registered here; one afterAll tears
-// them all down. Tests that don't create anything (TC-10, TC-11, TC-13) need
-// no cleanup entry.
-const seedIds = new Set<string>();
-const BASE_FIXTURE_TITLE = 'create-flow-base-fixture';
-
-const APM_METRICS_TESTDATA_PATH = path.resolve(
-	__dirname,
-	'../../testdata/apm-metrics.json',
-);
-
-async function seed(page: Page, title: string): Promise<string> {
-	const id = await createDashboardViaApi(page, title);
-	seedIds.add(id);
-	return id;
-}
-
-test.beforeAll(async ({ browser }) => {
-	// Seed one base dashboard so the list is non-empty and the
-	// `new-dashboard-cta` header button is rendered for all tests that
-	// drive the "New dashboard" dropdown from the list page.
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		seedIds.add(await createDashboardViaApi(page, BASE_FIXTURE_TITLE));
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterAll(async ({ browser }) => {
-	if (seedIds.size === 0) return;
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of [...seedIds]) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.describe('Dashboard Create Flow', () => {
-	// ─── 1. Create Dashboard (blank) ─────────────────────────────────────────
-
-	test('TC-01 blank create lands on onboarding state with correct default title', async ({
-		authedPage: page,
-	}) => {
-		await gotoDashboardsList(page);
-
-		const postResponse = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'POST' && /\/api\/v1\/dashboards/.test(r.url()),
-		);
-		await page.getByTestId('new-dashboard-cta').click();
-		await page.getByTestId('create-dashboard-menu-cta').click();
-		const res = await postResponse;
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+/);
-
-		expect(res.status()).toBeGreaterThanOrEqual(200);
-		expect(res.status()).toBeLessThan(300);
-
-		// Request contract: UI must POST the default title + uploadedGrafana=false.
-		// Catches regressions where the menu CTA silently changes the create payload.
-		const reqBody = res.request().postDataJSON() as {
-			title?: string;
-			uploadedGrafana?: boolean;
-		};
-		expect(reqBody.title).toBe('Sample Title');
-		expect(reqBody.uploadedGrafana).toBe(false);
-
-		const body = (await res.json()) as {
-			data: { data: { title: string }; id: string };
-		};
-		expect(body.data.data.title).toBe('Sample Title');
-
-		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-		// DashboardDescription always renders dashboard-title even on blank dashboards.
-		await expect(page.getByTestId('dashboard-title')).toHaveText('Sample Title');
-		await expect(page.getByText('Welcome to your new dashboard')).toBeVisible();
-		await expect(page.getByText('Configure your new dashboard')).toBeVisible();
-		await expect(page.getByTestId('show-drawer').first()).toBeVisible();
-		await expect(page.getByTestId('add-panel')).toBeVisible();
-
-		// Register the UI-created dashboard for cleanup.
-		const id = body.data.id;
-		expect(id, 'POST response must include a dashboard id').toBeTruthy();
-		seedIds.add(id);
-	});
-
-	test('TC-02 configure drawer opens with Overview tab and pre-fills existing title', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc02');
-		await page.goto(`/dashboard/${id}`);
-
-		const drawer = await openDashboardSettingsDrawer(page);
-
-		// Overview tab is the default active tab.
-		await expect(drawer.getByRole('button', { name: 'Overview' })).toBeVisible();
-
-		const nameInput = drawer.getByTestId('dashboard-name');
-		await expect(nameInput).toHaveValue('create-flow-tc02');
-
-		const descInput = drawer.getByTestId('dashboard-desc');
-		await expect(descInput).toBeVisible();
-		await expect(descInput).toHaveValue('');
-
-		await expect(
-			drawer.getByPlaceholder('Start typing your tag name'),
-		).toBeVisible();
-
-		// Ant Drawer does not close on Escape — use the X close button in the header.
-		await drawer.getByRole('button', { name: 'Close' }).click();
-		await expect(drawer).not.toHaveClass(/ant-drawer-open/);
-	});
-
-	test('TC-03 rename title, add description and tags, save persists to list', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc03-original');
-		await page.goto(`/dashboard/${id}`);
-
-		const drawer = await openDashboardSettingsDrawer(page);
-
-		const nameInput = drawer.getByTestId('dashboard-name');
-		await nameInput.clear();
-		await nameInput.fill('create-flow-tc03-renamed');
-		await expect(drawer.getByText(/1 unsaved change/)).toBeVisible();
-
-		await drawer.getByTestId('dashboard-desc').fill('A test description');
-		await expect(drawer.getByText(/2 unsaved changes/)).toBeVisible();
-
-		const tagInput = drawer.getByPlaceholder('Start typing your tag name');
-		await tagInput.click();
-		await tagInput.fill('e2e-tag');
-		await page.keyboard.press('Enter');
-		await expect(drawer.getByText(/3 unsaved changes/)).toBeVisible();
-
-		// Click save, capture the PUT, and verify it carried all three fields.
-		const putResponse = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'PUT' &&
-				new RegExp(`/api/v1/dashboards/${id}$`).test(r.url()),
-		);
-		await page.getByTestId('save-dashboard-config').click();
-		const putRes = await putResponse;
-		expect(putRes.status()).toBeGreaterThanOrEqual(200);
-		expect(putRes.status()).toBeLessThan(300);
-
-		// Server-side state must match what the user typed. UI-only checks pass
-		// on optimistic-update bugs; this catches them.
-		const persisted = await fetchDashboardData(page, id);
-		expect(persisted.title).toBe('create-flow-tc03-renamed');
-		expect(persisted.description).toBe('A test description');
-		expect(persisted.tags ?? []).toContain('e2e-tag');
-
-		// Footer clears only after the PUT success callback re-syncs local state.
-		await expect(drawer.getByText(/unsaved change/)).not.toBeVisible();
-
-		await drawer.getByRole('button', { name: 'Close' }).click();
-
-		// Renamed dashboard appears in the list.
-		await gotoDashboardsList(page);
-		const searchInput = page.getByPlaceholder(SEARCH_PLACEHOLDER);
-		await searchInput.fill('create-flow-tc03-renamed');
-		await expect(page.getByText('create-flow-tc03-renamed').first()).toBeVisible();
-
-		// Tag search also surfaces the renamed dashboard.
-		await searchInput.fill('e2e-tag');
-		await expect(page.getByText('create-flow-tc03-renamed').first()).toBeVisible();
-	});
-
-	test('TC-04 discard reverts unsaved changes without API call', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc04');
-		await page.goto(`/dashboard/${id}`);
-
-		const drawer = await openDashboardSettingsDrawer(page);
-
-		const nameInput = drawer.getByTestId('dashboard-name');
-		await nameInput.clear();
-		await nameInput.fill('create-flow-tc04-discarded');
-		await drawer.getByTestId('dashboard-desc').fill('discarded desc');
-		await expect(drawer.getByText(/unsaved change/)).toBeVisible();
-
-		// Intercept any PUT to detect an unwanted save.
-		let patchFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				patchFired = true;
-			}
-			route.continue();
-		});
-
-		await drawer.getByRole('button', { name: 'Discard' }).click();
-
-		await expect(drawer.getByText(/unsaved change/)).not.toBeVisible();
-		await expect(nameInput).toHaveValue('create-flow-tc04');
-		await expect(drawer.getByTestId('dashboard-desc')).toHaveValue('');
-
-		// Settle before asserting "no PUT fired" — a delayed save request that
-		// races past the UI revert would otherwise sneak past the check.
-		await page.waitForLoadState('networkidle');
-		expect(patchFired).toBe(false);
-	});
-
-	test('TC-05 rename via toolbar options popover persists to the toolbar title', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc05');
-		await page.goto(`/dashboard/${id}`);
-
-		// DashboardDescription toolbar always renders — even on blank dashboards.
-		await expect(page.getByTestId('options')).toBeVisible();
-
-		await renameDashboardViaToolbar(page, 'create-flow-tc05-renamed');
-
-		await expect(page.getByTestId('dashboard-title')).toHaveText(
-			'create-flow-tc05-renamed',
-		);
-
-		// Server-side persistence — toolbar rename uses a separate PUT path from
-		// the settings drawer; this catches an optimistic-update regression.
-		const persisted = await fetchDashboardData(page, id);
-		expect(persisted.title).toBe('create-flow-tc05-renamed');
-
-		// List view reflects the rename after navigating back.
-		await gotoDashboardsList(page);
-		await page.getByPlaceholder(SEARCH_PLACEHOLDER).fill('create-flow-tc05-renamed');
-		await expect(page.getByText('create-flow-tc05-renamed').first()).toBeVisible();
-	});
-
-	// ─── 2. Variables ─────────────────────────────────────────────────────────
-
-	test('TC-06 add a Custom variable, verify it appears in the variables bar', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc06');
-		await page.goto(`/dashboard/${id}`);
-
-		const drawer = await openDashboardSettingsDrawer(page);
-		await drawer.getByRole('button', { name: 'Variables' }).click();
-
-		await drawer.getByTestId('add-new-variable').click();
-		await expect(drawer.getByRole('button', { name: 'All variables' })).toBeVisible();
-
-		await drawer
-			.getByPlaceholder('Unique name of the variable')
-			.fill('env');
-
-		await drawer.getByRole('button', { name: 'Custom' }).click();
-
-		// After selecting "Custom" type, the Options collapse panel contains a
-		// textarea with placeholder "Enter options separated by commas."
-		const customInput = drawer.getByPlaceholder(
-			'Enter options separated by commas.',
-		);
-		await customInput.fill('prod,staging,dev');
-
-		const patchResponse = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-		);
-		await drawer.getByRole('button', { name: 'Save Variable' }).click();
-		const res = await patchResponse;
-		expect(res.status()).toBeGreaterThanOrEqual(200);
-		expect(res.status()).toBeLessThan(300);
-
-		// After saving, the variable form disappears and the table row is visible.
-		await expect(drawer.getByRole('button', { name: 'All variables' })).not.toBeVisible();
-		await expect(drawer.getByText('env')).toBeVisible();
-
-		// Server-side persistence — the variable record must land in the dashboard JSON.
-		const persisted = await fetchDashboardData(page, id);
-		const persistedVars = Object.values(persisted.variables ?? {}) as Array<{
-			name?: string;
-			customValue?: string;
-			type?: string;
-		}>;
-		const envVar = persistedVars.find((v) => v.name === 'env');
-		expect(envVar, 'env variable must be persisted on the dashboard').toBeTruthy();
-		expect(envVar?.customValue).toBe('prod,staging,dev');
-
-		// Close the drawer via its X button and check the variables bar renders the
-		// variable label. `.dashboard-variables` always exists once any variable
-		// is defined; assert it contains `$env` (the rendered prefix from
-		// VariableItem) so an empty-bar regression is caught.
-		await drawer.getByRole('button', { name: 'Close' }).click();
-		const varsBar = page.locator('.dashboard-variables');
-		await expect(varsBar).toBeVisible();
-		await expect(varsBar).toContainText('$env');
-	});
-
-	test('TC-07 duplicate variable name is rejected inline', async ({
-		authedPage: page,
-	}) => {
-		// Seed a dashboard that already has a variable named 'env'.
-		const id = await seed(page, 'create-flow-tc07');
-		await page.goto(`/dashboard/${id}`);
-
-		// Use the UI to add the first variable so the state is real.
-		const drawer = await openDashboardSettingsDrawer(page);
-		await drawer.getByRole('button', { name: 'Variables' }).click();
-		await drawer.getByTestId('add-new-variable').click();
-		await drawer.getByPlaceholder('Unique name of the variable').fill('env');
-		await drawer.getByRole('button', { name: 'Custom' }).click();
-		await drawer
-			.getByPlaceholder('Enter options separated by commas.')
-			.fill('prod');
-		const firstSave = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-		);
-		await drawer.getByRole('button', { name: 'Save Variable' }).click();
-		await firstSave;
-
-		// Now try to add a second variable with the same name.
-		await drawer.getByTestId('add-new-variable').click();
-		const nameInput = drawer.getByPlaceholder('Unique name of the variable');
-		await nameInput.fill('env');
-
-		await expect(
-			drawer.getByText('Variable name already exists'),
-		).toBeVisible();
-		await expect(
-			drawer.getByRole('button', { name: 'Save Variable' }),
-		).toBeDisabled();
-	});
-
-	// ─── 3. Import JSON ───────────────────────────────────────────────────────
-	//
-	// TC-08 and TC-12 are merged: TC-08 covers the POST contract and navigation;
-	// the merged test also navigates back to the list and verifies metadata
-	// surfacing (the TC-12 concern). This avoids two identical import flows.
-
-	test('TC-08 import via file upload creates dashboard, navigates to detail, and surfaces metadata in list', async ({
-		authedPage: page,
-	}) => {
-		await gotoDashboardsList(page);
-		await page.getByTestId('new-dashboard-cta').click();
-		await page.getByTestId('import-json-menu-cta').click();
-
-		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
-		await expect(dialog).toBeVisible();
-
-		const postResponse = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'POST' && /\/api\/v1\/dashboards/.test(r.url()),
-		);
-		await dialog.locator('input[type="file"]').setInputFiles(APM_METRICS_TESTDATA_PATH);
-		await dialog.getByRole('button', { name: 'Import and Next' }).click();
-		const res = await postResponse;
-
-		expect(res.status()).toBeGreaterThanOrEqual(200);
-		expect(res.status()).toBeLessThan(300);
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+/);
-
-		// Register for cleanup.
-		const urlMatch = page.url().match(/\/dashboard\/([0-9a-f-]+)/);
-		expect(urlMatch, 'URL must contain dashboard ID').not.toBeNull();
-		seedIds.add(urlMatch![1]);
-
-		await expect(page.getByTestId('dashboard-title')).toHaveText(APM_METRICS_TITLE);
-
-		// Server-side check: every widget + tag from the fixture must be persisted.
-		// A partial import (e.g. silently dropped widgets) would pass the UI title
-		// check but fail here. The apm-metrics fixture has 16 widgets and 4 tags.
-		const persisted = await fetchDashboardData(page, urlMatch![1]);
-		expect(persisted.widgets?.length).toBe(16);
-		expect(persisted.tags).toEqual(
-			expect.arrayContaining(['apm', 'latency', 'error rate', 'throughput']),
-		);
-
-		// Navigate back and confirm the imported dashboard surfaces in the list
-		// with at least one tag chip (TC-12 coverage).
-		await gotoDashboardsList(page);
-		await page.getByPlaceholder(SEARCH_PLACEHOLDER).fill(APM_METRICS_TITLE);
-		await expect(page.getByText(APM_METRICS_TITLE).first()).toBeVisible();
-		// The apm-metrics fixture has tags ['apm', 'latency', 'error rate', 'throughput'].
-		await expect(page.getByText('apm').first()).toBeVisible();
-	});
-
-	// TC-09 (Monaco paste path) is intentionally dropped — the file-upload
-	// path (TC-08) exercises the same populate-editor-then-import code path.
-	// Keyboard-typing large JSON into Monaco is unreliable in headless CI.
-
-	test('TC-10 invalid JSON via file upload shows "Invalid JSON" error', async ({
-		authedPage: page,
-	}) => {
-		// No dashboard is created by this test — no cleanup entry needed.
-		await gotoDashboardsList(page);
-		await page.getByTestId('new-dashboard-cta').click();
-		await page.getByTestId('import-json-menu-cta').click();
-
-		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
-		await expect(dialog).toBeVisible();
-
-		// Track POST attempts: invalid JSON must never reach the create endpoint.
-		let postFired = false;
-		await page.route(/\/api\/v1\/dashboards(\?|$)/, (route) => {
-			if (route.request().method() === 'POST') {
-				postFired = true;
-			}
-			route.continue();
-		});
-
-		await dialog.locator('input[type="file"]').setInputFiles({
-			name: 'bad.json',
-			mimeType: 'application/json',
-			buffer: Buffer.from('not valid json {'),
-		});
-
-		await expect(dialog.getByText('Invalid JSON')).toBeVisible();
-		await expect(dialog).toBeVisible();
-
-		// Clicking "Import and Next" with invalid content should surface an error
-		// and keep the dialog open.
-		await dialog.getByRole('button', { name: 'Import and Next' }).click();
-		await expect(page).not.toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-		await expect(dialog).toBeVisible();
-
-		await page.waitForLoadState('networkidle');
-		expect(postFired, 'invalid JSON must not trigger POST').toBe(false);
-	});
-
-	test('TC-11 import with empty editor clicking Import and Next shows error', async ({
-		authedPage: page,
-	}) => {
-		// No dashboard is created — no cleanup entry needed.
-		await gotoDashboardsList(page);
-		await page.getByTestId('new-dashboard-cta').click();
-		await page.getByTestId('import-json-menu-cta').click();
-
-		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
-		await expect(dialog).toBeVisible();
-
-		let postFired = false;
-		await page.route(/\/api\/v1\/dashboards(\?|$)/, (route) => {
-			if (route.request().method() === 'POST') {
-				postFired = true;
-			}
-			route.continue();
-		});
-
-		await dialog.getByRole('button', { name: 'Import and Next' }).click();
-
-		await expect(dialog.getByText('Error loading JSON file')).toBeVisible();
-		await expect(dialog).toBeVisible();
-		await expect(page).not.toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-
-		await page.waitForLoadState('networkidle');
-		expect(postFired, 'empty editor must not trigger POST').toBe(false);
-	});
-
-	// ─── 4. View Templates ────────────────────────────────────────────────────
-
-	test('TC-13 New Dashboard dropdown has the three expected entries, View templates is an external link', async ({
-		authedPage: page,
-	}) => {
-		// No dashboard is created — no cleanup entry needed.
-		// The assertion guards against silent additions or reorderings to the
-		// dropdown (adds, removals, label rename) AND the link being changed to
-		// an in-app modal or a different URL (the DashboardTemplatesModal exists
-		// in source but is never triggered from this menu item).
-		await gotoDashboardsList(page);
-		await page.getByTestId('new-dashboard-cta').click();
-
-		// All three CTAs must render, with the expected labels.
-		await expect(page.getByTestId('create-dashboard-menu-cta')).toHaveText(
-			/Create dashboard/i,
-		);
-		await expect(page.getByTestId('import-json-menu-cta')).toHaveText(/Import JSON/i);
-
-		const link = page.getByTestId('view-templates-menu-cta');
-		await expect(link).toHaveText(/View templates/i);
-
-		await expect(link).toHaveAttribute(
-			'href',
-			/signoz\.io\/docs\/dashboards\/dashboard-templates/,
-		);
-		await expect(link).toHaveAttribute('target', '_blank');
-		await expect(link).toHaveAttribute('rel', /noopener/);
-	});
-
-	// ─── 5. Post-Create Dashboard Detail — Panel Addition ────────────────────
-
-	test('TC-14 New Panel modal opens and selecting Time Series navigates to widget editor', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc14');
-		await page.goto(`/dashboard/${id}`);
-
-		await expect(page.getByText('Welcome to your new dashboard')).toBeVisible();
-
-		await page.getByTestId('add-panel').click();
-		// PANEL_TYPES enum: TIME_SERIES='graph', VALUE='value', TABLE='table'
-		// — the testid is panel-type-<enum-value>, not panel-type-<enum-name>.
-		const modal = page.getByRole('dialog').filter({ hasText: 'New Panel' });
-		await expect(modal).toBeVisible();
-
-		await expect(modal.getByTestId('panel-type-graph')).toBeVisible();
-		await expect(modal.getByTestId('panel-type-value')).toBeVisible();
-		await expect(modal.getByTestId('panel-type-table')).toBeVisible();
-
-		await modal.getByTestId('panel-type-graph').click();
-		await expect(page).toHaveURL(/graphType=graph/);
-
-		// Confirm the widget editor actually loaded — URL-only checks pass even
-		// if the route resolves to a blank/broken page.
-		await expect(page.getByTestId('new-widget-save')).toBeVisible();
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-	});
-
-	test('TC-15 New Panel button from toolbar header opens the same panel type modal', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc15');
-		await page.goto(`/dashboard/${id}`);
-
-		// The toolbar "New Panel" button (add-panel-header) is present even on
-		// a blank dashboard, alongside the empty-state "add-panel" button.
-		await expect(page.getByTestId('add-panel-header')).toBeVisible();
-		await page.getByTestId('add-panel-header').click();
-
-		const modal = page.getByRole('dialog').filter({ hasText: 'New Panel' });
-		await expect(modal).toBeVisible();
-		await expect(modal.getByTestId('panel-type-graph')).toBeVisible();
-
-		// Click the modal X button to close (Escape also works but may conflict
-		// with the Enterprise modal in the background; explicit click is more reliable).
-		await modal.getByRole('button', { name: 'Close' }).click();
-		await expect(modal).not.toBeVisible();
-	});
-
-	// ─── 6. Cancellation and Navigation Away ─────────────────────────────────
-
-	test('TC-16 browser Back from dashboard detail returns to list with URL preserved', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc16');
-
-		await page.goto(`/dashboard?search=create-flow-tc16`);
-		await page
-			.getByRole('heading', { name: 'Dashboards', level: 1 })
-			.waitFor({ state: 'visible' });
-
-		await page.getByAltText('dashboard-image').first().click();
-		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-
-		await page.goBack();
-		await expect(page).toHaveURL(/search=create-flow-tc16/);
-		await expect(
-			page.getByPlaceholder(SEARCH_PLACEHOLDER),
-		).toHaveValue('create-flow-tc16');
-	});
-
-	test('TC-17 navigating away with the settings drawer open does not crash', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc17');
-		await page.goto(`/dashboard/${id}`);
-
-		await openDashboardSettingsDrawer(page);
-
-		// Navigate away without closing the drawer.
-		await page.goto('/dashboard');
-		await expect(page).toHaveURL(/\/dashboard($|\?)/);
-		await expect(
-			page.getByRole('heading', { name: 'Dashboards', level: 1 }),
-		).toBeVisible();
-		// No error overlay should be present.
-		await expect(
-			page.getByRole('alert').filter({ hasText: /error/i }),
-		).toHaveCount(0);
-	});
-
-	// ─── 7. Add Panel — end-to-end per signal ────────────────────────────────
-	//
-	// TC-14/TC-15 verify the New Panel modal opens and routes to the widget
-	// editor. The TCs below go further: configure a query for each signal
-	// using values from testdata/queries.json, save the panel, return to the
-	// dashboard, and verify the panel card renders.
-
-	test('TC-18 add metrics Time Series panel using signoz_calls_total from queries.json', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'add-panel-metrics');
-		await page.goto(`/dashboard/${id}`);
-		await expect(page.getByTestId('add-panel')).toBeVisible();
-
-		await configureAndSavePanel(page, 'metrics', 'metrics-timeseries');
-
-		await expect(page.getByTestId('metrics-timeseries')).toBeVisible();
-
-		// Reload — proves the panel persists, not just optimistic UI from the save.
-		await page.reload();
-		await expect(page.getByTestId('metrics-timeseries')).toBeVisible();
-	});
-
-	test('TC-19 add logs Time Series panel with default query from queries.json', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'add-panel-logs');
-		await page.goto(`/dashboard/${id}`);
-		await expect(page.getByTestId('add-panel')).toBeVisible();
-
-		await configureAndSavePanel(page, 'logs', 'logs-timeseries');
-
-		await expect(page.getByTestId('logs-timeseries')).toBeVisible();
-
-		await page.reload();
-		await expect(page.getByTestId('logs-timeseries')).toBeVisible();
-	});
-
-	test('TC-20 add traces Time Series panel with default query from queries.json', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'add-panel-traces');
-		await page.goto(`/dashboard/${id}`);
-		await expect(page.getByTestId('add-panel')).toBeVisible();
-
-		await configureAndSavePanel(page, 'traces', 'traces-timeseries');
-
-		await expect(page.getByTestId('traces-timeseries')).toBeVisible();
-
-		await page.reload();
-		await expect(page.getByTestId('traces-timeseries')).toBeVisible();
-	});
-
-	// ─── 8. Destructive CRUD ─────────────────────────────────────────────────
-
-	test('TC-21 delete dashboard via list action menu removes it from the list', async ({
-		authedPage: page,
-	}) => {
-		// Seed with a unique title so the list filter resolves to exactly one row.
-		const targetTitle = 'create-flow-tc21-to-delete';
-		const id = await createDashboardViaApi(page, targetTitle);
-		// Intentionally not registered in seedIds — this test deletes it via UI.
-
-		await gotoDashboardsList(page);
-		await page.getByPlaceholder(SEARCH_PLACEHOLDER).fill(targetTitle);
-		await expect(page.getByText(targetTitle).first()).toBeVisible();
-
-		// Open the row action menu (tooltip with action buttons).
-		const icon = page.getByTestId('dashboard-action-icon').first();
-		await icon.scrollIntoViewIfNeeded();
-		await icon.click();
-		const tooltip = page.getByRole('tooltip');
-		await tooltip.getByRole('button', { name: /Delete Dashboard/i }).click();
-
-		// Confirm modal: title contains the dashboard name + a danger "Delete" button.
-		const confirmModal = page
-			.getByRole('dialog')
-			.filter({ hasText: 'Are you sure you want to delete' });
-		await expect(confirmModal).toBeVisible();
-		await expect(confirmModal).toContainText(targetTitle);
-
-		const deleteResponse = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'DELETE' &&
-				new RegExp(`/api/v1/dashboards/${id}`).test(r.url()),
-		);
-		await confirmModal.getByRole('button', { name: /^Delete$/ }).click();
-		const delRes = await deleteResponse;
-		expect(delRes.status()).toBeGreaterThanOrEqual(200);
-		expect(delRes.status()).toBeLessThan(300);
-
-		// Row should disappear from the list. The search is still active, so the
-		// list shows its empty-search state with a "No dashboards found for X"
-		// message — assert that explicitly rather than the row's absence (the
-		// title also lives in the search input value and the empty-state message).
-		await expect(
-			page.getByText(`No dashboards found for ${targetTitle}`),
-		).toBeVisible();
-
-		// API confirms the row is gone — guards against an optimistic-update bug
-		// where the UI hides the row without the backend actually deleting it.
-		const token = await authToken(page);
-		const verifyRes = await page.request.get(`/api/v1/dashboards/${id}`, {
-			headers: { Authorization: `Bearer ${token}` },
-		});
-		expect(verifyRes.status()).toBe(404);
-	});
-
-	// ─── 9. Full Round-Trip ──────────────────────────────────────────────────
-	//
-	// Catches cross-feature regressions: a settings save that nukes variables,
-	// a variable add that strips widgets, a panel save that overwrites tags, etc.
-	// Stress-tests the dashboard PUT contract by writing every editable surface.
-
-	test('TC-22 settings + variable + panel survive a hard reload', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc22');
-		await page.goto(`/dashboard/${id}`);
-
-		// 1. Settings drawer: rename + description + tag.
-		let drawer = await openDashboardSettingsDrawer(page);
-		await drawer.getByTestId('dashboard-name').clear();
-		await drawer.getByTestId('dashboard-name').fill('create-flow-tc22-roundtrip');
-		await drawer.getByTestId('dashboard-desc').fill('round trip description');
-		const tagInput = drawer.getByPlaceholder('Start typing your tag name');
-		await tagInput.click();
-		await tagInput.fill('roundtrip-tag');
-		await page.keyboard.press('Enter');
-		await page.getByTestId('save-dashboard-config').click();
-		await expect(drawer.getByText(/unsaved change/)).not.toBeVisible();
-
-		// 2. Variable tab — add a Custom variable.
-		await drawer.getByRole('button', { name: 'Variables' }).click();
-		await drawer.getByTestId('add-new-variable').click();
-		await drawer.getByPlaceholder('Unique name of the variable').fill('region');
-		await drawer.getByRole('button', { name: 'Custom' }).click();
-		await drawer
-			.getByPlaceholder('Enter options separated by commas.')
-			.fill('us,eu,ap');
-		const varSave = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-		);
-		await drawer.getByRole('button', { name: 'Save Variable' }).click();
-		await varSave;
-		await drawer.getByRole('button', { name: 'Close' }).click();
-
-		// 3. Add a metrics panel.
-		await configureAndSavePanel(page, 'metrics', 'tc22-metrics');
-		await expect(page.getByTestId('tc22-metrics')).toBeVisible();
-
-		// 4. Hard reload — assert everything persisted across a fresh fetch.
-		await page.reload();
-		await expect(page.getByTestId('dashboard-title')).toHaveText(
-			'create-flow-tc22-roundtrip',
-		);
-		await expect(page.locator('.dashboard-variables')).toContainText('$region');
-		await expect(page.getByTestId('tc22-metrics')).toBeVisible();
-
-		// 5. Server confirmation — every change is in the persisted JSON.
-		const persisted = await fetchDashboardData(page, id);
-		expect(persisted.title).toBe('create-flow-tc22-roundtrip');
-		expect(persisted.description).toBe('round trip description');
-		expect(persisted.tags ?? []).toContain('roundtrip-tag');
-		expect(persisted.widgets?.length).toBe(1);
-		const persistedVars = Object.values(persisted.variables ?? {}) as Array<{
-			name?: string;
-		}>;
-		expect(persistedVars.map((v) => v.name)).toContain('region');
-	});
-});

tests/e2e/tests/dashboards/panels/list.spec.ts

@@ -1,255 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	fetchDashboardData,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'list-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'list-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		// LIST panels require a logs (or traces) data source — metrics queries
-		// hide the LIST option from panel-change-select.
-		await configureAndSavePanel(page, 'logs', FIXTURE_PANEL_TITLE);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'List');
-		await saveWidgetEdit(page);
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterAll(async ({ browser }) => {
-	if (seedIds.size === 0) return;
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of [...seedIds]) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-/** Fetch the persisted fixture dashboard's first widget. */
-async function fetchFixtureWidget(page: Page) {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	const dashboard = await fetchDashboardData(page, id!);
-	const widget = dashboard.widgets?.[0];
-	expect(widget, 'fixture dashboard must have at least one widget').toBeTruthy();
-	return widget!;
-}
-
-test.describe('List Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('list-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('list-controls-renamed').first()).toBeVisible();
-
-		// Server-side check.
-		expect((await fetchFixtureWidget(page)).title).toBe('list-controls-renamed');
-
-		await openWidgetEditor(page, 'list-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'list-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and shows info icon on header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E list description');
-		await saveWidgetEdit(page);
-
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		expect((await fetchFixtureWidget(page)).description).toBe('E2E list description');
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E list description',
-		);
-
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-03 panel type switch from List to Table persists and re-renders', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Table');
-		// Table re-renders Decimal Precision + Column Units in the right pane.
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		// Panel card should now render an Ant table head.
-		await expect(
-			page
-				.locator('[data-testid="' + FIXTURE_PANEL_TITLE + '"]')
-				.first(),
-		).toBeVisible();
-		await expect(page.locator('.ant-table-thead').first()).toBeVisible();
-
-		// Server-side: panelTypes is 'table'.
-		expect((await fetchFixtureWidget(page)).panelTypes).toBe('table');
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=table/);
-
-		// Reset back to List.
-		await changePanelType(page, 'List');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 sections hidden for LIST are not rendered in the right pane', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expect(page.locator('section.panel-time-preference')).toHaveCount(0);
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-		await expect(page.locator('.decimal-precision-selector')).toHaveCount(0);
-		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
-		await expect(page.locator('.y-axis-unit-selector-v2')).toHaveCount(0);
-		await expect(page.getByTestId('add-threshold-cta')).toHaveCount(0);
-
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-description-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-	});
-
-	test('TC-05 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-list-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-
-		// Settle before asserting no PUT.
-		await page.waitForLoadState('networkidle');
-		expect(putFired).toBe(false);
-
-		// Server-side double-check: persisted title is still the fixture name.
-		expect((await fetchFixtureWidget(page)).title).toBe(FIXTURE_PANEL_TITLE);
-	});
-
-	// ─── Reload persistence ──────────────────────────────────────────────────
-
-	test('TC-06 panel state survives a hard dashboard reload', async ({
-		authedPage: page,
-	}) => {
-		// Save description + a non-default panel type, then hard-reload and
-		// re-verify the panel card rehydrates with the right state.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('reload persistence description');
-		await saveWidgetEdit(page);
-
-		await page.reload();
-		await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-
-		// Description info icon must render after rehydration.
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		// Server-side check post-reload — confirms the load path read the same JSON.
-		const persisted = await fetchFixtureWidget(page);
-		expect(persisted.description).toBe('reload persistence description');
-		expect(persisted.panelTypes).toBe('list');
-
-		// Reset.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-	});
-});

tests/e2e/tests/dashboards/panels/table.spec.ts

@@ -1,570 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	fetchDashboardData,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'table-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'table-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'Table');
-		await saveWidgetEdit(page);
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterAll(async ({ browser }) => {
-	if (seedIds.size === 0) return;
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of [...seedIds]) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-/**
- * Fetch the persisted fixture dashboard JSON and return the first widget.
- * Use this after a save to confirm the PUT actually landed the expected
- * shape on the backend — UI-only round-trips pass on optimistic-update bugs.
- */
-async function fetchFixtureWidget(page: Page) {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	const dashboard = await fetchDashboardData(page, id!);
-	const widget = dashboard.widgets?.[0];
-	expect(widget, 'fixture dashboard must have at least one widget').toBeTruthy();
-	return widget!;
-}
-
-/**
- * Return the last <td> in the first data row of the panel's Ant Design table.
- * Ant Design applies .ant-table-row to actual data rows only (not header rows),
- * so this correctly skips the fixed/sticky header tbody rows.
- *
- * For the metrics panel the row has: td[0] = label column, td[last] = value
- * column (the aggregation query "A"). The last td is thus the value cell.
- * However, depending on the panel query there may only be ONE td per row. Use
- * the cell that contains a non-empty value: any td that is not purely the
- * label placeholder.
- *
- * NOTE: the value cell wraps its text in a <button> element (from the
- * QueryTable open-traces render path) so textContent picks it up correctly.
- */
-async function getFirstDataCell(page: Page) {
-	// .ant-table-row targets Ant Design data rows only (not header/fixed rows).
-	const firstRow = page.locator('tr.ant-table-row').first();
-	await firstRow.waitFor({ state: 'visible' });
-	// Return the last <td> — for a metrics table with columns [label, A] this
-	// is the value column. For a single-column table it is the only column.
-	return firstRow.locator('td').last();
-}
-
-/**
- * Ensure a SettingsSection accordion in the widget editor right pane is
- * expanded. If it is already open (content div has the `open` class), this is
- * a no-op. Otherwise it clicks the header button and waits for the content to
- * become visible.
- */
-async function expandSection(page: Page, title: string): Promise<void> {
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) => el.classList.contains('open'));
-	if (!isOpen) {
-		await section.locator('button.settings-section-header').click();
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-/**
- * Select a unit from the column-unit selector dropdown by typing a search
- * term, then clicking the filtered option. Scoped to .column-unit-selector to
- * avoid matching the Y-axis unit selectors on other panel types.
- *
- * The selector has `showSearch` enabled and renders a long virtualised option
- * list — typing first avoids instability from the list re-rendering when the
- * target option is off-screen.
- */
-async function selectColumnUnit(
-	page: Page,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	const unitSelect = page
-		.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select')
-		.first();
-	await unitSelect.click();
-	await page
-		.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select input')
-		.first()
-		.fill(searchTerm);
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-test.describe('Table Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('table-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('table-controls-renamed').first()).toBeVisible();
-
-		// Server-side check — the PUT must carry the new title.
-		expect((await fetchFixtureWidget(page)).title).toBe('table-controls-renamed');
-
-		await openWidgetEditor(page, 'table-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'table-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and shows info icon on header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E table description');
-		await saveWidgetEdit(page);
-
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		expect((await fetchFixtureWidget(page)).description).toBe(
-			'E2E table description',
-		);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E table description',
-		);
-
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i })
-			.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await saveWidgetEdit(page);
-
-		// Server-side: persisted timePreferance enum, not just visible label.
-		expect((await fetchFixtureWidget(page)).timePreferance).toBe('LAST_15_MIN');
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 column unit formats the matching column cells and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Use selectColumnUnit to avoid virtualised-list detached-DOM failures.
-		await selectColumnUnit(page, 'Milliseconds', 'Milliseconds (ms)');
-
-		await saveWidgetEdit(page);
-
-		// Cell text in the data column should now contain the `ms` suffix.
-		// Strict check: text must be a number with the unit, not just an empty
-		// cell that happens to substring-match "ms".
-		const cell = await getFirstDataCell(page);
-		await expect(cell).toHaveText(/^\s*[-+]?\d[\d,.eE+-]*\s*ms\s*$/);
-
-		// Server-side: columnUnits must record the unit code, not just the
-		// label. UI display can use a fancy label while the persisted enum drifts.
-		const persistedAfterUnit = await fetchFixtureWidget(page);
-		const columnUnitValues = Object.values(persistedAfterUnit.columnUnits ?? {});
-		expect(columnUnitValues, 'columnUnits must include the chosen unit').toContain(
-			'ms',
-		);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// Section starts collapsed again on re-open — expand before asserting.
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page
-				.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-selection-item')
-				.first(),
-		).toContainText(/Milliseconds/);
-
-		// Reset — clear the unit via the Ant Select allowClear X button.
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2')
-			.first()
-			.hover();
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-clear')
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 decimal precision changes the number of decimals when a column unit is set', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Set a column unit so decimal precision has a visible effect.
-		await selectColumnUnit(page, 'Seconds', 'Seconds (s)');
-
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		await saveWidgetEdit(page);
-
-		// Strict: text must be an integer followed by " s", not empty / partial.
-		const cell = await getFirstDataCell(page);
-		await expect(cell).toHaveText(/^\s*[-+]?\d+\s*s\s*$/);
-
-		// Server-side: decimalPrecision must be 0 in the persisted widget.
-		expect((await fetchFixtureWidget(page)).decimalPrecision).toBe(0);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// Section starts collapsed again on re-open — expand before asserting.
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset: decimal precision back to 2, clear column unit.
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2')
-			.first()
-			.hover();
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-clear')
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 column-targeted Background threshold paints only the targeted column', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		// For TABLE thresholds the column selector (table-operator-input-selector)
-		// defaults to the first aggregation query column (typically `A`). Operator
-		// defaults to '>'; switch to '>=' so it reliably matches non-negative values.
-		await card.getByTestId('operator-input-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-
-		await card.getByTestId('threshold-color-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: 'Background' })
-			.first()
-			.click();
-
-		// Save the threshold row (commits it to the thresholds state array).
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		// Inspect the threshold-styled cell directly. The testid host carries
-		// `data-threshold-format="Background"` so we can confirm the format too.
-		const row = page.locator('tr.ant-table-row').first();
-		await row.waitFor({ state: 'visible' });
-		const styledCell = row.getByTestId('threshold-styled-cell').first();
-		await expect(styledCell).toBeVisible();
-		await expect(styledCell).toHaveAttribute('data-threshold-format', 'Background');
-		const dataStyle = (await styledCell.getAttribute('style')) ?? '';
-		expect(dataStyle).toMatch(/background-color:/);
-
-		// Server-side: thresholds[] must be persisted with format=Background.
-		const persistedThresholds = (await fetchFixtureWidget(page)).thresholds ?? [];
-		expect(persistedThresholds.length).toBe(1);
-		expect(persistedThresholds[0].thresholdFormat).toBe('Background');
-		expect(persistedThresholds[0].thresholdOperator).toBe('>=');
-
-		// Reset — delete the threshold via its testid.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// ThresholdsSection defaultOpen is based on threshold count at mount; may
-		// start collapsed due to async state loading — always expand before interacting.
-		await expandSection(page, 'Thresholds');
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		await firstCard.getByTestId('threshold-delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 column-targeted Text threshold colors only the targeted column text', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		await card.getByTestId('operator-input-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-		// Format defaults to 'Text' — no change needed.
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		const row = page.locator('tr.ant-table-row').first();
-		await row.waitFor({ state: 'visible' });
-		const styledCell = row.getByTestId('threshold-styled-cell').first();
-		await expect(styledCell).toBeVisible();
-		await expect(styledCell).toHaveAttribute('data-threshold-format', 'Text');
-		const dataStyle = (await styledCell.getAttribute('style')) ?? '';
-		expect(dataStyle).toMatch(/color:/);
-		expect(dataStyle).not.toMatch(/background-color:/);
-
-		// Server-side: thresholds[] must be persisted with format=Text.
-		const persistedThresholds = (await fetchFixtureWidget(page)).thresholds ?? [];
-		expect(persistedThresholds.length).toBe(1);
-		expect(persistedThresholds[0].thresholdFormat).toBe('Text');
-
-		// Reset
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Thresholds');
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		await firstCard.getByTestId('threshold-delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-08 sections hidden for TABLE are not rendered', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-
-		// decimal-precision-selector and column-unit-selector are inside the
-		// "Formatting & Units" section which starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-		await expect(page.locator('.column-unit-selector').first()).toBeVisible();
-
-		// add-threshold-cta is inside "Thresholds" which is also collapsed.
-		await expandSection(page, 'Thresholds');
-		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
-	});
-
-	test('TC-09 panel type switch from Table to Number persists and re-renders as a number', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Number');
-		// Number panel exposes the Y-axis unit selector in the Formatting & Units section.
-		await expect(page.locator('.y-axis-unit-selector-v2').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		await expect(page.getByTestId('value-graph-text').first()).toBeVisible();
-
-		// Server-side: persisted panelTypes is the PANEL_TYPES enum value 'value'.
-		expect((await fetchFixtureWidget(page)).panelTypes).toBe('value');
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=value/);
-
-		// Reset: switch back to Table.
-		await changePanelType(page, 'Table');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-10 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-table-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-
-		// Settle before asserting — a delayed PUT could otherwise sneak past.
-		await page.waitForLoadState('networkidle');
-		expect(putFired).toBe(false);
-
-		// Server-side double-check: persisted title is still the fixture name.
-		expect((await fetchFixtureWidget(page)).title).toBe(FIXTURE_PANEL_TITLE);
-	});
-
-	// ─── Reload persistence ──────────────────────────────────────────────────
-
-	test('TC-11 panel state survives a hard dashboard reload', async ({
-		authedPage: page,
-	}) => {
-		// Apply a combination of edits, save, then hard-reload the page and
-		// re-verify everything renders from the persisted JSON. Catches backend
-		// → frontend rehydration regressions that round-trips via close+reopen
-		// editor miss (re-opening the editor reuses the in-memory query state).
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('reload persistence description');
-		await expandSection(page, 'Formatting & Units');
-		await selectColumnUnit(page, 'Milliseconds', 'Milliseconds (ms)');
-		await saveWidgetEdit(page);
-
-		// Hard reload — purges in-memory state, forces a fresh fetch.
-		await page.reload();
-		await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-
-		// Cell value must still carry the unit after reload (proves the
-		// columnUnits + decimalPrecision + panelType rehydrated correctly).
-		const cell = await getFirstDataCell(page);
-		await expect(cell).toHaveText(/^\s*[-+]?\d[\d,.eE+-]*\s*ms\s*$/);
-
-		// Description info icon (the only header surface for description) must
-		// still render after rehydration.
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		// Reset: clear unit + description.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await page.getByTestId('panel-description-input').fill('');
-		await expandSection(page, 'Formatting & Units');
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2')
-			.first()
-			.hover();
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-clear')
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-});

tests/e2e/tests/dashboards/panels/value.spec.ts

@@ -1,579 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	fetchDashboardData,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-// All TCs operate on the same fixture panel and toggle its state — they MUST
-// run serially within the worker. Project-level fullyParallel still runs this
-// file in parallel with other files.
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'value-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'value-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-		// configureAndSavePanel creates a Time Series panel. Switch it to the
-		// Number (VALUE) type before the per-TC bodies run.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'Number');
-		await saveWidgetEdit(page);
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterAll(async ({ browser }) => {
-	if (seedIds.size === 0) return;
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of [...seedIds]) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-/** Fetch the persisted fixture dashboard's first widget. */
-async function fetchFixtureWidget(page: Page) {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	const dashboard = await fetchDashboardData(page, id!);
-	const widget = dashboard.widgets?.[0];
-	expect(widget, 'fixture dashboard must have at least one widget').toBeTruthy();
-	return widget!;
-}
-
-/**
- * Ensure a SettingsSection accordion in the widget editor right pane is
- * expanded. If it is already open (content div has the `open` class), this is
- * a no-op. Otherwise it clicks the header button and waits for the CSS
- * transition to complete. This handles both the common case (collapsed on
- * mount) and the defensive case (already open).
- */
-async function expandSection(page: Page, title: string): Promise<void> {
-	// Find the settings-section that contains this title in its header.
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-
-	// Check if the content div already has the `open` class.
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) =>
-		el.classList.contains('open'),
-	);
-
-	if (!isOpen) {
-		// Click the header button to open the section.
-		await section.locator('button.settings-section-header').click();
-		// Wait for the CSS transition to complete (opacity 0→1, max-height 0→1000px).
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-/**
- * Select a unit from the Y-axis unit selector dropdown by typing a search
- * term, then clicking the filtered option. The selector has `showSearch`
- * enabled and renders a long virtualised option list — typing first avoids
- * instability from the virtualised list re-rendering when the target option
- * is off-screen.
- */
-async function selectYAxisUnit(
-	page: Page,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	// Click the outer wrapper to open the dropdown.
-	const unitSelect = page.locator('.y-axis-unit-selector-v2 .ant-select').first();
-	await unitSelect.click();
-	// The Ant Select input is now focused — type to filter the virtual list.
-	await page.locator('.y-axis-unit-selector-v2 .ant-select input').first().fill(searchTerm);
-	// Wait for the dropdown to show the filtered option, then click it.
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-test.describe('Value Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('value-controls-renamed');
-		await saveWidgetEdit(page);
-
-		await expect(page.getByTestId('value-controls-renamed').first()).toBeVisible();
-
-		// Server-side check.
-		expect((await fetchFixtureWidget(page)).title).toBe('value-controls-renamed');
-
-		await openWidgetEditor(page, 'value-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'value-controls-renamed',
-		);
-
-		// Reset back to fixture title so subsequent TCs locate the panel.
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 panel description persists and renders the info icon on the header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E test description');
-		await saveWidgetEdit(page);
-
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		expect((await fetchFixtureWidget(page)).description).toBe(
-			'E2E test description',
-		);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E test description',
-		);
-
-		// Reset
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-03 panel time preference switches from Global Time to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		const timeButton = page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i });
-		await timeButton.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await saveWidgetEdit(page);
-
-		// Server-side: persisted timePreferance enum.
-		expect((await fetchFixtureWidget(page)).timePreferance).toBe('LAST_15_MIN');
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		// Reset
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 Y-axis unit applies a suffix to the rendered value and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// The Y-Axis Unit selector has showSearch enabled and a long virtualised
-		// option list. Type "Seconds" to filter before clicking.
-		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
-
-		// Live preview should now render a suffix unit `s`.
-		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		// Back on the dashboard the panel card should also render the suffix.
-		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
-
-		// Server-side: yAxisUnit must hold the unit code (catches a label-only
-		// regression where the UI shows "Seconds" but persists nothing).
-		expect((await fetchFixtureWidget(page)).yAxisUnit).toBe('s');
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
-		).toContainText(/Seconds/);
-
-		// Reset — clear the unit via allowClear (X button on the Ant Select).
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 decimal precision reformats the rendered value when a unit is set', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Setting a unit is required for decimal precision to have a visible
-		// effect — see Known Limitations #3 in the test plan.
-		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
-
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		// Live preview: the numeric text must be a non-empty integer (no decimal).
-		await expect(page.getByTestId('value-graph-text').first()).toHaveText(
-			/^[-+]?\d+$/,
-		);
-
-		await saveWidgetEdit(page);
-
-		// Dashboard render: same assertion.
-		await expect(page.getByTestId('value-graph-text').first()).toHaveText(
-			/^[-+]?\d+$/,
-		);
-
-		// Server-side: decimalPrecision is 0 and yAxisUnit is 's'.
-		const persistedDecimals = await fetchFixtureWidget(page);
-		expect(persistedDecimals.decimalPrecision).toBe(0);
-		expect(persistedDecimals.yAxisUnit).toBe('s');
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset: restore default 2 decimals and clear the unit.
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 Text-format threshold colors the rendered value text and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds
-		// (defaultOpen={!!thresholds.length}) — expand it first.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-
-		// VALUE panels do not render a threshold label input — only operator,
-		// value, unit, format (Text/Background), and color. Defaults: operator
-		// '>', format 'Text', value 0, color 'Red'. We force operator to '>=' so
-		// the threshold reliably matches non-negative values.
-		const thresholdCard = page.locator('.threshold-container').first();
-		await thresholdCard
-			.getByTestId('operator-input-selector')
-			.click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-
-		// Save the threshold row (commits it to the thresholds state array). The
-		// dashboard PUT still needs `saveWidgetEdit` after this.
-		await thresholdCard.getByRole('button', { name: /save changes/i }).click();
-
-		await saveWidgetEdit(page);
-
-		// Dashboard render: value text should now carry an inline color style.
-		const valueText = page.getByTestId('value-graph-text').first();
-		await expect(valueText).toBeVisible();
-		const inlineStyle = await valueText.getAttribute('style');
-		expect(inlineStyle).toMatch(/color:/);
-
-		// Server-side: thresholds[] persisted with format=Text.
-		const persistedThresholds = (await fetchFixtureWidget(page)).thresholds ?? [];
-		expect(persistedThresholds.length).toBe(1);
-		expect(persistedThresholds[0].thresholdFormat).toBe('Text');
-		expect(persistedThresholds[0].thresholdOperator).toBe('>=');
-
-		// Re-open editor and verify the threshold round-tripped.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// The ThresholdsSection defaultOpen is based on threshold count at mount
-		// time; due to async state loading it may start collapsed. Expand it.
-		await expandSection(page, 'Thresholds');
-		await expect(
-			page.locator('.threshold-container').first(),
-		).toBeVisible();
-
-		// Reset — delete the threshold via testid.
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		await firstCard.getByTestId('threshold-delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 Background-format threshold paints the value container background', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const thresholdCard = page.locator('.threshold-container').first();
-
-		// Set operator >= and switch format from Text to Background.
-		await thresholdCard.getByTestId('operator-input-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-
-		await thresholdCard.getByTestId('threshold-color-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: 'Background' })
-			.first()
-			.click();
-
-		await thresholdCard.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		// Dashboard render: value-graph-container must carry an inline background.
-		const container = page.getByTestId('value-graph-container').first();
-		await expect(container).toBeVisible();
-		const inlineStyle = await container.getAttribute('style');
-		expect(inlineStyle).toMatch(/background-color:/);
-
-		// Server-side: thresholds[] persisted with format=Background.
-		const persistedThresholds = (await fetchFixtureWidget(page)).thresholds ?? [];
-		expect(persistedThresholds.length).toBe(1);
-		expect(persistedThresholds[0].thresholdFormat).toBe('Background');
-
-		// Reset
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// ThresholdsSection may start collapsed even with thresholds — always
-		// expand before interacting with threshold cards.
-		await expandSection(page, 'Thresholds');
-		// Edit/delete buttons are display:none by default, revealed on :hover.
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		await firstCard.getByTestId('threshold-delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-08 clearing the Y-axis unit removes the suffix from the rendered value', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Apply a unit first.
-		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
-
-		// Clear it.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-
-		// Suffix should be gone from the rendered panel.
-		await expect(page.getByTestId('value-graph-suffix-unit')).toHaveCount(0);
-
-		// Server-side: yAxisUnit must be cleared (empty / undefined).
-		const cleared = await fetchFixtureWidget(page);
-		expect(cleared.yAxisUnit ?? '').toBe('');
-	});
-
-	test('TC-09 panel type switch from Number to Time Series persists and re-renders', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Time Series');
-		// Time Series exposes Fill gaps — confirm the right pane re-rendered.
-		await expect(page.locator('section.fill-gaps')).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		// Server-side: panelTypes is 'graph' (PANEL_TYPES.TIME_SERIES).
-		expect((await fetchFixtureWidget(page)).panelTypes).toBe('graph');
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=graph/);
-
-		// Reset: switch back to Number for downstream TCs.
-		await changePanelType(page, 'Number');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-10 sections hidden for VALUE are not rendered in the right pane', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// Hidden by the panel-type matrix for VALUE — these sections are not
-		// rendered in the DOM at all (conditionally excluded by RightContainer).
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-
-		// Expected to be present in the always-open General and Visualization
-		// sections.
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-
-		// The "Formatting & Units" section is collapsed on open — expand it to
-		// verify the controls are rendered for VALUE.
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-
-		// The "Thresholds" section is collapsed when there are no thresholds —
-		// expand it to verify the Add Threshold CTA is rendered for VALUE.
-		await expandSection(page, 'Thresholds');
-		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
-	});
-
-	test('TC-11 discarding right-pane changes does not persist or visually update', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-value-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		// If a discard confirmation appears, OK it. Right-pane-only changes
-		// usually don't trigger one.
-		const confirmDialog = page.getByRole('dialog').last();
-		await confirmDialog
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — the editor navigated away immediately
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-
-		// Settle before asserting no PUT.
-		await page.waitForLoadState('networkidle');
-		expect(putFired).toBe(false);
-
-		// Server-side double-check: persisted title is still the fixture name.
-		expect((await fetchFixtureWidget(page)).title).toBe(FIXTURE_PANEL_TITLE);
-	});
-
-	// ─── Reload persistence ──────────────────────────────────────────────────
-
-	test('TC-12 panel state survives a hard dashboard reload', async ({
-		authedPage: page,
-	}) => {
-		// Apply unit + description + decimal precision, save, hard-reload, and
-		// re-verify the panel renders correctly from the persisted JSON.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('reload persistence description');
-		await expandSection(page, 'Formatting & Units');
-		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
-		await saveWidgetEdit(page);
-
-		await page.reload();
-		await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-
-		// Suffix unit must render after rehydration.
-		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
-
-		// Description info icon must render after rehydration.
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		// Reset.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await page.getByTestId('panel-description-input').fill('');
-		await expandSection(page, 'Formatting & Units');
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-});