feat(alerts): return activeMute in rule API responses

Backend computes the active mute window per rule (joining with planned
maintenance schedules) in ListRules and GetRuleByID, so the frontend no
longer needs a separate downtime-schedules fetch to determine mute state.

- Add ActiveMuteInfo struct to Rule (id, name, description,
  effectiveStartTime, effectiveEndTime); computed by findActiveMuteForRule
- Handlers for ListRules/GetRuleByID now fetch MaintenanceStore schedules
  and pass them to NewRule
- Regenerate OpenAPI spec and frontend types (RuletypesActiveMuteInfoDTO)
- useActiveMute: drop useListDowntimeSchedules, read activeMute from
  useGetRuleByID (cache-hit on detail page; one request on list page)
- useMuteAlertRule: also invalidate rule queries after muting so activeMute
  refreshes without a separate schedules refetch
- ListAlert: remove useListDowntimeSchedules + findActiveMuteForRule,
  read record.activeMute.effectiveEndTime directly

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.github/workflows/goci.yaml

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

.github/workflows/jsci.yaml

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

cmd/genconfig.go

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

cmd/generate.go

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

docs/api/openapi.yml

@@ -129,6 +129,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
         status:
           $ref: '#/components/schemas/AlertmanagertypesMaintenanceStatus'
         updatedAt:
@@ -272,6 +274,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
       required:
       - name
       - schedule
@@ -5105,6 +5109,23 @@ components:
       - start
       - end
       type: object
+    RuletypesActiveMuteInfo:
+      properties:
+        description:
+          type: string
+        effectiveEndTime:
+          format: date-time
+          nullable: true
+          type: string
+        effectiveStartTime:
+          format: date-time
+          nullable: true
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+      type: object
     RuletypesAlertCompositeQuery:
       properties:
         panelType:
@@ -5355,6 +5376,8 @@ components:
       type: object
     RuletypesRule:
       properties:
+        activeMute:
+          $ref: '#/components/schemas/RuletypesActiveMuteInfo'
         alert:
           type: string
         alertType:
@@ -5686,12 +5709,6 @@ components:
           type: string
         rootServiceName:
           type: string
-        serviceNameToTotalDurationMap:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
         spans:
           items:
             $ref: '#/components/schemas/SpantypesWaterfallSpan'

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

frontend/index.html

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

frontend/jest.config.ts

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

frontend/package.json

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

frontend/pnpm-lock.yaml

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

frontend/src/AppRoutes/index.tsx

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

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

@@ -225,6 +225,10 @@ export interface AlertmanagertypesPlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
 	status: AlertmanagertypesMaintenanceStatusDTO;
 	/**
 	 * @type string
@@ -1714,6 +1718,10 @@ export interface AlertmanagertypesPostablePlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
 }
 
 export interface AlertmanagertypesPostableRoutePolicyDTO {
@@ -6074,6 +6082,31 @@ export interface RulestatehistorytypesGettableRuleStateWindowDTO {
 	state: RuletypesAlertStateDTO;
 }
 
+export interface RuletypesActiveMuteInfoDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string,null
+	 * @format date-time
+	 */
+	effectiveEndTime?: string | null;
+	/**
+	 * @type string,null
+	 * @format date-time
+	 */
+	effectiveStartTime?: string | null;
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+}
+
 export enum RuletypesPanelTypeDTO {
 	value = 'value',
 	table = 'table',
@@ -6398,6 +6431,7 @@ export type RuletypesRuleDTOAnnotations = { [key: string]: string };
 export type RuletypesRuleDTOLabels = { [key: string]: string };
 
 export interface RuletypesRuleDTO {
+	activeMute?: RuletypesActiveMuteInfoDTO;
 	/**
 	 * @type string
 	 */
@@ -6743,15 +6777,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 +6965,6 @@ export interface SpantypesGettableWaterfallTraceDTO {
 	 * @type string
 	 */
 	rootServiceName?: string;
-	/**
-	 * @type object,null
-	 */
-	serviceNameToTotalDurationMap?: SpantypesGettableWaterfallTraceDTOServiceNameToTotalDurationMap;
 	/**
 	 * @type array,null
 	 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/FormAlertRules/index.tsx

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

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -43,6 +43,7 @@ import { isModifierKeyPressed } from 'utils/app';
 
 import DeleteAlert from './DeleteAlert';
 import { ColumnButton, SearchContainer } from './styles';
+import MutedBadge from './TableComponents/MutedBadge';
 import Status from './TableComponents/Status';
 import ToggleAlertState from './ToggleAlertState';
 import { alertActionLogEvent, filterAlerts } from './utils';
@@ -276,7 +277,14 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					onEditHandler(record, { newTab: isModifierKeyPressed(e) });
 				};
 
-				return <Typography.Link onClick={onClickHandler}>{value}</Typography.Link>;
+				const muteEndTime = record.activeMute?.effectiveEndTime ?? undefined;
+
+				return (
+					<span className="alert-list-name-cell">
+						<Typography.Link onClick={onClickHandler}>{value}</Typography.Link>
+						<MutedBadge muteEndTime={muteEndTime} />
+					</span>
+				);
 			},
 			sortOrder: sortedInfo.columnKey === 'name' ? sortedInfo.order : null,
 		},

frontend/src/container/ListAlertRules/TableComponents/MutedBadge.styles.scss

@@ -0,0 +1,20 @@
+.alert-list-name-cell {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.alert-list-muted-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 2px 7px;
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--bg-amber-500);
+	background: rgba(255, 205, 86, 0.12);
+	border: 1px solid rgba(255, 205, 86, 0.25);
+	border-radius: 4px;
+}

frontend/src/container/ListAlertRules/TableComponents/MutedBadge.tsx

@@ -0,0 +1,46 @@
+import { BellOff } from '@signozhq/icons';
+import dayjs from 'dayjs';
+
+import './MutedBadge.styles.scss';
+
+const formatRemaining = (endTime: string | undefined): string | null => {
+	if (!endTime) {
+		return null;
+	}
+	const end = dayjs(endTime);
+	const now = dayjs();
+	const diffMs = end.diff(now);
+	if (diffMs <= 0) {
+		return null;
+	}
+	const totalMinutes = Math.floor(diffMs / 60000);
+	const days = Math.floor(totalMinutes / (60 * 24));
+	const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
+	const minutes = totalMinutes % 60;
+	if (days > 0) {
+		return `${days}d ${hours}h`;
+	}
+	if (hours > 0) {
+		return `${hours}h ${minutes}m`;
+	}
+	return `${minutes}m`;
+};
+
+interface MutedBadgeProps {
+	muteEndTime?: string;
+}
+
+function MutedBadge({ muteEndTime }: MutedBadgeProps): JSX.Element | null {
+	if (!muteEndTime) {
+		return null;
+	}
+	const remaining = formatRemaining(muteEndTime);
+	return (
+		<span className="alert-list-muted-badge">
+			<BellOff size={10} />
+			<span>MUTED{remaining ? ` · ${remaining}` : ''}</span>
+		</span>
+	);
+}
+
+export default MutedBadge;

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

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

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

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

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

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

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

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

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

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

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

@@ -12,6 +12,20 @@
 		margin-right: 4px;
 	}
 }
+
+.alert-state-segmented-wrapper {
+	position: relative;
+	display: inline-flex;
+}
+
+.alert-state-segmented-anchor {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	width: 0;
+	height: 0;
+	pointer-events: none;
+}
 .dropdown-menu {
 	border-radius: 4px;
 	box-shadow: none;

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

@@ -1,7 +1,6 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Divider, Dropdown, MenuProps, Tooltip } from 'antd';
-import { Switch } from '@signozhq/ui/switch';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Copy, Ellipsis, PenLine, Trash2 } from '@signozhq/icons';
 import {
@@ -17,6 +16,13 @@ import { NEW_ALERT_SCHEMA_VERSION } from 'types/api/alerts/alertTypesV2';
 import { AlertDef } from 'types/api/alerts/def';
 
 import { AlertHeaderProps } from '../AlertHeader';
+import AlertStateSegmented, {
+	AlertSegmentedState,
+} from '../MuteAlert/AlertStateSegmented';
+import MutePopover from '../MuteAlert/MutePopover';
+import MuteSchedulerDrawer from '../MuteAlert/MuteSchedulerDrawer';
+import { useActiveMute } from '../MuteAlert/useActiveMute';
+import { useMuteAlertRule } from '../MuteAlert/useMuteAlertRule';
 import RenameModal from './RenameModal';
 
 import './ActionButtons.styles.scss';
@@ -123,19 +129,77 @@ function AlertActionButtons({
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(() => (): void => setAlertRuleState(undefined), []);
 
-	const toggleAlertRule = useCallback(() => {
-		setIsAlertRuleDisabled((prev) => !prev);
-		handleAlertStateToggle();
-	}, [handleAlertStateToggle]);
+	const { activeMute, refetch: refetchActiveMute } = useActiveMute(ruleId);
+
+	const segmentedState: AlertSegmentedState = useMemo(() => {
+		if (isAlertRuleDisabled) {
+			return 'disabled';
+		}
+		if (activeMute) {
+			return 'muted';
+		}
+		return 'active';
+	}, [isAlertRuleDisabled, activeMute]);
+
+	const [isMutePopoverOpen, setIsMutePopoverOpen] = useState<boolean>(false);
+	const [isMuteDrawerOpen, setIsMuteDrawerOpen] = useState<boolean>(false);
+
+	const { mute, isLoading: isMuting } = useMuteAlertRule({
+		ruleId,
+		onSuccess: () => {
+			setIsMutePopoverOpen(false);
+			setIsMuteDrawerOpen(false);
+			refetchActiveMute();
+		},
+	});
+
+	const handleActiveClick = useCallback(() => {
+		// If currently disabled, re-enable. Otherwise (already active) no-op.
+		// When muted, the segmented control disables this button.
+		if (isAlertRuleDisabled) {
+			setIsAlertRuleDisabled(false);
+			handleAlertStateToggle();
+		}
+	}, [isAlertRuleDisabled, handleAlertStateToggle]);
+
+	const handleMuteClick = useCallback(() => {
+		if (segmentedState === 'active') {
+			setIsMutePopoverOpen(true);
+		}
+	}, [segmentedState]);
+
+	const handleDisableClick = useCallback(() => {
+		if (!isAlertRuleDisabled) {
+			setIsAlertRuleDisabled(true);
+			handleAlertStateToggle();
+		}
+	}, [isAlertRuleDisabled, handleAlertStateToggle]);
+
+	const ruleDisplayName = alertRuleName ?? alertDetails.alert;
 
 	return (
 		<>
 			<div className="alert-action-buttons">
-				<Tooltip title={isAlertRuleDisabled ? 'Enable alert' : 'Disable alert'}>
-					{isAlertRuleDisabled !== undefined && (
-						<Switch onChange={toggleAlertRule} value={!isAlertRuleDisabled} />
-					)}
-				</Tooltip>
+				{isAlertRuleDisabled !== undefined && (
+					<div className="alert-state-segmented-wrapper">
+						<AlertStateSegmented
+							state={segmentedState}
+							onActive={handleActiveClick}
+							onMute={handleMuteClick}
+							onDisable={handleDisableClick}
+						/>
+						<MutePopover
+							open={isMutePopoverOpen}
+							onOpenChange={setIsMutePopoverOpen}
+							ruleName={ruleDisplayName}
+							isLoading={isMuting}
+							onSubmit={mute}
+							onOpenCustomWindow={(): void => setIsMuteDrawerOpen(true)}
+							anchor={<span className="alert-state-segmented-anchor" />}
+						/>
+					</div>
+				)}
+
 				<CopyToClipboard textToCopy={window.location.href} />
 
 				<Divider type="vertical" />
@@ -152,6 +216,14 @@ function AlertActionButtons({
 				</Dropdown>
 			</div>
 
+			<MuteSchedulerDrawer
+				open={isMuteDrawerOpen}
+				onClose={(): void => setIsMuteDrawerOpen(false)}
+				ruleName={ruleDisplayName}
+				isLoading={isMuting}
+				onSubmit={mute}
+			/>
+
 			<RenameModal
 				isOpen={isRenameAlertOpen}
 				setIsOpen={setIsRenameAlertOpen}

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

@@ -1,3 +1,13 @@
+.alert-info-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.alert-info__banner {
+	padding: 0 16px;
+}
+
 .alert-info {
 	display: flex;
 	justify-content: space-between;

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

@@ -12,6 +12,9 @@ import AlertActionButtons from './ActionButtons/ActionButtons';
 import AlertLabels from './AlertLabels/AlertLabels';
 import AlertSeverity from './AlertSeverity/AlertSeverity';
 import AlertState from './AlertState/AlertState';
+import DisabledBanner from './MuteAlert/DisabledBanner';
+import MutedBanner from './MuteAlert/MutedBanner';
+import { useActiveMute } from './MuteAlert/useActiveMute';
 
 import './AlertHeader.styles.scss';
 
@@ -43,6 +46,13 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 
 	const isV2Alert = alertDetails.schemaVersion === NEW_ALERT_SCHEMA_VERSION;
 
+	const ruleId = alertDetails?.id || '';
+	const { activeMute } = useActiveMute(ruleId);
+	const effectiveState = alertRuleState ?? state ?? '';
+	const isDisabled = effectiveState === 'disabled';
+	const showMutedBanner = !isDisabled && Boolean(activeMute);
+	const showDisabledBanner = isDisabled;
+
 	const CreateAlertV1Header = (
 		<div className="alert-info__info-wrapper">
 			<div className="top-section">
@@ -67,14 +77,23 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 	);
 
 	return (
-		<div className="alert-info">
-			{isV2Alert ? <CreateAlertV2Header /> : CreateAlertV1Header}
-			<div className="alert-info__action-buttons">
-				<AlertActionButtons
-					alertDetails={alertDetails}
-					ruleId={alertDetails?.id || ''}
-				/>
+		<div className="alert-info-wrapper">
+			<div className="alert-info">
+				{isV2Alert ? <CreateAlertV2Header /> : CreateAlertV1Header}
+				<div className="alert-info__action-buttons">
+					<AlertActionButtons alertDetails={alertDetails} ruleId={ruleId} />
+				</div>
 			</div>
+			{showMutedBanner && activeMute && (
+				<div className="alert-info__banner">
+					<MutedBanner activeMute={activeMute} />
+				</div>
+			)}
+			{showDisabledBanner && (
+				<div className="alert-info__banner">
+					<DisabledBanner rule={alertDetails as RuletypesRuleDTO} />
+				</div>
+			)}
 		</div>
 	);
 }

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/AlertStateSegmented.styles.scss

@@ -0,0 +1,102 @@
+.alert-state-segmented {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	padding: 3px;
+	background: var(--bg-ink-300);
+	border: 1px solid var(--bg-slate-300);
+	border-radius: 999px;
+
+	&__pill {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 5px 12px;
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 1;
+		color: var(--bg-vanilla-400);
+		background: transparent;
+		border: 0;
+		border-radius: 999px;
+		cursor: pointer;
+		transition:
+			background 140ms,
+			color 140ms;
+
+		&:hover:not(:disabled) {
+			color: var(--bg-vanilla-100);
+			background: var(--bg-ink-200);
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--bg-robin-500);
+			outline-offset: 2px;
+		}
+
+		&--active-active {
+			background: var(--bg-robin-500);
+			color: var(--bg-vanilla-100);
+
+			&:hover:not(:disabled) {
+				background: var(--bg-robin-600);
+				color: var(--bg-vanilla-100);
+			}
+		}
+
+		&.alert-state-segmented__pill--active-muted {
+			background: var(--bg-amber-500);
+			color: #1a1407;
+
+			.alert-state-segmented__icon,
+			.alert-state-segmented__label {
+				color: #1a1407;
+			}
+
+			&:hover:not(:disabled) {
+				background: var(--bg-amber-600);
+			}
+		}
+
+		&--active-disabled {
+			background: var(--bg-slate-100);
+			color: var(--bg-vanilla-100);
+
+			&:hover:not(:disabled) {
+				background: var(--bg-slate-200);
+				color: var(--bg-vanilla-100);
+			}
+		}
+	}
+
+	&__dot {
+		width: 6px;
+		height: 6px;
+		background: var(--bg-vanilla-100);
+		border-radius: 999px;
+	}
+
+	&__icon {
+		flex-shrink: 0;
+	}
+}
+
+.lightMode {
+	.alert-state-segmented {
+		background: var(--bg-vanilla-200);
+		border-color: var(--bg-slate-500);
+
+		&__pill {
+			color: var(--bg-ink-300);
+
+			&:hover:not(:disabled) {
+				color: var(--bg-ink-500);
+				background: var(--bg-vanilla-300);
+			}
+		}
+	}
+}

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/AlertStateSegmented.tsx

@@ -0,0 +1,86 @@
+import { forwardRef } from 'react';
+import { BellOff } from '@signozhq/icons';
+import classNames from 'classnames';
+
+import './AlertStateSegmented.styles.scss';
+
+export type AlertSegmentedState = 'active' | 'muted' | 'disabled';
+
+export interface AlertStateSegmentedProps {
+	state: AlertSegmentedState;
+	onActive: () => void;
+	onMute: () => void;
+	onDisable: () => void;
+	disabled?: boolean;
+}
+
+const AlertStateSegmented = forwardRef<
+	HTMLDivElement,
+	AlertStateSegmentedProps
+>(function AlertStateSegmented(props, ref): JSX.Element {
+	const { state, onActive, onMute, onDisable, disabled } = props;
+
+	const isMuted = state === 'muted';
+	const isDisabled = state === 'disabled';
+
+	return (
+		<div
+			className="alert-state-segmented"
+			role="tablist"
+			aria-label="Alert rule state"
+			ref={ref}
+		>
+			<button
+				type="button"
+				role="tab"
+				aria-selected={state === 'active'}
+				aria-label="Active"
+				className={classNames('alert-state-segmented__pill', {
+					'alert-state-segmented__pill--active-active': state === 'active',
+				})}
+				onClick={onActive}
+				// Per spec: when muted, un-muting must happen via Planned Downtimes,
+				// so the Active pill is non-interactive while muted.
+				disabled={disabled || isMuted}
+			>
+				{state === 'active' && (
+					<span className="alert-state-segmented__dot" aria-hidden />
+				)}
+				<span className="alert-state-segmented__label">Active</span>
+			</button>
+			<button
+				type="button"
+				role="tab"
+				aria-selected={state === 'muted'}
+				aria-label="Mute"
+				className={classNames('alert-state-segmented__pill', {
+					'alert-state-segmented__pill--active-muted': state === 'muted',
+				})}
+				onClick={onMute}
+				// Muting a disabled rule wouldn't change observable behavior, so the
+				// Mute pill is non-interactive while disabled.
+				disabled={disabled || isDisabled}
+			>
+				{state === 'muted' && (
+					<BellOff size={12} className="alert-state-segmented__icon" />
+				)}
+				<span className="alert-state-segmented__label">Mute</span>
+			</button>
+			<button
+				type="button"
+				role="tab"
+				aria-selected={state === 'disabled'}
+				aria-label="Disable"
+				className={classNames('alert-state-segmented__pill', {
+					'alert-state-segmented__pill--active-disabled': state === 'disabled',
+				})}
+				onClick={onDisable}
+				disabled={disabled}
+			>
+				<span className="alert-state-segmented__label">Disable</span>
+			</button>
+		</div>
+	);
+});
+
+export default AlertStateSegmented;

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/DisabledBanner.tsx

@@ -0,0 +1,43 @@
+import { CircleOff } from '@signozhq/icons';
+import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+import './StateBanners.styles.scss';
+
+dayjs.extend(relativeTime);
+
+interface DisabledBannerProps {
+	rule: RuletypesRuleDTO;
+}
+
+function DisabledBanner({ rule }: DisabledBannerProps): JSX.Element {
+	const updatedAt = rule.updatedAt ? dayjs(rule.updatedAt) : null;
+
+	return (
+		<div className="state-banner state-banner--disabled" role="status">
+			<div className="state-banner__icon-disc state-banner__icon-disc--disabled">
+				<CircleOff size={18} color="var(--bg-slate-50)" />
+			</div>
+			<div className="state-banner__body">
+				<div className="state-banner__title">
+					<span>Rule disabled</span>
+					<span className="state-banner__pill state-banner__pill--disabled">
+						NOT EVALUATING
+					</span>
+				</div>
+				<div className="state-banner__meta">
+					<span>Evaluation paused — no fires will be recorded.</span>
+					{updatedAt && (
+						<>
+							{' · '}
+							<span>{updatedAt.fromNow()}</span>
+						</>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default DisabledBanner;

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/MutePopover.styles.scss

@@ -0,0 +1,193 @@
+.mute-popover-overlay {
+	.ant-popover-inner {
+		padding: 0;
+		background: var(--bg-ink-400);
+		border: 1px solid var(--bg-slate-300);
+		border-radius: 10px;
+		box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
+	}
+	.ant-popover-inner-content {
+		padding: 0;
+	}
+}
+
+.mute-popover {
+	width: 320px;
+	padding: 14px;
+	font-family: 'Inter', sans-serif;
+	color: var(--bg-vanilla-100);
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 6px;
+	}
+
+	&__title {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--bg-vanilla-100);
+	}
+
+	&__close {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 22px;
+		height: 22px;
+		padding: 0;
+		color: var(--bg-vanilla-400);
+		background: transparent;
+		border: 0;
+		border-radius: 4px;
+		cursor: pointer;
+		transition:
+			color 140ms,
+			background 140ms;
+
+		&:hover {
+			color: var(--bg-vanilla-100);
+			background: var(--bg-ink-300);
+		}
+	}
+
+	&__hint {
+		margin: 0 0 12px 0;
+		font-size: 12px;
+		line-height: 1.45;
+		color: var(--bg-vanilla-400);
+
+		strong {
+			color: var(--bg-vanilla-100);
+			font-weight: 600;
+		}
+	}
+
+	&__grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 6px;
+		margin-bottom: 8px;
+	}
+
+	&__cell {
+		padding: 9px 0;
+		font-size: 12.5px;
+		color: var(--bg-vanilla-100);
+		background: var(--bg-ink-300);
+		border: 1px solid var(--bg-slate-300);
+		border-radius: 6px;
+		cursor: pointer;
+		transition:
+			background 140ms,
+			border-color 140ms,
+			color 140ms;
+
+		&:hover:not(&--selected) {
+			background: rgba(78, 116, 248, 0.08);
+			border-color: var(--bg-robin-500);
+		}
+
+		&--selected {
+			background: var(--bg-robin-500);
+			border-color: var(--bg-robin-500);
+			color: var(--bg-vanilla-100);
+		}
+	}
+
+	&__custom {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		width: 100%;
+		padding: 8px 12px;
+		font-size: 12.5px;
+		color: var(--bg-vanilla-100);
+		background: transparent;
+		border: 1px dashed var(--bg-slate-200);
+		border-radius: 6px;
+		cursor: pointer;
+		transition:
+			border-color 140ms,
+			background 140ms;
+
+		&:hover {
+			border-color: var(--bg-robin-500);
+			background: rgba(78, 116, 248, 0.06);
+		}
+	}
+
+	&__divider {
+		height: 1px;
+		margin: 12px 0;
+		background: var(--bg-slate-300);
+	}
+
+	&__label {
+		display: block;
+		margin-bottom: 6px;
+		font-size: 12px;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__input.ant-input {
+		padding: 8px 10px;
+		font-size: 12.5px;
+		background: var(--bg-ink-300);
+		border: 1px solid var(--bg-slate-300);
+		border-radius: 6px;
+		color: var(--bg-vanilla-100);
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 8px;
+		margin-top: 12px;
+	}
+
+	&__btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 6px 12px;
+		font-size: 12.5px;
+		font-weight: 500;
+		border-radius: 6px;
+		cursor: pointer;
+		transition:
+			background 140ms,
+			color 140ms;
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+
+		&--ghost {
+			color: var(--bg-vanilla-400);
+			background: transparent;
+			border: 1px solid transparent;
+
+			&:hover:not(:disabled) {
+				color: var(--bg-vanilla-100);
+				background: var(--bg-ink-300);
+			}
+		}
+
+		&--primary {
+			color: var(--bg-vanilla-100);
+			background: var(--bg-robin-500);
+			border: 1px solid var(--bg-robin-500);
+
+			&:hover:not(:disabled) {
+				background: var(--bg-robin-600);
+			}
+		}
+	}
+}

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/MutePopover.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useState } from 'react';
+import { BellOff, Calendar, X } from '@signozhq/icons';
+import { Input, Popover } from 'antd';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+import type { MutePayload } from './useMuteAlertRule';
+
+import './MutePopover.styles.scss';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+type QuickDuration = {
+	label: string;
+	value: string;
+	minutes: number | null; // null = forever
+};
+
+export const QUICK_DURATIONS: QuickDuration[] = [
+	{ label: '15 min', value: '15m', minutes: 15 },
+	{ label: '1 hour', value: '1h', minutes: 60 },
+	{ label: '4 hours', value: '4h', minutes: 240 },
+	{ label: '1 day', value: '1d', minutes: 60 * 24 },
+	{ label: '1 week', value: '1w', minutes: 60 * 24 * 7 },
+	{ label: 'Forever', value: 'forever', minutes: null },
+];
+
+const DEFAULT_DURATION_VALUE = '4h';
+
+export const buildMutePayloadFromQuickDuration = (
+	durationValue: string,
+	name: string,
+): MutePayload | null => {
+	const duration = QUICK_DURATIONS.find((d) => d.value === durationValue);
+	if (!duration) {
+		return null;
+	}
+	const now = dayjs();
+	const startTime = now.toISOString();
+	// duration.minutes === null → "Forever"; send endTime as null so the
+	// backend treats the mute as indefinite.
+	const endTime =
+		duration.minutes === null
+			? null
+			: now.add(duration.minutes, 'minute').toISOString();
+	return {
+		name,
+		startTime,
+		endTime,
+		timezone: dayjs.tz.guess?.() || 'UTC',
+	};
+};
+
+const getDefaultMuteName = (ruleName: string | undefined): string =>
+	ruleName ? `Muted: ${ruleName}` : 'Muted alert';
+
+interface MutePopoverProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	anchor: React.ReactNode;
+	ruleName: string | undefined;
+	isLoading: boolean;
+	onSubmit: (payload: MutePayload) => Promise<void> | void;
+	onOpenCustomWindow: () => void;
+}
+
+function MutePopover(props: MutePopoverProps): JSX.Element {
+	const {
+		open,
+		onOpenChange,
+		anchor,
+		ruleName,
+		isLoading,
+		onSubmit,
+		onOpenCustomWindow,
+	} = props;
+
+	const [selected, setSelected] = useState<string>(DEFAULT_DURATION_VALUE);
+	const [name, setName] = useState<string>(getDefaultMuteName(ruleName));
+
+	useEffect(() => {
+		if (open) {
+			setSelected(DEFAULT_DURATION_VALUE);
+			setName(getDefaultMuteName(ruleName));
+		}
+	}, [open, ruleName]);
+
+	// Close on outside click / Escape. We use trigger={[]} on the Popover so
+	// antd doesn't handle these — without this hook, the popover only closes
+	// via Cancel / × / Mute submit.
+	useEffect(() => {
+		if (!open) {
+			return undefined;
+		}
+
+		// Drop focus so the trigger button doesn't show a :focus-visible
+		// outline after the popover closes via Escape / outside click.
+		const closeAndBlur = (): void => {
+			(document.activeElement as HTMLElement | null)?.blur();
+			onOpenChange(false);
+		};
+
+		const handleMouseDown = (e: MouseEvent): void => {
+			const target = e.target as HTMLElement | null;
+			if (target?.closest('.mute-popover-overlay')) {
+				return;
+			}
+			closeAndBlur();
+		};
+		const handleKey = (e: KeyboardEvent): void => {
+			if (e.key === 'Escape') {
+				closeAndBlur();
+			}
+		};
+
+		// Defer attaching listeners until after the click that opened the
+		// popover has finished bubbling — otherwise it counts as an outside
+		// click and we close immediately.
+		const timer = window.setTimeout(() => {
+			document.addEventListener('mousedown', handleMouseDown);
+			document.addEventListener('keydown', handleKey);
+		}, 0);
+
+		return (): void => {
+			window.clearTimeout(timer);
+			document.removeEventListener('mousedown', handleMouseDown);
+			document.removeEventListener('keydown', handleKey);
+		};
+	}, [open, onOpenChange]);
+
+	const selectedDuration = QUICK_DURATIONS.find((d) => d.value === selected);
+	const primaryLabel =
+		selectedDuration?.minutes === null
+			? 'Mute indefinitely'
+			: `Mute for ${selectedDuration?.label.toLowerCase() ?? '4 hours'}`;
+
+	const handleSubmit = async (): Promise<void> => {
+		const payload = buildMutePayloadFromQuickDuration(selected, name.trim());
+		if (!payload || !payload.name) {
+			return;
+		}
+		await onSubmit(payload);
+	};
+
+	const content = (
+		<div
+			className="mute-popover"
+			onKeyDown={(e): void => {
+				if (e.key === 'Escape') {
+					onOpenChange(false);
+				}
+			}}
+		>
+			<div className="mute-popover__header">
+				<div className="mute-popover__title">
+					<BellOff size={14} />
+					<span>Mute notifications</span>
+				</div>
+				<button
+					type="button"
+					aria-label="Close"
+					className="mute-popover__close"
+					onClick={(): void => onOpenChange(false)}
+				>
+					<X size={14} />
+				</button>
+			</div>
+
+			<p className="mute-popover__hint">
+				Rule keeps evaluating in the background. You&apos;ll still see fires in{' '}
+				<strong>History</strong> — just no pages, Slack, or email.
+			</p>
+
+			<div className="mute-popover__grid">
+				{QUICK_DURATIONS.map((d) => (
+					<button
+						type="button"
+						key={d.value}
+						className={classNames('mute-popover__cell', {
+							'mute-popover__cell--selected': selected === d.value,
+						})}
+						onClick={(): void => setSelected(d.value)}
+					>
+						{d.label}
+					</button>
+				))}
+			</div>
+
+			<button
+				type="button"
+				className="mute-popover__custom"
+				onClick={(): void => {
+					onOpenChange(false);
+					onOpenCustomWindow();
+				}}
+			>
+				<Calendar size={14} />
+				Custom window…
+			</button>
+
+			<div className="mute-popover__divider" />
+
+			<label className="mute-popover__label" htmlFor="mute-popover-name">
+				Name
+			</label>
+			<Input
+				id="mute-popover-name"
+				className="mute-popover__input"
+				placeholder="e.g. Deployment window"
+				value={name}
+				onChange={(e): void => setName(e.target.value)}
+				maxLength={120}
+			/>
+
+			<div className="mute-popover__footer">
+				<button
+					type="button"
+					className="mute-popover__btn mute-popover__btn--ghost"
+					onClick={(): void => onOpenChange(false)}
+					disabled={isLoading}
+				>
+					Cancel
+				</button>
+				<button
+					type="button"
+					className="mute-popover__btn mute-popover__btn--primary"
+					onClick={handleSubmit}
+					disabled={isLoading || !name.trim()}
+				>
+					<BellOff size={12} />
+					{primaryLabel}
+				</button>
+			</div>
+		</div>
+	);
+
+	return (
+		<Popover
+			open={open}
+			onOpenChange={onOpenChange}
+			trigger={[]}
+			placement="bottomRight"
+			arrow={false}
+			destroyTooltipOnHide
+			overlayClassName="mute-popover-overlay"
+			content={content}
+		>
+			{anchor}
+		</Popover>
+	);
+}
+
+export default MutePopover;

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/MuteSchedulerDrawer.styles.scss

@@ -0,0 +1,115 @@
+.mute-scheduler-drawer {
+	.ant-drawer-body {
+		padding: 24px 28px;
+		background: var(--bg-ink-500);
+	}
+	.ant-drawer-header {
+		display: none;
+	}
+
+	&__header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 12px;
+	}
+
+	&__title {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 16px;
+		font-weight: 600;
+		color: var(--bg-vanilla-100);
+	}
+
+	&__close {
+		position: absolute;
+		top: 18px;
+		right: 24px;
+		width: 28px;
+		height: 28px;
+		font-size: 18px;
+		line-height: 1;
+		color: var(--bg-vanilla-400);
+		background: transparent;
+		border: 0;
+		border-radius: 4px;
+		cursor: pointer;
+		transition:
+			background 140ms,
+			color 140ms;
+
+		&:hover {
+			color: var(--bg-vanilla-100);
+			background: var(--bg-ink-300);
+		}
+	}
+
+	&__subtitle {
+		margin: 8px 0 14px 0;
+		font-size: 12.5px;
+		line-height: 1.55;
+		color: var(--bg-vanilla-400);
+
+		strong {
+			color: var(--bg-vanilla-100);
+			font-weight: 600;
+		}
+	}
+
+	&__divider {
+		height: 1px;
+		margin: 0 0 16px 0;
+		background: var(--bg-slate-300);
+	}
+
+	&__form {
+		.ant-form-item-label > label {
+			font-size: 12px;
+			color: var(--bg-vanilla-400);
+		}
+	}
+
+	&__row {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 10px;
+	}
+
+	&__date {
+		width: 100%;
+	}
+
+	&__callout {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		margin: 4px 0 18px 0;
+		padding: 10px;
+		background: rgba(35, 196, 248, 0.06);
+		border: 1px solid rgba(35, 196, 248, 0.2);
+		border-radius: 6px;
+
+		p {
+			margin: 0;
+			font-size: 12px;
+			line-height: 1.5;
+			color: var(--bg-vanilla-400);
+
+			strong {
+				color: var(--bg-vanilla-100);
+				font-weight: 600;
+			}
+		}
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 8px;
+		padding-top: 16px;
+		margin-top: 6px;
+		border-top: 1px solid var(--bg-slate-300);
+	}
+}

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/MuteSchedulerDrawer.tsx

@@ -0,0 +1,247 @@
+import { useEffect, useMemo, useState } from 'react';
+import { BellOff, Check, Info } from '@signozhq/icons';
+import { Button, DatePicker, Drawer, Form, Input, Select } from 'antd';
+import type { DefaultOptionType } from 'antd/es/select';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import {
+	recurrenceOptions,
+	recurrenceOptionWithSubmenu,
+	recurrenceWeeklyOptions,
+} from 'container/PlannedDowntime/PlannedDowntimeutils';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { ALL_TIME_ZONES } from 'utils/timeZoneUtil';
+
+import type { MutePayload } from './useMuteAlertRule';
+
+import './MuteSchedulerDrawer.styles.scss';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const DATE_FORMAT = DATE_TIME_FORMATS.ORDINAL_DATETIME;
+
+const TZ_OPTIONS: DefaultOptionType[] = ALL_TIME_ZONES.map((tz) => ({
+	label: tz,
+	value: tz,
+	key: tz,
+}));
+
+const DURATION_UNIT_OPTIONS = [
+	{ label: 'Mins', value: 'm' },
+	{ label: 'Hours', value: 'h' },
+];
+
+type MuteSchedulerFormData = {
+	name: string;
+	startTime: dayjs.Dayjs | null;
+	endTime: dayjs.Dayjs | null;
+	repeatType: string;
+	repeatOn?: string[];
+	duration?: number;
+	timezone: string;
+};
+
+interface MuteSchedulerDrawerProps {
+	open: boolean;
+	onClose: () => void;
+	ruleName: string | undefined;
+	isLoading: boolean;
+	onSubmit: (payload: MutePayload) => Promise<void> | void;
+}
+
+function MuteSchedulerDrawer(props: MuteSchedulerDrawerProps): JSX.Element {
+	const { open, onClose, ruleName, isLoading, onSubmit } = props;
+	const [form] = Form.useForm<MuteSchedulerFormData>();
+	const [recurrenceType, setRecurrenceType] = useState<string>(
+		recurrenceOptions.doesNotRepeat.value,
+	);
+	const [durationUnit, setDurationUnit] = useState<string>('m');
+
+	const defaultName = useMemo(
+		() => (ruleName ? `Muted: ${ruleName}` : 'Muted alert'),
+		[ruleName],
+	);
+
+	useEffect(() => {
+		if (open) {
+			const guess = (dayjs as any).tz?.guess?.() || 'UTC';
+			form.setFieldsValue({
+				name: defaultName,
+				startTime: dayjs(),
+				endTime: dayjs().add(1, 'hour'),
+				repeatType: recurrenceOptions.doesNotRepeat.value,
+				timezone: guess,
+			});
+			setRecurrenceType(recurrenceOptions.doesNotRepeat.value);
+			setDurationUnit('m');
+		}
+	}, [open, defaultName, form]);
+
+	const handleFinish = async (values: MuteSchedulerFormData): Promise<void> => {
+		const isRecurring =
+			values.repeatType &&
+			values.repeatType !== recurrenceOptions.doesNotRepeat.value;
+
+		const payload: MutePayload = {
+			name: values.name.trim(),
+			startTime: values.startTime?.format() || dayjs().format(),
+			endTime: values.endTime ? values.endTime.format() : null,
+			timezone: values.timezone,
+			recurrence: isRecurring
+				? {
+						duration: values.duration ? `${values.duration}${durationUnit}` : '',
+						repeatOn: values.repeatOn as any,
+						repeatType: values.repeatType as any,
+						startTime: values.startTime?.format() || dayjs().format(),
+						endTime: values.endTime ? values.endTime.format() : undefined,
+					}
+				: undefined,
+		};
+
+		await onSubmit(payload);
+	};
+
+	const requiredRule = [{ required: true }];
+
+	return (
+		<Drawer
+			width={460}
+			open={open}
+			onClose={onClose}
+			placement="right"
+			closable={false}
+			destroyOnClose
+			className="mute-scheduler-drawer"
+			rootClassName="mute-scheduler-drawer-root"
+		>
+			<div className="mute-scheduler-drawer__header">
+				<div className="mute-scheduler-drawer__title">
+					<BellOff size={18} color="var(--bg-amber-500)" />
+					<span>Mute this alert rule</span>
+				</div>
+				<button
+					type="button"
+					className="mute-scheduler-drawer__close"
+					aria-label="Close"
+					onClick={onClose}
+				>
+					×
+				</button>
+			</div>
+			<p className="mute-scheduler-drawer__subtitle">
+				Creates a planned silence for <strong>{ruleName || 'this rule'}</strong> —
+				rule continues to evaluate; notifications are suppressed for the window
+				below.
+			</p>
+			<div className="mute-scheduler-drawer__divider" />
+
+			<Form<MuteSchedulerFormData>
+				form={form}
+				layout="vertical"
+				onFinish={handleFinish}
+				onValuesChange={(_, all): void => {
+					if (all.repeatType !== recurrenceType) {
+						setRecurrenceType(all.repeatType);
+					}
+				}}
+				className="mute-scheduler-drawer__form"
+				autoComplete="off"
+			>
+				<Form.Item label="Name" name="name" rules={requiredRule}>
+					<Input placeholder="e.g. Deployment window" maxLength={120} />
+				</Form.Item>
+
+				<Form.Item label="Starts" name="startTime" rules={requiredRule}>
+					<DatePicker
+						className="mute-scheduler-drawer__date"
+						showTime
+						showNow={false}
+						format={(date): string => date.format(DATE_FORMAT)}
+					/>
+				</Form.Item>
+
+				<Form.Item
+					label="Ends"
+					name="endTime"
+					required={recurrenceType === recurrenceOptions.doesNotRepeat.value}
+					rules={[
+						{
+							required: recurrenceType === recurrenceOptions.doesNotRepeat.value,
+						},
+					]}
+				>
+					<DatePicker
+						className="mute-scheduler-drawer__date"
+						showTime
+						showNow={false}
+						format={(date): string => date.format(DATE_FORMAT)}
+					/>
+				</Form.Item>
+
+				<div className="mute-scheduler-drawer__row">
+					<Form.Item label="Repeats every" name="repeatType" rules={requiredRule}>
+						<Select placeholder="Select" options={recurrenceOptionWithSubmenu} />
+					</Form.Item>
+					<Form.Item label="Timezone" name="timezone" rules={requiredRule}>
+						<Select placeholder="Select timezone" showSearch options={TZ_OPTIONS} />
+					</Form.Item>
+				</div>
+
+				{recurrenceType === recurrenceOptions.weekly.value && (
+					<Form.Item label="Weekly occurrence" name="repeatOn" rules={requiredRule}>
+						<Select
+							placeholder="Select days"
+							mode="multiple"
+							options={Object.values(recurrenceWeeklyOptions)}
+						/>
+					</Form.Item>
+				)}
+
+				{recurrenceType &&
+					recurrenceType !== recurrenceOptions.doesNotRepeat.value && (
+						<Form.Item label="Duration" name="duration" rules={requiredRule}>
+							<Input
+								type="number"
+								min={1}
+								placeholder="Enter duration"
+								addonAfter={
+									<Select
+										value={durationUnit}
+										onChange={(v): void => setDurationUnit(v)}
+										options={DURATION_UNIT_OPTIONS}
+									/>
+								}
+								onWheel={(e): void => e.currentTarget.blur()}
+							/>
+						</Form.Item>
+					)}
+
+				<div className="mute-scheduler-drawer__callout">
+					<Info size={14} color="var(--bg-aqua-500)" />
+					<p>
+						The rule will <strong>keep evaluating</strong> and firing alerts to the
+						History tab. Only notifications (Slack, PagerDuty, email) are silenced.
+					</p>
+				</div>
+
+				<div className="mute-scheduler-drawer__footer">
+					<Button type="text" onClick={onClose} disabled={isLoading}>
+						Cancel
+					</Button>
+					<Button
+						type="primary"
+						htmlType="submit"
+						loading={isLoading}
+						icon={<Check size={14} />}
+					>
+						Mute alert
+					</Button>
+				</div>
+			</Form>
+		</Drawer>
+	);
+}
+
+export default MuteSchedulerDrawer;

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/MutedBanner.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { BellOff } from '@signozhq/icons';
+import ROUTES from 'constants/routes';
+import dayjs from 'dayjs';
+
+import type { ActiveMute } from './useActiveMute';
+
+import './StateBanners.styles.scss';
+
+const PLANNED_DOWNTIMES_URL = `${ROUTES.LIST_ALL_ALERT}?tab=Configuration&subTab=planned-downtime`;
+
+const formatRemaining = (endTime: string | undefined): string | null => {
+	if (!endTime) {
+		return null;
+	}
+	const end = dayjs(endTime);
+	const now = dayjs();
+	const diffMs = end.diff(now);
+	if (diffMs <= 0) {
+		return null;
+	}
+
+	const totalMinutes = Math.floor(diffMs / 60000);
+	const days = Math.floor(totalMinutes / (60 * 24));
+	const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
+	const minutes = totalMinutes % 60;
+
+	if (days > 0) {
+		return `${days}d ${hours}h LEFT`;
+	}
+	if (hours > 0) {
+		return `${hours}h ${minutes}m LEFT`;
+	}
+	return `${minutes}m LEFT`;
+};
+
+const isIndefinite = (endTime: string | undefined): boolean => {
+	if (!endTime) {
+		return true;
+	}
+	// If end is more than 5 years away, treat as indefinite (matches "Forever" sentinel).
+	return dayjs(endTime).diff(dayjs(), 'year') >= 5;
+};
+
+interface MutedBannerProps {
+	activeMute: ActiveMute;
+}
+
+function MutedBanner({ activeMute }: MutedBannerProps): JSX.Element {
+	const endTime = activeMute.effectiveEndTime ?? undefined;
+	const indefinite = isIndefinite(endTime);
+	const [remaining, setRemaining] = useState<string | null>(
+		indefinite ? null : formatRemaining(endTime),
+	);
+
+	useEffect(() => {
+		if (indefinite) {
+			return undefined;
+		}
+		const interval = setInterval(() => {
+			setRemaining(formatRemaining(endTime));
+		}, 60_000);
+		return (): void => clearInterval(interval);
+	}, [endTime, indefinite]);
+
+	const titleText = useMemo(() => {
+		if (indefinite) {
+			return 'Notifications muted indefinitely';
+		}
+		if (!endTime) {
+			return 'Notifications muted';
+		}
+		return `Notifications muted until ${dayjs(endTime).format('MMM D, h:mm A')}`;
+	}, [endTime, indefinite]);
+
+	const reason = activeMute.description || activeMute.name;
+
+	return (
+		<div className="state-banner state-banner--muted" role="status">
+			<div className="state-banner__icon-disc state-banner__icon-disc--muted">
+				<BellOff size={18} color="var(--bg-amber-500)" />
+			</div>
+			<div className="state-banner__body">
+				<div className="state-banner__title">
+					<span>{titleText}</span>
+					{!indefinite && remaining && (
+						<span className="state-banner__pill state-banner__pill--muted">
+							{remaining}
+						</span>
+					)}
+				</div>
+				<div className="state-banner__meta">
+					<span>
+						Rule is still evaluating — fires will appear in <strong>History</strong>.
+					</span>
+					{reason && (
+						<>
+							{' · '}
+							<span>
+								Name: <strong>{reason}</strong>
+							</span>
+						</>
+					)}
+					{' · '}
+					<Link to={PLANNED_DOWNTIMES_URL} className="state-banner__link">
+						Manage in Planned Downtimes
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default MutedBanner;

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/StateBanners.styles.scss

@@ -0,0 +1,98 @@
+.state-banner {
+	display: flex;
+	gap: 14px;
+	align-items: center;
+	margin-top: 16px;
+	padding: 12px 16px;
+	border-radius: 8px;
+	font-family: 'Inter', sans-serif;
+
+	&--muted {
+		background: linear-gradient(
+			90deg,
+			rgba(255, 205, 86, 0.1),
+			rgba(255, 205, 86, 0.04)
+		);
+		border: 1px solid rgba(255, 205, 86, 0.25);
+	}
+
+	&--disabled {
+		background: rgba(98, 104, 124, 0.06);
+		border: 1px solid var(--bg-slate-200);
+	}
+
+	&__icon-disc {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		border-radius: 999px;
+		flex-shrink: 0;
+
+		&--muted {
+			background: rgba(255, 205, 86, 0.15);
+		}
+
+		&--disabled {
+			background: rgba(98, 104, 124, 0.15);
+		}
+	}
+
+	&__body {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__title {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13.5px;
+		font-weight: 600;
+		color: var(--bg-vanilla-100);
+		font-variant-numeric: tabular-nums;
+	}
+
+	&__pill {
+		display: inline-flex;
+		align-items: center;
+		padding: 2px 7px;
+		font-size: 11px;
+		font-weight: 600;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		border-radius: 4px;
+
+		&--muted {
+			color: var(--bg-amber-500);
+			background: rgba(255, 205, 86, 0.12);
+		}
+
+		&--disabled {
+			color: var(--bg-slate-50);
+			background: rgba(98, 104, 124, 0.18);
+		}
+	}
+
+	&__meta {
+		margin-top: 4px;
+		font-size: 12px;
+		line-height: 1.5;
+		color: var(--bg-vanilla-400);
+
+		strong {
+			color: var(--bg-vanilla-100);
+			font-weight: 600;
+		}
+	}
+
+	&__link {
+		color: var(--bg-robin-500);
+
+		&:hover {
+			color: var(--bg-robin-400);
+			text-decoration: underline;
+		}
+	}
+}

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/useActiveMute.ts

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { useGetRuleByID } from 'api/generated/services/rules';
+import type { RuletypesActiveMuteInfoDTO } from 'api/generated/services/sigNoz.schemas';
+
+export type ActiveMute = RuletypesActiveMuteInfoDTO;
+
+type UseActiveMuteResult = {
+	activeMute: ActiveMute | undefined;
+	isLoading: boolean;
+	isFetching: boolean;
+	refetch: () => void;
+};
+
+export const useActiveMute = (
+	ruleId: string | undefined,
+): UseActiveMuteResult => {
+	const { data, isLoading, isFetching, refetch } = useGetRuleByID(
+		{ id: ruleId || '' },
+		{
+			query: {
+				enabled: Boolean(ruleId),
+				refetchOnWindowFocus: false,
+			},
+		},
+	);
+
+	const activeMute = useMemo(() => data?.data?.activeMute ?? undefined, [data]);
+
+	return {
+		activeMute,
+		isLoading,
+		isFetching,
+		refetch: () => {
+			void refetch();
+		},
+	};
+};

frontend/src/pages/AlertDetails/AlertHeader/MuteAlert/useMuteAlertRule.ts

@@ -0,0 +1,92 @@
+import { useCallback } from 'react';
+import { useMutation, useQueryClient } from 'react-query';
+import {
+	createDowntimeSchedule,
+	getListDowntimeSchedulesQueryKey,
+} from 'api/generated/services/downtimeschedules';
+import {
+	getGetRuleByIDQueryKey,
+	getListRulesQueryKey,
+} from 'api/generated/services/rules';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import type {
+	AlertmanagertypesPostablePlannedMaintenanceDTO,
+	AlertmanagertypesRecurrenceDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { useNotifications } from 'hooks/useNotifications';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+export type MutePayload = {
+	name: string;
+	startTime: string;
+	endTime?: string | null;
+	timezone: string;
+	recurrence?: AlertmanagertypesRecurrenceDTO;
+};
+
+type UseMuteAlertRuleArgs = {
+	ruleId: string;
+	onSuccess?: () => void;
+};
+
+type UseMuteAlertRuleResult = {
+	mute: (payload: MutePayload) => Promise<void>;
+	isLoading: boolean;
+};
+
+export const useMuteAlertRule = ({
+	ruleId,
+	onSuccess,
+}: UseMuteAlertRuleArgs): UseMuteAlertRuleResult => {
+	const { notifications } = useNotifications();
+	const { showErrorModal } = useErrorModal();
+	const queryClient = useQueryClient();
+
+	const { mutateAsync, isLoading } = useMutation(
+		['createMuteDowntime', ruleId],
+		(payload: AlertmanagertypesPostablePlannedMaintenanceDTO) =>
+			createDowntimeSchedule(payload),
+		{
+			onSuccess: () => {
+				void queryClient.invalidateQueries(getListDowntimeSchedulesQueryKey());
+				void queryClient.invalidateQueries(getGetRuleByIDQueryKey({ id: ruleId }));
+				void queryClient.invalidateQueries(getListRulesQueryKey());
+				notifications.success({ message: 'Alert muted' });
+				onSuccess?.();
+			},
+			onError: (error) => {
+				showErrorModal(
+					convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,
+				);
+			},
+		},
+	);
+
+	const mute = useCallback(
+		async (payload: MutePayload): Promise<void> => {
+			if (!ruleId) {
+				return;
+			}
+			const body: AlertmanagertypesPostablePlannedMaintenanceDTO = {
+				name: payload.name,
+				alertIds: [ruleId],
+				schedule: {
+					startTime: payload.startTime,
+					// null = no end ("Forever"). The generated type narrows endTime to
+					// string, but the API accepts null to mean indefinite.
+					endTime:
+						payload.endTime === null ? (null as unknown as string) : payload.endTime,
+					timezone: payload.timezone,
+					recurrence: payload.recurrence,
+				},
+			};
+			await mutateAsync(body);
+		},
+		[mutateAsync, ruleId],
+	);
+
+	return { mute, isLoading };
+};

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

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

frontend/src/types/generated/webSettings.ts

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

frontend/src/typings/window.ts

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

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

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

frontend/src/utils/bootData.ts

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

frontend/vite.config.ts

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

pkg/alertmanager/alertmanagerserver/maintenance_muter.go

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

pkg/alertmanager/alertmanagerserver/server_e2e_test.go

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

pkg/alertmanager/alertmanagerstore/sqlalertmanagerstore/maintenance.go

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

pkg/alertmanager/nfmanager/rulebasednotification/provider.go

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

pkg/alertmanager/nfmanager/rulebasednotification/provider_test.go

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

pkg/config/envprovider/provider_test.go

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

pkg/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)
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

pkg/ruler/signozruler/handler.go

@@ -29,15 +29,23 @@ func (handler *handler) ListRules(rw http.ResponseWriter, req *http.Request) {
 	ctx, cancel := context.WithTimeout(req.Context(), 30*time.Second)
 	defer cancel()
 
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
 	rules, err := handler.ruler.ListRuleStates(ctx)
 	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
+	schedules, _ := handler.ruler.MaintenanceStore().ListPlannedMaintenance(ctx, claims.OrgID)
+
 	view := make([]*ruletypes.Rule, 0, len(rules.Rules))
 	for _, rule := range rules.Rules {
-		view = append(view, ruletypes.NewRule(rule))
+		view = append(view, ruletypes.NewRule(rule, schedules))
 	}
 
 	render.Success(rw, http.StatusOK, view)
@@ -47,6 +55,12 @@ func (handler *handler) GetRuleByID(rw http.ResponseWriter, req *http.Request) {
 	ctx, cancel := context.WithTimeout(req.Context(), 30*time.Second)
 	defer cancel()
 
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
 	id, err := valuer.NewUUID(mux.Vars(req)["id"])
 	if err != nil {
 		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is not a valid uuid-v7"))
@@ -59,7 +73,9 @@ func (handler *handler) GetRuleByID(rw http.ResponseWriter, req *http.Request) {
 		return
 	}
 
-	render.Success(rw, http.StatusOK, ruletypes.NewRule(rule))
+	schedules, _ := handler.ruler.MaintenanceStore().ListPlannedMaintenance(ctx, claims.OrgID)
+
+	render.Success(rw, http.StatusOK, ruletypes.NewRule(rule, schedules))
 }
 
 func (handler *handler) CreateRule(rw http.ResponseWriter, req *http.Request) {
@@ -79,7 +95,7 @@ func (handler *handler) CreateRule(rw http.ResponseWriter, req *http.Request) {
 		return
 	}
 
-	render.Success(rw, http.StatusCreated, ruletypes.NewRule(rule))
+	render.Success(rw, http.StatusCreated, ruletypes.NewRule(rule, nil))
 }
 
 func (handler *handler) UpdateRuleByID(rw http.ResponseWriter, req *http.Request) {
@@ -150,7 +166,7 @@ func (handler *handler) PatchRuleByID(rw http.ResponseWriter, req *http.Request)
 		return
 	}
 
-	render.Success(rw, http.StatusOK, ruletypes.NewRule(rule))
+	render.Success(rw, http.StatusOK, ruletypes.NewRule(rule, nil))
 }
 
 func (handler *handler) TestRule(rw http.ResponseWriter, req *http.Request) {

pkg/signoz/provider.go

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

pkg/sqlmigration/087_add_scope_to_planned_maintenance.go

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

pkg/types/alertmanagertypes/expression.go

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

pkg/types/alertmanagertypes/expression_test.go

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

pkg/types/alertmanagertypes/maintenance.go

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

pkg/types/alertmanagertypes/maintenance_test.go

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

pkg/types/alertmanagertypes/schedule.go

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

pkg/types/ruletypes/api_params.go

@@ -642,23 +642,114 @@ func (g *GettableRule) MarshalJSON() ([]byte, error) {
 	}
 }
 
+// ActiveMuteInfo holds the currently active mute window for an alert rule.
+type ActiveMuteInfo struct {
+	ID                 string     `json:"id"`
+	Name               string     `json:"name"`
+	Description        string     `json:"description,omitempty"`
+	EffectiveStartTime *time.Time `json:"effectiveStartTime,omitempty"`
+	EffectiveEndTime   *time.Time `json:"effectiveEndTime,omitempty"`
+}
+
+// findActiveMuteForRule returns the active mute window for a rule, if any.
+// Scope expressions are intentionally skipped here because we operate at the
+// rule level (no alert labels available), matching the frontend's behaviour.
+func findActiveMuteForRule(ruleID string, schedules []*alertmanagertypes.PlannedMaintenance) *ActiveMuteInfo {
+	if len(schedules) == 0 || ruleID == "" {
+		return nil
+	}
+	now := time.Now()
+
+	type candidate struct {
+		m   *alertmanagertypes.PlannedMaintenance
+		end *time.Time
+	}
+
+	var candidates []candidate
+	for _, m := range schedules {
+		if m.Schedule == nil {
+			continue
+		}
+		// Empty RuleIDs means the window applies to all rules.
+		if len(m.RuleIDs) > 0 {
+			found := false
+			for _, id := range m.RuleIDs {
+				if id == ruleID {
+					found = true
+					break
+				}
+			}
+			if !found {
+				continue
+			}
+		}
+		if !m.IsActive(now) {
+			continue
+		}
+		var end *time.Time
+		if m.Schedule.Recurrence != nil {
+			end = m.Schedule.Recurrence.EndTime
+		} else if !m.Schedule.EndTime.IsZero() {
+			t := m.Schedule.EndTime
+			end = &t
+		}
+		candidates = append(candidates, candidate{m: m, end: end})
+	}
+
+	if len(candidates) == 0 {
+		return nil
+	}
+
+	// Sort by soonest end so the most specific window wins; nil (forever) sorts last.
+	slices.SortFunc(candidates, func(a, b candidate) int {
+		if a.end == nil && b.end == nil {
+			return 0
+		}
+		if a.end == nil {
+			return 1
+		}
+		if b.end == nil {
+			return -1
+		}
+		return a.end.Compare(*b.end)
+	})
+
+	w := candidates[0]
+	info := &ActiveMuteInfo{
+		ID:          w.m.ID.StringValue(),
+		Name:        w.m.Name,
+		Description: w.m.Description,
+	}
+	if w.m.Schedule.Recurrence != nil {
+		t := w.m.Schedule.Recurrence.StartTime
+		info.EffectiveStartTime = &t
+	} else if !w.m.Schedule.StartTime.IsZero() {
+		t := w.m.Schedule.StartTime
+		info.EffectiveStartTime = &t
+	}
+	info.EffectiveEndTime = w.end
+	return info
+}
+
 // Rule is the v2 API read model for an alerting rule. It aligns audit fields
 // with the canonical types.TimeAuditable / types.UserAuditable shape used by
 // PlannedMaintenance and other entities. v1 handlers keep serializing
 // GettableRule directly for back-compat with existing SDK / Terraform clients.
 type Rule struct {
-	Id    string     `json:"id" required:"true"`
-	State AlertState `json:"state" required:"true"`
+	Id         string          `json:"id" required:"true"`
+	State      AlertState      `json:"state" required:"true"`
+	ActiveMute *ActiveMuteInfo `json:"activeMute,omitempty"`
 	PostableRule
 	types.TimeAuditable
 	types.UserAuditable
 }
 
-func NewRule(g *GettableRule) *Rule {
+func NewRule(g *GettableRule, schedules []*alertmanagertypes.PlannedMaintenance) *Rule {
 	r := &Rule{
 		Id:           g.Id,
 		State:        g.State,
 		PostableRule: g.PostableRule,
+		ActiveMute:   findActiveMuteForRule(g.Id, schedules),
 	}
 	r.CreatedAt = g.CreatedAt
 	r.UpdatedAt = g.UpdatedAt

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 (

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 {

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,
 			},
 		},

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")
 	}

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{

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