Merge branch 'main' into issue-4960

* feat(dashboards-v2): add context-link variable + URL-param building blocks

Reusable primitives for the V2 context-link editor, kept separate from the
UI wiring:

- types: VariableItem / UrlParam / VariableSource
- utils: query-string <-> key/value param parsing, cursor-aware {{variable}}
  insertion, and URL validation (http(s)://, /path, or {{var}}/)
- VariablesPopover: autocomplete that lists {{variables}} grouped by source
  and inserts the picked token at the cursor
- useContextLinkVariables: self-contained hook sourcing the offered variables
  (global timestamps, per-query groupBy fields as _<key>, dashboard variables)
  from the query-builder provider + dashboard store, no prop threading

Covered by utils + hook unit tests.

* feat(dashboards-v2): rework context-link editor into a list + modal

The section is now a list of saved links (label + URL with edit/delete),
with add/edit handled in a modal (@signozhq/ui DialogWrapper) instead of the
cramped inline rows.

The modal carries V1's full authoring UX:
- label + URL with {{variable}} autocomplete and inline validation
- a key/value URL-parameters editor synced to the URL query string
- an "open in new tab" toggle; Save is gated on a non-empty, valid URL

Saved links set renderVariables so consumers interpolate the URL at
click-time. The variables popover renders with withPortal=false so it stays
inside the modal (radix's modal disables pointer events on portalled content).

* chore: pr review fixes

* refactor(dashboards-v2): split dashboard fetch into fetch-only hook + required accessor

- useDashboardFetch (renamed from useDashboardV2) now exposes only the raw
  dashboard plus fetch lifecycle; spec derivation moves out of it.
- Add useDashboardFetchRequired: reads the active dashboardId from the store,
  reuses the shared react-query cache entry, throws when the dashboard is
  missing, and derives spec collections (variables). Also exposes refetch.
- Enforce the split with a new signoz/no-dashboard-fetch-outside-root lint rule,
  allowlisted for the two root pages and the required hook.
- Point the context-link variables hook at useDashboardFetchRequired and expand
  the VariableSource JSDoc.

* chore: fixed fmt

conf/example.yaml

@@ -155,8 +155,8 @@ querier:
   cache_ttl: 168h
   # The interval for recent data that should not be cached.
   flux_interval: 5m
-  # The maximum number of concurrent queries for missing ranges.
-  max_concurrent_queries: 4
+  # The maximum number of queries a single query range request runs at once.
+  max_concurrent_queries: 8
   # When filtering logs by trace_id, clamp the query window to the trace time
   # range with padding to include slightly delayed log exports. Logs only; set
   # to 0 to disable.

docs/api/openapi.yml

@@ -2917,6 +2917,13 @@ components:
         publicDashboard:
           $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
       type: object
+    DashboardtypesGettablePublicDashboardDataV2:
+      properties:
+        dashboard:
+          $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+        publicDashboard:
+          $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
+      type: object
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -5224,6 +5231,16 @@ components:
       - offset
       - limit
       type: object
+    LlmpricingruletypesGettableUnmappedModels:
+      properties:
+        items:
+          items:
+            $ref: '#/components/schemas/LlmpricingruletypesUnmappedModel'
+          nullable: true
+          type: array
+      required:
+      - items
+      type: object
     LlmpricingruletypesLLMPricingCacheCosts:
       properties:
         mode:
@@ -5313,6 +5330,19 @@ components:
         type: string
       nullable: true
       type: array
+    LlmpricingruletypesUnmappedModel:
+      properties:
+        modelName:
+          type: string
+        provider:
+          type: string
+        spanCount:
+          minimum: 0
+          type: integer
+      required:
+      - modelName
+      - spanCount
+      type: object
     LlmpricingruletypesUpdatableLLMPricingRule:
       properties:
         enabled:
@@ -11190,6 +11220,60 @@ paths:
       summary: Get a pricing rule
       tags:
       - llmpricingrules
+  /api/v1/llm_pricing_rules/unmapped_models:
+    get:
+      deprecated: false
+      description: Returns models seen in the last hour of trace data (gen_ai.request.model)
+        that no pricing rule pattern matches, so the user can add them to an existing
+        rule or create a new one.
+      operationId: ListUnmappedLLMModels
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/LlmpricingruletypesGettableUnmappedModels'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List unmapped models
+      tags:
+      - llmpricingrules
   /api/v1/logs/promote_paths:
     get:
       deprecated: false
@@ -17441,6 +17525,138 @@ paths:
       summary: Update my organization
       tags:
       - orgs
+  /api/v2/public/dashboards/{id}:
+    get:
+      deprecated: false
+      description: This endpoint returns the sanitized v2-shape dashboard data for
+        public access. Each panel query is reduced to a safe field subset, so filters
+        and raw query strings are not exposed.
+      operationId: GetPublicDashboardDataV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettablePublicDashboardDataV2'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - anonymous:
+        - public-dashboard:read
+      summary: Get public dashboard data (v2)
+      tags:
+      - dashboard
+  /api/v2/public/dashboards/{id}/panels/{key}/query_range:
+    get:
+      deprecated: false
+      description: This endpoint returns query range results for a panel of a v2-shape
+        public dashboard. The panel is addressed by its key in spec.panels.
+      operationId: GetPublicDashboardPanelQueryRangeV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: key
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangeResponse'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - anonymous:
+        - public-dashboard:read
+      summary: Get query range result (v2)
+      tags:
+      - dashboard
   /api/v2/readyz:
     get:
       operationId: Readyz

ee/modules/dashboard/impldashboard/module.go

@@ -29,6 +29,7 @@ type module struct {
 	settings           factory.ScopedProviderSettings
 	querier            querier.Querier
 	licensing          licensing.Licensing
+	tagModule          tag.Module
 }
 
 func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
@@ -41,6 +42,7 @@ func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, an
 		settings:           scopedProviderSettings,
 		querier:            querier,
 		licensing:          licensing,
+		tagModule:          tagModule,
 	}
 }
 
@@ -132,6 +134,55 @@ func (module *module) GetPublicWidgetQueryRange(ctx context.Context, id valuer.U
 	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
 }
 
+func (module *module) GetDashboardByPublicIDV2(ctx context.Context, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
+	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
+	if err != nil {
+		return nil, err
+	}
+
+	tags, err := module.tagModule.ListForResource(ctx, storableDashboard.OrgID, coretypes.KindDashboard, storableDashboard.ID)
+	if err != nil {
+		return nil, err
+	}
+
+	return storableDashboard.ToDashboardV2(tags)
+}
+
+func (module *module) GetPublicWidgetQueryRangeV2(ctx context.Context, id valuer.UUID, panelKey, startTimeRaw, endTimeRaw string) (*querybuildertypesv5.QueryRangeResponse, error) {
+	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
+		instrumentationtypes.CodeNamespace:    "dashboard",
+		instrumentationtypes.CodeFunctionName: "GetPublicWidgetQueryRangeV2",
+	})
+
+	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
+	if err != nil {
+		return nil, err
+	}
+
+	// tags are not needed for query range.
+	dashboard, err := storableDashboard.ToDashboardV2(nil)
+	if err != nil {
+		return nil, err
+	}
+
+	publicDashboard, err := module.GetPublic(ctx, dashboard.OrgID, dashboard.ID)
+	if err != nil {
+		return nil, err
+	}
+
+	startTime, endTime, err := publicDashboard.ResolveTimeRange(startTimeRaw, endTimeRaw)
+	if err != nil {
+		return nil, err
+	}
+
+	query, err := dashboard.GetPanelQuery(startTime, endTime, panelKey)
+	if err != nil {
+		return nil, err
+	}
+
+	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
+}
+
 func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publicDashboard *dashboardtypes.PublicDashboard) error {
 	_, err := module.licensing.GetActive(ctx, orgID)
 	if err != nil {

frontend/.oxlintrc.json

@@ -293,6 +293,8 @@
     // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
     "signoz/no-css-module-bracket-access": "warn",
     // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
+    "signoz/no-dashboard-fetch-outside-root": "error",
+    // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
     "no-restricted-globals": [
       "error",
       {
@@ -558,6 +560,18 @@
       "rules": {
         "signoz/no-zustand-getstate-in-hooks": "off"
       }
+    },
+    {
+      // Root V2 pages own the dashboard fetch lifecycle; useDashboardFetchRequired wraps it.
+      // Everywhere else must use useDashboardFetchRequired().
+      "files": [
+        "src/pages/DashboardPageV2/DashboardPageV2.tsx",
+        "src/pages/DashboardPageV2/PanelEditorPage/PanelEditorPage.tsx",
+        "src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired.ts"
+      ],
+      "rules": {
+        "signoz/no-dashboard-fetch-outside-root": "off"
+      }
     }
   ]
 }

frontend/plugins/rules/no-dashboard-fetch-outside-root.mjs

@@ -0,0 +1,48 @@
+/**
+ * Rule: no-dashboard-fetch-outside-root
+ *
+ * `useDashboardFetch` owns the V2 dashboard fetch and exposes its loading/error/refetch
+ * lifecycle. That lifecycle is a root-page concern: DashboardPageV2 and PanelEditorPage
+ * gate their subtree on a resolved dashboard before mounting anything below them.
+ *
+ * Every other component therefore renders inside an already-loaded subtree and must use
+ * `useDashboardFetchRequired`, which reuses the same react-query cache entry but guarantees
+ * a non-undefined dashboard (throwing otherwise) — so consumers don't re-handle states the
+ * root page already owns.
+ *
+ * This rule flags `useDashboardFetch` imports. It is disabled via an override in
+ * .oxlintrc.json for the two root pages and for useDashboardFetchRequired.ts (which wraps it).
+ */
+
+const FETCH_HOOK = 'useDashboardFetch';
+
+export default {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow useDashboardFetch outside the root dashboard pages; use useDashboardFetchRequired instead',
+			category: 'Dashboard V2',
+		},
+		schema: [],
+		messages: {
+			useRequired:
+				'Use useDashboardFetchRequired() instead of useDashboardFetch — the latter is reserved for the root pages (DashboardPageV2, PanelEditorPage) that own the fetch lifecycle. Components below them render inside a loaded subtree and should assume a guaranteed dashboard.',
+		},
+	},
+
+	create(context) {
+		return {
+			ImportDeclaration(node) {
+				node.specifiers.forEach((specifier) => {
+					if (
+						specifier.type === 'ImportSpecifier' &&
+						specifier.imported.name === FETCH_HOOK
+					) {
+						context.report({ node: specifier, messageId: 'useRequired' });
+					}
+				});
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -12,6 +12,7 @@ import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
 import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
+import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
 
 export default {
 	meta: {
@@ -25,5 +26,6 @@ export default {
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
 		'no-css-module-bracket-access': noCssModuleBracketAccess,
+		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
 	},
 };

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

@@ -38,6 +38,10 @@ import type {
 	GetPublicDashboard200,
 	GetPublicDashboardData200,
 	GetPublicDashboardDataPathParameters,
+	GetPublicDashboardDataV2200,
+	GetPublicDashboardDataV2PathParameters,
+	GetPublicDashboardPanelQueryRangeV2200,
+	GetPublicDashboardPanelQueryRangeV2PathParameters,
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
@@ -1799,6 +1803,217 @@ export const useLockDashboardV2 = <
 > => {
 	return useMutation(getLockDashboardV2MutationOptions(options));
 };
+/**
+ * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
+ * @summary Get public dashboard data (v2)
+ */
+export const getPublicDashboardDataV2 = (
+	{ id }: GetPublicDashboardDataV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetPublicDashboardDataV2200>({
+		url: `/api/v2/public/dashboards/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetPublicDashboardDataV2QueryKey = ({
+	id,
+}: GetPublicDashboardDataV2PathParameters) => {
+	return [`/api/v2/public/dashboards/${id}`] as const;
+};
+
+export const getGetPublicDashboardDataV2QueryOptions = <
+	TData = Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetPublicDashboardDataV2PathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetPublicDashboardDataV2QueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getPublicDashboardDataV2>>
+	> = ({ signal }) => getPublicDashboardDataV2({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetPublicDashboardDataV2QueryResult = NonNullable<
+	Awaited<ReturnType<typeof getPublicDashboardDataV2>>
+>;
+export type GetPublicDashboardDataV2QueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get public dashboard data (v2)
+ */
+
+export function useGetPublicDashboardDataV2<
+	TData = Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetPublicDashboardDataV2PathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetPublicDashboardDataV2QueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get public dashboard data (v2)
+ */
+export const invalidateGetPublicDashboardDataV2 = async (
+	queryClient: QueryClient,
+	{ id }: GetPublicDashboardDataV2PathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetPublicDashboardDataV2QueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint returns query range results for a panel of a v2-shape public dashboard. The panel is addressed by its key in spec.panels.
+ * @summary Get query range result (v2)
+ */
+export const getPublicDashboardPanelQueryRangeV2 = (
+	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetPublicDashboardPanelQueryRangeV2200>({
+		url: `/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetPublicDashboardPanelQueryRangeV2QueryKey = ({
+	id,
+	key,
+}: GetPublicDashboardPanelQueryRangeV2PathParameters) => {
+	return [`/api/v2/public/dashboards/${id}/panels/${key}/query_range`] as const;
+};
+
+export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
+	TData = Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
+	> = ({ signal }) => getPublicDashboardPanelQueryRangeV2({ id, key }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!(id && key),
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetPublicDashboardPanelQueryRangeV2QueryResult = NonNullable<
+	Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
+>;
+export type GetPublicDashboardPanelQueryRangeV2QueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get query range result (v2)
+ */
+
+export function useGetPublicDashboardPanelQueryRangeV2<
+	TData = Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetPublicDashboardPanelQueryRangeV2QueryOptions(
+		{ id, key },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get query range result (v2)
+ */
+export const invalidateGetPublicDashboardPanelQueryRangeV2 = async (
+	queryClient: QueryClient,
+	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * Same as ListDashboardsV2 but personalized for the calling user: each dashboard carries the caller's `pinned` state, and pinned dashboards float to the top of the requested ordering. Supports the same filter DSL, sort, order, and pagination.
  * @summary List dashboards for the current user (v2)

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

@@ -23,6 +23,7 @@ import type {
 	GetLLMPricingRulePathParameters,
 	ListLLMPricingRules200,
 	ListLLMPricingRulesParams,
+	ListUnmappedLLMModels200,
 	LlmpricingruletypesUpdatableLLMPricingRulesDTO,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
@@ -393,3 +394,87 @@ export const invalidateGetLLMPricingRule = async (
 
 	return queryClient;
 };
+
+/**
+ * Returns models seen in the last hour of trace data (gen_ai.request.model) that no pricing rule pattern matches, so the user can add them to an existing rule or create a new one.
+ * @summary List unmapped models
+ */
+export const listUnmappedLLMModels = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListUnmappedLLMModels200>({
+		url: `/api/v1/llm_pricing_rules/unmapped_models`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListUnmappedLLMModelsQueryKey = () => {
+	return [`/api/v1/llm_pricing_rules/unmapped_models`] as const;
+};
+
+export const getListUnmappedLLMModelsQueryOptions = <
+	TData = Awaited<ReturnType<typeof listUnmappedLLMModels>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListUnmappedLLMModelsQueryKey();
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listUnmappedLLMModels>>
+	> = ({ signal }) => listUnmappedLLMModels(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListUnmappedLLMModelsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listUnmappedLLMModels>>
+>;
+export type ListUnmappedLLMModelsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List unmapped models
+ */
+
+export function useListUnmappedLLMModels<
+	TData = Awaited<ReturnType<typeof listUnmappedLLMModels>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListUnmappedLLMModelsQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List unmapped models
+ */
+export const invalidateListUnmappedLLMModels = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListUnmappedLLMModelsQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -4941,6 +4941,11 @@ export interface DashboardtypesGettablePublicDashboardDataDTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }
 
+export interface DashboardtypesGettablePublicDashboardDataV2DTO {
+	dashboard?: DashboardtypesGettableDashboardV2DTO;
+	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
+}
+
 export enum DashboardtypesPatchOpDTO {
 	add = 'add',
 	remove = 'remove',
@@ -6818,6 +6823,29 @@ export interface LlmpricingruletypesGettablePricingRulesDTO {
 	total: number;
 }
 
+export interface LlmpricingruletypesUnmappedModelDTO {
+	/**
+	 * @type string
+	 */
+	modelName: string;
+	/**
+	 * @type string
+	 */
+	provider?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	spanCount: number;
+}
+
+export interface LlmpricingruletypesGettableUnmappedModelsDTO {
+	/**
+	 * @type array,null
+	 */
+	items: LlmpricingruletypesUnmappedModelDTO[] | null;
+}
+
 export interface LlmpricingruletypesUpdatableLLMPricingRuleDTO {
 	/**
 	 * @type boolean
@@ -10168,6 +10196,14 @@ export type GetLLMPricingRule200 = {
 	status: string;
 };
 
+export type ListUnmappedLLMModels200 = {
+	data: LlmpricingruletypesGettableUnmappedModelsDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListPromotedAndIndexedPaths200 = {
 	/**
 	 * @type array,null
@@ -11161,6 +11197,29 @@ export type GetMyOrganization200 = {
 	status: string;
 };
 
+export type GetPublicDashboardDataV2PathParameters = {
+	id: string;
+};
+export type GetPublicDashboardDataV2200 = {
+	data: DashboardtypesGettablePublicDashboardDataV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetPublicDashboardPanelQueryRangeV2PathParameters = {
+	id: string;
+	key: string;
+};
+export type GetPublicDashboardPanelQueryRangeV2200 = {
+	data: Querybuildertypesv5QueryRangeResponseDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type Readyz200 = {
 	data: FactoryResponseDTO;
 	/**

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -3,7 +3,6 @@ import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
-import { useNotifications } from 'hooks/useNotifications';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
@@ -11,6 +10,7 @@ import {
 	selectIsDashboardLocked,
 	useDashboardStore,
 } from 'providers/Dashboard/store/useDashboardStore';
+import { toast } from '@signozhq/ui/sonner';
 
 import { getChartManagerColumns } from './getChartMangerColumns';
 import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
@@ -44,7 +44,6 @@ export default function ChartManager({
 	decimalPrecision = PrecisionOptionsEnum.TWO,
 	onCancel,
 }: ChartManagerProps): JSX.Element {
-	const { notifications } = useNotifications();
 	const { legendItemsMap } = useLegendsSync({
 		config,
 		subscribeToFocusChange: false,
@@ -136,11 +135,9 @@ export default function ChartManager({
 
 	const handleSave = useCallback((): void => {
 		syncSeriesVisibilityToLocalStorage();
-		notifications.success({
-			message: 'The updated graphs & legends are saved',
-		});
+		toast.success('The updated graphs & legends are saved');
 		onCancel?.();
-	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
+	}, [syncSeriesVisibilityToLocalStorage, onCancel]);
 
 	return (
 		<div className="chart-manager-container">

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/ChartManager.test.tsx

@@ -5,7 +5,7 @@ import { render, screen } from 'tests/test-utils';
 import ChartManager from '../ChartManager';
 
 const mockSyncSeriesVisibilityToLocalStorage = jest.fn();
-const mockNotificationsSuccess = jest.fn();
+const mockToastSuccess = jest.fn();
 
 jest.mock('lib/uPlotV2/context/PlotContext', () => ({
 	usePlotContext: (): {
@@ -46,12 +46,11 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 	}): boolean => s.dashboardData?.locked ?? false,
 }));
 
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): { notifications: { success: jest.Mock } } => ({
-		notifications: {
-			success: mockNotificationsSuccess,
-		},
-	}),
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: (...args: unknown[]): unknown => mockToastSuccess(...args),
+	},
 }));
 
 jest.mock('components/ResizeTable', () => {
@@ -160,7 +159,7 @@ describe('ChartManager', () => {
 		expect(screen.queryByTestId('row-2')).not.toBeInTheDocument();
 	});
 
-	it('calls syncSeriesVisibilityToLocalStorage, notifications.success, and onCancel when Save is clicked', async () => {
+	it('calls syncSeriesVisibilityToLocalStorage, toast.success, and onCancel when Save is clicked', async () => {
 		render(
 			<ChartManager
 				config={createMockConfig() as UPlotConfigBuilder}
@@ -172,9 +171,9 @@ describe('ChartManager', () => {
 		await userEvent.click(screen.getByRole('button', { name: /Save/ }));
 
 		expect(mockSyncSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
-			message: 'The updated graphs & legends are saved',
-		});
+		expect(mockToastSuccess).toHaveBeenCalledWith(
+			'The updated graphs & legends are saved',
+		);
 		expect(mockOnCancel).toHaveBeenCalledTimes(1);
 	});
 });

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -5,6 +5,14 @@
 	height: 100%;
 	flex-direction: column;
 
+	// Stacked children (the FullView / standalone graph-manager) sit below the chart
+	// in the same container; size the chart region to its content so they aren't
+	// pushed out. Only this case opts out of filling the height — the dashboard grid,
+	// alert preview, and other charts keep 100% so they fill their container.
+	&--with-layout-children {
+		height: auto;
+	}
+
 	&--legend-right {
 		flex-direction: row;
 	}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -63,6 +63,7 @@ export default function ChartLayout({
 				className={cx('chart-layout', {
 					'chart-layout--legend-right':
 						legendConfig.position === LegendPosition.RIGHT,
+					'chart-layout--with-layout-children': !!layoutChildren,
 				})}
 			>
 				<div className="chart-layout__content">

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.module.scss

@@ -66,20 +66,6 @@
 		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
 	}
 
-	:global(.ant-collapse-header) {
-		border-bottom: 1px solid var(--l1-border);
-		padding: 12px 8px;
-	}
-
-	:global(.ant-collapse-content-box) {
-		padding: 0 !important;
-		padding-block: 0 !important;
-
-		:global(.quick-filters .checkbox-filter) {
-			padding-left: 18px;
-		}
-	}
-
 	:global(.quick-filters) {
 		overflow-y: auto;
 		overflow-x: hidden;
@@ -111,22 +97,6 @@
 	justify-content: space-between;
 }
 
-.quickFiltersCategoryLabel {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.quickFiltersCategoryLabelIcon {
-	margin-right: 8px;
-}
-
-.quickFiltersCategoryLabelContainer {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
 .listContainer {
 	flex: 1;
 	min-width: 0;
@@ -160,3 +130,106 @@
 .listContainerFiltersVisible {
 	max-width: calc(100% - 280px);
 }
+
+.categorySelectorSection {
+	padding: var(--spacing-4);
+}
+
+.sectionHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	margin-bottom: var(--spacing-4);
+
+	&[data-type='filter'] {
+		padding: 0 var(--spacing-4);
+	}
+}
+
+.sectionLabel {
+	font-size: var(--periscope-font-size-small);
+	font-weight: var(--font-weight-semibold);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: var(--l3-foreground);
+	white-space: nowrap;
+}
+
+.sectionLine {
+	flex: 1;
+	height: 1px;
+	background: var(--l1-border);
+}
+
+.categoryCard {
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	border-radius: var(--spacing-3);
+	padding: var(--spacing-2);
+}
+
+.categoryList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+}
+
+.categoryItem {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-5);
+	padding: var(--spacing-3) var(--spacing-4);
+	border: none;
+	border-radius: var(--spacing-2);
+	background: transparent;
+	cursor: pointer;
+	width: 100%;
+	text-align: left;
+	transition:
+		background-color 0.2s ease,
+		color 0.2s ease;
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+	--typography-color: var(--l1-foreground);
+
+	&:hover:not(.categoryItemSelected) {
+		background: var(--l2-background-hover);
+	}
+
+	svg {
+		color: var(--l3-foreground);
+		flex-shrink: 0;
+		transition: color 0.2s ease;
+	}
+
+	&.categoryItemSelected {
+		background: var(--accent-primary);
+		color: var(--l1-background);
+		font-weight: 600;
+
+		&:hover {
+			background: var(--accent-primary-hover, var(--accent-primary));
+		}
+
+		svg {
+			color: var(--l1-foreground);
+		}
+	}
+}
+
+.quickFiltersSection {
+	flex: 1;
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: 0.1rem;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--accent-primary);
+	}
+}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as Sentry from '@sentry/react';
-import { Button, CollapseProps } from 'antd';
-import { Collapse, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
@@ -113,192 +112,74 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		});
 	};
 
-	const renderCategoryLabel = (
-		icon: JSX.Element,
-		label: string,
-	): JSX.Element => (
-		<div className={styles.quickFiltersCategoryLabel}>
-			<div className={styles.quickFiltersCategoryLabelContainer}>
-				{icon}
-				<Typography.Text>{label}</Typography.Text>
-			</div>
-		</div>
+	const categories = useMemo(
+		() => [
+			{
+				key: K8sCategories.PODS,
+				label: 'Pods',
+				icon: <Container size={14} />,
+				config: GetPodsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.NODES,
+				label: 'Nodes',
+				icon: <Workflow size={14} />,
+				config: GetNodesQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.NAMESPACES,
+				label: 'Namespaces',
+				icon: <FilePenLine size={14} />,
+				config: GetNamespaceQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.CLUSTERS,
+				label: 'Clusters',
+				icon: <Boxes size={14} />,
+				config: GetClustersQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.DEPLOYMENTS,
+				label: 'Deployments',
+				icon: <Computer size={14} />,
+				config: GetDeploymentsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.JOBS,
+				label: 'Jobs',
+				icon: <Bolt size={14} />,
+				config: GetJobsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.DAEMONSETS,
+				label: 'DaemonSets',
+				icon: <Group size={14} />,
+				config: GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.STATEFULSETS,
+				label: 'StatefulSets',
+				icon: <ArrowUpDown size={14} />,
+				config: GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.VOLUMES,
+				label: 'Volumes',
+				icon: <HardDrive size={14} />,
+				config: GetVolumesQuickFiltersConfig(dotMetricsEnabled),
+			},
+		],
+		[dotMetricsEnabled],
 	);
 
-	const items: CollapseProps['items'] = [
-		{
-			label: renderCategoryLabel(
-				<Container size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Pods',
-			),
-			key: K8sCategories.PODS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetPodsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Workflow size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Nodes',
-			),
-			key: K8sCategories.NODES,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetNodesQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<FilePenLine size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Namespaces',
-			),
-			key: K8sCategories.NAMESPACES,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetNamespaceQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Boxes size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Clusters',
-			),
-			key: K8sCategories.CLUSTERS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetClustersQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Computer size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Deployments',
-			),
-			key: K8sCategories.DEPLOYMENTS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetDeploymentsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Bolt size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Jobs',
-			),
-			key: K8sCategories.JOBS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetJobsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Group size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'DaemonSets',
-			),
-			key: K8sCategories.DAEMONSETS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<ArrowUpDown size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'StatefulSets',
-			),
-			key: K8sCategories.STATEFULSETS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<HardDrive size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Volumes',
-			),
-			key: K8sCategories.VOLUMES,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetVolumesQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		// TODO: Enable once we have implemented containers.
-		// {
-		// 	label: (
-		// 		<div className="k8s-quick-filters-category-label">
-		// 			<div className="k8s-quick-filters-category-label-container">
-		// 				<PackageOpen
-		// 					size={14}
-		// 					className="k8s-quick-filters-category-label-icon"
-		// 				/>
-		// 				<Typography.Text>Containers</Typography.Text>
-		// 			</div>
-		// 		</div>
-		// 	),
-		// 	key: K8sCategories.CONTAINERS,
-		// 	showArrow: false,
-		// 	children: (
-		// 		<QuickFilters
-		// 			source={QuickFiltersSource.INFRA_MONITORING}
-		// 			config={ContainersQuickFiltersConfig}
-		// 			handleFilterVisibilityChange={handleFilterVisibilityChange}
-		// 			onFilterChange={handleFilterChange}
-		// 		/>
-		// 	),
-		// },
-	];
+	const selectedCategoryConfig = useMemo(
+		() => categories.find((cat) => cat.key === selectedCategory)?.config,
+		[categories, selectedCategory],
+	);
 
-	const handleCategoryChange = (key: string | string[]): void => {
-		if (Array.isArray(key) && key.length > 0) {
-			setSelectedCategory(key[0] as string);
+	const handleCategorySelect = (key: string): void => {
+		if (key !== selectedCategory) {
+			setSelectedCategory(key);
 			// Reset filters
 			setUrlFilters(null);
 			setOrderBy(null);
@@ -332,26 +213,58 @@ export default function InfraMonitoringK8s(): JSX.Element {
 				<div className={styles.infraContentRow}>
 					{showFilters && (
 						<div className={styles.quickFiltersContainer}>
-							<div className={styles.quickFiltersContainerHeader}>
-								<Typography.Text>Filters</Typography.Text>
-
-								<Tooltip title="Collapse Filters">
-									<ArrowUpToLine
-										style={{ transform: 'rotate(270deg)' }}
-										onClick={handleFilterVisibilityChange}
-										size="md"
-									/>
-								</Tooltip>
+							<div className={styles.categorySelectorSection}>
+								<div className={styles.sectionHeader} data-type="resource">
+									<Typography.Text className={styles.sectionLabel}>
+										Viewing · Resource
+									</Typography.Text>
+									<div className={styles.sectionLine} />
+									<Tooltip title="Collapse Filters">
+										<ArrowUpToLine
+											style={{ transform: 'rotate(270deg)' }}
+											onClick={handleFilterVisibilityChange}
+											size="md"
+										/>
+									</Tooltip>
+								</div>
+								<div className={styles.categoryCard}>
+									<div className={styles.categoryList}>
+										{categories.map((category) => (
+											<button
+												key={category.key}
+												type="button"
+												className={`${styles.categoryItem} ${
+													selectedCategory === category.key
+														? styles.categoryItemSelected
+														: ''
+												}`}
+												onClick={(): void => handleCategorySelect(category.key)}
+												data-testid={`category-${category.key}`}
+											>
+												{category.icon}
+												<Typography.Text>{category.label}</Typography.Text>
+											</button>
+										))}
+									</div>
+								</div>
+							</div>
+
+							<div className={styles.quickFiltersSection}>
+								<div className={styles.sectionHeader} data-type="filter">
+									<Typography.Text className={styles.sectionLabel}>
+										Filter by
+									</Typography.Text>
+									<div className={styles.sectionLine} />
+								</div>
+								{selectedCategoryConfig && (
+									<QuickFilters
+										source={QuickFiltersSource.INFRA_MONITORING}
+										config={selectedCategoryConfig}
+										handleFilterVisibilityChange={handleFilterVisibilityChange}
+										onFilterChange={handleFilterChange}
+									/>
+								)}
 							</div>
-							<Collapse
-								onChange={handleCategoryChange}
-								items={items}
-								defaultActiveKey={[selectedCategory]}
-								activeKey={[selectedCategory]}
-								accordion
-								bordered={false}
-								ghost
-							/>
 						</div>
 					)}
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.tsx

@@ -1,19 +1,18 @@
 import { Typography } from '@signozhq/ui/typography';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { EQueryType } from 'types/common/dashboard';
+import type { EQueryType } from 'types/common/dashboard';
 
 import type { PanelKind } from '../../../Panels/types/panelKind';
-import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
 import ConfigSelect from '../controls/ConfigSelect/ConfigSelect';
 
 import styles from './PanelTypeSwitcher.module.scss';
-import { getPanelTypeDisabledReason } from './utils';
+import { usePanelTypeSelectItems } from './usePanelTypeSelectItems';
 
 interface PanelTypeSwitcherProps {
 	/** The current panel kind (selected value). */
 	panelKind: PanelKind;
-	/** Active query type — a kind that can't be authored in it is disabled (e.g. List is Query-Builder-only, so PromQL/ClickHouse disable it). Defaults to Query Builder. */
-	queryType?: EQueryType;
+	/** Active query type — a kind that can't be authored in it is disabled (e.g. List is Query-Builder-only, so PromQL/ClickHouse disable it). */
+	queryType: EQueryType;
 	/** Panel's current signal — also gates the disabled rule (List needs logs/traces, not metrics). */
 	signal?: TelemetrytypesSignalDTO;
 	onChange: (kind: PanelKind) => void;
@@ -31,22 +30,7 @@ function PanelTypeSwitcher({
 	signal,
 	onChange,
 }: PanelTypeSwitcherProps): JSX.Element {
-	const items = PANEL_TYPES.map(({ panelKind, label, Icon }) => {
-		// One reason drives both the disabled flag and the tooltip, so they can't disagree.
-		const disabledReason = getPanelTypeDisabledReason({
-			kind: panelKind,
-			queryType: queryType ?? EQueryType.QUERY_BUILDER,
-			signal,
-			label,
-		});
-		return {
-			value: panelKind,
-			label,
-			icon: <Icon size={14} />,
-			disabled: !!disabledReason,
-			tooltip: disabledReason,
-		};
-	});
+	const items = usePanelTypeSelectItems({ queryType, signal });
 
 	return (
 		<div className={styles.field}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/__tests__/PanelTypeSwitcher.test.tsx

@@ -49,7 +49,11 @@ describe('PanelTypeSwitcher', () => {
 	it('fires onChange with the chosen plugin kind', () => {
 		const onChange = jest.fn();
 		render(
-			<PanelTypeSwitcher panelKind="signoz/TimeSeriesPanel" onChange={onChange} />,
+			<PanelTypeSwitcher
+				panelKind="signoz/TimeSeriesPanel"
+				queryType={EQueryType.QUERY_BUILDER}
+				onChange={onChange}
+			/>,
 		);
 
 		openDropdown();
@@ -62,6 +66,7 @@ describe('PanelTypeSwitcher', () => {
 		render(
 			<PanelTypeSwitcher
 				panelKind="signoz/TimeSeriesPanel"
+				queryType={EQueryType.QUERY_BUILDER}
 				signal={TelemetrytypesSignalDTO.metrics}
 				onChange={jest.fn()}
 			/>,
@@ -77,6 +82,7 @@ describe('PanelTypeSwitcher', () => {
 		render(
 			<PanelTypeSwitcher
 				panelKind="signoz/TimeSeriesPanel"
+				queryType={EQueryType.QUERY_BUILDER}
 				onChange={jest.fn()}
 			/>,
 		);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/usePanelTypeSelectItems.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { EQueryType } from 'types/common/dashboard';
+
+import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
+import type { ConfigSelectItem } from '../controls/ConfigSelect/ConfigSelect';
+
+import { getPanelTypeDisabledReason } from './utils';
+
+interface UsePanelTypeSelectItemsArgs {
+	/** Active query type — a kind that can't be authored in it is disabled. */
+	queryType: EQueryType;
+	/** Current datasource — also gates the disabled rule (List needs logs/traces, not metrics). */
+	signal?: TelemetrytypesSignalDTO;
+}
+
+/**
+ * Visualization-kind options for a `ConfigSelect`, each disabled (with a reason
+ * tooltip) when the active query type or signal is incompatible — resolved through
+ * the capabilities guard. Shared by the editor's `PanelTypeSwitcher` and the View
+ * modal's header so the two selectors apply the same rule and can't drift.
+ */
+export function usePanelTypeSelectItems({
+	queryType,
+	signal,
+}: UsePanelTypeSelectItemsArgs): ConfigSelectItem<PanelKind>[] {
+	return useMemo(
+		() =>
+			PANEL_TYPES.map(({ panelKind, label, Icon }) => {
+				// One reason drives both the disabled flag and the tooltip, so they can't disagree.
+				const disabledReason = getPanelTypeDisabledReason({
+					kind: panelKind,
+					queryType,
+					signal,
+					label,
+				});
+				return {
+					value: panelKind,
+					label,
+					icon: <Icon size={14} />,
+					disabled: !!disabledReason,
+					tooltip: disabledReason,
+				};
+			}),
+		[queryType, signal],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinkDialog.tsx

@@ -0,0 +1,259 @@
+import { useEffect, useState } from 'react';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import { Input } from 'antd';
+import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { UrlParam, VariableItem } from './types';
+import {
+	getUrlParams,
+	insertVariableAtCursor,
+	isValidContextLinkUrl,
+	updateUrlWithParams,
+} from './utils';
+import VariablesPopover from './VariablesPopover';
+
+import styles from './ContextLinksSection.module.scss';
+
+interface ContextLinkDialogProps {
+	open: boolean;
+	/** The link being edited, or null when adding a new one. */
+	initialLink: DashboardLinkDTO | null;
+	variables: VariableItem[];
+	onOpenChange: (open: boolean) => void;
+	onSave: (link: DashboardLinkDTO) => void;
+}
+
+const URL_ERROR = 'URL must start with http(s)://, /, or {{variable}}/';
+
+const cursorOf = (e: { target: EventTarget }): number =>
+	(e.target as HTMLInputElement).selectionStart ?? 0;
+
+/**
+ * Modal editor for a single context link (V1 parity): label + URL with `{{variable}}`
+ * autocomplete + validation, a key/value URL-parameters editor, and an "open in new tab"
+ * toggle. The URL is the source of truth; parameter rows are its query string projected
+ * out (blank-key rows live only in local state until they get a key). Save is gated on a
+ * non-empty, well-formed URL. `renderVariables` is set so consumers interpolate the URL.
+ */
+function ContextLinkDialog({
+	open,
+	initialLink,
+	variables,
+	onOpenChange,
+	onSave,
+}: ContextLinkDialogProps): JSX.Element {
+	const [name, setName] = useState('');
+	const [url, setUrlState] = useState('');
+	const [targetBlank, setTargetBlank] = useState(true);
+	const [params, setParams] = useState<UrlParam[]>([]);
+
+	// Seed the draft each time the dialog opens for a (possibly different) link.
+	useEffect(() => {
+		if (open) {
+			setName(initialLink?.name ?? '');
+			setUrlState(initialLink?.url ?? '');
+			setTargetBlank(initialLink?.targetBlank ?? true);
+			setParams(getUrlParams(initialLink?.url ?? ''));
+		}
+	}, [open, initialLink]);
+
+	const setUrl = (next: string): void => {
+		setUrlState(next);
+		setParams(getUrlParams(next));
+	};
+
+	const applyParams = (next: UrlParam[]): void => {
+		setParams(next);
+		setUrlState(updateUrlWithParams(url, next));
+	};
+
+	const patchParam = (index: number, patch: Partial<UrlParam>): void =>
+		applyParams(params.map((p, i) => (i === index ? { ...p, ...patch } : p)));
+
+	const addParam = (): void => {
+		const last = params[params.length - 1];
+		if (!last || last.key.trim() || last.value.trim()) {
+			setParams([...params, { key: '', value: '' }]);
+		}
+	};
+
+	const urlInvalid = !isValidContextLinkUrl(url);
+	const canSave = !!url.trim() && !urlInvalid;
+
+	const handleSave = (): void => {
+		if (canSave) {
+			onSave({ name, url, targetBlank, renderVariables: true });
+		}
+	};
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={onOpenChange}
+			title={initialLink ? 'Edit context link' : 'Add a context link'}
+			width="wide"
+			testId="context-link-dialog"
+			footer={
+				<>
+					<Button
+						type="button"
+						variant="outlined"
+						color="secondary"
+						data-testid="context-link-cancel"
+						onClick={(): void => onOpenChange(false)}
+					>
+						Cancel
+					</Button>
+					<Button
+						type="button"
+						variant="solid"
+						color="primary"
+						disabled={!canSave}
+						data-testid="context-link-save"
+						onClick={handleSave}
+					>
+						Save
+					</Button>
+				</>
+			}
+		>
+			<div className={styles.form}>
+				<div className={styles.formField}>
+					<Typography.Text className={styles.formLabel}>Label</Typography.Text>
+					<Input
+						data-testid="context-link-label"
+						placeholder="View trace details: {{_traceId}}"
+						value={name}
+						onChange={(e): void => setName(e.target.value)}
+					/>
+				</div>
+
+				<div className={styles.formField}>
+					<Typography.Text className={styles.formLabel}>
+						URL <span className={styles.required}>*</span>
+					</Typography.Text>
+					<VariablesPopover
+						variables={variables}
+						onVariableSelect={(token, cursor): void =>
+							setUrl(insertVariableAtCursor(url, token, cursor))
+						}
+					>
+						{({ setIsOpen, setCursorPosition }): JSX.Element => (
+							<Input
+								data-testid="context-link-url"
+								placeholder="https://… or /path?var={{variable}}"
+								value={url}
+								status={urlInvalid ? 'error' : undefined}
+								autoComplete="off"
+								onChange={(e): void => {
+									setCursorPosition(e.target.selectionStart ?? 0);
+									setUrl(e.target.value);
+								}}
+								onFocus={(): void => setIsOpen(true)}
+								onClick={(e): void => setCursorPosition(cursorOf(e))}
+								onKeyUp={(e): void => setCursorPosition(cursorOf(e))}
+							/>
+						)}
+					</VariablesPopover>
+					{urlInvalid && (
+						<Typography.Text
+							className={styles.urlError}
+							data-testid="context-link-url-error"
+						>
+							{URL_ERROR}
+						</Typography.Text>
+					)}
+				</div>
+
+				{params.length > 0 && (
+					<div className={styles.formField}>
+						<Typography.Text className={styles.formLabel}>
+							URL parameters
+						</Typography.Text>
+						<div className={styles.params}>
+							{params.map((param, index) => (
+								<div
+									className={styles.paramRow}
+									// Parameter rows have no stable id; index is the row identity here.
+									// eslint-disable-next-line react/no-array-index-key
+									key={index}
+								>
+									<Input
+										data-testid={`context-link-param-key-${index}`}
+										placeholder="Key"
+										value={param.key}
+										onChange={(e): void => patchParam(index, { key: e.target.value })}
+									/>
+									<VariablesPopover
+										variables={variables}
+										onVariableSelect={(token, cursor): void =>
+											patchParam(index, {
+												value: insertVariableAtCursor(param.value, token, cursor),
+											})
+										}
+									>
+										{({ setIsOpen, setCursorPosition }): JSX.Element => (
+											<Input
+												data-testid={`context-link-param-value-${index}`}
+												placeholder="Value"
+												value={param.value}
+												onChange={(e): void => {
+													setCursorPosition(e.target.selectionStart ?? 0);
+													patchParam(index, { value: e.target.value });
+												}}
+												onFocus={(): void => setIsOpen(true)}
+												onClick={(e): void => setCursorPosition(cursorOf(e))}
+												onKeyUp={(e): void => setCursorPosition(cursorOf(e))}
+											/>
+										)}
+									</VariablesPopover>
+									<Button
+										type="button"
+										variant="ghost"
+										color="destructive"
+										size="icon"
+										aria-label={`Remove parameter ${index + 1}`}
+										data-testid={`context-link-param-remove-${index}`}
+										onClick={(): void =>
+											applyParams(params.filter((_, i) => i !== index))
+										}
+									>
+										<Trash2 size={14} />
+									</Button>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+
+				<Button
+					type="button"
+					variant="dashed"
+					color="secondary"
+					prefix={<Plus size={12} />}
+					data-testid="context-link-add-param"
+					onClick={addParam}
+				>
+					Add URL parameter
+				</Button>
+
+				<div className={styles.newTab}>
+					<Switch
+						testId="context-link-newtab"
+						value={targetBlank}
+						onChange={setTargetBlank}
+					/>
+					<Typography.Text className={styles.newTabLabel}>
+						Open in new tab
+					</Typography.Text>
+				</div>
+			</div>
+		</DialogWrapper>
+	);
+}
+
+export default ContextLinkDialog;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinkListItem.tsx

@@ -0,0 +1,62 @@
+import { Pencil, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
+
+import styles from './ContextLinksSection.module.scss';
+
+interface ContextLinkListItemProps {
+	link: DashboardLinkDTO;
+	index: number;
+	onEdit: () => void;
+	onRemove: () => void;
+}
+
+/** A saved context link in the section list: its label + URL, with edit / delete actions. */
+function ContextLinkListItem({
+	link,
+	index,
+	onEdit,
+	onRemove,
+}: ContextLinkListItemProps): JSX.Element {
+	const label = link.name?.trim() || link.url || 'Untitled link';
+
+	return (
+		<div className={styles.listItem} data-testid={`context-link-item-${index}`}>
+			<div className={styles.listItemText}>
+				<Typography.Text className={styles.listItemLabel}>{label}</Typography.Text>
+				{!!link.url && (
+					<Typography.Text className={styles.listItemUrl}>
+						{link.url}
+					</Typography.Text>
+				)}
+			</div>
+			<div className={styles.listItemActions}>
+				<Button
+					type="button"
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					aria-label={`Edit link ${index + 1}`}
+					data-testid={`context-link-edit-${index}`}
+					onClick={onEdit}
+				>
+					<Pencil size={14} />
+				</Button>
+				<Button
+					type="button"
+					variant="ghost"
+					color="destructive"
+					size="icon"
+					aria-label={`Remove link ${index + 1}`}
+					data-testid={`context-link-remove-${index}`}
+					onClick={onRemove}
+				>
+					<Trash2 size={14} />
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default ContextLinkListItem;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinksSection.module.scss

@@ -1,32 +1,99 @@
 .list {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: 8px;
 }
 
-.row {
+/* --- Saved-link list item --- */
+.listItem {
 	display: flex;
-	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
 	gap: 8px;
-	padding: 10px;
+	padding: 8px 10px;
 	border: 1px solid var(--l2-border);
 	border-radius: 6px;
 }
 
-.rowFooter {
+.listItemText {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.listItemLabel,
+.listItemUrl {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 100%;
+}
+
+.listItemLabel {
+	font-size: 13px;
+	color: var(--text-vanilla-100);
+}
+
+.listItemUrl {
+	font-size: 11px;
+	color: var(--text-vanilla-400);
+}
+
+.listItemActions {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
+	gap: 2px;
+	flex-shrink: 0;
+}
+
+/* --- Dialog form --- */
+.form {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+
+.formField {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.formLabel {
+	font-size: 12px;
+	color: var(--l2-foreground);
+}
+
+.required {
+	color: var(--bg-cherry-400);
+}
+
+.urlError {
+	font-size: 11px;
+	color: var(--bg-cherry-400);
+}
+
+.params {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.paramRow {
+	display: grid;
+	grid-template-columns: 1fr 1fr auto;
+	align-items: center;
+	gap: 6px;
 }
 
 .newTab {
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	cursor: pointer;
 }
 
 .newTabLabel {
 	font-size: 12px;
-	color: var(--text-vanilla-400);
+	color: var(--l2-foreground);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinksSection.tsx

@@ -1,83 +1,63 @@
-import { Plus, Trash2 } from '@signozhq/icons';
+import { useState } from 'react';
+import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Switch } from '@signozhq/ui/switch';
-import { Typography } from '@signozhq/ui/typography';
-import { Input } from 'antd';
 import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
 import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 
+import ContextLinkDialog from './ContextLinkDialog';
+import ContextLinkListItem from './ContextLinkListItem';
+import { useContextLinkVariables } from './useContextLinkVariables';
+
 import styles from './ContextLinksSection.module.scss';
 
 /**
- * Edits the panel's context links (`spec.links`): a list of label + URL rows with an
- * "open in new tab" toggle, plus add/remove. Atomic section — no per-kind sub-controls.
- * URLs may reference dashboard/query variables; that interpolation is resolved at render
- * time, so this editor just captures the raw strings.
+ * Edits the panel's context links (`spec.links`) as a list of saved links, each added or
+ * edited through a modal ({@link ContextLinkDialog}) that carries V1's full authoring UX
+ * (variable autocomplete, URL-parameters editor, validation).
  */
 function ContextLinksSection({
 	value,
 	onChange,
 }: SectionEditorProps<SectionKind.ContextLinks>): JSX.Element {
 	const links = value ?? [];
+	const variables = useContextLinkVariables();
 
-	const updateAt = (index: number, patch: Partial<DashboardLinkDTO>): void =>
-		onChange(
-			links.map((link, i) => (i === index ? { ...link, ...patch } : link)),
-		);
-
-	const addLink = (): void =>
-		onChange([...links, { name: '', url: '', targetBlank: true }]);
+	// `index === null` while adding a new link; a number while editing an existing one.
+	const [dialog, setDialog] = useState<{ open: boolean; index: number | null }>({
+		open: false,
+		index: null,
+	});
 
 	const removeAt = (index: number): void =>
 		onChange(links.filter((_, i) => i !== index));
 
+	const handleSave = (link: DashboardLinkDTO): void => {
+		onChange(
+			dialog.index === null
+				? [...links, link]
+				: links.map((existing, i) => (i === dialog.index ? link : existing)),
+		);
+		setDialog((d) => ({ ...d, open: false }));
+	};
+
+	const editingLink =
+		dialog.index !== null ? (links[dialog.index] ?? null) : null;
+
 	return (
 		<div className={styles.list}>
 			{links.map((link, index) => (
-				// Links have no stable id on the wire; index is the row identity here.
-				// eslint-disable-next-line react/no-array-index-key
-				<div className={styles.row} key={index}>
-					<Input
-						data-testid={`context-link-label-${index}`}
-						placeholder="Label"
-						value={link.name ?? ''}
-						onChange={(e): void => updateAt(index, { name: e.target.value })}
-					/>
-					<Input
-						data-testid={`context-link-url-${index}`}
-						placeholder="https://… or /path?var=$variable"
-						value={link.url ?? ''}
-						onChange={(e): void => updateAt(index, { url: e.target.value })}
-					/>
-					<div className={styles.rowFooter}>
-						<div className={styles.newTab}>
-							<Switch
-								testId={`context-link-newtab-${index}`}
-								value={link.targetBlank ?? false}
-								onChange={(checked: boolean): void =>
-									updateAt(index, { targetBlank: checked })
-								}
-							/>
-							<Typography.Text className={styles.newTabLabel}>
-								Open in new tab
-							</Typography.Text>
-						</div>
-						<Button
-							type="button"
-							variant="ghost"
-							color="destructive"
-							size="icon"
-							aria-label={`Remove link ${index + 1}`}
-							data-testid={`context-link-remove-${index}`}
-							onClick={(): void => removeAt(index)}
-						>
-							<Trash2 size={14} />
-						</Button>
-					</div>
-				</div>
+				<ContextLinkListItem
+					// Links have no stable id on the wire; index is the row identity here.
+					// eslint-disable-next-line react/no-array-index-key
+					key={index}
+					link={link}
+					index={index}
+					onEdit={(): void => setDialog({ open: true, index })}
+					onRemove={(): void => removeAt(index)}
+				/>
 			))}
 
 			<Button
@@ -86,10 +66,18 @@ function ContextLinksSection({
 				color="secondary"
 				prefix={<Plus size={14} />}
 				data-testid="panel-editor-v2-add-link"
-				onClick={addLink}
+				onClick={(): void => setDialog({ open: true, index: null })}
 			>
-				Add link
+				Add Context Link
 			</Button>
+
+			<ContextLinkDialog
+				open={dialog.open}
+				initialLink={editingLink}
+				variables={variables}
+				onOpenChange={(open): void => setDialog((d) => ({ ...d, open }))}
+				onSave={handleSave}
+			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/VariablesPopover.module.scss

@@ -0,0 +1,64 @@
+.container {
+	width: 100%;
+}
+
+.anchor {
+	width: 100%;
+}
+
+.content {
+	z-index: 1100;
+	padding: 4px 0;
+	max-height: 300px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	min-width: var(--radix-popover-trigger-width);
+}
+
+.empty {
+	padding: 8px 12px;
+	color: var(--text-vanilla-400);
+	font-size: 12px;
+	font-style: italic;
+}
+
+.item {
+	--button-display: flex;
+	--button-justify-content: flex-start;
+	--button-height: auto;
+	--button-padding: 8px 12px;
+	--button-border-radius: 0;
+	--button-font-size: 13px;
+	--button-line-height: 1.4;
+
+	width: 100%;
+	overflow: hidden;
+}
+
+.row {
+	display: flex;
+	flex: 1 1 auto;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	min-width: 0;
+}
+
+.name,
+.source {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.name {
+	flex: 1 1 auto;
+	text-align: start;
+}
+
+.source {
+	color: var(--l3-foreground);
+	font-size: 12px;
+	flex: 0 1 auto;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/VariablesPopover.tsx

@@ -0,0 +1,117 @@
+// Uses Popover (not DropdownMenu): DropdownMenuTrigger preventDefaults pointerdown,
+// which steals input focus and dismisses on every keystroke. PopoverAnchor is a passive
+// positioning element that leaves the wrapped input fully interactive.
+import { ReactNode, useRef, useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Popover, PopoverAnchor, PopoverContent } from '@signozhq/ui/popover';
+import { Typography } from '@signozhq/ui/typography';
+
+import type { VariableItem } from './types';
+
+import styles from './VariablesPopover.module.scss';
+
+interface VariablesPopoverRenderProps {
+	setIsOpen: (open: boolean) => void;
+	setCursorPosition: (position: number | null) => void;
+}
+
+interface VariablesPopoverProps {
+	variables: VariableItem[];
+	/** Called with the braces-wrapped token (e.g. `{{env}}`) and the tracked cursor offset. */
+	onVariableSelect: (token: string, cursorPosition?: number) => void;
+	children: (props: VariablesPopoverRenderProps) => ReactNode;
+}
+
+/**
+ * Autocomplete for context-link variables. Wraps an input (via the render-prop) and
+ * shows the available `{{variables}}` grouped by source; picking one inserts it at the
+ * tracked cursor. The consumer drives `setIsOpen` (on focus) and `setCursorPosition`.
+ */
+function VariablesPopover({
+	variables,
+	onVariableSelect,
+	children,
+}: VariablesPopoverProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+	const anchorRef = useRef<HTMLDivElement>(null);
+
+	const handleOpenChange = (open: boolean): void => {
+		// Accept "close" events (outside-click, Esc) but ignore opens — opening is driven
+		// by the input's onFocus in the consumer.
+		if (!open) {
+			setIsOpen(false);
+		}
+	};
+
+	// Keep the popover open while the pointer/focus is inside the anchored input.
+	const keepOpenIfInsideAnchor = (event: {
+		target: EventTarget | null;
+	}): void => {
+		const target = event.target as Node | null;
+		if (
+			target &&
+			anchorRef.current?.contains(target) &&
+			'preventDefault' in event
+		) {
+			(event as Event).preventDefault();
+		}
+	};
+
+	return (
+		<div className={styles.container}>
+			<Popover open={isOpen} onOpenChange={handleOpenChange} modal={false}>
+				<PopoverAnchor asChild>
+					<div className={styles.anchor} ref={anchorRef}>
+						{children({ setIsOpen, setCursorPosition })}
+					</div>
+				</PopoverAnchor>
+				<PopoverContent
+					align="start"
+					sideOffset={4}
+					// Render inside the anchor (not a body portal): the editor lives in a modal
+					// DialogWrapper, and radix's modal sets pointer-events:none on everything
+					// portalled outside it, which would make the suggestions unclickable.
+					withPortal={false}
+					className={styles.content}
+					onOpenAutoFocus={(e): void => e.preventDefault()}
+					onCloseAutoFocus={(e): void => e.preventDefault()}
+					onInteractOutside={keepOpenIfInsideAnchor}
+					onFocusOutside={keepOpenIfInsideAnchor}
+				>
+					{variables.length === 0 ? (
+						<div className={styles.empty}>No variables available</div>
+					) : (
+						variables.map((v) => (
+							<Button
+								key={`${v.source}-${v.name}`}
+								type="button"
+								variant="ghost"
+								color="secondary"
+								size="md"
+								className={styles.item}
+								aria-label={`Insert {{${v.name}}}`}
+								testId={`context-link-variable-${v.name}`}
+								// Prevent the input from losing focus when clicking an item.
+								onMouseDown={(e): void => e.preventDefault()}
+								onClick={(): void => {
+									onVariableSelect(`{{${v.name}}}`, cursorPosition ?? undefined);
+									setIsOpen(false);
+								}}
+							>
+								<div className={styles.row}>
+									<Typography.Text
+										className={styles.name}
+									>{`{{${v.name}}}`}</Typography.Text>
+									<Typography.Text className={styles.source}>{v.source}</Typography.Text>
+								</div>
+							</Button>
+						))
+					)}
+				</PopoverContent>
+			</Popover>
+		</div>
+	);
+}
+
+export default VariablesPopover;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/__tests__/ContextLinksSection.test.tsx

@@ -3,47 +3,92 @@ import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
 
 import ContextLinksSection from '../ContextLinksSection';
 
+// The variable-source hook reads the query-builder provider + store; stub it so the
+// editor can be exercised in isolation (its own suite covers the sourcing logic).
+jest.mock('../useContextLinkVariables', () => ({
+	useContextLinkVariables: (): unknown => [
+		{ name: 'timestamp_start', source: 'Global timestamp' },
+		{ name: 'env', source: 'Dashboard variable' },
+	],
+}));
+
 const LINKS: DashboardLinkDTO[] = [
 	{ name: 'Docs', url: 'https://signoz.io', targetBlank: true },
 ];
 
+const lastCall = (fn: jest.Mock): DashboardLinkDTO[] =>
+	fn.mock.calls[fn.mock.calls.length - 1][0];
+
 describe('ContextLinksSection', () => {
 	it('renders only the add button when there are no links', () => {
 		render(<ContextLinksSection value={undefined} onChange={jest.fn()} />);
 
 		expect(screen.getByTestId('panel-editor-v2-add-link')).toBeInTheDocument();
-		expect(screen.queryByTestId('context-link-label-0')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('context-link-item-0')).not.toBeInTheDocument();
 	});
 
-	it('appends a blank link (open-in-new-tab on) when Add link is clicked', () => {
+	it('renders existing links as list items showing the label', () => {
+		render(<ContextLinksSection value={LINKS} onChange={jest.fn()} />);
+
+		expect(screen.getByTestId('context-link-item-0')).toHaveTextContent('Docs');
+		// The editor is a modal — no inline fields until it's opened.
+		expect(screen.queryByTestId('context-link-url')).not.toBeInTheDocument();
+	});
+
+	it('adds a link through the dialog (Save gated on a valid URL)', async () => {
 		const onChange = jest.fn();
 		render(<ContextLinksSection value={[]} onChange={onChange} />);
 
 		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
 
+		const save = await screen.findByTestId('context-link-save');
+		expect(save).toBeDisabled();
+
+		fireEvent.change(screen.getByTestId('context-link-url'), {
+			target: { value: 'https://signoz.io' },
+		});
+		fireEvent.change(screen.getByTestId('context-link-label'), {
+			target: { value: 'Docs' },
+		});
+		expect(save).not.toBeDisabled();
+
+		fireEvent.click(save);
 		expect(onChange).toHaveBeenCalledWith([
-			{ name: '', url: '', targetBlank: true },
+			{
+				name: 'Docs',
+				url: 'https://signoz.io',
+				targetBlank: true,
+				renderVariables: true,
+			},
 		]);
 	});
 
-	it('renders existing links and edits a label through onChange', () => {
+	it('edits an existing link through the dialog', async () => {
 		const onChange = jest.fn();
 		render(<ContextLinksSection value={LINKS} onChange={onChange} />);
 
-		expect(screen.getByTestId('context-link-label-0')).toHaveValue('Docs');
-		expect(screen.getByTestId('context-link-url-0')).toHaveValue(
+		fireEvent.click(screen.getByTestId('context-link-edit-0'));
+
+		const label = await screen.findByTestId('context-link-label');
+		expect(label).toHaveValue('Docs');
+		expect(screen.getByTestId('context-link-url')).toHaveValue(
 			'https://signoz.io',
 		);
 
-		fireEvent.change(screen.getByTestId('context-link-label-0'), {
-			target: { value: 'Runbook' },
-		});
+		fireEvent.change(label, { target: { value: 'Runbook' } });
+		fireEvent.click(screen.getByTestId('context-link-save'));
+
 		expect(onChange).toHaveBeenCalledWith([
-			{ name: 'Runbook', url: 'https://signoz.io', targetBlank: true },
+			{
+				name: 'Runbook',
+				url: 'https://signoz.io',
+				targetBlank: true,
+				renderVariables: true,
+			},
 		]);
 	});
 
-	it('removes a link through onChange', () => {
+	it('removes a link from the list', () => {
 		const onChange = jest.fn();
 		render(<ContextLinksSection value={LINKS} onChange={onChange} />);
 
@@ -51,4 +96,52 @@ describe('ContextLinksSection', () => {
 
 		expect(onChange).toHaveBeenCalledWith([]);
 	});
+
+	it('shows a validation error only for a malformed URL', async () => {
+		render(<ContextLinksSection value={[]} onChange={jest.fn()} />);
+		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
+
+		const urlInput = await screen.findByTestId('context-link-url');
+
+		fireEvent.change(urlInput, { target: { value: 'not-a-url' } });
+		expect(screen.getByTestId('context-link-url-error')).toBeInTheDocument();
+		expect(screen.getByTestId('context-link-save')).toBeDisabled();
+
+		fireEvent.change(urlInput, { target: { value: '/valid/path' } });
+		expect(
+			screen.queryByTestId('context-link-url-error'),
+		).not.toBeInTheDocument();
+	});
+
+	it('adds a URL parameter and writes it into the URL query string', async () => {
+		const onChange = jest.fn();
+		render(<ContextLinksSection value={[]} onChange={onChange} />);
+		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
+
+		fireEvent.change(await screen.findByTestId('context-link-url'), {
+			target: { value: '/logs' },
+		});
+		fireEvent.click(screen.getByTestId('context-link-add-param'));
+		fireEvent.change(screen.getByTestId('context-link-param-key-0'), {
+			target: { value: 'env' },
+		});
+		fireEvent.click(screen.getByTestId('context-link-save'));
+
+		expect(lastCall(onChange)).toStrictEqual([
+			{ name: '', url: '/logs?env=', targetBlank: true, renderVariables: true },
+		]);
+	});
+
+	it('inserts a {{variable}} into the URL from the autocomplete popover', async () => {
+		render(<ContextLinksSection value={[]} onChange={jest.fn()} />);
+		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
+
+		const urlInput = await screen.findByTestId('context-link-url');
+		fireEvent.focus(urlInput);
+		fireEvent.click(
+			await screen.findByTestId('context-link-variable-timestamp_start'),
+		);
+
+		expect(urlInput).toHaveValue('{{timestamp_start}}');
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/__tests__/useContextLinkVariables.test.tsx

@@ -0,0 +1,83 @@
+import { renderHook } from '@testing-library/react';
+
+import { useContextLinkVariables } from '../useContextLinkVariables';
+
+const mockUseGetDashboardV2 = jest.fn();
+const mockUseQueryBuilder = jest.fn();
+
+jest.mock(
+	'pages/DashboardPageV2/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/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters',
+	() => ({
+		dtoToFormModel: (dto: { name: string }): { name: string } => ({
+			name: dto.name,
+		}),
+	}),
+);
+
+describe('useContextLinkVariables', () => {
+	beforeEach(() => {
+		mockUseQueryBuilder.mockReturnValue({
+			currentQuery: {
+				builder: {
+					queryData: [
+						{ groupBy: [{ key: 'service.name' }, { key: 'env' }] },
+						// Duplicate across queries — must dedupe.
+						{ groupBy: [{ key: 'service.name' }] },
+					],
+				},
+			},
+		});
+		mockUseGetDashboardV2.mockReturnValue({
+			data: {
+				data: { spec: { variables: [{ name: 'region' }, { name: 'tier' }] } },
+			},
+		});
+	});
+
+	it('orders globals, then _prefixed query fields (deduped), then dashboard vars', () => {
+		const { result } = renderHook(() => useContextLinkVariables());
+
+		expect(result.current).toStrictEqual([
+			{ name: 'timestamp_start', source: 'Global timestamp' },
+			{ name: 'timestamp_end', source: 'Global timestamp' },
+			{ name: '_service.name', source: 'Query variable' },
+			{ name: '_env', source: 'Query variable' },
+			{ name: 'region', source: 'Dashboard variable' },
+			{ name: 'tier', source: 'Dashboard variable' },
+		]);
+	});
+
+	it('still returns the global timestamps when there are no queries or variables', () => {
+		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: {} } } });
+
+		const { result } = renderHook(() => useContextLinkVariables());
+
+		expect(result.current).toStrictEqual([
+			{ name: 'timestamp_start', source: 'Global timestamp' },
+			{ name: 'timestamp_end', source: 'Global timestamp' },
+		]);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/__tests__/utils.test.ts

@@ -0,0 +1,68 @@
+import {
+	getUrlParams,
+	insertVariableAtCursor,
+	isValidContextLinkUrl,
+	updateUrlWithParams,
+} from '../utils';
+
+describe('ContextLinksSection utils', () => {
+	describe('isValidContextLinkUrl', () => {
+		it.each([
+			['', true],
+			['https://signoz.io', true],
+			['http://localhost:3301/trace', true],
+			['/trace/{{_traceId}}', true],
+			['{{host}}/trace', true],
+			['trace/{{_traceId}}', false],
+			['ftp://signoz.io', false],
+		])('validates %p as %p', (url, expected) => {
+			expect(isValidContextLinkUrl(url)).toBe(expected);
+		});
+	});
+
+	describe('insertVariableAtCursor', () => {
+		it('inserts at the cursor position', () => {
+			expect(insertVariableAtCursor('/trace/', '{{id}}', 7)).toBe('/trace/{{id}}');
+			expect(insertVariableAtCursor('ab', '{{x}}', 1)).toBe('a{{x}}b');
+		});
+
+		it('appends when no cursor position is given', () => {
+			expect(insertVariableAtCursor('/trace/', '{{id}}')).toBe('/trace/{{id}}');
+		});
+	});
+
+	describe('getUrlParams', () => {
+		it('returns [] when there is no query string', () => {
+			expect(getUrlParams('/trace/{{id}}')).toStrictEqual([]);
+		});
+
+		it('parses and decodes key/value pairs', () => {
+			expect(getUrlParams('/logs?service={{svc}}&env=prod')).toStrictEqual([
+				{ key: 'service', value: '{{svc}}' },
+				{ key: 'env', value: 'prod' },
+			]);
+		});
+
+		it('double-decodes over-encoded values', () => {
+			// %257B%257B == encodeURIComponent('%7B%7B') == encodeURIComponent('{{')
+			expect(getUrlParams('/logs?q=%257B%257Bx%257D%257D')).toStrictEqual([
+				{ key: 'q', value: '{{x}}' },
+			]);
+		});
+	});
+
+	describe('updateUrlWithParams', () => {
+		it('rebuilds the query string and drops empty keys', () => {
+			expect(
+				updateUrlWithParams('/logs?old=1', [
+					{ key: 'service', value: '{{svc}}' },
+					{ key: '', value: 'ignored' },
+				]),
+			).toBe('/logs?service=%7B%7Bsvc%7D%7D');
+		});
+
+		it('drops the query string entirely when no valid params remain', () => {
+			expect(updateUrlWithParams('/logs?a=b', [])).toBe('/logs');
+		});
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Where a context-link variable comes from — shown as the right-hand label in the popover.
+ *
+ * - `Global timestamp` — the dashboard's selected time range: `timestamp_start` /
+ *   `timestamp_end`. Always available, independent of the panel or its queries.
+ * - `Query variable` — a `groupBy` field from the panel's own queries, `_`-prefixed
+ *   (e.g. `_service_name`). Resolved at click time from the data point the user clicked,
+ *   so it reflects the current query definition and changes as the queries are edited.
+ * - `Dashboard variable` — a user-defined dashboard variable from Dashboard Settings
+ *   (e.g. `env`, `region`). Shared across every panel and driven by the dashboard's
+ *   variable selectors rather than by an individual query.
+ */
+export type VariableSource =
+	| 'Global timestamp'
+	| 'Query variable'
+	| 'Dashboard variable';
+
+/** One entry in the context-link variable autocomplete. */
+export interface VariableItem {
+	/** Bare variable name without braces, e.g. `timestamp_start`, `_service_name`, `env`. */
+	name: string;
+	source: VariableSource;
+}
+
+/** A single decoded key/value pair parsed from (or written back to) a URL query string. */
+export interface UrlParam {
+	key: string;
+	value: string;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/useContextLinkVariables.ts

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { dtoToFormModel } from 'pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters';
+import { useDashboardFetchRequired } from 'pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired';
+
+import type { VariableItem } from './types';
+
+// Global time-range variables, always available (V1 parity: `timestamp_start` / `_end`).
+const GLOBAL_TIMESTAMP_VARIABLES: VariableItem[] = [
+	{ name: 'timestamp_start', source: 'Global timestamp' },
+	{ name: 'timestamp_end', source: 'Global timestamp' },
+];
+
+/**
+ * Variables offered by the context-link autocomplete, ordered as in V1: global
+ * timestamps, then per-query `groupBy` fields (prefixed `_`), then dashboard variables.
+ *
+ * Self-contained — the editor renders inside the query-builder provider and the
+ * DashboardContainer, so every source is read here rather than threaded through the
+ * section registry. The dashboard fetch dedupes against the editor page's own query.
+ */
+export function useContextLinkVariables(): VariableItem[] {
+	const { currentQuery } = useQueryBuilder();
+
+	const { variables: variableDtos } = useDashboardFetchRequired();
+
+	const dashboardVariableNames = useMemo(
+		() =>
+			variableDtos
+				.map((dto) => dtoToFormModel(dto).name)
+				.filter((name): name is string => !!name),
+		[variableDtos],
+	);
+
+	// `_`-prefixed to match V1 and avoid colliding with dashboard-variable names.
+	const fieldVariableNames = useMemo(() => {
+		const names = new Set<string>();
+		(currentQuery?.builder?.queryData ?? []).forEach((query) => {
+			(query.groupBy ?? []).forEach((field) => {
+				if (field.key) {
+					names.add(`_${field.key}`);
+				}
+			});
+		});
+		return Array.from(names);
+	}, [currentQuery?.builder?.queryData]);
+
+	return useMemo(
+		() => [
+			...GLOBAL_TIMESTAMP_VARIABLES,
+			...fieldVariableNames.map(
+				(name): VariableItem => ({ name, source: 'Query variable' }),
+			),
+			...dashboardVariableNames.map(
+				(name): VariableItem => ({ name, source: 'Dashboard variable' }),
+			),
+		],
+		[fieldVariableNames, dashboardVariableNames],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/utils.ts

@@ -0,0 +1,78 @@
+import type { UrlParam } from './types';
+
+// A link URL must be absolute (http/https), root-relative (`/path`), or start with a
+// leading `{{var}}/` segment (a variable that resolves to a host/path at click-time).
+const CONTEXT_LINK_URL_PATTERN = /^(https?:\/\/|\/|{{.*}}\/)/;
+
+/**
+ * Whether the URL is well-formed for a context link. Empty is treated as valid so the
+ * editor doesn't nag while a row is still being filled in — emptiness is a separate concern.
+ */
+export function isValidContextLinkUrl(url: string): boolean {
+	if (!url) {
+		return true;
+	}
+	return CONTEXT_LINK_URL_PATTERN.test(url);
+}
+
+/** Inserts `variable` into `current` at `cursorPosition`, or appends when it's unknown. */
+export function insertVariableAtCursor(
+	current: string,
+	variable: string,
+	cursorPosition?: number,
+): string {
+	if (cursorPosition === undefined) {
+		return current + variable;
+	}
+	return (
+		current.slice(0, cursorPosition) + variable + current.slice(cursorPosition)
+	);
+}
+
+// Values may be double-encoded on the wire; decode a second time only when it changes
+// the string, so already-single-encoded values are left intact.
+function decodeForDisplay(value: string): string {
+	const decoded = decodeURIComponent(value);
+	try {
+		const doubleDecoded = decodeURIComponent(decoded);
+		return doubleDecoded !== decoded ? doubleDecoded : decoded;
+	} catch {
+		return decoded;
+	}
+}
+
+/** Parses the `?a=b&c=d` query string of a URL into decoded key/value rows. */
+export function getUrlParams(url: string): UrlParam[] {
+	const [, queryString] = url.split('?');
+	if (!queryString) {
+		return [];
+	}
+
+	const params: UrlParam[] = [];
+	queryString.split('&').forEach((pair) => {
+		const [key, value] = pair.split('=');
+		if (key) {
+			params.push({
+				key: decodeURIComponent(key),
+				value: decodeForDisplay(value || ''),
+			});
+		}
+	});
+	return params;
+}
+
+/** Rewrites `url`'s query string from `params`, dropping rows with an empty key. */
+export function updateUrlWithParams(url: string, params: UrlParam[]): string {
+	const [baseUrl] = url.split('?');
+	const queryString = params
+		.filter((param) => param.key.trim() !== '')
+		.map(
+			(param) =>
+				`${encodeURIComponent(param.key.trim())}=${encodeURIComponent(
+					param.value,
+				)}`,
+		)
+		.join('&');
+
+	return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/VisualizationSection.tsx

@@ -3,6 +3,7 @@ import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import { EQueryType } from 'types/common/dashboard';
 
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
@@ -38,7 +39,9 @@ function VisualizationSection({
 			{controls.switchPanelKind && panelKind && onChangePanelKind && (
 				<PanelTypeSwitcher
 					panelKind={panelKind}
-					queryType={queryType}
+					// queryType is optional on the kind-erased section context, but always
+					// supplied in practice; default to Query Builder at this boundary.
+					queryType={queryType ?? EQueryType.QUERY_BUILDER}
 					signal={signal}
 					onChange={onChangePanelKind}
 				/>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder.tsx

@@ -164,7 +164,7 @@ function PanelEditorQueryBuilder({
 							<TextToolTip text="This will temporarily save the current query and graph state. This will persist across tab change" />
 							<RunQueryBtn
 								className="run-query-dashboard-btn"
-								label="Stage & Run Query"
+								label="Run Query"
 								onStageRunQuery={onStageRunQuery}
 								isLoadingQueries={isLoadingQueries}
 								handleCancelQuery={onCancelQuery}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.module.scss

@@ -49,6 +49,13 @@
 	background: var(--l2-background);
 }
 
+// Standalone View stacks the graph-manager below the chart inside the surface (it
+// must stay within the chart's PlotContext). Let it flow out of the surface so the
+// modal body scrolls as a whole, instead of clipping it or scrolling the panel.
+.surfaceStacked {
+	overflow: visible;
+}
+
 .state {
 	flex: 1;
 	display: flex;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx

@@ -1,11 +1,13 @@
 import { useState } from 'react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import PanelBody from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
 import PanelHeader from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
 import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
 import type {
 	PanelPagination,
@@ -32,6 +34,14 @@ interface PreviewPaneProps {
 	onDragSelect: (start: number, end: number) => void;
 	/** Server-side pager for raw/list panels; absent for non-paginated panels. */
 	pagination?: PanelPagination;
+	/** Render context — defaults to the editor's DASHBOARD_EDIT; the View modal passes STANDALONE_VIEW. */
+	panelMode?: PanelMode;
+	/** Hide the preview's top row entirely (query-type badge + time picker) — the View modal has its own header. */
+	hideHeader?: boolean;
+	/** Dashboard-wide preferences (cursor sync, …) forwarded to the body; the modal isolates cursor-sync. */
+	dashboardPreference?: DashboardPreference;
+	/** Close the standalone View modal — forwarded to the time-series/bar graph manager. */
+	onCloseStandaloneView?: () => void;
 }
 
 /**
@@ -50,6 +60,10 @@ function PreviewPane({
 	refetch,
 	onDragSelect,
 	pagination,
+	panelMode = PanelMode.DASHBOARD_EDIT,
+	hideHeader = false,
+	dashboardPreference,
+	onCloseStandaloneView,
 }: PreviewPaneProps): JSX.Element {
 	const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
 	const queryType = getPanelQueryType(panel);
@@ -61,18 +75,24 @@ function PreviewPane({
 
 	return (
 		<div className={styles.preview}>
-			<div className={styles.header}>
-				<PlotTag
-					queryType={queryType}
-					panelType={panelType}
-					className={styles.queryType}
-				/>
-				<div className={styles.dateTimeSelector}>
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+			{!hideHeader && (
+				<div className={styles.header}>
+					<PlotTag
+						queryType={queryType}
+						panelType={panelType}
+						className={styles.queryType}
+					/>
+					<div className={styles.dateTimeSelector}>
+						<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+					</div>
 				</div>
-			</div>
+			)}
 			<div className={styles.container}>
-				<div className={styles.surface}>
+				<div
+					className={cx(styles.surface, {
+						[styles.surfaceStacked]: panelMode === PanelMode.STANDALONE_VIEW,
+					})}
+				>
 					<PanelHeader
 						panelId={panelId}
 						panel={panel}
@@ -94,9 +114,11 @@ function PreviewPane({
 						error={error}
 						refetch={refetch}
 						onDragSelect={onDragSelect}
-						panelMode={PanelMode.DASHBOARD_EDIT}
+						panelMode={panelMode}
+						dashboardPreference={dashboardPreference}
 						searchTerm={searchable ? searchTerm : undefined}
 						pagination={pagination}
+						onCloseStandaloneView={onCloseStandaloneView}
 					/>
 				</div>
 			</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/PanelEditorContainer.test.tsx

@@ -0,0 +1,274 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+
+import PanelEditorContainer from '../index';
+
+/**
+ * Characterization test for the editor's composition: which derived values and
+ * options it forwards to the draft/query/query-sync/type-switch hooks and to its
+ * children. The leaf hooks are mocked as arg-capturing spies so this pins the
+ * wiring; it stays valid (and guards behavior) after that wiring is pulled into a
+ * shared edit-session hook, since the mocks intercept the leaf hooks either way.
+ */
+
+const mockSetSpec = jest.fn();
+const mockRefetch = jest.fn();
+const mockCancelQuery = jest.fn();
+const mockBuildSaveSpec = jest.fn((spec: unknown) => spec);
+const mockOnChangePanelKind = jest.fn();
+const mockSave = jest.fn().mockResolvedValue(undefined);
+
+const mockUseDraft = jest.fn();
+jest.mock('../hooks/usePanelEditorDraft', () => ({
+	usePanelEditorDraft: (panel: unknown): unknown => mockUseDraft(panel),
+}));
+
+const mockUseQuery = jest.fn();
+jest.mock('../../hooks/usePanelQuery', () => ({
+	usePanelQuery: (args: unknown): unknown => mockUseQuery(args),
+}));
+
+const mockUseQuerySync = jest.fn();
+jest.mock('../hooks/usePanelEditorQuerySync', () => ({
+	usePanelEditorQuerySync: (args: unknown): unknown => mockUseQuerySync(args),
+}));
+
+const mockUseTypeSwitch = jest.fn();
+jest.mock('../hooks/usePanelTypeSwitch', () => ({
+	usePanelTypeSwitch: (args: unknown): unknown => mockUseTypeSwitch(args),
+}));
+
+jest.mock('../hooks/usePanelEditorSave', () => ({
+	usePanelEditorSave: (): unknown => ({ save: mockSave, isSaving: false }),
+}));
+
+jest.mock('../hooks/useSwitchColumnsOnSignalChange', () => ({
+	useSwitchColumnsOnSignalChange: jest.fn(),
+}));
+jest.mock('../hooks/useSeedNewListColumns', () => ({
+	useSeedNewListColumns: jest.fn(),
+}));
+jest.mock('../hooks/useLegendSeries', () => ({
+	useLegendSeries: (): [] => [],
+}));
+jest.mock('../hooks/useTableColumns', () => ({
+	useTableColumns: (): [] => [],
+}));
+jest.mock('../hooks/useMetricYAxisUnit', () => ({
+	useMetricYAxisUnit: (): unknown => ({
+		metricUnit: undefined,
+		isLoading: false,
+	}),
+}));
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): unknown => ({ currentQuery: { queryType: 'builder' } }),
+}));
+jest.mock(
+	'../../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions',
+	() => ({
+		usePanelInteractions: (): unknown => ({
+			onDragSelect: jest.fn(),
+			dashboardPreference: {},
+		}),
+	}),
+);
+
+jest.mock('@signozhq/ui/resizable', () => ({
+	__esModule: true,
+	ResizablePanelGroup: ({
+		children,
+	}: {
+		children: React.ReactNode;
+	}): JSX.Element => <div>{children}</div>,
+	ResizablePanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+	ResizableHandle: (): null => null,
+	useDefaultLayout: (): unknown => ({
+		defaultLayout: undefined,
+		onLayoutChanged: jest.fn(),
+	}),
+}));
+jest.mock('@signozhq/ui/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+// Children mocked to capture props (and expose a Save trigger / footer slot).
+const mockHeaderProps = jest.fn();
+jest.mock('../Header/Header', () => ({
+	__esModule: true,
+	default: (props: { onSave: () => void }): JSX.Element => {
+		mockHeaderProps(props);
+		return (
+			<button type="button" data-testid="editor-save" onClick={props.onSave}>
+				save
+			</button>
+		);
+	},
+}));
+const mockPreviewProps = jest.fn();
+jest.mock('../PreviewPane/PreviewPane', () => ({
+	__esModule: true,
+	default: (props: unknown): JSX.Element => {
+		mockPreviewProps(props);
+		return <div data-testid="preview" />;
+	},
+}));
+const mockQbProps = jest.fn();
+jest.mock('../PanelEditorQueryBuilder/PanelEditorQueryBuilder', () => ({
+	__esModule: true,
+	default: (props: { footer?: React.ReactNode }): JSX.Element => {
+		mockQbProps(props);
+		return <div data-testid="qb">{props.footer}</div>;
+	},
+}));
+const mockConfigProps = jest.fn();
+jest.mock('../ConfigPane/ConfigPane', () => ({
+	__esModule: true,
+	default: (props: unknown): JSX.Element => {
+		mockConfigProps(props);
+		return <div data-testid="config" />;
+	},
+}));
+jest.mock('../ListColumnsEditor/ListColumnsEditor', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="list-columns" />,
+}));
+
+function makePanel(kind: string): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name: 'CPU' },
+			plugin: { kind, spec: {} },
+			queries: [],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const baseProps = {
+	dashboardId: 'dash-1',
+	panelId: 'panel-1',
+	onClose: jest.fn(),
+	onSaved: jest.fn(),
+};
+
+function setup(
+	panel: DashboardtypesPanelDTO,
+	overrides?: Partial<React.ComponentProps<typeof PanelEditorContainer>>,
+): void {
+	mockUseDraft.mockReturnValue({
+		draft: panel,
+		spec: panel.spec,
+		setSpec: mockSetSpec,
+		isSpecDirty: false,
+	});
+	mockUseQuery.mockReturnValue({
+		data: { response: undefined },
+		isFetching: false,
+		error: null,
+		cancelQuery: mockCancelQuery,
+		refetch: mockRefetch,
+		pagination: undefined,
+	});
+	mockUseQuerySync.mockReturnValue({
+		runQuery: jest.fn(),
+		isQueryDirty: false,
+		buildSaveSpec: mockBuildSaveSpec,
+	});
+	mockUseTypeSwitch.mockReturnValue({
+		onChangePanelKind: mockOnChangePanelKind,
+	});
+	render(<PanelEditorContainer {...baseProps} panel={panel} {...overrides} />);
+}
+
+describe('PanelEditorContainer composition', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	it('renders the editor shell with preview, query builder, and config pane', () => {
+		const panel = makePanel('signoz/TimeSeriesPanel');
+		setup(panel);
+
+		expect(screen.getByTestId('panel-editor-v2')).toBeInTheDocument();
+		expect(screen.getByTestId('preview')).toBeInTheDocument();
+		expect(screen.getByTestId('qb')).toBeInTheDocument();
+		expect(screen.getByTestId('config')).toBeInTheDocument();
+
+		expect(mockPreviewProps).toHaveBeenCalledWith(
+			expect.objectContaining({
+				panel,
+				panelDefinition: getPanelDefinition('signoz/TimeSeriesPanel'),
+			}),
+		);
+		expect(mockQbProps).toHaveBeenCalledWith(
+			expect.objectContaining({ panelKind: 'signoz/TimeSeriesPanel' }),
+		);
+		expect(mockConfigProps).toHaveBeenCalledWith(
+			expect.objectContaining({
+				panel,
+				spec: panel.spec,
+				onChangePanelKind: mockOnChangePanelKind,
+			}),
+		);
+	});
+
+	it('forwards the derived panel type + query-sync options to the leaf hooks', () => {
+		const panel = makePanel('signoz/TimeSeriesPanel');
+		setup(panel);
+
+		expect(mockUseQuery).toHaveBeenCalledWith(
+			expect.objectContaining({ panel, panelId: 'panel-1', enabled: true }),
+		);
+		expect(mockUseQuerySync).toHaveBeenCalledWith(
+			expect.objectContaining({
+				panelType: PANEL_TYPES.TIME_SERIES,
+				setSpec: mockSetSpec,
+				refetch: mockRefetch,
+				alwaysSerializeQuery: false,
+				signal: getPanelDefinition('signoz/TimeSeriesPanel').supportedSignals[0],
+			}),
+		);
+		expect(mockUseTypeSwitch).toHaveBeenCalledWith(
+			expect.objectContaining({
+				panelType: PANEL_TYPES.TIME_SERIES,
+				spec: panel.spec,
+				setSpec: mockSetSpec,
+			}),
+		);
+	});
+
+	it('marks a new panel dirty and always serializes its query', () => {
+		setup(makePanel('signoz/TimeSeriesPanel'), { isNew: true });
+
+		expect(mockUseQuerySync).toHaveBeenCalledWith(
+			expect.objectContaining({ alwaysSerializeQuery: true }),
+		);
+		expect(mockHeaderProps).toHaveBeenCalledWith(
+			expect.objectContaining({ isDirty: true }),
+		);
+	});
+
+	it('bakes the live query into the spec on save, then notifies', async () => {
+		const panel = makePanel('signoz/TimeSeriesPanel');
+		setup(panel, { onSaved: baseProps.onSaved });
+
+		await userEvent.click(screen.getByTestId('editor-save'));
+
+		await waitFor(() => expect(baseProps.onSaved).toHaveBeenCalled());
+		expect(mockBuildSaveSpec).toHaveBeenCalledWith(panel.spec);
+		expect(mockSave).toHaveBeenCalledWith(panel.spec);
+	});
+
+	it('renders the list-columns editor only for list panels', () => {
+		setup(makePanel('signoz/ListPanel'));
+		expect(screen.getByTestId('list-columns')).toBeInTheDocument();
+	});
+
+	it('omits the list-columns editor for non-list panels', () => {
+		setup(makePanel('signoz/TimeSeriesPanel'));
+		expect(screen.queryByTestId('list-columns')).not.toBeInTheDocument();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditSession.ts

@@ -0,0 +1,119 @@
+import type {
+	DashboardtypesPanelDTO,
+	DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type { PANEL_TYPES } from 'constants/queryBuilder';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import {
+	usePanelQuery,
+	type PanelQueryTimeOverride,
+	type UsePanelQueryResult,
+} from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
+
+import { usePanelEditorDraft } from './usePanelEditorDraft';
+import { usePanelEditorQuerySync } from './usePanelEditorQuerySync';
+import { usePanelTypeSwitch } from './usePanelTypeSwitch';
+
+interface UsePanelEditSessionArgs {
+	panel: DashboardtypesPanelDTO;
+	panelId: string;
+	/** Per-view time window (epoch ms); omit to follow the dashboard's global window. */
+	time?: PanelQueryTimeOverride;
+	/** Serialize the live builder query into the spec on save even if unchanged (new panels). */
+	alwaysSerializeQuery?: boolean;
+	/** Seed an empty builder with the kind's default signal (new panels) — off for drilldown. */
+	seedQuerySignal?: boolean;
+}
+
+export interface UsePanelEditSessionReturn {
+	/** Local editable copy of the panel — the preview renders this, not the saved panel. */
+	draft: DashboardtypesPanelDTO;
+	spec: DashboardtypesPanelSpecDTO;
+	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
+	isSpecDirty: boolean;
+	/** Restore the draft to the originally-loaded panel. */
+	reset: () => void;
+	/** Draft kind → V1 panel type (drives the query builder + preview). */
+	panelType: PANEL_TYPES;
+	panelDefinition: RenderablePanelDefinition;
+	/** The kind's first supported signal — seeds new queries/columns. */
+	defaultSignal: TelemetrytypesSignalDTO;
+	/** Shared query result for the draft over the resolved time window. */
+	query: UsePanelQueryResult;
+	/** Stage & run the live builder query into the draft. */
+	runQuery: () => void;
+	isQueryDirty: boolean;
+	/** Bake the live (possibly un-run) query into a spec — for save / editor handoff. */
+	buildSaveSpec: (
+		spec: DashboardtypesPanelSpecDTO,
+	) => DashboardtypesPanelSpecDTO;
+	/** Switch the draft's visualization kind in place (reversible per session). */
+	onChangePanelKind: (kind: PanelKind) => void;
+}
+
+/**
+ * The panel-editing pipeline shared by the full-page editor and the View modal's
+ * drilldown editor: a local draft, its query result over the resolved time window,
+ * the staged-query sync, and the visualization-kind switch. Each consumer layers its
+ * own concerns on top (the editor adds save + list seeding; the modal adds per-view
+ * time isolation + reset). Keeping the wiring here stops the two from drifting.
+ */
+export function usePanelEditSession({
+	panel,
+	panelId,
+	time,
+	alwaysSerializeQuery = false,
+	seedQuerySignal = false,
+}: UsePanelEditSessionArgs): UsePanelEditSessionReturn {
+	const { draft, spec, setSpec, isSpecDirty, reset } =
+		usePanelEditorDraft(panel);
+
+	const panelKind = draft.spec.plugin.kind;
+	const panelDefinition = getPanelDefinition(panelKind);
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
+	const defaultSignal = panelDefinition.supportedSignals[0];
+
+	const query = usePanelQuery({
+		panel: draft,
+		panelId,
+		time,
+		enabled: !!panelDefinition,
+	});
+
+	const { runQuery, isQueryDirty, buildSaveSpec } = usePanelEditorQuerySync({
+		draft,
+		panelType,
+		setSpec,
+		refetch: query.refetch,
+		alwaysSerializeQuery,
+		signal: seedQuerySignal ? defaultSignal : undefined,
+	});
+
+	const { onChangePanelKind } = usePanelTypeSwitch({
+		spec: draft.spec,
+		panelType,
+		setSpec,
+	});
+
+	return {
+		draft,
+		spec,
+		setSpec,
+		isSpecDirty,
+		reset,
+		panelType,
+		panelDefinition,
+		defaultSignal,
+		query,
+		runQuery,
+		isQueryDirty,
+		buildSaveSpec,
+		onChangePanelKind,
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx

@@ -12,13 +12,7 @@ import {
 	type DashboardtypesPanelSpecDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-import {
-	PANEL_KIND_TO_PANEL_TYPE,
-	type PanelKind,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
 
 import { getExecStats } from '../queryV5/v5ResponseData';
@@ -29,12 +23,9 @@ import layoutStorage from './layoutStorage';
 import PanelEditorQueryBuilder from './PanelEditorQueryBuilder/PanelEditorQueryBuilder';
 import PreviewPane from './PreviewPane/PreviewPane';
 import { useLegendSeries } from './hooks/useLegendSeries';
-import { usePanelQuery } from '../hooks/usePanelQuery';
-import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
-import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
 import { useMetricYAxisUnit } from './hooks/useMetricYAxisUnit';
+import { usePanelEditSession } from './hooks/usePanelEditSession';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
-import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
 import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
 import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
 import { useTableColumns } from './hooks/useTableColumns';
@@ -70,7 +61,36 @@ function PanelEditorContainer({
 	onClose,
 	onSaved,
 }: PanelEditorContainerProps): JSX.Element {
-	const { draft, spec, setSpec, isSpecDirty } = usePanelEditorDraft(panel);
+	// Shared editing pipeline (draft + query + staged-query sync + kind switch). A new
+	// panel always serializes its seed query and seeds the builder's default signal.
+	const {
+		draft,
+		spec,
+		setSpec,
+		isSpecDirty,
+		panelDefinition,
+		defaultSignal,
+		query,
+		runQuery,
+		isQueryDirty,
+		buildSaveSpec,
+		onChangePanelKind,
+	} = usePanelEditSession({
+		panel,
+		panelId,
+		alwaysSerializeQuery: isNew,
+		seedQuerySignal: true,
+	});
+	const {
+		data,
+		isFetching,
+		isPreviousData,
+		error,
+		cancelQuery,
+		refetch,
+		pagination,
+	} = query;
+
 	// Live query type (the selected tab) — the type switcher disables kinds that can't be
 	// authored in it. Read from the provider, not the spec: a new panel's spec carries no
 	// query until staged, so the spec would lag the tab.
@@ -94,44 +114,7 @@ function PanelEditorContainer({
 		storage: layoutStorage,
 	});
 
-	// Panel kind → V1 panel type, which drives the query builder and preview.
-	const fullKind = draft.spec.plugin.kind;
-	const panelType =
-		(fullKind && PANEL_KIND_TO_PANEL_TYPE[fullKind as PanelKind]) ??
-		PANEL_TYPES.TIME_SERIES;
-
-	// One shared query result for the whole editor; the preview renders it.
-	const panelDefinition = getPanelDefinition(draft.spec.plugin.kind);
-	const {
-		data,
-		isFetching,
-		isPreviousData,
-		error,
-		cancelQuery,
-		refetch,
-		pagination,
-	} = usePanelQuery({
-		panel: draft,
-		panelId,
-		enabled: !!panelDefinition,
-	});
-
-	// A new panel's default signal (its kind's first supported) — seeds the query and columns.
-	const defaultSignal = panelDefinition.supportedSignals[0];
-
-	const { runQuery, isQueryDirty, buildSaveSpec } = usePanelEditorQuerySync({
-		draft,
-		panelType,
-		setSpec,
-		refetch,
-		// New panel's seed query is the builder default, not a real saved query —
-		// always serialize it on save.
-		alwaysSerializeQuery: isNew,
-		signal: defaultSignal,
-	});
-
-	// Switch the panel's visualization kind in place (reversible per session).
-	const { onChangePanelKind } = usePanelTypeSwitch({ spec, panelType, setSpec });
+	const panelKind = draft.spec.plugin.kind;
 
 	// At editor level, not the collapsible FormattingSection, so seeding runs while closed.
 	const formattingUnit = (
@@ -163,7 +146,7 @@ function PanelEditorContainer({
 	// Spec and query dirtiness are tracked independently so query re-serialization
 	// never false-dirties. A new panel is always savable (you're creating it).
 	const isDirty = isNew || isSpecDirty || isQueryDirty;
-	const isListPanel = fullKind === 'signoz/ListPanel';
+	const isListPanel = panelKind === 'signoz/ListPanel';
 	// The builder-query `signal` literal matches the TelemetrytypesSignalDTO enum
 	// values; cast at this boundary (as ConfigPane does) so the columns editor's
 	// field-key lookup is typed.
@@ -253,7 +236,7 @@ function PanelEditorContainer({
 							<ResizableHandle withHandle className={styles.handle} />
 							<ResizablePanel minSize="35%" maxSize="45%" defaultSize="40%">
 								<PanelEditorQueryBuilder
-									panelKind={fullKind}
+									panelKind={panelKind}
 									signal={listSignal}
 									isLoadingQueries={isFetching}
 									onStageRunQuery={runQuery}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/panelEditorHandoff.ts

@@ -0,0 +1,10 @@
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Router location state for opening the panel editor pre-loaded with edits instead of
+ * the saved panel. The View modal sets this so "Switch to Edit Mode" carries its
+ * drilldown-edited spec (queries/plugin) into the editor.
+ */
+export interface PanelEditorHandoffState {
+	editSpec?: DashboardtypesPanelSpecDTO;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useMemo, useRef } from 'react';
 import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
@@ -37,6 +39,7 @@ function BarPanelRenderer({
 	onDragSelect,
 	dashboardPreference,
 	panelMode,
+	onCloseStandaloneView,
 }: PanelRendererProps<'signoz/BarChartPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -114,6 +117,32 @@ function BarPanelRenderer({
 		return resolveLegendPosition(spec.legend?.position);
 	}, [spec.legend?.position]);
 
+	// The standalone View modal shows V1's graph-manager legend below the chart:
+	// Filter Series + per-series show/hide + Save. Series visibility auto-persists to
+	// localStorage (STANDALONE_VIEW selection prefs), keyed by panelId.
+	const layoutChildren = useMemo(
+		() =>
+			panelMode === PanelMode.STANDALONE_VIEW ? (
+				<div className={PanelStyles.chartManagerContainer}>
+					<ChartManager
+						config={config}
+						alignedData={chartData}
+						yAxisUnit={spec.formatting?.unit}
+						decimalPrecision={decimalPrecision}
+						onCancel={onCloseStandaloneView}
+					/>
+				</div>
+			) : null,
+		[
+			panelMode,
+			config,
+			chartData,
+			spec.formatting?.unit,
+			decimalPrecision,
+			onCloseStandaloneView,
+		],
+	);
+
 	const renderTooltipFooter = useCallback(
 		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
 			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
@@ -147,6 +176,7 @@ function BarPanelRenderer({
 						config={config}
 						data={chartData}
 						legendConfig={{ position: legendPosition }}
+						layoutChildren={layoutChildren}
 						groupByPerQuery={groupByPerQuery}
 						canPinTooltip
 						timezone={timezone}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useMemo, useRef } from 'react';
 import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
+import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
@@ -37,6 +39,7 @@ function TimeSeriesPanelRenderer({
 	onDragSelect,
 	dashboardPreference,
 	panelMode,
+	onCloseStandaloneView,
 }: PanelRendererProps<'signoz/TimeSeriesPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -115,6 +118,32 @@ function TimeSeriesPanelRenderer({
 		return resolveLegendPosition(spec.legend?.position);
 	}, [spec.legend?.position]);
 
+	// The standalone View modal shows V1's graph-manager legend below the chart:
+	// Filter Series + per-series show/hide + Save. Series visibility auto-persists to
+	// localStorage (STANDALONE_VIEW selection prefs), keyed by panelId.
+	const layoutChildren = useMemo(
+		() =>
+			panelMode === PanelMode.STANDALONE_VIEW ? (
+				<div className={PanelStyles.chartManagerContainer}>
+					<ChartManager
+						config={config}
+						alignedData={chartData}
+						yAxisUnit={spec.formatting?.unit}
+						decimalPrecision={decimalPrecision}
+						onCancel={onCloseStandaloneView}
+					/>
+				</div>
+			) : null,
+		[
+			panelMode,
+			config,
+			chartData,
+			spec.formatting?.unit,
+			decimalPrecision,
+			onCloseStandaloneView,
+		],
+	);
+
 	const renderTooltipFooter = useCallback(
 		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
 			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
@@ -148,6 +177,7 @@ function TimeSeriesPanelRenderer({
 						config={config}
 						data={chartData}
 						legendConfig={{ position: legendPosition }}
+						layoutChildren={layoutChildren}
 						groupByPerQuery={groupByPerQuery}
 						canPinTooltip
 						timezone={timezone}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/panel.module.scss

@@ -7,3 +7,7 @@
 	height: 100%;
 	position: relative;
 }
+
+.chartManagerContainer {
+	padding: 36px 0;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/interactions.ts

@@ -22,6 +22,9 @@ export type PanelClickEvent =
 
 type DragSelect = (start: number, end: number) => void;
 
+/** Close the standalone View modal — fired by the chart's graph-manager Save/Cancel. */
+type CloseStandaloneView = () => void;
+
 /**
  * Per-kind interaction props — each kind exposes only the gestures it supports.
  * Keyed by `PanelKind`; `PanelRendererProps<K>` indexes this, so a missing kind
@@ -31,10 +34,12 @@ export type PanelInteractionMap = Record<PanelKind, object> & {
 	'signoz/TimeSeriesPanel': {
 		onClick?: (event: ChartClickEvent) => void;
 		onDragSelect?: DragSelect;
+		onCloseStandaloneView?: CloseStandaloneView;
 	};
 	'signoz/BarChartPanel': {
 		onClick?: (event: ChartClickEvent) => void;
 		onDragSelect?: DragSelect;
+		onCloseStandaloneView?: CloseStandaloneView;
 	};
 	'signoz/HistogramPanel': { onClick?: (event: ChartClickEvent) => void };
 	'signoz/TablePanel': { onClick?: (event: TableClickEvent) => void };
@@ -50,4 +55,5 @@ export type PanelInteractionMap = Record<PanelKind, object> & {
 export interface AnyPanelInteractionProps {
 	onClick?: (event: PanelClickEvent) => void;
 	onDragSelect?: DragSelect;
+	onCloseStandaloneView?: CloseStandaloneView;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind.ts

@@ -17,3 +17,15 @@ export const PANEL_KIND_TO_PANEL_TYPE: Record<PanelKind, PANEL_TYPES> = {
 	'signoz/HistogramPanel': PANEL_TYPES.HISTOGRAM,
 	'signoz/ListPanel': PANEL_TYPES.LIST,
 };
+
+/**
+ * Reverse of {@link PANEL_KIND_TO_PANEL_TYPE} — the mapping is a bijection, so every
+ * panel kind round-trips. Partial because `PANEL_TYPES` also has types with no V2 kind
+ * (e.g. trace/empty); a lookup on those returns `undefined`.
+ */
+export const PANEL_TYPE_TO_PANEL_KIND: Partial<Record<PANEL_TYPES, PanelKind>> =
+	Object.fromEntries(
+		(Object.entries(PANEL_KIND_TO_PANEL_TYPE) as [PanelKind, PANEL_TYPES][]).map(
+			([kind, type]) => [type, kind],
+		),
+	);

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/__tests__/buildViewPanelSpec.test.ts

@@ -0,0 +1,73 @@
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getSwitchedPluginSpec } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec';
+import { PANEL_TYPE_TO_PANEL_KIND } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import { toPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { buildViewPanelSpec } from '../buildViewPanelSpec';
+
+// The query conversion + kind-switch spec builder are tested in their own suites; here we
+// isolate buildViewPanelSpec's branching (same kind vs. kind switch).
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters',
+	() => ({ toPerses: jest.fn(() => [{ kind: 'mock-query' }]) }),
+);
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec',
+	() => ({ getSwitchedPluginSpec: jest.fn(() => ({ switched: true })) }),
+);
+
+const query = {} as Query;
+
+function specOfKind(kind: string): DashboardtypesPanelSpecDTO {
+	return {
+		plugin: { kind, spec: { formatting: {} } },
+		queries: [],
+		display: { name: 'panel' },
+	} as unknown as DashboardtypesPanelSpecDTO;
+}
+
+describe('PANEL_TYPE_TO_PANEL_KIND', () => {
+	it('is the inverse of the kind→type map', () => {
+		expect(PANEL_TYPE_TO_PANEL_KIND[PANEL_TYPES.VALUE]).toBe(
+			'signoz/NumberPanel',
+		);
+		expect(PANEL_TYPE_TO_PANEL_KIND[PANEL_TYPES.TABLE]).toBe('signoz/TablePanel');
+		expect(PANEL_TYPE_TO_PANEL_KIND[PANEL_TYPES.TIME_SERIES]).toBe(
+			'signoz/TimeSeriesPanel',
+		);
+	});
+});
+
+describe('buildViewPanelSpec', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	it('keeps the kind and only swaps the queries when the target type matches', () => {
+		const spec = specOfKind('signoz/TimeSeriesPanel');
+		const result = buildViewPanelSpec({
+			spec,
+			query,
+			panelType: PANEL_TYPES.TIME_SERIES,
+		});
+
+		expect(result.plugin.kind).toBe('signoz/TimeSeriesPanel');
+		expect(result.plugin.spec).toBe(spec.plugin.spec);
+		expect(result.queries).toStrictEqual([{ kind: 'mock-query' }]);
+		expect(toPerses).toHaveBeenCalledWith(query, PANEL_TYPES.TIME_SERIES);
+		expect(getSwitchedPluginSpec).not.toHaveBeenCalled();
+	});
+
+	it('switches the kind (Value → Table) and rebuilds the plugin spec', () => {
+		const result = buildViewPanelSpec({
+			spec: specOfKind('signoz/NumberPanel'),
+			query,
+			panelType: PANEL_TYPES.TABLE,
+		});
+
+		expect(result.plugin.kind).toBe('signoz/TablePanel');
+		expect(result.plugin.spec).toStrictEqual({ switched: true });
+		expect(getSwitchedPluginSpec).toHaveBeenCalled();
+		expect(toPerses).toHaveBeenCalledWith(query, PANEL_TYPES.TABLE);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/buildViewPanelSpec.ts

@@ -0,0 +1,52 @@
+import type {
+	DashboardtypesPanelPluginDTO,
+	DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type { PANEL_TYPES } from 'constants/queryBuilder';
+import { getSwitchedPluginSpec } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec';
+import {
+	PANEL_TYPE_TO_PANEL_KIND,
+	type PanelKind,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import { toPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getBuilderQueries } from '../getBuilderQueries';
+
+/**
+ * Bakes a V1 query + target panel type into a View-modal spec (drilldown seed + URL re-hydration).
+ * When `panelType` maps to a different kind than the panel's (e.g. a breakout turns Value → Table),
+ * the kind is switched via the editor's `getSwitchedPluginSpec` so it opens with populated config.
+ */
+export function buildViewPanelSpec({
+	spec,
+	query,
+	panelType,
+}: {
+	spec: DashboardtypesPanelSpecDTO;
+	query: Query;
+	panelType: PANEL_TYPES;
+}): DashboardtypesPanelSpecDTO {
+	const queries = toPerses(query, panelType);
+	const currentKind = spec.plugin.kind as PanelKind;
+	const newKind = PANEL_TYPE_TO_PANEL_KIND[panelType] ?? currentKind;
+
+	if (newKind === currentKind) {
+		return { ...spec, queries };
+	}
+
+	// The plugin cast mirrors the editor's type-switch — a dynamically chosen kind can't be
+	// correlated with its spec statically.
+	const signal = getBuilderQueries(spec.queries)[0]
+		?.signal as TelemetrytypesSignalDTO;
+	return {
+		...spec,
+		plugin: {
+			...spec.plugin,
+			kind: newKind,
+			spec: getSwitchedPluginSpec(spec, newKind, signal),
+		} as DashboardtypesPanelPluginDTO,
+		queries,
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/__tests__/usePanelActionItems.test.tsx

@@ -14,6 +14,19 @@ jest.mock(
 	}),
 );
 
+const mockOpenView = jest.fn();
+jest.mock('../../hooks/useViewPanel', () => ({
+	useViewPanel: (): {
+		openView: jest.Mock;
+		closeView: jest.Mock;
+		expandedPanelId: string | null;
+	} => ({
+		openView: mockOpenView,
+		closeView: jest.fn(),
+		expandedPanelId: null,
+	}),
+}));
+
 const mockMovePanel = jest.fn();
 jest.mock('../../hooks/useMovePanelToSection', () => ({
 	useMovePanelToSection: (): jest.Mock => mockMovePanel,
@@ -264,18 +277,13 @@ describe('usePanelActionItems', () => {
 		});
 	});
 
-	it('not-yet-implemented actions (view) fire the placeholder alert with the feature name', () => {
-		const alertSpy = jest.spyOn(window, 'alert').mockImplementation(() => {});
+	it('view opens the View modal for the panel', () => {
 		const { result } = renderHook(() => usePanelActionItems(baseArgs));
-
 		const view = result.current.items.find(
 			(i) => 'key' in i && i.key === 'view-panel',
 		);
 		(view as { onClick: () => void }).onClick();
-
-		expect(alertSpy).toHaveBeenCalledTimes(1);
-		expect(alertSpy).toHaveBeenCalledWith('View option clicked');
-		alertSpy.mockRestore();
+		expect(mockOpenView).toHaveBeenCalledWith('panel-1');
 	});
 
 	it('create-alert seeds an alert from this panel', () => {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/usePanelActionItems.tsx

@@ -30,6 +30,7 @@ import {
 	type MovePanelArgs,
 	useMovePanelToSection,
 } from '../hooks/useMovePanelToSection';
+import { useViewPanel } from '../hooks/useViewPanel';
 import { PANEL_ACTION_META } from './panelActionMeta';
 
 // Stable fallback so renders without layout context don't churn the mutation
@@ -146,6 +147,7 @@ export function usePanelActionItems({
 	const isEditable = useDashboardStore((s) => s.isEditable);
 	const openPanelEditor = useOpenPanelEditor();
 	const createAlert = useCreateAlertFromPanel();
+	const { openView } = useViewPanel();
 
 	// Mutations are store-backed (dashboardId/refetch) — the layout tree only
 	// supplies data (`sections`), so no callbacks are threaded through it.
@@ -178,7 +180,7 @@ export function usePanelActionItems({
 				key: 'view-panel',
 				label: 'View',
 				icon: <Fullscreen size={14} />,
-				onClick: (): void => notImplementedYet('View'),
+				onClick: (): void => openView(panelId),
 			});
 		}
 		if (isEditable && canEditWidget && panelCapabilities.edit) {
@@ -263,6 +265,7 @@ export function usePanelActionItems({
 		panelActions,
 		sections,
 		panelId,
+		openView,
 		openPanelEditor,
 		createAlert,
 		movePanel,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody.tsx

@@ -35,6 +35,8 @@ interface PanelBodyProps {
 	searchTerm?: string;
 	/** Server-side paging handles — only consumed by raw/list renderers. */
 	pagination?: PanelPagination;
+	/** Close the standalone View modal — only consumed by the time-series/bar graph manager. */
+	onCloseStandaloneView?: () => void;
 }
 
 /**
@@ -55,6 +57,7 @@ function PanelBody({
 	panelMode = PanelMode.DASHBOARD_VIEW,
 	searchTerm,
 	pagination,
+	onCloseStandaloneView,
 }: PanelBodyProps): JSX.Element {
 	// A retained response (keepPreviousData) counts as data only if its type matches the current
 	// request — else a prior panel kind's response (time_series → raw) flashes NoData on switch.
@@ -121,6 +124,7 @@ function PanelBody({
 				dashboardPreference={dashboardPreference}
 				searchTerm={searchTerm}
 				pagination={pagination}
+				onCloseStandaloneView={onCloseStandaloneView}
 			/>
 		</div>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeaderSearch.module.scss

@@ -1,9 +1,17 @@
 // Expanded state: a compact input that fits the header row.
 .input {
-	width: 180px;
+	width: min(100%, 320px);
+	height: 24px;
 }
 
 .clear {
 	--button-height: 18px;
+	--button-width: 18px;
 	--button-padding: 0;
 }
+
+.searchTrigger {
+	--button-width: 24px;
+	--button-height: 24px;
+	--button-padding: 4px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeaderSearch.tsx

@@ -43,6 +43,7 @@ function PanelHeaderSearch({
 					color="secondary"
 					size="icon"
 					onClick={(): void => setExpanded(true)}
+					className={styles.searchTrigger}
 					data-testid="panel-header-search-trigger"
 					aria-label="Search"
 				>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModal.module.scss

@@ -0,0 +1,63 @@
+@use '../../../../../../styles/scrollbar' as *;
+
+.modal {
+	:global(.ant-modal-body) {
+		padding: 0px;
+	}
+}
+
+// Truncate a long panel name so the header stays on one line; the wrapping tooltip
+// then surfaces the full name on hover.
+.title {
+	display: inline-block;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	vertical-align: bottom;
+}
+
+// Tall, fixed-height column so the renderer's resize observer measures real
+// dimensions — the chart self-sizes to fill whatever space it's given.
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	height: 78vh;
+	overflow: auto;
+	padding: 12px;
+
+	@include custom-scrollbar;
+}
+
+.queryBuilder {
+	flex: 0 0 auto;
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+}
+
+.toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 8px;
+	flex: 0 0 auto;
+}
+
+.toolbarTime {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	min-height: 480px;
+}
+
+.panelTypeSelector {
+	width: 240px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModal.tsx

@@ -0,0 +1,52 @@
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import { Modal } from 'antd';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+
+import ViewPanelModalContent from './ViewPanelModalContent';
+import styles from './ViewPanelModal.module.scss';
+
+interface ViewPanelModalProps {
+	/**
+	 * The expanded panel and its id. Absent while the modal is closed — a single
+	 * host instance lives at the layout level and only carries a panel when open.
+	 */
+	panel?: DashboardtypesPanelDTO;
+	panelId?: string;
+	open: boolean;
+	onClose: () => void;
+}
+
+function ViewPanelModal({
+	panel,
+	panelId,
+	open,
+	onClose,
+}: ViewPanelModalProps): JSX.Element {
+	const name = panel?.spec.display.name ?? '';
+
+	return (
+		<Modal
+			open={open}
+			onCancel={onClose}
+			footer={null}
+			centered
+			width="85%"
+			destroyOnClose
+			className={styles.modal}
+			title={
+				<TooltipSimple title={name} arrow>
+					<Typography.Text className={styles.title}>
+						{name} - (View mode)
+					</Typography.Text>
+				</TooltipSimple>
+			}
+		>
+			{open && panel && panelId && (
+				<ViewPanelModalContent panel={panel} panelId={panelId} onClose={onClose} />
+			)}
+		</Modal>
+	);
+}
+
+export default ViewPanelModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModalContent.tsx

@@ -0,0 +1,125 @@
+import { useMemo } from 'react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import PanelEditorQueryBuilder from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder';
+import PreviewPane from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane';
+import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
+import { useOpenPanelEditor } from 'pages/DashboardPageV2/DashboardContainer/hooks/useOpenPanelEditor';
+
+import { usePanelInteractions } from '../hooks/usePanelInteractions';
+import ViewPanelModalHeader from './ViewPanelModalHeader';
+import { useViewPanelMode } from './useViewPanelMode';
+import { useViewPanelTimeWindow } from './useViewPanelTimeWindow';
+import styles from './ViewPanelModal.module.scss';
+
+interface ViewPanelModalContentProps {
+	panel: DashboardtypesPanelDTO;
+	panelId: string;
+	/** Close the modal — wired to the graph manager's Save/Cancel. */
+	onClose: () => void;
+}
+
+/**
+ * Body of the View modal: a compact drilldown editor. It renders an editable draft of
+ * the panel (preview) over a per-view time window plus the shared query builder, so the
+ * user can tweak + Stage & Run without touching the dashboard. Edits are temporary.
+ */
+function ViewPanelModalContent({
+	panel,
+	panelId,
+	onClose,
+}: ViewPanelModalContentProps): JSX.Element | null {
+	const {
+		timeOverride,
+		selectedInterval,
+		onTimeChange,
+		refreshWindow,
+		onDragSelect,
+	} = useViewPanelTimeWindow();
+
+	const {
+		draft,
+		panelDefinition,
+		signal,
+		queryType,
+		query,
+		runQuery,
+		onChangePanelKind,
+		resetQuery,
+		buildSaveSpec,
+	} = useViewPanelMode({ panel, panelId, time: timeOverride });
+	const { data, isFetching, error, refetch, cancelQuery, pagination } = query;
+
+	// Drag-to-zoom stays inside the modal; opt the chart out of the dashboard's
+	// cursor-sync group so a drag here can't replay onto the grid panels.
+	const { dashboardPreference } = usePanelInteractions();
+	const isolatedPreference = useMemo<DashboardPreference>(
+		() => ({ ...dashboardPreference, syncMode: DashboardCursorSync.None }),
+		[dashboardPreference],
+	);
+	const openPanelEditor = useOpenPanelEditor();
+
+	// The View action only appears for registered kinds, so this is defensive.
+	if (!panelDefinition) {
+		return null;
+	}
+
+	return (
+		<div className={styles.content} data-testid="view-panel-modal-content">
+			<ViewPanelModalHeader
+				selectedInterval={selectedInterval}
+				startMs={timeOverride.startMs}
+				endMs={timeOverride.endMs}
+				onTimeChange={onTimeChange}
+				isFetching={isFetching}
+				onRefresh={(): void => {
+					// Relative windows re-anchor to now (new key → refetch); a fixed
+					// custom window just re-runs the same query.
+					if (selectedInterval === 'custom') {
+						refetch();
+					} else {
+						refreshWindow();
+					}
+				}}
+				onSwitchToEdit={(): void =>
+					// Carry the drilldown edits so the editor opens on them, not the saved panel.
+					openPanelEditor(panelId, { editSpec: buildSaveSpec(draft.spec) })
+				}
+				panelKind={draft.spec.plugin.kind}
+				queryType={queryType}
+				signal={signal}
+				onChangePanelKind={onChangePanelKind}
+				onResetQuery={resetQuery}
+			/>
+			<div className={styles.queryBuilder}>
+				<PanelEditorQueryBuilder
+					panelKind={draft.spec.plugin.kind}
+					signal={signal}
+					isLoadingQueries={isFetching}
+					onStageRunQuery={runQuery}
+					onCancelQuery={cancelQuery}
+				/>
+			</div>
+			<div className={styles.body}>
+				<PreviewPane
+					panelId={panelId}
+					panel={draft}
+					panelDefinition={panelDefinition}
+					data={data}
+					isFetching={isFetching}
+					error={error}
+					refetch={refetch}
+					onDragSelect={onDragSelect}
+					pagination={pagination}
+					panelMode={PanelMode.STANDALONE_VIEW}
+					dashboardPreference={isolatedPreference}
+					onCloseStandaloneView={onClose}
+					hideHeader
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default ViewPanelModalContent;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModalHeader.tsx

@@ -0,0 +1,123 @@
+import { PenLine, RotateCw } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import type {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { usePanelTypeSelectItems } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/usePanelTypeSelectItems';
+import ConfigSelect from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSelect/ConfigSelect';
+import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import type { EQueryType } from 'types/common/dashboard';
+
+import styles from './ViewPanelModal.module.scss';
+
+interface ViewPanelModalHeaderProps {
+	selectedInterval: Time | CustomTimeType;
+	/** Current window bounds (epoch ms) — seed the picker's modal display. */
+	startMs: number;
+	endMs: number;
+	onTimeChange: (
+		interval: Time | CustomTimeType,
+		range?: [number, number],
+	) => void;
+	/** Any query in flight — spins the refresh icon and disables it. */
+	isFetching: boolean;
+	onRefresh: () => void;
+	onSwitchToEdit: () => void;
+	/** Draft's current kind (selected value of the panel-type selector). */
+	panelKind: PanelKind;
+	/**
+	 * The active query-builder tab (Query Builder / PromQL / ClickHouse). The type
+	 * selector greys out kinds that can't be authored in it — e.g. List is
+	 * Query-Builder-only, so PromQL/ClickHouse disable it.
+	 */
+	queryType: EQueryType;
+	/** Current builder datasource — greys out kinds that don't support it (e.g. List needs logs/traces, not metrics). */
+	signal: TelemetrytypesSignalDTO;
+	onChangePanelKind: (kind: PanelKind) => void;
+	/** Restore the saved query + kind (drilldown reset). */
+	onResetQuery: () => void;
+}
+
+/**
+ * Toolbar for the View modal: reset the drilldown, open the full editor, switch the
+ * visualization kind, pick a per-view time window (isolated from the dashboard), and
+ * refresh. Mirrors V1's FullView header controls.
+ */
+function ViewPanelModalHeader({
+	selectedInterval,
+	startMs,
+	endMs,
+	onTimeChange,
+	isFetching,
+	onRefresh,
+	onSwitchToEdit,
+	panelKind,
+	queryType,
+	signal,
+	onChangePanelKind,
+	onResetQuery,
+}: ViewPanelModalHeaderProps): JSX.Element {
+	// 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({ queryType, signal });
+
+	return (
+		<div className={styles.toolbar}>
+			<div className={styles.panelTypeSelector}>
+				<ConfigSelect<PanelKind>
+					testId="view-panel-type-selector"
+					value={panelKind}
+					items={panelTypeItems}
+					onChange={onChangePanelKind}
+				/>
+			</div>
+			<Button
+				variant="outlined"
+				color="secondary"
+				prefix={<PenLine />}
+				onClick={onSwitchToEdit}
+				data-testid="view-panel-switch-to-edit"
+			>
+				Switch to Edit Mode
+			</Button>
+			<Button
+				variant="link"
+				color="primary"
+				onClick={onResetQuery}
+				data-testid="view-panel-reset-query"
+			>
+				Reset Query
+			</Button>
+			<div className={styles.toolbarTime}>
+				<DateTimeSelectionV2
+					showAutoRefresh={false}
+					showRefreshText={false}
+					hideShareModal
+					isModalTimeSelection
+					disableUrlSync
+					onTimeChange={onTimeChange}
+					modalSelectedInterval={selectedInterval as Time}
+					modalInitialStartTime={startMs}
+					modalInitialEndTime={endMs}
+				/>
+				<Button
+					size="icon"
+					variant="solid"
+					color="primary"
+					onClick={onRefresh}
+					disabled={isFetching}
+					aria-label="Refresh"
+					data-testid="view-panel-refresh"
+				>
+					<RotateCw className={cx({ 'animate-spin': isFetching })} />
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default ViewPanelModalHeader;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/useViewPanelMode.ts

@@ -0,0 +1,139 @@
+import { useCallback, useMemo } from 'react';
+import type {
+	DashboardtypesPanelDTO,
+	DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { usePanelEditSession } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditSession';
+import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import { resolveSignal } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
+import { buildViewPanelSpec } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/buildViewPanelSpec';
+import { fromPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+import {
+	type PanelQueryTimeOverride,
+	type UsePanelQueryResult,
+} from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
+import type { EQueryType } from 'types/common/dashboard';
+
+interface UseViewPanelModeArgs {
+	panel: DashboardtypesPanelDTO;
+	panelId: string;
+	/** Per-view time window (epoch ms); isolates the preview from the dashboard. */
+	time: PanelQueryTimeOverride;
+}
+
+export interface UseViewPanelModeReturn {
+	/** Local editable copy of the panel — the preview renders this, not the saved panel. */
+	draft: DashboardtypesPanelDTO;
+	/** Resolved renderer for the draft's current kind (registry always resolves a kind). */
+	panelDefinition: RenderablePanelDefinition;
+	/**
+	 * Builder datasource driving the query builder and the panel-type selector's
+	 * disabled rule. Resolved from the query, falling back to the kind's default
+	 * signal, so it's always defined.
+	 */
+	signal: TelemetrytypesSignalDTO;
+	/** Active query type (selected builder tab) — drives the panel-type selector's disabled rule. */
+	queryType: EQueryType;
+	/** Query result for the draft over the per-view window. */
+	query: UsePanelQueryResult;
+	/** Stage & run the live builder query into the draft (drilldown; not persisted). */
+	runQuery: () => void;
+	/** Switch the draft's visualization kind (temporary; reversible per session). */
+	onChangePanelKind: (kind: PanelKind) => void;
+	/** Restore the query the view opened with, discarding in-modal edits. */
+	resetQuery: () => void;
+	/** Bake the live (possibly un-run) query into a spec — used to hand edits to the full editor. */
+	buildSaveSpec: (
+		spec: DashboardtypesPanelSpecDTO,
+	) => DashboardtypesPanelSpecDTO;
+}
+
+/**
+ * The View modal's compact drilldown editor on the shared `usePanelEditSession`. Edits are
+ * temporary — they live in the builder/URL + draft, never the dashboard (V1 parity).
+ */
+export function useViewPanelMode({
+	panel,
+	panelId,
+	time,
+}: UseViewPanelModeArgs): UseViewPanelModeReturn {
+	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
+
+	// Seed the draft from the URL (`compositeQuery` + `graphType`) when present, else the saved
+	// panel — mount-only, so a refresh re-seeds from the URL and in-modal edits survive (V1 parity).
+	const urlQuery = useGetCompositeQueryParam();
+	const urlGraphType = useUrlQuery().get(
+		QueryParams.graphType,
+	) as PANEL_TYPES | null;
+	const initialPanel = useMemo<DashboardtypesPanelDTO>(
+		() =>
+			urlQuery
+				? {
+						...panel,
+						spec: buildViewPanelSpec({
+							spec: panel.spec,
+							query: urlQuery,
+							panelType:
+								urlGraphType ?? PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind],
+						}),
+					}
+				: panel,
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only seed from the URL
+		[],
+	);
+
+	const {
+		draft,
+		panelDefinition,
+		defaultSignal,
+		query,
+		runQuery,
+		onChangePanelKind,
+		buildSaveSpec,
+		reset,
+	} = usePanelEditSession({ panel: initialPanel, panelId, time });
+
+	// The query the view opened with, captured once — the Reset target.
+	const savedQuery = useMemo(
+		() =>
+			fromPerses(
+				panel.spec.queries,
+				PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind],
+			),
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only snapshot
+		[],
+	);
+
+	const resetQuery = useCallback((): void => {
+		reset();
+		redirectWithQueryBuilderData(savedQuery);
+	}, [reset, redirectWithQueryBuilderData, savedQuery]);
+
+	// Current builder datasource — resolved the same way as the full editor's
+	// ConfigPane so the two selectors stay in sync, then defaulted to the kind's first
+	// signal (PromQL/ClickHouse carry none) so the query builder always has one.
+	const signal =
+		resolveSignal(draft.spec.queries, defaultSignal) ?? defaultSignal;
+
+	return {
+		draft,
+		panelDefinition,
+		signal,
+		queryType: currentQuery.queryType,
+		query,
+		runQuery,
+		onChangePanelKind,
+		resetQuery,
+		buildSaveSpec,
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/useViewPanelTimeWindow.ts

@@ -0,0 +1,108 @@
+import { useCallback, useMemo, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports -- global time still lives in redux
+import { useSelector } from 'react-redux';
+import type {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import GetMinMax from 'lib/getMinMax';
+import type { PanelQueryTimeOverride } from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+const NS_PER_MS = 1e6;
+
+export interface ViewPanelTimeWindow {
+	/** Absolute window (epoch ms) to pass to usePanelQuery as a time override. */
+	timeOverride: PanelQueryTimeOverride;
+	/** Interval shown in the picker — a relative `Time` or `'custom'`. */
+	selectedInterval: Time | CustomTimeType;
+	/** Apply a selection from DateTimeSelectionV2 (modal mode). */
+	onTimeChange: (
+		interval: Time | CustomTimeType,
+		range?: [number, number],
+	) => void;
+	/** Re-anchor a relative window to "now" (manual refresh); no-op for custom. */
+	refreshWindow: () => void;
+	/** Drag-to-zoom on a time chart → set a custom window locally (not the dashboard's). */
+	onDragSelect: (start: number, end: number) => void;
+}
+
+/**
+ * Per-view time window for the panel View modal, isolated from the dashboard's
+ * global time (V1 parity: the modal's time selector doesn't move the grid). Seeded
+ * once from the current global window, then owned locally. Relative intervals
+ * resolve to an absolute ms window via the same `GetMinMax` the app-wide picker uses.
+ */
+export function useViewPanelTimeWindow(): ViewPanelTimeWindow {
+	const { selectedTime, minTime, maxTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
+	const [selectedInterval, setSelectedInterval] = useState<
+		Time | CustomTimeType
+	>(selectedTime as Time);
+	const [timeOverride, setTimeOverride] = useState<PanelQueryTimeOverride>(
+		() => ({
+			startMs: Math.floor(minTime / NS_PER_MS),
+			endMs: Math.floor(maxTime / NS_PER_MS),
+		}),
+	);
+
+	const onTimeChange = useCallback(
+		(interval: Time | CustomTimeType, range?: [number, number]): void => {
+			setSelectedInterval(interval);
+			// Absolute range comes through directly (already epoch ms).
+			if (interval === 'custom' && range) {
+				setTimeOverride({
+					startMs: Math.floor(range[0]),
+					endMs: Math.floor(range[1]),
+				});
+				return;
+			}
+			// GetMinMax returns nanoseconds — convert to the ms window we work in.
+			const { minTime: startNs, maxTime: endNs } = GetMinMax(interval);
+			setTimeOverride({
+				startMs: Math.floor(startNs / NS_PER_MS),
+				endMs: Math.floor(endNs / NS_PER_MS),
+			});
+		},
+		[],
+	);
+
+	const refreshWindow = useCallback((): void => {
+		// A custom window is fixed; only relative intervals re-anchor to now.
+		if (selectedInterval === 'custom') {
+			return;
+		}
+		const { minTime: startNs, maxTime: endNs } = GetMinMax(selectedInterval);
+		setTimeOverride({
+			startMs: Math.floor(startNs / NS_PER_MS),
+			endMs: Math.floor(endNs / NS_PER_MS),
+		});
+	}, [selectedInterval]);
+
+	const onDragSelect = useCallback((start: number, end: number): void => {
+		// Drag values are already epoch ms (same as the global custom range).
+		const startMs = Math.floor(start);
+		const endMs = Math.floor(end);
+		// Ignore a click / zero-width or inverted selection.
+		if (startMs >= endMs) {
+			return;
+		}
+		setSelectedInterval('custom');
+		setTimeOverride({ startMs, endMs });
+	}, []);
+
+	return useMemo(
+		() => ({
+			timeOverride,
+			selectedInterval,
+			onTimeChange,
+			refreshWindow,
+			onDragSelect,
+		}),
+		[timeOverride, selectedInterval, onTimeChange, refreshWindow, onDragSelect],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/ViewPanelModal.test.tsx

@@ -0,0 +1,177 @@
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactElement } from 'react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+import ViewPanelModal from '../ViewPanelModal/ViewPanelModal';
+
+// The preview reuses the edit page's PreviewPane (chart + header + heavy render
+// path); stub it (capturing props) so this suite asserts the modal shell + what it
+// threads down, not the preview internals (PreviewPane/PanelHeader own those).
+const mockPreviewPaneRender = jest.fn();
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane',
+	() =>
+		function MockPreviewPane(props: Record<string, unknown>): ReactElement {
+			mockPreviewPaneRender(props);
+			return <div data-testid="preview-pane" />;
+		},
+);
+
+// Isolate from the draft/query-builder plumbing (its own suite covers it).
+jest.mock('../ViewPanelModal/useViewPanelMode', () => ({
+	useViewPanelMode: (args: {
+		panel: { spec: { plugin: { kind: string } } };
+	}): unknown => {
+		const { kind } = args.panel.spec.plugin;
+		return {
+			draft: args.panel,
+			panelDefinition: {
+				kind,
+				actions: { search: kind === 'signoz/ListPanel' },
+				Renderer: (): null => null,
+			},
+			query: {
+				data: { response: undefined, requestPayload: undefined, legendMap: {} },
+				isLoading: false,
+				isFetching: false,
+				error: null,
+				refetch: jest.fn(),
+				cancelQuery: jest.fn(),
+				pagination: undefined,
+			},
+			runQuery: jest.fn(),
+			onChangePanelKind: jest.fn(),
+			resetQuery: jest.fn(),
+			signal: 'logs',
+			buildSaveSpec: (spec: unknown): unknown => spec,
+		};
+	},
+}));
+
+// The View modal reuses the edit page's query builder, which reads the global
+// QueryBuilder context and pulls in the ClickHouse/PromQL editors; stub it here.
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder',
+	() =>
+		function MockPanelEditorQueryBuilder(): ReactElement {
+			return <div data-testid="panel-editor-v2-query-builder" />;
+		},
+);
+
+jest.mock('../hooks/usePanelInteractions', () => ({
+	usePanelInteractions: (): unknown => ({
+		onDragSelect: jest.fn(),
+		dashboardPreference: { syncMode: 0 },
+	}),
+}));
+
+// The header mounts DateTimeSelectionV2 (redux + router + heavy deps); stub it so
+// this suite asserts the modal body, not the toolbar internals.
+jest.mock(
+	'../ViewPanelModal/ViewPanelModalHeader',
+	() =>
+		function MockViewPanelModalHeader(): ReactElement {
+			return <div data-testid="view-panel-header" />;
+		},
+);
+
+jest.mock('../ViewPanelModal/useViewPanelTimeWindow', () => ({
+	useViewPanelTimeWindow: (): unknown => ({
+		timeOverride: { startMs: 0, endMs: 0 },
+		selectedInterval: '5m',
+		onTimeChange: jest.fn(),
+		refreshWindow: jest.fn(),
+		onDragSelect: jest.fn(),
+	}),
+}));
+
+const mockOpenEditor = jest.fn();
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/hooks/useOpenPanelEditor',
+	() => ({
+		useOpenPanelEditor: (): jest.Mock => mockOpenEditor,
+	}),
+);
+
+const renderWithProvider = (ui: ReactElement): ReturnType<typeof render> =>
+	render(<TooltipProvider>{ui}</TooltipProvider>);
+
+function makePanel(kind: string, name = 'My panel'): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name },
+			plugin: { kind, spec: {} },
+			queries: [],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+describe('ViewPanelModal', () => {
+	it('renders nothing until opened', () => {
+		renderWithProvider(
+			<ViewPanelModal
+				panel={makePanel('signoz/TimeSeriesPanel')}
+				panelId="p1"
+				open={false}
+				onClose={jest.fn()}
+			/>,
+		);
+		expect(
+			screen.queryByTestId('view-panel-modal-content'),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders the header, query builder, and preview when open', () => {
+		renderWithProvider(
+			<ViewPanelModal
+				panel={makePanel('signoz/TimeSeriesPanel', 'CPU usage')}
+				panelId="p1"
+				open
+				onClose={jest.fn()}
+			/>,
+		);
+		expect(screen.getByTestId('view-panel-modal-content')).toBeInTheDocument();
+		expect(screen.getByTestId('view-panel-header')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('panel-editor-v2-query-builder'),
+		).toBeInTheDocument();
+		expect(screen.getByTestId('preview-pane')).toBeInTheDocument();
+	});
+
+	it('invokes onClose when the modal is dismissed', async () => {
+		const user = userEvent.setup();
+		const onClose = jest.fn();
+		renderWithProvider(
+			<ViewPanelModal
+				panel={makePanel('signoz/TimeSeriesPanel')}
+				panelId="p1"
+				open
+				onClose={onClose}
+			/>,
+		);
+		await user.click(screen.getByLabelText('Close'));
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	// Charts share one global cursor-sync key and uPlot replays drag across the
+	// group; the modal must opt out so a drag here can't move the dashboard's time.
+	it('opts the chart out of the dashboard cursor-sync group', () => {
+		mockPreviewPaneRender.mockClear();
+		renderWithProvider(
+			<ViewPanelModal
+				panel={makePanel('signoz/TimeSeriesPanel')}
+				panelId="p1"
+				open
+				onClose={jest.fn()}
+			/>,
+		);
+		const props = mockPreviewPaneRender.mock.calls.at(-1)?.[0] as {
+			dashboardPreference?: { syncMode?: unknown };
+		};
+		expect(props.dashboardPreference?.syncMode).toBe(DashboardCursorSync.None);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useViewPanelTimeWindow.test.ts

@@ -0,0 +1,93 @@
+import { act, renderHook } from '@testing-library/react';
+import GetMinMax from 'lib/getMinMax';
+
+import { useViewPanelTimeWindow } from '../ViewPanelModal/useViewPanelTimeWindow';
+
+const NS_PER_MS = 1e6;
+
+// Global time is stored in nanoseconds; the hook must surface milliseconds.
+const mockState = {
+	globalTime: {
+		selectedTime: '6h',
+		minTime: 6_000_000 * NS_PER_MS,
+		maxTime: 7_000_000 * NS_PER_MS,
+	},
+};
+
+jest.mock('react-redux', () => ({
+	useSelector: (selector: (s: unknown) => unknown): unknown =>
+		selector(mockState),
+}));
+
+jest.mock('lib/getMinMax', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockGetMinMax = GetMinMax as unknown as jest.Mock;
+
+describe('useViewPanelTimeWindow', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('seeds the window from global time, converting ns → ms', () => {
+		const { result } = renderHook(() => useViewPanelTimeWindow());
+
+		expect(result.current.timeOverride).toStrictEqual({
+			startMs: mockState.globalTime.minTime / NS_PER_MS,
+			endMs: mockState.globalTime.maxTime / NS_PER_MS,
+		});
+		expect(result.current.selectedInterval).toBe('6h');
+	});
+
+	it('converts GetMinMax (ns) to ms on a relative selection', () => {
+		mockGetMinMax.mockReturnValue({
+			minTime: 1_700_000_000_000 * NS_PER_MS,
+			maxTime: 1_700_000_300_000 * NS_PER_MS,
+		});
+		const { result } = renderHook(() => useViewPanelTimeWindow());
+
+		act(() => result.current.onTimeChange('5m'));
+
+		expect(result.current.selectedInterval).toBe('5m');
+		expect(result.current.timeOverride).toStrictEqual({
+			startMs: 1_700_000_000_000,
+			endMs: 1_700_000_300_000,
+		});
+	});
+
+	it('uses an absolute custom range as-is (already ms)', () => {
+		const { result } = renderHook(() => useViewPanelTimeWindow());
+
+		act(() => result.current.onTimeChange('custom', [111, 222]));
+
+		expect(mockGetMinMax).not.toHaveBeenCalled();
+		expect(result.current.timeOverride).toStrictEqual({
+			startMs: 111,
+			endMs: 222,
+		});
+	});
+
+	it('sets a custom window from a drag selection (modal-local, ms)', () => {
+		const { result } = renderHook(() => useViewPanelTimeWindow());
+
+		act(() => result.current.onDragSelect(1000, 5000));
+
+		expect(result.current.selectedInterval).toBe('custom');
+		expect(result.current.timeOverride).toStrictEqual({
+			startMs: 1000,
+			endMs: 5000,
+		});
+	});
+
+	it('ignores a zero-width or inverted drag selection', () => {
+		const { result } = renderHook(() => useViewPanelTimeWindow());
+		const initial = result.current.timeOverride;
+
+		act(() => result.current.onDragSelect(5000, 5000));
+		act(() => result.current.onDragSelect(9000, 1000));
+
+		expect(result.current.timeOverride).toStrictEqual(initial);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useViewPanel.ts

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import { QueryParams } from 'constants/query';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+
+export interface UseViewPanelApi {
+	/** Panel id currently expanded in the View modal; null when none is open. */
+	expandedPanelId: string | null;
+	/** Open the View modal on the saved panel (clears any leftover in-modal query/kind). */
+	openView: (panelId: string) => void;
+	/** Close the View modal by clearing the URL param. */
+	closeView: () => void;
+}
+
+/**
+ * Drives the panel View modal off the `expandedWidgetId` URL param (V1 parity):
+ * the open state is shareable, survives refresh, and the browser back-button
+ * closes it. Reuses V1's param key so a deep-linked V1 URL maps cleanly.
+ */
+export function useViewPanel(): UseViewPanelApi {
+	const { safeNavigate } = useSafeNavigate();
+	const { pathname } = useLocation();
+	const urlQuery = useUrlQuery();
+
+	const expandedPanelId = urlQuery.get(QueryParams.expandedWidgetId);
+
+	const openView = useCallback(
+		(panelId: string): void => {
+			// Copy before mutating: useUrlQuery returns a memoized instance.
+			const next = new URLSearchParams(urlQuery);
+			next.set(QueryParams.expandedWidgetId, panelId);
+			// Drop any leftover in-modal query/kind so a plain View opens on the saved
+			// panel, not a stale URL query the modal would otherwise hydrate from.
+			next.delete(QueryParams.compositeQuery);
+			next.delete(QueryParams.graphType);
+			safeNavigate(`${pathname}?${next.toString()}`);
+		},
+		[pathname, safeNavigate, urlQuery],
+	);
+
+	const closeView = useCallback((): void => {
+		const next = new URLSearchParams(urlQuery);
+		next.delete(QueryParams.expandedWidgetId);
+		// Drop the drilldown editor's URL state so it doesn't leak to the dashboard
+		// (the in-modal query builder writes compositeQuery, V1 parity).
+		next.delete(QueryParams.compositeQuery);
+		next.delete(QueryParams.graphType);
+		const search = next.toString();
+		safeNavigate(search ? `${pathname}?${search}` : pathname);
+	}, [pathname, safeNavigate, urlQuery]);
+
+	return { expandedPanelId, openView, closeView };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/index.tsx

@@ -8,6 +8,8 @@ import type {
 import { useDashboardStore } from '../store/useDashboardStore';
 import { layoutsToSections } from '../utils';
 import DashboardEmptyState from './DashboardEmptyState/DashboardEmptyState';
+import { useViewPanel } from './Panel/hooks/useViewPanel';
+import ViewPanelModal from './Panel/ViewPanelModal/ViewPanelModal';
 import Section from './Section/Section/Section';
 import SectionList from './Section/SectionList';
 import styles from './PanelsAndSectionsLayout.module.scss';
@@ -26,6 +28,12 @@ function PanelsAndSectionsLayout({
 }: PanelsAndSectionsLayoutProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
 
+	// Single View-modal host for the whole dashboard, driven by the URL
+	// (`expandedWidgetId`). One mounted modal beats one-per-panel: no N location
+	// subscriptions, and the expanded panel is looked up by id from the map.
+	const { expandedPanelId, closeView } = useViewPanel();
+	const expandedPanel = expandedPanelId ? panels[expandedPanelId] : undefined;
+
 	const sections = useMemo(
 		() => layoutsToSections(layouts, panels),
 		[layouts, panels],
@@ -56,7 +64,17 @@ function PanelsAndSectionsLayout({
 		));
 	};
 
-	return <div className={styles.body}>{renderContent()}</div>;
+	return (
+		<div className={styles.body}>
+			{renderContent()}
+			<ViewPanelModal
+				open={!!expandedPanel}
+				panel={expandedPanel}
+				panelId={expandedPanelId ?? undefined}
+				onClose={closeView}
+			/>
+		</div>
+	);
 }
 
 export default PanelsAndSectionsLayout;

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/__tests__/useDashboardFetchRequired.test.tsx

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/react';
+
+import { useDashboardFetchRequired } from '../useDashboardFetchRequired';
+
+const mockUseGetDashboardV2 = jest.fn();
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore',
+	() => ({
+		useDashboardStore: (
+			selector: (s: { dashboardId: string }) => unknown,
+		): unknown => selector({ dashboardId: 'dash-1' }),
+	}),
+);
+
+jest.mock('api/generated/services/dashboard', () => ({
+	useGetDashboardV2: (): unknown => mockUseGetDashboardV2(),
+}));
+
+describe('useDashboardFetchRequired', () => {
+	it('returns the loaded dashboard and its variables', () => {
+		const dashboard = {
+			spec: { variables: [{ name: 'region' }, { name: 'tier' }] },
+		};
+		mockUseGetDashboardV2.mockReturnValue({ data: { data: dashboard } });
+
+		const { result } = renderHook(() => useDashboardFetchRequired());
+
+		expect(result.current.dashboard).toBe(dashboard);
+		expect(result.current.variables).toStrictEqual([
+			{ name: 'region' },
+			{ name: 'tier' },
+		]);
+	});
+
+	it('normalizes variables to an empty array when the spec has none', () => {
+		mockUseGetDashboardV2.mockReturnValue({ data: { data: { spec: {} } } });
+
+		const { result } = renderHook(() => useDashboardFetchRequired());
+
+		expect(result.current.variables).toStrictEqual([]);
+	});
+
+	it('throws when used outside a loaded dashboard subtree', () => {
+		mockUseGetDashboardV2.mockReturnValue({ data: undefined });
+
+		// Suppress React's expected render-error logging for this case.
+		const consoleError = jest
+			.spyOn(console, 'error')
+			.mockImplementation(() => undefined);
+
+		expect(() => renderHook(() => useDashboardFetchRequired())).toThrow(
+			/outside a loaded dashboard subtree/,
+		);
+
+		consoleError.mockRestore();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetch.ts

@@ -0,0 +1,40 @@
+import {
+	getDashboardV2,
+	useGetDashboardV2,
+} from 'api/generated/services/dashboard';
+import type { GetDashboardV2QueryError } from 'api/generated/services/dashboard';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+// Instantiation expression pins `TData`/`TError` to the hook's defaults; a plain
+// `ReturnType<typeof useGetDashboardV2>` collapses the generics to `unknown`.
+type GetDashboardV2Query = ReturnType<
+	typeof useGetDashboardV2<
+		Awaited<ReturnType<typeof getDashboardV2>>,
+		GetDashboardV2QueryError
+	>
+>;
+
+export interface UseDashboardFetchResult {
+	dashboard: DashboardtypesGettableDashboardV2DTO | undefined;
+	isLoading: GetDashboardV2Query['isLoading'];
+	isError: GetDashboardV2Query['isError'];
+	error: GetDashboardV2Query['error'];
+	refetch: GetDashboardV2Query['refetch'];
+}
+
+/**
+ * Canonical fetch-only loader for a V2 dashboard by id — shared so the page, panel
+ * editor, and config sections resolve to one react-query cache entry. Exposes just the
+ * raw `dashboard` plus lifecycle; spec derivation (e.g. `variables`) lives in
+ * `useDashboardFetchRequired`, where the dashboard is guaranteed present.
+ */
+export function useDashboardFetch(
+	dashboardId: string,
+): UseDashboardFetchResult {
+	const { data, isLoading, isError, error, refetch } = useGetDashboardV2({
+		id: dashboardId,
+	});
+	const dashboard = data?.data;
+
+	return { dashboard, isLoading, isError, error, refetch };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired.ts

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import type {
+	DashboardtypesGettableDashboardV2DTO,
+	DashboardtypesVariableDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
+
+import { useDashboardFetch } from './useDashboardFetch';
+import type { UseDashboardFetchResult } from './useDashboardFetch';
+
+export interface UseDashboardFetchRequiredResult {
+	/** Guaranteed present — the hook throws otherwise. */
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+	/** Always an array, so callers skip `?? []` guards. */
+	variables: DashboardtypesVariableDTO[];
+	refetch: UseDashboardFetchResult['refetch'];
+}
+
+/**
+ * Dashboard accessor for components rendered inside a loaded dashboard subtree. The
+ * root pages own the fetch and gate on a resolved dashboard before mounting their
+ * subtree, so this reuses the shared react-query cache entry and throws if the
+ * dashboard is missing — turning a silent `undefined` into a loud programmer error. It
+ * also derives spec collections (`variables`) since the dashboard is guaranteed here.
+ *
+ * Prefer this over `useDashboardFetch` outside the two root pages; the
+ * `signoz/no-dashboard-fetch-outside-root` lint rule enforces the split.
+ */
+export function useDashboardFetchRequired(): UseDashboardFetchRequiredResult {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const { dashboard, refetch } = useDashboardFetch(dashboardId);
+
+	const variables = useMemo(
+		() => dashboard?.spec?.variables ?? [],
+		[dashboard?.spec?.variables],
+	);
+
+	if (!dashboard) {
+		throw new Error(
+			'useDashboardFetchRequired was used outside a loaded dashboard subtree — the ' +
+				'dashboard is undefined. Only call it below a root page that gates rendering ' +
+				'on useDashboardFetch (DashboardPageV2 / PanelEditorPage).',
+		);
+	}
+
+	return { dashboard, variables, refetch };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useOpenPanelEditor.ts

@@ -3,21 +3,28 @@ import { generatePath } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 
+import type { PanelEditorHandoffState } from '../PanelEditor/panelEditorHandoff';
 import { useDashboardStore } from '../store/useDashboardStore';
 
 /**
  * Returns a callback that opens the V2 panel editor by navigating to its full-page route
  * (`/dashboard/:dashboardId/panel/:panelId`). The dashboard id comes from the store, so any
- * caller can open the editor with just the panel id.
+ * caller can open the editor with just the panel id. The optional `handoffState` is passed as
+ * router location state — the View modal uses it to hand its drilldown-edited spec off to the
+ * editor (view → edit) so the editor opens on those edits rather than the saved panel.
  */
-export function useOpenPanelEditor(): (panelId: string) => void {
+export function useOpenPanelEditor(): (
+	panelId: string,
+	handoffState?: PanelEditorHandoffState,
+) => void {
 	const { safeNavigate } = useSafeNavigate();
 	const dashboardId = useDashboardStore((s) => s.dashboardId);
 
 	return useCallback(
-		(panelId: string): void => {
+		(panelId: string, handoffState?: PanelEditorHandoffState): void => {
 			safeNavigate(
 				generatePath(ROUTES.DASHBOARD_PANEL_EDITOR, { dashboardId, panelId }),
+				handoffState ? { state: handoffState } : undefined,
 			);
 		},
 		[safeNavigate, dashboardId],

frontend/src/pages/DashboardPageV2/DashboardContainer/index.tsx

@@ -22,9 +22,13 @@ function DashboardContainer({
 	dashboard,
 	refetch,
 }: DashboardContainerProps): JSX.Element {
+	const spec = dashboard.spec;
+	const image = dashboard.image || Base64Icons[0];
+	const name = spec.display.name;
+
 	useEffect(() => {
-		document.title = dashboard.name;
-	}, [dashboard.name]);
+		document.title = name;
+	}, [name]);
 
 	const fullScreenHandle = useFullScreenHandle();
 
@@ -55,10 +59,6 @@ function DashboardContainer({
 	// the store, so each panel's query substitutes the bar's selected values.
 	useResolvedVariables(dashboard);
 
-	const spec = dashboard.spec;
-	const image = dashboard.image || Base64Icons[0];
-	const name = spec.display.name;
-
 	return (
 		<FullScreen handle={fullScreenHandle}>
 			<div className={styles.container}>

frontend/src/pages/DashboardPageV2/DashboardPageV2.tsx

@@ -1,20 +1,17 @@
 import { useParams } from 'react-router-dom';
 
 import { Typography } from '@signozhq/ui/typography';
-import { useGetDashboardV2 } from 'api/generated/services/dashboard';
 import Spinner from 'components/Spinner';
 
 import DashboardContainer from './DashboardContainer';
+import { useDashboardFetch } from './DashboardContainer/hooks/useDashboardFetch';
 import styles from './DashboardPageV2.module.scss';
 
 function DashboardPageV2(): JSX.Element {
 	const { dashboardId } = useParams<{ dashboardId: string }>();
 
-	const { data, isLoading, isError, error, refetch } = useGetDashboardV2({
-		id: dashboardId,
-	});
-
-	const dashboard = data?.data;
+	const { dashboard, isLoading, isError, error, refetch } =
+		useDashboardFetch(dashboardId);
 
 	if (isLoading) {
 		return <Spinner tip="Loading dashboard..." />;

frontend/src/pages/DashboardPageV2/PanelEditorPage/PanelEditorPage.tsx

@@ -6,16 +6,17 @@ import {
 	useParams,
 } from 'react-router-dom';
 import { Typography } from '@signozhq/ui/typography';
-import { useGetDashboardV2 } from 'api/generated/services/dashboard';
 import Spinner from 'components/Spinner';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 
+import { useDashboardFetch } from '../DashboardContainer/hooks/useDashboardFetch';
 import { getPanelDefinition } from '../DashboardContainer/Panels/registry';
 import { buildPluginSpec } from '../DashboardContainer/Panels/utils/buildPluginSpec';
 import { buildDefaultQueries } from '../DashboardContainer/Panels/utils/buildDefaultQueries';
 import PanelEditorContainer from '../DashboardContainer/PanelEditor';
+import type { PanelEditorHandoffState } from '../DashboardContainer/PanelEditor/panelEditorHandoff';
 import {
 	parseNewPanelKind,
 	parseNewPanelLayoutIndex,
@@ -32,29 +33,34 @@ function PanelEditorPage(): JSX.Element {
 		dashboardId: string;
 		panelId: string;
 	}>();
-	const { search } = useLocation();
+	const { search, state } = useLocation();
 	const { safeNavigate } = useSafeNavigate();
 
-	const { data, isLoading, isError, error } = useGetDashboardV2({
-		id: dashboardId,
-	});
-	const dashboard = data?.data;
+	// Edits handed off from the View modal's drilldown — open the editor on these
+	// instead of the saved panel. Lost on refresh/new-tab, which falls back to saved.
+	const handoffSpec = (state as PanelEditorHandoffState | null)?.editSpec;
+
+	const { dashboard, isLoading, isError, error } =
+		useDashboardFetch(dashboardId);
 
 	// A `panel/new?panelKind=…` route means "create": seed a default panel of that
 	// kind rather than looking one up. Persisted (with a real id) only on save.
 	const newKind = parseNewPanelKind(panelId, search);
 	const existingPanel = dashboard?.spec.panels[panelId];
-	const panel = useMemo(
-		() =>
-			newKind
-				? createDefaultPanel(
-						newKind,
-						buildPluginSpec(getPanelDefinition(newKind).sections),
-						buildDefaultQueries(newKind),
-					)
-				: existingPanel,
-		[newKind, existingPanel],
-	);
+	const panel = useMemo(() => {
+		if (newKind) {
+			return createDefaultPanel(
+				newKind,
+				buildPluginSpec(getPanelDefinition(newKind).sections),
+				buildDefaultQueries(newKind),
+			);
+		}
+		if (!existingPanel) {
+			return undefined;
+		}
+		// Open on the modal's drilldown edits when handed off; else the saved panel.
+		return handoffSpec ? { ...existingPanel, spec: handoffSpec } : existingPanel;
+	}, [newKind, existingPanel, handoffSpec]);
 
 	// Target section for a newly-created panel (set by the "Add panel" trigger).
 	const layoutIndex = parseNewPanelLayoutIndex(search);

pkg/apiserver/signozapiserver/dashboard.go

@@ -421,5 +421,61 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 		return err
 	}
 
+	if err := router.Handle("/api/v2/public/dashboards/{id}", handler.New(provider.authzMiddleware.CheckWithoutClaims(
+		provider.dashboardHandler.GetPublicDataV2,
+		authtypes.Relation{Verb: coretypes.VerbRead},
+		coretypes.ResourceMetaResourcePublicDashboard,
+		func(req *http.Request, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
+			id, err := valuer.NewUUID(mux.Vars(req)["id"])
+			if err != nil {
+				return nil, valuer.UUID{}, err
+			}
+
+			return provider.dashboardModule.GetPublicDashboardSelectorsAndOrg(req.Context(), id, orgs)
+		}, []string{}), handler.OpenAPIDef{
+		ID:                  "GetPublicDashboardDataV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Get public dashboard data (v2)",
+		Description:         "This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(dashboardtypes.GettablePublicDashboardDataV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newAnonymousSecuritySchemes([]string{coretypes.ResourceMetaResourcePublicDashboard.Scope(coretypes.VerbRead)}),
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/public/dashboards/{id}/panels/{key}/query_range", handler.New(provider.authzMiddleware.CheckWithoutClaims(
+		provider.dashboardHandler.GetPublicWidgetQueryRangeV2,
+		authtypes.Relation{Verb: coretypes.VerbRead},
+		coretypes.ResourceMetaResourcePublicDashboard,
+		func(req *http.Request, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
+			id, err := valuer.NewUUID(mux.Vars(req)["id"])
+			if err != nil {
+				return nil, valuer.UUID{}, err
+			}
+
+			return provider.dashboardModule.GetPublicDashboardSelectorsAndOrg(req.Context(), id, orgs)
+		}, []string{}), handler.OpenAPIDef{
+		ID:                  "GetPublicDashboardPanelQueryRangeV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Get query range result (v2)",
+		Description:         "This endpoint returns query range results for a panel of a v2-shape public dashboard. The panel is addressed by its key in spec.panels.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(querybuildertypesv5.QueryRangeResponse),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newAnonymousSecuritySchemes([]string{coretypes.ResourceMetaResourcePublicDashboard.Scope(coretypes.VerbRead)}),
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
 	return nil
 }

pkg/apiserver/signozapiserver/llmpricingrule.go

@@ -49,6 +49,26 @@ func (provider *provider) addLLMPricingRuleRoutes(router *mux.Router) error {
 		return err
 	}
 
+	if err := router.Handle("/api/v1/llm_pricing_rules/unmapped_models", handler.New(
+		provider.authzMiddleware.ViewAccess(provider.llmPricingRuleHandler.ListUnmappedModels),
+		handler.OpenAPIDef{
+			ID:                  "ListUnmappedLLMModels",
+			Tags:                []string{"llmpricingrules"},
+			Summary:             "List unmapped models",
+			Description:         "Returns models seen in the last hour of trace data (gen_ai.request.model) that no pricing rule pattern matches, so the user can add them to an existing rule or create a new one.",
+			Request:             nil,
+			RequestContentType:  "",
+			Response:            new(llmpricingruletypes.GettableUnmappedModels),
+			ResponseContentType: "application/json",
+			SuccessStatusCode:   http.StatusOK,
+			ErrorStatusCodes:    []int{http.StatusBadRequest},
+			Deprecated:          false,
+			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		},
+	)).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
 	if err := router.Handle("/api/v1/llm_pricing_rules/{id}", handler.New(
 		provider.authzMiddleware.ViewAccess(provider.llmPricingRuleHandler.Get),
 		handler.OpenAPIDef{

pkg/modules/dashboard/dashboard.go

@@ -81,6 +81,12 @@ type Module interface {
 
 	DeletePreferencesForUser(ctx context.Context, orgID valuer.UUID, userID valuer.UUID) error
 
+	// get the v2 dashboard data by public dashboard id
+	GetDashboardByPublicIDV2(context.Context, valuer.UUID) (*dashboardtypes.DashboardV2, error)
+
+	// gets the query results by panel key and public shared id for a v2 dashboard
+	GetPublicWidgetQueryRangeV2(ctx context.Context, id valuer.UUID, panelKey, startTimeRaw, endTimeRaw string) (*querybuildertypesv5.QueryRangeResponse, error)
+
 	CreateView(ctx context.Context, orgID valuer.UUID, postable dashboardtypes.PostableDashboardView) (*dashboardtypes.DashboardView, error)
 
 	ListViews(ctx context.Context, orgID valuer.UUID) (*dashboardtypes.ListableDashboardView, error)
@@ -101,6 +107,10 @@ type Handler interface {
 
 	GetPublicWidgetQueryRange(http.ResponseWriter, *http.Request)
 
+	GetPublicDataV2(http.ResponseWriter, *http.Request)
+
+	GetPublicWidgetQueryRangeV2(http.ResponseWriter, *http.Request)
+
 	UpdatePublic(http.ResponseWriter, *http.Request)
 
 	DeletePublic(http.ResponseWriter, *http.Request)

pkg/modules/dashboard/impldashboard/module.go

@@ -254,6 +254,14 @@ func (module *module) GetPublicWidgetQueryRange(context.Context, valuer.UUID, ui
 	return nil, errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
 }
 
+func (module *module) GetDashboardByPublicIDV2(_ context.Context, _ valuer.UUID) (*dashboardtypes.DashboardV2, error) {
+	return nil, errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
+}
+
+func (module *module) GetPublicWidgetQueryRangeV2(context.Context, valuer.UUID, string, string, string) (*qbtypes.QueryRangeResponse, error) {
+	return nil, errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
+}
+
 func (module *module) GetPublicDashboardSelectorsAndOrg(_ context.Context, _ valuer.UUID, _ []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
 	return nil, valuer.UUID{}, errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
 }

pkg/modules/dashboard/impldashboard/v2_handler.go

@@ -376,3 +376,53 @@ func (handler *handler) DeleteV2(rw http.ResponseWriter, r *http.Request) {
 
 	render.Success(rw, http.StatusNoContent, nil)
 }
+
+func (handler *handler) GetPublicDataV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	id, err := valuer.NewUUID(mux.Vars(r)["id"])
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.GetDashboardByPublicIDV2(ctx, id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	publicDashboard, err := handler.module.GetPublic(ctx, dashboard.OrgID, dashboard.ID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, dashboardtypes.NewPublicDashboardDataFromDashboardV2(dashboard, publicDashboard))
+}
+
+func (handler *handler) GetPublicWidgetQueryRangeV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	id, err := valuer.NewUUID(mux.Vars(r)["id"])
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	panelKey, ok := mux.Vars(r)["key"]
+	if !ok || panelKey == "" {
+		render.Error(rw, errors.New(errors.TypeInvalidInput, dashboardtypes.ErrCodePublicDashboardInvalidInput, "panel key is missing from the path"))
+		return
+	}
+
+	queryRangeResults, err := handler.module.GetPublicWidgetQueryRangeV2(ctx, id, panelKey, r.URL.Query().Get("startTime"), r.URL.Query().Get("endTime"))
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, queryRangeResults)
+}

pkg/modules/llmpricingrule/impllmpricingrule/handler.go

@@ -92,7 +92,7 @@ func (h *handler) Get(rw http.ResponseWriter, r *http.Request) {
 }
 
 func (h *handler) CreateOrUpdate(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 30*time.Second)
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
 	defer cancel()
 
 	claims, err := authtypes.ClaimsFromContext(ctx)
@@ -118,6 +118,28 @@ func (h *handler) CreateOrUpdate(rw http.ResponseWriter, r *http.Request) {
 	render.Success(rw, http.StatusNoContent, nil)
 }
 
+// ListUnmappedModels handles GET /api/v1/llm_pricing_rules/unmapped_models.
+func (h *handler) ListUnmappedModels(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	models, err := h.module.ListUnmappedModels(ctx, orgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, llmpricingruletypes.NewGettableUnmappedModels(models))
+}
+
 // Delete handles DELETE /api/v1/llm_pricing_rules/{id}.
 func (h *handler) Delete(rw http.ResponseWriter, r *http.Request) {
 	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)

pkg/modules/llmpricingrule/impllmpricingrule/module.go

@@ -3,24 +3,32 @@ package impllmpricingrule
 import (
 	"context"
 	"encoding/json"
+	"fmt"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/modules/llmpricingrule"
+	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/SigNoz/signoz/pkg/types/llmpricingruletypes"
 	"github.com/SigNoz/signoz/pkg/types/opamptypes"
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
+// unmappedModelsLookback is the trace data window scanned to discover models in use.
+const unmappedModelsLookback = time.Hour
+
 type module struct {
 	store   llmpricingruletypes.Store
+	querier querier.Querier
 	flagger flagger.Flagger
 }
 
-func NewModule(store llmpricingruletypes.Store, flagger flagger.Flagger) llmpricingrule.Module {
+func NewModule(store llmpricingruletypes.Store, flagger flagger.Flagger, querier querier.Querier) llmpricingrule.Module {
 	return &module{store: store, flagger: flagger}
 }
 
@@ -32,6 +40,28 @@ func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID
 	return module.store.Get(ctx, orgID, id)
 }
 
+// ListUnmappedModels discovers the models present in the last hour of trace data
+// (gen_ai.request.model) and returns the ones that no pricing rule pattern matches.
+func (module *module) ListUnmappedModels(ctx context.Context, orgID valuer.UUID) ([]*llmpricingruletypes.UnmappedModel, error) {
+	models, err := module.discoverModels(ctx, orgID)
+	if err != nil {
+		return nil, err
+	}
+
+	rules, err := module.listAllRules(ctx, orgID)
+	if err != nil {
+		return nil, err
+	}
+
+	unmapped := make([]*llmpricingruletypes.UnmappedModel, 0, len(models))
+	for _, m := range models {
+		if !llmpricingruletypes.ModelMatchesAnyRule(m.ModelName, rules) {
+			unmapped = append(unmapped, m)
+		}
+	}
+	return unmapped, nil
+}
+
 // CreateOrUpdate applies a batch of pricing rule changes:
 //   - ID set       → match by id, overwrite fields.
 //   - SourceID set → match by source_id; if found overwrite, else insert.
@@ -121,7 +151,7 @@ func (module *module) RecommendAgentConfig(orgID valuer.UUID, currentConfYaml []
 }
 
 func (module *module) getEnabledRules(ctx context.Context, orgID valuer.UUID) ([]*llmpricingruletypes.LLMPricingRule, error) {
-	rules, _, err := module.List(ctx, orgID, 0, 10000, "", nil)
+	rules, err := module.listAllRules(ctx, orgID)
 	if err != nil {
 		return nil, err
 	}
@@ -135,6 +165,25 @@ func (module *module) getEnabledRules(ctx context.Context, orgID valuer.UUID) ([
 	return enabled, nil
 }
 
+// listAllRules pages through every pricing rule for the org, since rule matching
+// needs the full set and the count is otherwise unbounded.
+func (module *module) listAllRules(ctx context.Context, orgID valuer.UUID) ([]*llmpricingruletypes.LLMPricingRule, error) {
+	const pageSize = 1000
+
+	all := make([]*llmpricingruletypes.LLMPricingRule, 0)
+	for offset := 0; ; offset += pageSize {
+		page, total, err := module.store.List(ctx, orgID, offset, pageSize, "", nil)
+		if err != nil {
+			return nil, err
+		}
+		all = append(all, page...)
+		if len(page) == 0 || len(all) >= total {
+			break
+		}
+	}
+	return all, nil
+}
+
 // findExisting returns the row matching the updatable's ID or SourceID.
 // Returns a TypeNotFound error when neither matches; the caller treats that
 // as "insert new".
@@ -148,3 +197,91 @@ func (module *module) findExisting(ctx context.Context, orgID valuer.UUID, u *ll
 		return nil, errors.Newf(errors.TypeNotFound, llmpricingruletypes.ErrCodePricingRuleNotFound, "rule has neither id nor sourceId")
 	}
 }
+
+// discoverModels runs a QBv5 traces aggregation grouped by gen_ai.request.model
+// over the lookback window and returns each distinct model with its span count.
+func (module *module) discoverModels(ctx context.Context, orgID valuer.UUID) ([]*llmpricingruletypes.UnmappedModel, error) {
+	now := time.Now()
+	req := &qbtypes.QueryRangeRequest{
+		Start:       uint64(now.Add(-unmappedModelsLookback).UnixMilli()),
+		End:         uint64(now.UnixMilli()),
+		RequestType: qbtypes.RequestTypeScalar,
+		CompositeQuery: qbtypes.CompositeQuery{
+			Queries: []qbtypes.QueryEnvelope{
+				{
+					Type: qbtypes.QueryTypeBuilder,
+					Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+						Name:   "A",
+						Signal: telemetrytypes.SignalTraces,
+						Filter: &qbtypes.Filter{Expression: fmt.Sprintf("%s EXISTS", llmpricingruletypes.GenAIRequestModel)},
+						Aggregations: []qbtypes.TraceAggregation{
+							{Expression: "count()", Alias: "spanCount"},
+						},
+						GroupBy: []qbtypes.GroupByKey{
+							{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+								Name:          llmpricingruletypes.GenAIRequestModel,
+								FieldContext:  telemetrytypes.FieldContextSpan,
+								FieldDataType: telemetrytypes.FieldDataTypeString,
+							}},
+							{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+								Name:          llmpricingruletypes.GenAIProviderName,
+								FieldContext:  telemetrytypes.FieldContextSpan,
+								FieldDataType: telemetrytypes.FieldDataTypeString,
+							}},
+						},
+						Limit: 1000,
+					},
+				},
+			},
+		},
+	}
+
+	resp, err := module.querier.QueryRange(ctx, orgID, req)
+	if err != nil {
+		return nil, err
+	}
+
+	if resp == nil || len(resp.Data.Results) == 0 {
+		return nil, nil
+	}
+	sd, ok := resp.Data.Results[0].(*qbtypes.ScalarData)
+	if !ok || sd == nil {
+		return nil, nil
+	}
+
+	modelIdx, providerIdx, countIdx := -1, -1, -1
+	for i, c := range sd.Columns {
+		switch c.Type {
+		case qbtypes.ColumnTypeGroup:
+			switch c.Name {
+			case llmpricingruletypes.GenAIRequestModel:
+				modelIdx = i
+			case llmpricingruletypes.GenAIProviderName:
+				providerIdx = i
+			}
+		case qbtypes.ColumnTypeAggregation:
+			countIdx = i
+		}
+	}
+	if modelIdx == -1 {
+		return nil, nil
+	}
+
+	models := make([]*llmpricingruletypes.UnmappedModel, 0, len(sd.Data))
+	for _, row := range sd.Data {
+		name, _ := row[modelIdx].(string)
+		if name == "" {
+			continue
+		}
+		provider := ""
+		if providerIdx != -1 {
+			provider, _ = row[providerIdx].(string)
+		}
+		var spanCount uint64
+		if countIdx >= 0 && countIdx < len(row) {
+			spanCount, _ = row[countIdx].(uint64)
+		}
+		models = append(models, &llmpricingruletypes.UnmappedModel{ModelName: name, Provider: provider, SpanCount: spanCount})
+	}
+	return models, nil
+}

pkg/modules/llmpricingrule/llmpricingrule.go

@@ -17,6 +17,7 @@ type Module interface {
 	Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*llmpricingruletypes.LLMPricingRule, error)
 	CreateOrUpdate(ctx context.Context, orgID valuer.UUID, userEmail string, rules []*llmpricingruletypes.UpdatableLLMPricingRule) (err error)
 	Delete(ctx context.Context, orgID, id valuer.UUID) error
+	ListUnmappedModels(ctx context.Context, orgID valuer.UUID) ([]*llmpricingruletypes.UnmappedModel, error)
 }
 
 // Handler defines the HTTP handler interface for pricing rule endpoints.
@@ -25,4 +26,5 @@ type Handler interface {
 	Get(rw http.ResponseWriter, r *http.Request)
 	CreateOrUpdate(rw http.ResponseWriter, r *http.Request)
 	Delete(rw http.ResponseWriter, r *http.Request)
+	ListUnmappedModels(rw http.ResponseWriter, r *http.Request)
 }

pkg/querier/config.go

@@ -7,6 +7,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 )
 
+const DefaultMaxConcurrentQueries = 8
+
 type SkipResourceFingerprint struct {
 	Enabled bool `yaml:"enabled" mapstructure:"enabled"`
 	// If count of fingerprint is above threshold, skip the fingerprint subquery and filter on main table instead.
@@ -37,7 +39,7 @@ func newConfig() factory.Config {
 		// Default values
 		CacheTTL:             168 * time.Hour,
 		FluxInterval:         5 * time.Minute,
-		MaxConcurrentQueries: 4,
+		MaxConcurrentQueries: DefaultMaxConcurrentQueries,
 		SkipResourceFingerprint: SkipResourceFingerprint{
 			Enabled:   false,
 			Threshold: 100000,

pkg/querier/querier.go

@@ -13,6 +13,7 @@ import (
 
 	"github.com/dustin/go-humanize"
 	"golang.org/x/exp/maps"
+	"golang.org/x/sync/errgroup"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
@@ -35,20 +36,21 @@ var (
 )
 
 type querier struct {
-	logger                    *slog.Logger
-	fl                        flagger.Flagger
-	telemetryStore            telemetrystore.TelemetryStore
-	metadataStore             telemetrytypes.MetadataStore
-	promEngine                prometheus.Prometheus
-	traceStmtBuilder          qbtypes.StatementBuilder[qbtypes.TraceAggregation]
-	logStmtBuilder            qbtypes.StatementBuilder[qbtypes.LogAggregation]
-	auditStmtBuilder          qbtypes.StatementBuilder[qbtypes.LogAggregation]
-	metricStmtBuilder         qbtypes.StatementBuilder[qbtypes.MetricAggregation]
-	meterStmtBuilder          qbtypes.StatementBuilder[qbtypes.MetricAggregation]
-	traceOperatorStmtBuilder  qbtypes.TraceOperatorStatementBuilder
-	bucketCache               BucketCache
-	liveDataRefresh           time.Duration
-	builderConfig             builderConfig
+	logger                   *slog.Logger
+	fl                       flagger.Flagger
+	telemetryStore           telemetrystore.TelemetryStore
+	metadataStore            telemetrytypes.MetadataStore
+	promEngine               prometheus.Prometheus
+	traceStmtBuilder         qbtypes.StatementBuilder[qbtypes.TraceAggregation]
+	logStmtBuilder           qbtypes.StatementBuilder[qbtypes.LogAggregation]
+	auditStmtBuilder         qbtypes.StatementBuilder[qbtypes.LogAggregation]
+	metricStmtBuilder        qbtypes.StatementBuilder[qbtypes.MetricAggregation]
+	meterStmtBuilder         qbtypes.StatementBuilder[qbtypes.MetricAggregation]
+	traceOperatorStmtBuilder qbtypes.TraceOperatorStatementBuilder
+	bucketCache              BucketCache
+	liveDataRefresh          time.Duration
+	builderConfig            builderConfig
+	maxConcurrentQueries     int
 }
 
 var _ Querier = (*querier)(nil)
@@ -67,25 +69,30 @@ func New(
 	bucketCache BucketCache,
 	flagger flagger.Flagger,
 	logTraceIDWindowPadding time.Duration,
+	maxConcurrentQueries int,
 ) *querier {
 	querierSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/pkg/querier")
+	if maxConcurrentQueries <= 0 {
+		maxConcurrentQueries = DefaultMaxConcurrentQueries
+	}
 	return &querier{
-		logger:                    querierSettings.Logger(),
-		fl:                        flagger,
-		telemetryStore:            telemetryStore,
-		metadataStore:             metadataStore,
-		promEngine:                promEngine,
-		traceStmtBuilder:          traceStmtBuilder,
-		logStmtBuilder:            logStmtBuilder,
-		auditStmtBuilder:          auditStmtBuilder,
-		metricStmtBuilder:         metricStmtBuilder,
-		meterStmtBuilder:          meterStmtBuilder,
-		traceOperatorStmtBuilder:  traceOperatorStmtBuilder,
-		bucketCache:               bucketCache,
-		liveDataRefresh:           5 * time.Second,
+		logger:                   querierSettings.Logger(),
+		fl:                       flagger,
+		telemetryStore:           telemetryStore,
+		metadataStore:            metadataStore,
+		promEngine:               promEngine,
+		traceStmtBuilder:         traceStmtBuilder,
+		logStmtBuilder:           logStmtBuilder,
+		auditStmtBuilder:         auditStmtBuilder,
+		metricStmtBuilder:        metricStmtBuilder,
+		meterStmtBuilder:         meterStmtBuilder,
+		traceOperatorStmtBuilder: traceOperatorStmtBuilder,
+		bucketCache:              bucketCache,
+		liveDataRefresh:          5 * time.Second,
 		builderConfig: builderConfig{
 			logTraceIDWindowPaddingMS: uint64(logTraceIDWindowPadding.Milliseconds()),
 		},
+		maxConcurrentQueries: maxConcurrentQueries,
 	}
 }
 
@@ -607,30 +614,40 @@ func (q *querier) run(
 		return false
 	}
 
-	for name, query := range qs {
-		// Skip cache if NoCache is set, or if cache is not available
-		if req.NoCache || q.bucketCache == nil || query.Fingerprint() == "" {
-			if req.NoCache {
-				q.logger.DebugContext(ctx, "NoCache flag set, bypassing cache", slog.String("query", name))
-			} else {
-				q.logger.InfoContext(ctx, "no bucket cache or fingerprint, executing query", slog.String("fingerprint", query.Fingerprint()))
+	names := maps.Keys(qs)
+	slices.Sort(names)
+	queryResults := make([]*qbtypes.Result, len(names))
+
+	// sem limits how many queries run at once for this request. The same
+	// limit covers the missing-range queries in executeWithCache. sem is held
+	// only while a query is running, never while waiting for other
+	// goroutines, so the two levels cannot deadlock.
+	sem := make(chan struct{}, q.maxConcurrentQueries)
+
+	eg, egCtx := errgroup.WithContext(ctx)
+	for i, name := range names {
+		query := qs[name]
+		eg.Go(func() error {
+			// Skip cache if NoCache is set, or if cache is not available
+			if req.NoCache || q.bucketCache == nil || query.Fingerprint() == "" {
+				if req.NoCache {
+					q.logger.DebugContext(egCtx, "NoCache flag set, bypassing cache", slog.String("query", name))
+				} else {
+					q.logger.InfoContext(egCtx, "no bucket cache or fingerprint, executing query", slog.String("fingerprint", query.Fingerprint()))
+				}
+				sem <- struct{}{}
+				result, err := query.Execute(egCtx)
+				<-sem
+				if err != nil {
+					return err
+				}
+				queryResults[i] = result
+				return nil
 			}
-			result, err := query.Execute(ctx)
-			qbEvent.HasData = qbEvent.HasData || hasData(result)
+
+			result, err := q.executeWithCache(egCtx, orgID, query, steps[name], sem)
 			if err != nil {
-				return nil, err
-			}
-			results[name] = result.Value
-			warnings = append(warnings, result.Warnings...)
-			warningsDocURL = result.WarningsDocURL
-			stats.RowsScanned += result.Stats.RowsScanned
-			stats.BytesScanned += result.Stats.BytesScanned
-			stats.DurationMS += result.Stats.DurationMS
-		} else {
-			result, err := q.executeWithCache(ctx, orgID, query, steps[name], req.NoCache)
-			qbEvent.HasData = qbEvent.HasData || hasData(result)
-			if err != nil {
-				return nil, err
+				return err
 			}
 			switch v := result.Value.(type) {
 			case *qbtypes.TimeSeriesData:
@@ -640,14 +657,23 @@ func (q *querier) run(
 			case *qbtypes.RawData:
 				v.QueryName = name
 			}
+			queryResults[i] = result
+			return nil
+		})
+	}
+	if err := eg.Wait(); err != nil {
+		return nil, err
+	}
 
-			results[name] = result.Value
-			warnings = append(warnings, result.Warnings...)
-			warningsDocURL = result.WarningsDocURL
-			stats.RowsScanned += result.Stats.RowsScanned
-			stats.BytesScanned += result.Stats.BytesScanned
-			stats.DurationMS += result.Stats.DurationMS
-		}
+	for i, name := range names {
+		result := queryResults[i]
+		qbEvent.HasData = qbEvent.HasData || hasData(result)
+		results[name] = result.Value
+		warnings = append(warnings, result.Warnings...)
+		warningsDocURL = result.WarningsDocURL
+		stats.RowsScanned += result.Stats.RowsScanned
+		stats.BytesScanned += result.Stats.BytesScanned
+		stats.DurationMS += result.Stats.DurationMS
 	}
 
 	gomaps.Copy(results, preseededResults)
@@ -707,8 +733,9 @@ func (q *querier) run(
 	return resp, nil
 }
 
-// executeWithCache executes a query using the bucket cache.
-func (q *querier) executeWithCache(ctx context.Context, orgID valuer.UUID, query qbtypes.Query, step qbtypes.Step, _ bool) (*qbtypes.Result, error) {
+// executeWithCache executes a query using the bucket cache. sem limits how
+// many queries run at once for the whole request.
+func (q *querier) executeWithCache(ctx context.Context, orgID valuer.UUID, query qbtypes.Query, step qbtypes.Step, sem chan struct{}) (*qbtypes.Result, error) {
 	// Get cached data and missing ranges
 	cachedResult, missingRanges := q.bucketCache.GetMissRanges(ctx, orgID, query, step)
 
@@ -721,7 +748,9 @@ func (q *querier) executeWithCache(ctx context.Context, orgID valuer.UUID, query
 	if cachedResult == nil && len(missingRanges) == 1 {
 		startMs, endMs := query.Window()
 		if missingRanges[0].From == startMs && missingRanges[0].To == endMs {
+			sem <- struct{}{}
 			result, err := query.Execute(ctx)
+			<-sem
 			if err != nil {
 				return nil, err
 			}
@@ -740,7 +769,6 @@ func (q *querier) executeWithCache(ctx context.Context, orgID valuer.UUID, query
 		slog.Int("missing_ranges_count", len(missingRanges)),
 		slog.Any("ranges", missingRanges))
 
-	sem := make(chan struct{}, 4)
 	var wg sync.WaitGroup
 
 	for i, timeRange := range missingRanges {
@@ -777,7 +805,9 @@ func (q *querier) executeWithCache(ctx context.Context, orgID valuer.UUID, query
 		if err != nil {
 			// If any query failed, fall back to full execution
 			q.logger.ErrorContext(ctx, "parallel query execution failed", errors.Attr(err))
+			sem <- struct{}{}
 			result, err := query.Execute(ctx)
+			<-sem
 			if err != nil {
 				return nil, err
 			}

pkg/querier/querier_test.go

@@ -2,11 +2,13 @@ package querier
 
 import (
 	"context"
+	"sync/atomic"
 	"testing"
 	"time"
 
 	cmock "github.com/SigNoz/clickhouse-go-mock"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/flagger/flaggertest"
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
@@ -54,7 +56,8 @@ func TestQueryRange_MetricTypeMissing(t *testing.T) {
 		nil,                // traceOperatorStmtBuilder
 		nil,                // bucketCache
 		flaggertest.New(t), // flagger
-		0,
+		0,                  // logTraceIDWindowPadding
+		0,                  // maxConcurrentQueries
 	)
 
 	req := &qbtypes.QueryRangeRequest{
@@ -125,7 +128,8 @@ func TestQueryRange_MetricTypeFromStore(t *testing.T) {
 		nil,                      // traceOperatorStmtBuilder
 		nil,                      // bucketCache
 		flaggertest.New(t),       // flagger
-		0,
+		0,                        // logTraceIDWindowPadding
+		0,                        // maxConcurrentQueries
 	)
 
 	req := &qbtypes.QueryRangeRequest{
@@ -155,3 +159,149 @@ func TestQueryRange_MetricTypeFromStore(t *testing.T) {
 	require.NoError(t, err)
 	require.NotNil(t, resp)
 }
+
+type fakeQuery struct {
+	execute func(ctx context.Context) (*qbtypes.Result, error)
+}
+
+func (f *fakeQuery) Fingerprint() string                                  { return "" }
+func (f *fakeQuery) Window() (uint64, uint64)                             { return 0, 0 }
+func (f *fakeQuery) Execute(ctx context.Context) (*qbtypes.Result, error) { return f.execute(ctx) }
+
+func chQueryEnvelopes(names []string) []qbtypes.QueryEnvelope {
+	envelopes := make([]qbtypes.QueryEnvelope, 0, len(names))
+	for _, name := range names {
+		envelopes = append(envelopes, qbtypes.QueryEnvelope{
+			Type: qbtypes.QueryTypeClickHouseSQL,
+			Spec: qbtypes.ClickHouseQuery{Name: name},
+		})
+	}
+	return envelopes
+}
+
+func TestRunExecutesQueriesConcurrently(t *testing.T) {
+	names := []string{"A", "B", "C", "D", "E"}
+	numQueries := len(names)
+
+	q := &querier{
+		logger:               instrumentationtest.New().Logger(),
+		maxConcurrentQueries: numQueries,
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+
+	var started atomic.Int32
+	allStarted := make(chan struct{})
+
+	qs := make(map[string]qbtypes.Query, numQueries)
+	for _, name := range names {
+		qs[name] = &fakeQuery{execute: func(ctx context.Context) (*qbtypes.Result, error) {
+			if int(started.Add(1)) == numQueries {
+				close(allStarted)
+			}
+			select {
+			case <-allStarted:
+			case <-ctx.Done():
+				return nil, ctx.Err()
+			}
+			return &qbtypes.Result{
+				Type:  qbtypes.RequestTypeScalar,
+				Value: &qbtypes.ScalarData{QueryName: name},
+				Stats: qbtypes.ExecStats{RowsScanned: 1, BytesScanned: 2, DurationMS: 3},
+			}, nil
+		}}
+	}
+
+	req := &qbtypes.QueryRangeRequest{
+		RequestType:    qbtypes.RequestTypeScalar,
+		CompositeQuery: qbtypes.CompositeQuery{Queries: chQueryEnvelopes(names)},
+	}
+	resp, err := q.run(ctx, valuer.GenerateUUID(), qs, req, nil, &qbtypes.QBEvent{}, nil)
+	require.NoError(t, err)
+	require.NotNil(t, resp)
+	assert.Len(t, resp.Data.Results, numQueries)
+	assert.Equal(t, uint64(numQueries), resp.Meta.RowsScanned)
+	assert.Equal(t, uint64(2*numQueries), resp.Meta.BytesScanned)
+	assert.Equal(t, uint64(3*numQueries), resp.Meta.DurationMS)
+}
+
+func TestRunRespectsMaxConcurrentQueries(t *testing.T) {
+	const limit = 2
+	names := []string{"A", "B", "C", "D", "E", "F", "G", "H"}
+
+	q := &querier{
+		logger:               instrumentationtest.New().Logger(),
+		maxConcurrentQueries: limit,
+	}
+
+	var running, maxRunning atomic.Int32
+	qs := make(map[string]qbtypes.Query, len(names))
+	for _, name := range names {
+		qs[name] = &fakeQuery{execute: func(ctx context.Context) (*qbtypes.Result, error) {
+			cur := running.Add(1)
+			defer running.Add(-1)
+			for {
+				m := maxRunning.Load()
+				if cur <= m || maxRunning.CompareAndSwap(m, cur) {
+					break
+				}
+			}
+			time.Sleep(20 * time.Millisecond)
+			return &qbtypes.Result{
+				Type:  qbtypes.RequestTypeScalar,
+				Value: &qbtypes.ScalarData{QueryName: name},
+			}, nil
+		}}
+	}
+
+	req := &qbtypes.QueryRangeRequest{
+		RequestType:    qbtypes.RequestTypeScalar,
+		CompositeQuery: qbtypes.CompositeQuery{Queries: chQueryEnvelopes(names)},
+	}
+	resp, err := q.run(context.Background(), valuer.GenerateUUID(), qs, req, nil, &qbtypes.QBEvent{}, nil)
+	require.NoError(t, err)
+	require.NotNil(t, resp)
+	assert.Len(t, resp.Data.Results, len(names))
+	assert.LessOrEqual(t, maxRunning.Load(), int32(limit), "running queries must not exceed maxConcurrentQueries")
+}
+
+func TestRunQueryErrorCancelsSiblings(t *testing.T) {
+	q := &querier{
+		logger:               instrumentationtest.New().Logger(),
+		maxConcurrentQueries: 4,
+	}
+
+	bStarted := make(chan struct{})
+	var bCanceled atomic.Bool
+
+	qs := map[string]qbtypes.Query{
+		// fails once B is running.
+		"A": &fakeQuery{execute: func(ctx context.Context) (*qbtypes.Result, error) {
+			select {
+			case <-bStarted:
+			case <-ctx.Done():
+			}
+			return nil, errors.NewInternalf(errors.CodeInternal, "query A failed")
+		}},
+		// blocks until its context is canceled by A's failure.
+		"B": &fakeQuery{execute: func(ctx context.Context) (*qbtypes.Result, error) {
+			close(bStarted)
+			select {
+			case <-ctx.Done():
+				bCanceled.Store(true)
+				return nil, ctx.Err()
+			case <-time.After(10 * time.Second):
+				return nil, errors.NewInternalf(errors.CodeInternal, "query B was never canceled")
+			}
+		}},
+	}
+
+	req := &qbtypes.QueryRangeRequest{
+		RequestType:    qbtypes.RequestTypeScalar,
+		CompositeQuery: qbtypes.CompositeQuery{Queries: chQueryEnvelopes([]string{"A", "B"})},
+	}
+	_, err := q.run(context.Background(), valuer.GenerateUUID(), qs, req, nil, &qbtypes.QBEvent{}, nil)
+	require.ErrorContains(t, err, "query A failed")
+	assert.True(t, bCanceled.Load(), "query B should be canceled once query A fails")
+}

pkg/querier/signozquerier/provider.go

@@ -193,5 +193,6 @@ func newProvider(
 		bucketCache,
 		flagger,
 		cfg.LogTraceIDWindowPadding,
+		cfg.MaxConcurrentQueries,
 	), nil
 }

pkg/query-service/rules/setups_test.go

@@ -56,6 +56,7 @@ func prepareQuerierForMetrics(t *testing.T, telemetryStore telemetrystore.Teleme
 		nil, // bucketCache
 		flagger,
 		0,
+		0, // maxConcurrentQueries (0 means default)
 	), metadataStore
 }
 
@@ -110,6 +111,7 @@ func prepareQuerierForLogs(t *testing.T, telemetryStore telemetrystore.Telemetry
 		nil,            // bucketCache
 		fl,
 		5*time.Minute, // logTraceIDWindowPadding
+		0,             // maxConcurrentQueries (0 means default)
 	)
 }
 
@@ -158,5 +160,6 @@ func prepareQuerierForTraces(t *testing.T, telemetryStore telemetrystore.Telemet
 		nil,              // bucketCache
 		fl,
 		0,
+		0, // maxConcurrentQueries (0 means default)
 	)
 }

pkg/signoz/module.go

@@ -160,7 +160,7 @@ func NewModules(
 		CloudIntegration:    cloudIntegrationModule,
 		TraceDetail:         impltracedetail.NewModule(impltracedetail.NewTraceStore(telemetryStore), providerSettings, config.TraceDetail),
 		SpanMapper:          implspanmapper.NewModule(implspanmapper.NewStore(sqlstore), fl),
-		LLMPricingRule:      impllmpricingrule.NewModule(impllmpricingrule.NewStore(sqlstore), fl),
+		LLMPricingRule:      impllmpricingrule.NewModule(impllmpricingrule.NewStore(sqlstore), fl, querier),
 		Tag:                 tagModule,
 	}
 }

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -7,6 +7,7 @@ import (
 	"slices"
 	"unicode/utf8"
 
+	chparser "github.com/AfterShip/clickhouse-sql-parser/parser"
 	"github.com/SigNoz/signoz/pkg/errors"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/perses/spec/go/common"
@@ -109,8 +110,7 @@ func (d *DashboardSpec) validatePanels() error {
 		}
 		allowed := allowedQueryKinds[panelKind]
 		for qi, q := range panel.Spec.Queries {
-			queryPath := fmt.Sprintf("%s.spec.queries[%d].spec.plugin", path, qi)
-			if err := validateQueryAllowedForPanel(q.Spec.Plugin, allowed, panelKind, queryPath); err != nil {
+			if err := d.validateQuery(qi, q, panelKind, path, allowed); err != nil {
 				return err
 			}
 		}
@@ -118,6 +118,17 @@ func (d *DashboardSpec) validatePanels() error {
 	return nil
 }
 
+func (d *DashboardSpec) validateQuery(qi int, q Query, panelKind PanelPluginKind, path string, allowed []QueryPluginKind) error {
+	queryPath := fmt.Sprintf("%s.spec.queries[%d].spec.plugin", path, qi)
+	if err := validateQueryAllowedForPanel(q.Spec.Plugin, allowed, panelKind, queryPath); err != nil {
+		return err
+	}
+	if err := validateQueryContent(q, queryPath); err != nil {
+		return err
+	}
+	return nil
+}
+
 func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind, panelKind PanelPluginKind, path string) error {
 	compositeSubQueryTypeToPluginKind := map[qb.QueryType]QueryPluginKind{
 		qb.QueryTypeBuilder:       QueryKindBuilder,
@@ -153,6 +164,86 @@ func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind,
 	return nil
 }
 
+// validateQueryContent runs the query-builder type's own validation on the panel's
+// query - whatever its kind - by assembling the same v5 composite query the panel would
+// execute and delegating to it. The rules (aggregations, group by, order by, promql /
+// clickhouse / formula / trace-operator specifics, ...) live on querybuildertypesv5; this
+// only delegates, scoped to the query's request type, so a dashboard cannot persist a
+// query the querier would later reject. Request-type options keep e.g. a list (raw) panel
+// from being forced to carry an aggregation.
+func validateQueryContent(q Query, path string) error {
+	composite, err := q.Spec.Plugin.buildV5CompositeQueryFromPlugin()
+	if err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s: %s", path, err.Error())
+	}
+	if err := composite.Validate(qb.GetValidationOptions(q.Kind)...); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s: %s", path, err.Error())
+	}
+	// Dashboard-write only, not the query-range request, so query-range behaviour is
+	// unchanged: agg_rewriter trims after a comma there; dashboards reject the packing.
+	if err := validateSingleExpressionAggregations(composite); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s: %s", path, err.Error())
+	}
+	return nil
+}
+
+// validateSingleExpressionAggregations rejects a logs/traces aggregation that packs
+// several calls into one expression (e.g. "count(), sum(field)"), which the rewriter
+// would silently truncate to the first call.
+func validateSingleExpressionAggregations(composite qb.CompositeQuery) error {
+	for _, envelope := range composite.Queries {
+		switch query := envelope.Spec.(type) {
+		case qb.QueryBuilderQuery[qb.LogAggregation]:
+			for _, agg := range query.Aggregations {
+				if err := ensureSingleExpressionAggregation(agg.Expression); err != nil {
+					return err
+				}
+			}
+		case qb.QueryBuilderQuery[qb.TraceAggregation]:
+			for _, agg := range query.Aggregations {
+				if err := ensureSingleExpressionAggregation(agg.Expression); err != nil {
+					return err
+				}
+			}
+		}
+	}
+	return nil
+}
+
+// ensureSingleExpressionAggregation rejects an expression that parses to more than one
+// SELECT item; exact where a regex count is not (string literals, nesting). Same
+// SELECT-wrap parse as parseFragment in pkg/querybuilder/agg_rewrite.go.
+func ensureSingleExpressionAggregation(expression string) error {
+	wrapped := fmt.Sprintf("SELECT %s", expression)
+	p := chparser.NewParser(wrapped)
+	stmts, err := p.ParseStmts()
+	if err != nil {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid aggregation expression `%s`: unable to parse expression", expression)
+	}
+	if len(stmts) == 0 {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid aggregation expression `%s`: no statements in the expression", expression)
+	}
+	sel, ok := stmts[0].(*chparser.SelectQuery)
+	if !ok {
+		// can't happen cuz wrapped is a SELECT query.
+		return errors.NewInternalf(errors.CodeInternal, "invalid aggregation expression `%s`", expression)
+	}
+	if len(sel.SelectItems) > 1 {
+		// this is the only part that is different from pkg/querybuilder/agg_rewrite.go.
+		return errors.NewInvalidInputf(
+			ErrCodeDashboardInvalidInput,
+			"aggregation expression `%s` must contain a single function call; provide multiple aggregations as separate entries",
+			expression,
+		)
+	}
+	if len(sel.SelectItems) == 0 {
+		// can't happen cuz wrapped is a SELECT query.
+		return errors.NewInternalf(errors.CodeInternal, "invalid aggregation expression `%s`", expression)
+	}
+	return nil
+}
+
+// validateLayouts rejects grid items referencing a panel that doesn't exist.
 const maxLayoutsPerDashboard = 500
 
 // validateLayouts validates the dashboard's layouts: bounded section count,

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -1392,11 +1392,23 @@ func TestSpanGaps(t *testing.T) {
 }
 
 func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
+	// A panel's query carries the request type implied by the panel kind: list panels
+	// are raw (no aggregation), table-like panels are scalar, the rest time series.
+	requestKind := func(panelKind string) string {
+		switch panelKind {
+		case "signoz/ListPanel":
+			return "raw"
+		case "signoz/TablePanel", "signoz/NumberPanel", "signoz/PieChartPanel", "signoz/HistogramPanel":
+			return "scalar"
+		default:
+			return "time_series"
+		}
+	}
 	mkQuery := func(panelKind, queryKind, querySpec string) []byte {
 		return []byte(`{
 			"panels": {"p1": {"kind": "Panel", "spec": {
 				"plugin": {"kind": "` + panelKind + `", "spec": {}},
-				"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "` + queryKind + `", "spec": ` + querySpec + `}}}]
+				"queries": [{"kind": "` + requestKind(panelKind) + `", "spec": {"plugin": {"kind": "` + queryKind + `", "spec": ` + querySpec + `}}}]
 			}}},
 			"layouts": []
 		}`)
@@ -1405,7 +1417,7 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		return []byte(`{
 			"panels": {"p1": {"kind": "Panel", "spec": {
 				"plugin": {"kind": "` + panelKind + `", "spec": {}},
-				"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/CompositeQuery", "spec": {
+				"queries": [{"kind": "` + requestKind(panelKind) + `", "spec": {"plugin": {"kind": "signoz/CompositeQuery", "spec": {
 					"queries": [{"type": "` + subType + `", "spec": ` + subSpec + `}]
 				}}}}]
 			}}},
@@ -1445,6 +1457,45 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 	}
 }
 
+// TestCommaSeparatedAggregationRejectedOnWrite asserts the write path (unmarshalDashboard
+// runs DashboardSpec.Validate) rejects an aggregation that packs several comma-separated
+// calls into one expression, while accepting a single call and a properly pre-split list.
+func TestCommaSeparatedAggregationRejectedOnWrite(t *testing.T) {
+	buildDashboardWithLogsAggregation := func(aggregationsJSON string) []byte {
+		return []byte(`{
+		"panels": {"p1": {"kind": "Panel", "spec": {
+			"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
+			"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+				"name": "A", "signal": "logs", "aggregations": ` + aggregationsJSON + `
+			}}}}]
+		}}},
+		"layouts": []
+	}`)
+	}
+
+	t.Run("comma-separated expression is rejected", func(t *testing.T) {
+		_, err := unmarshalDashboard(buildDashboardWithLogsAggregation(`[{"expression": "count(), sum(bytes)"}]`))
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "single function call")
+		assert.True(t, errors.Ast(err, errors.TypeInvalidInput))
+	})
+
+	t.Run("single-call expression is accepted", func(t *testing.T) {
+		_, err := unmarshalDashboard(buildDashboardWithLogsAggregation(`[{"expression": "count()"}]`))
+		require.NoError(t, err)
+	})
+
+	t.Run("pre-split aggregations are accepted", func(t *testing.T) {
+		_, err := unmarshalDashboard(buildDashboardWithLogsAggregation(`[{"expression": "count()"}, {"expression": "sum(bytes)"}]`))
+		require.NoError(t, err)
+	})
+
+	t.Run("comma inside function args is not mistaken for multiple calls", func(t *testing.T) {
+		_, err := unmarshalDashboard(buildDashboardWithLogsAggregation(`[{"expression": "countIf(day > 10, status)"}]`))
+		require.NoError(t, err)
+	})
+}
+
 func TestValidateGridGeometry(t *testing.T) {
 	tests := []struct {
 		scenario         string
@@ -1628,3 +1679,30 @@ func TestValidateDisplayNameAtMaxLength(t *testing.T) {
 	_, err := unmarshalDashboard([]byte(`{"display": {"name": "` + atLimit + `"}, "layouts": []}`))
 	assert.NoError(t, err)
 }
+
+func TestEnsureSingleExpressionAggregation(t *testing.T) {
+	testCases := []struct {
+		description    string
+		expression     string
+		expectRejected bool
+	}{
+		{description: "single call is accepted", expression: "count()", expectRejected: false},
+		{description: "comma-separated calls are rejected", expression: "count(), sum(bytes)", expectRejected: true},
+		{description: "comma inside function args is a single call", expression: "countIf(day > 10, status)", expectRejected: false},
+		{description: "nested function call is a single aggregation", expression: "sum(toFloat64(x))", expectRejected: false},
+		{description: "parenthesis inside a string literal is not a call", expression: "countIf(body LIKE '%(done)%')", expectRejected: false},
+		{description: "closing paren inside a string literal followed by word-paren is not a second call", expression: "countIf(body = 'a)b(c)')", expectRejected: false},
+		{description: "unparseable expression is rejected", expression: "count(", expectRejected: true},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.description, func(t *testing.T) {
+			err := ensureSingleExpressionAggregation(testCase.expression)
+			if testCase.expectRejected {
+				require.Error(t, err)
+			} else {
+				require.NoError(t, err)
+			}
+		})
+	}
+}

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -8,6 +8,7 @@ import (
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 
 	"github.com/go-playground/validator/v10"
 	"github.com/swaggest/jsonschema-go"
@@ -125,6 +126,34 @@ func (QueryPlugin) JSONSchemaOneOf() []any {
 	}
 }
 
+func (plugin QueryPlugin) buildV5CompositeQueryFromPlugin() (qb.CompositeQuery, error) {
+	switch spec := plugin.Spec.(type) {
+	case *qb.CompositeQuery:
+		if spec == nil {
+			return qb.CompositeQuery{}, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "composite query is empty")
+		}
+		return *spec, nil
+	case *BuilderQuerySpec:
+		if spec == nil {
+			return qb.CompositeQuery{}, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "builder query is empty")
+		}
+		return wrapEnvelope(qb.QueryTypeBuilder, spec.Spec), nil
+	case *qb.PromQuery:
+		return wrapEnvelope(qb.QueryTypePromQL, *spec), nil
+	case *qb.ClickHouseQuery:
+		return wrapEnvelope(qb.QueryTypeClickHouseSQL, *spec), nil
+	case *qb.QueryBuilderFormula:
+		return wrapEnvelope(qb.QueryTypeFormula, *spec), nil
+	case *qb.QueryBuilderTraceOperator:
+		return wrapEnvelope(qb.QueryTypeTraceOperator, *spec), nil
+	}
+	return qb.CompositeQuery{}, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "unsupported query kind %q", plugin.Kind)
+}
+
+func wrapEnvelope(queryType qb.QueryType, spec any) qb.CompositeQuery {
+	return qb.CompositeQuery{Queries: []qb.QueryEnvelope{{Type: queryType, Spec: spec}}}
+}
+
 type QueryPluginVariant[S any] struct {
 	Kind string `json:"kind" required:"true"`
 	Spec S      `json:"spec" required:"true"`

pkg/types/dashboardtypes/perses_public_dashboard.go

@@ -0,0 +1,204 @@
+package dashboardtypes
+
+import (
+	"github.com/SigNoz/signoz/pkg/errors"
+	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+)
+
+// ════════════════════════════════════════════════════════════════════════
+// Gettable
+// ════════════════════════════════════════════════════════════════════════
+
+// GettablePublicDashboardDataV2 is the anonymous-facing payload of a v2 dashboard.
+type GettablePublicDashboardDataV2 struct {
+	Dashboard       *GettableDashboardV2      `json:"dashboard"`
+	PublicDashboard *GettablePublicDasbhboard `json:"publicDashboard"`
+}
+
+// NewPublicDashboardDataFromDashboardV2 builds the anonymous v2 payload: panel queries
+// and query-variable queries are redacted, and only the body fields v1 exposed (name,
+// metadata, tags, spec) are set.
+func NewPublicDashboardDataFromDashboardV2(dashboard *DashboardV2, publicDashboard *PublicDashboard) *GettablePublicDashboardDataV2 {
+	spec := dashboard.Spec
+	redactPanelQueries(&spec)
+	redactVariableQueries(&spec)
+
+	return &GettablePublicDashboardDataV2{
+		Dashboard: &GettableDashboardV2{
+			DashboardV2MetadataBase: dashboard.DashboardV2MetadataBase,
+			Name:                    dashboard.Name,
+			Tags:                    tagtypes.NewGettableTagsFromTags(dashboard.Tags),
+			Spec:                    spec,
+		},
+		PublicDashboard: &GettablePublicDasbhboard{
+			TimeRangeEnabled: publicDashboard.TimeRangeEnabled,
+			DefaultTimeRange: publicDashboard.DefaultTimeRange,
+			PublicPath:       publicDashboard.PublicPath(),
+		},
+	}
+}
+
+// ════════════════════════════════════════════════════════════════════════
+// Redaction
+// ════════════════════════════════════════════════════════════════════════
+
+func redactPanelQueries(spec *DashboardSpec) {
+	panels := make(map[string]*Panel, len(spec.Panels))
+	for key, panel := range spec.Panels {
+		if panel == nil {
+			panels[key] = nil
+			continue
+		}
+		redacted := *panel
+		queries := make([]Query, len(redacted.Spec.Queries))
+		for i, query := range redacted.Spec.Queries {
+			query.Spec.Plugin.Spec = redactQuery(query.Spec.Plugin.Spec)
+			queries[i] = query
+		}
+		redacted.Spec.Queries = queries
+		panels[key] = &redacted
+	}
+	spec.Panels = panels
+}
+
+// redactVariableQueries strips the raw query from query-kind list variables. The
+// query is the same class of secret as a panel query, and the anonymous viewer
+// never runs variable queries. Rebuilds the slice rather than mutating in place:
+// spec shares its Variables backing array with the stored dashboard.
+func redactVariableQueries(spec *DashboardSpec) {
+	variables := make([]Variable, len(spec.Variables))
+	copy(variables, spec.Variables)
+	for i := range variables {
+		list, ok := variables[i].Spec.(*ListVariableSpec)
+		if !ok || list.Plugin.Kind != VariableKindQuery {
+			continue
+		}
+		if _, ok := list.Plugin.Spec.(*QueryVariableSpec); ok {
+			redacted := *list
+			redacted.Plugin.Spec = &QueryVariableSpec{}
+			variables[i].Spec = &redacted
+		}
+	}
+	spec.Variables = variables
+}
+
+func redactQuery(spec any) any {
+	switch s := spec.(type) {
+	case *qb.CompositeQuery:
+		if s == nil {
+			return spec
+		}
+		queries := make([]qb.QueryEnvelope, len(s.Queries))
+		for i, envelope := range s.Queries {
+			envelope.Spec = redactLeafQuery(envelope.Spec)
+			queries[i] = envelope
+		}
+		return &qb.CompositeQuery{Queries: queries}
+	case *BuilderQuerySpec:
+		if s == nil {
+			return spec
+		}
+		return &BuilderQuerySpec{Spec: redactLeafQuery(s.Spec)}
+	case *qb.PromQuery:
+		return redactQueryPtr(s)
+	case *qb.ClickHouseQuery:
+		return redactQueryPtr(s)
+	case *qb.QueryBuilderFormula:
+		return redactQueryPtr(s)
+	case *qb.QueryBuilderTraceOperator:
+		return redactQueryPtr(s)
+	}
+	return spec
+}
+
+func redactQueryPtr[T any](s *T) any {
+	if s == nil {
+		return s
+	}
+	redacted := redactLeafQuery(*s).(T)
+	return &redacted
+}
+
+func redactLeafQuery(spec any) any {
+	switch s := spec.(type) {
+	case qb.QueryBuilderQuery[qb.LogAggregation]:
+		return redactBuilderQuery(s)
+	case qb.QueryBuilderQuery[qb.MetricAggregation]:
+		return redactBuilderQuery(s)
+	case qb.QueryBuilderQuery[qb.TraceAggregation]:
+		return redactBuilderQuery(s)
+	case qb.PromQuery:
+		return qb.PromQuery{Name: s.Name, Legend: s.Legend}
+	case qb.ClickHouseQuery:
+		return qb.ClickHouseQuery{Name: s.Name, Legend: s.Legend}
+	case qb.QueryBuilderFormula:
+		return qb.QueryBuilderFormula{Name: s.Name, Expression: s.Expression, Legend: s.Legend}
+	case qb.QueryBuilderTraceOperator:
+		return qb.QueryBuilderTraceOperator{
+			Name:         s.Name,
+			Expression:   s.Expression,
+			Aggregations: s.Aggregations,
+			GroupBy:      s.GroupBy,
+			Legend:       s.Legend,
+		}
+	}
+	return spec
+}
+
+func redactBuilderQuery[T any](q qb.QueryBuilderQuery[T]) qb.QueryBuilderQuery[T] {
+	return qb.QueryBuilderQuery[T]{
+		Name:         q.Name,
+		Signal:       q.Signal,
+		Source:       q.Source,
+		Aggregations: q.Aggregations,
+		GroupBy:      q.GroupBy,
+		Legend:       q.Legend,
+	}
+}
+
+// ════════════════════════════════════════════════════════════════════════
+// Panel query
+// ════════════════════════════════════════════════════════════════════════
+
+func (d *DashboardV2) GetPanelQuery(startTime, endTime uint64, panelKey string) (*qb.QueryRangeRequest, error) {
+	panel, ok := d.Spec.Panels[panelKey]
+	if !ok || panel == nil {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidInput, "panel with key %q doesn't exist", panelKey)
+	}
+	// Validator guarantees exactly one query per panel.
+	if len(panel.Spec.Queries) != 1 {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "panel %q must have exactly one query", panelKey)
+	}
+
+	query := panel.Spec.Queries[0]
+	composite, err := query.Spec.Plugin.buildV5CompositeQueryFromPlugin()
+	if err != nil {
+		return nil, err
+	}
+
+	// fillGaps lives on the panel visualization; only timeseries and bar chart carry it.
+	fillGaps := false
+	switch panelSpec := panel.Spec.Plugin.Spec.(type) {
+	case *TimeSeriesPanelSpec:
+		if panelSpec != nil {
+			fillGaps = panelSpec.Visualization.FillSpans
+		}
+	case *BarChartPanelSpec:
+		if panelSpec != nil {
+			fillGaps = panelSpec.Visualization.FillSpans
+		}
+	}
+
+	return &qb.QueryRangeRequest{
+		SchemaVersion:  "v1",
+		Start:          startTime,
+		End:            endTime,
+		RequestType:    query.Kind,
+		CompositeQuery: composite,
+		FormatOptions: &qb.FormatOptions{
+			FillGaps:               fillGaps,
+			FormatTableResultForUI: panel.Spec.Plugin.Kind == PanelKindTable,
+		},
+	}, nil
+}

pkg/types/dashboardtypes/perses_public_dashboard_panel_query_test.go

@@ -0,0 +1,331 @@
+package dashboardtypes
+
+import (
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestDashboardV2GetPanelQuery(t *testing.T) {
+	t.Run("returns error when the panel does not exist", func(t *testing.T) {
+		dashboard := &DashboardV2{
+			Spec: DashboardSpec{
+				Panels: map[string]*Panel{
+					"panel-1": {
+						Spec: PanelSpec{
+							Plugin: PanelPlugin{Kind: PanelKindTimeSeries},
+							Queries: []Query{
+								{
+									Kind: qb.RequestTypeTimeSeries,
+									Spec: QuerySpec{
+										Plugin: QueryPlugin{
+											Kind: QueryKindBuilder,
+											Spec: &BuilderQuerySpec{Spec: qb.QueryBuilderQuery[qb.MetricAggregation]{Name: "A"}},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		}
+
+		_, err := dashboard.GetPanelQuery(1, 2, "wrongPanelKey")
+		require.Error(t, err)
+		assert.True(t, errors.Ast(err, errors.TypeInvalidInput))
+	})
+
+	t.Run("returns error when the panel is nil", func(t *testing.T) {
+		dashboard := &DashboardV2{
+			Spec: DashboardSpec{
+				Panels: map[string]*Panel{
+					"panel-1": nil,
+				},
+			},
+		}
+
+		_, err := dashboard.GetPanelQuery(1, 2, "panel-1")
+		require.Error(t, err)
+		assert.True(t, errors.Ast(err, errors.TypeInvalidInput))
+	})
+
+	t.Run("returns error unless the panel has exactly one query", func(t *testing.T) {
+		cases := []struct {
+			description string
+			queries     []Query
+		}{
+			{description: "zero queries", queries: nil},
+			{description: "two queries", queries: []Query{{}, {}}},
+		}
+
+		for _, tc := range cases {
+			t.Run(tc.description, func(t *testing.T) {
+				dashboard := &DashboardV2{
+					Spec: DashboardSpec{
+						Panels: map[string]*Panel{
+							"panel-1": {
+								Spec: PanelSpec{Queries: tc.queries},
+							},
+						},
+					},
+				}
+
+				_, err := dashboard.GetPanelQuery(1, 2, "panel-1")
+				require.Error(t, err)
+				assert.True(t, errors.Ast(err, errors.TypeInvalidInput))
+			})
+		}
+	})
+
+	t.Run("builds a single-envelope request for a builder query", func(t *testing.T) {
+		builder := qb.QueryBuilderQuery[qb.MetricAggregation]{Name: "A"}
+		dashboard := &DashboardV2{
+			Spec: DashboardSpec{
+				Panels: map[string]*Panel{
+					"panel-1": {
+						Spec: PanelSpec{
+							Plugin: PanelPlugin{Kind: PanelKindTimeSeries},
+							Queries: []Query{
+								{
+									Kind: qb.RequestTypeTimeSeries,
+									Spec: QuerySpec{
+										Plugin: QueryPlugin{
+											Kind: QueryKindBuilder,
+											Spec: &BuilderQuerySpec{Spec: builder},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		}
+
+		req, err := dashboard.GetPanelQuery(100, 200, "panel-1")
+		require.NoError(t, err)
+
+		assert.Equal(t, "v1", req.SchemaVersion)
+		assert.Equal(t, uint64(100), req.Start)
+		assert.Equal(t, uint64(200), req.End)
+		assert.Equal(t, qb.RequestTypeTimeSeries, req.RequestType)
+		require.Len(t, req.CompositeQuery.Queries, 1)
+		assert.Equal(t, qb.QueryTypeBuilder, req.CompositeQuery.Queries[0].Type)
+		assert.Equal(t, builder, req.CompositeQuery.Queries[0].Spec)
+		require.NotNil(t, req.FormatOptions)
+		assert.False(t, req.FormatOptions.FormatTableResultForUI)
+	})
+
+	t.Run("uses a composite query as-is", func(t *testing.T) {
+		composite := &qb.CompositeQuery{Queries: []qb.QueryEnvelope{
+			{Type: qb.QueryTypeBuilder, Spec: qb.QueryBuilderQuery[qb.MetricAggregation]{Name: "A"}},
+			{Type: qb.QueryTypePromQL, Spec: qb.PromQuery{Name: "B"}},
+		}}
+		dashboard := &DashboardV2{
+			Spec: DashboardSpec{
+				Panels: map[string]*Panel{
+					"panel-1": {
+						Spec: PanelSpec{
+							Plugin: PanelPlugin{Kind: PanelKindTimeSeries},
+							Queries: []Query{
+								{
+									Kind: qb.RequestTypeTimeSeries,
+									Spec: QuerySpec{
+										Plugin: QueryPlugin{
+											Kind: QueryKindComposite,
+											Spec: composite,
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		}
+
+		req, err := dashboard.GetPanelQuery(1, 2, "panel-1")
+		require.NoError(t, err)
+		assert.Equal(t, composite.Queries, req.CompositeQuery.Queries)
+	})
+
+	t.Run("wraps a leaf query in a single typed envelope", func(t *testing.T) {
+		cases := []struct {
+			description  string
+			plugin       QueryPlugin
+			expectedType qb.QueryType
+		}{
+			{
+				description:  "promql",
+				plugin:       QueryPlugin{Kind: QueryKindPromQL, Spec: &qb.PromQuery{Name: "A", Query: "up"}},
+				expectedType: qb.QueryTypePromQL,
+			},
+			{
+				description:  "clickhouse",
+				plugin:       QueryPlugin{Kind: QueryKindClickHouseSQL, Spec: &qb.ClickHouseQuery{Name: "A", Query: "SELECT 1"}},
+				expectedType: qb.QueryTypeClickHouseSQL,
+			},
+			{
+				description:  "formula",
+				plugin:       QueryPlugin{Kind: QueryKindFormula, Spec: &qb.QueryBuilderFormula{Name: "F1", Expression: "A / B"}},
+				expectedType: qb.QueryTypeFormula,
+			},
+			{
+				description:  "trace operator",
+				plugin:       QueryPlugin{Kind: QueryKindTraceOperator, Spec: &qb.QueryBuilderTraceOperator{Name: "T1", Expression: "A => B"}},
+				expectedType: qb.QueryTypeTraceOperator,
+			},
+		}
+
+		for _, tc := range cases {
+			t.Run(tc.description, func(t *testing.T) {
+				dashboard := &DashboardV2{
+					Spec: DashboardSpec{
+						Panels: map[string]*Panel{
+							"panel-1": {
+								Spec: PanelSpec{
+									Plugin: PanelPlugin{Kind: PanelKindTimeSeries},
+									Queries: []Query{
+										{
+											Kind: qb.RequestTypeTimeSeries,
+											Spec: QuerySpec{Plugin: tc.plugin},
+										},
+									},
+								},
+							},
+						},
+					},
+				}
+
+				req, err := dashboard.GetPanelQuery(1, 2, "panel-1")
+				require.NoError(t, err)
+				require.Len(t, req.CompositeQuery.Queries, 1)
+				assert.Equal(t, tc.expectedType, req.CompositeQuery.Queries[0].Type)
+			})
+		}
+	})
+
+	t.Run("sets FormatTableResultForUI only for table panels", func(t *testing.T) {
+		dashboard := &DashboardV2{
+			Spec: DashboardSpec{
+				Panels: map[string]*Panel{
+					"panel-1": {
+						Spec: PanelSpec{
+							Plugin: PanelPlugin{Kind: PanelKindTable},
+							Queries: []Query{
+								{
+									Kind: qb.RequestTypeScalar,
+									Spec: QuerySpec{
+										Plugin: QueryPlugin{
+											Kind: QueryKindBuilder,
+											Spec: &BuilderQuerySpec{Spec: qb.QueryBuilderQuery[qb.MetricAggregation]{Name: "A"}},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		}
+
+		req, err := dashboard.GetPanelQuery(1, 2, "panel-1")
+		require.NoError(t, err)
+		require.NotNil(t, req.FormatOptions)
+		assert.True(t, req.FormatOptions.FormatTableResultForUI)
+	})
+
+	t.Run("sets FillGaps from the panel visualization", func(t *testing.T) {
+		cases := []struct {
+			description      string
+			panelPlugin      PanelPlugin
+			expectedFillGaps bool
+		}{
+			{
+				description:      "timeseries with fillSpans enabled",
+				panelPlugin:      PanelPlugin{Kind: PanelKindTimeSeries, Spec: &TimeSeriesPanelSpec{Visualization: TimeSeriesVisualization{FillSpans: true}}},
+				expectedFillGaps: true,
+			},
+			{
+				description:      "timeseries with fillSpans disabled",
+				panelPlugin:      PanelPlugin{Kind: PanelKindTimeSeries, Spec: &TimeSeriesPanelSpec{Visualization: TimeSeriesVisualization{FillSpans: false}}},
+				expectedFillGaps: false,
+			},
+			{
+				description:      "bar chart with fillSpans enabled",
+				panelPlugin:      PanelPlugin{Kind: PanelKindBarChart, Spec: &BarChartPanelSpec{Visualization: BarChartVisualization{FillSpans: true}}},
+				expectedFillGaps: true,
+			},
+			{
+				description:      "table panel has no fillSpans",
+				panelPlugin:      PanelPlugin{Kind: PanelKindTable, Spec: &TablePanelSpec{}},
+				expectedFillGaps: false,
+			},
+		}
+
+		for _, tc := range cases {
+			t.Run(tc.description, func(t *testing.T) {
+				dashboard := &DashboardV2{
+					Spec: DashboardSpec{
+						Panels: map[string]*Panel{
+							"panel-1": {
+								Spec: PanelSpec{
+									Plugin: tc.panelPlugin,
+									Queries: []Query{
+										{
+											Kind: qb.RequestTypeTimeSeries,
+											Spec: QuerySpec{
+												Plugin: QueryPlugin{
+													Kind: QueryKindBuilder,
+													Spec: &BuilderQuerySpec{Spec: qb.QueryBuilderQuery[qb.MetricAggregation]{Name: "A"}},
+												},
+											},
+										},
+									},
+								},
+							},
+						},
+					},
+				}
+
+				req, err := dashboard.GetPanelQuery(1, 2, "panel-1")
+				require.NoError(t, err)
+				require.NotNil(t, req.FormatOptions)
+				assert.Equal(t, tc.expectedFillGaps, req.FormatOptions.FillGaps)
+			})
+		}
+	})
+
+	t.Run("returns error for an unsupported plugin spec", func(t *testing.T) {
+		dashboard := &DashboardV2{
+			Spec: DashboardSpec{
+				Panels: map[string]*Panel{
+					"panel-1": {
+						Spec: PanelSpec{
+							Plugin: PanelPlugin{Kind: PanelKindTimeSeries},
+							Queries: []Query{
+								{
+									Kind: qb.RequestTypeTimeSeries,
+									Spec: QuerySpec{
+										Plugin: QueryPlugin{
+											Kind: QueryKindBuilder,
+											Spec: "not-a-query",
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		}
+
+		_, err := dashboard.GetPanelQuery(1, 2, "panel-1")
+		require.Error(t, err)
+		assert.True(t, errors.Ast(err, errors.TypeInvalidInput))
+	})
+}

pkg/types/dashboardtypes/perses_public_dashboard_redaction_test.go

@@ -0,0 +1,240 @@
+package dashboardtypes
+
+import (
+	"testing"
+	"time"
+
+	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/perses/spec/go/dashboard/variable"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestRedactLeafQuery(t *testing.T) {
+	t.Run("builder query drops filter, having, limit and keeps display fields", func(t *testing.T) {
+		input := qb.QueryBuilderQuery[qb.MetricAggregation]{
+			Name:         "A",
+			Signal:       telemetrytypes.SignalMetrics,
+			Aggregations: []qb.MetricAggregation{{MetricName: "system_cpu_usage"}},
+			GroupBy:      []qb.GroupByKey{{}},
+			Legend:       "cpu",
+			Disabled:     true,
+			StepInterval: qb.Step{Duration: time.Minute},
+			Filter:       &qb.Filter{Expression: "service.name = 'checkout'"},
+			Having:       &qb.Having{},
+			Limit:        100,
+		}
+
+		redacted, ok := redactLeafQuery(input).(qb.QueryBuilderQuery[qb.MetricAggregation])
+		require.True(t, ok)
+
+		// dropped (not in the v1 whitelist)
+		assert.Nil(t, redacted.Filter)
+		assert.Nil(t, redacted.Having)
+		assert.Zero(t, redacted.Limit)
+		assert.Zero(t, redacted.StepInterval)
+		assert.False(t, redacted.Disabled)
+
+		// kept (display)
+		assert.Equal(t, "A", redacted.Name)
+		assert.Equal(t, telemetrytypes.SignalMetrics, redacted.Signal)
+		assert.Equal(t, "cpu", redacted.Legend)
+		require.Len(t, redacted.Aggregations, 1)
+		assert.Equal(t, "system_cpu_usage", redacted.Aggregations[0].MetricName)
+		assert.Len(t, redacted.GroupBy, 1)
+	})
+
+	t.Run("promql query drops the raw query, step and disabled", func(t *testing.T) {
+		redacted, ok := redactLeafQuery(qb.PromQuery{
+			Name:     "A",
+			Query:    "sum(rate(http_requests_total[5m]))",
+			Step:     qb.Step{Duration: time.Minute},
+			Disabled: true,
+			Legend:   "rps",
+		}).(qb.PromQuery)
+		require.True(t, ok)
+
+		assert.Empty(t, redacted.Query)
+		assert.Zero(t, redacted.Step)
+		assert.False(t, redacted.Disabled)
+		assert.Equal(t, "A", redacted.Name)
+		assert.Equal(t, "rps", redacted.Legend)
+	})
+
+	t.Run("clickhouse query drops the raw query string", func(t *testing.T) {
+		redacted, ok := redactLeafQuery(qb.ClickHouseQuery{
+			Name:   "A",
+			Query:  "SELECT * FROM signoz_logs WHERE user = 'admin'",
+			Legend: "logs",
+		}).(qb.ClickHouseQuery)
+		require.True(t, ok)
+
+		assert.Empty(t, redacted.Query)
+		assert.Equal(t, "A", redacted.Name)
+		assert.Equal(t, "logs", redacted.Legend)
+	})
+
+	t.Run("formula keeps its expression but drops limit and having", func(t *testing.T) {
+		redacted, ok := redactLeafQuery(qb.QueryBuilderFormula{
+			Name:       "F1",
+			Expression: "A / B",
+			Legend:     "ratio",
+			Limit:      50,
+			Having:     &qb.Having{},
+		}).(qb.QueryBuilderFormula)
+		require.True(t, ok)
+
+		assert.Equal(t, "A / B", redacted.Expression)
+		assert.Equal(t, "F1", redacted.Name)
+		assert.Equal(t, "ratio", redacted.Legend)
+		assert.Zero(t, redacted.Limit)
+		assert.Nil(t, redacted.Having)
+	})
+
+	t.Run("trace operator drops filter but keeps expression and aggregations", func(t *testing.T) {
+		redacted, ok := redactLeafQuery(qb.QueryBuilderTraceOperator{
+			Name:            "T1",
+			Expression:      "A => B",
+			Aggregations:    []qb.TraceAggregation{{}},
+			Legend:          "spans",
+			Filter:          &qb.Filter{Expression: "http.status_code = 500"},
+			ReturnSpansFrom: "A",
+			Limit:           10,
+		}).(qb.QueryBuilderTraceOperator)
+		require.True(t, ok)
+
+		assert.Nil(t, redacted.Filter)
+		assert.Empty(t, redacted.ReturnSpansFrom)
+		assert.Zero(t, redacted.Limit)
+		assert.Equal(t, "A => B", redacted.Expression)
+		assert.Equal(t, "T1", redacted.Name)
+		assert.Len(t, redacted.Aggregations, 1)
+	})
+
+	t.Run("unknown value is returned unchanged", func(t *testing.T) {
+		assert.Equal(t, "passthrough", redactLeafQuery("passthrough"))
+	})
+}
+
+func TestRedactQueryPluginWrappers(t *testing.T) {
+	t.Run("builder plugin pointer is redacted and stays a pointer", func(t *testing.T) {
+		plugin := &BuilderQuerySpec{Spec: qb.QueryBuilderQuery[qb.LogAggregation]{
+			Name:   "A",
+			Filter: &qb.Filter{Expression: "body contains 'secret'"},
+		}}
+
+		result, ok := redactQuery(plugin).(*BuilderQuerySpec)
+		require.True(t, ok)
+
+		builder, ok := result.Spec.(qb.QueryBuilderQuery[qb.LogAggregation])
+		require.True(t, ok)
+		assert.Nil(t, builder.Filter)
+		assert.Equal(t, "A", builder.Name)
+	})
+
+	t.Run("composite plugin redacts every sub-query envelope", func(t *testing.T) {
+		composite := &qb.CompositeQuery{Queries: []qb.QueryEnvelope{
+			{Type: qb.QueryTypeBuilder, Spec: qb.QueryBuilderQuery[qb.MetricAggregation]{Name: "A", Filter: &qb.Filter{Expression: "x = 1"}}},
+			{Type: qb.QueryTypePromQL, Spec: qb.PromQuery{Name: "B", Query: "up"}},
+		}}
+
+		result, ok := redactQuery(composite).(*qb.CompositeQuery)
+		require.True(t, ok)
+		require.Len(t, result.Queries, 2)
+
+		builder, ok := result.Queries[0].Spec.(qb.QueryBuilderQuery[qb.MetricAggregation])
+		require.True(t, ok)
+		assert.Nil(t, builder.Filter)
+
+		prom, ok := result.Queries[1].Spec.(qb.PromQuery)
+		require.True(t, ok)
+		assert.Empty(t, prom.Query)
+	})
+
+	t.Run("promql plugin pointer drops the raw query", func(t *testing.T) {
+		result, ok := redactQuery(&qb.PromQuery{Name: "A", Query: "up"}).(*qb.PromQuery)
+		require.True(t, ok)
+		assert.Empty(t, result.Query)
+		assert.Equal(t, "A", result.Name)
+	})
+
+	t.Run("nil composite pointer is returned unchanged without panicking", func(t *testing.T) {
+		var nilComposite *qb.CompositeQuery
+		assert.Equal(t, nilComposite, redactQuery(nilComposite))
+	})
+
+	t.Run("unknown plugin spec is returned unchanged", func(t *testing.T) {
+		assert.Equal(t, 42, redactQuery(42))
+	})
+}
+
+func TestRedactPanelQueries(t *testing.T) {
+	t.Run("redacts panel queries without mutating the source spec", func(t *testing.T) {
+		sourcePlugin := &BuilderQuerySpec{Spec: qb.QueryBuilderQuery[qb.MetricAggregation]{
+			Name:   "A",
+			Filter: &qb.Filter{Expression: "service.name = 'payments'"},
+		}}
+		sourcePanel := &Panel{Spec: PanelSpec{
+			Queries: []Query{{Spec: QuerySpec{Plugin: QueryPlugin{Kind: QueryKindBuilder, Spec: sourcePlugin}}}},
+		}}
+		spec := DashboardSpec{Panels: map[string]*Panel{"panel-1": sourcePanel}}
+
+		redactPanelQueries(&spec)
+
+		// redacted output has no filter
+		redactedPanel := spec.Panels["panel-1"]
+		require.NotNil(t, redactedPanel)
+		redactedBuilder := redactedPanel.Spec.Queries[0].Spec.Plugin.Spec.(*BuilderQuerySpec).Spec.(qb.QueryBuilderQuery[qb.MetricAggregation])
+		assert.Nil(t, redactedBuilder.Filter)
+
+		// source is untouched: original plugin still carries the filter
+		sourceBuilder := sourcePlugin.Spec.(qb.QueryBuilderQuery[qb.MetricAggregation])
+		require.NotNil(t, sourceBuilder.Filter)
+		assert.Equal(t, "service.name = 'payments'", sourceBuilder.Filter.Expression)
+		assert.NotSame(t, sourcePanel, redactedPanel)
+	})
+
+	t.Run("preserves nil panels without panicking", func(t *testing.T) {
+		spec := DashboardSpec{Panels: map[string]*Panel{"panel-1": nil}}
+
+		redactPanelQueries(&spec)
+
+		panel, ok := spec.Panels["panel-1"]
+		assert.True(t, ok)
+		assert.Nil(t, panel)
+	})
+}
+
+func TestRedactVariableQueries(t *testing.T) {
+	// Spec fields are pointers (*ListVariableSpec, *QueryVariableSpec) to match what
+	// the store produces after JSON decode; value types would slip past the type
+	// assertions in redactVariableQueries.
+	t.Run("drops the query-variable query without mutating the source", func(t *testing.T) {
+		source := &ListVariableSpec{
+			Name:   "namespace",
+			Plugin: VariablePlugin{Kind: VariableKindQuery, Spec: &QueryVariableSpec{QueryValue: "SELECT DISTINCT namespace FROM secret_table"}},
+		}
+		spec := DashboardSpec{Variables: []Variable{{Kind: variable.KindList, Spec: source}}}
+
+		redactVariableQueries(&spec)
+
+		redacted := spec.Variables[0].Spec.(*ListVariableSpec)
+		assert.Empty(t, redacted.Plugin.Spec.(*QueryVariableSpec).QueryValue)
+		assert.Equal(t, "namespace", redacted.Name)
+		// source pointee is untouched
+		assert.Equal(t, "SELECT DISTINCT namespace FROM secret_table", source.Plugin.Spec.(*QueryVariableSpec).QueryValue)
+	})
+
+	t.Run("leaves non-query variables untouched", func(t *testing.T) {
+		spec := DashboardSpec{Variables: []Variable{
+			{Kind: variable.KindList, Spec: &ListVariableSpec{Name: "signal", Plugin: VariablePlugin{Kind: VariableKindDynamic, Spec: &DynamicVariableSpec{Name: "service.name", Signal: telemetrytypes.SignalTraces}}}},
+			{Kind: variable.KindList, Spec: &ListVariableSpec{Name: "env", Plugin: VariablePlugin{Kind: VariableKindCustom, Spec: &CustomVariableSpec{CustomValue: "prod,staging"}}}},
+		}}
+
+		redactVariableQueries(&spec)
+
+		assert.Equal(t, "service.name", spec.Variables[0].Spec.(*ListVariableSpec).Plugin.Spec.(*DynamicVariableSpec).Name)
+		assert.Equal(t, "prod,staging", spec.Variables[1].Spec.(*ListVariableSpec).Plugin.Spec.(*CustomVariableSpec).CustomValue)
+	})
+}

pkg/types/dashboardtypes/public_dashboard.go

@@ -2,6 +2,7 @@ package dashboardtypes
 
 import (
 	"encoding/json"
+	"strconv"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -212,6 +213,30 @@ func (typ *PublicDashboard) PublicPath() string {
 	return "/public/dashboard/" + typ.ID.StringValue()
 }
 
+// ResolveTimeRange returns the [start, end] window in epoch millis for a public
+// widget/panel query: the caller-supplied range when the dashboard allows it,
+// otherwise now minus the configured default range.
+func (typ *PublicDashboard) ResolveTimeRange(startTimeRaw, endTimeRaw string) (uint64, uint64, error) {
+	if typ.TimeRangeEnabled {
+		startTime, err := strconv.ParseUint(startTimeRaw, 10, 64)
+		if err != nil {
+			return 0, 0, errors.New(errors.TypeInvalidInput, ErrCodePublicDashboardInvalidInput, "invalid startTime")
+		}
+		endTime, err := strconv.ParseUint(endTimeRaw, 10, 64)
+		if err != nil {
+			return 0, 0, errors.New(errors.TypeInvalidInput, ErrCodePublicDashboardInvalidInput, "invalid endTime")
+		}
+		return startTime, endTime, nil
+	}
+
+	timeRange, err := time.ParseDuration(typ.DefaultTimeRange)
+	if err != nil {
+		return 0, 0, errors.WrapInternalf(err, errors.CodeInternal, "stored defaultTimeRange %q is not a valid duration", typ.DefaultTimeRange)
+	}
+	now := time.Now()
+	return uint64(now.Add(-timeRange).UnixMilli()), uint64(now.UnixMilli()), nil
+}
+
 func (typ *PostablePublicDashboard) UnmarshalJSON(data []byte) error {
 	type alias PostablePublicDashboard
 	var temp alias

pkg/types/dashboardtypes/public_dashboard_test.go

@@ -0,0 +1,117 @@
+package dashboardtypes
+
+import (
+	"testing"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestPublicDashboardResolveTimeRange(t *testing.T) {
+	t.Run("returns the explicit range when time range is enabled", func(t *testing.T) {
+		cases := []struct {
+			description   string
+			startTimeRaw  string
+			endTimeRaw    string
+			expectedStart uint64
+			expectedEnd   uint64
+		}{
+			{
+				description:   "valid epoch millis",
+				startTimeRaw:  "1700000000000",
+				endTimeRaw:    "1700000600000",
+				expectedStart: 1700000000000,
+				expectedEnd:   1700000600000,
+			},
+			{
+				description:   "zero start is allowed",
+				startTimeRaw:  "0",
+				endTimeRaw:    "1700000600000",
+				expectedStart: 0,
+				expectedEnd:   1700000600000,
+			},
+		}
+
+		for _, tc := range cases {
+			t.Run(tc.description, func(t *testing.T) {
+				publicDashboard := &PublicDashboard{TimeRangeEnabled: true}
+
+				startTime, endTime, err := publicDashboard.ResolveTimeRange(tc.startTimeRaw, tc.endTimeRaw)
+				require.NoError(t, err)
+				assert.Equal(t, tc.expectedStart, startTime)
+				assert.Equal(t, tc.expectedEnd, endTime)
+			})
+		}
+	})
+
+	t.Run("rejects an invalid explicit range when time range is enabled", func(t *testing.T) {
+		cases := []struct {
+			description  string
+			startTimeRaw string
+			endTimeRaw   string
+		}{
+			{description: "non-numeric startTime", startTimeRaw: "abc", endTimeRaw: "1700000600000"},
+			{description: "empty startTime", startTimeRaw: "", endTimeRaw: "1700000600000"},
+			{description: "negative startTime", startTimeRaw: "-1", endTimeRaw: "1700000600000"},
+			{description: "non-numeric endTime", startTimeRaw: "1700000000000", endTimeRaw: "xyz"},
+			{description: "empty endTime", startTimeRaw: "1700000000000", endTimeRaw: ""},
+		}
+
+		for _, tc := range cases {
+			t.Run(tc.description, func(t *testing.T) {
+				publicDashboard := &PublicDashboard{TimeRangeEnabled: true}
+
+				_, _, err := publicDashboard.ResolveTimeRange(tc.startTimeRaw, tc.endTimeRaw)
+				assert.Error(t, err)
+				assert.True(t, errors.Ast(err, errors.TypeInvalidInput))
+			})
+		}
+	})
+
+	t.Run("derives the range from now and the default when time range is disabled", func(t *testing.T) {
+		cases := []struct {
+			description      string
+			defaultTimeRange string
+			expectedWidthMS  uint64
+		}{
+			{description: "one hour", defaultTimeRange: "1h", expectedWidthMS: uint64(time.Hour.Milliseconds())},
+			{description: "thirty minutes", defaultTimeRange: "30m", expectedWidthMS: uint64((30 * time.Minute).Milliseconds())},
+		}
+
+		for _, tc := range cases {
+			t.Run(tc.description, func(t *testing.T) {
+				publicDashboard := &PublicDashboard{TimeRangeEnabled: false, DefaultTimeRange: tc.defaultTimeRange}
+
+				before := uint64(time.Now().UnixMilli())
+				startTime, endTime, err := publicDashboard.ResolveTimeRange("ignored", "ignored")
+				after := uint64(time.Now().UnixMilli())
+
+				require.NoError(t, err)
+				// end is "now"; both bounds share the same instant, so the width is exact.
+				assert.GreaterOrEqual(t, endTime, before)
+				assert.LessOrEqual(t, endTime, after)
+				assert.Equal(t, tc.expectedWidthMS, endTime-startTime)
+			})
+		}
+	})
+
+	t.Run("ignores caller-supplied bounds when time range is disabled", func(t *testing.T) {
+		publicDashboard := &PublicDashboard{TimeRangeEnabled: false, DefaultTimeRange: "1h"}
+
+		startTime, endTime, err := publicDashboard.ResolveTimeRange("123", "456")
+		require.NoError(t, err)
+		assert.NotEqual(t, uint64(123), startTime)
+		assert.NotEqual(t, uint64(456), endTime)
+		assert.Equal(t, uint64(time.Hour.Milliseconds()), endTime-startTime)
+	})
+
+	t.Run("returns an internal error for an unparseable stored default range", func(t *testing.T) {
+		publicDashboard := &PublicDashboard{TimeRangeEnabled: false, DefaultTimeRange: "not-a-duration"}
+
+		_, _, err := publicDashboard.ResolveTimeRange("", "")
+		assert.Error(t, err)
+		assert.True(t, errors.Ast(err, errors.TypeInternal))
+	})
+}

pkg/types/dashboardtypes/testdata/perses.json

@@ -652,6 +652,7 @@
                                             "type": "builder_trace_operator",
                                             "spec": {
                                                 "name": "T1",
+                                                "expression": "A => B",
                                                 "aggregations": [
                                                     {
                                                         "expression": "count()",

pkg/types/llmpricingruletypes/pricing.go

@@ -3,6 +3,7 @@ package llmpricingruletypes
 import (
 	"database/sql/driver"
 	"encoding/json"
+	"path"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -16,6 +17,7 @@ const (
 	LLMCostFeatureType agentConf.AgentFeatureType = "llm_pricing"
 
 	GenAIRequestModel                  = "gen_ai.request.model"
+	GenAIProviderName                  = "gen_ai.provider.name"
 	GenAIUsageInputTokens              = "gen_ai.usage.input_tokens"
 	GenAIUsageOutputTokens             = "gen_ai.usage.output_tokens"
 	GenAIUsageCacheReadInputTokens     = "gen_ai.usage.cache_read.input_tokens"
@@ -139,6 +141,17 @@ type GettablePricingRules struct {
 	Limit  int                       `json:"limit"  required:"true"`
 }
 
+// Models deleted from spans which doesn't have a corresponding pricing entry.
+type UnmappedModel struct {
+	ModelName string `json:"modelName" required:"true"`
+	Provider  string `json:"provider"`
+	SpanCount uint64 `json:"spanCount" required:"true"`
+}
+
+type GettableUnmappedModels struct {
+	Items []*UnmappedModel `json:"items" required:"true"`
+}
+
 func (LLMPricingRuleUnit) Enum() []any {
 	return []any{UnitPerMillionTokens}
 }
@@ -207,6 +220,12 @@ func NewGettableLLMPricingRulesFromLLMPricingRules(items []*LLMPricingRule, tota
 	}
 }
 
+func NewGettableUnmappedModels(items []*UnmappedModel) *GettableUnmappedModels {
+	return &GettableUnmappedModels{
+		Items: items,
+	}
+}
+
 func NewLLMPricingRuleFromUpdatable(u *UpdatableLLMPricingRule, orgID valuer.UUID, userEmail string, now time.Time) *LLMPricingRule {
 	isOverride := true
 	if u.IsOverride != nil {
@@ -251,3 +270,14 @@ func (r *LLMPricingRule) Update(u *UpdatableLLMPricingRule, userEmail string, no
 	r.UpdatedAt = now
 	r.UpdatedBy = userEmail
 }
+
+func ModelMatchesAnyRule(model string, rules []*LLMPricingRule) bool {
+	for _, r := range rules {
+		for _, pattern := range r.ModelPattern {
+			if ok, err := path.Match(pattern, model); err == nil && ok {
+				return true
+			}
+		}
+	}
+	return false
+}

tests/integration/tests/dashboard/03_v2_dashboard.py

@@ -1403,3 +1403,83 @@ def test_dashboard_v2_get_by_metric_name(
     assert sorted(by_dashboard[d1_id]) == ["D1 builder target"]
     assert sorted(by_dashboard[d2_id]) == ["D2 clickhouse target", "D2 promql target"]
     assert sorted(by_dashboard[d3_id]) == ["D3 promql target"]
+
+
+# ─── aggregation expression validation ───────────────────────────────────────
+
+
+def test_dashboard_v2_rejects_comma_separated_aggregation(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    """The querier never splits aggregation expressions, so each aggregation entry must
+    be a single function call. A comma-separated expression ("count(), sum(...)") is
+    rejected at create time; the pre-split form of the same panel is accepted."""
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    def make_dashboard(aggregations: list[dict]) -> dict:
+        return {
+            "schemaVersion": "v6",
+            "name": f"agg-{uuid.uuid4().hex[:8]}",
+            "tags": [],
+            "spec": {
+                "display": {"name": "Aggregation"},
+                "panels": {
+                    "p-agg": {
+                        "kind": "Panel",
+                        "spec": {
+                            "display": {"name": "agg"},
+                            "plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
+                            "queries": [
+                                {
+                                    "kind": "time_series",
+                                    "spec": {
+                                        "plugin": {
+                                            "kind": "signoz/BuilderQuery",
+                                            "spec": {"name": "A", "signal": "logs", "aggregations": aggregations},
+                                        }
+                                    },
+                                }
+                            ],
+                        },
+                    }
+                },
+            },
+        }
+
+    # a single comma-separated expression is rejected
+    rejected = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json=make_dashboard([{"expression": "count(), sum(latency_ms)"}]),
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert rejected.status_code == HTTPStatus.BAD_REQUEST, rejected.text
+    assert "single function call" in rejected.text, rejected.text
+
+    # the pre-split form of the same panel is accepted
+    accepted = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json=make_dashboard([{"expression": "count()"}, {"expression": "sum(latency_ms)"}]),
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert accepted.status_code == HTTPStatus.CREATED, accepted.text
+
+    # a single call whose string literal contains parentheses is accepted (the check
+    # parses rather than counting "word(", so it does not mistake ')...(' for a second call)
+    literal_parens = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json=make_dashboard([{"expression": "countIf(body = 'a)b(c)')"}]),
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert literal_parens.status_code == HTTPStatus.CREATED, literal_parens.text
+
+    for dashboard_id in (accepted.json()["data"]["id"], literal_parens.json()["data"]["id"]):
+        requests.delete(
+            signoz.self.host_configs["8080"].get(f"{BASE_URL}/{dashboard_id}"),
+            headers={"Authorization": f"Bearer {token}"},
+            timeout=5,
+        )

tests/integration/tests/dashboard/05_v2_public_dashboard.py

@@ -0,0 +1,251 @@
+from collections.abc import Callable
+from datetime import UTC, datetime, timedelta
+from http import HTTPStatus
+
+import requests
+from wiremock.resources.mappings import Mapping
+
+from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD, add_license
+from fixtures.metrics import Metrics
+from fixtures.types import Operation, SigNoz, TestContainerDocker
+
+V2_BASE_URL = "/api/v2/dashboards"
+PANEL_KEY = "24e2697b"
+
+
+def test_apply_license(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    make_http_mocks: Callable[[TestContainerDocker, list[Mapping]], None],
+    get_token: Callable[[str, str], str],
+) -> None:
+    """
+    Public dashboards are a licensed feature, so a license must be present.
+    """
+    add_license(signoz, make_http_mocks, get_token)
+
+
+def test_public_dashboard_v2(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_metrics: Callable[[list[Metrics]], None],
+):
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    # Insert metric data so the panel query resolves to a result.
+    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
+    insert_metrics(
+        [
+            Metrics(
+                metric_name="system.cpu.time",
+                labels={"service.name": "sampleapp"},
+                timestamp=now - timedelta(minutes=minutes),
+                value=value,
+                temporality="Cumulative",
+            )
+            for minutes, value in ((5, 100.0), (3, 200.0), (1, 300.0))
+        ]
+    )
+
+    # Create a v2 dashboard with one panel whose builder query carries a filter,
+    # so we can assert the filter is redacted from the anonymous payload.
+    create_response = requests.post(
+        signoz.self.host_configs["8080"].get(V2_BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "v2-public-sample",
+            "tags": [{"key": "team", "value": "pulse"}],
+            "spec": {
+                "display": {"name": "Sample Dashboard", "description": "Used for integration tests"},
+                "duration": "1h",
+                "variables": [
+                    {
+                        "kind": "ListVariable",
+                        "spec": {
+                            "name": "host.name",
+                            "display": {"name": "Host Name"},
+                            "plugin": {
+                                "kind": "signoz/QueryVariable",
+                                "spec": {"queryValue": "SELECT JSONExtractString(labels, 'host.name') AS `host.name` FROM signoz_metrics.distributed_time_series_v4_1day WHERE metric_name = 'system.cpu.time' GROUP BY `host.name`"},
+                            },
+                        },
+                    }
+                ],
+                "panels": {
+                    PANEL_KEY: {
+                        "kind": "Panel",
+                        "spec": {
+                            "display": {"name": "total"},
+                            "plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {"visualization": {"fillSpans": True}}},
+                            "queries": [
+                                {
+                                    "kind": "time_series",
+                                    "spec": {
+                                        "plugin": {
+                                            "kind": "signoz/BuilderQuery",
+                                            "spec": {
+                                                "name": "A",
+                                                "signal": "metrics",
+                                                "aggregations": [
+                                                    {
+                                                        "metricName": "system.cpu.time",
+                                                        "reduceTo": "sum",
+                                                        "spaceAggregation": "sum",
+                                                        "timeAggregation": "rate",
+                                                    }
+                                                ],
+                                                "filter": {"expression": "service.name = 'sampleapp'"},
+                                                "groupBy": [{"name": "service.name", "fieldDataType": "string", "fieldContext": "tag"}],
+                                            },
+                                        }
+                                    },
+                                }
+                            ],
+                        },
+                    }
+                },
+                "layouts": [
+                    {
+                        "kind": "Grid",
+                        "spec": {
+                            "items": [
+                                {
+                                    "x": 0,
+                                    "y": 0,
+                                    "width": 6,
+                                    "height": 6,
+                                    "content": {"$ref": f"#/spec/panels/{PANEL_KEY}"},
+                                }
+                            ]
+                        },
+                    }
+                ],
+            },
+        },
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=5,
+    )
+    assert create_response.status_code == HTTPStatus.CREATED, create_response.text
+    dashboard_id = create_response.json()["data"]["id"]
+
+    # Enable public sharing (the public-config endpoint is shape-agnostic, still v1).
+    public_response = requests.post(
+        signoz.self.host_configs["8080"].get(f"/api/v1/dashboards/{dashboard_id}/public"),
+        json={"timeRangeEnabled": True, "defaultTimeRange": "10m"},
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=5,
+    )
+    assert public_response.status_code == HTTPStatus.CREATED, public_response.text
+
+    config_response = requests.get(
+        signoz.self.host_configs["8080"].get(f"/api/v1/dashboards/{dashboard_id}/public"),
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=5,
+    )
+    assert config_response.status_code == HTTPStatus.OK, config_response.text
+    public_id = config_response.json()["data"]["publicPath"].split("/public/dashboard/")[-1]
+
+    # ── anonymous public data (no Authorization header) ──────────────────────
+    data_response = requests.get(
+        signoz.self.host_configs["8080"].get(f"/api/v2/public/dashboards/{public_id}"),
+        timeout=5,
+    )
+    assert data_response.status_code == HTTPStatus.OK, data_response.text
+    body = data_response.json()
+    assert body["status"] == "success"
+
+    dashboard = body["data"]["dashboard"]
+    assert dashboard["schemaVersion"] == "v6"
+    assert dashboard["spec"]["display"]["name"] == "Sample Dashboard"
+    assert {"key": "team", "value": "pulse"} in dashboard["tags"]
+
+    # Identity/audit fields are not exposed to anonymous viewers.
+    assert dashboard["createdBy"] == ""
+    assert dashboard["updatedBy"] == ""
+
+    # The public config is echoed back.
+    assert body["data"]["publicDashboard"]["timeRangeEnabled"] is True
+
+    # The builder query is redacted: the filter is gone, display fields remain.
+    builder = dashboard["spec"]["panels"][PANEL_KEY]["spec"]["queries"][0]["spec"]["plugin"]["spec"]
+    assert "filter" not in builder
+    assert builder["name"] == "A"
+    assert builder["signal"] == "metrics"
+    assert builder["aggregations"][0]["metricName"] == "system.cpu.time"
+    assert builder["groupBy"][0]["name"] == "service.name"
+
+    # The query variable's query is redacted; its identity remains.
+    variable = dashboard["spec"]["variables"][0]["spec"]
+    assert variable["name"] == "host.name"
+    assert variable["plugin"]["kind"] == "signoz/QueryVariable"
+    assert variable["plugin"]["spec"]["queryValue"] == ""
+
+    # ── anonymous panel query range ──────────────────────────────────────────
+    start_time = int((now - timedelta(minutes=15)).timestamp() * 1000)
+    end_time = int(now.timestamp() * 1000)
+
+    query_response = requests.get(
+        signoz.self.host_configs["8080"].get(f"/api/v2/public/dashboards/{public_id}/panels/{PANEL_KEY}/query_range"),
+        params={"startTime": start_time, "endTime": end_time},
+        timeout=10,
+    )
+    assert query_response.status_code == HTTPStatus.OK, query_response.text
+    query_body = query_response.json()
+    assert query_body["status"] == "success"
+
+    # The inserted metric is returned as a time series for query "A".
+    result = query_body["data"]
+    assert result["type"] == "time_series"
+    results = result["data"]["results"]
+    result_a = next((r for r in results if r.get("queryName") == "A"), None)
+    assert result_a is not None, results
+    series = result_a["aggregations"][0]["series"]
+    assert len(series) >= 1, result_a
+    assert len(series[0]["values"]) >= 1, series[0]
+
+    # With timeRangeEnabled, the bounds are required.
+    missing_range = requests.get(
+        signoz.self.host_configs["8080"].get(f"/api/v2/public/dashboards/{public_id}/panels/{PANEL_KEY}/query_range"),
+        timeout=5,
+    )
+    assert missing_range.status_code == HTTPStatus.BAD_REQUEST, missing_range.text
+
+    # An unknown panel key is rejected.
+    unknown_panel = requests.get(
+        signoz.self.host_configs["8080"].get(f"/api/v2/public/dashboards/{public_id}/panels/does-not-exist/query_range"),
+        params={"startTime": start_time, "endTime": end_time},
+        timeout=5,
+    )
+    assert unknown_panel.status_code == HTTPStatus.BAD_REQUEST, unknown_panel.text
+
+    # A bogus public id is rejected before any data is served.
+    bogus = requests.get(
+        signoz.self.host_configs["8080"].get(f"/api/v2/public/dashboards/not-a-real-id/panels/{PANEL_KEY}/query_range"),
+        params={"startTime": start_time, "endTime": end_time},
+        timeout=5,
+    )
+    assert bogus.status_code >= HTTPStatus.BAD_REQUEST
+
+    # ── deleting the dashboard removes public access ─────────────────────────
+    # DeleteV2 drops the public-config row in the same transaction, so the public
+    # id no longer resolves to a dashboard.
+    delete_response = requests.delete(
+        signoz.self.host_configs["8080"].get(f"{V2_BASE_URL}/{dashboard_id}"),
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=5,
+    )
+    assert delete_response.status_code == HTTPStatus.NO_CONTENT, delete_response.text
+
+    deleted_data = requests.get(
+        signoz.self.host_configs["8080"].get(f"/api/v2/public/dashboards/{public_id}"),
+        timeout=5,
+    )
+    assert deleted_data.status_code == HTTPStatus.NOT_FOUND, deleted_data.text
+
+    deleted_query = requests.get(
+        signoz.self.host_configs["8080"].get(f"/api/v2/public/dashboards/{public_id}/panels/{PANEL_KEY}/query_range"),
+        params={"startTime": start_time, "endTime": end_time},
+        timeout=5,
+    )
+    assert deleted_query.status_code == HTTPStatus.NOT_FOUND, deleted_query.text