feat(public-dashboard): render on the shared dashboard

createPublicDashboardHost mounts the shared tree read-only: variables dropped, charts only, panels run on the public endpoint by key. The page opens on the shared default range and keeps the viewer's own only when the link allows changing time; a fixed link can't zoom either, so zoom becomes panelActions.zoom and CHARTS_ONLY names what it hides.
feat(dashboard): let hosts choose what runs panel queries
2026-11-14 12:20:54 +00:00 · 2026-11-13 02:27:15 +05:30 · 2026-11-13 02:26:57 +05:30 · 2026-11-13 01:57:26 +05:30 · 2026-11-13 01:52:24 +05:30 · 2026-11-13 00:29:23 +05:30
217 changed files with 6324 additions and 5052 deletions
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -553,23 +553,23 @@ components:
      - apiKey
      type: object
    AlertmanagertypesChannelJiraAuth:
-      oneOf:
-      - $ref: '#/components/schemas/AlertmanagertypesChannelJiraCloudAuth'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelJiraSelfHostedAuth'
-      type: object
-    AlertmanagertypesChannelJiraCloudAuth:
      properties:
        apiToken:
-          description: The Atlassian API token paired with email. A secret; returned
-            by create, update and fetch by ID, never by list.
+          description: The Atlassian API token paired with email. Required when deployment
+            is cloud. A secret; returned by create, update and fetch by ID, never
+            by list.
          format: password
          type: string
        email:
-          description: The Atlassian account email used for basic auth.
+          description: The Atlassian account email used for basic auth. Required when
+            deployment is cloud.
+          type: string
+        pat:
+          description: The Jira personal access token, sent as a Bearer header. Required
+            when deployment is selfhosted. A secret; returned by create, update and
+            fetch by ID, never by list.
+          format: password
          type: string
-      required:
-      - email
-      - apiToken
      type: object
    AlertmanagertypesChannelJiraConfig:
      properties:
@@ -642,16 +642,6 @@ components:
      - issueType
      - auth
      type: object
-    AlertmanagertypesChannelJiraSelfHostedAuth:
-      properties:
-        pat:
-          description: The Jira personal access token, sent as a Bearer header. A
-            secret; returned by create, update and fetch by ID, never by list.
-          format: password
-          type: string
-      required:
-      - pat
-      type: object
    AlertmanagertypesChannelKind:
      enum:
      - slack
@@ -11773,15 +11763,6 @@ components:
          enum:
          - v2alpha1
          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.
-          type: string
      required:
      - alert
      - alertType
@@ -11900,11 +11881,6 @@ components:
          enum:
          - v2alpha1
          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
        state:
          allOf:
          - $ref: '#/components/schemas/RuletypesAlertState'
@@ -11915,10 +11891,6 @@ components:
          type: string
        updatedBy:
          type: string
-        version:
-          deprecated: true
-          description: The query payload version. Nothing reads it.
-          type: string
      required:
      - id
      - state
@@ -25559,7 +25531,6 @@ paths:
                      interval: 30m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              logs_threshold:
                description: Counts matching log records (ERROR severity + body contains)
                  over a rolling window. Fires at least once per evaluation when the
@@ -25626,7 +25597,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  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
@@ -25699,7 +25669,6 @@ paths:
                      interval: 4h
                  ruleType: anomaly_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_promql:
                description: PromQL expression instead of the builder. Dotted OTEL
                  resource attributes are quoted ("deployment.environment"). Useful
@@ -25755,7 +25724,6 @@ paths:
                      interval: 1h
                  ruleType: promql_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_threshold_formula:
                description: Computes disk utilization as (1 - available/capacity)
                  * 100 by combining two disabled base queries with a builder_formula.
@@ -25847,7 +25815,6 @@ paths:
                      interval: 2h
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_threshold_single:
                description: Fires when a pod consumes more than 80% of its requested
                  CPU for the whole evaluation window. Uses `k8s.pod.cpu_request_utilization`.
@@ -25916,7 +25883,6 @@ paths:
                      interval: 4h
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              notification_settings:
                description: 'Demonstrates the full notificationSettings surface:
                  `groupBy` merges alerts across labels to cut noise, `newGroupEvalDelay`
@@ -26015,7 +25981,6 @@ paths:
                    usePolicy: false
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              tiered_thresholds:
                description: Two tiers (warning and critical) in a single rule, each
                  with its own target, op, matchType, and channels so warnings and
@@ -26115,7 +26080,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              traces_error_rate_formula:
                description: Two disabled trace count queries (A = error spans where
                  hasError=true, B = total spans) combined via a builder_formula into
@@ -26205,7 +26169,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              traces_threshold_latency:
                description: Builder query against the traces signal with p99(duration_nano).
                  The series unit is ns (compositeQuery.unit), the target is in seconds
@@ -26274,7 +26237,6 @@ paths:
                      interval: 30m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
            schema:
              $ref: '#/components/schemas/RuletypesPostableRule'
      responses:
@@ -26525,7 +26487,6 @@ paths:
                      interval: 30m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              logs_threshold:
                description: Counts matching log records (ERROR severity + body contains)
                  over a rolling window. Fires at least once per evaluation when the
@@ -26592,7 +26553,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  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
@@ -26665,7 +26625,6 @@ paths:
                      interval: 4h
                  ruleType: anomaly_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_promql:
                description: PromQL expression instead of the builder. Dotted OTEL
                  resource attributes are quoted ("deployment.environment"). Useful
@@ -26721,7 +26680,6 @@ paths:
                      interval: 1h
                  ruleType: promql_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_threshold_formula:
                description: Computes disk utilization as (1 - available/capacity)
                  * 100 by combining two disabled base queries with a builder_formula.
@@ -26813,7 +26771,6 @@ paths:
                      interval: 2h
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_threshold_single:
                description: Fires when a pod consumes more than 80% of its requested
                  CPU for the whole evaluation window. Uses `k8s.pod.cpu_request_utilization`.
@@ -26882,7 +26839,6 @@ paths:
                      interval: 4h
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              notification_settings:
                description: 'Demonstrates the full notificationSettings surface:
                  `groupBy` merges alerts across labels to cut noise, `newGroupEvalDelay`
@@ -26981,7 +26937,6 @@ paths:
                    usePolicy: false
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              tiered_thresholds:
                description: Two tiers (warning and critical) in a single rule, each
                  with its own target, op, matchType, and channels so warnings and
@@ -27081,7 +27036,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              traces_error_rate_formula:
                description: Two disabled trace count queries (A = error spans where
                  hasError=true, B = total spans) combined via a builder_formula into
@@ -27171,7 +27125,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              traces_threshold_latency:
                description: Builder query against the traces signal with p99(duration_nano).
                  The series unit is ns (compositeQuery.unit), the target is in seconds
@@ -27240,7 +27193,6 @@ paths:
                      interval: 30m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
            schema:
              $ref: '#/components/schemas/RuletypesPostableRule'
      responses:
@@ -27392,7 +27344,6 @@ paths:
                      interval: 30m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              logs_threshold:
                description: Counts matching log records (ERROR severity + body contains)
                  over a rolling window. Fires at least once per evaluation when the
@@ -27459,7 +27410,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  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
@@ -27532,7 +27482,6 @@ paths:
                      interval: 4h
                  ruleType: anomaly_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_promql:
                description: PromQL expression instead of the builder. Dotted OTEL
                  resource attributes are quoted ("deployment.environment"). Useful
@@ -27588,7 +27537,6 @@ paths:
                      interval: 1h
                  ruleType: promql_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_threshold_formula:
                description: Computes disk utilization as (1 - available/capacity)
                  * 100 by combining two disabled base queries with a builder_formula.
@@ -27680,7 +27628,6 @@ paths:
                      interval: 2h
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_threshold_single:
                description: Fires when a pod consumes more than 80% of its requested
                  CPU for the whole evaluation window. Uses `k8s.pod.cpu_request_utilization`.
@@ -27749,7 +27696,6 @@ paths:
                      interval: 4h
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              notification_settings:
                description: 'Demonstrates the full notificationSettings surface:
                  `groupBy` merges alerts across labels to cut noise, `newGroupEvalDelay`
@@ -27848,7 +27794,6 @@ paths:
                    usePolicy: false
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              tiered_thresholds:
                description: Two tiers (warning and critical) in a single rule, each
                  with its own target, op, matchType, and channels so warnings and
@@ -27948,7 +27893,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              traces_error_rate_formula:
                description: Two disabled trace count queries (A = error spans where
                  hasError=true, B = total spans) combined via a builder_formula into
@@ -28038,7 +27982,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              traces_threshold_latency:
                description: Builder query against the traces signal with p99(duration_nano).
                  The series unit is ns (compositeQuery.unit), the target is in seconds
@@ -28107,7 +28050,6 @@ paths:
                      interval: 30m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
            schema:
              $ref: '#/components/schemas/RuletypesPostableRule'
      responses:
@@ -29021,7 +28963,6 @@ paths:
                      interval: 30m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              logs_threshold:
                description: Counts matching log records (ERROR severity + body contains)
                  over a rolling window. Fires at least once per evaluation when the
@@ -29088,7 +29029,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  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
@@ -29161,7 +29101,6 @@ paths:
                      interval: 4h
                  ruleType: anomaly_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_promql:
                description: PromQL expression instead of the builder. Dotted OTEL
                  resource attributes are quoted ("deployment.environment"). Useful
@@ -29217,7 +29156,6 @@ paths:
                      interval: 1h
                  ruleType: promql_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_threshold_formula:
                description: Computes disk utilization as (1 - available/capacity)
                  * 100 by combining two disabled base queries with a builder_formula.
@@ -29309,7 +29247,6 @@ paths:
                      interval: 2h
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              metric_threshold_single:
                description: Fires when a pod consumes more than 80% of its requested
                  CPU for the whole evaluation window. Uses `k8s.pod.cpu_request_utilization`.
@@ -29378,7 +29315,6 @@ paths:
                      interval: 4h
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              notification_settings:
                description: 'Demonstrates the full notificationSettings surface:
                  `groupBy` merges alerts across labels to cut noise, `newGroupEvalDelay`
@@ -29477,7 +29413,6 @@ paths:
                    usePolicy: false
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              tiered_thresholds:
                description: Two tiers (warning and critical) in a single rule, each
                  with its own target, op, matchType, and channels so warnings and
@@ -29577,7 +29512,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              traces_error_rate_formula:
                description: Two disabled trace count queries (A = error spans where
                  hasError=true, B = total spans) combined via a builder_formula into
@@ -29667,7 +29601,6 @@ paths:
                      interval: 15m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
              traces_threshold_latency:
                description: Builder query against the traces signal with p99(duration_nano).
                  The series unit is ns (compositeQuery.unit), the target is in seconds
@@ -29736,7 +29669,6 @@ paths:
                      interval: 30m
                  ruleType: threshold_rule
                  schemaVersion: v2alpha1
-                  version: v5
            schema:
              $ref: '#/components/schemas/RuletypesPostableRule'
      responses:
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -829,33 +829,26 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
 	jira = 'jira',
 }
-export interface AlertmanagertypesChannelJiraCloudAuthDTO {
+export interface AlertmanagertypesChannelJiraAuthDTO {
 	/**
 	 * @type string
 	 * @format password
-	 * @description The Atlassian API token paired with email. A secret; returned by create, update and fetch by ID, never by list.
+	 * @description The Atlassian API token paired with email. Required when deployment is cloud. A secret; returned by create, update and fetch by ID, never by list.
 	 */
-	apiToken: string;
+	apiToken?: string;
 	/**
 	 * @type string
-	 * @description The Atlassian account email used for basic auth.
+	 * @description The Atlassian account email used for basic auth. Required when deployment is cloud.
 	 */
-	email: string;
-}
-
-export interface AlertmanagertypesChannelJiraSelfHostedAuthDTO {
+	email?: string;
 	/**
 	 * @type string
 	 * @format password
-	 * @description The Jira personal access token, sent as a Bearer header. A secret; returned by create, update and fetch by ID, never by list.
+	 * @description The Jira personal access token, sent as a Bearer header. Required when deployment is selfhosted. A secret; returned by create, update and fetch by ID, never by list.
 	 */
-	pat: string;
+	pat?: string;
 }

-export type AlertmanagertypesChannelJiraAuthDTO =
-	| AlertmanagertypesChannelJiraCloudAuthDTO
-	| AlertmanagertypesChannelJiraSelfHostedAuthDTO;
-
 export enum AlertmanagertypesJiraDeploymentDTO {
 	cloud = 'cloud',
 	selfhosted = 'selfhosted',
@@ -13048,16 +13041,6 @@ export interface RuletypesPostableRuleDTO {
 	 * @description The rule payload schema.
 	 */
 	schemaVersion: RuletypesPostableRuleDTOSchemaVersion;
-	/**
-	 * @type string
-	 * @description The URL of the page the rule was created from. Informational; it is not used for evaluation.
-	 */
-	source?: string;
-	/**
-	 * @type string
-	 * @description The query payload version. Nothing reads it.
-	 */
-	version?: string;
 }

 export interface RuletypesPostableRuleViewDTO {
@@ -13150,11 +13133,6 @@ export interface RuletypesRuleDTO {
 	 * @description The rule payload schema.
 	 */
 	schemaVersion: RuletypesRuleDTOSchemaVersion;
-	/**
-	 * @type string
-	 * @description The URL of the page the rule was created from. Informational; it is not used for evaluation.
-	 */
-	source?: string;
 	/**
 	 * @description The current evaluation state: inactive, pending, recovering, firing, nodata or disabled.
 	 */
@@ -13168,11 +13146,6 @@ export interface RuletypesRuleDTO {
 	 * @type string
 	 */
 	updatedBy?: string;
-	/**
-	 * @type string
-	 * @description The query payload version. Nothing reads it.
-	 */
-	version?: string;
 }

 export enum RuletypesThresholdKindDTO {
--- a/frontend/src/assets/Logos/pixeltable.svg
+++ b/frontend/src/assets/Logos/pixeltable.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="1.25" y="1.25" width="21.5" height="21.5" rx="3.5" fill="none" stroke="#7A8291" stroke-width="1.5"/><g fill="#7A8291"><circle cx="7" cy="4.5" r="1.05"/><circle cx="9.5" cy="4.5" r="1.05"/><circle cx="12" cy="4.5" r="1.05"/><circle cx="14.5" cy="4.5" r="1.05"/><circle cx="7" cy="7" r="1.05"/><circle cx="17" cy="7" r="1.05"/><circle cx="7" cy="9.5" r="1.05"/><circle cx="17" cy="9.5" r="1.05"/><circle cx="7" cy="12" r="1.05"/><circle cx="9.5" cy="12" r="1.05"/><circle cx="12" cy="12" r="1.05"/><circle cx="14.5" cy="12" r="1.05"/><circle cx="7" cy="14.5" r="1.05"/><circle cx="7" cy="17" r="1.05"/><circle cx="7" cy="19.5" r="1.05"/></g></svg>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.provider.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.provider.tsx
@@ -48,22 +48,59 @@ export function QuerySearchV2Provider({
 	}, [initialExpression, store]);

 	const isInitialized = useRef(false);
-	useEffect(() => {
-		if (!isInitialized.current && urlExpression) {
-			const cleanedExpression = getUserExpressionFromCombined(
-				initialExpression,
-				urlExpression,
-			);
-			store.getState().initializeFromUrl(cleanedExpression);
-			isInitialized.current = true;
-		}
-	}, [urlExpression, initialExpression, store]);
-
+	const lastCommittedRef = useRef(committedExpression);
 	useEffect(() => {
 		if (isInitialized.current || !urlExpression) {
-			setUrlExpression(committedExpression || null);
+			return;
 		}
-	}, [committedExpression, setUrlExpression, urlExpression]);
+		isInitialized.current = true;
+		store
+			.getState()
+			.initializeFromUrl(
+				getUserExpressionFromCombined(initialExpression, urlExpression),
+			);
+	}, [urlExpression, initialExpression, store]);
+
+	// Back and Forward. Reads the browser's URL: after a write, nuqs can briefly
+	// report the value it replaced.
+	useEffect(() => {
+		const onPopState = (): void => {
+			isInitialized.current = true;
+			const urlValue = new URLSearchParams(window.location.search).get(
+				queryParamKey,
+			);
+			const expression = urlValue
+				? getUserExpressionFromCombined(initialExpression, urlValue)
+				: '';
+			// Another param changed; keep any text typed but not run.
+			if (expression === store.getState().committedExpression) {
+				return;
+			}
+			// Already in the URL, so the write below must not run for it.
+			lastCommittedRef.current = expression;
+			if (expression) {
+				store.getState().initializeFromUrl(expression);
+			} else {
+				store.getState().resetExpression();
+			}
+		};
+		window.addEventListener('popstate', onPopState);
+		return (): void => window.removeEventListener('popstate', onPopState);
+	}, [queryParamKey, initialExpression, store]);
+
+	// Write only when the committed filter changes, never in reply to a URL change.
+	useEffect(() => {
+		if (committedExpression === lastCommittedRef.current) {
+			return;
+		}
+		lastCommittedRef.current = committedExpression;
+		isInitialized.current = true;
+		const next = committedExpression || null;
+		if (next === urlExpression) {
+			return;
+		}
+		void setUrlExpression(next);
+	}, [committedExpression, urlExpression, setUrlExpression]);

 	useEffect(() => {
 		return (): void => {
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/tests/QuerySearchExpressionProvider.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/tests/QuerySearchExpressionProvider.test.tsx
@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
-import { act, renderHook } from '@testing-library/react';
+import { act, renderHook } from 'tests/test-utils';

 import {
 	useExpression,
 	useInitialExpression,
+	useInputExpression,
 	useQuerySearchInitialExpressionProp,
 	useQuerySearchOnChange,
 	useQuerySearchOnRun,
@@ -34,10 +35,22 @@ function createWrapper(
 	};
 }

+// Back or Forward. nuqs has not caught up yet, so its value is still the old one.
+function goTo(expression: string | null): void {
+	act(() => {
+		const search = expression
+			? `?${new URLSearchParams({ testExpression: expression })}`
+			: '';
+		window.history.pushState(null, '', `/${search}`);
+		window.dispatchEvent(new PopStateEvent('popstate'));
+	});
+}
+
 function useTestHooks(): {
 	expression: string;
 	userExpression: string;
 	initialExpression: string;
+	inputExpression: string;
 	querySearchInitialExpressionProp: string | undefined;
 	onChange: (expr: string) => void;
 	onRun: (expr: string) => void;
@@ -46,6 +59,7 @@ function useTestHooks(): {
 		expression: useExpression(),
 		userExpression: useUserExpression(),
 		initialExpression: useInitialExpression(),
+		inputExpression: useInputExpression(),
 		querySearchInitialExpressionProp: useQuerySearchInitialExpressionProp(),
 		onChange: useQuerySearchOnChange(),
 		onRun: useQuerySearchOnRun(),
@@ -56,6 +70,7 @@ describe('QuerySearchExpressionProvider', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockUrlValue = null;
+		window.history.replaceState(null, '', '/');
 	});

 	it('should provide initial context values', () => {
@@ -110,6 +125,96 @@ describe('QuerySearchExpressionProvider', () => {
 		expect(result.current.expression).toBe('status = 500');
 	});

+	it('follows Back and Forward from the browser URL', () => {
+		mockUrlValue = 'status = 500';
+		const { result } = renderHook(() => useTestHooks(), {
+			wrapper: createWrapper(),
+		});
+
+		goTo('status = 404');
+
+		expect(result.current.userExpression).toBe('status = 404');
+		expect(mockSetQueryState).not.toHaveBeenCalled();
+	});
+
+	it('clears the filter on Back to a URL without the param', () => {
+		mockUrlValue = 'status = 500';
+		const { result } = renderHook(() => useTestHooks(), {
+			wrapper: createWrapper(),
+		});
+
+		goTo(null);
+
+		expect(result.current.userExpression).toBe('');
+		expect(mockSetQueryState).not.toHaveBeenCalled();
+	});
+
+	it('keeps text typed but not run when Back changes another param', () => {
+		mockUrlValue = 'status = 500';
+		const { result } = renderHook(() => useTestHooks(), {
+			wrapper: createWrapper(),
+		});
+		act(() => {
+			result.current.onChange('status = 404');
+		});
+
+		goTo('status = 500');
+
+		expect(result.current.inputExpression).toBe('status = 404');
+	});
+
+	it('writes a run filter to the URL once and ignores it coming back', () => {
+		const { result, rerender } = renderHook(() => useTestHooks(), {
+			wrapper: createWrapper(),
+		});
+
+		act(() => {
+			result.current.onRun('status = 500');
+		});
+		expect(mockSetQueryState).toHaveBeenCalledTimes(1);
+		expect(mockSetQueryState).toHaveBeenLastCalledWith('status = 500');
+
+		mockUrlValue = 'status = 500';
+		rerender();
+
+		expect(result.current.userExpression).toBe('status = 500');
+		expect(mockSetQueryState).toHaveBeenCalledTimes(1);
+	});
+
+	it('keeps a run filter when the URL briefly reports the value it replaced', () => {
+		mockUrlValue = 'status = 500';
+		const { result, rerender } = renderHook(() => useTestHooks(), {
+			wrapper: createWrapper(),
+		});
+
+		act(() => {
+			result.current.onRun('status = 404');
+		});
+		mockUrlValue = 'status = 404';
+		rerender();
+		mockUrlValue = 'status = 500';
+		rerender();
+
+		expect(result.current.userExpression).toBe('status = 404');
+	});
+
+	it('keeps a newer run when a late URL value arrives after an empty mount', () => {
+		const { result, rerender } = renderHook(() => useTestHooks(), {
+			wrapper: createWrapper(),
+		});
+
+		act(() => {
+			result.current.onRun('status = 500');
+		});
+		act(() => {
+			result.current.onRun('status = 404');
+		});
+		mockUrlValue = 'status = 500';
+		rerender();
+
+		expect(result.current.userExpression).toBe('status = 404');
+	});
+
 	it('should throw error when used outside provider', () => {
 		expect(() => {
 			renderHook(() => useExpression());
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
@@ -15,11 +15,41 @@ $max-recents-shown: 5;
 		Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 		'Helvetica Neue', sans-serif;

+	.query-where-clause-row {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		// single-line editor: 36px .cm-line + 1px .cm-content border on each side
+		--button-height: 38px;
+
+		.query-where-clause-editor-container {
+			flex: 1;
+			min-width: 0;
+		}
+	}
+
 	.query-where-clause-editor-container {
 		position: relative;
 		display: flex;
 		flex-direction: row;

+		// The field draws one outline around the scope chip and the editor, so
+		// the editor inside draws none
+		&.hasScopeChip {
+			align-items: center;
+			gap: var(--spacing-3);
+			padding-left: var(--spacing-3);
+			border: 1px solid var(--l2-border);
+			border-radius: 2px;
+			background: var(--l1-background);
+			--query-builder-v2-border-color: transparent;
+			--query-builder-v2-background-color: transparent;
+
+			.query-where-clause-editor {
+				min-width: 0;
+			}
+		}
+
 		.query-search-initial-scope-label {
 			position: absolute;
 			left: 8px;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -1,6 +1,12 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { CircleCheck, Info, TriangleAlert, Filter } from '@signozhq/icons';
+import {
+	CircleCheck,
+	Info,
+	TriangleAlert,
+	Filter,
+	Play,
+} from '@signozhq/icons';
 import {
 	autocompletion,
 	closeCompletion,
@@ -16,6 +22,7 @@ import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
 import { Button, Card, Collapse, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
+import { Button as SignozButton } from '@signozhq/ui/button';
 import cx from 'classnames';
 import {
 	negationQueryOperatorSuggestions,
@@ -59,6 +66,7 @@ import {
 	SUGGESTION_FETCH_DEBOUNCE_MS,
 	SUGGESTIONS_SECTION,
 } from './constants';
+import { ScopeChip } from './ScopeChip/ScopeChip';
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
@@ -105,9 +113,14 @@ interface QuerySearchProps {
 	signalSource?: string;
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
+	showRunButton?: boolean;
+	/** Shows the Run button busy while the page's queries fetch. */
+	isLoadingQueries?: boolean;
 	showFilterSuggestionsWithoutMetric?: boolean;
 	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
 	initialExpression?: string;
+	/** Shows `initialExpression` as a locked chip in the field instead of the scope icon. */
+	showScopeChip?: boolean;
 	/** When set, replaces the generic value-suggestion API with a custom fetcher. */
 	valueSuggestionsOverride?: (
 		key: string,
@@ -125,10 +138,13 @@ function QuerySearch({
 	queryData,
 	dataSource,
 	onRun,
+	showRunButton,
+	isLoadingQueries,
 	signalSource,
 	hardcodedAttributeKeys,
 	showFilterSuggestionsWithoutMetric,
 	initialExpression,
+	showScopeChip: showScopeChipProp,
 	metricNamespace,
 	valueSuggestionsOverride,
 }: QuerySearchProps): JSX.Element {
@@ -148,6 +164,7 @@ function QuerySearch({
 	const editorRef = useRef<EditorView | null>(null);

 	const isScopedFilter = initialExpression !== undefined;
+	const showScopeChip = !!showScopeChipProp && !!initialExpression;

 	const validateExpressionForEditor = useCallback(
 		(editorDoc: string): void => {
@@ -173,6 +190,18 @@ function QuerySearch({
 		[],
 	);

+	const handleRun = useCallback((): void => {
+		if (!onRun) {
+			return;
+		}
+		const user = getCurrentExpression();
+		onRun(
+			isScopedFilter
+				? combineInitialAndUserExpression(initialExpression ?? '', user)
+				: user,
+		);
+	}, [onRun, getCurrentExpression, isScopedFilter, initialExpression]);
+
 	const updateEditorValue = useCallback(
 		(value: string, options: { skipOnChange?: boolean } = {}): void => {
 			const view = editorRef.current;
@@ -1557,169 +1586,182 @@ function QuerySearch({
 				</div>
 			)}

-			<div className="query-where-clause-editor-container">
-				{isScopedFilter ? (
-					<Tooltip title={initialExpression || ''} placement="left">
-						<div className="query-search-initial-scope-label">
-							<Filter
+			<div className="query-where-clause-row">
+				<div
+					className={cx('query-where-clause-editor-container', {
+						hasScopeChip: showScopeChip,
+					})}
+				>
+					{showScopeChip && <ScopeChip expression={initialExpression ?? ''} />}
+					{isScopedFilter && !showScopeChip ? (
+						<Tooltip title={initialExpression || ''} placement="left">
+							<div className="query-search-initial-scope-label">
+								<Filter
+									size={14}
+									style={{
+										opacity: 0.9,
+										color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+									}}
+								/>
+							</div>
+						</Tooltip>
+					) : null}
+					<Tooltip
+						title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
+						placement="left"
+					>
+						<a
+							href="https://signoz.io/docs/userguide/search-syntax/"
+							target="_blank"
+							rel="noopener noreferrer"
+							style={{
+								position: 'absolute',
+								top: 8,
+								right: validation.isValid === false && getCurrentExpression() ? 40 : 8, // Move left when error shown
+								cursor: 'help',
+								zIndex: 10,
+								transition: 'right 0.2s ease',
+								display: 'inline-flex',
+								alignItems: 'center',
+								color: '#8c8c8c',
+							}}
+							onClick={(e): void => e.stopPropagation()}
+						>
+							<Info
 								size={14}
 								style={{
 									opacity: 0.9,
 									color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
 								}}
 							/>
-						</div>
+						</a>
 					</Tooltip>
-				) : null}
-				<Tooltip
-					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
-					placement="left"
-				>
-					<a
-						href="https://signoz.io/docs/userguide/search-syntax/"
-						target="_blank"
-						rel="noopener noreferrer"
-						style={{
-							position: 'absolute',
-							top: 8,
-							right: validation.isValid === false && getCurrentExpression() ? 40 : 8, // Move left when error shown
-							cursor: 'help',
-							zIndex: 10,
-							transition: 'right 0.2s ease',
-							display: 'inline-flex',
-							alignItems: 'center',
-							color: '#8c8c8c',
-						}}
-						onClick={(e): void => e.stopPropagation()}
-					>
-						<Info
-							size={14}
-							style={{
-								opacity: 0.9,
-								color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-							}}
-						/>
-					</a>
-				</Tooltip>

-				<CodeMirror
-					theme={isDarkMode ? copilot : githubLight}
-					onChange={handleChange}
-					onUpdate={handleUpdate}
-					onCreateEditor={handleEditorCreate}
-					data-testid="query-where-clause-editor"
-					className={cx('query-where-clause-editor', {
-						isValid: validation.isValid === true,
-						hasErrors: validation.errors.length > 0,
-						hasInitialExpression: isScopedFilter,
-					})}
-					extensions={[
-						autocompletion({
-							override: [combinedSuggestions],
-							defaultKeymap: true,
-							closeOnBlur: true,
-							activateOnTyping: true,
-							maxRenderedOptions: 50,
-							addToOptions: [{ render: renderRecentDeleteButton, position: 100 }],
-						}),
-						javascript({ jsx: false, typescript: false }),
-						EditorView.lineWrapping,
-						stopEventsExtension,
-						Prec.highest(
-							keymap.of([
-								...completionKeymap,
-								{
-									key: 'Escape',
-									run: closeCompletion,
-								},
-								{
-									key: 'Enter',
-									preventDefault: true,
-									// Prevent default behavior of Enter to add new line
-									// and instead run a custom action
-									run: (): boolean => true,
-								},
-								{
-									key: 'Mod-Enter',
-									preventDefault: true,
-									// Prevent default behavior of Mod-Enter to add new line
-									// and instead run a custom action
-									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
-									run: (): boolean => {
-										if (onRun && typeof onRun === 'function') {
-											const user = getCurrentExpression();
-											onRun(
-												isScopedFilter
-													? combineInitialAndUserExpression(initialExpression ?? '', user)
-													: user,
-											);
-										}
-										return true;
-									},
-								},
-								{
-									key: 'Shift-Enter',
-									preventDefault: true,
-									// Prevent default behavior of Shift-Enter to add new line
-									run: (): boolean => true,
-								},
-							]),
-						),
-					]}
-					placeholder={placeholder}
-					basicSetup={{
-						lineNumbers: false,
-					}}
-					onFocus={(): void => {
-						setIsFocused(true);
-					}}
-					onBlur={handleBlur}
-				/>
-
-				{getCurrentExpression() && validation.isValid === false && !isFocused && (
-					<div
-						className={cx('query-status-container', {
+					<CodeMirror
+						theme={isDarkMode ? copilot : githubLight}
+						onChange={handleChange}
+						onUpdate={handleUpdate}
+						onCreateEditor={handleEditorCreate}
+						data-testid="query-where-clause-editor"
+						className={cx('query-where-clause-editor', {
+							isValid: validation.isValid === true,
 							hasErrors: validation.errors.length > 0,
+							hasInitialExpression: isScopedFilter && !showScopeChip,
 						})}
-						data-testid="query-validation-status"
-					>
-						<Popover
-							placement="bottomRight"
-							showArrow={false}
-							content={
-								<div className="query-status-content">
-									<div className="query-status-content-header">
-										<div className="query-validation">
-											<div className="query-validation-errors">
-												{validation.errors.map((error) => (
-													<div key={error.message} className="query-validation-error">
-														<div className="query-validation-error">
-															{error.line}:{error.column} - {error.message}
+						extensions={[
+							autocompletion({
+								override: [combinedSuggestions],
+								defaultKeymap: true,
+								closeOnBlur: true,
+								activateOnTyping: true,
+								maxRenderedOptions: 50,
+								addToOptions: [{ render: renderRecentDeleteButton, position: 100 }],
+							}),
+							javascript({ jsx: false, typescript: false }),
+							EditorView.lineWrapping,
+							stopEventsExtension,
+							Prec.highest(
+								keymap.of([
+									...completionKeymap,
+									{
+										key: 'Escape',
+										run: closeCompletion,
+									},
+									{
+										key: 'Enter',
+										preventDefault: true,
+										// Prevent default behavior of Enter to add new line
+										// and instead run a custom action
+										run: (): boolean => true,
+									},
+									{
+										key: 'Mod-Enter',
+										preventDefault: true,
+										// Prevent default behavior of Mod-Enter to add new line
+										// and instead run a custom action
+										// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
+										run: (): boolean => {
+											handleRun();
+											return true;
+										},
+									},
+									{
+										key: 'Shift-Enter',
+										preventDefault: true,
+										// Prevent default behavior of Shift-Enter to add new line
+										run: (): boolean => true,
+									},
+								]),
+							),
+						]}
+						placeholder={placeholder}
+						basicSetup={{
+							lineNumbers: false,
+						}}
+						onFocus={(): void => {
+							setIsFocused(true);
+						}}
+						onBlur={handleBlur}
+					/>
+
+					{getCurrentExpression() && validation.isValid === false && !isFocused && (
+						<div
+							className={cx('query-status-container', {
+								hasErrors: validation.errors.length > 0,
+							})}
+							data-testid="query-validation-status"
+						>
+							<Popover
+								placement="bottomRight"
+								showArrow={false}
+								content={
+									<div className="query-status-content">
+										<div className="query-status-content-header">
+											<div className="query-validation">
+												<div className="query-validation-errors">
+													{validation.errors.map((error) => (
+														<div key={error.message} className="query-validation-error">
+															<div className="query-validation-error">
+																{error.line}:{error.column} - {error.message}
+															</div>
 														</div>
-													</div>
-												))}
+													))}
+												</div>
 											</div>
 										</div>
 									</div>
-								</div>
-							}
-							overlayClassName="query-status-popover"
-						>
-							{validation.isValid ? (
-								<Button
-									type="text"
-									icon={<CircleCheck size="md" />}
-									className="periscope-btn ghost"
-								/>
-							) : (
-								<Button
-									type="text"
-									icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
-									className="periscope-btn ghost"
-								/>
-							)}
-						</Popover>
-					</div>
+								}
+								overlayClassName="query-status-popover"
+							>
+								{validation.isValid ? (
+									<Button
+										type="text"
+										icon={<CircleCheck size="md" />}
+										className="periscope-btn ghost"
+									/>
+								) : (
+									<Button
+										type="text"
+										icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+										className="periscope-btn ghost"
+									/>
+								)}
+							</Popover>
+						</div>
+					)}
+				</div>
+				{showRunButton && (
+					<SignozButton
+						variant="solid"
+						color="secondary"
+						size="md"
+						prefix={<Play size={14} />}
+						loading={isLoadingQueries}
+						onClick={handleRun}
+						testId="query-search-run-button"
+					>
+						Run
+					</SignozButton>
 				)}
 			</div>

@@ -1813,12 +1855,15 @@ function QuerySearch({

 QuerySearch.defaultProps = {
 	onRun: undefined,
+	showRunButton: false,
+	isLoadingQueries: false,
 	signalSource: '',
 	hardcodedAttributeKeys: undefined,
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
 	showFilterSuggestionsWithoutMetric: false,
 	initialExpression: undefined,
+	showScopeChip: false,
 };

 export default QuerySearch;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/ScopeChip/ScopeChip.module.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/ScopeChip/ScopeChip.module.scss
@@ -0,0 +1,57 @@
+.scopeChip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	flex: 0 1 auto;
+	min-width: 0;
+	max-width: 420px;
+	padding: var(--spacing-1) var(--spacing-3);
+	border-radius: 2px;
+	background: var(--l3-background);
+	color: var(--l2-foreground);
+	font-size: 12px;
+	line-height: 20px;
+	cursor: default;
+}
+
+.scopeIcon {
+	flex: none;
+}
+
+.scopeMore {
+	flex: none;
+	color: var(--l3-foreground);
+}
+
+// The editor beside it is CodeMirror on the copilot theme in dark and
+// githubLight in light; the chip borrows those token colours so one filter
+// does not read as two
+.scopeKey {
+	color: #939da5;
+}
+
+.scopeOperator {
+	color: #939da5;
+}
+
+.scopeValue {
+	color: #5bec95;
+}
+
+:global(.lightMode) {
+	.scopeKey,
+	.scopeOperator {
+		color: #005cc5;
+	}
+
+	.scopeValue {
+		color: #032f62;
+	}
+}
+
+.scopeExpression {
+	font-family: var(--font-mono, monospace);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/ScopeChip/ScopeChip.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/ScopeChip/ScopeChip.tsx
@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { Lock } from '@signozhq/icons';
+import { Tooltip } from '@signozhq/ui/tooltip';
+import { extractQueryPairs } from 'utils/queryContextUtils';
+
+import styles from './ScopeChip.module.scss';
+
+interface ScopeChipProps {
+	expression: string;
+}
+
+/**
+ * The locked half of the filter. It reads like the editor beside it: the last
+ * clause carries the relation, the ones scoping it are counted instead.
+ */
+export function ScopeChip({ expression }: ScopeChipProps): JSX.Element {
+	const clauses = useMemo(() => extractQueryPairs(expression), [expression]);
+	const relation = clauses[clauses.length - 1];
+
+	return (
+		<Tooltip title={expression} side="top">
+			<span className={styles.scopeChip} data-testid="query-search-scope-chip">
+				<Lock size={12} className={styles.scopeIcon} />
+				<span className={styles.scopeExpression}>
+					{relation ? (
+						<>
+							<span className={styles.scopeKey}>{relation.key}</span>
+							<span className={styles.scopeOperator}>{` ${relation.operator} `}</span>
+							<span className={styles.scopeValue}>{relation.value}</span>
+						</>
+					) : (
+						expression
+					)}
+				</span>
+				{clauses.length > 1 && (
+					<span className={styles.scopeMore}>{`+${clauses.length - 1}`}</span>
+				)}
+			</span>
+		</Tooltip>
+	);
+}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/QuerySearch.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/QuerySearch.test.tsx
@@ -224,6 +224,134 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		await waitFor(() => expect(onRun).toHaveBeenCalled(), { timeout: 2000 });
 	});

+	it('does not render the run button by default', () => {
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.logs.builder.queryData[0]}
+				dataSource={DataSource.LOGS}
+				onRun={jest.fn()}
+			/>,
+		);
+
+		expect(
+			screen.queryByTestId('query-search-run-button'),
+		).not.toBeInTheDocument();
+	});
+
+	it('calls onRun with the editor text when the run button is clicked', async () => {
+		const onRun = jest.fn() as jest.MockedFunction<(q: string) => void>;
+
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={{
+					...initialQueriesMap.logs.builder.queryData[0],
+					filter: { expression: SAMPLE_STATUS_QUERY },
+				}}
+				dataSource={DataSource.LOGS}
+				onRun={onRun}
+				showRunButton
+			/>,
+		);
+
+		await waitFor(() =>
+			expect(document.querySelector(CM_EDITOR_SELECTOR)?.textContent).toBe(
+				SAMPLE_STATUS_QUERY,
+			),
+		);
+
+		await userEvent.click(screen.getByTestId('query-search-run-button'));
+
+		expect(onRun).toHaveBeenCalledWith(SAMPLE_STATUS_QUERY);
+	});
+
+	it('shows the locked scope as a chip in place of the scope icon', () => {
+		const scope = "kind_string = 'Client' AND http_host = 'api.example.com'";
+		const { container } = render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.traces.builder.queryData[0]}
+				dataSource={DataSource.TRACES}
+				initialExpression={scope}
+				showScopeChip
+			/>,
+		);
+
+		const chip = screen.getByTestId('query-search-scope-chip');
+		expect(chip).toHaveTextContent("http_host = 'api.example.com'");
+		expect(chip).toHaveTextContent('+1');
+		expect(chip).not.toHaveTextContent('kind_string');
+		expect(
+			container.querySelector('.query-search-initial-scope-label'),
+		).not.toBeInTheDocument();
+	});
+
+	it('keeps the scope icon unless the chip is asked for', () => {
+		const { container } = render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.traces.builder.queryData[0]}
+				dataSource={DataSource.TRACES}
+				initialExpression="kind_string = 'Client'"
+			/>,
+		);
+
+		expect(
+			screen.queryByTestId('query-search-scope-chip'),
+		).not.toBeInTheDocument();
+		expect(
+			container.querySelector('.query-search-initial-scope-label'),
+		).toBeInTheDocument();
+	});
+
+	it('shows the run button busy while the queries load', () => {
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.logs.builder.queryData[0]}
+				dataSource={DataSource.LOGS}
+				onRun={jest.fn()}
+				showRunButton
+				isLoadingQueries
+			/>,
+		);
+
+		expect(screen.getByTestId('query-search-run-button')).toHaveAttribute(
+			'aria-busy',
+			'true',
+		);
+	});
+
+	it('runs the locked scope combined with the editor text', async () => {
+		const onRun = jest.fn() as jest.MockedFunction<(q: string) => void>;
+		const scope = "kind_string = 'Client'";
+
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={{
+					...initialQueriesMap.traces.builder.queryData[0],
+					filter: { expression: SAMPLE_STATUS_QUERY },
+				}}
+				dataSource={DataSource.TRACES}
+				onRun={onRun}
+				initialExpression={scope}
+				showRunButton
+			/>,
+		);
+
+		await waitFor(() =>
+			expect(document.querySelector(CM_EDITOR_SELECTOR)?.textContent).toBe(
+				SAMPLE_STATUS_QUERY,
+			),
+		);
+
+		await userEvent.click(screen.getByTestId('query-search-run-button'));
+
+		expect(onRun).toHaveBeenCalledWith(`${scope} AND (${SAMPLE_STATUS_QUERY})`);
+	});
+
 	it('initializes CodeMirror with expression from queryData.filter.expression on mount', async () => {
 		const testExpression =
 			"http.status_code >= 500 AND service.name = 'frontend'";
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -69,8 +69,6 @@ export const REACT_QUERY_KEY = {
 	GET_NESTED_ENDPOINTS_LIST: 'GET_NESTED_ENDPOINTS_LIST',
 	GET_ENDPOINT_METRICS_DATA: 'GET_ENDPOINT_METRICS_DATA',
 	GET_ENDPOINT_STATUS_CODE_DATA: 'GET_ENDPOINT_STATUS_CODE_DATA',
-	GET_ENDPOINT_RATE_OVER_TIME_DATA: 'GET_ENDPOINT_RATE_OVER_TIME_DATA',
-	GET_ENDPOINT_LATENCY_OVER_TIME_DATA: 'GET_ENDPOINT_LATENCY_OVER_TIME_DATA',
 	GET_ENDPOINT_DROPDOWN_DATA: 'GET_ENDPOINT_DROPDOWN_DATA',
 	GET_ENDPOINT_DEPENDENT_SERVICES_DATA: 'GET_ENDPOINT_DEPENDENT_SERVICES_DATA',
 	GET_ENDPOINT_STATUS_CODE_BAR_CHARTS_DATA:
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx
@@ -1,20 +1,24 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Select } from 'antd';
+import { useCallback, useEffect, useMemo } from 'react';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
 import { ENTITY_VERSION_V5 } from 'constants/app';
-import { initialQueriesMap } from 'constants/queryBuilder';
 import {
 	getAllEndpointsWidgetData,
-	getGroupByFiltersFromGroupByValues,
+	getGroupByExpressionFromRowData,
 } from 'container/ApiMonitoring/utils';
 import GridCard from 'container/WidgetCard/Card';
-import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
-import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
+import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
 import { isEqual } from 'lodash-es';
+import { parseAsString, useQueryState } from 'nuqs';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

+import { ENDPOINT_STATS_EXPRESSION_KEY } from '../../../filterParamKeys';
 import { useApiMonitoringParams } from '../../../queryParams';
 import { SPAN_ATTRIBUTES, VIEWS } from './constants';
+import { useFilterExpression } from './hooks/useFilterExpression';
+import { useWidgetQueries } from './hooks/useWidgetQueries';

 function AllEndPoints({
 	domainName,
@@ -23,8 +27,6 @@ function AllEndPoints({
 	groupBy,
 	setGroupBy,
 	timeRange,
-	initialFilters,
-	setInitialFiltersEndPointStats,
 }: {
 	domainName: string;
 	setSelectedEndPointName: (name: string) => void;
@@ -35,113 +37,50 @@ function AllEndPoints({
 		startTime: number;
 		endTime: number;
 	};
-	initialFilters: IBuilderQuery['filters'];
-	setInitialFiltersEndPointStats: (filters: IBuilderQuery['filters']) => void;
 }): JSX.Element {
 	const [params, setParams] = useApiMonitoringParams();
-	const [groupBySearchValue, setGroupBySearchValue] = useState<string>('');
-	const [allAvailableGroupByOptions, setAllAvailableGroupByOptions] = useState<{
-		[key: string]: any;
-	}>({});
-
-	const { data: groupByFiltersData, isLoading: isLoadingGroupByFilters } =
-		useGetAggregateKeys({
-			dataSource: DataSource.TRACES,
-			aggregateAttribute: '',
-			aggregateOperator: 'noop',
-			searchText: groupBySearchValue,
-			tagType: '',
-		});
-
-	const [groupByOptions, setGroupByOptions] = useState<
-		{ value: string; label: string }[]
-	>([]);
+	const [, setEndPointStatsExpression] = useQueryState(
+		ENDPOINT_STATS_EXPRESSION_KEY,
+		parseAsString,
+	);

 	// --- FILTERS STATE SYNC ---
-	const [filters, setFilters] = useState<IBuilderQuery['filters']>(() => {
-		if (params.allEndpointsLocalFilters) {
-			return params.allEndpointsLocalFilters;
-		}
-		// Initialize filters based on the initial endPointName prop
-		const initialItems = [...(initialFilters?.items || [])];
-		return { op: 'AND', items: initialItems };
+	const {
+		expression: filterExpression,
+		initialExpression: scopeExpression,
+		queryData,
+		onDraftChange,
+		onRun,
+		onBlur: handleFilterBlur,
+	} = useFilterExpression({
+		groupBy,
 	});

-	// Sync params to local filters state on param change
-	useEffect(() => {
-		if (
-			params.allEndpointsLocalFilters &&
-			!isEqual(params.allEndpointsLocalFilters, filters)
-		) {
-			setFilters(params.allEndpointsLocalFilters);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [params.allEndpointsLocalFilters]);
-
-	// Handler for changes from the QueryBuilderSearchV2 component
-	const handleFilterChange = useCallback(
-		(newFilters: IBuilderQuery['filters']): void => {
-			setFilters(newFilters);
-			setParams({ allEndpointsLocalFilters: newFilters });
-		},
-		[setParams],
-	);
-
-	const currentQuery = initialQueriesMap[DataSource.TRACES];
-
-	const updatedCurrentQuery = useMemo(
-		() => ({
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: [
-					{
-						...currentQuery.builder.queryData[0],
-						dataSource: DataSource.TRACES,
-						filters, // Use the local filters state
-					},
-				],
-			},
-		}),
-		[filters, currentQuery],
-	);
-
-	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
-
 	const allEndpointsWidgetData = useMemo(
-		() => getAllEndpointsWidgetData(groupBy, domainName, filters),
-		[groupBy, domainName, filters],
+		() => getAllEndpointsWidgetData(groupBy, domainName, filterExpression),
+		[groupBy, domainName, filterExpression],
+	);
+
+	const tableWidgets = useMemo(
+		() => [allEndpointsWidgetData],
+		[allEndpointsWidgetData],
+	);
+	const { isFetching: isFetchingTable, refetch: refetchTable } =
+		useWidgetQueries(tableWidgets);
+
+	const handleRun = useCallback(
+		(value: string): void => onRun(value, refetchTable),
+		[onRun, refetchTable],
 	);

 	// --- GROUP BY STATE SYNC (existing) ---
 	const handleGroupByChange = useCallback(
 		(value: IBuilderQuery['groupBy']) => {
-			const newGroupBy = [];
-
-			for (let index = 0; index < value.length; index++) {
-				const element = value[index] as unknown as string;
-
-				// Check if the key exists in our cached options first
-				if (allAvailableGroupByOptions[element]) {
-					newGroupBy.push(allAvailableGroupByOptions[element]);
-				} else {
-					// If not found in cache, check the current filtered results
-					const key = groupByFiltersData?.payload?.attributeKeys?.find(
-						(key) => key.key === element,
-					);
-
-					if (key) {
-						newGroupBy.push(key);
-					}
-				}
-			}
-
-			setGroupBy(newGroupBy);
-			setGroupBySearchValue('');
+			setGroupBy(value);
 			// Update params
-			setParams({ groupBy: newGroupBy.map((g) => g.key) });
+			setParams({ groupBy: value.map((g) => g.key) });
 		},
-		[groupByFiltersData, setGroupBy, allAvailableGroupByOptions, setParams],
+		[setGroupBy, setParams],
 	);

 	// Sync params to local groupBy state on param change
@@ -154,77 +93,31 @@ function AllEndPoints({
 				groupBy.map((g) => g.key),
 			)
 		) {
-			// Only update if different
-			const newGroupBy = params.groupBy
-				.map((key) => allAvailableGroupByOptions[key])
-				.filter(Boolean);
-			if (newGroupBy.length === params.groupBy.length) {
-				setGroupBy(newGroupBy);
-			}
-		}
-	}, [params.groupBy, allAvailableGroupByOptions, groupBy, setGroupBy]);
-
-	useEffect(() => {
-		if (groupByFiltersData?.payload) {
-			// Update dropdown options
-			setGroupByOptions(
-				groupByFiltersData?.payload?.attributeKeys?.map((filter) => ({
-					value: filter.key,
-					label: filter.key,
-				})) || [],
+			setGroupBy(
+				params.groupBy.map((key) => chooseAutocompleteFromCustomValue([], key)),
 			);
-
-			// Cache all available options to preserve selected values using functional update
-			setAllAvailableGroupByOptions((prevOptions) => {
-				const newOptions = { ...prevOptions };
-				groupByFiltersData?.payload?.attributeKeys?.forEach((filter) => {
-					newOptions[filter.key] = filter;
-				});
-				return newOptions;
-			});
 		}
-	}, [groupByFiltersData]); // Only depends on groupByFiltersData now
-
-	// Cache existing selected options on component mount
-	useEffect(() => {
-		if (groupBy && groupBy.length > 0) {
-			setAllAvailableGroupByOptions((prevOptions) => {
-				const newOptions = { ...prevOptions };
-				groupBy.forEach((option) => {
-					newOptions[option.key] = option;
-				});
-				return newOptions;
-			});
-		}
-	}, [groupBy]);
+	}, [params.groupBy, groupBy, setGroupBy]);

 	const onRowClick = useCallback(
 		(props: any): void => {
 			setSelectedEndPointName(props[SPAN_ATTRIBUTES.HTTP_URL] as string);
 			setSelectedView(VIEWS.ENDPOINT_STATS);
-			const initialItems = [
-				...(filters?.items || []),
-				...(getGroupByFiltersFromGroupByValues(props, groupBy)?.items || []),
-			];
-			setInitialFiltersEndPointStats({
-				items: initialItems,
-				op: 'AND',
-			});
+			const statsExpression = combineInitialAndUserExpression(
+				getGroupByExpressionFromRowData(props),
+				filterExpression,
+			);
+			void setEndPointStatsExpression(statsExpression || null);
 			setParams({
 				selectedEndPointName: props[SPAN_ATTRIBUTES.HTTP_URL] as string,
 				selectedView: VIEWS.ENDPOINT_STATS,
-				endPointDetailsLocalFilters: {
-					items: initialItems,
-					op: 'AND',
-				},
 			});
 		},
 		[
-			filters,
-			setInitialFiltersEndPointStats,
+			filterExpression,
+			setEndPointStatsExpression,
 			setSelectedEndPointName,
 			setSelectedView,
-			groupBy,
 			setParams,
 		],
 	);
@@ -232,28 +125,28 @@ function AllEndPoints({
 	return (
 		<div className="all-endpoints-container">
 			<div className="all-endpoints-header">
-				<div className="filter-container">
-					<QueryBuilderSearchV2
-						query={query}
-						onChange={handleFilterChange}
+				<div className="filter-container" onBlur={handleFilterBlur}>
+					<QuerySearch
+						queryData={queryData}
+						onChange={onDraftChange}
+						onRun={handleRun}
+						showRunButton
+						isLoadingQueries={isFetchingTable}
+						initialExpression={scopeExpression}
+						showScopeChip
+						dataSource={DataSource.TRACES}
 						placeholder="Search for filters..."
 					/>
 				</div>
 			</div>
 			<div className="group-by-container">
 				<div className="group-by-label"> Group by </div>
-				<Select
-					className="group-by-select"
-					loading={isLoadingGroupByFilters}
-					mode="multiple"
-					value={groupBy}
-					allowClear
-					maxTagCount="responsive"
-					placeholder="Search for attribute"
-					options={groupByOptions}
+				<GroupByFilter
+					query={queryData}
 					onChange={handleGroupByChange}
-					onSearch={(value: string): void => setGroupBySearchValue(value)}
-				/>{' '}
+					disabled={false}
+					placeholder="Search for attribute"
+				/>
 			</div>
 			<div className="endpoints-table-container">
 				<GridCard
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.styles.scss
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.styles.scss
@@ -195,16 +195,6 @@
 			line-height: 18px;
 			letter-spacing: -0.07px;
 		}
-
-		.group-by-select {
-			width: 100%;
-			.ant-select-selector {
-				font-size: 14px;
-				border-radius: 2px 0px 0px 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-			}
-		}
 	}
 	// Add border-bottom to table cells when pagination is not present
 	.ant-spin-container:not(:has(.ant-pagination)) .ant-table-cell {
@@ -365,16 +355,9 @@
 .top-errors-dropdown-container {
 	display: flex;
 	flex-direction: row;
+	justify-content: space-between;
 	gap: 10px;
 	align-items: center;
-
-	.endpoint-details-filters-container-dropdown {
-		width: 100%;
-	}
-
-	.endpoint-details-filters-container-search {
-		flex: 1;
-	}
 }

 .endpoint-details-container {
@@ -416,29 +399,8 @@

 	.endpoint-details-filters-container {
 		display: flex;
-		flex-direction: row;
-		align-items: center;
-		border: 1px solid var(--l1-border);
-		height: 36px;
-		box-sizing: content-box;
-		.ant-select-selector {
-			border: none !important;
-		}
-
-		.endpoint-details-filters-container-dropdown {
-			width: 120px;
-			border-right: 1px solid var(--l1-border);
-			height: 36px;
-			display: flex;
-			align-items: center;
-			.ant-select-single {
-				height: 32px;
-			}
-		}
-
-		.endpoint-details-filters-container-search {
-			flex: 1;
-		}
+		flex-direction: column;
+		gap: 8px;
 	}

 	.ant-select-item,
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx
@@ -6,6 +6,7 @@ import { Button, Drawer } from 'antd';
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
+import { QuerySearchV2Provider } from 'components/QueryBuilderV2';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
 	CustomTimeType,
@@ -17,7 +18,12 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';

+import {
+	ALL_ENDPOINTS_EXPRESSION_KEY,
+	ENDPOINT_STATS_EXPRESSION_KEY,
+} from '../../../filterParamKeys';
 import { useApiMonitoringParams } from '../../../queryParams';
+import { getDomainScopeExpression } from '../../../utils';
 import AllEndPoints from './AllEndPoints';
 import DomainMetrics from './components/DomainMetrics';
 import { VIEW_TYPES, VIEWS } from './constants';
@@ -34,14 +40,14 @@ function DomainDetails({
 	selectedDomainIndex,
 	setSelectedDomainIndex,
 	domainListLength,
-	domainListFilters,
+	domainListFilterExpression,
 }: {
 	domainData: any;
 	handleClose: () => void;
 	selectedDomainIndex: number;
 	setSelectedDomainIndex: (index: number) => void;
 	domainListLength: number;
-	domainListFilters: IBuilderQuery['filters'];
+	domainListFilterExpression: string;
 }): JSX.Element {
 	const [params, setParams] = useApiMonitoringParams();
 	const [selectedView, setSelectedView] = useState<VIEWS>(
@@ -53,8 +59,16 @@ function DomainDetails({
 	const [endPointsGroupBy, setEndPointsGroupBy] = useState<
 		IBuilderQuery['groupBy']
 	>([]);
-	const [initialFiltersEndPointStats, setInitialFiltersEndPointStats] =
-		useState<IBuilderQuery['filters']>(domainListFilters);
+
+	const domainName = domainData?.domainName ?? '';
+	const allEndpointsScope = useMemo(
+		() => getDomainScopeExpression(domainName),
+		[domainName],
+	);
+	const endPointStatsScope = useMemo(
+		() => getDomainScopeExpression(domainName, selectedEndPointName),
+		[domainName, selectedEndPointName],
+	);

 	const handleTabChange = (value: string): void => {
 		setSelectedView(value as VIEWS);
@@ -222,7 +236,7 @@ function DomainDetails({
 				<>
 					<DomainMetrics
 						domainName={domainData.domainName}
-						domainListFilters={domainListFilters}
+						domainListFilterExpression={domainListFilterExpression}
 						timeRange={modalTimeRange}
 					/>
 					<div className="views-tabs-container">
@@ -253,34 +267,43 @@ function DomainDetails({
 						/>
 					</div>
 					{selectedView === VIEW_TYPES.ALL_ENDPOINTS && (
-						<AllEndPoints
-							domainName={domainData.domainName}
-							setSelectedEndPointName={handleEndPointChange}
-							setSelectedView={setSelectedView}
-							groupBy={endPointsGroupBy}
-							setGroupBy={setEndPointsGroupBy}
-							timeRange={modalTimeRange}
-							initialFilters={domainListFilters}
-							setInitialFiltersEndPointStats={setInitialFiltersEndPointStats}
-						/>
+						<QuerySearchV2Provider
+							queryParamKey={ALL_ENDPOINTS_EXPRESSION_KEY}
+							initialExpression={allEndpointsScope}
+							persistOnUnmount
+						>
+							<AllEndPoints
+								domainName={domainData.domainName}
+								setSelectedEndPointName={handleEndPointChange}
+								setSelectedView={setSelectedView}
+								groupBy={endPointsGroupBy}
+								setGroupBy={setEndPointsGroupBy}
+								timeRange={modalTimeRange}
+							/>
+						</QuerySearchV2Provider>
 					)}

 					{selectedView === VIEW_TYPES.ENDPOINT_STATS && (
-						<EndPointDetails
-							domainName={domainData.domainName}
-							endPointName={selectedEndPointName}
-							setSelectedEndPointName={handleEndPointChange}
-							initialFilters={initialFiltersEndPointStats}
-							timeRange={modalTimeRange}
-							handleTimeChange={handleTimeChange}
-						/>
+						<QuerySearchV2Provider
+							queryParamKey={ENDPOINT_STATS_EXPRESSION_KEY}
+							initialExpression={endPointStatsScope}
+							persistOnUnmount
+						>
+							<EndPointDetails
+								domainName={domainData.domainName}
+								endPointName={selectedEndPointName}
+								setSelectedEndPointName={handleEndPointChange}
+								timeRange={modalTimeRange}
+								handleTimeChange={handleTimeChange}
+							/>
+						</QuerySearchV2Provider>
 					)}

 					{selectedView === VIEW_TYPES.TOP_ERRORS && (
 						<TopErrors
 							domainName={domainData.domainName}
 							timeRange={modalTimeRange}
-							initialFilters={domainListFilters}
+							initialFilterExpression={domainListFilterExpression}
 						/>
 					)}
 				</>
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/EndPointDetails.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/EndPointDetails.tsx
@@ -1,17 +1,17 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useQueries } from 'react-query';
-import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
-import { initialQueriesMap } from 'constants/queryBuilder';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
 import {
 	END_POINT_DETAILS_QUERY_KEYS_ARRAY,
 	extractPortAndEndpoint,
 	getEndPointDetailsQueryPayload,
+	getHttpUrlExpression,
 	getLatencyOverTimeWidgetData,
 	getRateOverTimeWidgetData,
 } from 'container/ApiMonitoring/utils';
-import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
 import {
 	CustomTimeType,
 	Time,
@@ -19,36 +19,28 @@ import {
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
+import { extractQueryPairs } from 'utils/queryContextUtils';

 import DependentServices from './components/DependentServices';
 import EndPointMetrics from './components/EndPointMetrics';
-import EndPointsDropDown from './components/EndPointsDropDown';
+import EndPointPicker from './components/EndPointPicker';
 import MetricOverTimeGraph from './components/MetricOverTimeGraph';
 import StatusCodeBarCharts from './components/StatusCodeBarCharts';
 import StatusCodeTable from './components/StatusCodeTable';
-import { SPAN_ATTRIBUTES } from './constants';
-
-const httpUrlKey = {
-	dataType: DataTypes.String,
-	key: SPAN_ATTRIBUTES.HTTP_URL,
-	type: 'tag',
-};
+import { useFilterExpression } from './hooks/useFilterExpression';
+import { useWidgetQueries } from './hooks/useWidgetQueries';

 function EndPointDetails({
 	domainName,
 	endPointName,
 	setSelectedEndPointName,
-	initialFilters,
 	timeRange,
 	handleTimeChange,
 }: {
 	domainName: string;
 	endPointName: string;
 	setSelectedEndPointName: (value: string) => void;
-	initialFilters: IBuilderQuery['filters'];
 	timeRange: {
 		startTime: number;
 		endTime: number;
@@ -59,159 +51,66 @@ function EndPointDetails({
 	) => void;
 }): JSX.Element {
 	const { startTime: minTime, endTime: maxTime } = timeRange;
-	const [params, setParams] = useApiMonitoringParams();

-	const currentQuery = initialQueriesMap[DataSource.TRACES];
+	// Search filters; the endpoint filter is combined in at query time
+	const {
+		expression: filterExpression,
+		initialExpression: scopeExpression,
+		queryData,
+		onDraftChange,
+		onRun,
+		onBlur: handleFilterBlur,
+	} = useFilterExpression();

-	// Local state for filters, combining endpoint filter and search filters
-	const [filters, setFilters] = useState<IBuilderQuery['filters']>(() => {
-		// Initialize filters based on the initial endPointName prop
-		const initialItems = params.endPointDetailsLocalFilters
-			? [...(params.endPointDetailsLocalFilters?.items || [])]
-			: [...(initialFilters?.items || [])];
-		if (endPointName) {
-			initialItems.push({
-				id: '92b8a1c1',
-				key: httpUrlKey,
-				op: '=',
-				value: endPointName,
-			});
-		}
-		return { op: 'AND', items: initialItems };
-	});
-
-	// Effect to synchronize local filters when the endPointName prop changes (e.g., from dropdown)
-	useEffect(() => {
-		setFilters((currentFilters) => {
-			const existingHttpUrlFilter = currentFilters?.items?.find(
-				(item) => item.key?.key === httpUrlKey.key,
-			);
-			const existingHttpUrlValue = (existingHttpUrlFilter?.value as string) || '';
-
-			// Only update filters if the prop value is different from what's already in filters
-			if (endPointName === existingHttpUrlValue) {
-				return currentFilters; // No change needed, prevents loop
-			}
-
-			// Rebuild filters: Keep non-http_url filters and add/update http_url filter based on prop
-			const otherFilters = currentFilters?.items?.filter(
-				(item) => item.key?.key !== httpUrlKey.key,
-			);
-			const newItems = [...(otherFilters || [])];
-			if (endPointName) {
-				newItems.push({
-					id: '92b8a1c1',
-					key: httpUrlKey,
-					op: '=',
-					value: endPointName,
-				});
-			}
-			return { op: 'AND', items: newItems };
-		});
-	}, [endPointName]);
-
-	// Separate effect to update params when filters change
-	useEffect(() => {
-		const filtersWithoutHttpUrl = {
-			op: 'AND',
-			items:
-				filters?.items?.filter((item) => item.key?.key !== httpUrlKey.key) || [],
-		};
-		setParams({ endPointDetailsLocalFilters: filtersWithoutHttpUrl });
-	}, [filters, setParams]);
-
-	// Handler for changes from the QueryBuilderSearchV2 component
-	const handleFilterChange = useCallback(
-		(newFilters: IBuilderQuery['filters']): void => {
-			// 1. Update local filters state immediately
-			setFilters(newFilters);
-			// Filter out http_url filter before saving to params
-			const filteredNewFilters = {
-				op: 'AND',
-				items:
-					newFilters?.items?.filter((item) => item.key?.key !== httpUrlKey.key) ||
-					[],
-			};
-			setParams({ endPointDetailsLocalFilters: filteredNewFilters });
-
-			// 2. Derive the endpoint name from the *new* filters state
-			const httpUrlFilter = newFilters?.items?.find(
-				(item) => item.key?.key === httpUrlKey.key,
-			);
-			const derivedEndPointName = (httpUrlFilter?.value as string) || '';
-
-			// 3. If the derived endpoint name is different from the current prop,
-			//    it means the search change modified the effective endpoint.
-			//    Notify the parent component.
-			if (derivedEndPointName !== endPointName) {
-				setSelectedEndPointName(derivedEndPointName);
-			}
-		},
-		[endPointName, setSelectedEndPointName, setParams], // Dependencies for the callback
+	const httpUrlExpression = useMemo(
+		() => getHttpUrlExpression(endPointName),
+		[endPointName],
 	);

-	const updatedCurrentQuery = useMemo(
-		() => ({
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: [
-					{
-						...currentQuery.builder.queryData[0],
-						dataSource: DataSource.TRACES,
-						filters, // Use the local filters state
-					},
-				],
-			},
-		}),
-		[filters, currentQuery],
+	const scopedExpression = useMemo(
+		() => combineInitialAndUserExpression(httpUrlExpression, filterExpression),
+		[httpUrlExpression, filterExpression],
 	);

-	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
-
 	const isServicesFilterApplied = useMemo(
-		() => filters?.items?.some((item) => item.key?.key === 'service.name'),
-		[filters],
+		() =>
+			extractQueryPairs(filterExpression).some(
+				(pair) => pair.key === 'service.name',
+			),
+		[filterExpression],
 	);

 	const endPointDetailsQueryPayload = useMemo(
-		() => getEndPointDetailsQueryPayload(domainName, minTime, maxTime, filters),
-		[domainName, filters, minTime, maxTime],
+		() =>
+			getEndPointDetailsQueryPayload(
+				domainName,
+				minTime,
+				maxTime,
+				scopedExpression,
+			),
+		[domainName, scopedExpression, minTime, maxTime],
 	);

-	const V5_QUERIES = [
-		REACT_QUERY_KEY.GET_ENDPOINT_STATUS_CODE_DATA,
-		REACT_QUERY_KEY.GET_ENDPOINT_STATUS_CODE_BAR_CHARTS_DATA,
-		REACT_QUERY_KEY.GET_ENDPOINT_STATUS_CODE_LATENCY_BAR_CHARTS_DATA,
-		REACT_QUERY_KEY.GET_ENDPOINT_METRICS_DATA,
-		REACT_QUERY_KEY.GET_ENDPOINT_DEPENDENT_SERVICES_DATA,
-		REACT_QUERY_KEY.GET_ENDPOINT_DROPDOWN_DATA,
-	] as const;
-
 	const endPointDetailsDataQueries = useQueries(
-		endPointDetailsQueryPayload.map((payload, index) => {
-			const queryKey = END_POINT_DETAILS_QUERY_KEYS_ARRAY[index];
-			const version = (V5_QUERIES as readonly string[]).includes(queryKey)
-				? ENTITY_VERSION_V5
-				: ENTITY_VERSION_V4;
-			return {
-				queryKey: [
-					END_POINT_DETAILS_QUERY_KEYS_ARRAY[index],
-					payload,
-					...(filters?.items?.length ? filters.items : []), // Include filters.items in queryKey for better caching
-					version,
-				],
-				queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-					GetMetricQueryRange(payload, version),
-				enabled: !!payload,
-			};
-		}),
+		endPointDetailsQueryPayload.map((payload, index) => ({
+			queryKey: [
+				END_POINT_DETAILS_QUERY_KEYS_ARRAY[index],
+				payload,
+				ENTITY_VERSION_V5,
+			],
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(payload, ENTITY_VERSION_V5),
+			enabled: !!payload,
+			// Keeps the table's rows, and so its height, while a new filter loads
+			keepPreviousData:
+				END_POINT_DETAILS_QUERY_KEYS_ARRAY[index] ===
+				REACT_QUERY_KEY.GET_ENDPOINT_DEPENDENT_SERVICES_DATA,
+		})),
 	);

 	const [
 		endPointMetricsDataQuery,
 		endPointStatusCodeDataQuery,
-		endPointDropDownDataQuery,
 		endPointDependentServicesDataQuery,
 		endPointStatusCodeBarChartsDataQuery,
 		endPointStatusCodeLatencyBarChartsDataQuery,
@@ -222,7 +121,6 @@ function EndPointDetails({
 			endPointDetailsDataQueries[2],
 			endPointDetailsDataQueries[3],
 			endPointDetailsDataQueries[4],
-			endPointDetailsDataQueries[5],
 		],
 		[endPointDetailsDataQueries],
 	);
@@ -234,10 +132,32 @@ function EndPointDetails({

 	const [rateOverTimeWidget, latencyOverTimeWidget] = useMemo(
 		() => [
-			getRateOverTimeWidgetData(domainName, endPointName, filters),
-			getLatencyOverTimeWidgetData(domainName, endPointName, filters),
+			getRateOverTimeWidgetData(domainName, endPointName, scopedExpression),
+			getLatencyOverTimeWidgetData(domainName, endPointName, scopedExpression),
 		],
-		[domainName, endPointName, filters], // Use combinedFilters
+		[domainName, endPointName, scopedExpression],
+	);
+
+	const graphWidgets = useMemo(
+		() => [rateOverTimeWidget, latencyOverTimeWidget],
+		[rateOverTimeWidget, latencyOverTimeWidget],
+	);
+	const { isFetching: isFetchingGraphs, refetch: refetchGraphs } =
+		useWidgetQueries(graphWidgets);
+	const isFetchingQueries =
+		isFetchingGraphs ||
+		endPointDetailsDataQueries.some((query) => query.isFetching);
+
+	const refetchQueries = useCallback((): void => {
+		refetchGraphs();
+		endPointDetailsDataQueries.forEach((query) => {
+			void query.refetch();
+		});
+	}, [refetchGraphs, endPointDetailsDataQueries]);
+
+	const handleRun = useCallback(
+		(value: string): void => onRun(value, refetchQueries),
+		[onRun, refetchQueries],
 	);

 	// // [TODO] Fix this later
@@ -257,19 +177,23 @@ function EndPointDetails({
 	return (
 		<div className="endpoint-details-container">
 			<div className="endpoint-details-filters-container">
-				<div className="endpoint-details-filters-container-dropdown">
-					<EndPointsDropDown
-						selectedEndPointName={endPointName}
-						setSelectedEndPointName={setSelectedEndPointName}
-						endPointDropDownDataQuery={endPointDropDownDataQuery}
-						parentContainerDiv=".endpoint-details-filters-container"
-						dropdownStyle={{ width: 'calc(100% - 36px)' }}
-					/>
-				</div>
-				<div className="endpoint-details-filters-container-search">
-					<QueryBuilderSearchV2
-						query={query}
-						onChange={handleFilterChange}
+				<EndPointPicker
+					domainName={domainName}
+					timeRange={timeRange}
+					filterExpression={filterExpression}
+					value={endPointName}
+					onChange={setSelectedEndPointName}
+				/>
+				<div onBlur={handleFilterBlur}>
+					<QuerySearch
+						queryData={queryData}
+						onChange={onDraftChange}
+						onRun={handleRun}
+						showRunButton
+						isLoadingQueries={isFetchingQueries}
+						initialExpression={scopeExpression}
+						showScopeChip
+						dataSource={DataSource.TRACES}
 						placeholder="Search for filters..."
 					/>
 				</div>
@@ -299,7 +223,7 @@ function EndPointDetails({
 					endPointStatusCodeLatencyBarChartsDataQuery
 				}
 				domainName={domainName}
-				filters={filters}
+				filterExpression={scopedExpression}
 				timeRange={timeRange}
 				onDragSelect={onDragSelect}
 			/>
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
+import { QueryFunctionContext, useQuery } from 'react-query';
 import { Spin, Table, Tooltip } from 'antd';
 import { Info, Loader } from '@signozhq/icons';
 import { Switch } from '@signozhq/ui/switch';
@@ -7,41 +7,36 @@ import { Typography } from '@signozhq/ui/typography';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
+import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
 import { withErrorBoundary } from 'components/ErrorBoundaryHOC';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
-	END_POINT_DETAILS_QUERY_KEYS_ARRAY,
 	formatTopErrorsDataForTable,
-	getEndPointDetailsQueryPayload,
+	getHttpUrlExpression,
 	getTopErrorsColumnsConfig,
 	getTopErrorsCoRelationQueryFilters,
 	getTopErrorsQueryPayload,
 } from 'container/ApiMonitoring/utils';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { SuccessResponse, SuccessResponseV2 } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { SuccessResponseV2 } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';

 import emptyStateUrl from '@/assets/Icons/emptyState.svg';

-import EndPointsDropDown from './components/EndPointsDropDown';
+import EndPointPicker from './components/EndPointPicker';
 import ErrorState from './components/ErrorState';
-import { SPAN_ATTRIBUTES } from './constants';

 function TopErrors({
 	domainName,
 	timeRange,
-	initialFilters,
+	initialFilterExpression,
 }: {
 	domainName: string;
 	timeRange: {
 		startTime: number;
 		endTime: number;
 	};
-	initialFilters: IBuilderQuery['filters'];
+	initialFilterExpression: string;
 }): JSX.Element {
 	const { startTime: minTime, endTime: maxTime } = timeRange;

@@ -55,27 +50,10 @@ function TopErrors({
 				domainName,
 				minTime,
 				maxTime,
-				{
-					items: endPointName
-						? [
-								// Remove any existing http_url filters from initialFilters to avoid duplicates
-								...(initialFilters?.items?.filter(
-									(item) => item.key?.key !== SPAN_ATTRIBUTES.HTTP_URL,
-								) || []),
-								{
-									id: '92b8a1c1',
-									key: {
-										dataType: DataTypes.String,
-										key: SPAN_ATTRIBUTES.HTTP_URL,
-										type: 'tag',
-									},
-									op: '=',
-									value: endPointName,
-								},
-							]
-						: [...(initialFilters?.items || [])],
-					op: 'AND',
-				},
+				combineInitialAndUserExpression(
+					getHttpUrlExpression(endPointName),
+					initialFilterExpression,
+				),
 				showStatusCodeErrors,
 			),
 		[
@@ -83,7 +61,7 @@ function TopErrors({
 			endPointName,
 			minTime,
 			maxTime,
-			initialFilters,
+			initialFilterExpression,
 			showStatusCodeErrors,
 		],
 	);
@@ -120,35 +98,6 @@ function TopErrors({
 		[topErrorsData],
 	);

-	const endPointDropDownQueryPayload = useMemo(
-		() => [
-			getEndPointDetailsQueryPayload(domainName, minTime, maxTime, {
-				items: [],
-				op: 'AND',
-			})[2],
-		],
-		[domainName, minTime, maxTime],
-	);
-
-	const endPointDropDownDataQueries = useQueries(
-		endPointDropDownQueryPayload.map((payload) => ({
-			queryKey: [
-				END_POINT_DETAILS_QUERY_KEYS_ARRAY[2],
-				payload,
-				ENTITY_VERSION_V5,
-			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(payload, ENTITY_VERSION_V5),
-			enabled: !!payload,
-			staleTime: 60 * 1000,
-		})),
-	);
-
-	const [endPointDropDownDataQuery] = useMemo(
-		() => [endPointDropDownDataQueries[0]],
-		[endPointDropDownDataQueries],
-	);
-
 	const navigateToExplorer = useNavigateToExplorer();

 	if (isError) {
@@ -162,14 +111,13 @@ function TopErrors({
 	return (
 		<div className="all-endpoints-container">
 			<div className="top-errors-dropdown-container">
-				<div className="endpoint-details-filters-container-dropdown">
-					<EndPointsDropDown
-						selectedEndPointName={endPointName}
-						setSelectedEndPointName={setSelectedEndPointName}
-						endPointDropDownDataQuery={endPointDropDownDataQuery}
-						parentContainerDiv=".endpoint-details-filters-container"
-					/>
-				</div>
+				<EndPointPicker
+					domainName={domainName}
+					timeRange={timeRange}
+					filterExpression=""
+					value={endPointName}
+					onChange={setSelectedEndPointName}
+				/>
 				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
 					<Switch
 						color="primary"
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Skeleton, Table, TablePaginationConfig } from 'antd';
+import { Table, TablePaginationConfig } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { QueryParams } from 'constants/query';
 import {
@@ -54,10 +54,6 @@ function DependentServices({
 		[isExpanded, dependentServicesData.length],
 	);

-	if (isLoading || isRefetching) {
-		return <Skeleton />;
-	}
-
 	if (isError) {
 		return <ErrorState refetch={refetch} />;
 	}
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.test.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.test.tsx
@@ -3,7 +3,6 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { TraceAggregation } from 'api/v5/v5';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';

 import { SPAN_ATTRIBUTES } from '../constants';
 import DomainMetrics from './DomainMetrics';
@@ -34,10 +33,7 @@ describe('DomainMetrics - V5 Query Payload Tests', () => {
 			startTime: 1758259531000,
 			endTime: 1758261331000,
 		},
-		domainListFilters: {
-			items: [],
-			op: 'AND' as const,
-		} as IBuilderQuery['filters'],
+		domainListFilterExpression: '',
 	};

 	const mockSuccessResponse = {
@@ -174,35 +170,12 @@ describe('DomainMetrics - V5 Query Payload Tests', () => {
 		it('includes custom filters in filter expressions', async () => {
 			(GetMetricQueryRange as jest.Mock).mockResolvedValue(mockSuccessResponse);

-			const customFilters: IBuilderQuery['filters'] = {
-				items: [
-					{
-						id: 'test-1',
-						key: {
-							key: 'service.name',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'my-service',
-					},
-					{
-						id: 'test-2',
-						key: {
-							key: 'deployment.environment',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'production',
-					},
-				],
-				op: 'AND' as const,
-			};
+			const customFilterExpression =
+				"service.name = 'my-service' AND deployment.environment = 'production'";

 			renderComponent({
 				...mockProps,
-				domainListFilters: customFilters,
+				domainListFilterExpression: customFilterExpression,
 			});

 			await waitFor(() => {
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx
@@ -14,18 +14,17 @@ import {
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';

 import ErrorState from './ErrorState';

 function DomainMetrics({
 	domainName,
 	timeRange,
-	domainListFilters,
+	domainListFilterExpression,
 }: {
 	domainName: string;
 	timeRange: { startTime: number; endTime: number };
-	domainListFilters: IBuilderQuery['filters'];
+	domainListFilterExpression: string;
 }): JSX.Element {
 	const { startTime: minTime, endTime: maxTime } = timeRange;

@@ -35,9 +34,9 @@ function DomainMetrics({
 				domainName,
 				minTime,
 				maxTime,
-				domainListFilters,
+				domainListFilterExpression,
 			),
-		[domainName, minTime, maxTime, domainListFilters],
+		[domainName, minTime, maxTime, domainListFilterExpression],
 	);

 	// Since only one query here
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.test.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.test.tsx
@@ -114,10 +114,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 			const domainName = 'api.example.com';
 			const startTime = 1758259531000;
 			const endTime = 1758261331000;
-			const filters = {
-				items: [],
-				op: 'AND' as const,
-			};
+			const filters = '';

 			// Get the actual payload that would be generated
 			const payloads = getEndPointDetailsQueryPayload(
@@ -237,31 +234,8 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 		it('includes custom domainListFilters in all query expressions', async () => {
 			(GetMetricQueryRange as jest.Mock).mockResolvedValue(mockSuccessResponse);

-			const customFilters = {
-				items: [
-					{
-						id: 'test-1',
-						key: {
-							key: 'service.name',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'payment-service',
-					},
-					{
-						id: 'test-2',
-						key: {
-							key: 'deployment.environment',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'staging',
-					},
-				],
-				op: 'AND' as const,
-			};
+			const customFilters =
+				"service.name = 'payment-service' AND deployment.environment = 'staging'";

 			const payloads = getEndPointDetailsQueryPayload(
 				'api.internal.com',
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointPicker.module.scss
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointPicker.module.scss
@@ -0,0 +1,18 @@
+.picker {
+	width: 460px;
+	max-width: 100%;
+
+	// Popover fits its longest option by default; match the trigger so long URLs truncate.
+	[data-slot='combobox-content'] {
+		--popover-width: var(--radix-popover-trigger-width);
+	}
+}
+
+.option {
+	display: block;
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointPicker.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointPicker.tsx
@@ -0,0 +1,92 @@
+import { useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	getEndPointDropDownQueryPayload,
+	getFormattedEndPointDropDownData,
+} from 'container/ApiMonitoring/utils';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+
+import styles from './EndPointPicker.module.scss';
+
+const VIRTUALIZE_AFTER = 100;
+const ALL_ENDPOINTS = '__all_endpoints__';
+
+interface EndPointPickerProps {
+	domainName: string;
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	filterExpression: string;
+	value: string;
+	onChange: (endPointName: string) => void;
+}
+
+function EndPointPicker({
+	domainName,
+	timeRange,
+	filterExpression,
+	value,
+	onChange,
+}: EndPointPickerProps): JSX.Element {
+	const payload = useMemo(
+		() =>
+			getEndPointDropDownQueryPayload(
+				domainName,
+				timeRange.startTime,
+				timeRange.endTime,
+				filterExpression,
+			),
+		[domainName, timeRange.startTime, timeRange.endTime, filterExpression],
+	);
+
+	const { data, isLoading, isFetching } = useQuery({
+		queryKey: [
+			REACT_QUERY_KEY.GET_ENDPOINT_DROPDOWN_DATA,
+			payload,
+			ENTITY_VERSION_V5,
+		],
+		queryFn: () => GetMetricQueryRange(payload, ENTITY_VERSION_V5),
+		staleTime: 60 * 1000,
+	});
+
+	const items = useMemo(
+		(): ComboboxSimpleItem[] => [
+			{ value: ALL_ENDPOINTS, label: 'All endpoints' },
+			...getFormattedEndPointDropDownData(
+				data?.payload?.data?.result?.[0]?.table?.rows ?? [],
+			).map(({ value: url }) => ({
+				value: url,
+				label: (
+					<span className={styles.option} title={url}>
+						{url}
+					</span>
+				),
+			})),
+		],
+		[data],
+	);
+
+	return (
+		<div className={styles.picker}>
+			<ComboboxSimple
+				items={items}
+				value={value || ALL_ENDPOINTS}
+				onChange={(next): void =>
+					onChange(!next || next === ALL_ENDPOINTS ? '' : (next as string))
+				}
+				inputPlaceholder="Search endpoints"
+				emptyPlaceholder="No endpoints found"
+				loading={isLoading || isFetching}
+				virtualized={items.length > VIRTUALIZE_AFTER}
+				withPortal={false}
+				testId="endpoint-picker"
+			/>
+		</div>
+	);
+}
+
+export default EndPointPicker;
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointsDropDown.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointsDropDown.tsx
@@ -1,65 +0,0 @@
-import { useMemo } from 'react';
-import { UseQueryResult } from 'react-query';
-import { Select } from 'antd';
-import { getFormattedEndPointDropDownData } from 'container/ApiMonitoring/utils';
-import { SuccessResponse } from 'types/api';
-
-interface EndPointsDropDownProps {
-	selectedEndPointName?: string;
-	setSelectedEndPointName: (value: string) => void;
-	endPointDropDownDataQuery: UseQueryResult<SuccessResponse<any>, unknown>;
-	parentContainerDiv?: string;
-	dropdownStyle?: React.CSSProperties;
-}
-
-const defaultProps = {
-	selectedEndPointName: '',
-	parentContainerDiv: '',
-	dropdownStyle: {},
-};
-
-function EndPointsDropDown({
-	selectedEndPointName,
-	setSelectedEndPointName,
-	endPointDropDownDataQuery,
-	parentContainerDiv,
-	dropdownStyle,
-}: EndPointsDropDownProps): JSX.Element {
-	const { data, isLoading, isFetching } = endPointDropDownDataQuery;
-
-	const handleChange = (value: string): void => {
-		setSelectedEndPointName(value);
-	};
-
-	const formattedData = useMemo(
-		() =>
-			getFormattedEndPointDropDownData(data?.payload.data.result[0].table.rows),
-		[data?.payload.data.result],
-	);
-
-	return (
-		<Select
-			value={selectedEndPointName || undefined}
-			placeholder="Select endpoint"
-			loading={isLoading || isFetching}
-			style={{ width: '100%' }}
-			onChange={handleChange}
-			options={formattedData}
-			getPopupContainer={
-				parentContainerDiv
-					? (): HTMLElement =>
-							document.querySelector(parentContainerDiv) as HTMLElement
-					: (triggerNode): HTMLElement => triggerNode.parentNode as HTMLElement
-			}
-			dropdownStyle={dropdownStyle}
-			allowClear
-			onClear={(): void => {
-				setSelectedEndPointName('');
-			}}
-		/>
-	);
-}
-
-EndPointsDropDown.defaultProps = defaultProps;
-
-export default EndPointsDropDown;
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx
@@ -24,7 +24,6 @@ import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/widgets/widget';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';

 import ErrorState from './ErrorState';
 import {
@@ -37,7 +36,7 @@ function StatusCodeBarCharts({
 	endPointStatusCodeBarChartsDataQuery,
 	endPointStatusCodeLatencyBarChartsDataQuery,
 	domainName,
-	filters,
+	filterExpression,
 	timeRange,
 	onDragSelect,
 }: {
@@ -50,7 +49,7 @@ function StatusCodeBarCharts({
 		unknown
 	>;
 	domainName: string;
-	filters: IBuilderQuery['filters'];
+	filterExpression: string;
 	timeRange: {
 		startTime: number;
 		endTime: number;
@@ -130,12 +129,8 @@ function StatusCodeBarCharts({
 	);

 	const widget = useMemo<Widgets>(
-		() =>
-			getStatusCodeBarChartWidgetData(domainName, {
-				items: [...(filters?.items || [])],
-				op: filters?.op || 'AND',
-			}),
-		[domainName, filters],
+		() => getStatusCodeBarChartWidgetData(domainName, filterExpression),
+		[domainName, filterExpression],
 	);

 	const activeApiResponse = useMemo(
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/hooks/tests/useFilterExpression.test.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/hooks/tests/useFilterExpression.test.tsx
@@ -0,0 +1,157 @@
+import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import { FilterProviders } from 'container/ApiMonitoring/__tests__/FilterProviders';
+import { getCurrentNuqsSearchParams, resetNuqsState } from 'tests/nuqs-helpers';
+import {
+	act,
+	render,
+	renderHook,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
+
+import { useFilterExpression } from '../useFilterExpression';
+
+const PARAM_KEY = 'testExpression';
+const linkExpression = "service.name = 'frontend'";
+const linkSearch = `${PARAM_KEY}=${encodeURIComponent(linkExpression)}`;
+
+function renderFilterHook(
+	searchParams = '',
+): ReturnType<
+	typeof renderHook<ReturnType<typeof useFilterExpression>, unknown>
+> {
+	return renderHook(() => useFilterExpression(), {
+		wrapper: ({ children }) => (
+			<FilterProviders queryParamKey={PARAM_KEY} searchParams={searchParams}>
+				{children}
+			</FilterProviders>
+		),
+	});
+}
+
+function FilterBox(): JSX.Element {
+	const { expression, onDraftChange, onBlur } = useFilterExpression();
+
+	return (
+		<div onBlur={onBlur}>
+			<span data-testid="applied">{expression}</span>
+			<input
+				data-testid="filter-input"
+				onChange={(e): void => onDraftChange(e.target.value)}
+			/>
+			<button type="button" data-testid="inside-button">
+				Run
+			</button>
+		</div>
+	);
+}
+
+describe('useFilterExpression', () => {
+	beforeEach(() => {
+		resetNuqsState();
+	});
+
+	it('reads the filter from the link', async () => {
+		const { result } = renderFilterHook(linkSearch);
+
+		await waitFor(() => expect(result.current.expression).toBe(linkExpression));
+		expect(result.current.queryData.dataSource).toBe('traces');
+		expect(result.current.queryData.filter?.expression).toBe(linkExpression);
+	});
+
+	it('applies a valid expression on run and ignores an invalid one', async () => {
+		const { result } = renderFilterHook(linkSearch);
+		await waitFor(() => expect(result.current.expression).toBe(linkExpression));
+
+		act(() => {
+			result.current.onRun('service.name =');
+		});
+		expect(result.current.expression).toBe(linkExpression);
+
+		act(() => {
+			result.current.onRun('http.status_code = 500');
+		});
+		expect(result.current.expression).toBe('http.status_code = 500');
+		await waitFor(() =>
+			expect(getCurrentNuqsSearchParams().get(PARAM_KEY)).toBe(
+				'http.status_code = 500',
+			),
+		);
+	});
+
+	it('runs again instead of applying when the filter is already applied', async () => {
+		const scope = "http_host = 'api.example.com'";
+		const { result } = renderHook(() => useFilterExpression(), {
+			wrapper: ({ children }) => (
+				<FilterProviders
+					queryParamKey={PARAM_KEY}
+					initialExpression={scope}
+					searchParams={linkSearch}
+				>
+					{children}
+				</FilterProviders>
+			),
+		});
+		await waitFor(() => expect(result.current.expression).toBe(linkExpression));
+		const onUnchanged = jest.fn() as jest.MockedFunction<() => void>;
+
+		act(() => {
+			result.current.onRun(
+				combineInitialAndUserExpression(scope, linkExpression),
+				onUnchanged,
+			);
+		});
+		expect(onUnchanged).toHaveBeenCalledTimes(1);
+
+		act(() => {
+			result.current.onRun(
+				combineInitialAndUserExpression(scope, 'http.status_code = 500'),
+				onUnchanged,
+			);
+		});
+		expect(onUnchanged).toHaveBeenCalledTimes(1);
+		expect(result.current.expression).toBe('http.status_code = 500');
+	});
+
+	it('applies the draft on blur only when focus leaves the container', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(
+			<FilterProviders queryParamKey={PARAM_KEY}>
+				<FilterBox />
+			</FilterProviders>,
+		);
+
+		await user.type(screen.getByTestId('filter-input'), "service.name = 'cart'");
+		await user.click(screen.getByTestId('inside-button'));
+		expect(screen.getByTestId('applied')).toHaveTextContent('');
+
+		await user.click(document.body);
+		expect(screen.getByTestId('applied')).toHaveTextContent(
+			"service.name = 'cart'",
+		);
+	});
+
+	it('keeps only the user text when the scope is set', async () => {
+		const scope = "http_host = 'api.example.com'";
+		const { result } = renderHook(() => useFilterExpression(), {
+			wrapper: ({ children }) => (
+				<FilterProviders queryParamKey={PARAM_KEY} initialExpression={scope}>
+					{children}
+				</FilterProviders>
+			),
+		});
+		await waitFor(() => expect(result.current.initialExpression).toBe(scope));
+
+		act(() => {
+			result.current.onRun(`${scope} AND (service.name = 'cart')`);
+		});
+
+		expect(result.current.expression).toBe("service.name = 'cart'");
+		await waitFor(() =>
+			expect(getCurrentNuqsSearchParams().get(PARAM_KEY)).toBe(
+				"service.name = 'cart'",
+			),
+		);
+	});
+});
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/hooks/tests/useWidgetQueries.test.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/hooks/tests/useWidgetQueries.test.tsx
@@ -0,0 +1,82 @@
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider, QueryObserver } from 'react-query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
+import { act, renderHook, waitFor } from 'tests/test-utils';
+import { Widgets } from 'types/api/widgets/widget';
+
+import { useWidgetQueries } from '../useWidgetQueries';
+
+const widgetWithQueryId = (id: string): Widgets =>
+	getWidgetQueryBuilder({
+		query: { ...initialQueriesMap.traces, id },
+		panelTypes: PANEL_TYPES.TABLE,
+	});
+
+const gridCardKey = (queryId: string): unknown[] => [
+	REACT_QUERY_KEY.DASHBOARD_GRID_CARD_QUERY_RANGE,
+	0,
+	0,
+	{ id: queryId },
+];
+
+function startGridCardFetch(client: QueryClient, queryId: string): void {
+	void client.prefetchQuery(gridCardKey(queryId), () => new Promise(() => {}));
+}
+
+function renderWidgetQueries(
+	client: QueryClient,
+	widgets: Widgets[],
+): ReturnType<typeof renderHook<ReturnType<typeof useWidgetQueries>, unknown>> {
+	return renderHook(() => useWidgetQueries(widgets), {
+		wrapper: ({ children }: { children: ReactNode }) => (
+			<QueryClientProvider client={client}>{children}</QueryClientProvider>
+		),
+	});
+}
+
+describe('useWidgetQueries', () => {
+	it('counts only the given widgets’ grid card queries', async () => {
+		const client = new QueryClient();
+		const { result } = renderWidgetQueries(client, [widgetWithQueryId('table')]);
+
+		await act(async () => {
+			startGridCardFetch(client, 'other-tab-chart');
+			await new Promise((resolve) => setTimeout(resolve, 50));
+		});
+		expect(client.isFetching()).toBe(1);
+		expect(result.current.isFetching).toBe(false);
+
+		act(() => startGridCardFetch(client, 'table'));
+		await waitFor(() => expect(result.current.isFetching).toBe(true));
+	});
+
+	it('refetches only the given widgets’ grid card queries', async () => {
+		const client = new QueryClient();
+		const fetchTable = jest.fn(() =>
+			Promise.resolve('table'),
+		) as jest.MockedFunction<() => Promise<string>>;
+		const fetchOther = jest.fn(() =>
+			Promise.resolve('other'),
+		) as jest.MockedFunction<() => Promise<string>>;
+		const unsubscribers = [
+			new QueryObserver(client, {
+				queryKey: gridCardKey('table'),
+				queryFn: fetchTable,
+			}).subscribe(() => {}),
+			new QueryObserver(client, {
+				queryKey: gridCardKey('other-tab-chart'),
+				queryFn: fetchOther,
+			}).subscribe(() => {}),
+		];
+		await waitFor(() => expect(client.isFetching()).toBe(0));
+		const { result } = renderWidgetQueries(client, [widgetWithQueryId('table')]);
+
+		act(() => result.current.refetch());
+
+		await waitFor(() => expect(fetchTable).toHaveBeenCalledTimes(2));
+		expect(fetchOther).toHaveBeenCalledTimes(1);
+		unsubscribers.forEach((unsubscribe) => unsubscribe());
+	});
+});
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/hooks/useFilterExpression.ts
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/hooks/useFilterExpression.ts
@@ -0,0 +1,93 @@
+import { FocusEvent, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+	useInitialExpression,
+	useQuerySearchInitialExpressionProp,
+	useQuerySearchOnRun,
+	useUserExpression,
+} from 'components/QueryBuilderV2';
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { validateQuery } from 'utils/queryValidationUtils';
+
+interface UseFilterExpressionParams {
+	groupBy?: IBuilderQuery['groupBy'];
+}
+
+interface UseFilterExpressionReturn {
+	expression: string;
+	/** The provider's locked scope, for `QuerySearch`'s `initialExpression` */
+	initialExpression: string | undefined;
+	queryData: IBuilderQuery;
+	onDraftChange: (value: string) => void;
+	/** `onUnchanged` runs instead when the filter is already applied. */
+	onRun: (value: string, onUnchanged?: () => void) => void;
+	onBlur: (event: FocusEvent<HTMLDivElement>) => void;
+}
+
+/** Must be used inside a `QuerySearchV2Provider`. */
+export function useFilterExpression({
+	groupBy,
+}: UseFilterExpressionParams = {}): UseFilterExpressionReturn {
+	const expression = useUserExpression();
+	const scope = useInitialExpression();
+	const initialExpression = useQuerySearchInitialExpressionProp();
+	const querySearchOnRun = useQuerySearchOnRun();
+
+	const queryData = useMemo(
+		(): IBuilderQuery => ({
+			...initialQueriesMap[DataSource.TRACES].builder.queryData[0],
+			dataSource: DataSource.TRACES,
+			filter: { expression },
+			...(groupBy ? { groupBy } : {}),
+		}),
+		[expression, groupBy],
+	);
+
+	const onRun = useCallback(
+		(value: string, onUnchanged?: () => void): void => {
+			if (!validateQuery(value).isValid) {
+				return;
+			}
+			if (getUserExpressionFromCombined(scope, value) === expression) {
+				onUnchanged?.();
+				return;
+			}
+			querySearchOnRun(value);
+		},
+		[querySearchOnRun, scope, expression],
+	);
+
+	// A ref, not the provider's draft, so typing does not re-render the page.
+	const draftRef = useRef(expression);
+	useEffect(() => {
+		draftRef.current = expression;
+	}, [expression]);
+
+	const onDraftChange = useCallback((value: string): void => {
+		draftRef.current = value;
+	}, []);
+
+	const onBlur = useCallback(
+		(event: FocusEvent<HTMLDivElement>): void => {
+			if (event.currentTarget.contains(event.relatedTarget as Node | null)) {
+				return;
+			}
+			onRun(combineInitialAndUserExpression(scope, draftRef.current));
+		},
+		[onRun, scope],
+	);
+
+	return {
+		expression,
+		initialExpression,
+		queryData,
+		onDraftChange,
+		onRun,
+		onBlur,
+	};
+}
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/hooks/useWidgetQueries.ts
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/hooks/useWidgetQueries.ts
@@ -0,0 +1,45 @@
+import { useCallback, useMemo } from 'react';
+import {
+	Query as ReactQuery,
+	useIsFetching,
+	useQueryClient,
+} from 'react-query';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { Widgets } from 'types/api/widgets/widget';
+
+interface UseWidgetQueriesReturn {
+	isFetching: boolean;
+	refetch: () => void;
+}
+
+/**
+ * These widgets' `GridCard` queries. Matches on the widget's query id, so
+ * another tab's cards are neither counted nor refetched.
+ */
+export function useWidgetQueries(widgets: Widgets[]): UseWidgetQueriesReturn {
+	const queryClient = useQueryClient();
+
+	const predicate = useMemo(() => {
+		const queryIds = new Set(
+			widgets
+				.map((widget) => widget.query?.id)
+				.filter((id): id is string => Boolean(id)),
+		);
+		return ({ queryKey }: ReactQuery): boolean =>
+			Array.isArray(queryKey) &&
+			queryKey[0] === REACT_QUERY_KEY.DASHBOARD_GRID_CARD_QUERY_RANGE &&
+			queryKey.some((part) => {
+				const id = (part as Query | undefined)?.id;
+				return !!id && queryIds.has(id);
+			});
+	}, [widgets]);
+
+	const isFetching = useIsFetching({ predicate }) > 0;
+
+	const refetch = useCallback((): void => {
+		void queryClient.refetchQueries({ predicate, active: true });
+	}, [queryClient, predicate]);
+
+	return { isFetching, refetch };
+}
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx
@@ -19,6 +19,7 @@ import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useListOverview } from 'hooks/thirdPartyApis/useListOverview';
 import { get } from 'lodash-es';
+import { parseAsString, useQueryStates } from 'nuqs';
 import { AppState } from 'store/reducers';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
@@ -27,16 +28,26 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';

 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
+import {
+	ALL_ENDPOINTS_EXPRESSION_KEY,
+	ENDPOINT_STATS_EXPRESSION_KEY,
+} from '../../filterParamKeys';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
 import { columnsConfig, formatDataForTable } from '../../utils';
 import DomainDetails from './DomainDetails/DomainDetails';
+import { useConvertLegacyFilterLinks } from './hooks/useConvertLegacyFilterLinks';

 import '../Explorer.styles.scss';

 function DomainList(): JSX.Element {
 	const [params, setParams] = useApiMonitoringParams();
 	const { showIP, selectedDomain } = params;
+	const [, setDrawerFilters] = useQueryStates({
+		[ALL_ENDPOINTS_EXPRESSION_KEY]: parseAsString,
+		[ENDPOINT_STATS_EXPRESSION_KEY]: parseAsString,
+	});
 	const [selectedDomainIndex, setSelectedDomainIndex] = useState<number>(-1);
+	useConvertLegacyFilterLinks();
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@@ -55,6 +66,8 @@ function DomainList(): JSX.Element {
 	});

 	const compositeData = useGetCompositeQueryParam();
+	const listFilterExpression =
+		compositeData?.builder?.queryData[0]?.filter?.expression ?? '';

 	const [isCancelled, setIsCancelled] = useState(false);

@@ -155,6 +168,7 @@ function DomainList(): JSX.Element {
 					dataSource={DataSource.TRACES}
 					queryData={query}
 					onChange={handleSearchChange}
+					onRun={handleStageAndRunQuery}
 					placeholder="Enter your filter query (e.g., deployment.environment = 'otel-demo' AND service.name = 'frontend')"
 					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
@@ -225,6 +239,11 @@ function DomainList(): JSX.Element {
 								);
 								setSelectedDomainIndex(dataIndex);
 								setParams({ selectedDomain: record.domainName });
+								// The drawer tabs start from the list's filter
+								void setDrawerFilters({
+									[ALL_ENDPOINTS_EXPRESSION_KEY]: listFilterExpression || null,
+									[ENDPOINT_STATS_EXPRESSION_KEY]: listFilterExpression || null,
+								});
 								logEvent('API Monitoring: Domain name row clicked', {});
 							}
 						},
@@ -245,8 +264,12 @@ function DomainList(): JSX.Element {
 					handleClose={(): void => {
 						setSelectedDomainIndex(-1);
 						setParams(DEFAULT_PARAMS);
+						void setDrawerFilters({
+							[ALL_ENDPOINTS_EXPRESSION_KEY]: null,
+							[ENDPOINT_STATS_EXPRESSION_KEY]: null,
+						});
 					}}
-					domainListFilters={query?.filters}
+					domainListFilterExpression={listFilterExpression}
 				/>
 			)}
 		</section>
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/hooks/tests/useConvertLegacyFilterLinks.test.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/hooks/tests/useConvertLegacyFilterLinks.test.tsx
@@ -0,0 +1,122 @@
+import { ReactNode, useEffect, useState } from 'react';
+import {
+	ALL_ENDPOINTS_EXPRESSION_KEY,
+	ENDPOINT_STATS_EXPRESSION_KEY,
+} from 'container/ApiMonitoring/filterParamKeys';
+import { getApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import {
+	getCurrentNuqsSearchParams,
+	onNuqsUrlUpdate,
+	resetNuqsState,
+} from 'tests/nuqs-helpers';
+import { mockAppLocation, mockNavigate } from 'tests/router-mocks';
+import { renderHook, waitFor } from 'tests/test-utils';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	__resetSearchParamsGetter,
+	__setSearchParamsGetterForTest,
+} from 'utils/getUnstableCurrentSearchParams';
+
+import { useConvertLegacyFilterLinks } from '../useConvertLegacyFilterLinks';
+
+const legacyFilter = (key: string, value: string): TagFilter => ({
+	op: 'AND',
+	items: [
+		{
+			id: key,
+			key: { key, dataType: DataTypes.String, type: 'tag' },
+			op: '=',
+			value,
+		},
+	],
+});
+
+// NuqsTestingAdapter resets its update queue on every render, not only on mount,
+// dropping writes queued just before it re-renders.
+function UrlAdapter({
+	searchParams,
+	children,
+}: {
+	searchParams: string;
+	children: ReactNode;
+}): JSX.Element {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	return (
+		<NuqsTestingAdapter
+			searchParams={searchParams}
+			onUrlUpdate={onNuqsUrlUpdate}
+			rateLimitFactor={0}
+			resetUrlUpdateQueueOnMount={!mounted}
+			hasMemory
+		>
+			{children}
+		</NuqsTestingAdapter>
+	);
+}
+
+function renderWithLink(linkParams: object): jest.SpyInstance {
+	const search = `?apiMonitoringParams=${encodeURIComponent(
+		encodeURIComponent(JSON.stringify(linkParams)),
+	)}`;
+	__setSearchParamsGetterForTest(() => new URLSearchParams(search));
+	mockAppLocation({ search });
+	const navigateSpy = mockNavigate();
+	renderHook(() => useConvertLegacyFilterLinks(), {
+		wrapper: ({ children }: { children: ReactNode }) => (
+			<UrlAdapter searchParams={search}>{children}</UrlAdapter>
+		),
+	});
+	return navigateSpy;
+}
+
+describe('useConvertLegacyFilterLinks', () => {
+	beforeEach(() => {
+		resetNuqsState();
+	});
+
+	afterEach(() => {
+		__resetSearchParamsGetter();
+	});
+
+	it('moves an older link’s filters into the drawer params once', async () => {
+		const navigateSpy = renderWithLink({
+			selectedDomain: 'api.example.com',
+			allEndpointsLocalFilters: legacyFilter('service.name', 'cart'),
+			endPointDetailsLocalFilters: legacyFilter('http.status_code', '500'),
+		});
+
+		await waitFor(() => {
+			const params = getCurrentNuqsSearchParams();
+			expect(params.get(ALL_ENDPOINTS_EXPRESSION_KEY)).toBe(
+				"service.name = 'cart'",
+			);
+			expect(params.get(ENDPOINT_STATS_EXPRESSION_KEY)).toBe(
+				"http.status_code = '500'",
+			);
+		});
+		const [to, options] = navigateSpy.mock.calls[0];
+		const rewritten = getApiMonitoringParams(
+			typeof to === 'string' ? to : (to.search ?? ''),
+		);
+		expect(rewritten.selectedDomain).toBe('api.example.com');
+		expect(rewritten).not.toHaveProperty('allEndpointsLocalFilters');
+		expect(options).toStrictEqual({ replace: true });
+	});
+
+	it('leaves a link without legacy filters alone', () => {
+		const navigateSpy = renderWithLink({ selectedDomain: 'api.example.com' });
+
+		expect(navigateSpy).not.toHaveBeenCalledWith(
+			expect.objectContaining({ search: expect.any(String) }),
+			expect.anything(),
+		);
+		expect(getCurrentNuqsSearchParams().has(ALL_ENDPOINTS_EXPRESSION_KEY)).toBe(
+			false,
+		);
+	});
+});
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/hooks/useConvertLegacyFilterLinks.ts
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/hooks/useConvertLegacyFilterLinks.ts
@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { parseAsString, useQueryStates } from 'nuqs';
+import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
+
+import {
+	ALL_ENDPOINTS_EXPRESSION_KEY,
+	ENDPOINT_STATS_EXPRESSION_KEY,
+} from '../../../filterParamKeys';
+import {
+	getLegacyFilterExpressions,
+	useApiMonitoringParams,
+} from '../../../queryParams';
+
+/**
+ * Moves the filters an older link keeps inside `apiMonitoringParams` into the
+ * drawer's own params, then rewrites `apiMonitoringParams` without them, so it
+ * happens once.
+ */
+export function useConvertLegacyFilterLinks(): void {
+	const [, setParams] = useApiMonitoringParams();
+	const [, setDrawerFilters] = useQueryStates({
+		[ALL_ENDPOINTS_EXPRESSION_KEY]: parseAsString,
+		[ENDPOINT_STATS_EXPRESSION_KEY]: parseAsString,
+	});
+
+	useEffect(() => {
+		const legacy = getLegacyFilterExpressions(
+			`?${getUnstableCurrentSearchParams().toString()}`,
+		);
+		if (
+			legacy.allEndpoints === undefined &&
+			legacy.endPointDetails === undefined
+		) {
+			return;
+		}
+		void setDrawerFilters({
+			[ALL_ENDPOINTS_EXPRESSION_KEY]: legacy.allEndpoints || null,
+			[ENDPOINT_STATS_EXPRESSION_KEY]: legacy.endPointDetails || null,
+		});
+		setParams({}, true);
+	}, [setParams, setDrawerFilters]);
+}
--- a/frontend/src/container/ApiMonitoring/tests/APIMonitoringUtils.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/APIMonitoringUtils.test.tsx
@@ -1,6 +1,4 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';

 import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
 import {
@@ -11,20 +9,14 @@ import {
 	getFormattedEndPointDropDownData,
 	getFormattedEndPointStatusCodeChartData,
 	getFormattedEndPointStatusCodeData,
-	getGroupByFiltersFromGroupByValues,
+	getGroupByExpressionFromRowData,
+	getHttpUrlExpression,
 	getStatusCodeBarChartWidgetData,
 	getTopErrorsColumnsConfig,
 	getTopErrorsCoRelationQueryFilters,
 } from '../utils';
 import { APIMonitoringColumnsMock } from './mock';

-// Mock or define DataTypes since it seems to be missing from imports
-const DataTypes = {
-	String: 'string',
-	Float64: 'float64',
-	bool: 'bool',
-};
-
 // Mock the external utils dependencies that are used within our tested functions
 jest.mock('../utils', () => {
 	// Import the actual module to partial mock
@@ -90,140 +82,39 @@ describe('API Monitoring Utils', () => {
 			expect(result[0].lastUsed).toBe('-');
 		});
 	});
-	describe('getGroupByFiltersFromGroupByValues', () => {
-		it('should convert row data to filters correctly', () => {
-			// Arrange
-			const rowData = {
-				'http.method': 'GET',
-				'http.status_code': '200',
-				'service.name': 'api-service',
-				// Fields that should be filtered out
-				data: 'someValue',
-				key: 'someKey',
-			};
-
-			const groupBy = [
-				{
-					id: 'group-by-1',
-					key: 'http.method',
-					dataType: DataTypes.String,
-					type: '',
-				},
-				{
-					id: 'group-by-2',
-					key: 'http.status_code',
-					dataType: DataTypes.String,
-					type: '',
-				},
-				{
-					id: 'group-by-3',
-					key: 'service.name',
-					dataType: DataTypes.String,
-					type: 'tag',
-				},
-			];
-
-			// Act
-			const result = getGroupByFiltersFromGroupByValues(
-				rowData,
-				groupBy as BaseAutocompleteData[],
-			);
-
-			// Assert
-			expect(result).toBeDefined();
-			expect(result?.op).toBe('AND');
-			// The implementation includes all keys from rowData, not just those in groupBy
-			expect(result?.items?.length).toBeGreaterThanOrEqual(3);
-
-			// Verify each filter matches the corresponding groupBy
+	describe('getGroupByExpressionFromRowData', () => {
+		it('builds an AND expression from the row values, skipping the url and metric columns', () => {
 			expect(
-				result?.items?.some(
-					(item) =>
-						item.key &&
-						item.key.key === 'http.method' &&
-						item.value === 'GET' &&
-						item.op === '=',
-				),
-			).toBe(true);
-
-			expect(
-				result?.items?.some(
-					(item) =>
-						item.key &&
-						item.key.key === 'http.status_code' &&
-						item.value === '200' &&
-						item.op === '=',
-				),
-			).toBe(true);
-
-			expect(
-				result?.items?.some(
-					(item) =>
-						item.key &&
-						item.key.key === 'service.name' &&
-						item.value === 'api-service' &&
-						item.op === '=',
-				),
-			).toBe(true);
+				getGroupByExpressionFromRowData({
+					http_url: '/api/test',
+					key: '3f2a-row-uuid',
+					A: 10,
+					B: 20,
+					C: 1,
+					F1: 5,
+					'service.name': 'api-service',
+					'http.status_code': 200,
+				}),
+			).toBe("service.name = 'api-service' AND http.status_code = 200");
 		});

-		it('should handle fields not in groupBy', () => {
-			// Arrange
-			const rowData = {
-				'http.method': 'GET',
-				'unknown.field': 'someValue',
-			};
-
-			const groupBy = [
-				{
-					id: 'group-by-1',
-					key: 'http.method',
-					dataType: DataTypes.String,
-					type: '',
-				},
-			];
-			// Act
-			const result = getGroupByFiltersFromGroupByValues(
-				rowData,
-				groupBy as BaseAutocompleteData[],
+		it('escapes quotes in values', () => {
+			expect(getGroupByExpressionFromRowData({ 'user.name': "o'brien" })).toBe(
+				"user.name = 'o\\'brien'",
 			);
-
-			// Assert
-			expect(result).toBeDefined();
-			// The implementation includes all keys from rowData, not just those in groupBy
-			expect(result?.items?.length).toBeGreaterThanOrEqual(1);
-
-			// Should include the known field with the proper dataType from groupBy
-			const knownField = result?.items?.find(
-				(item) => item.key && item.key.key === 'http.method',
-			);
-			expect(knownField).toBeDefined();
-			if (knownField && knownField.key) {
-				expect(knownField.key.dataType).toBe(DataTypes.String);
-			}
-
-			// Should include the unknown field
-			const unknownField = result?.items?.find(
-				(item) => item.key && item.key.key === 'unknown.field',
-			);
-			expect(unknownField).toBeDefined();
-			if (unknownField && unknownField.key) {
-				expect(unknownField.key.dataType).toBe(DataTypes.String); // Default
-			}
 		});

-		it('should handle empty input', () => {
-			// Arrange
-			const rowData = {};
-			const groupBy: any[] = [];
+		it('matches spans without the attribute when the group has no value', () => {
+			expect(
+				getGroupByExpressionFromRowData({
+					'service.name': 'cart',
+					'ai.embeddings': null,
+				}),
+			).toBe("service.name = 'cart' AND ai.embeddings NOT EXISTS");
+		});

-			// Act
-			const result = getGroupByFiltersFromGroupByValues(rowData, groupBy);
-
-			// Assert
-			expect(result).toBeDefined();
-			expect(result?.op).toBe('AND');
-			expect(result?.items).toHaveLength(0);
+		it('returns an empty expression for a row without group columns', () => {
+			expect(getGroupByExpressionFromRowData({ http_url: '/x', A: 1 })).toBe('');
 		});
 	});

@@ -703,13 +594,9 @@ describe('API Monitoring Utils', () => {
 		it('should generate widget configuration for status code bar chart', () => {
 			// Arrange
 			const domainName = 'test-domain';
-			const filters = { items: [], op: 'AND' };

 			// Act
-			const result = getStatusCodeBarChartWidgetData(
-				domainName,
-				filters as IBuilderQuery['filters'],
-			);
+			const result = getStatusCodeBarChartWidgetData(domainName, '');

 			// Assert
 			expect(result).toBeDefined();
@@ -723,47 +610,29 @@ describe('API Monitoring Utils', () => {
 			const queryData = result.query.builder.queryData[0];

 			// Should have domain filter
-			const domainFilter = queryData.filters?.items?.find(
-				(item) => item.key && item.key.key === SPAN_ATTRIBUTES.SERVER_NAME,
+			expect(queryData.filter?.expression).toBe(
+				`${SPAN_ATTRIBUTES.SERVER_NAME} = '${domainName}'`,
 			);
-			expect(domainFilter).toBeDefined();
-			if (domainFilter) {
-				expect(domainFilter.value).toBe(domainName);
-			}
 		});

 		it('should include custom filters in the widget configuration', () => {
 			// Arrange
 			const domainName = 'test-domain';
-			const customFilter = {
-				id: 'custom-filter',
-				key: {
-					dataType: 'string',
-					key: 'custom.key',
-					type: '',
-				},
-				op: '=',
-				value: 'custom-value',
-			};
-			const filters = { items: [customFilter], op: 'AND' };
+			const customFilterExpression = "custom.key = 'custom-value'";

 			// Act
 			const result = getStatusCodeBarChartWidgetData(
 				domainName,
-				filters as IBuilderQuery['filters'],
+				customFilterExpression,
 			);

 			// Assert
 			const queryData = result.query.builder.queryData[0];

-			// Should include our custom filter
-			const includedFilter = queryData.filters?.items?.find(
-				(item) => item.id === 'custom-filter',
+			// Should include our custom filter after the domain filter
+			expect(queryData.filter?.expression).toBe(
+				`${SPAN_ATTRIBUTES.SERVER_NAME} = '${domainName}' AND (${customFilterExpression})`,
 			);
-			expect(includedFilter).toBeDefined();
-			if (includedFilter) {
-				expect(includedFilter.value).toBe('custom-value');
-			}
 		});
 	});

@@ -927,4 +796,17 @@ describe('API Monitoring Utils', () => {
 			expect(latencyColumn?.title).toBeDefined();
 		});
 	});
+
+	describe('getHttpUrlExpression', () => {
+		it('returns no clause when no endpoint is picked', () => {
+			expect(getHttpUrlExpression('')).toBe('');
+		});
+
+		it('quotes the endpoint and escapes apostrophes', () => {
+			expect(getHttpUrlExpression('/x')).toBe("http_url = '/x'");
+			expect(getHttpUrlExpression("/users/o'brien")).toBe(
+				"http_url = '/users/o\\'brien'",
+			);
+		});
+	});
 });
--- a/frontend/src/container/ApiMonitoring/tests/AllEndPoints.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/AllEndPoints.test.tsx
@@ -1,11 +1,17 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import {
 	getAllEndpointsWidgetData,
-	getGroupByFiltersFromGroupByValues,
+	getGroupByExpressionFromRowData,
 } from 'container/ApiMonitoring/utils';
-import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+
+import {
+	ALL_ENDPOINTS_EXPRESSION_KEY,
+	ENDPOINT_STATS_EXPRESSION_KEY,
+} from 'container/ApiMonitoring/filterParamKeys';
+import { getCurrentNuqsSearchParams, resetNuqsState } from 'tests/nuqs-helpers';
+import { cleanup, fireEvent, render, screen, waitFor } from 'tests/test-utils';

 import AllEndPoints from '../Explorer/Domains/DomainDetails/AllEndPoints';
+import { FilterProviders } from './FilterProviders';
 import {
 	SPAN_ATTRIBUTES,
 	VIEWS,
@@ -14,7 +20,7 @@ import {
 // Mock the dependencies
 jest.mock('container/ApiMonitoring/utils', () => ({
 	getAllEndpointsWidgetData: jest.fn(),
-	getGroupByFiltersFromGroupByValues: jest.fn(),
+	getGroupByExpressionFromRowData: jest.fn(),
 }));

 jest.mock('container/WidgetCard/Card', () => ({
@@ -34,53 +40,47 @@ jest.mock('container/WidgetCard/Card', () => ({
 	)),
 }));

-jest.mock(
-	'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2',
-	() => ({
-		__esModule: true,
-		default: jest.fn().mockImplementation(({ onChange }) => (
-			<div data-testid="query-builder-mock">
-				<button
-					type="button"
-					data-testid="filter-change-button"
-					onClick={(): void =>
-						onChange({
-							items: [{ id: 'test', key: 'test', op: '=', value: 'test' }],
-							op: 'AND',
-						})
-					}
-				>
-					Change Filter
-				</button>
-			</div>
-		)),
-	}),
-);
-
-jest.mock('hooks/queryBuilder/useGetAggregateKeys', () => ({
-	useGetAggregateKeys: jest.fn(),
+jest.mock('components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch', () => ({
+	__esModule: true,
+	default: jest.fn().mockImplementation(({ onRun }) => (
+		<div data-testid="query-builder-mock">
+			<button
+				type="button"
+				data-testid="filter-change-button"
+				onClick={(): void => onRun("test = 'test'")}
+			>
+				Change Filter
+			</button>
+		</div>
+	)),
 }));

-jest.mock('antd', () => {
-	const originalModule = jest.requireActual('antd');
-	return {
-		...originalModule,
-		Select: jest.fn().mockImplementation(({ onChange }) => (
-			<div data-testid="select-mock">
-				<button
-					data-testid="select-change-button"
-					type="button"
-					onClick={(): void => onChange(['http.status_code'])}
-				>
-					Change GroupBy
-				</button>
-			</div>
-		)),
-	};
-});
+jest.mock('container/QueryBuilder/filters/GroupByFilter/GroupByFilter', () => ({
+	GroupByFilter: jest.fn().mockImplementation(({ onChange }) => (
+		<div data-testid="select-mock">
+			<button
+				data-testid="select-change-button"
+				type="button"
+				onClick={(): void =>
+					onChange([
+						{
+							id: 'http.status_code--string--attribute',
+							key: 'http.status_code',
+							dataType: 'string',
+							type: 'attribute',
+						},
+					])
+				}
+			>
+				Change GroupBy
+			</button>
+		</div>
+	)),
+}));

 // Mock useApiMonitoringParams hook
 jest.mock('container/ApiMonitoring/queryParams', () => ({
+	...jest.requireActual('container/ApiMonitoring/queryParams'),
 	useApiMonitoringParams: jest.fn().mockReturnValue([
 		{
 			showIP: true,
@@ -88,8 +88,6 @@ jest.mock('container/ApiMonitoring/queryParams', () => ({
 			selectedView: 'all_endpoints',
 			selectedEndPointName: '',
 			groupBy: [],
-			allEndpointsLocalFilters: undefined,
-			endPointDetailsLocalFilters: undefined,
 			modalTimeRange: undefined,
 			selectedInterval: undefined,
 		},
@@ -108,29 +106,21 @@ describe('AllEndPoints', () => {
 			startTime: 1609459200000,
 			endTime: 1609545600000,
 		},
-		initialFilters: { op: 'AND', items: [] },
-		setInitialFiltersEndPointStats: jest.fn(),
+	};
+
+	const renderAllEndPoints = (): void => {
+		render(
+			<FilterProviders queryParamKey={ALL_ENDPOINTS_EXPRESSION_KEY}>
+				<AllEndPoints {...mockProps} />
+			</FilterProviders>,
+		);
 	};

 	beforeEach(() => {
 		jest.clearAllMocks();
+		resetNuqsState();

 		// Setup mock implementations
-		(useGetAggregateKeys as jest.Mock).mockReturnValue({
-			data: {
-				payload: {
-					attributeKeys: [
-						{
-							key: 'http.status_code',
-							dataType: 'string',
-							type: '',
-						},
-					],
-				},
-			},
-			isLoading: false,
-		});
-
 		(getAllEndpointsWidgetData as jest.Mock).mockReturnValue({
 			id: 'test-widget',
 			title: 'Endpoint Overview',
@@ -139,10 +129,9 @@ describe('AllEndPoints', () => {
 			queryData: [],
 		});

-		(getGroupByFiltersFromGroupByValues as jest.Mock).mockReturnValue({
-			items: [{ id: 'group-filter', key: 'status', op: '=', value: '200' }],
-			op: 'AND',
-		});
+		(getGroupByExpressionFromRowData as jest.Mock).mockReturnValue(
+			"status = '200'",
+		);
 	});

 	// Add cleanup after each test
@@ -151,7 +140,7 @@ describe('AllEndPoints', () => {
 	});

 	it('renders component correctly', () => {
-		render(<AllEndPoints {...mockProps} />);
+		renderAllEndPoints();

 		// Verify basic component rendering
 		expect(screen.getByText('Group by')).toBeInTheDocument();
@@ -161,7 +150,7 @@ describe('AllEndPoints', () => {
 	});

 	it('handles filter changes', () => {
-		render(<AllEndPoints {...mockProps} />);
+		renderAllEndPoints();

 		// Trigger filter change
 		fireEvent.click(screen.getByTestId('filter-change-button'));
@@ -170,25 +159,24 @@ describe('AllEndPoints', () => {
 		expect(getAllEndpointsWidgetData).toHaveBeenCalledWith(
 			expect.anything(),
 			'test-domain',
-			expect.objectContaining({
-				items: expect.arrayContaining([expect.objectContaining({ id: 'test' })]),
-				op: 'AND',
-			}),
+			"test = 'test'",
 		);
 	});

 	it('handles group by changes', () => {
-		render(<AllEndPoints {...mockProps} />);
+		renderAllEndPoints();

 		// Trigger group by change
 		fireEvent.click(screen.getByTestId('select-change-button'));

-		// Check if setGroupBy was called with updated group by value
-		expect(mockProps.setGroupBy).toHaveBeenCalled();
+		// The picked keys are stored as given and written to the URL as bare names
+		expect(mockProps.setGroupBy).toHaveBeenCalledWith([
+			expect.objectContaining({ key: 'http.status_code', type: 'attribute' }),
+		]);
 	});

 	it('handles row click in grid card', async () => {
-		render(<AllEndPoints {...mockProps} />);
+		renderAllEndPoints();

 		// Trigger row click
 		fireEvent.click(screen.getByTestId('row-click-button'));
@@ -196,7 +184,11 @@ describe('AllEndPoints', () => {
 		// Check if proper functions were called
 		expect(mockProps.setSelectedEndPointName).toHaveBeenCalledWith('/api/test');
 		expect(mockProps.setSelectedView).toHaveBeenCalledWith(VIEWS.ENDPOINT_STATS);
-		expect(mockProps.setInitialFiltersEndPointStats).toHaveBeenCalled();
-		expect(getGroupByFiltersFromGroupByValues).toHaveBeenCalled();
+		expect(getGroupByExpressionFromRowData).toHaveBeenCalled();
+		await waitFor(() =>
+			expect(getCurrentNuqsSearchParams().get(ENDPOINT_STATS_EXPRESSION_KEY)).toBe(
+				"status = '200'",
+			),
+		);
 	});
 });
--- a/frontend/src/container/ApiMonitoring/tests/AllEndpointsWidgetV5Migration.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/AllEndpointsWidgetV5Migration.test.tsx
@@ -14,16 +14,12 @@ import {
 	BaseAutocompleteData,
 	DataTypes,
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';

 import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';

 describe('AllEndpointsWidget - V5 Migration Validation', () => {
 	const mockDomainName = 'api.example.com';
-	const emptyFilters: IBuilderQuery['filters'] = {
-		items: [],
-		op: 'AND',
-	};
+	const emptyFilters = '';
 	const emptyGroupBy: BaseAutocompleteData[] = [];

 	describe('1. V5 Format Migration - All Four Queries', () => {
--- a/frontend/src/container/ApiMonitoring/tests/DependentServices.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/DependentServices.test.tsx
@@ -121,8 +121,7 @@ describe('DependentServices', () => {
 		);
 	});

-	it('renders loading state correctly', () => {
-		// Arrange
+	it('keeps the table in place while loading', () => {
 		const mockQuery: MockQueryResult = {
 			isLoading: true,
 			isRefetching: false,
@@ -131,16 +130,15 @@ describe('DependentServices', () => {
 			refetch: refetchFn,
 		};

-		// Act
-		const { container } = render(
+		render(
 			<DependentServices
 				dependentServicesQuery={mockQuery as any}
 				timeRange={mockTimeRange}
 			/>,
 		);

-		// Assert
-		expect(container.querySelector('.ant-skeleton')).toBeInTheDocument();
+		expect(screen.getByTestId('dependent-services-table')).toBeInTheDocument();
+		expect(screen.getByTestId('loading-state')).toHaveTextContent('Loading');
 	});

 	it('renders error state correctly', () => {
@@ -225,8 +223,7 @@ describe('DependentServices', () => {
 		expect(screen.getByTestId('page-size')).toHaveTextContent('5');
 	});

-	it('handles refetching state correctly', () => {
-		// Arrange
+	it('shows the rows under the spinner while refetching', () => {
 		const mockQuery: MockQueryResult = {
 			isLoading: false,
 			isRefetching: true,
@@ -235,16 +232,16 @@ describe('DependentServices', () => {
 			refetch: refetchFn,
 		};

-		// Act
-		const { container } = render(
+		render(
 			<DependentServices
 				dependentServicesQuery={mockQuery as any}
 				timeRange={mockTimeRange}
 			/>,
 		);

-		// Assert
-		expect(container.querySelector('.ant-skeleton')).toBeInTheDocument();
+		expect(screen.getByTestId('loading-state')).toHaveTextContent('Loading');
+		expect(screen.getByTestId('row-count')).toHaveTextContent('2');
+		expect(screen.getByTestId('table-row-0')).toHaveTextContent('auth-service');
 	});

 	it('handles row click correctly', () => {
--- a/frontend/src/container/ApiMonitoring/tests/DomainDetails.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/DomainDetails.test.tsx
@@ -0,0 +1,60 @@
+import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
+import { render, screen } from 'tests/test-utils';
+
+import { VIEWS } from '../Explorer/Domains/DomainDetails/constants';
+import DomainDetails from '../Explorer/Domains/DomainDetails/DomainDetails';
+
+jest.mock('container/ApiMonitoring/queryParams', () => ({
+	...jest.requireActual('container/ApiMonitoring/queryParams'),
+	useApiMonitoringParams: jest.fn(),
+}));
+
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+jest.mock('../Explorer/Domains/DomainDetails/components/DomainMetrics', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+jest.mock('../Explorer/Domains/DomainDetails/EndPointDetails', () => {
+	const { useInitialExpression } = jest.requireActual(
+		'components/QueryBuilderV2',
+	);
+	return {
+		__esModule: true,
+		default: function MockEndPointDetails(): JSX.Element {
+			return (
+				<span data-testid="endpoint-stats-scope">{useInitialExpression()}</span>
+			);
+		},
+	};
+});
+
+describe('DomainDetails', () => {
+	it('scopes Endpoint Stats to the domain and the picked endpoint', () => {
+		jest
+			.mocked(useApiMonitoringParams)
+			.mockReturnValue([
+				{ selectedView: VIEWS.ENDPOINT_STATS, selectedEndPointName: '/v1/charges' },
+				jest.fn(),
+			]);
+
+		render(
+			<DomainDetails
+				domainData={{ domainName: 'api.example.com' }}
+				handleClose={jest.fn()}
+				selectedDomainIndex={0}
+				setSelectedDomainIndex={jest.fn()}
+				domainListLength={1}
+				domainListFilterExpression=""
+			/>,
+		);
+
+		expect(screen.getByTestId('endpoint-stats-scope')).toHaveTextContent(
+			"kind_string = 'Client' AND http_host = 'api.example.com' AND http_url = '/v1/charges'",
+		);
+	});
+});
--- a/frontend/src/container/ApiMonitoring/tests/DomainList.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/DomainList.test.tsx
@@ -0,0 +1,84 @@
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import DomainList from '../Explorer/Domains/DomainList';
+
+const FILTER = "http_host = 'api.example.com'";
+
+jest.mock('components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch', () => ({
+	__esModule: true,
+	default: jest
+		.fn()
+		.mockImplementation(
+			({
+				onChange,
+				onRun,
+			}: {
+				onChange: (query: string) => void;
+				onRun?: (query: string) => void;
+			}) => (
+				<>
+					<button
+						type="button"
+						data-testid="query-search-type"
+						onClick={(): void => onChange("http_host = 'api.example.com'")}
+					>
+						Type
+					</button>
+					<button
+						type="button"
+						data-testid="query-search-run"
+						onClick={(): void => onRun?.("http_host = 'api.example.com'")}
+					>
+						Run
+					</button>
+				</>
+			),
+		),
+}));
+
+jest.mock('container/Toolbar/Toolbar', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+jest.mock('../Explorer/Domains/DomainDetails/DomainDetails', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+// Under the test router it keeps rewriting the URL, which re-renders the page
+// without end.
+jest.mock('hooks/queryBuilder/useShareBuilderUrl', () => ({
+	useShareBuilderUrl: jest.fn(),
+}));
+
+describe('DomainList', () => {
+	it('runs the typed filter from the filter box', async () => {
+		let listRequests = 0;
+		server.use(
+			rest.post('*/third-party-apis/overview/list', (_req, res, ctx) => {
+				listRequests += 1;
+				return res(ctx.status(200), ctx.json({ data: { data: { results: [] } } }));
+			}),
+		);
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<DomainList />, undefined, {
+			initialRoute: '/api-monitoring/explorer',
+		});
+		await waitFor(() => expect(listRequests).toBe(1));
+
+		await user.click(screen.getByTestId('query-search-type'));
+		await user.click(screen.getByTestId('query-search-run'));
+
+		await waitFor(() => expect(listRequests).toBe(2));
+		const [url] = safeNavigateMock.mock.calls[0];
+		const compositeQuery = new URLSearchParams(String(url).split('?')[1]).get(
+			'compositeQuery',
+		);
+		expect(decodeURIComponent(compositeQuery ?? '')).toContain(
+			`"expression":"${FILTER}"`,
+		);
+	});
+});
--- a/frontend/src/container/ApiMonitoring/tests/EndPointDetails.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/EndPointDetails.test.tsx
@@ -1,5 +1,7 @@
 import { useQueries } from 'react-query';
-import { fireEvent, render, screen } from '@testing-library/react';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { ENDPOINT_STATS_EXPRESSION_KEY } from 'container/ApiMonitoring/filterParamKeys';
 import {
 	END_POINT_DETAILS_QUERY_KEYS_ARRAY,
 	extractPortAndEndpoint,
@@ -11,14 +13,13 @@ import {
 	CustomTimeType,
 	Time,
 } from 'container/TopNav/DateTimeSelectionV2/types';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	TagFilter,
-	TagFilterItem,
-} from 'types/api/queryBuilder/queryBuilderData';
+import { getCurrentNuqsSearchParams, resetNuqsState } from 'tests/nuqs-helpers';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';

 import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
+import EndPointPicker from '../Explorer/Domains/DomainDetails/components/EndPointPicker';
 import EndPointDetails from '../Explorer/Domains/DomainDetails/EndPointDetails';
+import { FilterProviders } from './FilterProviders';

 // Mock dependencies
 jest.mock('react-query', () => ({
@@ -26,72 +27,32 @@ jest.mock('react-query', () => ({
 	useQueries: jest.fn(),
 }));

-// Mock useApiMonitoringParams hook
-jest.mock('container/ApiMonitoring/queryParams', () => ({
-	useApiMonitoringParams: jest.fn().mockReturnValue([
-		{
-			showIP: true,
-			selectedDomain: '',
-			selectedView: 'all_endpoints',
-			selectedEndPointName: '',
-			groupBy: [],
-			allEndpointsLocalFilters: undefined,
-			endPointDetailsLocalFilters: undefined,
-			modalTimeRange: undefined,
-			selectedInterval: undefined,
-		},
-		jest.fn(),
-	]),
-}));
-
 jest.mock('container/ApiMonitoring/utils', () => ({
-	END_POINT_DETAILS_QUERY_KEYS_ARRAY: [
-		'endPointMetricsData',
-		'endPointStatusCodeData',
-		'endPointDropDownData',
-		'endPointDependentServicesData',
-		'endPointStatusCodeBarChartsData',
-		'endPointStatusCodeLatencyBarChartsData',
-	],
+	END_POINT_DETAILS_QUERY_KEYS_ARRAY: jest.requireActual(
+		'container/ApiMonitoring/utils',
+	).END_POINT_DETAILS_QUERY_KEYS_ARRAY,
 	extractPortAndEndpoint: jest.fn(),
+	getHttpUrlExpression: jest.requireActual('container/ApiMonitoring/utils')
+		.getHttpUrlExpression,
 	getEndPointDetailsQueryPayload: jest.fn(),
 	getLatencyOverTimeWidgetData: jest.fn(),
 	getRateOverTimeWidgetData: jest.fn(),
 }));

-jest.mock(
-	'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2',
-	() => ({
-		__esModule: true,
-		default: jest.fn().mockImplementation(({ onChange }) => (
-			<div data-testid="query-builder-search">
-				<button
-					type="button"
-					data-testid="filter-change-button"
-					onClick={(): void =>
-						onChange({
-							items: [
-								{
-									id: 'test-filter',
-									key: {
-										key: 'test.key',
-										dataType: DataTypes.String,
-										type: 'tag',
-									},
-									op: '=',
-									value: 'test-value',
-								},
-							],
-							op: 'AND',
-						})
-					}
-				>
-					Change Filter
-				</button>
-			</div>
-		)),
-	}),
-);
+jest.mock('components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch', () => ({
+	__esModule: true,
+	default: jest.fn().mockImplementation(({ onRun }) => (
+		<div data-testid="query-builder-search">
+			<button
+				type="button"
+				data-testid="filter-change-button"
+				onClick={(): void => onRun("test.key = 'test-value'")}
+			>
+				Change Filter
+			</button>
+		</div>
+	)),
+}));

 // Mock all child components to simplify testing
 jest.mock(
@@ -107,15 +68,15 @@ jest.mock(
 );

 jest.mock(
-	'../Explorer/Domains/DomainDetails/components/EndPointsDropDown',
+	'../Explorer/Domains/DomainDetails/components/EndPointPicker',
 	() => ({
 		__esModule: true,
-		default: jest.fn().mockImplementation(({ setSelectedEndPointName }) => (
+		default: jest.fn().mockImplementation(({ onChange }) => (
 			<div data-testid="endpoints-dropdown">
 				<button
 					type="button"
 					data-testid="select-endpoint-button"
-					onClick={(): void => setSelectedEndPointName('/api/new-endpoint')}
+					onClick={(): void => onChange('/api/new-endpoint')}
 				>
 					Select Endpoint
 				</button>
@@ -172,8 +133,23 @@ jest.mock(
 	}),
 );

+function renderStats(ui: JSX.Element, linkFilter = ''): void {
+	render(
+		<FilterProviders
+			queryParamKey={ENDPOINT_STATS_EXPRESSION_KEY}
+			searchParams={
+				linkFilter
+					? `${ENDPOINT_STATS_EXPRESSION_KEY}=${encodeURIComponent(linkFilter)}`
+					: ''
+			}
+		>
+			{ui}
+		</FilterProviders>,
+	);
+}
+
 describe('EndPointDetails Component', () => {
-	const mockQueryResults = Array(6).fill({
+	const mockQueryResults = Array(5).fill({
 		data: { data: [] },
 		isLoading: false,
 		isError: false,
@@ -184,7 +160,6 @@ describe('EndPointDetails Component', () => {
 		domainName: 'test-domain',
 		endPointName: '/api/test',
 		setSelectedEndPointName: jest.fn(),
-		initialFilters: { items: [], op: 'AND' } as TagFilter,
 		timeRange: {
 			startTime: 1609459200000,
 			endTime: 1609545600000,
@@ -197,6 +172,7 @@ describe('EndPointDetails Component', () => {

 	beforeEach(() => {
 		jest.clearAllMocks();
+		resetNuqsState();

 		(extractPortAndEndpoint as jest.Mock).mockReturnValue({
 			port: '8080',
@@ -209,7 +185,6 @@ describe('EndPointDetails Component', () => {
 			{ id: 'query3', label: 'Query 3' },
 			{ id: 'query4', label: 'Query 4' },
 			{ id: 'query5', label: 'Query 5' },
-			{ id: 'query6', label: 'Query 6' },
 		]);

 		(getRateOverTimeWidgetData as jest.Mock).mockReturnValue({
@@ -226,7 +201,7 @@ describe('EndPointDetails Component', () => {
 	});

 	it('renders the component correctly', () => {
-		render(<EndPointDetails {...mockProps} />);
+		renderStats(<EndPointDetails {...mockProps} />);

 		// Check all major components are rendered
 		expect(screen.getByTestId('query-builder-search')).toBeInTheDocument();
@@ -246,44 +221,29 @@ describe('EndPointDetails Component', () => {
 	});

 	it('calls getEndPointDetailsQueryPayload with correct parameters', () => {
-		render(<EndPointDetails {...mockProps} />);
+		renderStats(<EndPointDetails {...mockProps} />);

 		expect(getEndPointDetailsQueryPayload).toHaveBeenCalledWith(
 			'test-domain',
 			mockProps.timeRange.startTime,
 			mockProps.timeRange.endTime,
-			expect.objectContaining({
-				items: expect.arrayContaining([
-					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
-						value: '/api/test',
-					}),
-				]),
-				op: 'AND',
-			}),
+			`${SPAN_ATTRIBUTES.HTTP_URL} = '/api/test'`,
 		);
 	});

 	it('adds endpoint filter to initial filters', () => {
-		render(<EndPointDetails {...mockProps} />);
+		renderStats(<EndPointDetails {...mockProps} />);

 		expect(getEndPointDetailsQueryPayload).toHaveBeenCalledWith(
 			expect.anything(),
 			expect.anything(),
 			expect.anything(),
-			expect.objectContaining({
-				items: expect.arrayContaining([
-					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
-						value: '/api/test',
-					}),
-				]),
-			}),
+			expect.stringContaining(`${SPAN_ATTRIBUTES.HTTP_URL} = '/api/test'`),
 		);
 	});

-	it('updates filters when QueryBuilderSearch changes', () => {
-		render(<EndPointDetails {...mockProps} />);
+	it('updates filters when the search expression is run', async () => {
+		renderStats(<EndPointDetails {...mockProps} />);

 		// Trigger filter change
 		fireEvent.click(screen.getByTestId('filter-change-button'));
@@ -294,19 +254,37 @@ describe('EndPointDetails Component', () => {
 			expect.anything(),
 			expect.anything(),
 			expect.anything(),
+			`${SPAN_ATTRIBUTES.HTTP_URL} = '/api/test' AND (test.key = 'test-value')`,
+		);
+		await waitFor(() =>
+			expect(getCurrentNuqsSearchParams().get(ENDPOINT_STATS_EXPRESSION_KEY)).toBe(
+				"test.key = 'test-value'",
+			),
+		);
+	});
+
+	it('keeps the endpoint out of the editor and the picker options', () => {
+		renderStats(<EndPointDetails {...mockProps} />, "service.name = 'checkout'");
+
+		expect(QuerySearch).toHaveBeenLastCalledWith(
 			expect.objectContaining({
-				items: expect.arrayContaining([
-					expect.objectContaining({
-						key: expect.objectContaining({ key: 'test.key' }),
-						value: 'test-value',
-					}),
-				]),
+				queryData: expect.objectContaining({
+					filter: { expression: "service.name = 'checkout'" },
+				}),
 			}),
+			expect.anything(),
+		);
+		expect(EndPointPicker).toHaveBeenLastCalledWith(
+			expect.objectContaining({
+				filterExpression: "service.name = 'checkout'",
+				value: '/api/test',
+			}),
+			expect.anything(),
 		);
 	});

 	it('handles endpoint dropdown selection', () => {
-		render(<EndPointDetails {...mockProps} />);
+		renderStats(<EndPointDetails {...mockProps} />);

 		// Trigger endpoint selection
 		fireEvent.click(screen.getByTestId('select-endpoint-button'));
@@ -318,63 +296,50 @@ describe('EndPointDetails Component', () => {
 	});

 	it('does not display dependent services when service filter is applied', () => {
-		const propsWithServiceFilter = {
-			...mockProps,
-			initialFilters: {
-				items: [
-					{
-						id: 'service-filter',
-						key: {
-							key: 'service.name',
-							dataType: DataTypes.String,
-							type: 'tag',
-						},
-						op: '=',
-						value: 'test-service',
-					},
-				] as TagFilterItem[],
-				op: 'AND',
-			} as TagFilter,
-		};
-
-		render(<EndPointDetails {...propsWithServiceFilter} />);
+		renderStats(
+			<EndPointDetails {...mockProps} />,
+			"service.name = 'test-service'",
+		);

 		// Dependent services should not be displayed
 		expect(screen.queryByTestId('dependent-services')).not.toBeInTheDocument();
 	});

 	it('passes the correct parameters to widget data generators', () => {
-		render(<EndPointDetails {...mockProps} />);
+		renderStats(<EndPointDetails {...mockProps} />);

 		expect(getRateOverTimeWidgetData).toHaveBeenCalledWith(
 			'test-domain',
 			'/api/test',
-			expect.objectContaining({
-				items: expect.arrayContaining([
-					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
-						value: '/api/test',
-					}),
-				]),
-			}),
+			expect.stringContaining(`${SPAN_ATTRIBUTES.HTTP_URL} = '/api/test'`),
 		);

 		expect(getLatencyOverTimeWidgetData).toHaveBeenCalledWith(
 			'test-domain',
 			'/api/test',
-			expect.objectContaining({
-				items: expect.arrayContaining([
-					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
-						value: '/api/test',
-					}),
-				]),
-			}),
+			expect.stringContaining(`${SPAN_ATTRIBUTES.HTTP_URL} = '/api/test'`),
+		);
+	});
+
+	it('keeps the previous dependent services while a new filter loads', () => {
+		renderStats(<EndPointDetails {...mockProps} />);
+
+		const queries = jest.mocked(useQueries).mock.calls[0][0];
+		expect(
+			queries.map(({ queryKey, keepPreviousData }) => [
+				(queryKey as unknown[])[0],
+				keepPreviousData,
+			]),
+		).toStrictEqual(
+			END_POINT_DETAILS_QUERY_KEYS_ARRAY.map((key) => [
+				key,
+				key === REACT_QUERY_KEY.GET_ENDPOINT_DEPENDENT_SERVICES_DATA,
+			]),
 		);
 	});

 	it('generates correct query parameters for useQueries', () => {
-		render(<EndPointDetails {...mockProps} />);
+		renderStats(<EndPointDetails {...mockProps} />);

 		// Check if useQueries was called with correct parameters
 		expect(useQueries).toHaveBeenCalledWith(
--- a/frontend/src/container/ApiMonitoring/tests/EndPointPicker.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/EndPointPicker.test.tsx
@@ -0,0 +1,115 @@
+import {
+	GetMetricQueryRange,
+	GetQueryResultsProps,
+} from 'lib/dashboard/getQueryResults';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+
+import EndPointPicker from '../Explorer/Domains/DomainDetails/components/EndPointPicker';
+import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
+
+jest.mock('lib/dashboard/getQueryResults', () => ({
+	GetMetricQueryRange: jest.fn(),
+}));
+
+const mockGetMetricQueryRange = jest.mocked(GetMetricQueryRange);
+
+const rowsResponse = (urls: string[]): MetricQueryRangeSuccessResponse => ({
+	statusCode: 200,
+	message: 'success',
+	error: null,
+	payload: {
+		data: {
+			resultType: '',
+			newResult: { data: { result: [], resultType: '' } },
+			result: [
+				{
+					metric: {},
+					queryName: 'A',
+					values: [],
+					table: {
+						columns: [],
+						rows: urls.map((url) => ({
+							data: { [SPAN_ATTRIBUTES.HTTP_URL]: url, A: 1 },
+						})),
+					},
+				},
+			],
+		},
+	},
+});
+
+const baseProps = {
+	domainName: 'api.example.com',
+	timeRange: { startTime: 1000, endTime: 2000 },
+	filterExpression: "service.name = 'checkout'",
+	value: '',
+};
+
+describe('EndPointPicker', () => {
+	beforeEach(() => {
+		mockGetMetricQueryRange.mockResolvedValue(
+			rowsResponse(['/v1/charges', '/v1/refunds']),
+		);
+	});
+
+	it('loads options for the domain scoped by the user filter', async () => {
+		render(<EndPointPicker {...baseProps} onChange={jest.fn()} />);
+
+		await waitFor(() => expect(mockGetMetricQueryRange).toHaveBeenCalled());
+		const payload: GetQueryResultsProps =
+			mockGetMetricQueryRange.mock.calls[0][0];
+		expect(payload.query.builder.queryData[0].filter?.expression).toBe(
+			`http_host = 'api.example.com' AND kind_string = 'Client' AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS AND (service.name = 'checkout')`,
+		);
+	});
+
+	it('reports the picked endpoint', async () => {
+		const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+		const onChange = jest.fn() as jest.MockedFunction<
+			(endPointName: string) => void
+		>;
+		render(<EndPointPicker {...baseProps} onChange={onChange} />);
+
+		await waitFor(() => expect(mockGetMetricQueryRange).toHaveBeenCalled());
+		await user.click(screen.getByTestId('endpoint-picker'));
+		await user.click(await screen.findByText('/v1/refunds'));
+
+		expect(onChange).toHaveBeenCalledWith('/v1/refunds');
+	});
+
+	it('shows All endpoints when none is picked and clears through it', async () => {
+		const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+		const onChange = jest.fn() as jest.MockedFunction<
+			(endPointName: string) => void
+		>;
+		const { rerender } = render(
+			<EndPointPicker {...baseProps} onChange={onChange} />,
+		);
+
+		expect(screen.getByTestId('endpoint-picker')).toHaveTextContent(
+			'All endpoints',
+		);
+
+		rerender(
+			<EndPointPicker {...baseProps} value="/v1/charges" onChange={onChange} />,
+		);
+		await waitFor(() => expect(mockGetMetricQueryRange).toHaveBeenCalled());
+		await user.click(screen.getByTestId('endpoint-picker'));
+		await user.click(
+			await screen.findByRole('option', { name: 'All endpoints' }),
+		);
+
+		expect(onChange).toHaveBeenCalledWith('');
+	});
+
+	it('shows the selected endpoint', async () => {
+		render(
+			<EndPointPicker {...baseProps} value="/v1/charges" onChange={jest.fn()} />,
+		);
+
+		await waitFor(() =>
+			expect(screen.getByText('/v1/charges')).toBeInTheDocument(),
+		);
+	});
+});
--- a/frontend/src/container/ApiMonitoring/tests/EndPointsDropDown.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/EndPointsDropDown.test.tsx
@@ -1,210 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { getFormattedEndPointDropDownData } from 'container/ApiMonitoring/utils';
-
-import EndPointsDropDown from '../Explorer/Domains/DomainDetails/components/EndPointsDropDown';
-import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
-
-// Mock the Select component from antd
-jest.mock('antd', () => {
-	const originalModule = jest.requireActual('antd');
-	return {
-		...originalModule,
-		Select: jest
-			.fn()
-			.mockImplementation(({ value, loading, onChange, options, onClear }) => (
-				<div data-testid="mock-select">
-					<div data-testid="select-value">{value}</div>
-					<div data-testid="select-loading">
-						{loading ? 'loading' : 'not-loading'}
-					</div>
-					<select
-						data-testid="select-element"
-						value={value || ''}
-						onChange={(e): void => onChange(e.target.value)}
-					>
-						<option value="">Select...</option>
-						{options?.map((option: { value: string; label: string; key: string }) => (
-							<option key={option.value} value={option.value}>
-								{option.label}
-							</option>
-						))}
-					</select>
-					<button data-testid="select-clear-button" type="button" onClick={onClear}>
-						Clear
-					</button>
-				</div>
-			)),
-	};
-});
-
-// Mock the utilities
-jest.mock('container/ApiMonitoring/utils', () => ({
-	getFormattedEndPointDropDownData: jest.fn(),
-}));
-
-describe('EndPointsDropDown Component', () => {
-	const mockEndPoints = [
-		{ key: '1', value: '/api/endpoint1', label: '/api/endpoint1' },
-		{ key: '2', value: '/api/endpoint2', label: '/api/endpoint2' },
-	];
-
-	const mockSetSelectedEndPointName = jest.fn();
-
-	// Create a mock that satisfies the UseQueryResult interface
-	const createMockQueryResult = (overrides: any = {}): any => ({
-		data: {
-			payload: {
-				data: {
-					result: [
-						{
-							table: {
-								rows: [],
-							},
-						},
-					],
-				},
-			},
-		},
-		dataUpdatedAt: 0,
-		error: null,
-		errorUpdatedAt: 0,
-		failureCount: 0,
-		isError: false,
-		isFetched: true,
-		isFetchedAfterMount: true,
-		isFetching: false,
-		isIdle: false,
-		isLoading: false,
-		isLoadingError: false,
-		isPlaceholderData: false,
-		isPreviousData: false,
-		isRefetchError: false,
-		isRefetching: false,
-		isStale: false,
-		isSuccess: true,
-		refetch: jest.fn(),
-		remove: jest.fn(),
-		status: 'success',
-		...overrides,
-	});
-
-	const defaultProps = {
-		selectedEndPointName: '',
-		setSelectedEndPointName: mockSetSelectedEndPointName,
-		endPointDropDownDataQuery: createMockQueryResult(),
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		(getFormattedEndPointDropDownData as jest.Mock).mockReturnValue(
-			mockEndPoints,
-		);
-	});
-
-	it('renders the component correctly', () => {
-		render(<EndPointsDropDown {...defaultProps} />);
-
-		expect(screen.getByTestId('mock-select')).toBeInTheDocument();
-		expect(screen.getByTestId('select-loading')).toHaveTextContent('not-loading');
-	});
-
-	it('shows loading state when data is loading', () => {
-		const loadingProps = {
-			...defaultProps,
-			endPointDropDownDataQuery: createMockQueryResult({
-				isLoading: true,
-			}),
-		};
-
-		render(<EndPointsDropDown {...loadingProps} />);
-
-		expect(screen.getByTestId('select-loading')).toHaveTextContent('loading');
-	});
-
-	it('shows loading state when data is fetching', () => {
-		const fetchingProps = {
-			...defaultProps,
-			endPointDropDownDataQuery: createMockQueryResult({
-				isFetching: true,
-			}),
-		};
-
-		render(<EndPointsDropDown {...fetchingProps} />);
-
-		expect(screen.getByTestId('select-loading')).toHaveTextContent('loading');
-	});
-
-	it('displays the selected endpoint', () => {
-		const selectedProps = {
-			...defaultProps,
-			selectedEndPointName: '/api/endpoint1',
-		};
-
-		render(<EndPointsDropDown {...selectedProps} />);
-
-		expect(screen.getByTestId('select-value')).toHaveTextContent(
-			'/api/endpoint1',
-		);
-	});
-
-	it('calls setSelectedEndPointName when an option is selected', () => {
-		render(<EndPointsDropDown {...defaultProps} />);
-
-		// Get the select element and change its value
-		const selectElement = screen.getByTestId('select-element');
-		fireEvent.change(selectElement, { target: { value: '/api/endpoint2' } });
-
-		expect(mockSetSelectedEndPointName).toHaveBeenCalledWith('/api/endpoint2');
-	});
-
-	it('calls setSelectedEndPointName with empty string when cleared', () => {
-		render(<EndPointsDropDown {...defaultProps} />);
-
-		// Click the clear button
-		const clearButton = screen.getByTestId('select-clear-button');
-		fireEvent.click(clearButton);
-
-		expect(mockSetSelectedEndPointName).toHaveBeenCalledWith('');
-	});
-
-	it('passes dropdown style prop correctly', () => {
-		const styleProps = {
-			...defaultProps,
-			dropdownStyle: { maxHeight: '200px' },
-		};
-
-		render(<EndPointsDropDown {...styleProps} />);
-
-		// We can't easily test style props in our mock, but at least ensure the component rendered
-		expect(screen.getByTestId('mock-select')).toBeInTheDocument();
-	});
-
-	it('formats data using the utility function', () => {
-		const mockRows = [
-			{ data: { [SPAN_ATTRIBUTES.HTTP_URL]: '/api/test', A: 10 } },
-		];
-
-		const dataProps = {
-			...defaultProps,
-			endPointDropDownDataQuery: createMockQueryResult({
-				data: {
-					payload: {
-						data: {
-							result: [
-								{
-									table: {
-										rows: mockRows,
-									},
-								},
-							],
-						},
-					},
-				},
-			}),
-		};
-
-		render(<EndPointsDropDown {...dataProps} />);
-
-		expect(getFormattedEndPointDropDownData).toHaveBeenCalledWith(mockRows);
-	});
-});
--- a/frontend/src/container/ApiMonitoring/tests/EndpointDropdownV5Migration.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/EndpointDropdownV5Migration.test.tsx
@@ -1,8 +1,8 @@
 /**
 * V5 Migration Tests for Endpoint Dropdown Query
 *
- * These tests validate the migration from V4 to V5 format for the third payload
- * in getEndPointDetailsQueryPayload (endpoint dropdown data):
+ * These tests validate the migration from V4 to V5 format for
+ * getEndPointDropDownQueryPayload (endpoint picker options):
 * - Filter format change: filters.items[] → filter.expression
 * - Domain handling: http_host = '${domainName}'
 * - Kind filter: kind_string = 'Client'
@@ -10,9 +10,8 @@
 * - Aggregation: count() expression
 * - GroupBy: http_url with type 'attribute'
 */
-import { getEndPointDetailsQueryPayload } from 'container/ApiMonitoring/utils';
+import { getEndPointDropDownQueryPayload } from 'container/ApiMonitoring/utils';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';

 import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';

@@ -20,22 +19,16 @@ describe('EndpointDropdown - V5 Migration Validation', () => {
 	const mockDomainName = 'api.example.com';
 	const mockStartTime = 1000;
 	const mockEndTime = 2000;
-	const emptyFilters: IBuilderQuery['filters'] = {
-		items: [],
-		op: 'AND',
-	};
+	const emptyFilters = '';

 	describe('1. V5 Format Migration - Structure and Base Filters', () => {
 		it('migrates to V5 format with correct filter expression structure, aggregations, and groupBy', () => {
-			const payload = getEndPointDetailsQueryPayload(
+			const dropdownQuery = getEndPointDropDownQueryPayload(
 				mockDomainName,
 				mockStartTime,
 				mockEndTime,
 				emptyFilters,
 			);
-
-			// Third payload is the endpoint dropdown query (index 2)
-			const dropdownQuery = payload[2];
 			const queryA = dropdownQuery.query.builder.queryData[0];

 			// CRITICAL V5 MIGRATION: filter.expression (not filters.items)
@@ -77,46 +70,21 @@ describe('EndpointDropdown - V5 Migration Validation', () => {

 	describe('2. Custom Filters Integration', () => {
 		it('merges custom filters into filter expression with AND logic', () => {
-			const customFilters: IBuilderQuery['filters'] = {
-				items: [
-					{
-						id: 'test-1',
-						key: {
-							key: 'service.name',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'user-service',
-					},
-					{
-						id: 'test-2',
-						key: {
-							key: 'deployment.environment',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'production',
-					},
-				],
-				op: 'AND',
-			};
+			const customFilters =
+				"service.name = 'user-service' AND deployment.environment = 'production'";

-			const payload = getEndPointDetailsQueryPayload(
+			const dropdownQuery = getEndPointDropDownQueryPayload(
 				mockDomainName,
 				mockStartTime,
 				mockEndTime,
 				customFilters,
 			);
-
-			const dropdownQuery = payload[2];
 			const expression =
 				dropdownQuery.query.builder.queryData[0].filter?.expression;

 			// Exact filter expression with custom filters merged
 			expect(expression).toBe(
-				`${SPAN_ATTRIBUTES.SERVER_NAME} = 'api.example.com' AND kind_string = 'Client' AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS service.name = 'user-service' AND deployment.environment = 'production'`,
+				`${SPAN_ATTRIBUTES.SERVER_NAME} = 'api.example.com' AND kind_string = 'Client' AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS AND (service.name = 'user-service' AND deployment.environment = 'production')`,
 			);
 		});
 	});
--- a/frontend/src/container/ApiMonitoring/tests/FilterProviders.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/FilterProviders.tsx
@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { QuerySearchV2Provider } from 'components/QueryBuilderV2';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { onNuqsUrlUpdate } from 'tests/nuqs-helpers';
+
+/** Mounts a drawer tab's filter provider over an in-memory URL. */
+export function FilterProviders({
+	queryParamKey,
+	initialExpression,
+	searchParams = '',
+	children,
+}: {
+	queryParamKey: string;
+	initialExpression?: string;
+	searchParams?: string;
+	children: ReactNode;
+}): JSX.Element {
+	return (
+		<NuqsTestingAdapter
+			searchParams={searchParams}
+			onUrlUpdate={onNuqsUrlUpdate}
+			rateLimitFactor={0}
+			hasMemory
+		>
+			<QuerySearchV2Provider
+				queryParamKey={queryParamKey}
+				initialExpression={initialExpression}
+				persistOnUnmount
+			>
+				{children}
+			</QuerySearchV2Provider>
+		</NuqsTestingAdapter>
+	);
+}
--- a/frontend/src/container/ApiMonitoring/tests/MetricOverTimeV5Migration.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/MetricOverTimeV5Migration.test.tsx
@@ -2,16 +2,11 @@ import {
 	getLatencyOverTimeWidgetData,
 	getRateOverTimeWidgetData,
 } from 'container/ApiMonitoring/utils';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';

 describe('MetricOverTime - V5 Migration Validation', () => {
 	const mockDomainName = 'api.example.com';
 	const mockEndpointName = '/api/users';
-	const emptyFilters: IBuilderQuery['filters'] = {
-		items: [],
-		op: 'AND',
-	};
+	const emptyFilters = '';

 	describe('1. Rate Over Time - V5 Payload Structure', () => {
 		it('generates V5 filter expression format (not V3 filters.items)', () => {
@@ -51,31 +46,8 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 		});

 		it('merges custom filters into filter expression', () => {
-			const customFilters: IBuilderQuery['filters'] = {
-				items: [
-					{
-						id: 'test-1',
-						key: {
-							key: 'service.name',
-							dataType: DataTypes.String,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'user-service',
-					},
-					{
-						id: 'test-2',
-						key: {
-							key: 'deployment.environment',
-							dataType: DataTypes.String,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'production',
-					},
-				],
-				op: 'AND',
-			};
+			const customFilters =
+				"service.name = 'user-service' AND deployment.environment = 'production'";

 			const widget = getRateOverTimeWidgetData(
 				mockDomainName,
@@ -137,21 +109,8 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 		});

 		it('merges custom filters into filter expression', () => {
-			const customFilters: IBuilderQuery['filters'] = {
-				items: [
-					{
-						id: 'test-1',
-						key: {
-							key: 'service.name',
-							dataType: DataTypes.String,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'user-service',
-					},
-				],
-				op: 'AND',
-			};
+			const customFilters =
+				"service.name = 'user-service' AND deployment.environment = 'production'";

 			const widget = getLatencyOverTimeWidgetData(
 				mockDomainName,
@@ -163,7 +122,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {

 			// Verify domain filter is present
 			expect(queryData?.filter?.expression).toContain(
-				`http_host = '${mockDomainName}' service.name = 'user-service'`,
+				`http_host = '${mockDomainName}' AND (service.name = 'user-service'`,
 			);
 		});
 	});
--- a/frontend/src/container/ApiMonitoring/tests/StatusCodeBarCharts.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/StatusCodeBarCharts.test.tsx
@@ -5,7 +5,6 @@ import {
 	getStatusCodeBarChartWidgetData,
 } from 'container/ApiMonitoring/utils';
 import { SuccessResponse } from 'types/api';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';

 import ErrorState from '../Explorer/Domains/DomainDetails/components/ErrorState';
 import StatusCodeBarCharts from '../Explorer/Domains/DomainDetails/components/StatusCodeBarCharts';
@@ -156,7 +155,6 @@ jest.mock('antd', () => {

 describe('StatusCodeBarCharts', () => {
 	// Default props for tests
-	const mockFilters: IBuilderQuery['filters'] = { items: [], op: 'AND' };
 	const mockTimeRange = {
 		startTime: 1609459200000,
 		endTime: 1609545600000,
@@ -251,7 +249,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				filters={mockFilters}
+				filterExpression=""
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
 			/>,
@@ -286,7 +284,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				filters={mockFilters}
+				filterExpression=""
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
 			/>,
@@ -328,7 +326,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				filters={mockFilters}
+				filterExpression=""
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
 			/>,
@@ -372,7 +370,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				filters={mockFilters}
+				filterExpression=""
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
 			/>,
@@ -419,7 +417,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				filters={mockFilters}
+				filterExpression=""
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
 			/>,
@@ -433,26 +431,13 @@ describe('StatusCodeBarCharts', () => {
 		// but we've confirmed the function is mocked and ready to be tested
 		expect(getStatusCodeBarChartWidgetData).toHaveBeenCalledWith(
 			mockDomainName,
-			expect.objectContaining({
-				items: [],
-				op: 'AND',
-			}),
+			'',
 		);
 	});

 	it('handles widget generation with current filters', () => {
 		// Arrange
-		const mockCustomFilters = {
-			items: [
-				{
-					id: 'custom-filter',
-					key: { key: 'test-key' },
-					op: '=',
-					value: 'test-value',
-				},
-			],
-			op: 'AND',
-		};
+		const mockCustomFilterExpression = "test-key = 'test-value'";

 		const mockData = {
 			payload: mockFormattedData,
@@ -480,7 +465,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				filters={mockCustomFilters as IBuilderQuery['filters']}
+				filterExpression={mockCustomFilterExpression}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
 			/>,
@@ -489,12 +474,7 @@ describe('StatusCodeBarCharts', () => {
 		// Assert widget creation was called with the correct parameters
 		expect(getStatusCodeBarChartWidgetData).toHaveBeenCalledWith(
 			mockDomainName,
-			expect.objectContaining({
-				items: expect.arrayContaining([
-					expect.objectContaining({ id: 'custom-filter' }),
-				]),
-				op: 'AND',
-			}),
+			mockCustomFilterExpression,
 		);
 	});
 });
--- a/frontend/src/container/ApiMonitoring/tests/StatusCodeBarChartsV5Migration.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/StatusCodeBarChartsV5Migration.test.tsx
@@ -2,7 +2,7 @@
 * V5 Migration Tests for Status Code Bar Chart Queries
 *
 * These tests validate the migration to V5 format for the bar chart payloads
- * in getEndPointDetailsQueryPayload (5th and 6th payloads):
+ * in getEndPointDetailsQueryPayload (4th and 5th payloads):
 * - Number of Calls Chart (count aggregation)
 * - Latency Chart (p99 aggregation)
 *
@@ -15,16 +15,12 @@
 */
 import { TraceAggregation } from 'api/v5/v5';
 import { getEndPointDetailsQueryPayload } from 'container/ApiMonitoring/utils';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';

 describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 	const mockDomainName = '0.0.0.0';
 	const mockStartTime = 1762573673000;
 	const mockEndTime = 1762832873000;
-	const emptyFilters: IBuilderQuery['filters'] = {
-		items: [],
-		op: 'AND',
-	};
+	const emptyFilters = '';

 	describe('1. Number of Calls Chart - V5 Payload Structure', () => {
 		it('generates correct V5 payload for count aggregation grouped by status code', () => {
@@ -35,8 +31,8 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 				emptyFilters,
 			);

-			// 5th payload (index 4) is the number of calls bar chart
-			const callsChartQuery = payload[4];
+			// 4th payload (index 3) is the number of calls bar chart
+			const callsChartQuery = payload[3];
 			const queryA = callsChartQuery.query.builder.queryData[0];

 			// V5 format: filter.expression (not filters.items)
@@ -84,8 +80,8 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 				emptyFilters,
 			);

-			// 6th payload (index 5) is the latency bar chart
-			const latencyChartQuery = payload[5];
+			// 5th payload (index 4) is the latency bar chart
+			const latencyChartQuery = payload[4];
 			const queryA = latencyChartQuery.query.builder.queryData[0];

 			// V5 format: filter.expression (not filters.items)
@@ -130,31 +126,8 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {

 	describe('3. Custom Filters Integration', () => {
 		it('merges custom filters into filter expression for both charts', () => {
-			const customFilters: IBuilderQuery['filters'] = {
-				items: [
-					{
-						id: 'test-1',
-						key: {
-							key: 'service.name',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'user-service',
-					},
-					{
-						id: 'test-2',
-						key: {
-							key: 'deployment.environment',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'production',
-					},
-				],
-				op: 'AND',
-			};
+			const customFilters =
+				"service.name = 'user-service' AND deployment.environment = 'production'";

 			const payload = getEndPointDetailsQueryPayload(
 				mockDomainName,
@@ -163,8 +136,8 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 				customFilters,
 			);

-			const callsChartQuery = payload[4];
-			const latencyChartQuery = payload[5];
+			const callsChartQuery = payload[3];
+			const latencyChartQuery = payload[4];

 			const callsExpression =
 				callsChartQuery.query.builder.queryData[0].filter?.expression;
--- a/frontend/src/container/ApiMonitoring/tests/StatusCodeTableV5Migration.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/StatusCodeTableV5Migration.test.tsx
@@ -13,16 +13,12 @@
 */
 import { TraceAggregation } from 'api/v5/v5';
 import { getEndPointDetailsQueryPayload } from 'container/ApiMonitoring/utils';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';

 describe('StatusCodeTable - V5 Migration Validation', () => {
 	const mockDomainName = 'api.example.com';
 	const mockStartTime = 1000;
 	const mockEndTime = 2000;
-	const emptyFilters: IBuilderQuery['filters'] = {
-		items: [],
-		op: 'AND',
-	};
+	const emptyFilters = '';

 	describe('1. V5 Format Migration with Base Filters', () => {
 		it('migrates to V5 format with correct filter expression structure and base filters', () => {
@@ -109,31 +105,8 @@ describe('StatusCodeTable - V5 Migration Validation', () => {

 	describe('3. Custom Filters Integration', () => {
 		it('merges custom filters into filter expression with AND logic', () => {
-			const customFilters: IBuilderQuery['filters'] = {
-				items: [
-					{
-						id: 'test-1',
-						key: {
-							key: 'service.name',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'user-service',
-					},
-					{
-						id: 'test-2',
-						key: {
-							key: 'deployment.environment',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'production',
-					},
-				],
-				op: 'AND',
-			};
+			const customFilters =
+				"service.name = 'user-service' AND deployment.environment = 'production'";

 			const payload = getEndPointDetailsQueryPayload(
 				mockDomainName,
--- a/frontend/src/container/ApiMonitoring/tests/TopErrors.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/TopErrors.test.tsx
@@ -1,31 +1,40 @@
 import { BuilderQuery } from 'api/v5/v5';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
 import { rest, server } from 'mocks-server/server';
-import { fireEvent, render, screen, waitFor, within } from 'tests/test-utils';
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+	within,
+} from 'tests/test-utils';
 import { DataSource } from 'types/common/queryBuilder';

 import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
 import TopErrors from '../Explorer/Domains/DomainDetails/TopErrors';
 import { getTopErrorsQueryPayload } from '../utils';

-// Mock the EndPointsDropDown component to avoid issues
+interface QueryRangeRequestBody {
+	compositeQuery: { queries: { spec: { filter: { expression: string } } }[] };
+}
+
+// Mock the EndPointPicker component to avoid issues
 jest.mock(
-	'../Explorer/Domains/DomainDetails/components/EndPointsDropDown',
+	'../Explorer/Domains/DomainDetails/components/EndPointPicker',
 	() => ({
 		__esModule: true,
-		default: jest
-			.fn()
-			.mockImplementation(({ setSelectedEndPointName }): JSX.Element => (
-				<div data-testid="endpoints-dropdown-mock">
-					<select
-						data-testid="endpoints-select"
-						onChange={(e): void => setSelectedEndPointName(e.target.value)}
-					>
-						<option value="/api/test">/api/test</option>
-						<option value="/api/new-endpoint">/api/new-endpoint</option>
-					</select>
-				</div>
-			)),
+		default: jest.fn().mockImplementation(({ onChange }): JSX.Element => (
+			<div data-testid="endpoints-dropdown-mock">
+				<select
+					data-testid="endpoints-select"
+					onChange={(e): void => onChange(e.target.value)}
+				>
+					<option value="/api/test">/api/test</option>
+					<option value="/api/new-endpoint">/api/new-endpoint</option>
+				</select>
+			</div>
+		)),
 	}),
 );

@@ -43,10 +52,7 @@ describe('TopErrors', () => {
 			startTime: 1000000000,
 			endTime: 1000010000,
 		},
-		initialFilters: {
-			items: [],
-			op: 'AND',
-		},
+		initialFilterExpression: '',
 	};

 	// Helper function to wait for table data to load
@@ -227,22 +233,30 @@ describe('TopErrors', () => {
 		});
 	});

-	it('updates endpoint filter when dropdown value changes', async () => {
+	it('scopes the query to the endpoint picked in the picker', async () => {
+		const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+		const expressions: string[] = [];
+		server.use(
+			rest.post(V5_QUERY_RANGE_API_PATH, async (req) => {
+				const body: QueryRangeRequestBody = await req.json();
+				expressions.push(body.compositeQuery.queries[0].spec.filter.expression);
+			}),
+		);
+
 		render(<TopErrors {...mockProps} />);
+		await waitFor(() => expect(expressions).toHaveLength(1));
+		expect(expressions[0]).not.toContain(`${SPAN_ATTRIBUTES.HTTP_URL} =`);
+
+		await user.selectOptions(
+			screen.getByTestId('endpoints-select'),
+			'/api/new-endpoint',
+		);

-		// Wait for initial load
 		await waitFor(() => {
-			expect(screen.getByRole('combobox')).toBeInTheDocument();
+			expect(expressions[expressions.length - 1]).toContain(
+				`${SPAN_ATTRIBUTES.HTTP_URL} = '/api/new-endpoint'`,
+			);
 		});
-
-		// Find the dropdown
-		const dropdown = screen.getByRole('combobox');
-
-		// Mock the change
-		fireEvent.change(dropdown, { target: { value: '/api/new-endpoint' } });
-
-		// Component should re-render with new filter
-		expect(dropdown).toBeInTheDocument();
 	});

 	it('handles status message toggle correctly', async () => {
@@ -306,7 +320,7 @@ describe('TopErrors', () => {
 			'test-domain',
 			mockProps.timeRange.startTime,
 			mockProps.timeRange.endTime,
-			{ items: [], op: 'AND' },
+			'',
 			false,
 		);

--- a/frontend/src/container/ApiMonitoring/tests/queryParams.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/queryParams.test.tsx
@@ -2,6 +2,7 @@ import {
 	ApiMonitoringParams,
 	DEFAULT_PARAMS,
 	getApiMonitoringParams,
+	getLegacyFilterExpressions,
 	setApiMonitoringParams,
 } from 'container/ApiMonitoring/queryParams';
 import { mockNavigate } from 'tests/router-mocks';
@@ -52,6 +53,50 @@ describe('API Monitoring Query Params', () => {

 			expect(getApiMonitoringParams(search)).toStrictEqual(DEFAULT_PARAMS);
 		});
+
+		it('converts filter items saved by older links into an expression', () => {
+			const legacyParams = {
+				selectedDomain: 'test-domain',
+				allEndpointsLocalFilters: {
+					op: 'AND',
+					items: [
+						{
+							id: 'a',
+							key: { key: 'service.name', dataType: 'string', type: 'resource' },
+							op: '=',
+							value: 'frontend',
+						},
+					],
+				},
+				endPointDetailsLocalFilters: {
+					op: 'AND',
+					items: [
+						{
+							id: 'b',
+							key: { key: 'http.status_code', dataType: 'string', type: '' },
+							op: '=',
+							value: '500',
+						},
+					],
+				},
+			};
+			const urlParams = new URLSearchParams();
+			urlParams.set(
+				'apiMonitoringParams',
+				encodeURIComponent(JSON.stringify(legacyParams)),
+			);
+
+			const search = `?${urlParams.toString()}`;
+
+			expect(getLegacyFilterExpressions(search)).toStrictEqual({
+				allEndpoints: "service.name = 'frontend'",
+				endPointDetails: "http.status_code = '500'",
+			});
+			const result = getApiMonitoringParams(search);
+			expect(result.selectedDomain).toBe('test-domain');
+			expect(result).not.toHaveProperty('allEndpointsLocalFilters');
+			expect(result).not.toHaveProperty('endPointDetailsLocalFilters');
+		});
 	});

 	describe('setApiMonitoringParams', () => {
--- a/frontend/src/container/ApiMonitoring/tests/useApiMonitoringParams.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/useApiMonitoringParams.test.tsx
@@ -0,0 +1,65 @@
+import { ALL_ENDPOINTS_EXPRESSION_KEY } from 'container/ApiMonitoring/filterParamKeys';
+import {
+	getApiMonitoringParams,
+	useApiMonitoringParams,
+} from 'container/ApiMonitoring/queryParams';
+import { mockAppLocation, mockNavigate } from 'tests/router-mocks';
+import { act, renderHook } from 'tests/test-utils';
+
+// The stub writes to the browser URL, which the hook reads back; the router's
+// own location (`useAppLocation`) stays at its first value.
+function renderParamsHook(): ReturnType<
+	typeof renderHook<ReturnType<typeof useApiMonitoringParams>, unknown>
+> {
+	mockNavigate().mockImplementation((to) => {
+		const url = typeof to === 'string' ? to : `/${to.search ?? ''}`;
+		window.history.pushState(null, '', url);
+	});
+	mockAppLocation();
+	return renderHook(() => useApiMonitoringParams());
+}
+
+describe('useApiMonitoringParams', () => {
+	beforeEach(() => {
+		window.history.replaceState(null, '', '/');
+	});
+
+	it('keeps every write made before the next render', () => {
+		const { result } = renderParamsHook();
+
+		act(() => {
+			const [, setParams] = result.current;
+			setParams({ selectedView: 'endpoint_stats' });
+			setParams({ selectedInterval: '15m' });
+		});
+
+		expect(getApiMonitoringParams(window.location.search)).toMatchObject({
+			selectedView: 'endpoint_stats',
+			selectedInterval: '15m',
+		});
+	});
+
+	it('keeps a drawer filter written outside the router', () => {
+		window.history.replaceState(
+			null,
+			'',
+			`/?${ALL_ENDPOINTS_EXPRESSION_KEY}=${encodeURIComponent(
+				"service.name = 'cart'",
+			)}`,
+		);
+		const { result } = renderParamsHook();
+
+		act(() => {
+			const [, setParams] = result.current;
+			setParams({ selectedView: 'endpoint_stats' });
+		});
+
+		const search = new URLSearchParams(window.location.search);
+		expect(search.get(ALL_ENDPOINTS_EXPRESSION_KEY)).toBe(
+			"service.name = 'cart'",
+		);
+		expect(getApiMonitoringParams(window.location.search).selectedView).toBe(
+			'endpoint_stats',
+		);
+	});
+});
--- a/frontend/src/container/ApiMonitoring/filterParamKeys.ts
+++ b/frontend/src/container/ApiMonitoring/filterParamKeys.ts
@@ -0,0 +1,5 @@
+// The drawer filters live in their own URL params, owned by `QuerySearchV2Provider`.
+export const ALL_ENDPOINTS_EXPRESSION_KEY =
+	'apiMonitoringAllEndpointsExpression';
+export const ENDPOINT_STATS_EXPRESSION_KEY =
+	'apiMonitoringEndpointStatsExpression';
--- a/frontend/src/container/ApiMonitoring/queryParams.ts
+++ b/frontend/src/container/ApiMonitoring/queryParams.ts
@@ -1,6 +1,10 @@
 import { useCallback } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
 import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
+import { omit } from 'lodash-es';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';

 // --- Types for all API Monitoring query params ---
 export interface ApiMonitoringParams {
@@ -9,8 +13,6 @@ export interface ApiMonitoringParams {
 	selectedView?: string;
 	selectedEndPointName?: string;
 	groupBy?: string[];
-	allEndpointsLocalFilters?: any;
-	endPointDetailsLocalFilters?: any;
 	modalTimeRange?: { startTime: number; endTime: number };
 	selectedInterval?: string;
 	// Add more params as needed
@@ -22,8 +24,6 @@ export const DEFAULT_PARAMS: ApiMonitoringParams = {
 	selectedView: 'all_endpoints',
 	selectedEndPointName: '',
 	groupBy: [],
-	allEndpointsLocalFilters: undefined,
-	endPointDetailsLocalFilters: undefined,
 	modalTimeRange: undefined,
 	selectedInterval: undefined,
 };
@@ -35,15 +35,50 @@ function encodeParams(params: ApiMonitoringParams): string {
 	return encodeURIComponent(JSON.stringify(params));
 }

-function decodeParams(value: string | null): ApiMonitoringParams {
+// Older shared links carry the filters as TagFilter items.
+type LegacyApiMonitoringParams = ApiMonitoringParams & {
+	allEndpointsLocalFilters?: TagFilter;
+	endPointDetailsLocalFilters?: TagFilter;
+};
+
+function parseParams(value: string | null): LegacyApiMonitoringParams | null {
 	if (!value) {
-		return DEFAULT_PARAMS;
+		return null;
 	}
 	try {
 		return JSON.parse(decodeURIComponent(value));
 	} catch {
+		return null;
+	}
+}
+
+// Drops the legacy filters, so the next write leaves them out of the URL.
+function decodeParams(value: string | null): ApiMonitoringParams {
+	const parsed = parseParams(value);
+	if (!parsed) {
 		return DEFAULT_PARAMS;
 	}
+	return omit(parsed, [
+		'allEndpointsLocalFilters',
+		'endPointDetailsLocalFilters',
+	]);
+}
+
+export interface LegacyFilterExpressions {
+	allEndpoints?: string;
+	endPointDetails?: string;
+}
+
+export function getLegacyFilterExpressions(
+	search: string,
+): LegacyFilterExpressions {
+	const parsed = parseParams(new URLSearchParams(search).get(PARAM_KEY));
+	const toExpression = (filters?: TagFilter): string | undefined =>
+		filters ? convertFiltersToExpression(filters).expression : undefined;
+	return {
+		allEndpoints: toExpression(parsed?.allEndpointsLocalFilters),
+		endPointDetails: toExpression(parsed?.endPointDetailsLocalFilters),
+	};
 }

 // --- Read query params from URL ---
@@ -74,11 +109,18 @@ export function useApiMonitoringParams(): [
 	const location = useAppLocation();
 	const params = getApiMonitoringParams(location.search);

+	// Read the browser's URL, not the router's: several writes can land before
+	// the next render, and the drawer filters are written by nuqs, which the
+	// router's location does not see.
 	const setParams = useCallback(
 		(newParams: Partial<ApiMonitoringParams>, replace = false) => {
-			setApiMonitoringParams(newParams, location.search, replace);
+			setApiMonitoringParams(
+				newParams,
+				`?${getUnstableCurrentSearchParams().toString()}`,
+				replace,
+			);
 		},
-		[location.search],
+		[],
 	);

 	return [params, setParams];
--- a/frontend/src/container/ApiMonitoring/utils.tsx
+++ b/frontend/src/container/ApiMonitoring/utils.tsx
@@ -3,7 +3,8 @@ import { Color } from '@signozhq/design-tokens';
 import { TableColumnType as ColumnType, Tooltip } from 'antd';
 import { Progress } from '@signozhq/ui/progress';
 import { Badge } from '@signozhq/ui/badge';
-import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
+import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,
 	IQuickFiltersConfig,
@@ -56,30 +57,28 @@ export const getDisplayValue = (value: unknown): string =>
 	isEmptyFilterValue(value) ? '-' : String(value);

 export const getDomainNameFilterExpression = (domainName: string): string =>
-	`http_host = '${domainName}'`;
+	`${SPAN_ATTRIBUTES.SERVER_NAME} = ${formatValueForExpression(domainName)}`;

-export const clientKindExpression = `kind_string = 'Client'`;
+export const clientKindExpression = "kind_string = 'Client'";

-/**
- * Converts filters to expression
- * @param filters Filters to convert
- * @param baseExpression Base expression to combine with filters
- * @returns Filter expression string
- */
-export const convertFiltersWithUrlHandling = (
-	filters: IBuilderQuery['filters'],
-	baseExpression: string,
-): string => {
-	if (!filters) {
-		return baseExpression;
-	}
+export const getHttpUrlExpression = (endPointName: string): string =>
+	endPointName
+		? `${SPAN_ATTRIBUTES.HTTP_URL} = ${formatValueForExpression(endPointName, '=')}`
+		: '';

-	const { filter } = convertFiltersToExpressionWithExistingQuery(
-		filters,
-		baseExpression,
-	);
-	return filter.expression;
-};
+// The domain (and endpoint) the drawer is locked to, built from the same
+// expressions as the requests' filters so the chip shows what runs.
+export const getDomainScopeExpression = (
+	domainName: string,
+	endPointName = '',
+): string =>
+	[
+		clientKindExpression,
+		getDomainNameFilterExpression(domainName),
+		getHttpUrlExpression(endPointName),
+	]
+		.filter(Boolean)
+		.join(' AND ');

 export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 	{
@@ -347,7 +346,7 @@ export const getDomainMetricsQueryPayload = (
 	domainName: string,
 	start: number,
 	end: number,
-	filters: IBuilderQuery['filters'],
+	filterExpression: string,
 ): GetQueryResultsProps[] => [
 	{
 		selectedTime: 'GLOBAL_TIME',
@@ -368,9 +367,9 @@ export const getDomainMetricsQueryPayload = (
 						spaceAggregation: 'sum',
 						functions: [],
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(domainName)} AND ${urlExpression}`,
+								filterExpression,
 							),
 						},
 						expression: 'A',
@@ -396,9 +395,9 @@ export const getDomainMetricsQueryPayload = (
 						spaceAggregation: 'sum',
 						functions: [],
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(domainName)}`,
+								filterExpression,
 							),
 						},
 						expression: 'B',
@@ -424,9 +423,9 @@ export const getDomainMetricsQueryPayload = (
 						spaceAggregation: 'sum',
 						functions: [],
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(domainName)} AND has_error = true`,
+								filterExpression,
 							),
 						},
 						expression: 'C',
@@ -452,9 +451,9 @@ export const getDomainMetricsQueryPayload = (
 						spaceAggregation: 'sum',
 						functions: [],
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(domainName)}`,
+								filterExpression,
 							),
 						},
 						expression: 'D',
@@ -824,7 +823,7 @@ export const getEndPointsQueryPayload = (

 function buildFilterExpression(
 	domainName: string,
-	filters: IBuilderQuery['filters'],
+	filterExpression: string,
 	showStatusCodeErrors: boolean,
 ): string {
 	const baseFilterParts = [
@@ -836,21 +835,22 @@ function buildFilterExpression(
 	if (showStatusCodeErrors) {
 		baseFilterParts.push('status_message EXISTS');
 	}
-	const filterExpression = baseFilterParts.join(' AND ');
-
-	return convertFiltersWithUrlHandling(filters, filterExpression);
+	return combineInitialAndUserExpression(
+		baseFilterParts.join(' AND '),
+		filterExpression,
+	);
 }

 export const getTopErrorsQueryPayload = (
 	domainName: string,
 	start: number,
 	end: number,
-	filters: IBuilderQuery['filters'],
+	filterExpression: string,
 	showStatusCodeErrors = true,
 ): QueryRangePayloadV5 => {
-	const filterExpression = buildFilterExpression(
+	const combinedExpression = buildFilterExpression(
 		domainName,
-		filters,
+		filterExpression,
 		showStatusCodeErrors,
 	);

@@ -869,7 +869,7 @@ export const getTopErrorsQueryPayload = (
 						stepInterval: 60,
 						disabled: false,
 						aggregations: [{ expression: 'count()' }],
-						filter: { expression: filterExpression },
+						filter: { expression: combinedExpression },
 						groupBy: [
 							{
 								name: SPAN_ATTRIBUTES.HTTP_URL,
@@ -1367,15 +1367,14 @@ export const createFiltersForSelectedRowData = (

 // First query payload for endpoint metrics
 // Second query payload for endpoint status code table
-// Third query payload for endpoint dropdown selection
-// Fourth query payload for endpoint dependant services
-// Fifth query payload for endpoint response status count bar chart
-// Sixth query payload for endpoint response status code latency bar chart
+// Third query payload for endpoint dependant services
+// Fourth query payload for endpoint response status count bar chart
+// Fifth query payload for endpoint response status code latency bar chart
 export const getEndPointDetailsQueryPayload = (
 	domainName: string,
 	start: number,
 	end: number,
-	filters: IBuilderQuery['filters'],
+	filterExpression: string,
 ): GetQueryResultsProps[] => [
 	{
 		selectedTime: 'GLOBAL_TIME',
@@ -1394,11 +1393,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: false,
 						expression: 'A',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression}`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1424,11 +1423,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: false,
 						expression: 'B',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression}`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1454,11 +1453,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: true,
 						expression: 'C',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression} AND has_error = true`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1484,11 +1483,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: false,
 						expression: 'D',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression}`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1514,11 +1513,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: true,
 						expression: 'E',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression}`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1586,11 +1585,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: false,
 						expression: 'A',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression} AND response_status_code EXISTS`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1622,11 +1621,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: false,
 						expression: 'B',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression} AND response_status_code EXISTS`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1660,11 +1659,11 @@ export const getEndPointDetailsQueryPayload = (
 						spaceAggregation: 'sum',
 						functions: [],
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression} AND response_status_code EXISTS`,
+								filterExpression,
 							),
 						},
 						expression: 'C',
@@ -1713,77 +1712,6 @@ export const getEndPointDetailsQueryPayload = (
 		end,
 		step: 60,
 	},
-	{
-		selectedTime: 'GLOBAL_TIME',
-		graphType: PANEL_TYPES.TABLE,
-		query: {
-			builder: {
-				queryData: [
-					{
-						dataSource: DataSource.TRACES,
-						queryName: 'A',
-						aggregateOperator: 'count',
-						aggregations: [
-							{
-								expression: 'count()',
-							},
-						],
-						timeAggregation: 'count',
-						spaceAggregation: 'sum',
-						functions: [],
-						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
-								`${getDomainNameFilterExpression(
-									domainName,
-								)} AND ${clientKindExpression} AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
-							),
-						},
-						expression: 'A',
-						disabled: false,
-						stepInterval: null,
-						having: [],
-						legend: '',
-						limit: null,
-						orderBy: [],
-						groupBy: [
-							{
-								key: SPAN_ATTRIBUTES.HTTP_URL,
-								dataType: DataTypes.String,
-								type: 'attribute',
-							},
-						],
-						reduceTo: ReduceOperators.AVG,
-					},
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-			clickhouse_sql: [
-				{
-					disabled: false,
-					legend: '',
-					name: 'A',
-					query: '',
-				},
-			],
-			id: '315b15fa-ff0c-442f-89f8-2bf4fb1af2f2',
-			promql: [
-				{
-					disabled: false,
-					legend: '',
-					name: 'A',
-					query: '',
-				},
-			],
-			queryType: EQueryType.QUERY_BUILDER,
-		},
-		variables: {},
-		formatForWeb: true,
-		start,
-		end,
-		step: 60,
-	},
 	{
 		selectedTime: 'GLOBAL_TIME',
 		graphType: PANEL_TYPES.TABLE,
@@ -1801,11 +1729,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: false,
 						expression: 'A',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression}`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1838,11 +1766,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: false,
 						expression: 'B',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression}`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1875,11 +1803,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: false,
 						expression: 'C',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression}`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1912,11 +1840,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: true,
 						expression: 'D',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression} AND has_error = true`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -1991,11 +1919,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: false,
 						expression: 'A',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression}`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -2062,11 +1990,11 @@ export const getEndPointDetailsQueryPayload = (
 						disabled: false,
 						expression: 'A',
 						filter: {
-							expression: convertFiltersWithUrlHandling(
-								filters || { items: [], op: 'AND' },
+							expression: combineInitialAndUserExpression(
 								`${getDomainNameFilterExpression(
 									domainName,
 								)} AND ${clientKindExpression}`,
+								filterExpression,
 							),
 						},
 						functions: [],
@@ -2118,100 +2046,82 @@ export const getEndPointDetailsQueryPayload = (
 	},
 ];

-export const getEndPointZeroStateQueryPayload = (
+export const getEndPointDropDownQueryPayload = (
 	domainName: string,
 	start: number,
 	end: number,
-): GetQueryResultsProps[] => [
-	{
-		selectedTime: 'GLOBAL_TIME',
-		graphType: PANEL_TYPES.TABLE,
-		query: {
-			builder: {
-				queryData: [
-					{
-						dataSource: DataSource.TRACES,
-						queryName: 'A',
-						aggregateOperator: 'count',
-						aggregateAttribute: {
-							dataType: DataTypes.String,
-							key: '',
-							type: '',
+	filterExpression: string,
+): GetQueryResultsProps => ({
+	selectedTime: 'GLOBAL_TIME',
+	graphType: PANEL_TYPES.TABLE,
+	query: {
+		builder: {
+			queryData: [
+				{
+					dataSource: DataSource.TRACES,
+					queryName: 'A',
+					aggregateOperator: 'count',
+					aggregations: [
+						{
+							expression: 'count()',
 						},
-						timeAggregation: 'count',
-						spaceAggregation: 'sum',
-						functions: [],
-						filters: {
-							items: [
-								{
-									id: '3db61dd6',
-									key: {
-										key: SPAN_ATTRIBUTES.SERVER_NAME,
-										dataType: DataTypes.String,
-										type: '',
-									},
-									op: '=',
-									value: domainName,
-								},
-								{
-									id: '212678b9',
-									key: {
-										key: 'kind_string',
-										dataType: DataTypes.String,
-										type: '',
-									},
-									op: '=',
-									value: 'Client',
-								},
-							],
-							op: 'AND',
-						},
-						expression: 'A',
-						disabled: false,
-						stepInterval: 60,
-						having: [],
-						legend: '',
-						limit: null,
-						orderBy: [],
-						groupBy: [
-							{
-								key: SPAN_ATTRIBUTES.HTTP_URL,
-								dataType: DataTypes.String,
-								type: 'tag',
-							},
-						],
-						reduceTo: ReduceOperators.AVG,
+					],
+					timeAggregation: 'count',
+					spaceAggregation: 'sum',
+					functions: [],
+					filter: {
+						expression: combineInitialAndUserExpression(
+							`${getDomainNameFilterExpression(
+								domainName,
+							)} AND ${clientKindExpression} AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
+							filterExpression,
+						),
 					},
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-			clickhouse_sql: [
-				{
+					expression: 'A',
 					disabled: false,
+					stepInterval: null,
+					having: [],
 					legend: '',
-					name: 'A',
-					query: '',
+					limit: null,
+					orderBy: [],
+					groupBy: [
+						{
+							key: SPAN_ATTRIBUTES.HTTP_URL,
+							dataType: DataTypes.String,
+							type: 'attribute',
+						},
+					],
+					reduceTo: ReduceOperators.AVG,
 				},
 			],
-			id: '315b15fa-ff0c-442f-89f8-2bf4fb1af2f2',
-			promql: [
-				{
-					disabled: false,
-					legend: '',
-					name: 'A',
-					query: '',
-				},
-			],
-			queryType: EQueryType.QUERY_BUILDER,
+			queryFormulas: [],
+			queryTraceOperator: [],
 		},
-		variables: {},
-		formatForWeb: true,
-		start,
-		end,
-		step: 60,
+		clickhouse_sql: [
+			{
+				disabled: false,
+				legend: '',
+				name: 'A',
+				query: '',
+			},
+		],
+		id: '315b15fa-ff0c-442f-89f8-2bf4fb1af2f2',
+		promql: [
+			{
+				disabled: false,
+				legend: '',
+				name: 'A',
+				query: '',
+			},
+		],
+		queryType: EQueryType.QUERY_BUILDER,
 	},
-];
+	variables: {},
+	formatForWeb: true,
+	start,
+	end,
+	step: 60,
+});

 interface EndPointMetricsResponseRow {
 	data: {
@@ -2369,8 +2279,8 @@ export const statusCodeWidgetInfo = [

 interface EndPointDropDownResponseRow {
 	data: {
-		[SPAN_ATTRIBUTES.HTTP_URL]: string;
-		A: number;
+		[SPAN_ATTRIBUTES.HTTP_URL]?: string;
+		A?: number;
 	};
 }

@@ -2712,7 +2622,7 @@ export const groupStatusCodes = (

 export const getStatusCodeBarChartWidgetData = (
 	domainName: string,
-	filters: IBuilderQuery['filters'],
+	filterExpression: string,
 ): Widgets => ({
 	query: {
 		builder: {
@@ -2728,22 +2638,13 @@ export const getStatusCodeBarChartWidgetData = (
 					dataSource: DataSource.TRACES,
 					disabled: false,
 					expression: 'A',
-					filters: {
-						items: [
-							{
-								id: 'c6724407',
-								key: {
-									dataType: DataTypes.String,
-									key: SPAN_ATTRIBUTES.SERVER_NAME,
-									type: '',
-								},
-								op: '=',
-								value: domainName,
-							},
-							...(filters?.items || []),
-						],
-						op: 'AND',
+					filter: {
+						expression: combineInitialAndUserExpression(
+							getDomainNameFilterExpression(domainName),
+							filterExpression,
+						),
 					},
+					filters: { items: [], op: 'AND' },
 					functions: [],
 					groupBy: [],
 					having: [],
@@ -2824,18 +2725,15 @@ export const getFormattedEndPointStatusCodeChartData = (
 export const END_POINT_DETAILS_QUERY_KEYS_ARRAY = [
 	REACT_QUERY_KEY.GET_ENDPOINT_METRICS_DATA,
 	REACT_QUERY_KEY.GET_ENDPOINT_STATUS_CODE_DATA,
-	REACT_QUERY_KEY.GET_ENDPOINT_DROPDOWN_DATA,
 	REACT_QUERY_KEY.GET_ENDPOINT_DEPENDENT_SERVICES_DATA,
 	REACT_QUERY_KEY.GET_ENDPOINT_STATUS_CODE_BAR_CHARTS_DATA,
 	REACT_QUERY_KEY.GET_ENDPOINT_STATUS_CODE_LATENCY_BAR_CHARTS_DATA,
-	REACT_QUERY_KEY.GET_ENDPOINT_RATE_OVER_TIME_DATA,
-	REACT_QUERY_KEY.GET_ENDPOINT_LATENCY_OVER_TIME_DATA,
 ];

 export const getAllEndpointsWidgetData = (
 	groupBy: BaseAutocompleteData[],
 	domainName: string,
-	filters: IBuilderQuery['filters'],
+	filterExpression: string,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 ): Widgets => {
 	const isGroupedByAttribute = groupBy.length > 0;
@@ -2857,11 +2755,11 @@ export const getAllEndpointsWidgetData = (
 					disabled: false,
 					expression: 'A',
 					filter: {
-						expression: convertFiltersWithUrlHandling(
-							filters,
+						expression: combineInitialAndUserExpression(
 							`${getDomainNameFilterExpression(
 								domainName,
 							)} AND ${clientKindExpression} AND http_url EXISTS`,
+							filterExpression,
 						),
 					},
 					functions: [],
@@ -2889,11 +2787,11 @@ export const getAllEndpointsWidgetData = (
 					disabled: false,
 					expression: 'B',
 					filter: {
-						expression: convertFiltersWithUrlHandling(
-							filters,
+						expression: combineInitialAndUserExpression(
 							`${getDomainNameFilterExpression(
 								domainName,
 							)} AND ${clientKindExpression} AND http_url EXISTS`,
+							filterExpression,
 						),
 					},
 					functions: [],
@@ -2921,11 +2819,11 @@ export const getAllEndpointsWidgetData = (
 					disabled: false,
 					expression: 'C',
 					filter: {
-						expression: convertFiltersWithUrlHandling(
-							filters,
+						expression: combineInitialAndUserExpression(
 							`${getDomainNameFilterExpression(
 								domainName,
 							)} AND ${clientKindExpression} AND http_url EXISTS`,
+							filterExpression,
 						),
 					},
 					functions: [],
@@ -2953,11 +2851,11 @@ export const getAllEndpointsWidgetData = (
 					disabled: true,
 					expression: 'D',
 					filter: {
-						expression: convertFiltersWithUrlHandling(
-							filters,
+						expression: combineInitialAndUserExpression(
 							`${getDomainNameFilterExpression(
 								domainName,
 							)} AND ${clientKindExpression} AND has_error = true AND http_url EXISTS`,
+							filterExpression,
 						),
 					},
 					functions: [],
@@ -3075,38 +2973,26 @@ export const getAllEndpointsWidgetData = (
 	return widget;
 };

-const keysToRemove = [SPAN_ATTRIBUTES.HTTP_URL, 'A', 'B', 'C', 'F1'];
+const keysToRemove = [SPAN_ATTRIBUTES.HTTP_URL, 'key', 'A', 'B', 'C', 'F1'];

-export const getGroupByFiltersFromGroupByValues = (
-	rowData: any,
-	groupBy: BaseAutocompleteData[],
-): IBuilderQuery['filters'] => {
-	const items = Object.keys(rowData)
+// A group without a value for a key is the set of spans missing that attribute.
+export const getGroupByExpressionFromRowData = (
+	rowData: Record<string, string | number | boolean | null | undefined>,
+): string =>
+	Object.keys(rowData)
 		.filter((key) => !keysToRemove.includes(key))
 		.map((key) => {
-			const groupByAttribute = groupBy.find((gb) => gb.key === key);
-			return {
-				id: groupByAttribute?.id || v4(),
-				key: {
-					dataType: groupByAttribute?.dataType || DataTypes.String,
-					key: groupByAttribute?.key || key,
-					type: groupByAttribute?.type || '',
-				},
-				op: '=', // operator for every attribute -> discuss
-				value: rowData[key],
-			};
-		});
-
-	return {
-		items,
-		op: 'AND',
-	};
-};
+			const value = rowData[key];
+			return value === null || value === undefined
+				? `${key} NOT EXISTS`
+				: `${key} = ${formatValueForExpression(value)}`;
+		})
+		.join(' AND ');

 export const getRateOverTimeWidgetData = (
 	domainName: string,
 	endPointName: string,
-	filters: IBuilderQuery['filters'],
+	filterExpression: string,
 ): Widgets => {
 	let legend = domainName;
 	if (endPointName) {
@@ -3130,9 +3016,9 @@ export const getRateOverTimeWidgetData = (
 					disabled: false,
 					expression: 'A',
 					filter: {
-						expression: convertFiltersWithUrlHandling(
-							filters || { items: [], op: 'AND' },
+						expression: combineInitialAndUserExpression(
 							`http_host = '${domainName}'`,
+							filterExpression,
 						),
 					},
 					functions: [],
@@ -3156,7 +3042,7 @@ export const getRateOverTimeWidgetData = (
 export const getLatencyOverTimeWidgetData = (
 	domainName: string,
 	endPointName: string,
-	filters: IBuilderQuery['filters'],
+	filterExpression: string,
 ): Widgets => {
 	let legend = domainName;
 	if (endPointName) {
@@ -3180,9 +3066,9 @@ export const getLatencyOverTimeWidgetData = (
 					disabled: false,
 					expression: 'A',
 					filter: {
-						expression: convertFiltersWithUrlHandling(
-							filters || { items: [], op: 'AND' },
+						expression: combineInitialAndUserExpression(
 							`http_host = '${domainName}'`,
+							filterExpression,
 						),
 					},
 					functions: [],
--- a/frontend/src/container/CreateAlert/QuerySection/QuerySection.tsx
+++ b/frontend/src/container/CreateAlert/QuerySection/QuerySection.tsx
@@ -174,7 +174,6 @@ function QuerySection(): JSX.Element {
 				runQuery={runQueryHandler}
 				isLoadingQueries={isLoadingQueries}
 				handleCancelQuery={handleCancelQuery}
-				alertDef={alertDef}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				isAnomalyDetection={isAnomalyDetection}
 				key={currentQuery.queryType}
--- a/frontend/src/container/CreateAlertChannels/types.ts
+++ b/frontend/src/container/CreateAlertChannels/types.ts
@@ -23,20 +23,11 @@ export type JiraDeployment = AlertmanagertypesJiraDeploymentDTO;

 export type KeysOfUnion<T> = T extends unknown ? keyof T : never;

-/** Every key of every member, optional, so a form can hold any member's fields. */
-export type FlattenUnion<T> = {
-	[K in KeysOfUnion<T>]?: T extends unknown
-		? K extends keyof T
-			? T[K]
-			: never
-		: never;
-};
-
 export type JiraFormSpec = Omit<
 	AlertmanagertypesChannelJiraConfigDTO,
 	'auth'
 > & {
-	auth?: FlattenUnion<AlertmanagertypesChannelJiraAuthDTO>;
+	auth?: AlertmanagertypesChannelJiraAuthDTO;
 };

 /** Merged so switching kind keeps the fields the kinds share. */
--- a/frontend/src/container/CreateAlertRule/defaults.ts
+++ b/frontend/src/container/CreateAlertRule/defaults.ts
@@ -1,5 +1,4 @@
 import { RuletypesRuleTypeDTO } from 'api/generated/services/sigNoz.schemas';
-import { ENTITY_VERSION_V5 } from 'constants/app';
 import {
 	initialQueryBuilderFormValuesMap,
 	initialQueryPromQLData,
@@ -28,7 +27,6 @@ const defaultAnnotations = {

 export const alertDefaults: AlertDef = {
 	alertType: AlertTypes.METRICS_BASED_ALERT,
-	version: ENTITY_VERSION_V5,
 	condition: {
 		compositeQuery: {
 			builderQueries: {
@@ -62,7 +60,6 @@ export const alertDefaults: AlertDef = {

 export const anamolyAlertDefaults: AlertDef = {
 	alertType: AlertTypes.METRICS_BASED_ALERT,
-	version: ENTITY_VERSION_V5,
 	ruleType: RuletypesRuleTypeDTO.anomaly_rule,
 	condition: {
 		compositeQuery: {
@@ -107,7 +104,6 @@ export const anamolyAlertDefaults: AlertDef = {

 export const logAlertDefaults: AlertDef = {
 	alertType: AlertTypes.LOGS_BASED_ALERT,
-	version: ENTITY_VERSION_V5,
 	condition: {
 		compositeQuery: {
 			builderQueries: {
@@ -139,7 +135,6 @@ export const logAlertDefaults: AlertDef = {

 export const traceAlertDefaults: AlertDef = {
 	alertType: AlertTypes.TRACES_BASED_ALERT,
-	version: ENTITY_VERSION_V5,
 	condition: {
 		compositeQuery: {
 			builderQueries: {
@@ -171,7 +166,6 @@ export const traceAlertDefaults: AlertDef = {

 export const exceptionAlertDefaults: AlertDef = {
 	alertType: AlertTypes.EXCEPTIONS_BASED_ALERT,
-	version: ENTITY_VERSION_V5,
 	condition: {
 		compositeQuery: {
 			builderQueries: {
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
@@ -176,7 +176,6 @@ function ChartPreview({
 			},
 			originalGraphType: graphType,
 		},
-		// alertDef?.version || DEFAULT_ENTITY_VERSION,
 		ENTITY_VERSION_V5,
 		{
 			queryKey: [
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@@ -6,7 +6,7 @@ import logEvent from 'api/common/logEvent';
 import PromQLIcon from 'assets/Dashboard/PromQl';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
-import { ENTITY_VERSION_V4 } from 'constants/app';
+import { ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
@@ -15,7 +15,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { isEmpty } from 'lodash-es';
 import { Atom, Terminal } from '@signozhq/icons';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
-import { AlertDef } from 'types/api/alerts/def';
 import { EQueryType } from 'types/common/dashboard';

 import ChQuerySection from './ChQuerySection';
@@ -37,7 +36,6 @@ function QuerySection({
 	runQuery,
 	isLoadingQueries,
 	handleCancelQuery,
-	alertDef,
 	panelType,
 	ruleId,
 	isAnomalyDetection,
@@ -71,12 +69,8 @@ function QuerySection({
 				signalSource: signalSource === 'meter' ? 'meter' : '',
 			}}
 			showTraceOperator={alertType === AlertTypes.TRACES_BASED_ALERT}
-			showFunctions={
-				(alertType === AlertTypes.METRICS_BASED_ALERT &&
-					alertDef.version === ENTITY_VERSION_V4) ||
-				alertType === AlertTypes.LOGS_BASED_ALERT
-			}
-			version={alertDef.version || 'v3'}
+			showFunctions={alertType === AlertTypes.LOGS_BASED_ALERT}
+			version={ENTITY_VERSION_V5}
 			onSignalSourceChange={handleSignalSourceChange}
 			signalSourceChangeEnabled
 		/>
@@ -301,7 +295,6 @@ interface QuerySectionProps {
 	runQuery: VoidFunction;
 	isLoadingQueries: boolean;
 	handleCancelQuery: () => void;
-	alertDef: AlertDef;
 	panelType: PANEL_TYPES;
 	ruleId: string;
 	isAnomalyDetection?: boolean;
--- a/frontend/src/container/LLMObservability/Overview/Overview.module.scss
+++ b/frontend/src/container/LLMObservability/Overview/Overview.module.scss
@@ -3,24 +3,4 @@
 	flex-direction: column;
 	gap: var(--spacing-8);
 	padding: var(--spacing-0) var(--spacing-0);
-	//TODO: remove this once we have a proper dashboard page.
-	// The embedded V2 DashboardContainer renders its own page header (dashboard
-	// title + share/feedback chrome) removed it for now
-	:global([class*='dashboardPageHeader']),
-	:global([class*='dashboardInfoWithActions']) {
-		display: none;
-	}
-	// Embedded read-only: the add-variable and panel-action triggers are dead here.
-	:global([class*='addSlot']),
-	:global([data-testid^='panel-actions-']) {
-		display: none;
-	}
-}
-
-.errorState {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding: var(--spacing-8);
 }
--- a/frontend/src/container/LLMObservability/Overview/Overview.tsx
+++ b/frontend/src/container/LLMObservability/Overview/Overview.tsx
@@ -1,47 +1,24 @@
 import { useEffect } from 'react';
-import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import Spinner from 'components/Spinner';
-import DashboardContainer from 'pages/DashboardPage/DashboardContainer';
+import SystemDashboard from 'container/SystemDashboard/SystemDashboard';
+import { createSystemDashboardHost } from 'container/SystemDashboard/systemDashboardHost';
+import { CHARTS_ONLY } from 'pages/DashboardPage/DashboardContainer/controls/presets';

-import { useSystemDashboard } from './hooks/useSystemDashboard';
 import styles from './Overview.module.scss';

-function Overview(): JSX.Element {
-	const { dashboard, isLoading, isError, error, refetch } = useSystemDashboard();
+const AI_OVERVIEW = createSystemDashboardHost(
+	'ai-o11y-overview',
+	'llm-observability-overview',
+);

+function Overview(): JSX.Element {
 	useEffect(() => {
 		void logEvent('AI Observability Overview: Page visited', {});
 	}, []);

-	const renderContent = (): JSX.Element => {
-		if (isLoading) {
-			return <Spinner tip="Loading dashboard..." />;
-		}
-
-		if (isError || !dashboard) {
-			return (
-				<div className={styles.errorState}>
-					<Typography.Title>Failed to load dashboard</Typography.Title>
-					<Typography.Text>
-						{error?.response?.data?.error?.message ?? error?.message}
-					</Typography.Text>
-				</div>
-			);
-		}
-
-		return (
-			<DashboardContainer
-				dashboard={dashboard}
-				refetch={refetch}
-				canEditDashboardOverride={false}
-			/>
-		);
-	};
-
 	return (
 		<div className={styles.overview} data-testid="llm-observability-overview">
-			{renderContent()}
+			<SystemDashboard host={AI_OVERVIEW} controls={CHARTS_ONLY} />
 		</div>
 	);
 }
--- a/frontend/src/container/LLMObservability/Overview/hooks/useSystemDashboard.ts
+++ b/frontend/src/container/LLMObservability/Overview/hooks/useSystemDashboard.ts
@@ -1,56 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useQueryClient } from 'react-query';
-
-import {
-	getGetDashboardV2QueryKey,
-	useGetSystemDashboard,
-} from 'api/generated/services/dashboard';
-import type { GetSystemDashboardQueryError } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	GetDashboardV2200,
-} from 'api/generated/services/sigNoz.schemas';
-
-const SYSTEM_DASHBOARD_NAME = 'ai-o11y-overview';
-
-const DASHBOARD_ID = 'llm-observability-overview';
-
-export interface UseSystemDashboardResult {
-	dashboard: DashboardtypesGettableDashboardV2DTO | undefined;
-	isLoading: boolean;
-	isError: boolean;
-	error: GetSystemDashboardQueryError | null;
-	refetch: () => void;
-}
-
-export function useSystemDashboard(): UseSystemDashboardResult {
-	const queryClient = useQueryClient();
-	const { data, isLoading, isError, error, refetch } = useGetSystemDashboard(
-		{ name: SYSTEM_DASHBOARD_NAME },
-		{ query: { staleTime: Infinity, refetchOnMount: false } },
-	);
-
-	const dashboard = useMemo(
-		() =>
-			data
-				? ({
-						...data.data,
-						id: DASHBOARD_ID,
-					} as DashboardtypesGettableDashboardV2DTO)
-				: undefined,
-		[data],
-	);
-
-	if (dashboard) {
-		queryClient.setQueryData<GetDashboardV2200>(
-			getGetDashboardV2QueryKey({ id: DASHBOARD_ID }),
-			{ data: dashboard, status: 'success' },
-		);
-	}
-
-	const refetchDashboard = useCallback((): void => {
-		void refetch();
-	}, [refetch]);
-
-	return { dashboard, isLoading, isError, error, refetch: refetchDashboard };
-}
--- a/frontend/src/container/ListAlertRules/ListAlertRules.module.scss
+++ b/frontend/src/container/ListAlertRules/ListAlertRules.module.scss
@@ -35,11 +35,11 @@

 	--tanstack-table-header-cell-bg: var(--l2-background);
 	--tanstack-table-header-cell-color: var(--l2-foreground);
-	--tanstack-table-cell-bg: var(--l2-background);
+	--tanstack-table-cell-bg: var(--l1-background);
 	--tanstack-table-cell-color: var(--l2-foreground);
-	--tanstack-table-row-hover-bg: var(--l2-background-hover);
-	--tanstack-table-row-active-bg: var(--l2-background-active);
-	--tanstack-table-resize-handle-bg: var(--l2-background);
+	--tanstack-table-row-hover-bg: var(--l1-background-hover);
+	--tanstack-table-row-active-bg: var(--l1-background-active);
+	--tanstack-table-resize-handle-bg: transparent;
 	--tanstack-table-resize-handle-hover-bg: var(--l2-border);
 	--tanstack-table-row-height: 42px;

@@ -48,16 +48,6 @@
 	--tanstack-cell-padding-left-override: 16px;
 	--tanstack-cell-padding-right-override: 16px;

-	--tanstack-table-row-odd-bg: color-mix(
-		in srgb,
-		var(--l1-foreground) 2%,
-		transparent
-	);
-	--tanstack-table-row-even-bg: color-mix(
-		in srgb,
-		var(--l1-foreground) 1%,
-		transparent
-	);
 	--badge-cursor: pointer;
 }

--- a/frontend/src/container/ListAlertRules/tests/ListAlertRules.views.test.tsx
+++ b/frontend/src/container/ListAlertRules/tests/ListAlertRules.views.test.tsx
@@ -31,6 +31,8 @@ jest.mock('@floating-ui/dom', () => ({
 		Promise.resolve({ x: 0, y: 0, placement, strategy, middlewareData: {} }),
 }));

+jest.setTimeout(15_000);
+
 const VIEW_1_ORDER_BY = JSON.stringify({ columnName: 'name', order: 'asc' });
 const VIEW_1_QUERY = "severity = 'critical'";

--- a/frontend/src/container/ListAlertRules/index.tsx
+++ b/frontend/src/container/ListAlertRules/index.tsx
@@ -240,7 +240,6 @@ function ListAlertRules(): JSX.Element {
 								showTotalCount: true,
 							}}
 							paginationClassname={styles.paginationContainer}
-							enableAlternatingRowColors
 							plainTextCellLineClamp={2}
 						/>
 					)}
--- a/frontend/src/container/ListAlertRules/table.config.tsx
+++ b/frontend/src/container/ListAlertRules/table.config.tsx
@@ -107,9 +107,7 @@ export function getAlertRuleColumns(
 					return <TanStackTable.Text>-</TanStackTable.Text>;
 				}

-				return (
-					<LabelColumn labels={tagKeys} value={labels} color="highlight-danger" />
-				);
+				return <LabelColumn labels={tagKeys} value={labels} color="secondary" />;
 			},
 		},
 		{
--- a/frontend/src/container/MeterExplorer/Breakdown/BreakDown.styles.scss
+++ b/frontend/src/container/MeterExplorer/Breakdown/BreakDown.styles.scss
@@ -2,77 +2,14 @@
 	display: flex;
 	flex-direction: column;

-	.meter-explorer-date-time {
-		display: flex;
-		min-height: 30px;
-		justify-content: end;
-		border-bottom: 1px solid var(--l1-border);
-		padding: 10px 16px;
-	}
-
-	.meter-explorer-graphs {
+	.meter-explorer-notices {
 		display: flex;
 		flex-direction: column;
-		padding: 20px;
-		gap: 36px;
+		gap: 12px;
+		padding: 16px 20px 0;

-		.info {
-			display: flex;
-			flex-direction: column;
-			gap: 12px;
-		}
-
-		.meter-column-graph {
-			.row-card {
-				background-color: var(--l2-background);
-				padding-left: 10px;
-				height: 32px;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-
-				.section-title {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 500;
-					line-height: 20px;
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.graph-description {
-				padding: 10px;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-
-			.meter-page-grid {
-				display: grid;
-				grid-template-columns: repeat(2, 1fr);
-				align-items: flex-start;
-				gap: 10px;
-				.meter-graph {
-					height: 400px;
-					padding: 10px;
-					width: 100%;
-					box-sizing: border-box;
-				}
-			}
-		}
-
-		.total {
-			.meter-column-graph {
-				.meter-page-grid {
-					grid-template-columns: repeat(3, 1fr);
-
-					.meter-graph {
-						height: 200px;
-					}
-				}
-			}
+		&:empty {
+			display: none;
 		}
 	}
 }
--- a/frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx
+++ b/frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx
@@ -1,121 +1,30 @@
-import { useCallback } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { navigate } from 'lib/router/navigation';
+import { useSelector } from 'react-redux';
 import { Alert } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import GridCard from 'container/WidgetCard/Card';
-import { Card, CardContainer } from 'container/WidgetCard/styles';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import SystemDashboard from 'container/SystemDashboard/SystemDashboard';
+import { createSystemDashboardHost } from 'container/SystemDashboard/systemDashboardHost';
 import dayjs from 'dayjs';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { UpdateTimeInterval } from 'store/actions';
-import { AppState } from 'store/reducers';
-import { Widgets } from 'types/api/widgets/widget';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { v4 as uuid } from 'uuid';
-
 import {
-	getLogCountWidgetData,
-	getLogSizeWidgetData,
-	getMetricCountWidgetData,
-	getSpanCountWidgetData,
-	getSpanSizeWidgetData,
-	getTotalLogSizeWidgetData,
-	getTotalMetricDatapointCountWidgetData,
-	getTotalTraceSizeWidgetData,
-} from './graphs';
+	CHARTS_ONLY,
+	withControls,
+} from 'pages/DashboardPage/DashboardContainer/controls/presets';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';

 import './BreakDown.styles.scss';

-type MetricSection = {
-	id: string;
-	title: string;
-	graphs: Widgets[];
-};
+const COST_METER = createSystemDashboardHost(
+	'cost-meter-breakdown',
+	'cost-meter-breakdown',
+);

-const sections: MetricSection[] = [
-	{
-		id: uuid(),
-		title: 'Total',
-		graphs: [
-			getTotalLogSizeWidgetData(),
-			getTotalTraceSizeWidgetData(),
-			getTotalMetricDatapointCountWidgetData(),
-		],
-	},
-	{
-		id: uuid(),
-		title: 'Logs',
-		graphs: [getLogCountWidgetData(), getLogSizeWidgetData()],
-	},
-	{
-		id: uuid(),
-		title: 'Traces',
-		graphs: [getSpanCountWidgetData(), getSpanSizeWidgetData()],
-	},
-	{
-		id: uuid(),
-		title: 'Metrics',
-		graphs: [getMetricCountWidgetData()],
-	},
-];
-
-function Section(section: MetricSection): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const { title, graphs } = section;
-	const { pathname } = useAppLocation();
-	const dispatch = useDispatch();
-	const urlQuery = useUrlQuery();
-
-	const onDragSelect = useCallback(
-		(start: number, end: number) => {
-			const startTimestamp = Math.trunc(start);
-			const endTimestamp = Math.trunc(end);
-
-			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
-			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
-			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			navigate(generatedUrl);
-
-			if (startTimestamp !== endTimestamp) {
-				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
-			}
-		},
-		[dispatch, pathname, urlQuery],
-	);
-
-	return (
-		<div
-			className="meter-column-graph"
-			data-testid={`meter-breakdown-section-${title.toLowerCase()}`}
-		>
-			<CardContainer className="row-card" isDarkMode={isDarkMode}>
-				<Typography.Text className="section-title">{title}</Typography.Text>
-			</CardContainer>
-			<div className="meter-page-grid">
-				{graphs.map((widget) => (
-					<Card
-						key={widget?.id}
-						isDarkMode={isDarkMode}
-						$panelType={PANEL_TYPES.BAR}
-						className="meter-graph"
-					>
-						<GridCard widget={widget} onDragSelect={onDragSelect} version="v5" />
-					</Card>
-				))}
-			</div>
-		</div>
-	);
-}
+const CONTROLS = withControls(CHARTS_ONLY, {
+	toolbar: { autoRefresh: false },
+});

 function BreakDown(): JSX.Element {
 	const { isCloudUser } = useGetTenantLicense();
@@ -133,10 +42,7 @@ function BreakDown(): JSX.Element {

 	return (
 		<div className="meter-explorer-breakdown">
-			<section className="meter-explorer-date-time">
-				<DateTimeSelectionV2 showAutoRefresh={false} />
-			</section>
-			<section className="meter-explorer-graphs">
+			<section className="meter-explorer-notices">
 				{showInfo && (
 					<Alert
 						type="info"
@@ -179,28 +85,8 @@ function BreakDown(): JSX.Element {
 						}
 					/>
 				)}
-				<section className="total">
-					<Section
-						id={sections[0].id}
-						title={sections[0].title}
-						graphs={sections[0].graphs}
-					/>
-				</section>
-				{sections.map((section, idx) => {
-					if (idx === 0) {
-						return;
-					}
-
-					return (
-						<Section
-							key={section.id}
-							id={section.id}
-							title={section.title}
-							graphs={section.graphs}
-						/>
-					);
-				})}
 			</section>
+			<SystemDashboard host={COST_METER} controls={CONTROLS} />
 		</div>
 	);
 }
--- a/frontend/src/container/MeterExplorer/Breakdown/tests/BreakDown.test.tsx
+++ b/frontend/src/container/MeterExplorer/Breakdown/tests/BreakDown.test.tsx
@@ -0,0 +1,49 @@
+import type { DashboardControlsInput } from 'pages/DashboardPage/DashboardContainer/controls/types';
+import { resolveControls } from 'pages/DashboardPage/DashboardContainer/controls/dashboardControls';
+import { render, screen } from 'tests/test-utils';
+
+import type { SystemDashboardHost } from 'container/SystemDashboard/systemDashboardHost';
+
+import BreakDown from '../BreakDown';
+
+jest.mock('container/SystemDashboard/SystemDashboard', () => ({
+	__esModule: true,
+	default: ({
+		host,
+		controls,
+	}: {
+		host: SystemDashboardHost;
+		controls: DashboardControlsInput;
+	}): JSX.Element => (
+		<div
+			data-testid="system-dashboard"
+			data-name={host.name}
+			data-controls={JSON.stringify(controls)}
+		/>
+	),
+}));
+
+describe('Cost meter breakdown', () => {
+	it('mounts the cost meter system dashboard as charts only, without auto-refresh', () => {
+		render(<BreakDown />);
+
+		const dashboard = screen.getByTestId('system-dashboard');
+		expect(dashboard).toHaveAttribute('data-name', 'cost-meter-breakdown');
+		const controls = resolveControls(
+			JSON.parse(dashboard.getAttribute('data-controls') ?? ''),
+			true,
+		);
+		expect(controls.header.breadcrumbs).toBe(false);
+		expect(controls.panelActions.createAlert).toBe(false);
+		expect(controls.panelActions.drilldown).toBe(false);
+		expect(controls.panelActions.zoom).toBe(true);
+		expect(controls.toolbar.autoRefresh).toBe(false);
+		expect(controls.toolbar.timeRange).toBe(true);
+	});
+
+	it('keeps the UTC billing notice above the dashboard', () => {
+		render(<BreakDown />);
+
+		expect(screen.getByText(/Billing is calculated in UTC/)).toBeInTheDocument();
+	});
+});
--- a/frontend/src/container/MeterExplorer/Breakdown/graphs.ts
+++ b/frontend/src/container/MeterExplorer/Breakdown/graphs.ts
@@ -1,374 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { GetWidgetQueryBuilderProps } from 'container/MetricsApplication/types';
-import { Widgets } from 'types/api/widgets/widget';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderFormula,
-	IBuilderQuery,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
-import { v4 as uuid } from 'uuid';
-
-interface GetWidgetQueryProps {
-	title: string;
-	description: string;
-	queryData: IBuilderQuery[];
-	queryFormulas?: IBuilderFormula[];
-	panelTypes?: PANEL_TYPES;
-	yAxisUnit?: string;
-	columnUnits?: Record<string, string>;
-}
-
-interface GetWidgetQueryPropsReturn extends GetWidgetQueryBuilderProps {
-	description?: string;
-	nullZeroValues: string;
-	columnUnits?: Record<string, string>;
-}
-
-export const getWidgetQueryBuilder = ({
-	query,
-	title = '',
-	panelTypes,
-	yAxisUnit = '',
-	fillSpans = false,
-	id,
-	nullZeroValues,
-	description,
-}: GetWidgetQueryPropsReturn): Widgets => ({
-	description: description || '',
-	id: id || uuid(),
-	nullZeroValues: nullZeroValues || '',
-	opacity: '1',
-	panelTypes,
-	query,
-	timePreferance: 'GLOBAL_TIME',
-	title,
-	yAxisUnit,
-	softMax: null,
-	softMin: null,
-	selectedLogFields: [],
-	selectedTracesFields: [],
-	fillSpans,
-});
-
-export function getWidgetQuery(
-	props: GetWidgetQueryProps,
-): GetWidgetQueryPropsReturn {
-	const { title, description, panelTypes, yAxisUnit, columnUnits } = props;
-	return {
-		title,
-		yAxisUnit: yAxisUnit || 'none',
-		panelTypes: panelTypes || PANEL_TYPES.TIME_SERIES,
-		fillSpans: false,
-		description,
-		nullZeroValues: 'zero',
-		columnUnits,
-		query: {
-			queryType: EQueryType.QUERY_BUILDER,
-			promql: [],
-			builder: {
-				queryData: props.queryData,
-				queryFormulas: (props.queryFormulas as IBuilderFormula[]) || [],
-				queryTraceOperator: [],
-			},
-			clickhouse_sql: [],
-			id: uuid(),
-		},
-	};
-}
-export const getTotalLogSizeWidgetData = (): Widgets =>
-	getWidgetQueryBuilder(
-		getWidgetQuery({
-			queryData: [
-				{
-					aggregateAttribute: {
-						dataType: DataTypes.Float64,
-						key: 'signoz.meter.log.size',
-						id: 'signoz.meter.log.size--float64--Sum--true',
-						type: 'Sum',
-					},
-					aggregateOperator: 'increase',
-					dataSource: DataSource.METRICS,
-					source: 'meter',
-					disabled: false,
-					expression: 'A',
-					filters: { items: [], op: 'AND' },
-					functions: [],
-					groupBy: [],
-					having: [],
-					legend: 'count',
-					limit: null,
-					orderBy: [],
-					queryName: 'A',
-					reduceTo: ReduceOperators.SUM,
-					spaceAggregation: 'sum',
-					stepInterval: null,
-					timeAggregation: 'increase',
-				},
-			],
-			title: 'Total size of log records ingested',
-			description: '',
-			panelTypes: PANEL_TYPES.VALUE,
-			yAxisUnit: 'bytes',
-		}),
-	);
-
-export const getTotalTraceSizeWidgetData = (): Widgets =>
-	getWidgetQueryBuilder(
-		getWidgetQuery({
-			queryData: [
-				{
-					aggregateAttribute: {
-						dataType: DataTypes.Float64,
-						key: 'signoz.meter.span.size',
-						id: 'signoz.meter.span.size--float64--Sum--true',
-						type: 'Sum',
-					},
-					aggregateOperator: 'increase',
-					dataSource: DataSource.METRICS,
-					source: 'meter',
-					disabled: false,
-					expression: 'A',
-					filters: { items: [], op: 'AND' },
-					functions: [],
-					groupBy: [],
-					having: [],
-					legend: 'count',
-					limit: null,
-					orderBy: [],
-					queryName: 'A',
-					reduceTo: ReduceOperators.SUM,
-					spaceAggregation: 'sum',
-					stepInterval: null,
-					timeAggregation: 'increase',
-				},
-			],
-			title: 'Total size of spans ingested',
-			description: '',
-			panelTypes: PANEL_TYPES.VALUE,
-			yAxisUnit: 'bytes',
-		}),
-	);
-
-export const getTotalMetricDatapointCountWidgetData = (): Widgets =>
-	getWidgetQueryBuilder(
-		getWidgetQuery({
-			queryData: [
-				{
-					aggregateAttribute: {
-						dataType: DataTypes.Float64,
-						key: 'signoz.meter.metric.datapoint.count',
-						id: 'signoz.meter.metric.datapoint.count--float64--Sum--true',
-						type: 'Sum',
-					},
-					aggregateOperator: 'increase',
-					dataSource: DataSource.METRICS,
-					source: 'meter',
-					disabled: false,
-					expression: 'A',
-					filters: { items: [], op: 'AND' },
-					functions: [],
-					groupBy: [],
-					having: [],
-					legend: 'count',
-					limit: null,
-					orderBy: [],
-					queryName: 'A',
-					reduceTo: ReduceOperators.SUM,
-					spaceAggregation: 'sum',
-					stepInterval: null,
-					timeAggregation: 'increase',
-				},
-			],
-			title: 'Total metric datapoints ingested',
-			description: '',
-			panelTypes: PANEL_TYPES.VALUE,
-			yAxisUnit: 'short',
-		}),
-	);
-
-export const getLogCountWidgetData = (): Widgets =>
-	getWidgetQueryBuilder(
-		getWidgetQuery({
-			queryData: [
-				{
-					aggregateAttribute: {
-						dataType: DataTypes.Float64,
-						key: 'signoz.meter.log.count',
-						id: 'signoz.meter.log.count--float64--Sum--true',
-						type: 'Sum',
-					},
-					aggregateOperator: 'increase',
-					dataSource: DataSource.METRICS,
-					source: 'meter',
-					disabled: false,
-					expression: 'A',
-					filters: { items: [], op: 'AND' },
-					functions: [],
-					groupBy: [],
-					having: [],
-					legend: 'count',
-					limit: null,
-					orderBy: [],
-					queryName: 'A',
-					reduceTo: ReduceOperators.AVG,
-					spaceAggregation: 'sum',
-					stepInterval: null,
-					timeAggregation: 'increase',
-				},
-			],
-			title: 'Count of log records ingested',
-			description: '',
-			panelTypes: PANEL_TYPES.BAR,
-			yAxisUnit: 'short',
-		}),
-	);
-
-export const getLogSizeWidgetData = (): Widgets =>
-	getWidgetQueryBuilder(
-		getWidgetQuery({
-			queryData: [
-				{
-					aggregateAttribute: {
-						dataType: DataTypes.Float64,
-						key: 'signoz.meter.log.size',
-						id: 'signoz.meter.log.size--float64--Sum--true',
-						type: 'Sum',
-					},
-					aggregateOperator: 'increase',
-					dataSource: DataSource.METRICS,
-					source: 'meter',
-					disabled: false,
-					expression: 'A',
-					filters: { items: [], op: 'AND' },
-					functions: [],
-					groupBy: [],
-					having: [],
-					legend: 'size',
-					limit: null,
-					orderBy: [],
-					queryName: 'A',
-					reduceTo: ReduceOperators.AVG,
-					spaceAggregation: 'sum',
-					stepInterval: null,
-					timeAggregation: 'increase',
-				},
-			],
-			title: 'Size of log records ingested',
-			description: '',
-			panelTypes: PANEL_TYPES.BAR,
-			yAxisUnit: 'bytes',
-		}),
-	);
-
-export const getSpanCountWidgetData = (): Widgets =>
-	getWidgetQueryBuilder(
-		getWidgetQuery({
-			queryData: [
-				{
-					aggregateAttribute: {
-						dataType: DataTypes.Float64,
-						key: 'signoz.meter.span.count',
-						id: 'signoz.meter.span.count--float64--Sum--true',
-						type: 'Sum',
-					},
-					aggregateOperator: 'increase',
-					dataSource: DataSource.METRICS,
-					source: 'meter',
-					disabled: false,
-					expression: 'A',
-					filters: { items: [], op: 'AND' },
-					functions: [],
-					groupBy: [],
-					having: [],
-					legend: 'count',
-					limit: null,
-					orderBy: [],
-					queryName: 'A',
-					reduceTo: ReduceOperators.AVG,
-					spaceAggregation: 'sum',
-					stepInterval: null,
-					timeAggregation: 'increase',
-				},
-			],
-			title: 'Count of spans ingested',
-			description: '',
-			panelTypes: PANEL_TYPES.BAR,
-			yAxisUnit: 'short',
-		}),
-	);
-
-export const getSpanSizeWidgetData = (): Widgets =>
-	getWidgetQueryBuilder(
-		getWidgetQuery({
-			queryData: [
-				{
-					aggregateAttribute: {
-						dataType: DataTypes.Float64,
-						key: 'signoz.meter.span.size',
-						id: 'signoz.meter.span.size--float64--Sum--true',
-						type: 'Sum',
-					},
-					aggregateOperator: 'increase',
-					dataSource: DataSource.METRICS,
-					source: 'meter',
-					disabled: false,
-					expression: 'A',
-					filters: { items: [], op: 'AND' },
-					functions: [],
-					groupBy: [],
-					having: [],
-					legend: 'size',
-					limit: null,
-					orderBy: [],
-					queryName: 'A',
-					reduceTo: ReduceOperators.AVG,
-					spaceAggregation: 'sum',
-					stepInterval: null,
-					timeAggregation: 'increase',
-				},
-			],
-			title: 'Size of spans ingested',
-			description: '',
-			panelTypes: PANEL_TYPES.BAR,
-			yAxisUnit: 'bytes',
-		}),
-	);
-
-export const getMetricCountWidgetData = (): Widgets =>
-	getWidgetQueryBuilder(
-		getWidgetQuery({
-			queryData: [
-				{
-					aggregateAttribute: {
-						dataType: DataTypes.Float64,
-						key: 'signoz.meter.metric.datapoint.count',
-						id: 'signoz.meter.metric.datapoint.count--float64--Sum--true',
-						type: 'Sum',
-					},
-					aggregateOperator: 'increase',
-					dataSource: DataSource.METRICS,
-					source: 'meter',
-					disabled: false,
-					expression: 'A',
-					filters: { items: [], op: 'AND' },
-					functions: [],
-					groupBy: [],
-					having: [],
-					legend: 'count',
-					limit: null,
-					orderBy: [],
-					queryName: 'A',
-					reduceTo: ReduceOperators.AVG,
-					spaceAggregation: 'sum',
-					stepInterval: null,
-					timeAggregation: 'increase',
-				},
-			],
-			title: 'Count of metric datapoints ingested',
-			description: '',
-			panelTypes: PANEL_TYPES.BAR,
-			yAxisUnit: 'short',
-		}),
-	);
--- a/frontend/src/container/MetricsApplication/Tabs/util.ts
+++ b/frontend/src/container/MetricsApplication/Tabs/util.ts
@@ -1,7 +1,9 @@
 import React, { Dispatch, SetStateAction, useMemo, useRef } from 'react';
+import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
+import { ENDPOINT_STATS_EXPRESSION_KEY } from 'container/ApiMonitoring/filterParamKeys';
 import { routeConfig } from 'container/SideNav/config';
 import { getQueryString } from 'container/SideNav/helper';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -15,11 +17,7 @@ import {
 	BaseAutocompleteData,
 	DataTypes,
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderQuery,
-	Query,
-	TagFilterItem,
-} from 'types/api/queryBuilder/queryBuilderData';
+import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { Tags } from 'hooks/useResourceAttribute/types';
 import { isModifierKeyPressed } from 'utils/app';
@@ -126,7 +124,7 @@ const generateAPIMonitoringPath = (
 	domainName: string,
 	startTime: number,
 	endTime: number,
-	filters: IBuilderQuery['filters'],
+	filterExpression: string,
 ): string => {
 	const basePath = ROUTES.API_MONITORING;
 	return `${basePath}?${createQueryParams({
@@ -138,8 +136,8 @@ const generateAPIMonitoringPath = (
 				endTime,
 			},
 			selectedInterval: 'custom',
-			endPointDetailsLocalFilters: filters,
 		}),
+		[ENDPOINT_STATS_EXPRESSION_KEY]: filterExpression,
 	})}`;
 };
 export function onViewAPIMonitoringPopupClick({
@@ -153,41 +151,15 @@ export function onViewAPIMonitoringPopupClick({
 	return (e?: React.MouseEvent): void => {
 		const endTime = timestamp + (stepInterval || 60);
 		const startTime = timestamp - (stepInterval || 60);
-		const filters = {
-			items: [
-				...(isError
-					? [
-							{
-								id: uuid().slice(0, 8),
-								key: {
-									key: 'hasError',
-									dataType: DataTypes.bool,
-									type: 'tag',
-									id: 'hasError--bool--tag--true',
-								},
-								op: 'in',
-								value: ['true'],
-							},
-						]
-					: []),
-				{
-					id: uuid().slice(0, 8),
-					key: {
-						key: 'service.name',
-						dataType: DataTypes.String,
-						type: 'resource',
-					},
-					op: '=',
-					value: servicename,
-				},
-			],
-			op: 'AND',
-		};
+		const filterExpression = [
+			...(isError ? ["hasError IN ['true']"] : []),
+			`service.name = ${formatValueForExpression(servicename)}`,
+		].join(' AND ');
 		const newPath = generateAPIMonitoringPath(
 			domainName,
 			startTime,
 			endTime,
-			filters,
+			filterExpression,
 		);

 		safeNavigate(newPath, { newTab: !!e && isModifierKeyPressed(e) });
--- a/frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts
+++ b/frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts
@@ -153,6 +153,7 @@ import opentelemetryUrl from '@/assets/Logos/opentelemetry.svg';
 import phpUrl from '@/assets/Logos/php.svg';
 import pinoUrl from '@/assets/Logos/pino.svg';
 import pipecatUrl from '@/assets/Logos/pipecat.svg';
+import pixeltableUrl from '@/assets/Logos/pixeltable.svg';
 import planetscaleUrl from '@/assets/Logos/planetscale.svg';
 import pm2Url from '@/assets/Logos/pm2.svg';
 import podmanUrl from '@/assets/Logos/podman.svg';
@@ -2579,7 +2580,7 @@ const onboardingConfigWithLinks = [
 								key: 'aws-ec2-metrics-one-click',
 								label: 'One Click AWS',
 								imgUrl: ec2Url,
-								link: '/integrations?integration=aws-integration&service=ec2',
+								link: '/integrations/aws?service=ec2',
 								internalRedirect: true,
 							},
 							{
@@ -2637,7 +2638,7 @@ const onboardingConfigWithLinks = [
 								key: 'aws-ecs-ec2-one-click',
 								label: 'One Click AWS',
 								imgUrl: ecsUrl,
-								link: '/integrations?integration=aws-integration&service=ecs',
+								link: '/integrations/aws?service=ecs',
 								internalRedirect: true,
 							},
 							{
@@ -2699,7 +2700,7 @@ const onboardingConfigWithLinks = [
 								key: 'aws-eks-ec2-one-click',
 								label: 'One Click AWS',
 								imgUrl: eksUrl,
-								link: '/integrations?integration=aws-integration&service=eks',
+								link: '/integrations/aws?service=eks',
 								internalRedirect: true,
 							},
 							{
@@ -2823,21 +2824,21 @@ const onboardingConfigWithLinks = [
 					key: 'aws-rds-one-click',
 					label: 'One Click AWS',
 					imgUrl: rdsUrl,
-					link: '/integrations?integration=aws-integration&service=rds',
+					link: '/integrations/aws?service=rds',
 					internalRedirect: true,
 				},
 				{
 					key: 'aws-rds-mysql-manual',
 					label: 'MySQL Manual',
 					imgUrl: rdsUrl,
-					link: '/integrations?integration=builtin-aws_rds_mysql',
+					link: '/integrations/builtin-aws_rds_mysql',
 					internalRedirect: true,
 				},
 				{
 					key: 'aws-rds-postgresql-manual',
 					label: 'PostgreSQL Manual',
 					imgUrl: rdsUrl,
-					link: '/integrations?integration=builtin-aws_rds_postgresql',
+					link: '/integrations/builtin-aws_rds_postgresql',
 					internalRedirect: true,
 				},
 			],
@@ -2896,7 +2897,7 @@ const onboardingConfigWithLinks = [
 								key: 'aws-lambda-logs-one-click',
 								label: 'One Click AWS',
 								imgUrl: lambdaUrl,
-								link: '/integrations?integration=aws-integration&service=lambda',
+								link: '/integrations/aws?service=lambda',
 								internalRedirect: true,
 							},
 							{
@@ -2954,7 +2955,7 @@ const onboardingConfigWithLinks = [
 								key: 'aws-lambda-metrics-one-click',
 								label: 'One Click AWS',
 								imgUrl: lambdaUrl,
-								link: '/integrations?integration=aws-integration&service=lambda',
+								link: '/integrations/aws?service=lambda',
 								internalRedirect: true,
 							},
 							{
@@ -4710,6 +4711,7 @@ const onboardingConfigWithLinks = [
 			'messaging',
 			'messaging queues',
 			'messaging-queues-celery',
+			'python celery',
 			'queues',
 			'task queue tracing',
 		],
@@ -4930,7 +4932,7 @@ const onboardingConfigWithLinks = [
 			'redis metrics',
 		],
 		imgUrl: redisUrl,
-		link: '/integrations?integration=builtin-redis',
+		link: '/integrations/builtin-redis',
 		internalRedirect: true,
 	},
 	{
@@ -4946,7 +4948,7 @@ const onboardingConfigWithLinks = [
 			'postgresql metrics',
 		],
 		imgUrl: postgresqlUrl,
-		link: '/integrations?integration=builtin-postgres',
+		link: '/integrations/builtin-postgres',
 		internalRedirect: true,
 	},
 	{
@@ -4962,7 +4964,7 @@ const onboardingConfigWithLinks = [
 			'proxy',
 		],
 		imgUrl: nginxUrl,
-		link: '/integrations?integration=builtin-nginx',
+		link: '/integrations/builtin-nginx',
 		internalRedirect: true,
 	},
 	{
@@ -4983,7 +4985,7 @@ const onboardingConfigWithLinks = [
 			'self',
 		],
 		imgUrl: mongoUrl,
-		link: '/integrations?integration=builtin-mongo',
+		link: '/integrations/builtin-mongo',
 		internalRedirect: true,
 	},
 	{
@@ -5001,7 +5003,7 @@ const onboardingConfigWithLinks = [
 			'olap database',
 		],
 		imgUrl: clickhouseUrl,
-		link: '/integrations?integration=builtin-clickhouse',
+		link: '/integrations/builtin-clickhouse',
 		internalRedirect: true,
 	},
 	{
@@ -5056,7 +5058,7 @@ const onboardingConfigWithLinks = [
 					key: 'aws-alb-one-click',
 					label: 'One Click AWS',
 					imgUrl: awsAlbUrl,
-					link: '/integrations?integration=aws-integration&service=alb',
+					link: '/integrations/aws?service=alb',
 					internalRedirect: true,
 				},
 				{
@@ -5097,7 +5099,7 @@ const onboardingConfigWithLinks = [
 					key: 'aws-api-gateway-one-click',
 					label: 'One Click AWS',
 					imgUrl: apiGatewayUrl,
-					link: '/integrations?integration=aws-integration&service=api-gateway',
+					link: '/integrations/aws?service=api-gateway',
 					internalRedirect: true,
 				},
 				{
@@ -5142,7 +5144,7 @@ const onboardingConfigWithLinks = [
 					key: 'aws-dynamodb-one-click',
 					label: 'One Click AWS',
 					imgUrl: dynamodbUrl,
-					link: '/integrations?integration=aws-integration&service=dynamodb',
+					link: '/integrations/aws?service=dynamodb',
 					internalRedirect: true,
 				},
 				{
@@ -5189,14 +5191,14 @@ const onboardingConfigWithLinks = [
 					key: 'aws-elasticache-one-click',
 					label: 'One Click AWS',
 					imgUrl: elasticacheUrl,
-					link: '/integrations?integration=aws-integration&service=elasticache',
+					link: '/integrations/aws?service=elasticache',
 					internalRedirect: true,
 				},
 				{
 					key: 'aws-elasticache-redis-manual',
 					label: 'Redis Manual',
 					imgUrl: elasticacheUrl,
-					link: '/integrations?integration=builtin-aws_elasticache_redis',
+					link: '/integrations/builtin-aws_elasticache_redis',
 					internalRedirect: true,
 				},
 			],
@@ -5235,7 +5237,7 @@ const onboardingConfigWithLinks = [
 					key: 'aws-msk-one-click',
 					label: 'One Click AWS',
 					imgUrl: amazonMskUrl,
-					link: '/integrations?integration=aws-integration&service=msk',
+					link: '/integrations/aws?service=msk',
 					internalRedirect: true,
 				},
 				{
@@ -5278,7 +5280,7 @@ const onboardingConfigWithLinks = [
 					key: 'aws-s3-one-click',
 					label: 'One Click AWS',
 					imgUrl: s3Url,
-					link: '/integrations?integration=aws-integration&service=s3sync',
+					link: '/integrations/aws?service=s3sync',
 					internalRedirect: true,
 				},
 				{
@@ -5320,7 +5322,7 @@ const onboardingConfigWithLinks = [
 					key: 'aws-sns-one-click',
 					label: 'One Click AWS',
 					imgUrl: snsUrl,
-					link: '/integrations?integration=aws-integration&service=sns',
+					link: '/integrations/aws?service=sns',
 					internalRedirect: true,
 				},
 				{
@@ -5362,7 +5364,7 @@ const onboardingConfigWithLinks = [
 					key: 'aws-sqs-one-click',
 					label: 'One Click AWS',
 					imgUrl: sqsUrl,
-					link: '/integrations?integration=aws-integration&service=sqs',
+					link: '/integrations/aws?service=sqs',
 					internalRedirect: true,
 				},
 				{
@@ -7249,12 +7251,14 @@ const onboardingConfigWithLinks = [
 			'cloud monitoring metrics',
 			'connect gcp account',
 			'gcp',
+			'gcp agent',
 			'gcp integration',
 			'gcp logs',
 			'gcp manual setup',
 			'gcp metrics',
 			'gcp monitoring',
 			'gcp observability',
+			'gcp one click',
 			'gcp service account',
 			'google cloud',
 			'google cloud integration',
@@ -7263,6 +7267,8 @@ const onboardingConfigWithLinks = [
 			'metrics',
 			'monitoring',
 			'observability',
+			'one click',
+			'one click gcp integration',
 			'opentelemetry collector gcp',
 			'pub/sub',
 		],
@@ -8155,29 +8161,50 @@ const onboardingConfigWithLinks = [
 		link: '/docs/instrumentation/javascript/opentelemetry-pm2/',
 	},
 	{
-		dataSource: 'gcp-one-click-integration',
-		label: 'GCP One-Click Integration',
-		imgUrl: gcpUrl,
-		tags: ['GCP', 'metrics', 'logs'],
-		module: 'integrations',
+		dataSource: 'pixeltable',
+		label: 'Pixeltable',
+		imgUrl: pixeltableUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
 		relatedSearchKeywords: [
-			'gcp',
-			'gcp agent',
-			'gcp integration',
-			'gcp logs',
-			'gcp metrics',
-			'gcp one click',
-			'google cloud',
-			'google cloud integration',
+			'apm',
+			'llm',
+			'llm monitoring',
+			'multimodal ai',
+			'observability',
+			'opentelemetry pixeltable',
+			'pixeltable',
+			'pixeltable monitoring',
+			'pixeltable observability',
+			'pixeltable traces',
+			'traces',
+			'udf',
+		],
+		id: 'pixeltable',
+		link: '/docs/pixeltable-observability/',
+	},
+	{
+		dataSource: 'claude-cowork',
+		label: 'Claude Cowork',
+		imgUrl: claudeCodeUrl,
+		tags: ['LLM Monitoring', 'logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'claude',
+			'claude cowork',
+			'claude cowork monitoring',
+			'claude cowork observability',
+			'cowork',
+			'llm',
+			'llm monitoring',
 			'logs',
-			'metrics',
 			'monitoring',
 			'observability',
-			'one click',
-			'one click gcp integration',
+			'otel claude cowork',
+			'telemetry',
 		],
-		id: 'gcp-one-click-integration',
-		link: '/docs/integrations/gcp/one-click-gcp-integrations/',
+		id: 'claude-cowork',
+		link: '/docs/claude-cowork-monitoring/',
 	},
 ];
 export default onboardingConfigWithLinks;
--- a/frontend/src/container/SystemDashboard/SystemDashboard.module.scss
+++ b/frontend/src/container/SystemDashboard/SystemDashboard.module.scss
@@ -0,0 +1,7 @@
+.errorState {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--spacing-2);
+	padding: var(--spacing-8);
+}
--- a/frontend/src/container/SystemDashboard/SystemDashboard.tsx
+++ b/frontend/src/container/SystemDashboard/SystemDashboard.tsx
@@ -0,0 +1,49 @@
+import { Typography } from '@signozhq/ui/typography';
+import Spinner from 'components/Spinner';
+import DashboardContainer from 'pages/DashboardPage/DashboardContainer';
+import type { DashboardControlsInput } from 'pages/DashboardPage/DashboardContainer/controls/types';
+
+import type { SystemDashboardHost } from './systemDashboardHost';
+import { useSystemDashboard } from './useSystemDashboard';
+import styles from './SystemDashboard.module.scss';
+
+interface SystemDashboardProps {
+	host: SystemDashboardHost;
+	controls?: DashboardControlsInput;
+}
+
+/** A shipped, read-only system dashboard, embedded in a feature page. */
+function SystemDashboard({
+	host,
+	controls,
+}: SystemDashboardProps): JSX.Element {
+	const { dashboard, isLoading, isError, error, refetch } =
+		useSystemDashboard(host);
+
+	if (isLoading) {
+		return <Spinner tip="Loading dashboard..." />;
+	}
+
+	if (isError || !dashboard) {
+		return (
+			<div className={styles.errorState} data-testid="system-dashboard-error">
+				<Typography.Title>Failed to load dashboard</Typography.Title>
+				<Typography.Text>
+					{error?.response?.data?.error?.message ?? error?.message}
+				</Typography.Text>
+			</div>
+		);
+	}
+
+	return (
+		<DashboardContainer
+			dashboard={dashboard}
+			refetch={refetch}
+			source={host.source}
+			readOnly
+			controls={controls}
+		/>
+	);
+}
+
+export default SystemDashboard;
--- a/frontend/src/container/SystemDashboard/tests/SystemDashboard.test.tsx
+++ b/frontend/src/container/SystemDashboard/tests/SystemDashboard.test.tsx
@@ -0,0 +1,84 @@
+import {
+	DashboardtypesSourceDTO,
+	type GetSystemDashboard200,
+} from 'api/generated/services/sigNoz.schemas';
+import { rest, server } from 'mocks-server/server';
+import { render, screen } from 'tests/test-utils';
+
+import SystemDashboard from '../SystemDashboard';
+import { createSystemDashboardHost } from '../systemDashboardHost';
+
+const HOST = createSystemDashboardHost('test-overview', 'test-overview-id');
+const ENDPOINT = '*/api/v2/dashboards/system/test-overview';
+
+jest.mock('pages/DashboardPage/DashboardContainer', () => ({
+	__esModule: true,
+	default: ({
+		dashboard,
+		readOnly,
+	}: {
+		dashboard: { id: string; spec: { display: { name: string } } };
+		readOnly: boolean;
+	}): JSX.Element => (
+		<div
+			data-testid="dashboard-container"
+			data-dashboard-id={dashboard.id}
+			data-read-only={String(readOnly)}
+		>
+			{dashboard.spec.display.name}
+		</div>
+	),
+}));
+
+const response: GetSystemDashboard200 = {
+	status: 'success',
+	data: {
+		orgId: 'org',
+		locked: true,
+		name: 'signoz---test-overview',
+		schemaVersion: 'v6',
+		source: DashboardtypesSourceDTO.system,
+		tags: [],
+		spec: {
+			display: { name: 'Test overview' },
+			variables: [],
+			panels: {},
+			layouts: [],
+		},
+	},
+};
+
+describe('SystemDashboard', () => {
+	afterEach(() => server.resetHandlers());
+
+	it('mounts the named system dashboard read-only under the host id', async () => {
+		server.use(rest.get(ENDPOINT, (_req, res, ctx) => res(ctx.json(response))));
+
+		render(<SystemDashboard host={HOST} />);
+
+		const container = await screen.findByTestId('dashboard-container');
+		expect(container).toHaveTextContent('Test overview');
+		expect(container).toHaveAttribute('data-dashboard-id', 'test-overview-id');
+		expect(container).toHaveAttribute('data-read-only', 'true');
+	});
+
+	it('shows why the dashboard failed to load', async () => {
+		server.use(
+			rest.get(ENDPOINT, (_req, res, ctx) =>
+				res(
+					ctx.status(404),
+					ctx.json({
+						status: 'error',
+						error: { code: 'not_found', message: 'not provisioned' },
+					}),
+				),
+			),
+		);
+
+		render(<SystemDashboard host={HOST} />);
+
+		await expect(
+			screen.findByTestId('system-dashboard-error'),
+		).resolves.toHaveTextContent('not provisioned');
+	});
+});
--- a/frontend/src/container/SystemDashboard/systemDashboardHost.ts
+++ b/frontend/src/container/SystemDashboard/systemDashboardHost.ts
@@ -0,0 +1,36 @@
+import { getGetSystemDashboardQueryKey } from 'api/generated/services/dashboard';
+import type {
+	DashboardtypesGettableDashboardV2DTO,
+	GetSystemDashboard200,
+} from 'api/generated/services/sigNoz.schemas';
+import type { DashboardQuerySource } from 'pages/DashboardPage/DashboardContainer/store/slices/editContextSlice';
+
+export interface SystemDashboardHost {
+	/** Definition name without the `signoz---` prefix. */
+	name: string;
+	select: (
+		response: GetSystemDashboard200,
+	) => DashboardtypesGettableDashboardV2DTO;
+	source: DashboardQuerySource;
+}
+
+/**
+ * Call at module level: `select` and `source` must stay referentially stable.
+ * System dashboards carry no `id`; `id` keys the store's per-dashboard state
+ * (saved variable values), so keep it stable across releases.
+ */
+export function createSystemDashboardHost(
+	name: string,
+	id: string,
+): SystemDashboardHost {
+	const select = (
+		response: GetSystemDashboard200,
+	): DashboardtypesGettableDashboardV2DTO =>
+		({ ...response.data, id }) as DashboardtypesGettableDashboardV2DTO;
+
+	return {
+		name,
+		select,
+		source: { queryKey: getGetSystemDashboardQueryKey({ name }), select },
+	};
+}
--- a/frontend/src/container/SystemDashboard/useSystemDashboard.ts
+++ b/frontend/src/container/SystemDashboard/useSystemDashboard.ts
@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import { useGetSystemDashboard } from 'api/generated/services/dashboard';
+import type { GetSystemDashboardQueryError } from 'api/generated/services/dashboard';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { SystemDashboardHost } from './systemDashboardHost';
+
+export interface UseSystemDashboardResult {
+	dashboard: DashboardtypesGettableDashboardV2DTO | undefined;
+	isLoading: boolean;
+	isError: boolean;
+	error: GetSystemDashboardQueryError | null;
+	refetch: () => void;
+}
+
+export function useSystemDashboard(
+	host: SystemDashboardHost,
+): UseSystemDashboardResult {
+	const {
+		data: dashboard,
+		isLoading,
+		isError,
+		error,
+		refetch,
+	} = useGetSystemDashboard(
+		{ name: host.name },
+		{
+			query: {
+				select: host.select,
+				staleTime: Infinity,
+				refetchOnMount: false,
+			},
+		},
+	);
+
+	const refetchDashboard = useCallback((): void => {
+		void refetch();
+	}, [refetch]);
+
+	return { dashboard, isLoading, isError, error, refetch: refetchDashboard };
+}
--- a/frontend/src/container/TopNav/AutoRefreshV2/index.tsx
+++ b/frontend/src/container/TopNav/AutoRefreshV2/index.tsx
@@ -175,6 +175,7 @@ function AutoRefresh({
 			}
 		>
 			<ButtonContainer
+				data-testid="auto-refresh-trigger"
 				title="Set auto refresh"
 				type={showAutoRefreshBtnPrimary ? 'primary' : 'default'}
 			>
--- a/frontend/src/mocks-server/mockdata/alert_rules.ts
+++ b/frontend/src/mocks-server/mockdata/alert_rules.ts
@@ -40,7 +40,6 @@ const make = (
 	state: RuletypesAlertStateDTO.inactive,
 	labels: { severity: 'info' },
 	annotations: {},
-	source: '',
 	ruleType: RuletypesRuleTypeDTO.threshold_rule,
 	schemaVersion: RuletypesRuleDTOSchemaVersion.v2alpha1,
 	evaluation: {
--- a/frontend/src/pages/AlertDetails/AlertDetails.styles.scss
+++ b/frontend/src/pages/AlertDetails/AlertDetails.styles.scss
@@ -41,6 +41,8 @@
 }

 .alert-details {
+	margin-top: 10px;
+
 	&__divider {
 		--divider-color: var(--l1-border);
 		--divider-margin: 16px 0;
--- a/frontend/src/pages/AlertList/AlertList.styles.scss
+++ b/frontend/src/pages/AlertList/AlertList.styles.scss
@@ -56,7 +56,6 @@
 	}

 	.alert-rules-container {
-		margin-top: 10px;
 		flex: 1;
 		min-height: 0;
 		display: flex;
@@ -133,10 +132,6 @@
 			display: flex;
 			flex-direction: column;
 			overflow: hidden;
-
-			> .alert-rules-container {
-				margin-top: 0;
-			}
 		}
 	}
 }
--- a/frontend/src/pages/AlertList/stories/__story_mockdata__/alerts.ts
+++ b/frontend/src/pages/AlertList/stories/__story_mockdata__/alerts.ts
@@ -379,8 +379,6 @@ const buildRule = (index: number, shape: RuleShape): RuletypesRuleDTO => {
 		createdBy: 'ada@signoz.io',
 		updatedBy: 'grace@signoz.io',
 		schemaVersion: RuletypesRuleDTOSchemaVersion.v2alpha1,
-		version: 'v5',
-		source: 'http://localhost/alerts',
 		notificationSettings: {
 			groupBy: ['alertname'],
 			usePolicy: false,
--- a/frontend/src/pages/ApiMonitoring/stories/ApiMonitoringPage.stories.mocks.tsx
+++ b/frontend/src/pages/ApiMonitoring/stories/ApiMonitoringPage.stories.mocks.tsx
@@ -12,6 +12,7 @@ import {
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { VIEWS } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
+import { ENDPOINT_STATS_EXPRESSION_KEY } from 'container/ApiMonitoring/filterParamKeys';
 import { DEFAULT_PARAMS } from 'container/ApiMonitoring/queryParams';
 import type { Time } from 'container/TopNav/DateTimeSelectionV2/types';
 import { rest } from 'msw';
@@ -123,17 +124,7 @@ const timeRange = (): Partial<AppState> => {
 	};
 };

-const serviceFilterItems = {
-	op: 'AND',
-	items: [
-		{
-			id: 'storybook-service-filter',
-			key: { key: 'service.name', dataType: 'string', type: 'resource' },
-			op: '=',
-			value: 'checkout',
-		},
-	],
-};
+const serviceFilterExpression = "service.name = 'checkout'";

 interface RouteValues {
 	drawer: DrawerState;
@@ -160,12 +151,14 @@ const apiMonitoringRoute = ({
 		selectedView: VIEW_OF[drawer],
 		selectedEndPointName:
 			drawer === 'endpoint-stats' ? endpointUrl(domainName, 0) : '',
-		...(serviceFilter ? { endPointDetailsLocalFilters: serviceFilterItems } : {}),
 	};
+	const filterParam = serviceFilter
+		? `&${ENDPOINT_STATS_EXPRESSION_KEY}=${encodeURIComponent(serviceFilterExpression)}`
+		: '';

 	return `${ROUTES.API_MONITORING}?apiMonitoringParams=${encodeURIComponent(
 		JSON.stringify(params),
-	)}`;
+	)}${filterParam}`;
 };

 /** The parts of a query spec the handler tells the page's requests apart by. */
--- a/frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.tsx
@@ -26,7 +26,10 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';

 import AuthZDropdown from 'lib/authz/components/AuthZDropdown/AuthZDropdown';
-import type { AuthZDropdownItemType } from 'lib/authz/components/AuthZDropdown/types';
+import type {
+	AuthZDropdownItemType,
+	AuthZGroupChildType,
+} from 'lib/authz/components/AuthZDropdown/types';
 import { blockedBy } from 'lib/authz/components/AuthZDropdown/utils';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { DashboardCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/dashboard.permissions';
@@ -39,6 +42,7 @@ import styles from './DashboardActions.module.scss';
 import { useDeleteDashboardAction } from './useDeleteDashboardAction';
 import { useDashboardStore } from '../../store/useDashboardStore';
 import { useDashboardEditContext } from '../../hooks/useDashboardEditContext';
+import { useDashboardControlGroup } from '../../controls/useDashboardControlGroup';

 interface DashboardActionsProps {
 	title: string;
@@ -66,6 +70,7 @@ function DashboardActions({
 		deleteChecks,
 		deleteDisabledTooltip,
 	} = useDashboardEditContext();
+	const show = useDashboardControlGroup('dashboardActions');
 	const settingsRequest = useDashboardStore((s) => s.settingsRequest);
 	const clearSettingsRequest = useDashboardStore((s) => s.clearSettingsRequest);
 	const { safeNavigate } = useSafeNavigate();
@@ -73,6 +78,7 @@ function DashboardActions({
 	const { disabledTooltip: lockDisabledTooltip } = useDashboardLockPermission({
 		dashboardId: dashboard.id,
 		source: dashboard.source,
+		enabled: show.lock,
 	});

 	// Cloning creates a new dashboard, so it needs `create` too, and no lock gate.
@@ -162,61 +168,68 @@ function DashboardActions({
 		void handle.enter();
 	}, [dashboard.id, handle]);

-	// Unavailable items stay in the menu, carrying the reason.
-	const menuItems = useMemo<AuthZDropdownItemType[]>(
-		() => [
-			{
-				type: 'group',
-				value: 'group-dashboard',
-				label: 'Dashboard',
-				items: [
-					{
-						type: 'item',
-						value: 'rename',
-						testId: 'dashboard-action-rename',
-						label: 'Rename',
-						prefix: <PenLine size={14} />,
-						checks: editChecks,
-						...blockedBy(editDisabledTooltip),
-						onClick: onOpenRename,
-					},
-					// Clone creates a new dashboard, so it's not lock-gated.
-					{
-						type: 'item',
-						value: 'clone',
-						testId: 'dashboard-action-clone',
-						label: 'Clone dashboard',
-						prefix: <Copy size={14} />,
-						checks: cloneChecks,
-						loading: isCloning,
-						loadingTooltip: 'Cloning dashboard',
-						onClick: (): void => void handleClone(),
-					},
-					{
-						type: 'item',
-						value: 'lock',
-						testId: 'dashboard-action-lock',
-						label: isDashboardLocked ? 'Unlock dashboard' : 'Lock dashboard',
-						prefix: <LockKeyhole size={14} />,
-						checks: editChecks,
-						...blockedBy(lockDisabledTooltip),
-						onClick: onLockToggle,
-					},
-					{
-						type: 'item',
-						value: 'fullscreen',
-						testId: 'dashboard-action-fullscreen',
-						label: 'Full screen',
-						prefix: <Fullscreen size={14} />,
-						onClick: handleEnterFullScreen,
-					},
-				],
-			},
-			{
-				type: 'group',
-				value: 'group-layout',
-				label: 'Layout',
-				items: [
+	// Unavailable items stay in the menu, carrying the reason; hidden ones are dropped.
+	const menuItems = useMemo<AuthZDropdownItemType[]>(() => {
+		const dashboardItems: AuthZGroupChildType[] = [
+			...(show.rename
+				? [
+						{
+							type: 'item' as const,
+							value: 'rename',
+							testId: 'dashboard-action-rename',
+							label: 'Rename',
+							prefix: <PenLine size={14} />,
+							checks: editChecks,
+							...blockedBy(editDisabledTooltip),
+							onClick: onOpenRename,
+						},
+					]
+				: []),
+			// Clone creates a new dashboard, so it's not lock-gated.
+			...(show.clone
+				? [
+						{
+							type: 'item' as const,
+							value: 'clone',
+							testId: 'dashboard-action-clone',
+							label: 'Clone dashboard',
+							prefix: <Copy size={14} />,
+							checks: cloneChecks,
+							loading: isCloning,
+							loadingTooltip: 'Cloning dashboard',
+							onClick: (): void => void handleClone(),
+						},
+					]
+				: []),
+			...(show.lock
+				? [
+						{
+							type: 'item' as const,
+							value: 'lock',
+							testId: 'dashboard-action-lock',
+							label: isDashboardLocked ? 'Unlock dashboard' : 'Lock dashboard',
+							prefix: <LockKeyhole size={14} />,
+							checks: editChecks,
+							...blockedBy(lockDisabledTooltip),
+							onClick: onLockToggle,
+						},
+					]
+				: []),
+			...(show.fullscreen
+				? [
+						{
+							type: 'item' as const,
+							value: 'fullscreen',
+							testId: 'dashboard-action-fullscreen',
+							label: 'Full screen',
+							prefix: <Fullscreen size={14} />,
+							onClick: handleEnterFullScreen,
+						},
+					]
+				: []),
+		];
+		const layoutItems: AuthZGroupChildType[] = show.newSection
+			? [
 					{
 						type: 'item',
 						value: 'new-section',
@@ -227,66 +240,96 @@ function DashboardActions({
 						...blockedBy(editDisabledTooltip),
 						onClick: (): void => setIsNewSectionOpen(true),
 					},
-				],
-			},
-			{ type: 'separator', value: 'divider-danger' },
-			{
-				type: 'item',
-				value: 'delete',
-				testId: 'dashboard-action-delete',
-				label: 'Delete dashboard',
-				prefix: <Trash2 size={14} />,
-				danger: true,
-				checks: deleteChecks,
-				// Independent of read/update, but a locked dashboard can't be removed.
-				...blockedBy(deleteDisabledTooltip),
-				onClick: confirmDeleteDashboard,
-			},
-		],
-		[
-			editChecks,
-			editDisabledTooltip,
-			deleteChecks,
-			deleteDisabledTooltip,
-			cloneChecks,
-			isCloning,
-			lockDisabledTooltip,
-			isDashboardLocked,
-			onOpenRename,
-			handleClone,
-			onLockToggle,
-			handleEnterFullScreen,
-			confirmDeleteDashboard,
-		],
-	);
+				]
+			: [];
+
+		return [
+			...(dashboardItems.length
+				? [
+						{
+							type: 'group' as const,
+							value: 'group-dashboard',
+							label: 'Dashboard',
+							items: dashboardItems,
+						},
+					]
+				: []),
+			...(layoutItems.length
+				? [
+						{
+							type: 'group' as const,
+							value: 'group-layout',
+							label: 'Layout',
+							items: layoutItems,
+						},
+					]
+				: []),
+			...(show.delete
+				? [
+						{ type: 'separator' as const, value: 'divider-danger' },
+						{
+							type: 'item' as const,
+							value: 'delete',
+							testId: 'dashboard-action-delete',
+							label: 'Delete dashboard',
+							prefix: <Trash2 size={14} />,
+							danger: true,
+							checks: deleteChecks,
+							// Independent of read/update, but a locked dashboard can't be removed.
+							...blockedBy(deleteDisabledTooltip),
+							onClick: confirmDeleteDashboard,
+						},
+					]
+				: []),
+		];
+	}, [
+		show,
+		editChecks,
+		editDisabledTooltip,
+		deleteChecks,
+		deleteDisabledTooltip,
+		cloneChecks,
+		isCloning,
+		lockDisabledTooltip,
+		isDashboardLocked,
+		onOpenRename,
+		handleClone,
+		onLockToggle,
+		handleEnterFullScreen,
+		confirmDeleteDashboard,
+	]);

 	return (
 		<div className={styles.dashboardActionsContainer}>
-			<AuthZDropdown items={menuItems} nativeButton align="end" side="bottom">
-				<Button
-					variant="solid"
-					color="secondary"
-					size="md"
-					prefix={<Grid3X3 size="md" />}
-					testId="options"
-				>
-					Actions
-				</Button>
-			</AuthZDropdown>
-			<AuthZTooltip checks={editChecks} disabledTooltip={editDisabledTooltip}>
-				<Button
-					disabledTooltip={undefined}
-					variant="solid"
-					color="secondary"
-					prefix={<Configure size="md" />}
-					testId="show-drawer"
-					disabled={!isEditable}
-					onClick={handleOpenSettings}
-					size="md"
-				>
-					Configure
-				</Button>
-			</AuthZTooltip>
+			{menuItems.length > 0 && (
+				<AuthZDropdown items={menuItems} nativeButton align="end" side="bottom">
+					<Button
+						variant="solid"
+						color="secondary"
+						size="md"
+						prefix={<Grid3X3 size="md" />}
+						testId="options"
+					>
+						Actions
+					</Button>
+				</AuthZDropdown>
+			)}
+			{show.configure && (
+				<AuthZTooltip checks={editChecks} disabledTooltip={editDisabledTooltip}>
+					<Button
+						disabledTooltip={undefined}
+						variant="solid"
+						color="secondary"
+						prefix={<Configure size="md" />}
+						testId="show-drawer"
+						disabled={!isEditable}
+						onClick={handleOpenSettings}
+						size="md"
+					>
+						Configure
+					</Button>
+				</AuthZTooltip>
+			)}
 			<SettingsDrawer
 				drawerTitle="Dashboard Configuration"
 				isOpen={isSettingsDrawerOpen}
@@ -298,30 +341,34 @@ function DashboardActions({
 			>
 				<DashboardSettings dashboard={dashboard} />
 			</SettingsDrawer>
-			<Button
-				variant="solid"
-				color="secondary"
-				prefix={<Braces size="md" />}
-				testId="edit-json"
-				onClick={handleOpenJsonEditor}
-				size="md"
-			>
-				JSON
-			</Button>
-			<AuthZTooltip checks={editChecks} disabledTooltip={editDisabledTooltip}>
+			{show.json && (
 				<Button
-					disabledTooltip={undefined}
 					variant="solid"
-					color="primary"
-					onClick={onAddPanel}
-					prefix={<Plus size="md" />}
-					testId="add-panel-header"
-					disabled={!isEditable}
+					color="secondary"
+					prefix={<Braces size="md" />}
+					testId="edit-json"
+					onClick={handleOpenJsonEditor}
 					size="md"
 				>
-					New Panel
+					JSON
 				</Button>
-			</AuthZTooltip>
+			)}
+			{show.newPanel && (
+				<AuthZTooltip checks={editChecks} disabledTooltip={editDisabledTooltip}>
+					<Button
+						disabledTooltip={undefined}
+						variant="solid"
+						color="primary"
+						onClick={onAddPanel}
+						prefix={<Plus size="md" />}
+						testId="add-panel-header"
+						disabled={!isEditable}
+						size="md"
+					>
+						New Panel
+					</Button>
+				</AuthZTooltip>
+			)}
 			<JsonEditorDrawer
 				dashboard={dashboard}
 				isOpen={isJsonEditorOpen}
--- a/frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.tsx
@@ -24,9 +24,11 @@ import { openInNewTab } from 'utils/navigation';
 import styles from './DashboardInfo.module.scss';

 import TagsOverflowTooltip from './TagsOverflowTooltip';
+import { getLockTooltip } from './utils';
 import { DASHBOARD_NAME_MAX_LENGTH } from '../../constants';
 import { useDashboardStore } from '../../store/useDashboardStore';
 import { useDashboardEditContext } from '../../hooks/useDashboardEditContext';
+import { useDashboardControlGroup } from '../../controls/useDashboardControlGroup';

 // The tag cluster keeps a fixed footprint so a long title ellipsizes around it
 // instead of collapsing the tags: show up to two tags, then a `+N` overflow badge.
@@ -75,27 +77,19 @@ function DashboardInfo({
 }: DashboardInfoProps): JSX.Element {
 	const { isEditable: canEdit } = useDashboardEditContext();
 	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const show = useDashboardControlGroup('title');

-	const hasTags = tags.length > 0;
-	const hasDescription = !isEmpty(description);
+	const hasTags = show.tags && tags.length > 0;
+	const hasDescription = show.description && !isEmpty(description);

 	const visibleTags = tags.slice(0, MAX_VISIBLE_TAGS);
 	const remainingTags = tags.slice(MAX_VISIBLE_TAGS);

-	// Without a toggle, say why it can't be toggled rather than only restating the
-	// lock state.
-	let lockTooltip: string;
-	if (onToggleLock) {
-		lockTooltip = isDashboardLocked
-			? 'Locked — click to unlock'
-			: 'Unlocked — click to lock';
-	} else if (lockDisabledTooltip) {
-		lockTooltip = lockDisabledTooltip;
-	} else {
-		lockTooltip = isDashboardLocked
-			? 'This dashboard is locked'
-			: 'This dashboard is unlocked';
-	}
+	const lockTooltip = getLockTooltip({
+		isLocked: isDashboardLocked,
+		canToggle: !!onToggleLock,
+		disabledReason: lockDisabledTooltip,
+	});

 	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
 		if (event.key === 'Enter') {
@@ -128,66 +122,69 @@ function DashboardInfo({

 	return (
 		<div className={styles.dashboardInfo}>
-			<img src={image} alt={title} className={styles.dashboardImage} />
-
-			{isEditing ? (
-				<div className={styles.dashboardTitleEditor} onBlur={onEditorBlur}>
-					<Input
-						autoFocus
-						value={draft}
-						testId="dashboard-title-input"
-						maxLength={DASHBOARD_NAME_MAX_LENGTH}
-						className={styles.dashboardTitleInput}
-						onChange={(e): void => onDraftChange(e.target.value)}
-						onKeyDown={onKeyDown}
-					/>
-					<Button
-						type="button"
-						variant="solid"
-						color="primary"
-						size="sm"
-						icon
-						aria-label="Save title"
-						testId="dashboard-title-save"
-						onClick={onCommit}
-					>
-						<Check size={14} />
-					</Button>
-					<Button
-						type="button"
-						variant="outlined"
-						color="secondary"
-						size="sm"
-						icon
-						aria-label="Cancel title edit"
-						testId="dashboard-title-cancel"
-						onClick={onCancel}
-					>
-						<X size={14} />
-					</Button>
-				</div>
-			) : (
-				<>
-					<Tooltip title={title}>
-						<Typography.Text
-							className={cx(styles.dashboardTitle, {
-								[styles.dashboardTitleHover]: canEdit,
-							})}
-							data-testid="dashboard-title"
-							onClick={canEdit ? onStartEdit : undefined}
-						>
-							{title}
-						</Typography.Text>
-					</Tooltip>
-					<CopyButton
-						value={dashboardId}
-						ariaLabel="Copy dashboard ID"
-						testId="dashboard-copy-id"
-						onCopy={handleCopyId}
-					/>
-				</>
+			{show.name && (
+				<img src={image} alt={title} className={styles.dashboardImage} />
 			)}

+			{show.name &&
+				(isEditing ? (
+					<div className={styles.dashboardTitleEditor} onBlur={onEditorBlur}>
+						<Input
+							autoFocus
+							value={draft}
+							testId="dashboard-title-input"
+							maxLength={DASHBOARD_NAME_MAX_LENGTH}
+							className={styles.dashboardTitleInput}
+							onChange={(e): void => onDraftChange(e.target.value)}
+							onKeyDown={onKeyDown}
+						/>
+						<Button
+							type="button"
+							variant="solid"
+							color="primary"
+							size="sm"
+							icon
+							aria-label="Save title"
+							testId="dashboard-title-save"
+							onClick={onCommit}
+						>
+							<Check size={14} />
+						</Button>
+						<Button
+							type="button"
+							variant="outlined"
+							color="secondary"
+							size="sm"
+							icon
+							aria-label="Cancel title edit"
+							testId="dashboard-title-cancel"
+							onClick={onCancel}
+						>
+							<X size={14} />
+						</Button>
+					</div>
+				) : (
+					<>
+						<Tooltip title={title}>
+							<Typography.Text
+								className={cx(styles.dashboardTitle, {
+									[styles.dashboardTitleHover]: canEdit,
+								})}
+								data-testid="dashboard-title"
+								onClick={canEdit ? onStartEdit : undefined}
+							>
+								{title}
+							</Typography.Text>
+						</Tooltip>
+						<CopyButton
+							value={dashboardId}
+							ariaLabel="Copy dashboard ID"
+							testId="dashboard-copy-id"
+							onCopy={handleCopyId}
+						/>
+					</>
+				))}
+
 			{hasDescription && (
 				<Tooltip
 					side="bottom"
@@ -205,7 +202,7 @@ function DashboardInfo({
 				</Tooltip>
 			)}

-			{isPublicDashboard && (
+			{show.publicBadge && isPublicDashboard && (
 				<Tooltip title="This dashboard is publicly accessible. Click to open the public page.">
 					<Button
 						type="button"
@@ -222,7 +219,7 @@ function DashboardInfo({
 				</Tooltip>
 			)}

-			{showLockToggle && (
+			{show.lock && showLockToggle && (
 				<Tooltip title={onToggleLock ? lockTooltip : undefined}>
 					<Button
 						disabledTooltip={lockTooltip}
--- a/frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/DashboardInfo/utils.ts
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/DashboardInfo/utils.ts
@@ -0,0 +1,19 @@
+// Without a toggle, say why it can't be toggled rather than only restating the
+// lock state.
+export function getLockTooltip({
+	isLocked,
+	canToggle,
+	disabledReason,
+}: {
+	isLocked: boolean;
+	canToggle: boolean;
+	disabledReason?: string;
+}): string {
+	if (canToggle) {
+		return isLocked ? 'Locked — click to unlock' : 'Unlocked — click to lock';
+	}
+	if (disabledReason) {
+		return disabledReason;
+	}
+	return isLocked ? 'This dashboard is locked' : 'This dashboard is unlocked';
+}
--- a/frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/tests/DashboardPageToolbar.controls.test.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/tests/DashboardPageToolbar.controls.test.tsx
@@ -0,0 +1,138 @@
+import type { FullScreenHandle } from 'react-full-screen';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import { useDashboardLockPermission } from 'hooks/dashboards/useDashboardLockPermission';
+import { render, screen } from 'tests/test-utils';
+
+import type { DashboardControlsInput } from '../../controls/types';
+
+import { usePublicDashboardMeta } from '../../DashboardSettings/PublicDashboard/usePublicDashboardMeta';
+import { useDashboardStore } from '../../store/useDashboardStore';
+import DashboardPageToolbar from '../index';
+
+const dashboard = {
+	id: 'dash-1',
+	locked: true,
+	source: 'user',
+	spec: {
+		display: { name: 'Checkout' },
+		panels: {},
+		layouts: [],
+		variables: [],
+	},
+} as unknown as DashboardtypesGettableDashboardV2DTO;
+
+const handle = { enter: jest.fn() } as unknown as FullScreenHandle;
+
+jest.mock('../DashboardActions/DashboardActions', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="dashboard-actions" />,
+}));
+jest.mock('../DashboardInfo/DashboardInfo', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="dashboard-info" />,
+}));
+jest.mock('../../VariablesBar/VariablesBar', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="variables-bar" />,
+}));
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="time-selection" />,
+}));
+jest.mock(
+	'../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal',
+	() => ({ __esModule: true, default: (): null => null }),
+);
+jest.mock('../../hooks/useCreatePanel', () => ({
+	useCreatePanel: (): unknown => ({
+		isPickerOpen: false,
+		openPicker: jest.fn(),
+		closePicker: jest.fn(),
+		createPanel: jest.fn(),
+		targetLayoutIndex: 0,
+	}),
+}));
+jest.mock('../../hooks/useOptimisticPatch', () => ({
+	useOptimisticPatch: (): unknown => ({ patchAsync: jest.fn() }),
+}));
+jest.mock('hooks/dashboards/useToggleDashboardLock', () => ({
+	useToggleDashboardLock: (): unknown => ({ toggleLock: jest.fn() }),
+}));
+jest.mock('hooks/dashboards/useDashboardLockPermission', () => ({
+	useDashboardLockPermission: jest.fn(() => ({
+		canToggleLock: false,
+		isLoading: false,
+		disabledTooltip: '',
+	})),
+}));
+jest.mock(
+	'../../DashboardSettings/PublicDashboard/usePublicDashboardMeta',
+	() => ({
+		usePublicDashboardMeta: jest.fn(() => ({
+			isPublic: false,
+			publicMeta: undefined,
+		})),
+	}),
+);
+
+function renderToolbar(
+	ctx: { readOnly?: boolean; controls?: DashboardControlsInput } = {},
+): void {
+	useDashboardStore
+		.getState()
+		.setEditContext({ dashboardId: 'dash-1', refetch: jest.fn(), ...ctx });
+	render(<DashboardPageToolbar dashboard={dashboard} handle={handle} />);
+}
+
+describe('DashboardPageToolbar - controls', () => {
+	afterEach(() => {
+		useDashboardStore
+			.getState()
+			.setEditContext({ dashboardId: '', refetch: jest.fn() });
+		jest.clearAllMocks();
+	});
+
+	it('renders every row and checks lock + share by default', () => {
+		renderToolbar();
+
+		expect(screen.getByTestId('dashboard-info')).toBeInTheDocument();
+		expect(screen.getByTestId('dashboard-actions')).toBeInTheDocument();
+		expect(screen.getByTestId('time-selection')).toBeInTheDocument();
+		expect(jest.mocked(useDashboardLockPermission)).toHaveBeenCalledWith(
+			expect.objectContaining({ enabled: true }),
+		);
+		expect(jest.mocked(usePublicDashboardMeta)).toHaveBeenCalledWith('dash-1', {
+			enabled: true,
+		});
+	});
+
+	it('skips the lock permission check on a read-only mount', () => {
+		renderToolbar({ readOnly: true });
+
+		expect(jest.mocked(useDashboardLockPermission)).toHaveBeenCalledWith(
+			expect.objectContaining({ enabled: false }),
+		);
+	});
+
+	it('drops the title row and actions the host hides, and their requests', () => {
+		renderToolbar({
+			readOnly: true,
+			controls: { title: false, dashboardActions: false },
+		});
+
+		expect(screen.queryByTestId('dashboard-info')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('dashboard-actions')).not.toBeInTheDocument();
+		expect(jest.mocked(usePublicDashboardMeta)).toHaveBeenCalledWith('dash-1', {
+			enabled: false,
+		});
+	});
+
+	it('hides the time range and keeps the variables bar mounted but hidden', () => {
+		renderToolbar({
+			controls: { toolbar: { timeRange: false, variables: false } },
+		});
+
+		expect(screen.queryByTestId('time-selection')).not.toBeInTheDocument();
+		expect(screen.getByTestId('variables-bar')).not.toBeVisible();
+	});
+});
--- a/frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/index.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/index.tsx
@@ -17,6 +17,7 @@ import { getAbsoluteUrl } from 'utils/basePath';

 import { useCreatePanel } from '../hooks/useCreatePanel';
 import { useOptimisticPatch } from '../hooks/useOptimisticPatch';
+import { useDashboardControlGroup } from '../controls/useDashboardControlGroup';
 import { usePublicDashboardMeta } from '../DashboardSettings/PublicDashboard/usePublicDashboardMeta';
 import PanelTypeSelectionModal from '../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import DashboardActions from './DashboardActions/DashboardActions';
@@ -56,6 +57,11 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 		[dashboard.tags],
 	);

+	const showTitle = useDashboardControlGroup('title');
+	const showActions = useDashboardControlGroup('dashboardActions');
+	const showToolbar = useDashboardControlGroup('toolbar');
+	const hasTitleRow = Object.values(showTitle).some(Boolean);
+	const hasActions = Object.values(showActions).some(Boolean);
 	const { showErrorModal } = useErrorModal();
 	const { patchAsync } = useOptimisticPatch();
 	const {
@@ -71,10 +77,13 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 		useDashboardLockPermission({
 			dashboardId: id,
 			source: dashboard.source,
+			enabled: showTitle.lock || showActions.lock,
 		});

 	// Public-sharing meta (deduped react-query read); drives the header globe.
-	const { isPublic, publicMeta } = usePublicDashboardMeta(id);
+	const { isPublic, publicMeta } = usePublicDashboardMeta(id, {
+		enabled: showTitle.publicBadge,
+	});
 	const publicUrl = getAbsoluteUrl(publicMeta?.publicPath ?? '');

 	// Shared with the list's row menu — it owns the API call, the toast and the
@@ -155,48 +164,66 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {

 	return (
 		<section className={styles.dashboardPageToolbarContainer}>
-			<div className={styles.dashboardInfoWithActions}>
-				<DashboardInfo
-					title={title}
-					image={image}
-					tags={tags}
-					description={description}
-					isPublicDashboard={isPublic}
-					publicUrl={publicUrl}
-					isDashboardLocked={isDashboardLocked}
-					showLockToggle={showLockToggle}
-					onToggleLock={
-						canToggleLock
-							? (): void => handleLockDashboardToggle('header')
-							: undefined
-					}
-					lockDisabledTooltip={lockDisabledTooltip}
-					isEditing={isEditing}
-					draft={draft}
-					onDraftChange={setDraft}
-					onStartEdit={startEdit}
-					onCommit={commit}
-					onCancel={cancel}
-				/>
-				<DashboardActions
-					title={title}
-					dashboard={dashboard}
-					handle={handle}
-					isDashboardLocked={isDashboardLocked}
-					onAddPanel={onAddPanel}
-					onLockToggle={(): void => handleLockDashboardToggle('menu')}
-					onOpenRename={startEdit}
-				/>
-			</div>
+			{(hasTitleRow || hasActions) && (
+				<div className={styles.dashboardInfoWithActions}>
+					{hasTitleRow && (
+						<DashboardInfo
+							title={title}
+							image={image}
+							tags={tags}
+							description={description}
+							isPublicDashboard={isPublic}
+							publicUrl={publicUrl}
+							isDashboardLocked={isDashboardLocked}
+							showLockToggle={showLockToggle}
+							onToggleLock={
+								canToggleLock
+									? (): void => handleLockDashboardToggle('header')
+									: undefined
+							}
+							lockDisabledTooltip={lockDisabledTooltip}
+							isEditing={isEditing}
+							draft={draft}
+							onDraftChange={setDraft}
+							onStartEdit={startEdit}
+							onCommit={commit}
+							onCancel={cancel}
+						/>
+					)}
+					{hasActions && (
+						<DashboardActions
+							title={title}
+							dashboard={dashboard}
+							handle={handle}
+							isDashboardLocked={isDashboardLocked}
+							onAddPanel={onAddPanel}
+							onLockToggle={(): void => handleLockDashboardToggle('menu')}
+							onOpenRename={startEdit}
+						/>
+					)}
+				</div>
+			)}

 			{/* Row 2: the time selector floats top-right (declared first so the
 			    variables bar's content wraps around it); the variables bar
 			    collapses to one line and, when expanded, wraps full-width under it. */}
 			<div className={styles.toolbarRow}>
-				<div className={styles.timeCluster}>
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-				</div>
-				<VariablesBar dashboard={dashboard} />
+				{showToolbar.timeRange && (
+					<div className={styles.timeCluster}>
+						<DateTimeSelectionV2
+							showAutoRefresh={showToolbar.autoRefresh}
+							hideShareModal
+						/>
+					</div>
+				)}
+				{showToolbar.variables ? (
+					<VariablesBar dashboard={dashboard} />
+				) : (
+					// Still mounted: the selectors seed and auto-select the values panels query with.
+					<div hidden>
+						<VariablesBar dashboard={dashboard} />
+					</div>
+				)}
 			</div>
 			<PanelTypeSelectionModal
 				open={isPickerOpen}
--- a/frontend/src/pages/DashboardPage/DashboardContainer/DashboardSettings/PublicDashboard/usePublicDashboardMeta.ts
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/DashboardSettings/PublicDashboard/usePublicDashboardMeta.ts
@@ -26,9 +26,13 @@ const PUBLIC_META_STALE_TIME = 5 * 60 * 1000;
 */
 export function usePublicDashboardMeta(
 	dashboardId: string,
+	options?: { enabled?: boolean },
 ): UsePublicDashboardMetaReturn {
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
-	const enabled = !!dashboardId && (isCloudUser || isEnterpriseSelfHostedUser);
+	const enabled =
+		(options?.enabled ?? true) &&
+		!!dashboardId &&
+		(isCloudUser || isEnterpriseSelfHostedUser);

 	const { data, isLoading, isFetching, error, refetch } = useGetPublicDashboard(
 		{ id: dashboardId },
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/tests/useContextLinkVariables.test.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/tests/useContextLinkVariables.test.tsx
@@ -2,33 +2,17 @@ import { renderHook } from '@testing-library/react';

 import { useContextLinkVariables } from '../useContextLinkVariables';

-const mockUseGetDashboardV2 = jest.fn();
+const mockUseDashboardVariableNames = jest.fn();
 const mockUseQueryBuilder = jest.fn();

-jest.mock(
-	'pages/DashboardPage/DashboardContainer/store/useDashboardStore',
-	() => ({
-		useDashboardStore: (
-			selector: (s: { dashboardId: string }) => unknown,
-		): unknown => selector({ dashboardId: 'dash-1' }),
-	}),
-);
-
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: (): unknown => mockUseQueryBuilder(),
 }));

-jest.mock('api/generated/services/dashboard', () => ({
-	useGetDashboardV2: (): unknown => mockUseGetDashboardV2(),
-}));
-
-// dtoToFormModel is exercised by its own suite; here we only need it to surface a name.
 jest.mock(
-	'pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/variableAdapters',
+	'pages/DashboardPage/DashboardContainer/hooks/useDashboardVariableNames',
 	() => ({
-		dtoToFormModel: (dto: { name: string }): { name: string } => ({
-			name: dto.name,
-		}),
+		useDashboardVariableNames: (): unknown => mockUseDashboardVariableNames(),
 	}),
 );

@@ -45,11 +29,7 @@ describe('useContextLinkVariables', () => {
 				},
 			},
 		});
-		mockUseGetDashboardV2.mockReturnValue({
-			data: {
-				data: { spec: { variables: [{ name: 'region' }, { name: 'tier' }] } },
-			},
-		});
+		mockUseDashboardVariableNames.mockReturnValue(['region', 'tier']);
 	});

 	it('orders globals, then _prefixed query fields (deduped), then dashboard vars', () => {
@@ -69,9 +49,7 @@ describe('useContextLinkVariables', () => {
 		mockUseQueryBuilder.mockReturnValue({
 			currentQuery: { builder: { queryData: [] } },
 		});
-		// Loaded dashboard with no variables — useDashboardFetchRequired guarantees the
-		// dashboard is present, so the empty case is an empty spec, not `undefined`.
-		mockUseGetDashboardV2.mockReturnValue({ data: { data: { spec: {} } } });
+		mockUseDashboardVariableNames.mockReturnValue([]);

 		const { result } = renderHook(() => useContextLinkVariables());

--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/tests/usePanelActionItems.test.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/tests/usePanelActionItems.test.tsx
@@ -10,6 +10,7 @@ import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
 import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/queryV5/types';

 import type { DashboardSection } from '../../../../utils';
+import { useDashboardStore } from '../../../../store/useDashboardStore';
 import { usePanelActionItems } from '../usePanelActionItems';

 /** Keys of the disabled items, in order. */
@@ -494,4 +495,43 @@ describe('usePanelActionItems', () => {
 		click(actionRow(result.current.items, 'create-alert'));
 		expect(mockCreateAlert).toHaveBeenCalledWith(mockPanel, 'panel-1');
 	});
+
+	describe('host controls', () => {
+		afterEach(() => {
+			useDashboardStore
+				.getState()
+				.setEditContext({ dashboardId: '', refetch: jest.fn() });
+		});
+
+		it('drops every writing action on a read-only mount', () => {
+			useDashboardStore.getState().setEditContext({
+				dashboardId: 'dash-1',
+				refetch: jest.fn(),
+				readOnly: true,
+			});
+
+			const { result } = renderHook(() => usePanelActionItems(baseArgs));
+
+			expect(itemKeys(result.current)).toStrictEqual([
+				'view-panel',
+				'separator',
+				'download',
+				'create-alert',
+			]);
+		});
+
+		it('drops the actions the host hides', () => {
+			useDashboardStore.getState().setEditContext({
+				dashboardId: 'dash-1',
+				refetch: jest.fn(),
+				controls: { panelActions: { createAlert: false, delete: false } },
+			});
+
+			const { result } = renderHook(() => usePanelActionItems(baseArgs));
+
+			expect(itemKeys(result.current)).not.toContain('create-alert');
+			expect(itemKeys(result.current)).not.toContain('delete-panel');
+			expect(itemKeys(result.current)).toContain('edit-panel');
+		});
+	});
 });
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/usePanelActionItems.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/usePanelActionItems.tsx
@@ -29,6 +29,7 @@ import type { AuthZDropdownItemType } from 'lib/authz/components/AuthZDropdown/t
 import { blockedBy } from 'lib/authz/components/AuthZDropdown/utils';
 import { getBlockedPanelActions } from '../utils/getBlockedPanelActions';
 import { useDashboardEditContext } from '../../../hooks/useDashboardEditContext';
+import { useDashboardControlGroup } from '../../../controls/useDashboardControlGroup';

 // Stable fallback so renders without layout context don't churn the mutation
 // hooks' deps (a fresh [] each render would re-create their callbacks).
@@ -66,6 +67,7 @@ export function usePanelActionItems({
 	const blocked = useMemo(() => getBlockedPanelActions(panel), [panel]);
 	const { isEditable, editChecks, editDisabledTooltip } =
 		useDashboardEditContext();
+	const show = useDashboardControlGroup('panelActions');
 	const openPanelEditor = useOpenPanelEditor();
 	const createAlert = useCreateAlertFromPanel();
 	const { openView } = useViewPanel();
@@ -103,7 +105,7 @@ export function usePanelActionItems({
 		const editGate = { checks: editChecks, ...blockedBy(editDisabledTooltip) };

 		const panelGroup: AuthZDropdownItemType[] = [];
-		if (panelCapabilities.view) {
+		if (show.view && panelCapabilities.view) {
 			panelGroup.push({
 				type: 'item',
 				value: 'view-panel',
@@ -112,7 +114,7 @@ export function usePanelActionItems({
 				onClick: (): void => openView(panelId, panel),
 			});
 		}
-		if (panelCapabilities.edit) {
+		if (show.edit && panelCapabilities.edit) {
 			panelGroup.push({
 				type: 'item',
 				value: 'edit-panel',
@@ -122,7 +124,7 @@ export function usePanelActionItems({
 				onClick: (): void => openPanelEditor(panelId, { panel }),
 			});
 		}
-		if (panelCapabilities.clone) {
+		if (show.clone && panelCapabilities.clone) {
 			// Needs section context to place the copy; disabled without it.
 			panelGroup.push({
 				type: 'item',
@@ -142,13 +144,13 @@ export function usePanelActionItems({
 		}

 		const dataGroup: AuthZDropdownItemType[] = [];
-		if (downloadItem) {
+		if (show.download && downloadItem) {
 			dataGroup.push(downloadItem);
 		}

 		// Create Alerts opens a new tab and never mutates the dashboard, so —
 		// unlike edit/clone — it isn't gated on editability (V1 parity).
-		if (panelCapabilities.createAlert) {
+		if (show.createAlert && panelCapabilities.createAlert) {
 			dataGroup.push({
 				type: 'item',
 				value: 'create-alert',
@@ -159,8 +161,9 @@ export function usePanelActionItems({
 			});
 		}

-		const moveGroup: AuthZDropdownItemType[] =
-			isEditable && panelActions
+		const moveGroup: AuthZDropdownItemType[] = !show.move
+			? []
+			: isEditable && panelActions
 				? buildMoveItems({
 						sections,
 						currentLayoutIndex: panelActions.currentLayoutIndex,
@@ -177,17 +180,19 @@ export function usePanelActionItems({
 						},
 					];

-		const deleteGroup: AuthZDropdownItemType[] = [
-			{
-				type: 'item',
-				value: 'delete-panel',
-				label: 'Delete panel',
-				prefix: <Trash2 size={14} />,
-				danger: true,
-				...editGate,
-				onClick: (): void => requestDelete(),
-			},
-		];
+		const deleteGroup: AuthZDropdownItemType[] = !show.delete
+			? []
+			: [
+					{
+						type: 'item',
+						value: 'delete-panel',
+						label: 'Delete panel',
+						prefix: <Trash2 size={14} />,
+						danger: true,
+						...editGate,
+						onClick: (): void => requestDelete(),
+					},
+				];

 		return [panelGroup, dataGroup, moveGroup, deleteGroup]
 			.filter((group) => group.length > 0)
@@ -197,6 +202,7 @@ export function usePanelActionItems({
 					: [{ type: 'separator', value: `separator-${index}` }, ...group],
 			);
 	}, [
+		show,
 		isEditable,
 		editChecks,
 		editDisabledTooltip,
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModalHeader.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModalHeader.tsx
@@ -14,6 +14,7 @@ import { EQueryType } from 'types/common/dashboard';
 import styles from './ViewPanelModal.module.scss';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { useDashboardEditContext } from '../../../hooks/useDashboardEditContext';
+import { useDashboardControl } from '../../../controls/useDashboardControl';

 interface ViewPanelModalHeaderBaseProps {
 	onSwitchToEdit: () => void;
@@ -70,6 +71,7 @@ function ViewPanelModalHeader(props: ViewPanelModalHeaderProps): JSX.Element {
 		editChecks,
 		editDisabledTooltip,
 	} = useDashboardEditContext();
+	const showSwitchToEdit = useDashboardControl('viewModal.switchToEdit');
 	// Same capabilities-guarded options as the editor's PanelTypeSwitcher, so the two
 	// selectors disable the same kinds (e.g. List under PromQL, metrics-only kinds).
 	const panelTypeItems = usePanelTypeSelectItems({
@@ -87,20 +89,22 @@ function ViewPanelModalHeader(props: ViewPanelModalHeaderProps): JSX.Element {
 					onChange={onChangePanelKind}
 				/>
 			</div>
-			<AuthZTooltip checks={editChecks} disabledTooltip={editDisabledTooltip}>
-				<Button
-					disabledTooltip={undefined}
-					size="md"
-					variant="outlined"
-					color="secondary"
-					prefix={<PenLine />}
-					disabled={!canSwitchToEdit}
-					onClick={onSwitchToEdit}
-					testId="view-panel-switch-to-edit"
-				>
-					Switch to Edit Mode
-				</Button>
-			</AuthZTooltip>
+			{showSwitchToEdit && (
+				<AuthZTooltip checks={editChecks} disabledTooltip={editDisabledTooltip}>
+					<Button
+						disabledTooltip={undefined}
+						size="md"
+						variant="outlined"
+						color="secondary"
+						prefix={<PenLine />}
+						disabled={!canSwitchToEdit}
+						onClick={onSwitchToEdit}
+						testId="view-panel-switch-to-edit"
+					>
+						Switch to Edit Mode
+					</Button>
+				</AuthZTooltip>
+			)}
 			{query && (
 				<Button
 					size="md"
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/tests/ViewPanelModalHeader.controls.test.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/tests/ViewPanelModalHeader.controls.test.tsx
@@ -0,0 +1,71 @@
+import { render, screen } from 'tests/test-utils';
+
+import { useDashboardStore } from '../../../../store/useDashboardStore';
+import ViewPanelModalHeader from '../ViewPanelModalHeader';
+import type { DashboardControlsInput } from '../../../../controls/types';
+
+jest.mock(
+	'pages/DashboardPage/DashboardContainer/hooks/useDashboardEditContext',
+	() => ({
+		useDashboardEditContext: (): unknown => ({
+			isEditable: true,
+			editChecks: [],
+			editDisabledTooltip: '',
+		}),
+	}),
+);
+jest.mock(
+	'pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/usePanelTypeSelectItems',
+	() => ({ usePanelTypeSelectItems: (): unknown[] => [] }),
+);
+
+function renderHeader(
+	readOnly: boolean,
+	controls?: DashboardControlsInput,
+): void {
+	useDashboardStore.getState().setEditContext({
+		dashboardId: 'dash-1',
+		refetch: jest.fn(),
+		readOnly,
+		controls,
+	});
+	render(
+		<ViewPanelModalHeader
+			mode="static"
+			panelKind="signoz/TimeSeriesPanel"
+			onChangePanelKind={jest.fn()}
+			onSwitchToEdit={jest.fn()}
+		/>,
+	);
+}
+
+describe('ViewPanelModalHeader - controls', () => {
+	afterEach(() => {
+		useDashboardStore
+			.getState()
+			.setEditContext({ dashboardId: '', refetch: jest.fn() });
+	});
+
+	it('offers Switch to Edit Mode on an editable mount', () => {
+		renderHeader(false);
+
+		expect(screen.getByTestId('view-panel-switch-to-edit')).toBeInTheDocument();
+	});
+
+	it('hides Switch to Edit Mode on a read-only mount', () => {
+		renderHeader(true);
+
+		expect(screen.getByTestId('view-panel-type-selector')).toBeInTheDocument();
+		expect(
+			screen.queryByTestId('view-panel-switch-to-edit'),
+		).not.toBeInTheDocument();
+	});
+
+	it('hides Switch to Edit Mode when the host hides it', () => {
+		renderHeader(false, { viewModal: false });
+
+		expect(
+			screen.queryByTestId('view-panel-switch-to-edit'),
+		).not.toBeInTheDocument();
+	});
+});
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/tests/useDrilldownDashboardVariables.test.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/tests/useDrilldownDashboardVariables.test.tsx
@@ -24,11 +24,16 @@ const mockPatchAsync = jest.fn().mockResolvedValue(undefined);
 const DYNAMIC_KIND = 'signoz/DynamicVariable';
 const QUERY_KIND = 'signoz/QueryVariable';

-jest.mock('api/generated/services/dashboard', () => ({
-	useGetDashboardV2: (): unknown => ({
-		data: { data: { spec: { variables: mockVariables } } },
+jest.mock(
+	'pages/DashboardPage/DashboardContainer/hooks/useDashboardFetchRequired',
+	() => ({
+		useDashboardFetchRequired: (): unknown => ({
+			dashboard: { spec: { variables: mockVariables } },
+			variables: mockVariables,
+			refetch: jest.fn(),
+		}),
 	}),
-}));
+);
 jest.mock(
 	'pages/DashboardPage/DashboardContainer/hooks/useOptimisticPatch',
 	() => ({
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/tests/usePanelInteractions.test.ts
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/tests/usePanelInteractions.test.ts
@@ -0,0 +1,51 @@
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import { AllTheProviders, renderHook } from 'tests/test-utils';
+
+import { CHARTS_ONLY } from '../../../../controls/presets';
+import type { DashboardControlsInput } from '../../../../controls/types';
+import { useDashboardStore } from '../../../../store/useDashboardStore';
+import { usePanelInteractions } from '../usePanelInteractions';
+
+function dragSelect(controls?: DashboardControlsInput): void {
+	useDashboardStore
+		.getState()
+		.setEditContext({ dashboardId: 'd1', refetch: jest.fn(), controls });
+	const { result } = renderHook(() => usePanelInteractions(), {
+		wrapper: AllTheProviders,
+	});
+	result.current.onDragSelect(1_000, 2_000);
+}
+
+describe('usePanelInteractions drag-to-zoom', () => {
+	afterEach(() => {
+		useDashboardStore
+			.getState()
+			.setEditContext({ dashboardId: '', refetch: jest.fn() });
+	});
+
+	it('writes the dragged range to the URL', () => {
+		dragSelect();
+
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			expect.stringContaining('startTime=1000&endTime=2000'),
+		);
+	});
+
+	it('does nothing when the host turns zoom off', () => {
+		dragSelect({ panelActions: { zoom: false } });
+
+		expect(safeNavigateMock).not.toHaveBeenCalled();
+	});
+
+	it('still zooms when the host hides the toolbar but leaves zoom on', () => {
+		dragSelect({ toolbar: false });
+
+		expect(safeNavigateMock).toHaveBeenCalled();
+	});
+
+	it('still zooms on a charts-only mount', () => {
+		dragSelect(CHARTS_ONLY);
+
+		expect(safeNavigateMock).toHaveBeenCalled();
+	});
+});
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldown.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldown.tsx
@@ -33,6 +33,7 @@ import { useDrilldownCoordinates } from './useDrilldownCoordinates';
 import { useDrilldownDashboardVariables } from './useDrilldownDashboardVariables';
 import { useDrilldownFilter } from './useDrilldownFilter';
 import { useResolvedDrilldownQuery } from './useResolvedDrilldownQuery';
+import { useDashboardControl } from 'pages/DashboardPage/DashboardContainer/controls/useDashboardControl';
 import { useViewPanel } from './useViewPanel';

 /** Which menu the popover shows; extend as submenus are added (e.g. dashboard variables). */
@@ -84,12 +85,14 @@ export function useDrilldown(

 	// Drilldown only for builder-authored panels with a query to drill into (PromQL /
 	// ClickHouse have no builder context to refine).
+	const showDrilldown = useDashboardControl('panelActions.drilldown');
 	const enableDrillDown = useMemo(
 		() =>
+			showDrilldown &&
 			getPanelDefinition(kind).actions.drilldown &&
 			getPanelQueryType(panel) === EQueryType.QUERY_BUILDER &&
 			getBuilderQueries(queries).length > 0,
-		[kind, panel, queries],
+		[showDrilldown, kind, panel, queries],
 	);

 	const v1Query = useMemo(
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions.ts
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions.ts
@@ -13,6 +13,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import logEvent from 'api/common/logEvent';
 import { DashboardDetailEvents } from 'pages/DashboardPage/constants/events';
 import { UpdateTimeInterval } from 'store/actions';
+import { useDashboardControl } from 'pages/DashboardPage/DashboardContainer/controls/useDashboardControl';

 export interface PanelInteractions {
 	/** Drag-select a chart range → write it to the URL + global time so every panel re-fetches the same range. */
@@ -43,8 +44,12 @@ export function usePanelInteractions(): PanelInteractions {
 		[syncMode, syncFilterMode, dashboardId],
 	);

+	const canZoom = useDashboardControl('panelActions.zoom');
 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
+			if (!canZoom) {
+				return;
+			}
 			const startTimestamp = Math.trunc(start);
 			const endTimestamp = Math.trunc(end);

@@ -57,7 +62,7 @@ export function usePanelInteractions(): PanelInteractions {
 				void logEvent(DashboardDetailEvents.PanelZoomed, { context: 'panel' });
 			}
 		},
-		[dispatch, pathname, safeNavigate, urlQuery],
+		[canZoom, dispatch, pathname, safeNavigate, urlQuery],
 	);

 	return { onDragSelect, dashboardPreference };
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx
@@ -8,12 +8,12 @@ import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { useCreatePanel } from '../../../hooks/useCreatePanel';
 import type { DashboardSection } from '../../../utils';
 import PanelTypeSelectionModal from '../../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
-import { useCloneSection } from '../hooks/useCloneSection';
 import { useDeleteSection } from '../hooks/useDeleteSection';
 import { usePanelPickerHighlight } from '../hooks/usePanelPickerHighlight';
 import { usePanelPickerReveal } from '../hooks/usePanelPickerReveal';
 import { useRenameSection } from '../hooks/useRenameSection';
 import { useScrollIntoView } from '../hooks/useScrollIntoView';
+import { useSectionHeaderActions } from '../hooks/useSectionHeaderActions';
 import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
 import SectionTitleModal from '../SectionTitleModal';
 import SectionGrid from '../SectionGrid/SectionGrid';
@@ -66,7 +66,14 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 		setIsDeleteOpen(false);
 	}, [deleteSection]);

-	const cloneSection = useCloneSection();
+	const openRename = useCallback((): void => setIsRenaming(true), []);
+	const openDelete = useCallback((): void => setIsDeleteOpen(true), []);
+	const actions = useSectionHeaderActions({
+		section,
+		openPicker,
+		openRename,
+		openDelete,
+	});

 	const sectionRef = useRef<HTMLDivElement>(null);
 	useScrollIntoView(section.id, sectionRef);
@@ -116,35 +123,30 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 				dragHandle={dragHandle}
 				disabledChecks={editChecks}
 				disabledTooltip={editDisabledTooltip}
-				actions={{
-					onRename: (): void => setIsRenaming(true),
-					onAddPanel: (): void => openPicker(section.layoutIndex),
-					onCloneSection: (): void => void cloneSection(section),
-					onDeleteSection: (): void => setIsDeleteOpen(true),
-				}}
+				actions={actions}
 			/>
 			{open &&
-				(section.items.length > 0 || pickerTarget ? (
-					grid
-				) : (
-					<div className={styles.emptySection}>
-						<AuthZTooltip checks={editChecks} disabledTooltip={editDisabledTooltip}>
-							<Button
-								size="md"
-								type="button"
-								variant="dashed"
-								color="secondary"
-								prefix={<Plus size="md" />}
-								onClick={
-									isEditable ? (): void => openPicker(section.layoutIndex) : undefined
-								}
-								testId={`section-add-panel-${section.id}`}
-							>
-								New Panel
-							</Button>
-						</AuthZTooltip>
-					</div>
-				))}
+				(section.items.length > 0 || pickerTarget
+					? grid
+					: actions.onAddPanel && (
+							<div className={styles.emptySection}>
+								<AuthZTooltip checks={editChecks} disabledTooltip={editDisabledTooltip}>
+									<Button
+										size="md"
+										type="button"
+										variant="dashed"
+										color="secondary"
+										prefix={<Plus size="md" />}
+										onClick={
+											isEditable ? (): void => openPicker(section.layoutIndex) : undefined
+										}
+										testId={`section-add-panel-${section.id}`}
+									>
+										New Panel
+									</Button>
+								</AuthZTooltip>
+							</div>
+						))}
 			<SectionTitleModal
 				open={isRenaming}
 				heading="Rename section"
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.tsx
@@ -25,7 +25,7 @@ function SectionActionsMenu({
 	onRename,
 	onCloneSection,
 	onDeleteSection,
-}: SectionActionsMenuProps): JSX.Element {
+}: SectionActionsMenuProps): JSX.Element | null {
 	const items = useMemo<AuthZDropdownItemType[]>(() => {
 		const gate = { checks: disabledChecks, ...blockedBy(disabledTooltip) };
 		const result: AuthZDropdownItemType[] = [];
@@ -83,6 +83,10 @@ function SectionActionsMenu({
 		onDeleteSection,
 	]);

+	if (items.length === 0) {
+		return null;
+	}
+
 	return (
 		<AuthZDropdown
 			items={items}
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx
@@ -16,12 +16,12 @@ export interface SectionDragHandle {
 	setActivatorNodeRef: (element: HTMLElement | null) => void;
 }

-/** Editable-mode section actions — present together or not at all. */
+/** Section actions; an absent one isn't offered. */
 export interface SectionHeaderActions {
-	onRename: () => void;
-	onAddPanel: () => void;
-	onCloneSection: () => void;
-	onDeleteSection: () => void;
+	onRename?: () => void;
+	onAddPanel?: () => void;
+	onCloneSection?: () => void;
+	onDeleteSection?: () => void;
 }

 interface SectionHeaderProps {
--- a/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useSectionHeaderActions.ts
+++ b/frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useSectionHeaderActions.ts
@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+import { useDashboardControlGroup } from '../../../controls/useDashboardControlGroup';
+import type { DashboardSection } from '../../../utils';
+import type { SectionHeaderActions } from '../SectionHeader/SectionHeader';
+import { useCloneSection } from './useCloneSection';
+
+/** The section menu's actions, minus the ones the host hides (`sectionActions`). */
+export function useSectionHeaderActions({
+	section,
+	openPicker,
+	openRename,
+	openDelete,
+}: {
+	section: DashboardSection;
+	openPicker: (layoutIndex: number) => void;
+	openRename: () => void;
+	openDelete: () => void;
+}): SectionHeaderActions {
+	const show = useDashboardControlGroup('sectionActions');
+	const cloneSection = useCloneSection();
+
+	return useMemo(
+		() => ({
+			onRename: show.rename ? openRename : undefined,
+			onAddPanel: show.addPanel
+				? (): void => openPicker(section.layoutIndex)
+				: undefined,
+			onCloneSection: show.clone
+				? (): void => void cloneSection(section)
+				: undefined,
+			onDeleteSection: show.delete ? openDelete : undefined,
+		}),
+		[show, openRename, openPicker, section, cloneSection, openDelete],
+	);
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Abhi Kumar	6bae4e74eb	feat(public-dashboard): render on the shared dashboard createPublicDashboardHost mounts the shared tree read-only: variables dropped, charts only, panels run on the public endpoint by key. The page opens on the shared default range and keeps the viewer's own only when the link allows changing time; a fixed link can't zoom either, so zoom becomes panelActions.zoom and CHARTS_ONLY names what it hides.	2026-11-13 02:27:15 +05:30
Abhi Kumar	3ca219d02f	feat(dashboard): let hosts choose what runs panel queries A host's queryRunner replaces only the network call; usePanelQuery still owns the window, the request and the loading states, so renderers are untouched. The runner's key joins every panel cache key, so results from different runners never mix.	2026-11-13 02:26:57 +05:30
Abhi Kumar	60c0d73143	feat(dashboard): add layout presets for host controls EMBEDDED and CHARTS_ONLY name the layouts hosts repeat; withControls merges them with overrides item by item. Presets only decide what shows: readOnly stays separate, so none can bring back a write.	2026-11-13 01:57:26 +05:30
Abhi Kumar	90f24a0fe9	Revert "feat(dashboard): let hosts set dashboard variable values" This reverts commit `908e44c1e8`.	2026-11-13 01:52:24 +05:30
Abhi Kumar	908e44c1e8	feat(dashboard): let hosts set dashboard variable values A value the host passes wins over the URL, the saved selection and the default, and its variable is hidden from the bar. The fetch engine treats such a variable as text, so a hidden query variable can't leave panels waiting on a fetch nothing will run. Page values are never saved.	2026-11-13 00:29:23 +05:30
Abhi Kumar	da94bb975f	feat(cost-meter): render the breakdown as a read-only system dashboard The eight widgets move into a backend system dashboard definition, so the page is data rather than hand-built V1 cards. The LLM overview and the breakdown share one SystemDashboard mount. The page drops its own time picker for the dashboard's, and hides panel actions.	2026-11-13 00:14:24 +05:30
Abhi Kumar	2a3a5fe4ef	refactor(dashboard): name control groups after whose actions they hide panel: false read as hiding the panels. The groups become dashboardActions, sectionActions and panelActions; header, title, toolbar and viewModal already name what they hide.	2026-11-13 00:12:29 +05:30
Abhi Kumar	d59bc57394	feat(dashboard): let hosts choose which dashboard controls render controls is grouped by area and on by default. Visibility is kept apart from readOnly: every control declares whether it writes, and a read-only mount hides the writing ones whatever the host asks for. A lockdown test renders the container with every control off and fails on any interactive element left, so a new control can't ship ungated.	2026-11-12 23:02:34 +05:30
Abhi Kumar	af995d970b	test(ai-observability): serve the system dashboard in the overview story The mock builds the response from the backend's own definition JSON, so the story can't drift from what the server serves.	2026-11-12 23:02:24 +05:30
Abhi Kumar	9d94886c9b	feat(dashboard): mount a dashboard read-only from any cache entry The host tells the store where it cached the dashboard and the subtree observes that entry, so the system dashboard no longer primes the dashboards API cache under a fake id. readOnly replaces canEditDashboardOverride: it also rejects writes and skips edit-only requests.	2026-11-12 23:01:38 +05:30
Ashwin Bhatkal	9fef8eea69	test(alerts): stop the saved views tests timing out on CI (#13481 ) #### Description - `ListAlertRules.views.test.tsx` now gives each test 15 s instead of Jest's default 5 s. Other slow page tests use the same timeout. - "deleting the active view falls back to All" is the slowest test in the file, about 0.8 s locally. CI runs the file about 4x slower (48 to 52 s against 13 s locally), which pushes it past 5 s. It failed the merge queue for [#13476](https://github.com/SigNoz/signoz/pull/13476) and [#13301](https://github.com/SigNoz/signoz/pull/13301), and two unrelated PRs. - Each step in it finishes well inside the 1 s `waitFor` limit. Only the total runs over, so this is load, not a stuck wait. #### Issues closed by this PR Closes https://github.com/SigNoz/pulse-pod/issues/726	2026-11-12 15:46:37 +00:00
Swapnil Nakade	d00471c6b9	refactor: using X-Forwarded-For header for client.address (#13543 ) <!--A few plain bullets saying what changed and why, for a reviewer skimming it - not a wall of text, not a restatement of the diff, not generated boilerplate.--> #### Description - using X-Forwarded-For header for client.address as audit log attribute <!--Reference issues using `Closes #issue-number` to enable automatic closure on merge. --> #### Issues closed by this PR closes https://github.com/SigNoz/keystone-pod/issues/213	2026-11-12 11:18:59 +00:00
Swapnil Nakade	b91f7e9835	refactor: making querier changes for audit schema (#13438 ) Some checks failed build-staging / staging (push) Has been cancelled Details build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details cacheci / tests (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details <!--A few plain bullets saying what changed and why, for a reviewer skimming it - not a wall of text, not a restatement of the diff, not generated boilerplate.--> #### Description - Audit query_range reads the new `signoz_audit` schema: `body`, `scope`, `attributes` and `resource` are JSON columns, and the old typed maps are gone. - Audit skips the attribute and resource key tables, which the new schema no longer has. Keys resolve from the intrinsic fields plus a fixed list of the resource keys the audit writer emits, so bare resource keys (e.g. `signoz.resource.kind`) work without the `resource.` prefix until keys move to `signoz_metadata`. - Raw audit rows return `resource` with flat dotted keys (`resource.attributes["service.name"]`) instead of nesting at every dot. <!--Reference issues using `Closes #issue-number` to enable automatic closure on merge. --> #### Issues closed by this PR closes https://github.com/SigNoz/keystone-pod/issues/201	2026-11-12 11:02:10 +00:00
Aditya Singh	0b48326b10	feat(api-monitoring): move the endpoint filters and group-by off v3 autocomplete (#13160 ) #### Description - The All Endpoints and Endpoint Stats pages use `QuerySearch` for the filter and `GroupByFilter` for the group-by, the query builder's own components. This removes the last v3 autocomplete calls in API monitoring. - Each drawer tab keeps its filter in `QuerySearchV2Provider`, with its own URL param (`apiMonitoringAllEndpointsExpression`, `apiMonitoringEndpointStatsExpression`), the same way infra monitoring's tabs do. The payload builders and the row-click drill-down work on the expression directly, so the items conversion is gone. The filter applies on Ctrl+Enter or when focus leaves the box. - The group-by page no longer fetches keys or caches them to resolve picks. `GroupByFilter` returns full keys, so about 80 lines of page logic are gone. - A Run button sits next to the filter on both pages. It applies the filter the same way leaving the box does, and shows a spinner while that tab's queries load. - The filter shows the drawer's locked scope as a chip in front of the text, like infra monitoring: `http_host = '<domain>' +1`, plus `http_url` on Endpoint Stats. The chip is a new opt-in `scopeClauses` prop on `QuerySearch`. - Endpoint Stats and Top 10 Errors pick the endpoint from a searchable select above the filter, not from text in the expression. The endpoint is added to the request filter when the request is built. - Removed the dead v4 fallback on the stats page and an unused zero-state payload builder. Both have had no effect since November 2025. #### Issues closed by this PR Closes https://github.com/SigNoz/events-pod/issues/143 Closes https://github.com/SigNoz/events-pod/issues/144 #### Screenshots sbshot: https://claude.ai/artifact/YLourNcAvCqsmVbtnGhH2L?sk=bVmSGZMwZ7VSmSukZLyNAw https://github.com/user-attachments/assets/bf6e9930-4d14-40f7-ba66-fe36045eb4ef url now carries filter exp https://github.com/user-attachments/assets/3310000a-d03a-4a54-9119-dde748aa6dc7 #### Additional Information - The filter applies on Ctrl+Enter or blur, not on every completed chip. Free-form expressions (OR, NOT, functions) now work. - Group-by keys store the v5 field context (`attribute` / `resource`) where v3 wrote `tag`. Keys restored from the URL carry the name only; v5 resolves them by name. - The group-by has no clear-all cross and no `+N` collapse because the shared component has neither. Every selected key stays visible with its own ×. - The filter row on the stats page now grows with a multi-line expression instead of overflowing. - Links saved with the old items-shaped filters in `apiMonitoringParams` still open. The list page moves those filters into the tab params once and drops the old keys. - The drawer starts from the list's filter when you open it by clicking a domain. A drawer opened from a link uses only the filters in the link. A cleared tab filter stays cleared across tab switches and reloads. - The user's filter is joined to the page's base filter as `base AND (filter)`, so an `OR` in the user's filter stays scoped to the domain and endpoint. - Clicking a grouped row whose group value is empty now drills down with `key NOT EXISTS`. It used to send `key = null`, which matched nothing. - A hand-typed `http_url = …` in the All Endpoints filter now carries into Endpoint Stats as part of the user's filter. Before, opening a row dropped it, so "All endpoints" showed every endpoint. Now the clause still narrows the data and the endpoint list. Other `http_url` operators behave as before. - Fixed a URL bug: writes to `apiMonitoringParams` now build on the live URL. Before, several writes in one render kept only the last one. On main, picking a time range in the drawer dropped `selectedInterval` from the URL. - `QuerySearchV2Provider` now follows URL changes after mount. Before, it read its URL param once and wrote its stored filter back over later changes, so Back and Forward did not restore a filter. Using it here exposed this. Infra monitoring's Logs, Traces, Events and Overview tabs share the provider and get the same fix. - The `QuerySearch` changes are opt-in props (`showRunButton`, `isLoadingQueries`, `scopeClauses`). Its other callers, infra monitoring included, render as before. - Storybook: the existing drawer stories (Domain Endpoints, Endpoint Stats, Service Filtered, Port Domain, Failing Domain, Top Errors) already show the picker, the Run button and the chip. No story shows the Run button busy. - Part of https://github.com/SigNoz/events-pod/issues/156.	2026-11-12 10:53:04 +00:00
ashu8912	95ee58eba5	fix(alerts): clean up the alert rules list styling (#13530 ) #### Description Visual cleanup of the alert rules list, to match the dashboards list: - Removed the gap between the tab bar and the list. - Rows use one black background instead of alternating colors. - Rule labels are neutral grey instead of red, so only firing state and severity draw attention. - Column header dividers show only on hover. #### Additional Information - The existing `Pages/Alerts/Rules` stories already render these states; no story change needed.	2026-11-12 07:56:31 +00:00
Jugal Kishore	9100d9aea6	feat(onboarding): add Pixeltable and Claude Cowork datasources (#13512 ) #### Description - Add Pixeltable and Claude Cowork cards to the onboarding data sources. Pixeltable opens the trace-first guide. Claude Cowork opens the log-event guide. - Add a Pixeltable logo (`Logos/pixeltable.svg`). Pixeltable has no vector logo, so I redrew its dot-matrix "P" on a 24x24 grid. - Add the `python celery` search keyword to the Celery card. Searching `python celery` returned no results before. - Fix the built-in and AWS integration card links. The old `/integrations?integration=...` links only opened the integrations list. They now use `/integrations/builtin-<id>` and `/integrations/aws?service=<id>`. #### Issues closed by this PR Closes SigNoz/signoz.io#4487 Closes SigNoz/signoz.io#4482 Closes SigNoz/signoz.io#3279	2026-11-12 07:45:54 +00:00
Naman Verma	3acfb0c8c0	chore: remove source and version from rules api schema (#13541 ) <!--A few plain bullets saying what changed and why, for a reviewer skimming it - not a wall of text, not a restatement of the diff, not generated boilerplate.--> #### Description We don't want external clients like Terraform or AI Agents to be sending these fields anymore cuz they are useless. That's why we need to remove these from the schema. But sadly, we probably have users who send these in their scripts, and our rules APIs don't accept fields not in the struct, so these fields stay in the struct. <!--Reference issues using `Closes #issue-number` to enable automatic closure on merge. --> #### Issues closed by this PR Closes https://github.com/SigNoz/pulse-pod/issues/731	2026-11-12 08:29:38 +00:00
Nikhil Mantri	75994b0d6f	fix(alert-channel-integrations): describe jira auth as a flat object in the openapi spec (#13540 ) #### Description - The Terraform provider is generated from our OpenAPI spec. #13424 described the Jira channel `auth` as a `oneOf` (cloud or self-hosted) with no discriminator, which the generator cannot map, so the notification channel resource stopped building. - `deployment` sits next to `auth`, not inside it, so it cannot act as the discriminator. - This PR describes `auth` in the spec as one object with optional `email`, `apiToken` and `pat`. Each description says which deployment needs it. - The Go type now matches the spec: one auth struct replaces the two per-deployment structs, and the fields are validated against `deployment`. - The accepted payload, the responses and stored channels stay the same, so no migration is needed. #### Issues closed by this PR Closes SigNoz/pulse-pod#728 #### Additional Information - Problem and options doc: https://app.notion.com/p/415fcc6bcd1980a0869fd5ed2e19ca3c - The spec no longer marks the auth fields as required per deployment. The server still rejects a wrong or missing combination with a 400. - A field of the other deployment (for example `pat` on a cloud channel) now gets an explicit error message instead of the unknown field one. It is rejected only when it is not blank. - The generated spec and API types are in a separate commit.	2026-11-12 08:13:20 +00:00
				`@@ -0,0 +1 @@`
				<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="1.25" y="1.25" width="21.5" height="21.5" rx="3.5" fill="none" stroke="#7A8291" stroke-width="1.5"/><g fill="#7A8291"><circle cx="7" cy="4.5" r="1.05"/><circle cx="9.5" cy="4.5" r="1.05"/><circle cx="12" cy="4.5" r="1.05"/><circle cx="14.5" cy="4.5" r="1.05"/><circle cx="7" cy="7" r="1.05"/><circle cx="17" cy="7" r="1.05"/><circle cx="7" cy="9.5" r="1.05"/><circle cx="17" cy="9.5" r="1.05"/><circle cx="7" cy="12" r="1.05"/><circle cx="9.5" cy="12" r="1.05"/><circle cx="12" cy="12" r="1.05"/><circle cx="14.5" cy="12" r="1.05"/><circle cx="7" cy="14.5" r="1.05"/><circle cx="7" cy="17" r="1.05"/><circle cx="7" cy="19.5" r="1.05"/></g></svg>