Merge branch 'main' into tvats-breakdown-query-range-into-smaller-units

fix(planned-downtime): remove unused timezone dep from useMemo hooks (#11448 )
The startTimeText and endTimeText useMemo hooks did not reference timezone in their callback bodies, so including it in the dependency arrays caused unnecessary recomputations whenever the timezone form field changed.
2026-05-26 03:40:33 +01:00 · 2026-05-25 19:13:09 +05:30 · 2026-05-25 13:24:03 +00:00 · 2026-05-25 12:41:24 +00:00 · 2026-05-25 12:02:48 +00:00 · 2026-05-25 11:35:45 +00:00
44 changed files with 1426 additions and 724 deletions
--- a/.github/workflows/goci.yaml
+++ b/.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)
--- a/.github/workflows/jsci.yaml
+++ b/.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)
--- a/cmd/genconfig.go
+++ b/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)
+}
--- a/cmd/generate.go
+++ b/cmd/generate.go
@@ -17,6 +17,7 @@ func RegisterGenerate(parentCmd *cobra.Command, logger *slog.Logger) {

 	registerGenerateOpenAPI(generateCmd)
 	registerGenerateAuthz(generateCmd)
+	registerGenerateConfig(generateCmd)

 	parentCmd.AddCommand(generateCmd)
 }
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -5686,12 +5686,6 @@ components:
          type: string
        rootServiceName:
          type: string
-        serviceNameToTotalDurationMap:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
        spans:
          items:
            $ref: '#/components/schemas/SpantypesWaterfallSpan'
--- a/docs/config/web-settings.json
+++ b/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"
+}
--- a/frontend/jest.config.ts
+++ b/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/'],
--- a/frontend/package.json
+++ b/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"
  }
-}
+}
--- a/frontend/pnpm-lock.yaml
+++ b/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
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -6743,15 +6743,6 @@ export interface SpantypesGettableSpanMapperGroupsDTO {
 	items: SpantypesSpanMapperGroupDTO[];
 }

-export type SpantypesGettableWaterfallTraceDTOServiceNameToTotalDurationMapAnyOf =
-	{ [key: string]: number };
-
-/**
- * @nullable
- */
-export type SpantypesGettableWaterfallTraceDTOServiceNameToTotalDurationMap =
-	SpantypesGettableWaterfallTraceDTOServiceNameToTotalDurationMapAnyOf | null;
-
 export enum SpantypesSpanAggregationTypeDTO {
 	span_count = 'span_count',
 	execution_time_percentage = 'execution_time_percentage',
@@ -6940,10 +6931,6 @@ export interface SpantypesGettableWaterfallTraceDTO {
 	 * @type string
 	 */
 	rootServiceName?: string;
-	/**
-	 * @type object,null
-	 */
-	serviceNameToTotalDurationMap?: SpantypesGettableWaterfallTraceDTOServiceNameToTotalDurationMap;
 	/**
 	 * @type array,null
 	 */
--- a/frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.styles.scss
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.styles.scss
@@ -51,6 +51,10 @@
 			}
 		}
 	}
+	.duration-input-slider {
+		padding: 12px 0px;
+		margin-top: 12px;
+	}
 }

 .divider {
--- a/frontend/src/container/AIAssistant/components/ActivityGroup/ActivityGroup.module.scss
+++ b/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;
+}
--- a/frontend/src/container/AIAssistant/components/ActivityGroup/ActivityGroup.tsx
+++ b/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>
+	);
+}
--- a/frontend/src/container/AIAssistant/components/ActivityGroup/index.ts
+++ b/frontend/src/container/AIAssistant/components/ActivityGroup/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ActivityGroup';
+export type { ActivityItem } from './ActivityGroup';
--- a/frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx
+++ b/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 }}>
--- a/frontend/src/container/AIAssistant/components/StreamingMessage/StreamingMessage.tsx
+++ b/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
--- a/frontend/src/container/AIAssistant/components/ThinkingStep/ThinkingStep.tsx
+++ b/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>
 	);
 }
--- a/frontend/src/container/AIAssistant/components/ToolCallStep/ToolCallStep.tsx
+++ b/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>
 	);
 }
--- a/frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx
+++ b/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}
--- a/frontend/src/container/CreateAlertV2/QuerySection/tests/ChartPreview.test.tsx
+++ b/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,
 		);
--- a/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
+++ b/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(() => {
--- a/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts
+++ b/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,
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
+++ b/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 {
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/tests/utils.test.ts
+++ b/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',
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts
+++ b/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
--- a/frontend/src/container/FormAlertRules/ChartPreview/ChartContent.tsx
+++ b/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}
+		/>
+	);
+}
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/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}
 						/>
 					)}

--- a/frontend/src/container/FormAlertRules/ChartPreview/utils.ts
+++ b/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;
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/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}
--- a/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss
+++ b/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 {
--- a/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx
+++ b/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>
--- a/frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx
+++ b/frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx
@@ -311,7 +311,7 @@ export function PlannedDowntimeForm(
 			default:
 				return `Scheduled for ${formattedStartDate} starting at ${formattedStartTime}.`;
 		}
-	}, [formData, recurrenceType, timezone]);
+	}, [formData, recurrenceType]);

 	const endTimeText = useMemo((): string => {
 		const endTime = formData.endTime;
@@ -322,7 +322,7 @@ export function PlannedDowntimeForm(
 		const formattedEndTime = endTime.format(TIME_FORMAT);
 		const formattedEndDate = endTime.format(DATE_FORMAT);
 		return `Scheduled to end maintenance on ${formattedEndDate} at ${formattedEndTime}.`;
-	}, [formData, recurrenceType, timezone]);
+	}, [formData, recurrenceType]);

 	return (
 		<Modal
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx
+++ b/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}
--- a/frontend/src/lib/uPlotV2/utils/dataUtils.ts
+++ b/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];
+};
--- a/frontend/src/pages/TracesExplorer/Filter/DurationSection.tsx
+++ b/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}
--- a/frontend/src/types/generated/webSettings.ts
+++ b/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;
+}
--- a/pkg/modules/tracedetail/impltracedetail/waterfall_test.go
+++ b/pkg/modules/tracedetail/impltracedetail/waterfall_test.go
@@ -97,7 +97,7 @@ func makeChain(n int) (*spantypes.WaterfallSpan, map[string]*spantypes.Waterfall
 }

 func getWaterfallTrace(roots []*spantypes.WaterfallSpan, spanMap map[string]*spantypes.WaterfallSpan) *spantypes.WaterfallTrace {
-	return spantypes.NewWaterfallTrace(0, 0, uint64(len(spanMap)), 0, spanMap, nil, roots, false)
+	return spantypes.NewWaterfallTrace(0, 0, uint64(len(spanMap)), 0, spanMap, roots, false)
 }

 // ─────────────────────────────────────────────────────────────────────────────
--- a/pkg/querier/querier.go
+++ b/pkg/querier/querier.go
@@ -84,244 +84,53 @@ func New(
 	}
 }

-// extractShiftFromBuilderQuery extracts the shift value from timeShift function if present.
-func extractShiftFromBuilderQuery[T any](spec qbtypes.QueryBuilderQuery[T]) int64 {
-	for _, fn := range spec.Functions {
-		if fn.Name == qbtypes.FunctionNameTimeShift && len(fn.Args) > 0 {
-			switch v := fn.Args[0].Value.(type) {
-			case float64:
-				return int64(v)
-			case int64:
-				return v
-			case int:
-				return int64(v)
-			case string:
-				if shiftFloat, err := strconv.ParseFloat(v, 64); err == nil {
-					return int64(shiftFloat)
-				}
-			}
-		}
-	}
-	return 0
-}
-
-// adjustTimeRangeForShift adjusts the time range based on the shift value from timeShift function.
-func adjustTimeRangeForShift[T any](spec qbtypes.QueryBuilderQuery[T], tr qbtypes.TimeRange, kind qbtypes.RequestType) qbtypes.TimeRange {
-	// Only apply time shift for time series and scalar queries
-	// Raw/list queries don't support timeshift
-	if kind != qbtypes.RequestTypeTimeSeries && kind != qbtypes.RequestTypeScalar {
-		return tr
-	}
-
-	// Use the ShiftBy field if it's already populated, otherwise extract it
-	shiftBy := spec.ShiftBy
-	if shiftBy == 0 {
-		shiftBy = extractShiftFromBuilderQuery(spec)
-	}
-
-	if shiftBy == 0 {
-		return tr
-	}
-
-	// ShiftBy is in seconds, convert to milliseconds and shift backward in time
-	shiftMS := shiftBy * 1000
-	return qbtypes.TimeRange{
-		From: tr.From - uint64(shiftMS),
-		To:   tr.To - uint64(shiftMS),
-	}
-}
-
 func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtypes.QueryRangeRequest) (*qbtypes.QueryRangeResponse, error) {

 	tmplVars := req.Variables
 	if tmplVars == nil {
 		tmplVars = make(map[string]qbtypes.VariableItem)
 	}
+
 	event := &qbtypes.QBEvent{
 		Version:         "v5",
 		NumberOfQueries: len(req.CompositeQuery.Queries),
 		PanelType:       req.RequestType.StringValue(),
 	}
-	intervalWarnings := []string{}
+	q.populateQBEvent(event, req.CompositeQuery.Queries)

-	dependencyQueries := make(map[string]bool)
-	traceOperatorQueries := make(map[string]qbtypes.QueryBuilderTraceOperator)
-
-	for _, query := range req.CompositeQuery.Queries {
-		if query.Type == qbtypes.QueryTypeTraceOperator {
-			if spec, ok := query.Spec.(qbtypes.QueryBuilderTraceOperator); ok {
-				// Parse expression to find dependencies
-				if err := spec.ParseExpression(); err != nil {
-					return nil, err
-				}
-
-				deps := spec.CollectReferencedQueries(spec.ParsedExpression)
-				for _, dep := range deps {
-					dependencyQueries[dep] = true
-				}
-				traceOperatorQueries[spec.Name] = spec
-			}
-		}
+	// TraceOperatorQuery leverages other queries defined in the rangeRequest
+	// Eg: C := A => B
+	// Need to create dependency map { "A": true, "B": true }
+	dependencyQueries, err := q.constructTraceOperatorDependencyMap(req.CompositeQuery.Queries)
+	if err != nil {
+		return nil, err
 	}

-	// First pass: collect all metric names that need temporality
-	metricNames := make([]string, 0)
-	for idx, query := range req.CompositeQuery.Queries {
-		event.QueryType = query.Type.StringValue()
-		switch query.Type {
-		case qbtypes.QueryTypeBuilder:
-			if spec, ok := query.Spec.(qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]); ok {
-				for _, agg := range spec.Aggregations {
-					if agg.MetricName != "" {
-						metricNames = append(metricNames, agg.MetricName)
-					}
-				}
-			}
-			// if step interval is not set, we set it ourselves with recommended value
-			// if step interval is set to value which could result in points more than
-			// allowed, we override it.
-			switch spec := query.Spec.(type) {
-			case qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]:
-				event.TracesUsed = true
-				event.FilterApplied = spec.Filter != nil && spec.Filter.Expression != ""
-				event.GroupByApplied = len(spec.GroupBy) > 0
-				if spec.StepInterval.Seconds() == 0 {
-					spec.StepInterval = qbtypes.Step{
-						Duration: time.Second * time.Duration(querybuilder.RecommendedStepInterval(req.Start, req.End)),
-					}
-				}
-				if spec.StepInterval.Seconds() < float64(querybuilder.MinAllowedStepInterval(req.Start, req.End)) {
-					newStep := qbtypes.Step{
-						Duration: time.Second * time.Duration(querybuilder.MinAllowedStepInterval(req.Start, req.End)),
-					}
-					intervalWarnings = append(intervalWarnings, fmt.Sprintf(intervalWarn, spec.Name, spec.StepInterval.Seconds(), newStep.Seconds()))
-					spec.StepInterval = newStep
-				}
-				req.CompositeQuery.Queries[idx].Spec = spec
-			case qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]:
-				event.LogsUsed = true
-				event.FilterApplied = spec.Filter != nil && spec.Filter.Expression != ""
-				event.GroupByApplied = len(spec.GroupBy) > 0
-				if spec.StepInterval.Seconds() == 0 {
-					spec.StepInterval = qbtypes.Step{
-						Duration: time.Second * time.Duration(querybuilder.RecommendedStepInterval(req.Start, req.End)),
-					}
-				}
-				if spec.StepInterval.Seconds() < float64(querybuilder.MinAllowedStepInterval(req.Start, req.End)) {
-					newStep := qbtypes.Step{
-						Duration: time.Second * time.Duration(querybuilder.MinAllowedStepInterval(req.Start, req.End)),
-					}
-					intervalWarnings = append(intervalWarnings, fmt.Sprintf(intervalWarn, spec.Name, spec.StepInterval.Seconds(), newStep.Seconds()))
-					spec.StepInterval = newStep
-				}
-				req.CompositeQuery.Queries[idx].Spec = spec
-			case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
-				event.MetricsUsed = true
-				event.FilterApplied = spec.Filter != nil && spec.Filter.Expression != ""
-				event.GroupByApplied = len(spec.GroupBy) > 0
-
-				if spec.Source == telemetrytypes.SourceMeter {
-					if spec.StepInterval.Seconds() == 0 {
-						spec.StepInterval = qbtypes.Step{Duration: time.Second * time.Duration(querybuilder.RecommendedStepIntervalForMeter(req.Start, req.End))}
-					}
-
-					if spec.StepInterval.Seconds() < float64(querybuilder.MinAllowedStepIntervalForMeter(req.Start, req.End)) {
-						newStep := qbtypes.Step{
-							Duration: time.Second * time.Duration(querybuilder.MinAllowedStepIntervalForMeter(req.Start, req.End)),
-						}
-						spec.StepInterval = newStep
-					}
-				} else {
-					if spec.StepInterval.Seconds() == 0 {
-						spec.StepInterval = qbtypes.Step{
-							Duration: time.Second * time.Duration(querybuilder.RecommendedStepIntervalForMetric(req.Start, req.End)),
-						}
-					}
-					if spec.StepInterval.Seconds() < float64(querybuilder.MinAllowedStepIntervalForMetric(req.Start, req.End)) {
-						newStep := qbtypes.Step{
-							Duration: time.Second * time.Duration(querybuilder.MinAllowedStepIntervalForMetric(req.Start, req.End)),
-						}
-						intervalWarnings = append(intervalWarnings, fmt.Sprintf(intervalWarn, spec.Name, spec.StepInterval.Seconds(), newStep.Seconds()))
-						spec.StepInterval = newStep
-					}
-				}
-				req.CompositeQuery.Queries[idx].Spec = spec
-			}
-		case qbtypes.QueryTypePromQL:
-			event.MetricsUsed = true
-			switch spec := query.Spec.(type) {
-			case qbtypes.PromQuery:
-				if spec.Step.Seconds() == 0 {
-					spec.Step = qbtypes.Step{
-						Duration: time.Second * time.Duration(querybuilder.RecommendedStepIntervalForMetric(req.Start, req.End)),
-					}
-				}
-				req.CompositeQuery.Queries[idx].Spec = spec
-			}
-		case qbtypes.QueryTypeClickHouseSQL:
-			switch spec := query.Spec.(type) {
-			case qbtypes.ClickHouseQuery:
-				if strings.TrimSpace(spec.Query) != "" {
-					event.MetricsUsed = strings.Contains(spec.Query, "signoz_metrics")
-					event.LogsUsed = strings.Contains(spec.Query, "signoz_logs")
-					event.TracesUsed = strings.Contains(spec.Query, "signoz_traces")
-				}
-			}
-		case qbtypes.QueryTypeTraceOperator:
-			if spec, ok := query.Spec.(qbtypes.QueryBuilderTraceOperator); ok {
-				if spec.StepInterval.Seconds() == 0 {
-					spec.StepInterval = qbtypes.Step{
-						Duration: time.Second * time.Duration(querybuilder.RecommendedStepInterval(req.Start, req.End)),
-					}
-				}
-
-				if spec.StepInterval.Seconds() < float64(querybuilder.MinAllowedStepInterval(req.Start, req.End)) {
-					newStep := qbtypes.Step{
-						Duration: time.Second * time.Duration(querybuilder.MinAllowedStepInterval(req.Start, req.End)),
-					}
-					intervalWarnings = append(intervalWarnings, fmt.Sprintf(intervalWarn, spec.Name, spec.StepInterval.Seconds(), newStep.Seconds()))
-					spec.StepInterval = newStep
-				}
-				req.CompositeQuery.Queries[idx].Spec = spec
-			}
-		}
-	}
+	// Step interval is the aggregation parameter for timeseries requests.
+	// We need to set if it is unspecified or adjust it if value is not within recommended range
+	intervalWarnings := q.adjustStepInterval(req.CompositeQuery.Queries, req.Start, req.End)

 	queries := make(map[string]qbtypes.Query)
 	steps := make(map[string]qbtypes.Step)
-	missingMetrics := []string{}
-	missingMetricQueries := []string{}
+
+	// Resolve metric metadata once per request: patches each metric-aggregation
+	// query's spec in place, returns the queries whose every aggregation was
+	// missing (used for preseeded empty results), and any dormant-metric
+	// warning string. NotFound errors for never-seen metrics are propagated.
+	missingMetricQueries, dormantMetricsWarningMsg, err := q.resolveMetricMetadata(ctx, req.CompositeQuery.Queries, req.Start, req.End)
+	if err != nil {
+		return nil, err
+	}
+	missingMetricQuerySet := make(map[string]bool, len(missingMetricQueries))
+	for _, name := range missingMetricQueries {
+		missingMetricQuerySet[name] = true
+	}

 	for _, query := range req.CompositeQuery.Queries {
-		var queryName string
-		var isTraceOperator bool
+		queryName := query.GetQueryName()

-		switch query.Type {
-		case qbtypes.QueryTypeTraceOperator:
-			if spec, ok := query.Spec.(qbtypes.QueryBuilderTraceOperator); ok {
-				queryName = spec.Name
-				isTraceOperator = true
-			}
-		case qbtypes.QueryTypePromQL:
-			if spec, ok := query.Spec.(qbtypes.PromQuery); ok {
-				queryName = spec.Name
-			}
-		case qbtypes.QueryTypeClickHouseSQL:
-			if spec, ok := query.Spec.(qbtypes.ClickHouseQuery); ok {
-				queryName = spec.Name
-			}
-		case qbtypes.QueryTypeBuilder:
-			switch spec := query.Spec.(type) {
-			case qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]:
-				queryName = spec.Name
-			case qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]:
-				queryName = spec.Name
-			case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
-				queryName = spec.Name
-			}
-		}
-
-		if !isTraceOperator && dependencyQueries[queryName] {
+		// skip if it is dependecy of traceOperatorQuery
+		if query.GetType() != qbtypes.QueryTypeTraceOperator && dependencyQueries[queryName] {
 			continue
 		}

@@ -376,40 +185,13 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 				queries[spec.Name] = bq
 				steps[spec.Name] = spec.StepInterval
 			case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
-				var metricTemporality map[string]metrictypes.Temporality
-				var metricTypes map[string]metrictypes.Type
-				if len(metricNames) > 0 {
-					var err error
-					metricTemporality, metricTypes, err = q.metadataStore.FetchTemporalityAndTypeMulti(ctx, req.Start, req.End, metricNames...)
-					if err != nil {
-						q.logger.WarnContext(ctx, "failed to fetch metric temporality", errors.Attr(err), slog.Any("metrics", metricNames))
-						return nil, errors.NewInternalf(errors.CodeInternal, "failed to fetch metrics temporality")
-					}
-					q.logger.DebugContext(ctx, "fetched metric temporalities and types", slog.Any("metric_temporality", metricTemporality), slog.Any("metric_types", metricTypes))
-				}
-				presentAggregations := []qbtypes.MetricAggregation{}
-				for i := range spec.Aggregations {
-					if spec.Aggregations[i].MetricName != "" && spec.Aggregations[i].Temporality == metrictypes.Unknown {
-						if temp, ok := metricTemporality[spec.Aggregations[i].MetricName]; ok && temp != metrictypes.Unknown {
-							spec.Aggregations[i].Temporality = temp
-						}
-					}
-					if spec.Aggregations[i].MetricName != "" && spec.Aggregations[i].Type == metrictypes.UnspecifiedType {
-						if foundMetricType, ok := metricTypes[spec.Aggregations[i].MetricName]; ok && foundMetricType != metrictypes.UnspecifiedType {
-							spec.Aggregations[i].Type = foundMetricType
-						}
-					}
-					if spec.Aggregations[i].Type == metrictypes.UnspecifiedType {
-						missingMetrics = append(missingMetrics, spec.Aggregations[i].MetricName)
-						continue
-					}
-					presentAggregations = append(presentAggregations, spec.Aggregations[i])
-				}
-				if len(presentAggregations) == 0 {
-					missingMetricQueries = append(missingMetricQueries, spec.Name)
+				// Spec was already patched by resolveMetricMetadata. Queries
+				// whose every aggregation was missing live in
+				// missingMetricQuerySet and produce empty preseeded results
+				// rather than running here.
+				if missingMetricQuerySet[spec.Name] {
 					continue
 				}
-				spec.Aggregations = presentAggregations
 				spec.ShiftBy = extractShiftFromBuilderQuery(spec)
 				timeRange := adjustTimeRangeForShift(spec, qbtypes.TimeRange{From: req.Start, To: req.End}, req.RequestType)
 				var bq *builderQuery[qbtypes.MetricAggregation]
@@ -428,38 +210,6 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 			}
 		}
 	}
-	nonExistentMetrics := []string{}
-	var dormantMetricsWarningMsg string
-	if len(missingMetrics) > 0 {
-		lastSeenInfo, _ := q.metadataStore.FetchLastSeenInfoMulti(ctx, missingMetrics...)
-		for _, missingMetricName := range missingMetrics {
-			if ts, ok := lastSeenInfo[missingMetricName]; ok && ts > 0 {
-				continue
-			}
-			nonExistentMetrics = append(nonExistentMetrics, missingMetricName)
-		}
-		if len(nonExistentMetrics) == 1 {
-			return nil, errors.NewNotFoundf(errors.CodeNotFound, "could not find the metric %s", nonExistentMetrics[0])
-		} else if len(nonExistentMetrics) > 1 {
-			return nil, errors.NewNotFoundf(errors.CodeNotFound, "the following metrics were not found: %s", strings.Join(nonExistentMetrics, ", "))
-		}
-		lastSeenStr := func(name string) string {
-			if ts, ok := lastSeenInfo[name]; ok && ts > 0 {
-				ago := humanize.RelTime(time.UnixMilli(ts), time.Now(), "ago", "from now")
-				return fmt.Sprintf("%s (last seen %s)", name, ago)
-			}
-			return name // this case won't come cuz lastSeenStr is never called for metrics in nonExistentMetrics
-		}
-		if len(missingMetrics) == 1 {
-			dormantMetricsWarningMsg = fmt.Sprintf("no data found for the metric %s in the query time range", lastSeenStr(missingMetrics[0]))
-		} else {
-			parts := make([]string, len(missingMetrics))
-			for i, m := range missingMetrics {
-				parts[i] = lastSeenStr(m)
-			}
-			dormantMetricsWarningMsg = fmt.Sprintf("no data found for the following metrics in the query time range: %s", strings.Join(parts, ", "))
-		}
-	}
 	preseededResults := make(map[string]any)
 	for _, name := range missingMetricQueries { // at this point missing metrics will not have any non existent metrics, only normal ones
 		switch req.RequestType {
@@ -496,6 +246,166 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 	return qbResp, qbErr
 }

+func (q *querier) populateQBEvent(event *qbtypes.QBEvent, queries []qbtypes.QueryEnvelope) {
+	for _, query := range queries {
+		// BUG: QueryType doesn't make sense as range_request can have multiple query types.
+		event.QueryType = query.Type.StringValue()
+
+		switch query.Type {
+		case qbtypes.QueryTypeBuilder:
+			filter := query.GetFilter()
+			event.FilterApplied = event.FilterApplied || (filter != nil && filter.Expression != "")
+			event.GroupByApplied = event.GroupByApplied || len(query.GetGroupBy()) > 0
+			switch query.Spec.(type) {
+			case qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]:
+				event.TracesUsed = true
+			case qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]:
+				event.LogsUsed = true
+			case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
+				event.MetricsUsed = true
+			}
+		case qbtypes.QueryTypePromQL:
+			event.MetricsUsed = true
+		case qbtypes.QueryTypeTraceOperator:
+			event.TracesUsed = true
+		case qbtypes.QueryTypeClickHouseSQL:
+			sql := query.GetQuery()
+			if strings.TrimSpace(sql) != "" {
+				event.MetricsUsed = strings.Contains(sql, "signoz_metrics")
+				event.LogsUsed = strings.Contains(sql, "signoz_logs")
+				event.TracesUsed = strings.Contains(sql, "signoz_traces")
+			}
+		}
+	}
+}
+
+// resolveMetricMetadata fetches metadata for every metric referenced by builder
+// metric-aggregation queries, patches each query's aggregations in place with
+// the resolved values, and classifies any metric that could not be resolved.
+//
+// Side effects on queries:
+//   - Aggregations with Unknown Temporality / UnspecifiedType are filled in from
+//     the metadata store.
+//   - Aggregations whose Type is still UnspecifiedType after the patch are
+//     dropped from the spec.
+//   - Queries whose entire aggregation list was dropped are NOT patched and are
+//     surfaced via the returned missingMetricQueries; the caller should skip
+//     them.
+//
+// Returns:
+//   - missingMetricQueries: names of queries whose every aggregation was
+//     missing. Used downstream to preseed empty result placeholders so the
+//     response still has an entry per requested query name.
+//   - dormantWarning: a human-readable warning describing metrics that exist in
+//     the store but produced no data within the query window. Empty when no
+//     such metrics are present.
+//   - err: NotFound when one or more referenced metrics have never been seen,
+//     or Internal when a metadata fetch fails.
+func (q *querier) resolveMetricMetadata(ctx context.Context, queries []qbtypes.QueryEnvelope, start, end uint64) (missingMetricQueries []string, dormantWarning string, err error) {
+	metricNames := make([]string, 0)
+	for idx := range queries {
+		if queries[idx].Type != qbtypes.QueryTypeBuilder {
+			continue
+		}
+		spec, ok := queries[idx].Spec.(qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation])
+		if !ok {
+			continue
+		}
+		for _, agg := range spec.Aggregations {
+			if agg.MetricName != "" {
+				metricNames = append(metricNames, agg.MetricName)
+			}
+		}
+	}
+
+	if len(metricNames) == 0 {
+		return nil, "", nil
+	}
+
+	metricTemporality, metricTypes, err := q.metadataStore.FetchTemporalityAndTypeMulti(ctx, start, end, metricNames...)
+	if err != nil {
+		q.logger.WarnContext(ctx, "failed to fetch metric temporality", errors.Attr(err), slog.Any("metrics", metricNames))
+		return nil, "", errors.NewInternalf(errors.CodeInternal, "failed to fetch metrics temporality")
+	}
+	q.logger.DebugContext(ctx, "fetched metric temporalities and types", slog.Any("metric_temporality", metricTemporality), slog.Any("metric_types", metricTypes))
+
+	missingMetrics := []string{}
+	for idx := range queries {
+		if queries[idx].Type != qbtypes.QueryTypeBuilder {
+			continue
+		}
+		spec, ok := queries[idx].Spec.(qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation])
+		if !ok {
+			continue
+		}
+
+		presentAggregations := make([]qbtypes.MetricAggregation, 0, len(spec.Aggregations))
+		for i := range spec.Aggregations {
+			if spec.Aggregations[i].MetricName != "" && spec.Aggregations[i].Temporality == metrictypes.Unknown {
+				if temp, ok := metricTemporality[spec.Aggregations[i].MetricName]; ok && temp != metrictypes.Unknown {
+					spec.Aggregations[i].Temporality = temp
+				}
+			}
+			if spec.Aggregations[i].MetricName != "" && spec.Aggregations[i].Type == metrictypes.UnspecifiedType {
+				if foundMetricType, ok := metricTypes[spec.Aggregations[i].MetricName]; ok && foundMetricType != metrictypes.UnspecifiedType {
+					spec.Aggregations[i].Type = foundMetricType
+				}
+			}
+			if spec.Aggregations[i].Type == metrictypes.UnspecifiedType {
+				missingMetrics = append(missingMetrics, spec.Aggregations[i].MetricName)
+				continue
+			}
+			presentAggregations = append(presentAggregations, spec.Aggregations[i])
+		}
+		if len(presentAggregations) == 0 {
+			missingMetricQueries = append(missingMetricQueries, spec.Name)
+			continue
+		}
+		spec.Aggregations = presentAggregations
+		queries[idx].Spec = spec
+	}
+
+	if len(missingMetrics) == 0 {
+		return missingMetricQueries, "", nil
+	}
+
+	// Classify each missing metric: never-seen → NotFound error; seen-but-no-
+	// data-in-window → dormant warning.
+	lastSeenInfo, _ := q.metadataStore.FetchLastSeenInfoMulti(ctx, missingMetrics...)
+	nonExistentMetrics := []string{}
+	for _, name := range missingMetrics {
+		if ts, ok := lastSeenInfo[name]; ok && ts > 0 {
+			continue
+		}
+		nonExistentMetrics = append(nonExistentMetrics, name)
+	}
+	if len(nonExistentMetrics) == 1 {
+		return nil, "", errors.NewNotFoundf(errors.CodeNotFound, "could not find the metric %s", nonExistentMetrics[0])
+	}
+	if len(nonExistentMetrics) > 1 {
+		return nil, "", errors.NewNotFoundf(errors.CodeNotFound, "the following metrics were not found: %s", strings.Join(nonExistentMetrics, ", "))
+	}
+
+	// All missing metrics are dormant — assemble the warning string.
+	lastSeenStr := func(name string) string {
+		if ts, ok := lastSeenInfo[name]; ok && ts > 0 {
+			ago := humanize.RelTime(time.UnixMilli(ts), time.Now(), "ago", "from now")
+			return fmt.Sprintf("%s (last seen %s)", name, ago)
+		}
+		return name
+	}
+	if len(missingMetrics) == 1 {
+		dormantWarning = fmt.Sprintf("no data found for the metric %s in the query time range", lastSeenStr(missingMetrics[0]))
+	} else {
+		parts := make([]string, len(missingMetrics))
+		for i, m := range missingMetrics {
+			parts[i] = lastSeenStr(m)
+		}
+		dormantWarning = fmt.Sprintf("no data found for the following metrics in the query time range: %s", strings.Join(parts, ", "))
+	}
+	return missingMetricQueries, dormantWarning, nil
+}
+
 func (q *querier) QueryRawStream(ctx context.Context, orgID valuer.UUID, req *qbtypes.QueryRangeRequest, client *qbtypes.RawStream) {

 	event := &qbtypes.QBEvent{
@@ -1093,3 +1003,129 @@ func (q *querier) mergeTimeSeriesResults(cachedValue *qbtypes.TimeSeriesData, fr

 	return result
 }
+
+func secondsStep(s uint64) qbtypes.Step {
+	return qbtypes.Step{Duration: time.Second * time.Duration(s)}
+}
+
+// clampStep sets the step to recommended when zero and clamps to min when below it.
+// When clamped and warn is true, a warning is appended for the user.
+func clampStep(qe *qbtypes.QueryEnvelope, recommended, min uint64, warnings *[]string) {
+	step := qe.GetStepInterval()
+	if step.Seconds() == 0 {
+		step = secondsStep(recommended)
+		qe.SetStepInterval(step)
+	}
+	if step.Seconds() < float64(min) {
+		newStep := secondsStep(min)
+		*warnings = append(*warnings, fmt.Sprintf(intervalWarn, qe.GetQueryName(), step.Seconds(), newStep.Seconds()))
+		qe.SetStepInterval(newStep)
+	}
+}
+
+// extractShiftFromBuilderQuery extracts the shift value from timeShift function if present.
+func extractShiftFromBuilderQuery[T any](spec qbtypes.QueryBuilderQuery[T]) int64 {
+	for _, fn := range spec.Functions {
+		if fn.Name == qbtypes.FunctionNameTimeShift && len(fn.Args) > 0 {
+			switch v := fn.Args[0].Value.(type) {
+			case float64:
+				return int64(v)
+			case int64:
+				return v
+			case int:
+				return int64(v)
+			case string:
+				if shiftFloat, err := strconv.ParseFloat(v, 64); err == nil {
+					return int64(shiftFloat)
+				}
+			}
+		}
+	}
+	return 0
+}
+
+// adjustTimeRangeForShift adjusts the time range based on the shift value from timeShift function.
+func adjustTimeRangeForShift[T any](spec qbtypes.QueryBuilderQuery[T], tr qbtypes.TimeRange, kind qbtypes.RequestType) qbtypes.TimeRange {
+	// Only apply time shift for time series and scalar queries
+	// Raw/list queries don't support timeshift
+	if kind != qbtypes.RequestTypeTimeSeries && kind != qbtypes.RequestTypeScalar {
+		return tr
+	}
+
+	// Use the ShiftBy field if it's already populated, otherwise extract it
+	shiftBy := spec.ShiftBy
+	if shiftBy == 0 {
+		shiftBy = extractShiftFromBuilderQuery(spec)
+	}
+
+	if shiftBy == 0 {
+		return tr
+	}
+
+	// ShiftBy is in seconds, convert to milliseconds and shift backward in time
+	shiftMS := shiftBy * 1000
+	return qbtypes.TimeRange{
+		From: tr.From - uint64(shiftMS),
+		To:   tr.To - uint64(shiftMS),
+	}
+}
+
+func (q *querier) constructTraceOperatorDependencyMap(queries []qbtypes.QueryEnvelope) (map[string]bool, error) {
+	dependencyQueries := make(map[string]bool)
+
+	for _, query := range queries {
+		if query.Type == qbtypes.QueryTypeTraceOperator {
+			if spec, ok := query.Spec.(qbtypes.QueryBuilderTraceOperator); ok {
+				// Parse expression to find dependencies
+				if err := spec.ParseExpression(); err != nil {
+					return nil, err
+				}
+
+				deps := spec.CollectReferencedQueries(spec.ParsedExpression)
+				for _, dep := range deps {
+					dependencyQueries[dep] = true
+				}
+			}
+		}
+	}
+
+	return dependencyQueries, nil
+}
+
+// adjustStepInterval normalizes each query's step interval in place and returns
+// any clamp warnings emitted along the way.
+func (q *querier) adjustStepInterval(queries []qbtypes.QueryEnvelope, start, end uint64) []string {
+	// Compute the per-signal bounds once per call — they only depend on start/end.
+	traceLogRecommended := querybuilder.RecommendedStepInterval(start, end)
+	traceLogMin := querybuilder.MinAllowedStepInterval(start, end)
+	meterRecommended := querybuilder.RecommendedStepIntervalForMeter(start, end)
+	meterMin := querybuilder.MinAllowedStepIntervalForMeter(start, end)
+	metricRecommended := querybuilder.RecommendedStepIntervalForMetric(start, end)
+	metricMin := querybuilder.MinAllowedStepIntervalForMetric(start, end)
+
+	warnings := make([]string, 0)
+	for idx := range queries {
+		qe := &queries[idx]
+		switch qe.Type {
+		case qbtypes.QueryTypeBuilder:
+			switch qe.Spec.(type) {
+			case qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation], qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]:
+				clampStep(qe, traceLogRecommended, traceLogMin, &warnings)
+			case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
+				if qe.GetSource() == telemetrytypes.SourceMeter {
+					clampStep(qe, meterRecommended, meterMin, &warnings)
+				} else {
+					clampStep(qe, metricRecommended, metricMin, &warnings)
+				}
+			}
+		case qbtypes.QueryTypePromQL:
+			// PromQL only fills an unset step — no min clamp.
+			if qe.GetStepInterval().Seconds() == 0 {
+				qe.SetStepInterval(secondsStep(metricRecommended))
+			}
+		case qbtypes.QueryTypeTraceOperator:
+			clampStep(qe, traceLogRecommended, traceLogMin, &warnings)
+		}
+	}
+	return warnings
+}
--- a/pkg/types/spantypes/aggregation_test.go
+++ b/pkg/types/spantypes/aggregation_test.go
@@ -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 (
--- a/pkg/types/spantypes/waterfall_trace.go
+++ b/pkg/types/spantypes/waterfall_trace.go
@@ -20,50 +20,45 @@ 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,
 	}
 }

@@ -124,7 +119,6 @@ func NewWaterfallTraceFromSpans(spans []StorableSpan) *WaterfallTrace {
 		uint64(len(spans)),
 		totalErrorSpans,
 		spanIDToSpanNodeMap,
-		calculateServiceTime(spanIDToSpanNodeMap),
 		traceRoots,
 		hasMissingSpans,
 	)
@@ -206,23 +200,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 +247,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 +262,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 +295,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 {
--- a/pkg/web/config.go
+++ b/pkg/web/config.go
@@ -15,22 +15,21 @@ type Config struct {
 	// The directory from which to serve the web files.
 	Directory string `mapstructure:"directory"`

-	// Settings that are exposed to the web.
-	Settings Settings `mapstructure:"settings"`
+	// Web settings configuration.
+	Settings SettingsConfig `mapstructure:"settings"`
 }

-// Settings that are exposed to the web.
-type Settings struct {
-	Posthog Posthog `mapstructure:"posthog"`
-
-	Appcues Appcues `mapstructure:"appcues"`
+// SettingsConfig holds the configuration for web settings.
+type SettingsConfig struct {
+	Posthog PosthogConfig `mapstructure:"posthog"`
+	Appcues AppcuesConfig `mapstructure:"appcues"`
 }

-type Posthog struct {
+type PosthogConfig struct {
 	Enabled bool `mapstructure:"enabled"`
 }

-type Appcues struct {
+type AppcuesConfig struct {
 	Enabled bool `mapstructure:"enabled"`
 }

@@ -43,11 +42,11 @@ func newConfig() factory.Config {
 		Enabled:   true,
 		Index:     "index.html",
 		Directory: "/etc/signoz/web",
-		Settings: Settings{
-			Posthog: Posthog{
+		Settings: SettingsConfig{
+			Posthog: PosthogConfig{
 				Enabled: true,
 			},
-			Appcues: Appcues{
+			Appcues: AppcuesConfig{
 				Enabled: true,
 			},
 		},
--- a/pkg/web/routerweb/provider.go
+++ b/pkg/web/routerweb/provider.go
@@ -44,7 +44,8 @@ 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)
 	}

-	settingsJSON, err := json.Marshal(config.Settings)
+	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")
 	}
--- a/pkg/web/routerweb/provider_test.go
+++ b/pkg/web/routerweb/provider_test.go
@@ -118,9 +118,9 @@ func TestServeTemplatedIndex(t *testing.T) {
 			webConfig: web.Config{
 				Index:     "valid_template.html",
 				Directory: "testdata",
-				Settings: web.Settings{
-					Posthog: web.Posthog{Enabled: true},
-					Appcues: web.Appcues{Enabled: true},
+				Settings: web.SettingsConfig{
+					Posthog: web.PosthogConfig{Enabled: true},
+					Appcues: web.AppcuesConfig{Enabled: true},
 				},
 			},
 			expected: expectedHTML("/", web.Settings{
--- a/pkg/web/settings.go
+++ b/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,
+		},
+	}
+}
Author	SHA1	Message	Date
Tushar Vats	2da3d34719	Merge branch 'main' into tvats-breakdown-query-range-into-smaller-units	2026-05-25 19:13:09 +05:30
Ashwin Bhatkal	39957d322f	fix(planned-downtime): remove unused timezone dep from useMemo hooks (#11448 ) The startTimeText and endTimeText useMemo hooks did not reference timezone in their callback bodies, so including it in the dependency arrays caused unnecessary recomputations whenever the timezone form field changed.	2026-05-25 13:24:03 +00:00
Vikrant Gupta	d1f143f675	feat(web): add support for generating web settings types (#11445 ) * feat(web): add support for generating settings type * feat(web): add support for generating settings type * feat(web): add support for generating settings type * refactor: rename generate settings to generate config web-settings - Rename cmd/settings.go to cmd/genconfig.go - Restructure command as `generate config web-settings` - Move schema output to docs/config/web-settings.json - Update frontend script to generate:config:web-settings - Update CI checks to match new command names - Strip Web prefix from generated JSON Schema definitions	2026-05-25 12:41:24 +00:00
Abhi kumar	1355b13504	chore: added changes to migrate slider component from antd to signozhq/ui (#11411 ) * chore: added changes to migrate slider component from antd to signozhq/ui * chore: package update * chore(jest): allow copy-text-to-clipboard through transformIgnorePatterns	2026-05-25 12:02:48 +00:00
Vishal Sharma	22d6d5248f	feat(ai-assistant): collapse thinking + tool-call steps into one row (#11361 ) * feat(ai-assistant): collapse thinking + tool-call steps into one row Long sequences of thinking and tool-call rows in the chat were noisy and pushed the actual answer below the fold. ActivityGroup folds any run of consecutive thinking + tool events behind a single "Worked through N steps" summary that expands on click. While streaming, the trailing group reads "Working… · Xs · N steps" with a live elapsed-time tick that re-stamps on approval/clarification resume. ThinkingStep now reads "Thinking…" while live and "Thought for a few seconds" once done. Liveness is derived purely from render position (trailing item in a trailing live group); persisted history blocks default to not-live so they render the same wording without depending on server-stored timing. * refactor(ai-assistant): tighten ActivityGroup after review - Bare-render lone activity items: a single thinking or tool step no longer renders as "Worked through 1 step" — the underlying chevron is enough disclosure. - Memoize the group partition in MessageBubble and StreamingMessage so store updates that don't touch the message's blocks/events don't churn the underlying step children. - Bump the elapsed-timer tick from 500ms to 1000ms (display is integer-second precision) and suppress the elapsed token until ≥ 1s. - Add aria-expanded + aria-controls on the disclosure button and rename the SCSS keyframe to activityGroupPulse to avoid a global collision. - Document the same-instance invariant ActivityGroup's timer relies on in groupStreamingEvents. * refactor(ai-assistant): apply PR review feedback on ActivityGroup - Reuse formatTime() from utils/timeUtils for the elapsed-time label instead of a local formatter. - Tighten the isLive JSDoc on ActivityGroup and ThinkingStep so the doc only captures the non-obvious "why" (timer re-stamp on resume; vague copy because the API doesn't persist precise timing). * refactor(ai-assistant): unify activity rows under ActivityGroup Drop the bare-render shortcut for single-item activity groups and route every "what the agent did" row through ActivityGroup. The summary now adapts to the item count and kind — single-item groups read "Thinking… / Thought for a few seconds" or the tool's display text instead of the awkward "Worked through 1 step", and single-item expansion renders the underlying content body directly (no second chevron disclosure). Extracts ThinkingContent / ToolCallContent body sub-components and a small thinkingLabel / getToolDisplayLabel helper so ActivityGroup can reuse them without duplicating markup. * refactor(ai-assistant): apply ActivityGroup review feedback - Rename common CSS module class names to scoped variants (.group → .activityGroup, .header → .activityHeader, etc.) so matches against module classes carry intent and don't collide with future styles in adjacent files. - Swap the disclosure <button> for a <div> with onClick — drops the signoz Button component option since its action-button defaults (focus ring, base padding, hover background) visually regressed the quiet full-width row. Matches the existing ThinkingStep / ToolCallStep disclosure pattern. - Drop the useId + aria-controls plumbing; with the disclosure collapsed inline beneath the header, the id wasn't carrying semantic weight beyond what aria-expanded already provides. - Thread stable id fields through ActivityItem and the RenderGroup types so list keys come from typed data rather than the loop index. Persisted tool blocks key off the server-assigned toolCallId; streaming items and thinking blocks key off their position in the append-only source array.	2026-05-25 11:35:45 +00:00
Abhi kumar	fdbdbf27a8	chore: added changes to migerate alert chart component to new charts (#11308 ) * chore: added changes to migerate alert chart component to new charts * chore: minor changes * chore: minor changes * chore: pr review changes * chore: minor refactor	2026-05-25 11:18:53 +00:00
Nikhil Soni	f47f1ad92b	Remove unused field from waterfall response (part 1 of memory opt) (#11337 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * chore: remove unused field from waterfall v3 * chore: update openapi specs * chore: remove debug statements	2026-05-25 09:36:05 +00:00
Yunus M	116d7700d5	Merge branch 'main' into tvats-breakdown-query-range-into-smaller-units	2026-05-18 12:33:30 +05:30
Tushar Vats	0bc2d21822	fix: move unexported helper functions to end of file	2026-05-18 10:45:42 +05:30
Tushar Vats	2e5acc7097	chore: breakdown query range function	2026-05-06 21:58:19 +05:30