refactor(monaco): render every editor through one shared theme

docs/api/openapi.yml

@@ -11389,7 +11389,8 @@ components:
         evaluation:
           allOf:
           - $ref: '#/components/schemas/RuletypesEvaluationEnvelope'
-          description: The evaluation window, as a kind and spec.
+          description: The evaluation window, as a kind and spec. Required when schemaVersion
+            is v2alpha1; derived from evalWindow and frequency for v1.
         frequency:
           description: How often the rule is evaluated, as a Go duration such as 1m.
             Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set
@@ -11405,7 +11406,8 @@ components:
         notificationSettings:
           allOf:
           - $ref: '#/components/schemas/RuletypesNotificationSettings'
-          description: Grouping, re-notification and routing behaviour.
+          description: Grouping, re-notification and routing behaviour. Required when
+            schemaVersion is v2alpha1; derived from the v1 fields otherwise.
         preferredChannels:
           description: The displayName of each notification channel to notify, for
             schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries
@@ -11418,30 +11420,26 @@ components:
           - $ref: '#/components/schemas/RuletypesRuleType'
           description: 'The evaluation strategy: threshold_rule compares against thresholds,
             promql_rule evaluates a PromQL expression, anomaly_rule scores deviation
-            from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql
-            queries and is forced to promql_rule for promql queries.'
+            from seasonal history. Defaults to threshold_rule for builder queries
+            and is forced to promql_rule for promql queries.'
         schemaVersion:
-          description: The rule payload schema.
-          enum:
-          - v2alpha1
+          description: 'The rule payload schema: v1 (the default when omitted) uses
+            the flat condition fields, v2alpha1 uses condition.thresholds, evaluation
+            and notificationSettings.'
           type: string
         source:
-          deprecated: true
           description: The URL of the page the rule was created from. Informational;
             it is not used for evaluation.
           type: string
         version:
-          deprecated: true
-          description: The query payload version. Nothing reads it.
+          description: The query payload version. Only v5 is accepted and it is filled
+            in when omitted.
           type: string
       required:
       - alert
       - alertType
       - ruleType
       - condition
-      - evaluation
-      - schemaVersion
-      - notificationSettings
       type: object
     RuletypesPostableRuleView:
       properties:
@@ -11530,7 +11528,8 @@ components:
         evaluation:
           allOf:
           - $ref: '#/components/schemas/RuletypesEvaluationEnvelope'
-          description: The evaluation window, as a kind and spec.
+          description: The evaluation window, as a kind and spec. Required when schemaVersion
+            is v2alpha1; derived from evalWindow and frequency for v1.
         frequency:
           description: How often the rule is evaluated, as a Go duration such as 1m.
             Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set
@@ -11549,7 +11548,8 @@ components:
         notificationSettings:
           allOf:
           - $ref: '#/components/schemas/RuletypesNotificationSettings'
-          description: Grouping, re-notification and routing behaviour.
+          description: Grouping, re-notification and routing behaviour. Required when
+            schemaVersion is v2alpha1; derived from the v1 fields otherwise.
         preferredChannels:
           description: The displayName of each notification channel to notify, for
             schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries
@@ -11562,15 +11562,14 @@ components:
           - $ref: '#/components/schemas/RuletypesRuleType'
           description: 'The evaluation strategy: threshold_rule compares against thresholds,
             promql_rule evaluates a PromQL expression, anomaly_rule scores deviation
-            from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql
-            queries and is forced to promql_rule for promql queries.'
+            from seasonal history. Defaults to threshold_rule for builder queries
+            and is forced to promql_rule for promql queries.'
         schemaVersion:
-          description: The rule payload schema.
-          enum:
-          - v2alpha1
+          description: 'The rule payload schema: v1 (the default when omitted) uses
+            the flat condition fields, v2alpha1 uses condition.thresholds, evaluation
+            and notificationSettings.'
           type: string
         source:
-          deprecated: true
           description: The URL of the page the rule was created from. Informational;
             it is not used for evaluation.
           type: string
@@ -11585,8 +11584,8 @@ components:
         updatedBy:
           type: string
         version:
-          deprecated: true
-          description: The query payload version. Nothing reads it.
+          description: The query payload version. Only v5 is accepted and it is filled
+            in when omitted.
           type: string
       required:
       - id
@@ -11595,9 +11594,6 @@ components:
       - alertType
       - ruleType
       - condition
-      - evaluation
-      - schemaVersion
-      - notificationSettings
       type: object
     RuletypesRuleCondition:
       properties:
@@ -11647,7 +11643,8 @@ components:
             against, hourly, daily or weekly.'
         selectedQueryName:
           description: The name of the query whose result is evaluated, such as A
-            or F1. Must match a query in compositeQuery.
+            or F1. Must match a query in compositeQuery. When omitted, F1 is used
+            if present, otherwise the enabled query with the highest name.
           type: string
         target:
           description: 'schemaVersion v1 only: the value compared against, in targetUnit.
@@ -11663,11 +11660,10 @@ components:
         thresholds:
           allOf:
           - $ref: '#/components/schemas/RuletypesRuleThresholdData'
-          description: The thresholds to evaluate, as a kind and spec.
+          description: The thresholds to evaluate, as a kind and spec. Required when
+            schemaVersion is v2alpha1; derived from op, target and matchType for v1.
       required:
       - compositeQuery
-      - selectedQueryName
-      - thresholds
       type: object
     RuletypesRuleThresholdData:
       discriminator:
@@ -25316,13 +25312,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -25357,36 +25353,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -26282,13 +26264,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -26323,36 +26305,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -27149,13 +27117,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -27190,36 +27158,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -28722,13 +28676,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -28763,36 +28717,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL

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

@@ -12584,12 +12584,6 @@ export type RuletypesPostableRuleDTOAnnotations = { [key: string]: string };
  */
 export type RuletypesPostableRuleDTOLabels = { [key: string]: string };
 
-/**
- * The rule payload schema.
- */
-export enum RuletypesPostableRuleDTOSchemaVersion {
-	v2alpha1 = 'v2alpha1',
-}
 export enum RuletypesSeasonalityDTO {
 	hourly = 'hourly',
 	daily = 'daily',
@@ -12666,9 +12660,9 @@ export interface RuletypesRuleConditionDTO {
 	seasonality?: RuletypesSeasonalityDTO;
 	/**
 	 * @type string
-	 * @description The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery.
+	 * @description The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery. When omitted, F1 is used if present, otherwise the enabled query with the highest name.
 	 */
-	selectedQueryName: string;
+	selectedQueryName?: string;
 	/**
 	 * @type number,null
 	 * @format double
@@ -12681,9 +12675,9 @@ export interface RuletypesRuleConditionDTO {
 	 */
 	targetUnit?: string;
 	/**
-	 * @description The thresholds to evaluate, as a kind and spec.
+	 * @description The thresholds to evaluate, as a kind and spec. Required when schemaVersion is v2alpha1; derived from op, target and matchType for v1.
 	 */
-	thresholds: RuletypesRuleThresholdDataDTO;
+	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
 export interface RuletypesPostableRuleDTO {
@@ -12721,9 +12715,9 @@ export interface RuletypesPostableRuleDTO {
 	 */
 	evalWindow?: string;
 	/**
-	 * @description The evaluation window, as a kind and spec.
+	 * @description The evaluation window, as a kind and spec. Required when schemaVersion is v2alpha1; derived from evalWindow and frequency for v1.
 	 */
-	evaluation: RuletypesEvaluationEnvelopeDTO;
+	evaluation?: RuletypesEvaluationEnvelopeDTO;
 	/**
 	 * @type string
 	 * @description How often the rule is evaluated, as a Go duration such as 1m. Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set it in evaluation.spec instead.
@@ -12735,24 +12729,23 @@ export interface RuletypesPostableRuleDTO {
 	 */
 	labels?: RuletypesPostableRuleDTOLabels;
 	/**
-	 * @description Grouping, re-notification and routing behaviour.
+	 * @description Grouping, re-notification and routing behaviour. Required when schemaVersion is v2alpha1; derived from the v1 fields otherwise.
 	 */
-	notificationSettings: RuletypesNotificationSettingsDTO;
+	notificationSettings?: RuletypesNotificationSettingsDTO;
 	/**
 	 * @type array
 	 * @description The displayName of each notification channel to notify, for schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries its own channels.
 	 */
 	preferredChannels?: string[];
 	/**
-	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql queries and is forced to promql_rule for promql queries.
+	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder queries and is forced to promql_rule for promql queries.
 	 */
 	ruleType: RuletypesRuleTypeDTO;
 	/**
-	 * @enum v2alpha1
 	 * @type string
-	 * @description The rule payload schema.
+	 * @description The rule payload schema: v1 (the default when omitted) uses the flat condition fields, v2alpha1 uses condition.thresholds, evaluation and notificationSettings.
 	 */
-	schemaVersion: RuletypesPostableRuleDTOSchemaVersion;
+	schemaVersion?: string;
 	/**
 	 * @type string
 	 * @description The URL of the page the rule was created from. Informational; it is not used for evaluation.
@@ -12760,7 +12753,7 @@ export interface RuletypesPostableRuleDTO {
 	source?: string;
 	/**
 	 * @type string
-	 * @description The query payload version. Nothing reads it.
+	 * @description The query payload version. Only v5 is accepted and it is filled in when omitted.
 	 */
 	version?: string;
 }
@@ -12783,12 +12776,6 @@ export type RuletypesRuleDTOAnnotations = { [key: string]: string };
  */
 export type RuletypesRuleDTOLabels = { [key: string]: string };
 
-/**
- * The rule payload schema.
- */
-export enum RuletypesRuleDTOSchemaVersion {
-	v2alpha1 = 'v2alpha1',
-}
 export interface RuletypesRuleDTO {
 	/**
 	 * @type string
@@ -12833,9 +12820,9 @@ export interface RuletypesRuleDTO {
 	 */
 	evalWindow?: string;
 	/**
-	 * @description The evaluation window, as a kind and spec.
+	 * @description The evaluation window, as a kind and spec. Required when schemaVersion is v2alpha1; derived from evalWindow and frequency for v1.
 	 */
-	evaluation: RuletypesEvaluationEnvelopeDTO;
+	evaluation?: RuletypesEvaluationEnvelopeDTO;
 	/**
 	 * @type string
 	 * @description How often the rule is evaluated, as a Go duration such as 1m. Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set it in evaluation.spec instead.
@@ -12852,24 +12839,23 @@ export interface RuletypesRuleDTO {
 	 */
 	labels?: RuletypesRuleDTOLabels;
 	/**
-	 * @description Grouping, re-notification and routing behaviour.
+	 * @description Grouping, re-notification and routing behaviour. Required when schemaVersion is v2alpha1; derived from the v1 fields otherwise.
 	 */
-	notificationSettings: RuletypesNotificationSettingsDTO;
+	notificationSettings?: RuletypesNotificationSettingsDTO;
 	/**
 	 * @type array
 	 * @description The displayName of each notification channel to notify, for schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries its own channels.
 	 */
 	preferredChannels?: string[];
 	/**
-	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql queries and is forced to promql_rule for promql queries.
+	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder queries and is forced to promql_rule for promql queries.
 	 */
 	ruleType: RuletypesRuleTypeDTO;
 	/**
-	 * @enum v2alpha1
 	 * @type string
-	 * @description The rule payload schema.
+	 * @description The rule payload schema: v1 (the default when omitted) uses the flat condition fields, v2alpha1 uses condition.thresholds, evaluation and notificationSettings.
 	 */
-	schemaVersion: RuletypesRuleDTOSchemaVersion;
+	schemaVersion?: string;
 	/**
 	 * @type string
 	 * @description The URL of the page the rule was created from. Informational; it is not used for evaluation.
@@ -12890,7 +12876,7 @@ export interface RuletypesRuleDTO {
 	updatedBy?: string;
 	/**
 	 * @type string
-	 * @description The query payload version. Nothing reads it.
+	 * @description The query payload version. Only v5 is accepted and it is filled in when omitted.
 	 */
 	version?: string;
 }

frontend/src/components/Editor/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import MEditor, { EditorProps } from '@monaco-editor/react';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import { EditorProps } from '@monaco-editor/react';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
 function Editor({
 	value,
@@ -10,8 +10,6 @@ function Editor({
 	height,
 	options,
 }: MEditorProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
 	const onChangeHandler = (newValue?: string): void => {
 		if (readOnly) {
 			return;
@@ -28,8 +26,7 @@ function Editor({
 	);
 
 	return (
-		<MEditor
-			theme={isDarkMode ? 'vs-dark' : 'vs-light'}
+		<MonacoEditor
 			language={language}
 			value={value}
 			options={editorOptions}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestTab.tsx

@@ -1,17 +1,11 @@
-import MEditor from '@monaco-editor/react';
 import { Play, RotateCcw } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
 import styles from './TestTab.module.scss';
 import JsonEditorSkeleton from './JsonEditorSkeleton';
 import TestResult from './TestResult';
-import {
-	defineSignozJsonTheme,
-	SIGNOZ_JSON_THEME_DARK,
-	SIGNOZ_JSON_THEME_LIGHT,
-} from './jsonEditorTheme';
 import { UseTestSpanMapper } from './useTestSpanMapper';
 
 interface TestTabProps {
@@ -32,7 +26,6 @@ function TestTab({ spanTest }: TestTabProps): JSX.Element {
 		error,
 		validationError,
 	} = spanTest;
-	const isDarkMode = useIsDarkMode();
 
 	function renderResults(): JSX.Element {
 		if (error) {
@@ -122,14 +115,12 @@ function TestTab({ spanTest }: TestTabProps): JSX.Element {
 					data-testid="test-span-input"
 					aria-label="Sample span JSON"
 				>
-					<MEditor
+					<MonacoEditor
 						language="json"
 						value={input}
 						onChange={(value): void => setInput(value ?? '')}
 						height="100%"
 						loading={<JsonEditorSkeleton />}
-						theme={isDarkMode ? SIGNOZ_JSON_THEME_DARK : SIGNOZ_JSON_THEME_LIGHT}
-						beforeMount={defineSignozJsonTheme}
 						options={{
 							minimap: { enabled: false },
 							fontSize: 12,

frontend/src/container/LLMObservability/AttributeMapping/TestTab/jsonEditorTheme.ts

@@ -1,38 +0,0 @@
-//TODO: This is a local theme for now, but ideally for the editor as well. Just like prettyViewer, we have a theme. We should have a theme for the editor as well.
-import { Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
-
-export const SIGNOZ_JSON_THEME_DARK = 'signoz-attr-mapping-json-dark';
-export const SIGNOZ_JSON_THEME_LIGHT = 'signoz-attr-mapping-json-light';
-
-const SHARED_THEME = {
-	inherit: true,
-	colors: {
-		'editor.background': '#00000000', // transparent — inherit the panel bg
-	},
-	fontFamily: 'SF Mono, Geist Mono, Fira Code, monospace',
-	fontSize: 12,
-	fontWeight: 'normal',
-	lineHeight: 18,
-	letterSpacing: -0.06,
-};
-
-export function defineSignozJsonTheme(monaco: Monaco): void {
-	monaco.editor.defineTheme(SIGNOZ_JSON_THEME_DARK, {
-		...SHARED_THEME,
-		base: 'vs-dark',
-		rules: [
-			{ token: 'string.key.json', foreground: Color.BG_ROBIN_400 },
-			{ token: 'string.value.json', foreground: Color.BG_VANILLA_400 },
-		],
-	});
-
-	monaco.editor.defineTheme(SIGNOZ_JSON_THEME_LIGHT, {
-		...SHARED_THEME,
-		base: 'vs',
-		rules: [
-			{ token: 'string.key.json', foreground: Color.BG_ROBIN_500 },
-			{ token: 'string.value.json', foreground: Color.BG_INK_400 },
-		],
-	});
-}

frontend/src/container/QueryBuilder/rawQueryEditors/ClickHouse/query.tsx

@@ -1,10 +1,8 @@
 import { ChangeEvent, useCallback } from 'react';
-import MEditor, { Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
 import { Input } from 'antd';
 import { LEGEND } from 'constants/global';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 import { IClickHouseQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { getFormatedLegend } from 'utils/getFormatedLegend';
@@ -71,22 +69,6 @@ function ClickHouseQueryBuilder({
 		[handleUpdateQuery],
 	);
 
-	const isDarkMode = useIsDarkMode();
-
-	function setEditorTheme(monaco: Monaco): void {
-		monaco.editor.defineTheme('my-theme', {
-			base: 'vs-dark',
-			inherit: true,
-			rules: [
-				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-			],
-			colors: {
-				'editor.background': Color.BG_INK_300,
-			},
-		});
-	}
-
 	return (
 		<QueryHeader
 			name={queryData?.name}
@@ -95,15 +77,13 @@ function ClickHouseQueryBuilder({
 			onDelete={handleRemoveQuery}
 			deletable={deletable}
 		>
-			<MEditor
+			<MonacoEditor
 				language="sql"
 				height="200px"
 				onChange={handleUpdateEditor}
 				value={queryData?.query}
 				onMount={(_, monaco): void => {
-					document.fonts.ready.then(() => {
-						monaco.editor.remeasureFonts();
-					});
+					void document.fonts.ready.then(() => monaco.editor.remeasureFonts());
 				}}
 				options={{
 					scrollbar: {
@@ -115,8 +95,6 @@ function ClickHouseQueryBuilder({
 					fontSize: 14,
 					fontFamily: 'Space Mono',
 				}}
-				theme={isDarkMode ? 'my-theme' : 'light'}
-				beforeMount={setEditorTheme}
 			/>
 			<Input
 				onChange={handleUpdateInput}

frontend/src/container/RolesSettings/CreateEditRolePage/components/JsonEditor.tsx

@@ -7,7 +7,7 @@ import {
 	useRef,
 } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import MEditor, { Monaco, OnMount } from '@monaco-editor/react';
+import { Monaco, OnMount } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
@@ -15,12 +15,9 @@ import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import type { AuthtypesTransactionGroupDTO } from 'api/generated/services/sigNoz.schemas';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { EDITABLE_EDITOR_OPTIONS } from 'lib/monaco/editorOptions';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
-import {
-	defineJsonTheme,
-	EDITABLE_EDITOR_OPTIONS,
-	JSON_THEME_DARK,
-} from '../../monaco.config';
 import {
 	transformResourcePermissionsToTransactionGroups,
 	transformTransactionGroupsToResourcePermissions,
@@ -34,7 +31,7 @@ import {
 import styles from './JsonEditor.module.scss';
 import { JsonEditorProps, JsonEditorRef } from './JsonEditor.types';
 
-type MonacoEditor = Parameters<OnMount>[0];
+type MonacoEditorInstance = Parameters<OnMount>[0];
 
 const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 	function JsonEditor({ resources, mode, onChange, onValidityChange }, ref) {
@@ -50,7 +47,7 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 		});
 		const prevModeRef = useRef(mode);
 		const completionDisposableRef = useRef<{ dispose(): void } | null>(null);
-		const editorRef = useRef<MonacoEditor | null>(null);
+		const editorRef = useRef<MonacoEditorInstance | null>(null);
 		const markersListenerRef = useRef<{ dispose(): void } | null>(null);
 
 		const hasError = parseError !== null || schemaErrors.length > 0;
@@ -100,7 +97,6 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 		);
 
 		const configureMonaco = useCallback((monaco: Monaco): void => {
-			defineJsonTheme(monaco);
 			registerJsonSchema(monaco);
 			completionDisposableRef.current = registerCompletionProvider(monaco);
 		}, []);
@@ -184,7 +180,7 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 							</Button>
 						</Tooltip>
 					</div>
-					<MEditor
+					<MonacoEditor
 						value={jsonBuffer}
 						language="json"
 						path={ROLE_PERMISSIONS_MODEL_PATH}
@@ -192,7 +188,6 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 						onChange={handleEditorChange}
 						onMount={handleEditorMount}
 						height="100%"
-						theme={isDarkMode ? JSON_THEME_DARK : 'light'}
 						beforeMount={configureMonaco}
 					/>
 				</div>
@@ -225,7 +220,11 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 								className={styles.jsonEditorErrorMessage}
 							>
 								{schemaErrors[0]}
-								{schemaErrors.length > 1 && ` (+${schemaErrors.length - 1} more)`}
+								{schemaErrors.length > 1 && (
+									<span className="translate-safe">
+										{` (+${schemaErrors.length - 1} more)`}
+									</span>
+								)}
 							</Typography>
 						</div>
 					)}

frontend/src/container/RolesSettings/ViewRolePage/ReadOnlyJsonViewer.tsx

@@ -1,17 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import MEditor from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { READONLY_EDITOR_OPTIONS } from 'lib/monaco/editorOptions';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
-import {
-	defineJsonTheme,
-	JSON_THEME_DARK,
-	READONLY_EDITOR_OPTIONS,
-} from '../monaco.config';
 import { RolePermissionsData } from '../types';
 import { transformResourcePermissionsToTransactionGroups } from '../hooks/useRolePermissions';
 
@@ -79,13 +75,11 @@ function ReadOnlyJsonViewer({
 						</Button>
 					</Tooltip>
 				</div>
-				<MEditor
+				<MonacoEditor
 					value={jsonContent}
 					language="json"
 					options={READONLY_EDITOR_OPTIONS}
 					height="100%"
-					theme={isDarkMode ? JSON_THEME_DARK : 'light'}
-					beforeMount={defineJsonTheme}
 				/>
 			</div>
 		</div>

frontend/src/lib/monaco/MonacoEditor.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
+
+import { EDITOR_THEME, registerEditorTheme } from './editorTheme';
+
+export type MonacoEditorProps = Omit<EditorProps, 'theme'>;
+
+function MonacoEditor({
+	beforeMount,
+	...props
+}: MonacoEditorProps): JSX.Element {
+	const handleBeforeMount = useCallback(
+		(monaco: Monaco): void => {
+			registerEditorTheme(monaco);
+			beforeMount?.(monaco);
+		},
+		[beforeMount],
+	);
+
+	return (
+		<MEditor {...props} theme={EDITOR_THEME} beforeMount={handleBeforeMount} />
+	);
+}
+
+export default MonacoEditor;

frontend/src/lib/monaco/__tests__/MonacoEditor.test.tsx

@@ -0,0 +1,58 @@
+import type { EditorProps, Monaco } from '@monaco-editor/react';
+import { render } from '@testing-library/react';
+
+import { EDITOR_THEME, registerEditorTheme } from '../editorTheme';
+import MonacoEditor from '../MonacoEditor';
+
+const editorProps = jest.fn();
+
+jest.mock('@monaco-editor/react', () => ({
+	__esModule: true,
+	default: (props: EditorProps): JSX.Element => {
+		editorProps(props);
+		return <div data-testid="monaco" />;
+	},
+}));
+
+jest.mock('../editorTheme', () => ({
+	EDITOR_THEME: 'signoz',
+	registerEditorTheme: jest.fn(),
+}));
+
+function lastProps(): EditorProps {
+	return editorProps.mock.calls[editorProps.mock.calls.length - 1][0];
+}
+
+describe('MonacoEditor', () => {
+	beforeEach(() => {
+		editorProps.mockClear();
+		jest.mocked(registerEditorTheme).mockClear();
+	});
+
+	it('renders with the shared theme and forwards the other props', () => {
+		render(<MonacoEditor language="json" value="{}" height="100%" />);
+
+		expect(lastProps()).toMatchObject({
+			theme: EDITOR_THEME,
+			language: 'json',
+			value: '{}',
+			height: '100%',
+		});
+	});
+
+	it('registers the theme before the caller sets up monaco', () => {
+		const calls: string[] = [];
+		jest
+			.mocked(registerEditorTheme)
+			.mockImplementation(() => calls.push('theme'));
+		const beforeMount = jest.fn(() => calls.push('caller'));
+		const monaco = {} as Monaco;
+
+		render(<MonacoEditor beforeMount={beforeMount} />);
+		lastProps().beforeMount?.(monaco);
+
+		expect(registerEditorTheme).toHaveBeenCalledWith(monaco);
+		expect(beforeMount).toHaveBeenCalledWith(monaco);
+		expect(calls).toStrictEqual(['theme', 'caller']);
+	});
+});

frontend/src/lib/monaco/__tests__/editorTheme.test.ts

@@ -0,0 +1,138 @@
+import type { Monaco } from '@monaco-editor/react';
+
+type EditorThemeModule = typeof import('../editorTheme');
+
+const DARK_TOKENS = {
+	'--l1-background': '#0b0c0e',
+	'--l1-foreground': '#eceef2',
+	'--bg-vanilla-400': '#c0c1c3',
+	'--bg-robin-400': '#7190f9',
+};
+
+const LIGHT_TOKENS = {
+	'--l1-background': '#ffffff',
+	'--l1-foreground': '#121317',
+	'--bg-vanilla-400': '#c0c1c3',
+	'--bg-robin-400': '#7190f9',
+};
+
+function setTokens(tokens: Record<string, string>): void {
+	Object.entries(tokens).forEach(([name, value]) => {
+		document.body.style.setProperty(name, value);
+	});
+}
+
+function createMonaco(): { monaco: Monaco; defineTheme: jest.Mock } {
+	const defineTheme = jest.fn();
+	return {
+		monaco: { editor: { defineTheme } } as unknown as Monaco,
+		defineTheme,
+	};
+}
+
+function loadModule(): EditorThemeModule {
+	let mod: EditorThemeModule | undefined;
+	jest.isolateModules(() => {
+		mod = jest.requireActual<EditorThemeModule>('../editorTheme');
+	});
+	return mod as EditorThemeModule;
+}
+
+async function flushMutations(): Promise<void> {
+	await Promise.resolve();
+}
+
+describe('registerEditorTheme', () => {
+	afterEach(() => {
+		document.body.removeAttribute('style');
+		document.body.className = '';
+	});
+
+	it('defines a dark theme with the JSON token colours on a dark surface', () => {
+		setTokens(DARK_TOKENS);
+		const { registerEditorTheme, EDITOR_THEME } = loadModule();
+		const { monaco, defineTheme } = createMonaco();
+
+		registerEditorTheme(monaco);
+
+		expect(defineTheme).toHaveBeenCalledTimes(1);
+		expect(defineTheme).toHaveBeenCalledWith(EDITOR_THEME, {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [
+				{ token: 'string.key.json', foreground: 'c0c1c3' },
+				{ token: 'string.value.json', foreground: '7190f9' },
+			],
+			colors: {
+				'editor.background': '#0b0c0e',
+				'editor.foreground': '#eceef2',
+			},
+		});
+	});
+
+	it('keeps the vs palette on a light surface', () => {
+		setTokens(LIGHT_TOKENS);
+		const { registerEditorTheme } = loadModule();
+		const { monaco, defineTheme } = createMonaco();
+
+		registerEditorTheme(monaco);
+
+		expect(defineTheme).toHaveBeenCalledWith(
+			expect.any(String),
+			expect.objectContaining({
+				base: 'vs',
+				rules: [],
+				colors: {
+					'editor.background': '#ffffff',
+					'editor.foreground': '#121317',
+				},
+			}),
+		);
+	});
+
+	it('redefines the theme when the body class switches the tokens', async () => {
+		setTokens(DARK_TOKENS);
+		const { registerEditorTheme } = loadModule();
+		const { monaco, defineTheme } = createMonaco();
+		registerEditorTheme(monaco);
+
+		setTokens(LIGHT_TOKENS);
+		document.body.classList.add('lightMode');
+		await flushMutations();
+
+		expect(defineTheme).toHaveBeenCalledTimes(2);
+		expect(defineTheme).toHaveBeenLastCalledWith(
+			expect.any(String),
+			expect.objectContaining({ base: 'vs' }),
+		);
+	});
+
+	it('ignores body class changes that leave the tokens alone', async () => {
+		setTokens(DARK_TOKENS);
+		const { registerEditorTheme } = loadModule();
+		const { monaco, defineTheme } = createMonaco();
+		registerEditorTheme(monaco);
+
+		document.body.classList.add('ant-scrolling-effect');
+		await flushMutations();
+
+		expect(defineTheme).toHaveBeenCalledTimes(1);
+	});
+
+	it('watches the body once however many editors mount', async () => {
+		const observe = jest.spyOn(MutationObserver.prototype, 'observe');
+		setTokens(DARK_TOKENS);
+		const { registerEditorTheme } = loadModule();
+		const { monaco, defineTheme } = createMonaco();
+		registerEditorTheme(monaco);
+		registerEditorTheme(monaco);
+
+		setTokens(LIGHT_TOKENS);
+		document.body.classList.add('lightMode');
+		await flushMutations();
+
+		expect(observe).toHaveBeenCalledTimes(1);
+		expect(defineTheme).toHaveBeenCalledTimes(2);
+		observe.mockRestore();
+	});
+});

frontend/src/lib/monaco/editorOptions.ts

@@ -1,24 +1,7 @@
 import { Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
 
 type EditorOptions = Parameters<Monaco['editor']['create']>[1];
 
-export const JSON_THEME_DARK = 'json-theme-dark';
-
-export function defineJsonTheme(monaco: Monaco): void {
-	monaco.editor.defineTheme(JSON_THEME_DARK, {
-		base: 'vs-dark',
-		inherit: true,
-		rules: [
-			{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-			{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-		],
-		colors: {
-			'editor.background': Color.BG_INK_400,
-		},
-	});
-}
-
 const BASE_EDITOR_OPTIONS: EditorOptions = {
 	automaticLayout: true,
 	wordWrap: 'on',

frontend/src/lib/monaco/editorTheme.ts

@@ -0,0 +1,78 @@
+import type { Monaco } from '@monaco-editor/react';
+
+export const EDITOR_THEME = 'signoz';
+
+let definedBackground: string | undefined;
+let bodyClassObserver: MutationObserver | undefined;
+
+function token(name: string): string {
+	return getComputedStyle(document.body)
+		.getPropertyValue(name)
+		.trim()
+		.replace('#', '');
+}
+
+function isDark(hex: string): boolean {
+	if (hex.length < 6) {
+		return true;
+	}
+	const r = parseInt(hex.slice(0, 2), 16);
+	const g = parseInt(hex.slice(2, 4), 16);
+	const b = parseInt(hex.slice(4, 6), 16);
+	return 0.299 * r + 0.587 * g + 0.114 * b < 128;
+}
+
+function defineEditorTheme(monaco: Monaco): void {
+	const background = token('--l1-background');
+	if (background === definedBackground) {
+		return;
+	}
+	definedBackground = background;
+
+	const foreground = token('--l1-foreground');
+	const keyColor = token('--bg-vanilla-400');
+	const valueColor = token('--bg-robin-400');
+
+	// Both token colours are picked to read on a dark surface, so on a light one
+	// they wash out, the keys worst of all. Monaco's own `vs` palette is built
+	// for that surface, so let it keep its colours there, as the role viewer does.
+	const rules: { token: string; foreground: string }[] = [];
+	if (isDark(background)) {
+		if (keyColor) {
+			rules.push({ token: 'string.key.json', foreground: keyColor });
+		}
+		if (valueColor) {
+			rules.push({ token: 'string.value.json', foreground: valueColor });
+		}
+	}
+
+	const colors: Record<string, string> = {};
+	if (background) {
+		colors['editor.background'] = `#${background}`;
+	}
+	if (foreground) {
+		colors['editor.foreground'] = `#${foreground}`;
+	}
+
+	monaco.editor.defineTheme(EDITOR_THEME, {
+		base: isDark(background) ? 'vs-dark' : 'vs',
+		inherit: true,
+		rules,
+		colors,
+	});
+}
+
+// Monaco has a single theme for every editor on the page, and the design tokens
+// switch with the body's `dark` class, so the theme follows that class instead
+// of being defined per editor.
+export function registerEditorTheme(monaco: Monaco): void {
+	defineEditorTheme(monaco);
+	if (bodyClassObserver) {
+		return;
+	}
+	bodyClassObserver = new MutationObserver(() => defineEditorTheme(monaco));
+	bodyClassObserver.observe(document.body, {
+		attributes: true,
+		attributeFilter: ['class'],
+	});
+}

frontend/src/lib/monaco/jsonEditorTheme.ts

@@ -1,52 +0,0 @@
-import type { Monaco } from '@monaco-editor/react';
-
-export const JSON_EDITOR_THEME = 'signoz-json';
-
-function token(el: HTMLElement, name: string): string {
-	return getComputedStyle(el).getPropertyValue(name).trim().replace('#', '');
-}
-
-function isDark(hex: string): boolean {
-	if (hex.length < 6) {
-		return true;
-	}
-	const r = parseInt(hex.slice(0, 2), 16);
-	const g = parseInt(hex.slice(2, 4), 16);
-	const b = parseInt(hex.slice(4, 6), 16);
-	return 0.299 * r + 0.587 * g + 0.114 * b < 128;
-}
-
-export function defineJsonEditorTheme(monaco: Monaco, el: HTMLElement): void {
-	const background = token(el, '--l1-background');
-	const foreground = token(el, '--l1-foreground');
-	const keyColor = token(el, '--bg-vanilla-400');
-	const valueColor = token(el, '--bg-robin-400');
-
-	// Both token colours are picked to read on a dark surface, so on a light one
-	// they wash out, the keys worst of all. Monaco's own `vs` palette is built
-	// for that surface, so let it keep its colours there, as the role viewer does.
-	const rules: { token: string; foreground: string }[] = [];
-	if (isDark(background)) {
-		if (keyColor) {
-			rules.push({ token: 'string.key.json', foreground: keyColor });
-		}
-		if (valueColor) {
-			rules.push({ token: 'string.value.json', foreground: valueColor });
-		}
-	}
-
-	const colors: Record<string, string> = {};
-	if (background) {
-		colors['editor.background'] = `#${background}`;
-	}
-	if (foreground) {
-		colors['editor.foreground'] = `#${foreground}`;
-	}
-
-	monaco.editor.defineTheme(JSON_EDITOR_THEME, {
-		base: isDark(background) ? 'vs-dark' : 'vs',
-		inherit: true,
-		rules,
-		colors,
-	});
-}

frontend/src/mocks-server/__mockdata__/alert_rules.ts

@@ -1,10 +1,8 @@
 import {
 	RuletypesAlertStateDTO,
 	RuletypesAlertTypeDTO,
-	RuletypesEvaluationRollingDTOKind,
 	RuletypesPanelTypeDTO,
 	RuletypesQueryTypeDTO,
-	RuletypesRuleDTOSchemaVersion,
 	RuletypesRuleTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type {
@@ -40,12 +38,6 @@ const make = (
 	evalWindow: '5m0s',
 	frequency: '1m0s',
 	ruleType: RuletypesRuleTypeDTO.threshold_rule,
-	schemaVersion: RuletypesRuleDTOSchemaVersion.v2alpha1,
-	evaluation: {
-		kind: RuletypesEvaluationRollingDTOKind.rolling,
-		spec: { evalWindow: '5m0s', frequency: '1m0s' },
-	},
-	notificationSettings: { usePolicy: false, renotify: { enabled: false } },
 	...overrides,
 });
 

frontend/src/pages/AlertList/NotificationChannels/components/ChannelJsonDialog/ChannelJsonDialog.tsx

@@ -1,15 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import MEditor from '@monaco-editor/react';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { useGetNotificationChannel } from 'api/generated/services/channels';
 import ErrorEmptyState from 'components/Alerts/ErrorEmptyState';
 import Spinner from 'components/Spinner';
-import { READONLY_EDITOR_OPTIONS } from 'container/RolesSettings/monaco.config';
-import {
-	defineJsonEditorTheme,
-	JSON_EDITOR_THEME,
-} from 'lib/monaco/jsonEditorTheme';
+import { READONLY_EDITOR_OPTIONS } from 'lib/monaco/editorOptions';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
 import { channelToJson, hasSecrets } from '../../utils/channelJson';
 import styles from './ChannelJsonDialog.module.scss';
@@ -92,18 +88,11 @@ function ChannelJsonDialog({
 					/>
 
 					<div className={styles.editor}>
-						<MEditor
+						<MonacoEditor
 							value={json}
 							language="json"
 							options={READONLY_EDITOR_OPTIONS}
 							height="100%"
-							theme="vs-dark"
-							// the same theme the dashboard JSON drawer uses: it reads the
-							// page's own tokens, so it follows light and dark
-							onMount={(editor, monaco): void => {
-								defineJsonEditorTheme(monaco, editor.getContainerDomNode());
-								monaco.editor.setTheme(JSON_EDITOR_THEME);
-							}}
 						/>
 					</div>
 				</div>

frontend/src/pages/AlertList/stories/__story_mockdata__/alerts.ts

@@ -18,7 +18,6 @@ import {
 	RuletypesMatchTypeDTO,
 	RuletypesPanelTypeDTO,
 	RuletypesQueryTypeDTO,
-	RuletypesRuleDTOSchemaVersion,
 	RuletypesRuleTypeDTO,
 	RuletypesSeasonalityDTO,
 	RuletypesThresholdBasicDTOKind,
@@ -35,6 +34,7 @@ import {
 	type AlertmanagertypesGettableNotificationChannelDTO,
 	type AlertmanagertypesListedNotificationChannelDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { NEW_ALERT_SCHEMA_VERSION } from 'types/api/alerts/alertTypesV2';
 
 const MINUTE = 60 * 1000;
 const HOUR = 60 * MINUTE;
@@ -388,18 +388,18 @@ const buildRule = (index: number, shape: RuleShape): RuletypesRuleDTO => {
 		},
 		evalWindow: isAnomaly ? '1h0m0s' : '5m0s',
 		frequency: '1m0s',
-		evaluation: {
-			kind: RuletypesEvaluationRollingDTOKind.rolling,
-			spec: { evalWindow: isAnomaly ? '1h0m0s' : '5m0s', frequency: '1m0s' },
-		},
+		...(isAnomaly && {
+			evaluation: {
+				kind: RuletypesEvaluationRollingDTOKind.rolling,
+				spec: { evalWindow: '1h0m0s', frequency: '1m0s' },
+			},
+		}),
 		createdAt: ago((index + 3) * DAY),
 		updatedAt: ago((index + 1) * HOUR),
 		createdBy: 'ada@signoz.io',
 		updatedBy: 'grace@signoz.io',
-		// classic rows predate schemaVersion, which the spec now requires
-		schemaVersion: (shape.schema === 'classic'
-			? undefined
-			: RuletypesRuleDTOSchemaVersion.v2alpha1) as RuletypesRuleDTOSchemaVersion,
+		schemaVersion:
+			shape.schema === 'classic' ? undefined : NEW_ALERT_SCHEMA_VERSION,
 		version: 'v5',
 		source: 'http://localhost/alerts',
 		preferredChannels: ['ops-slack'],

frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorDrawer.tsx

@@ -1,5 +1,4 @@
 import { KeyboardEvent, useCallback } from 'react';
-import MEditor from '@monaco-editor/react';
 import { TriangleAlert } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
@@ -12,10 +11,7 @@ import { DashboardDetailEvents } from 'pages/DashboardPage/constants/events';
 import { useCopyToClipboard } from 'react-use';
 import { toast } from '@signozhq/ui/sonner';
 
-import {
-	defineJsonEditorTheme,
-	JSON_EDITOR_THEME,
-} from 'lib/monaco/jsonEditorTheme';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 import styles from './JsonEditorDrawer.module.scss';
 import JsonEditorToolbar from './JsonEditorToolbar';
 import { useJsonEditor } from './useJsonEditor';
@@ -213,7 +209,7 @@ function JsonEditorDrawer({
 					onReset={reset}
 				/>
 				<div className={styles.editor}>
-					<MEditor
+					<MonacoEditor
 						language="json"
 						height="100%"
 						value={draft}
@@ -225,10 +221,7 @@ function JsonEditorDrawer({
 							fontSize: 13,
 							fontFamily: 'Space Mono',
 						}}
-						theme="vs-dark"
-						onMount={(editor, monaco): void => {
-							defineJsonEditorTheme(monaco, editor.getContainerDomNode());
-							monaco.editor.setTheme(JSON_EDITOR_THEME);
+						onMount={(_editor, monaco): void => {
 							void document.fonts.ready.then(() => monaco.editor.remeasureFonts());
 						}}
 					/>

frontend/src/pages/DashboardPage/PanelEditorPage/stories/PanelEditorPage.stories.tsx

@@ -1,11 +1,13 @@
 import type { ComponentType } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Route } from 'react-router-dom';
+import * as monaco from 'monaco-editor';
 import ROUTES from 'constants/routes';
-import { screen, userEvent, within } from 'storybook/test';
+import { screen, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+import { waitForMonacoText } from '@/storybook/visual/waitForMonacoText';
 
 import { panelEditorMocks, savePanel } from './PanelEditorPage.stories.mocks';
 
@@ -249,3 +251,43 @@ export const TextPanelSavedToast: Story = {
 	args: { panel: 'new', newPanelKind: 'text' },
 	play: PanelSavedToast.play,
 };
+
+const CLICKHOUSE_QUERY =
+	'SELECT toStartOfInterval(timestamp, INTERVAL 1 MINUTE) AS ts, serviceName, count() AS calls FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp > now() - INTERVAL 1 HOUR GROUP BY ts, serviceName ORDER BY ts';
+
+/**
+ * The ClickHouse Query tab with a query written in its SQL editor, over the
+ * panel the editor opened on.
+ */
+export const ClickHouseQuery: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const tab = await within(canvasElement).findByRole(
+			'tab',
+			{ name: /ClickHouse Query/ },
+			{ timeout: 10000 },
+		);
+
+		await userEvent.click(tab);
+
+		// Typing into Monaco's hidden textarea never reaches its model in this runner.
+		const model = await waitFor(
+			() => {
+				const found = monaco.editor
+					.getModels()
+					.find((candidate) => candidate.getLanguageId() === 'sql');
+
+				if (!found) {
+					throw new Error('The SQL editor has not mounted');
+				}
+
+				return found;
+			},
+			{ timeout: 15000 },
+		);
+
+		model.setValue(CLICKHOUSE_QUERY);
+		await waitForMonacoText(canvasElement);
+		await userEvent.unhover(tab);
+		(document.activeElement as HTMLElement | null)?.blur();
+	},
+};

frontend/src/pages/DashboardsListPage/components/NewDashboardModal/JsonEditor.tsx

@@ -1,10 +1,8 @@
 import { useState } from 'react';
-import MEditor, { Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { Maximize2 } from '@signozhq/icons';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
 import styles from './NewDashboardModal.module.scss';
 
@@ -15,18 +13,6 @@ interface Props {
 	height?: string;
 }
 
-const defineTheme = (monaco: Monaco): void => {
-	monaco.editor.defineTheme('my-theme', {
-		base: 'vs-dark',
-		inherit: true,
-		rules: [
-			{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-			{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-		],
-		colors: { 'editor.background': Color.BG_INK_300 },
-	});
-};
-
 // JSON editor with a one-click "expand" into an extra-wide modal for easier
 // editing/review. The expanded editor shares the same value, so edits persist.
 function JsonEditor({
@@ -35,11 +21,10 @@ function JsonEditor({
 	readOnly = false,
 	height = '38vh',
 }: Props): JSX.Element {
-	const isDarkMode = useIsDarkMode();
 	const [expanded, setExpanded] = useState(false);
 
 	const renderEditor = (editorHeight: string): JSX.Element => (
-		<MEditor
+		<MonacoEditor
 			language="json"
 			height={editorHeight}
 			value={value}
@@ -51,8 +36,6 @@ function JsonEditor({
 				fontSize: 14,
 				fontFamily: 'Space Mono',
 			}}
-			theme={isDarkMode ? 'my-theme' : 'light'}
-			beforeMount={defineTheme}
 		/>
 	);
 

frontend/src/pages/LLMObservability/AttributeMapping/stories/AttributeMapping.stories.tsx

@@ -3,6 +3,7 @@ import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+import { waitForMonacoText } from '@/storybook/visual/waitForMonacoText';
 
 import LLMObservabilityPage from '../../index';
 import {
@@ -101,3 +102,21 @@ export const ChangesSavedToast: Story = {
 		}
 	},
 };
+
+/**
+ * The Test tab: the JSON editor pre-filled with the sample span, before any run.
+ */
+export const TestTab: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const tab = await within(canvasElement).findByRole(
+			'tab',
+			{ name: 'Test' },
+			{ timeout: 10000 },
+		);
+
+		await userEvent.click(tab);
+		await waitForMonacoText(canvasElement);
+		await userEvent.unhover(tab);
+		(document.activeElement as HTMLElement | null)?.blur();
+	},
+};

frontend/src/pages/TraceDetailsV3/stories/TraceDetailsV3.stories.tsx

@@ -12,6 +12,7 @@ import {
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+import { waitForMonacoText } from '@/storybook/visual/waitForMonacoText';
 
 import {
 	focusSpanIndex,
@@ -325,3 +326,19 @@ export const TraceExportCancelledToast: Story = {
 		await userEvent.click(await screen.findByTestId('trace-download-cancel'));
 	},
 };
+
+/** The span panel switched from the pretty view to the span's raw JSON. */
+export const SpanJsonView: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const option = await within(canvasElement).findByTestId(
+			'data-viewer-view-mode-button-json',
+			undefined,
+			untilLoaded,
+		);
+
+		await userEvent.click(option);
+		await waitForMonacoText(canvasElement);
+		await userEvent.unhover(option);
+		(document.activeElement as HTMLElement | null)?.blur();
+	},
+};

frontend/src/periscope/components/JsonView/JsonView.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
-import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
+import { EditorProps } from '@monaco-editor/react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
 import './JsonView.styles.scss';
 
@@ -38,36 +37,16 @@ const editorOptions: EditorProps['options'] = {
 	folding: false,
 };
 
-function setEditorTheme(monaco: Monaco): void {
-	monaco.editor.defineTheme('signoz-dark', {
-		base: 'vs-dark',
-		inherit: true,
-		rules: [
-			{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-			{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-		],
-		colors: {
-			'editor.background': '#00000000', // transparent
-		},
-		fontFamily: 'SF Mono, Geist Mono, Fira Code, monospace',
-		fontSize: 12,
-		fontWeight: 'normal',
-		lineHeight: 18,
-		letterSpacing: -0.06,
-	});
-}
-
 function JsonView({
 	data,
 	height = '575px',
 	fontSize = 12,
 }: JsonViewProps): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState(true);
-	const isDarkMode = useIsDarkMode();
 
 	return (
 		<div className="json-view">
-			<MEditor
+			<MonacoEditor
 				value={data}
 				language="json"
 				options={{
@@ -77,8 +56,6 @@ function JsonView({
 				}}
 				onChange={(): void => {}}
 				height={height}
-				theme={isDarkMode ? 'signoz-dark' : 'light'}
-				beforeMount={setEditorTheme}
 			/>
 			<div className="json-view__footer">
 				<div className="json-view__wrap-toggle">

frontend/src/storybook/visual/waitForMonacoText.ts

@@ -0,0 +1,26 @@
+import { waitFor } from 'storybook/test';
+
+/**
+ * Monaco mounts its container before its language loads, so the editor is on
+ * screen while still blank or uncoloured. Waits for text with at least two
+ * token colours, which only exists once the tokenizer has run.
+ */
+export const waitForMonacoText = async (
+	canvasElement: HTMLElement,
+): Promise<void> => {
+	await waitFor(
+		() => {
+			const lines = canvasElement.querySelector('.monaco-editor .view-lines');
+			const tokens = new Set(
+				Array.from(lines?.querySelectorAll('span[class^="mtk"]') ?? []).map(
+					(token) => token.className,
+				),
+			);
+
+			if (!lines?.textContent?.trim() || tokens.size < 2) {
+				throw new Error('Monaco has not rendered its text');
+			}
+		},
+		{ timeout: 15_000 },
+	);
+};

pkg/apiserver/signozapiserver/ruler_examples.go

@@ -221,15 +221,16 @@ func postableRuleExamples() []handler.OpenAPIExample {
 		},
 		{
 			Name:        "metric_anomaly",
-			Summary:     "Metric anomaly rule",
-			Description: "Wraps a builder query in the `anomaly` function with daily seasonality, so SigNoz compares each point against the forecast for that time of day. The threshold is compared against the signed anomaly score, so `below` with a target of -2 fires when an abrupt drop holds for the entire window; `requireMinPoints` guards against noisy intervals.",
+			Summary:     "Metric anomaly rule (v1 only)",
+			Description: "Anomaly rules are not yet supported under schemaVersion v2alpha1, so this example uses the v1 shape. Wraps a builder query in the `anomaly` function with daily seasonality SigNoz compares each point against the forecast for that time of day. Fires when the anomaly score stays below the threshold for the entire window; `requireMinPoints` guards against noisy intervals.",
 			Value: map[string]any{
-				"alert":         "Anomalous drop in ingested spans",
-				"alertType":     "METRIC_BASED_ALERT",
-				"description":   "Detect an abrupt drop in span ingestion using a z-score anomaly function",
-				"ruleType":      "anomaly_rule",
-				"version":       "v5",
-				"schemaVersion": "v2alpha1",
+				"alert":       "Anomalous drop in ingested spans",
+				"alertType":   "METRIC_BASED_ALERT",
+				"description": "Detect an abrupt drop in span ingestion using a z-score anomaly function",
+				"ruleType":    "anomaly_rule",
+				"version":     "v5",
+				"evalWindow":  "24h",
+				"frequency":   "3h",
 				"condition": map[string]any{
 					"compositeQuery": map[string]any{
 						"queryType": "builder",
@@ -255,29 +256,17 @@ func postableRuleExamples() []handler.OpenAPIExample {
 							},
 						},
 					},
+					"op":                "below",
+					"matchType":         "all_the_times",
+					"target":            2,
 					"algorithm":         "standard",
 					"seasonality":       "daily",
 					"selectedQueryName": "A",
 					"requireMinPoints":  true,
 					"requiredNumPoints": 3,
-					"thresholds": map[string]any{
-						"kind": "basic",
-						"spec": []any{
-							map[string]any{
-								"name":      "warning",
-								"op":        "below",
-								"matchType": "all_the_times",
-								"target":    -2,
-								"channels":  []any{"slack-ingestion"},
-							},
-						},
-					},
 				},
-				"evaluation": rolling("24h", "3h"),
-				"notificationSettings": map[string]any{
-					"renotify": renotify("4h", "firing"),
-				},
-				"labels": map[string]any{"severity": "warning"},
+				"labels":            map[string]any{"severity": "warning"},
+				"preferredChannels": []any{"slack-ingestion"},
 				"annotations": map[string]any{
 					"description": "Ingestion rate for tenant {{$tenant_id}} is anomalously low (z-score {{$value}}).",
 					"summary":     "Span ingestion anomaly",

pkg/types/ruletypes/alerting.go

@@ -117,10 +117,10 @@ type RuleCondition struct {
 	TargetUnit        string               `json:"targetUnit,omitempty" description:"schemaVersion v1 only: the unit of target, such as percent or ms. Converted to compositeQuery.unit before comparison when the two differ."`
 	Algorithm         string               `json:"algorithm,omitempty" description:"anomaly_rule only: the anomaly detection algorithm. The supported value is standard."`
 	Seasonality       Seasonality          `json:"seasonality,omitzero" description:"anomaly_rule only: the seasonal period the history is compared against, hourly, daily or weekly."`
-	SelectedQuery     string               `json:"selectedQueryName,omitempty" required:"true" description:"The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery."`
+	SelectedQuery     string               `json:"selectedQueryName,omitempty" description:"The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery. When omitted, F1 is used if present, otherwise the enabled query with the highest name."`
 	RequireMinPoints  bool                 `json:"requireMinPoints,omitempty" description:"Whether a series is skipped until it has at least requiredNumPoints points in the window. Defaults to false."`
 	RequiredNumPoints int                  `json:"requiredNumPoints,omitempty" description:"The minimum number of points a series needs before it is evaluated. Must be greater than 0 when requireMinPoints is true."`
-	Thresholds        *RuleThresholdData   `json:"thresholds,omitempty" required:"true" description:"The thresholds to evaluate, as a kind and spec."`
+	Thresholds        *RuleThresholdData   `json:"thresholds,omitempty" description:"The thresholds to evaluate, as a kind and spec. Required when schemaVersion is v2alpha1; derived from op, target and matchType for v1."`
 }
 
 func (rc *RuleCondition) SelectedQueryName() string {

pkg/types/ruletypes/api_params.go

@@ -9,7 +9,6 @@ import (
 	"unicode/utf8"
 
 	"github.com/prometheus/alertmanager/config"
-	"github.com/swaggest/jsonschema-go"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/types"
@@ -64,7 +63,7 @@ type PostableRule struct {
 	AlertName   valuer.DisplayName  `json:"alert" required:"true" description:"The display name of the alert rule."`
 	AlertType   AlertType           `json:"alertType" required:"true" description:"The signal the rule evaluates: METRIC_BASED_ALERT, TRACES_BASED_ALERT, LOGS_BASED_ALERT, EXCEPTIONS_BASED_ALERT or AI_TRACES_BASED_ALERT."`
 	Description string              `json:"description,omitempty" description:"A human readable description of what the rule monitors."`
-	RuleType    RuleType            `json:"ruleType" required:"true" description:"The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql queries and is forced to promql_rule for promql queries."`
+	RuleType    RuleType            `json:"ruleType" required:"true" description:"The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder queries and is forced to promql_rule for promql queries."`
 	EvalWindow  valuer.TextDuration `json:"evalWindow,omitzero" description:"The lookback window as a Go duration such as 5m. Only read when schemaVersion is v1, defaulting to 5m; v2alpha1 rules set it in evaluation.spec instead."`
 	Frequency   valuer.TextDuration `json:"frequency,omitzero" description:"How often the rule is evaluated, as a Go duration such as 1m. Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set it in evaluation.spec instead."`
 
@@ -78,12 +77,12 @@ type PostableRule struct {
 
 	PreferredChannels []string `json:"preferredChannels,omitempty" description:"The displayName of each notification channel to notify, for schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries its own channels."`
 
-	Version string `json:"version" description:"The query payload version. Nothing reads it."`
+	Version string `json:"version" description:"The query payload version. Only v5 is accepted and it is filled in when omitted."`
 
-	Evaluation    *EvaluationEnvelope `json:"evaluation,omitempty" required:"true" description:"The evaluation window, as a kind and spec."`
-	SchemaVersion string              `json:"schemaVersion,omitempty" required:"true" enum:"v2alpha1" description:"The rule payload schema."`
+	Evaluation    *EvaluationEnvelope `json:"evaluation,omitempty" description:"The evaluation window, as a kind and spec. Required when schemaVersion is v2alpha1; derived from evalWindow and frequency for v1."`
+	SchemaVersion string              `json:"schemaVersion,omitempty" description:"The rule payload schema: v1 (the default when omitted) uses the flat condition fields, v2alpha1 uses condition.thresholds, evaluation and notificationSettings."`
 
-	NotificationSettings *NotificationSettings `json:"notificationSettings,omitempty" required:"true" description:"Grouping, re-notification and routing behaviour."`
+	NotificationSettings *NotificationSettings `json:"notificationSettings,omitempty" description:"Grouping, re-notification and routing behaviour. Required when schemaVersion is v2alpha1; derived from the v1 fields otherwise."`
 }
 
 type NotificationSettings struct {
@@ -336,19 +335,6 @@ func (r *PostableRule) UnmarshalJSON(bytes []byte) error {
 	return r.validate()
 }
 
-var _ jsonschema.Preparer = PostableRule{}
-
-// PrepareJSONSchema marks version and source deprecated: nothing reads them,
-// they stay only so existing clients keep a stable schema.
-func (PostableRule) PrepareJSONSchema(schema *jsonschema.Schema) error {
-	for _, name := range []string{"version", "source"} {
-		if property, ok := schema.Properties[name]; ok && property.TypeObject != nil {
-			property.TypeObject.WithDeprecated(true)
-		}
-	}
-	return nil
-}
-
 func isValidLabelName(ln string) bool {
 	if len(ln) == 0 {
 		return false