chore: change panel background to a hexcode string

docs/api/openapi.yml

@@ -3064,6 +3064,11 @@ components:
       - tags
       - spec
       type: object
+    DashboardtypesHeaderOptions:
+      properties:
+        hide:
+          type: boolean
+      type: object
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -3421,6 +3426,7 @@ components:
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
+          signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
         propertyName: kind
       oneOf:
@@ -3431,6 +3437,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -3441,6 +3448,7 @@ components:
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
+      - signoz/TextPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
@@ -3514,6 +3522,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/TextPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesTextPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec:
       properties:
         kind:
@@ -3805,6 +3825,37 @@ components:
       - color
       - columnName
       type: object
+    DashboardtypesTextAlign:
+      enum:
+      - left
+      - center
+      - right
+      type: string
+    DashboardtypesTextMode:
+      enum:
+      - markdown
+      type: string
+    DashboardtypesTextPanelSpec:
+      properties:
+        headerOptions:
+          $ref: '#/components/schemas/DashboardtypesHeaderOptions'
+        mode:
+          $ref: '#/components/schemas/DashboardtypesTextMode'
+        presentation:
+          $ref: '#/components/schemas/DashboardtypesTextPresentation'
+        text:
+          type: string
+      type: object
+    DashboardtypesTextPresentation:
+      properties:
+        background:
+          nullable: true
+          type: string
+        textAlign:
+          $ref: '#/components/schemas/DashboardtypesTextAlign'
+        verticalAlign:
+          $ref: '#/components/schemas/DashboardtypesVerticalAlign'
+      type: object
     DashboardtypesTextVariableSpec:
       properties:
         constant:
@@ -4014,6 +4065,12 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesVerticalAlign:
+      enum:
+      - top
+      - center
+      - bottom
+      type: string
     ErrorsJSON:
       properties:
         code:

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx

@@ -5,11 +5,10 @@ import type {
 	DashboardtypesPanelSpecDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-import { getSupportedSignals } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
 import { resolveSignal } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
 import type { EQueryType } from 'types/common/dashboard';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../utils/legendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
 import ConfigActions from './ConfigActions/ConfigActions';
 import SectionSlot from './SectionSlot/SectionSlot';
@@ -68,7 +67,7 @@ function ConfigPane({
 	const definition = getPanelDefinition(panelKind);
 	const sections = definition.sections;
 
-	const signal = resolveSignal(spec.queries, getSupportedSignals(panelKind)[0]);
+	const signal = resolveSignal(spec.queries, definition.supportedSignals[0]);
 
 	// Title/description are just a slice of the spec — edit them through the same
 	// onChangeSpec path the sections use, so there's a single editing surface.

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

@@ -5,18 +5,8 @@ import PanelTypeSwitcher from '../PanelTypeSwitcher';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
-// Stub the registry so the test doesn't pull in the real renderers and chart libs.
 jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => ({
 	getPanelDefinition: jest.fn(),
-	PANEL_OPTIONS: [
-		{ kind: 'signoz/TimeSeriesPanel', displayName: 'Time Series' },
-		{ kind: 'signoz/NumberPanel', displayName: 'Number' },
-		{ kind: 'signoz/TablePanel', displayName: 'Table' },
-		{ kind: 'signoz/BarChartPanel', displayName: 'Bar Chart' },
-		{ kind: 'signoz/PieChartPanel', displayName: 'Pie Chart' },
-		{ kind: 'signoz/HistogramPanel', displayName: 'Histogram' },
-		{ kind: 'signoz/ListPanel', displayName: 'List' },
-	].map((option) => ({ ...option, icon: (): null => null })),
 }));
 
 const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
@@ -44,7 +34,6 @@ describe('PanelTypeSwitcher', () => {
 		// List supports only logs/traces; every other kind also supports metrics.
 		// Query-type support comes from SUPPORTED_QUERY_TYPES (all three by default).
 		mockGetPanelDefinition.mockImplementation((kind: string) => ({
-			mode: 'query',
 			supportedSignals:
 				kind === 'signoz/ListPanel'
 					? ['logs', 'traces']

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

@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import type { EQueryType } from 'types/common/dashboard';
 
-import { PANEL_OPTIONS } from '../../../Panels/registry';
 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';
@@ -27,17 +27,17 @@ export function usePanelTypeSelectItems({
 }: UsePanelTypeSelectItemsArgs): ConfigSelectItem<PanelKind>[] {
 	return useMemo(
 		() =>
-			PANEL_OPTIONS.map(({ kind, displayName, icon: Icon }) => {
+			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,
+					kind: panelKind,
 					queryType,
 					signal,
-					label: displayName,
+					label,
 				});
 				return {
-					value: kind,
-					label: displayName,
+					value: panelKind,
+					label,
 					icon: <Icon size={14} />,
 					disabled: !!disabledReason,
 					tooltip: disabledReason,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/LegendColors.tsx

@@ -5,7 +5,7 @@ import { Input } from 'antd';
 import type { DashboardtypesLegendDTOCustomColors } from 'api/generated/services/sigNoz.schemas';
 import { Virtuoso } from 'react-virtuoso';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../utils/legendSeries';
 import LegendColorRow from './LegendColorRow';
 import {
 	clearSeriesColor,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/__tests__/LegendColors.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../../utils/legendSeries';
 import LegendColors from '../LegendColors';
 
 const SERIES: LegendSeries[] = [

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/__tests__/legendColors.utils.test.ts

@@ -1,4 +1,4 @@
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../../utils/legendSeries';
 import {
 	clearSeriesColor,
 	filterLegendSeries,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/legendColors.utils.ts

@@ -1,6 +1,6 @@
 import type { DashboardtypesLegendDTOCustomColors } from 'api/generated/services/sigNoz.schemas';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../utils/legendSeries';
 
 /** Case-insensitive substring filter over series labels. Empty query → all series. */
 export function filterLegendSeries(

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sectionContext.ts

@@ -1,7 +1,7 @@
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { PanelKind } from '../../Panels/types/panelKind';
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../utils/legendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
 import { EQueryType } from 'types/common/dashboard';
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/__tests__/VisualizationSection.test.tsx

@@ -8,14 +8,9 @@ import VisualizationSection from '../VisualizationSection';
 // the test doesn't pull the whole panel registry (renderers, chart libs).
 jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => ({
 	getPanelDefinition: jest.fn(() => ({
-		mode: 'query',
 		supportedSignals: ['metrics', 'logs', 'traces'],
 		supportedQueryTypes: ['builder', 'clickhouse_sql', 'promql'],
 	})),
-	PANEL_OPTIONS: [
-		{ kind: 'signoz/TimeSeriesPanel', displayName: 'Time Series' },
-		{ kind: 'signoz/TablePanel', displayName: 'Table' },
-	].map((option) => ({ ...option, icon: (): null => null })),
 }));
 
 // Open the antd Select by clicking its selector, then pick the option by label.

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditor.module.scss

@@ -26,16 +26,3 @@
 		background: var(--l2-border);
 	}
 }
-
-// The static editor's preview: the panel card the grid shows, minus actions.
-.staticPreviewSurface {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	min-height: 0;
-	margin: 12px;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	background: var(--l2-background);
-	overflow: hidden;
-}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorLayout/PanelEditorLayout.tsx

@@ -1,116 +0,0 @@
-import type { ReactNode } from 'react';
-import {
-	ResizableHandle,
-	ResizablePanel,
-	ResizablePanelGroup,
-	useDefaultLayout,
-} from '@signozhq/ui/resizable';
-
-import layoutStorage from '../layoutStorage';
-
-import styles from '../PanelEditor.module.scss';
-
-/** A resizable pane's bounds, in the percentage strings `ResizablePanel` takes. */
-interface PaneSize {
-	minSize: string;
-	maxSize: string;
-	defaultSize: string;
-}
-
-/** How the left column divides between the preview and the editor pane. */
-export interface PaneSplit {
-	preview: PaneSize;
-	editor: PaneSize;
-}
-
-/**
- * Vertical split per authoring mode. The query builder is a compact form, so the
- * preview keeps the room; a static kind's editor pane is the surface being worked
- * in, so it gets more and can grow further.
- */
-export const PANE_SPLIT = {
-	query: {
-		preview: { minSize: '55%', maxSize: '65%', defaultSize: '60%' },
-		editor: { minSize: '35%', maxSize: '45%', defaultSize: '40%' },
-	},
-	static: {
-		preview: { minSize: '40%', maxSize: '65%', defaultSize: '55%' },
-		editor: { minSize: '35%', maxSize: '60%', defaultSize: '45%' },
-	},
-} as const satisfies Record<string, PaneSplit>;
-
-interface PanelEditorLayoutProps {
-	/** Save/close chrome — its affordances differ per authoring mode. */
-	header: ReactNode;
-	/** Upper-left: what the panel will look like once saved. */
-	preview: ReactNode;
-	/** Lower-left: the kind's `EditorPane` — the query builder, or a static kind's own. */
-	editor: ReactNode;
-	/** Right column: the kind's config sections. */
-	config: ReactNode;
-	split: PaneSplit;
-}
-
-/**
- * The panel editor's frame: header, the resizable three-pane arrangement, and the
- * persistence of what the user drags. Owned once so both authoring modes cannot
- * drift apart on pane bounds or share a layout id by accident — they differ only in
- * `split` and in what fills the slots.
- */
-function PanelEditorLayout({
-	header,
-	preview,
-	editor,
-	config,
-	split,
-}: PanelEditorLayoutProps): JSX.Element {
-	const { defaultLayout, onLayoutChanged } = useDefaultLayout({
-		id: 'panel-editor-v2',
-		storage: layoutStorage,
-	});
-	const {
-		defaultLayout: mainDefaultLayout,
-		onLayoutChanged: onMainLayoutChanged,
-	} = useDefaultLayout({
-		id: 'panel-editor-v2-main',
-		storage: layoutStorage,
-	});
-
-	return (
-		<div className={styles.page} data-testid="panel-editor-v2">
-			{header}
-			<ResizablePanelGroup
-				id="panel-editor-v2"
-				orientation="horizontal"
-				defaultLayout={defaultLayout}
-				onLayoutChanged={onLayoutChanged}
-			>
-				<ResizablePanel minSize="75%" maxSize="80%" defaultSize="80%">
-					<div className={styles.left}>
-						<ResizablePanelGroup
-							id="panel-editor-v2-main"
-							orientation="vertical"
-							defaultLayout={mainDefaultLayout}
-							onLayoutChanged={onMainLayoutChanged}
-						>
-							<ResizablePanel {...split.preview}>{preview}</ResizablePanel>
-							<ResizableHandle withHandle className={styles.handle} />
-							<ResizablePanel {...split.editor}>{editor}</ResizablePanel>
-						</ResizablePanelGroup>
-					</div>
-				</ResizablePanel>
-				<ResizableHandle withHandle className={styles.handle} />
-				<ResizablePanel
-					minSize="20%"
-					maxSize="25%"
-					defaultSize="20%"
-					className={styles.right}
-				>
-					{config}
-				</ResizablePanel>
-			</ResizablePanelGroup>
-		</div>
-	);
-}
-
-export default PanelEditorLayout;

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

@@ -21,15 +21,20 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { EQueryType } from 'types/common/dashboard';
 
-import { mergeQueryBuilderFieldRule } from '../../Panels/types/panelCapabilities';
-import type { RenderableQueryPanelDefinition } from '../../Panels/types/panelDefinition';
-import { PANEL_KIND_TO_PANEL_TYPE } from '../../Panels/types/panelKind';
+import {
+	getHiddenQueryBuilderFields,
+	getSupportedQueryTypes,
+} from '../../Panels/capabilities';
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from '../../Panels/types/panelKind';
 
 import styles from './PanelEditorQueryBuilder.module.scss';
 
 interface PanelEditorQueryBuilderProps {
-	/** The edited kind's definition — drives supported query types + field visibility. */
-	panelDefinition: RenderableQueryPanelDefinition;
+	/** The edited panel's visualization kind — drives supported query types + field visibility via the capabilities guard. */
+	panelKind: PanelKind;
 	/** The panel's current signal; selects per-signal query-builder field rules. */
 	signal: TelemetrytypesSignalDTO;
 	/** Preview fetch in flight — drives the Stage & Run button's loading/cancel state. */
@@ -50,7 +55,7 @@ interface PanelEditorQueryBuilderProps {
  * `QueryBuilderProvider`. `usePanelEditorQuerySync` owns the panel↔provider sync.
  */
 function PanelEditorQueryBuilder({
-	panelDefinition,
+	panelKind,
 	signal,
 	isLoadingQueries,
 	onStageRunQuery,
@@ -60,10 +65,10 @@ function PanelEditorQueryBuilder({
 }: PanelEditorQueryBuilderProps): JSX.Element {
 	// The shared QueryBuilderV2 provider still speaks the legacy PANEL_TYPES; what the
 	// builder offers for this kind comes from the kind's own declaration.
-	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelDefinition.kind];
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
 	// Raw rows: the builder drops its aggregation controls, and with them the trace
 	// operator that combines aggregated trace queries (V1 parity).
-	const isListViewPanel = panelDefinition.kind === 'signoz/ListPanel';
+	const isListViewPanel = panelKind === 'signoz/ListPanel';
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const isDarkMode = useIsDarkMode();
 
@@ -94,12 +99,12 @@ function PanelEditorQueryBuilder({
 	// Per-kind query-builder field rules from the guard (e.g. List hides step interval
 	// and having), passed to QueryBuilderV2 as its `filterConfigs`.
 	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(
-		() => mergeQueryBuilderFieldRule(panelDefinition.queryBuilderFields, signal),
-		[panelDefinition.queryBuilderFields, signal],
+		() => getHiddenQueryBuilderFields(panelKind, signal),
+		[panelKind, signal],
 	);
 
 	const items = useMemo(() => {
-		const { supportedQueryTypes } = panelDefinition;
+		const supportedQueryTypes = getSupportedQueryTypes(panelKind);
 
 		const queryTypeComponents = {
 			[EQueryType.QUERY_BUILDER]: {
@@ -146,7 +151,7 @@ function PanelEditorQueryBuilder({
 			),
 			children: queryTypeComponents[queryType].component,
 		}));
-	}, [panelDefinition, panelType, filterConfigs, isDarkMode, isListViewPanel]);
+	}, [panelKind, panelType, filterConfigs, isDarkMode, isListViewPanel]);
 
 	return (
 		<div

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane.tsx

@@ -1,28 +0,0 @@
-import type { QueryEditorPaneProps } from '../../Panels/types/panelDefinition';
-import PanelEditorQueryBuilder from './PanelEditorQueryBuilder';
-
-/**
- * The default query-kind editor pane: the query-builder tabs with no extras. A
- * kind that needs more (e.g. List's columns editor) declares its own wrapper.
- */
-function QueryBuilderEditorPane({
-	panelDefinition,
-	signal,
-	isLoadingQueries,
-	onStageRunQuery,
-	onCancelQuery,
-	stickyHeader,
-}: QueryEditorPaneProps): JSX.Element {
-	return (
-		<PanelEditorQueryBuilder
-			panelDefinition={panelDefinition}
-			signal={signal}
-			isLoadingQueries={isLoadingQueries}
-			onStageRunQuery={onStageRunQuery}
-			onCancelQuery={onCancelQuery}
-			stickyHeader={stickyHeader}
-		/>
-	);
-}
-
-export default QueryBuilderEditorPane;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/__tests__/PanelEditorQueryBuilder.test.tsx

@@ -4,9 +4,6 @@ import { OPERATORS } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
-import { requireQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
-import type { PanelKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-
 import PanelEditorQueryBuilder from '../PanelEditorQueryBuilder';
 
 // Capture the props the (real-guard-fed) QueryBuilderV2 receives without rendering it.
@@ -51,7 +48,7 @@ function renderBuilder(
 ): void {
 	render(
 		<PanelEditorQueryBuilder
-			panelDefinition={requireQueryPanelDefinition(panelKind as PanelKind)}
+			panelKind={panelKind as never}
 			signal={signal}
 			isLoadingQueries={false}
 			onStageRunQuery={jest.fn()}

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

@@ -6,7 +6,7 @@ import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import PanelBody from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
 import PanelHeader from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
 import type { AnyPanelInteractionProps } from 'pages/DashboardPage/DashboardContainer/Panels/types/interactions';
-import type { RenderableQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
+import type { RenderablePanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
 import type { DashboardPreference } from 'pages/DashboardPage/DashboardContainer/Panels/types/rendererProps';
 import { getPanelQueryType } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getPanelQueryType';
 import type {
@@ -20,8 +20,8 @@ import styles from './PreviewPane.module.scss';
 interface PreviewPaneProps {
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
-	/** The kind's definition, narrowed to the query arm — this preview is the query render path. */
-	panelDefinition: RenderableQueryPanelDefinition;
+	/** Resolved definition for the panel kind; */
+	panelDefinition: RenderablePanelDefinition;
 	data: PanelQueryData;
 	/** Any fetch in flight — drives the header spinner and the body's loading state. */
 	isFetching: boolean;
@@ -107,7 +107,7 @@ function PreviewPane({
 						hideActions
 					/>
 					<PanelBody
-						Renderer={panelDefinition.Renderer}
+						panelDefinition={panelDefinition}
 						panel={panel}
 						panelId={panelId}
 						data={data}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/QueryEditorBody.tsx

@@ -1,331 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { ConfigProvider } from 'antd';
-import {
-	type DashboardtypesPanelDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import type { RenderableQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import type { PanelKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import {
-	type SectionConfig,
-	type SectionControls,
-	SectionKind,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
-import { getBuilderQueries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-
-import { getExecStats } from '../queryV5/v5ResponseData';
-import { usePanelInteractions } from '../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions';
-import { useScrollIntoViewStore } from '../store/useScrollIntoViewStore';
-import ConfigPane from './ConfigPane/ConfigPane';
-import Header from './Header/Header';
-import PanelEditorLayout, {
-	PANE_SPLIT,
-} from './PanelEditorLayout/PanelEditorLayout';
-import PreviewPane from './PreviewPane/PreviewPane';
-import { useLegendSeries } from './hooks/useLegendSeries';
-import type { PanelEditorDraftApi } from './types';
-import { usePanelEditSession } from './hooks/usePanelEditSession';
-import { usePanelEditorSave } from './hooks/usePanelEditorSave';
-import { useSeedMetricUnit } from './hooks/useSeedMetricUnit';
-import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
-import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
-import { useSwitchToViewMode } from './hooks/useSwitchToViewMode';
-import { useTableColumns } from './hooks/useTableColumns';
-
-import logEvent from '@/api/common/logEvent';
-import { DashboardEvents } from '../../constants/events';
-
-// The query builder sits in an `overflow:hidden` resizable pane, so its Select
-// popups (group-by, order-by, having, …) clip when they open into the short pane.
-// Portal them to the document body; the query-builder filters honor this via
-// `useSelectPopupContainer`. Scoped to the full-page editor — the View modal keeps
-// its own `ConfigProvider` so popups stay inside the focus-trapped dialog.
-const getBodyPopupContainer = (): HTMLElement => document.body;
-
-interface QueryEditorBodyProps {
-	dashboardId: string;
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-	/**
-	 * The persisted panel the dirty check compares against. Distinct from `panel` (the
-	 * seed), which may carry unsaved edits handed off from View mode. Omit for a new panel.
-	 */
-	savedPanel?: DashboardtypesPanelDTO;
-	/** Creating a new panel (seeded default) vs editing an existing one. */
-	isNew?: boolean;
-	/** Target section for a new panel; falls back to the last/new section. */
-	layoutIndex?: number;
-	/** The dashboard can be edited (unlocked + permission); gates Save. */
-	isEditable: boolean;
-	/** Why Save is disabled (locked / no permission); '' when editable. */
-	editDisabledReason: string;
-	/** Leave the editor (navigate back to the dashboard) without saving. */
-	onClose: () => void;
-	/** Called after a successful save — navigates back to the dashboard. */
-	onSaved: () => void;
-	/** Draft state, owned by the shell so it survives an authoring-mode switch. */
-	draftApi: PanelEditorDraftApi;
-	/** The draft kind's definition, narrowed by the shell's fork. */
-	panelDefinition: RenderableQueryPanelDefinition;
-	/** Kind switch, owned by the shell (its cache must survive the fork swap). */
-	onChangePanelKind: (kind: PanelKind) => void;
-}
-
-/**
- * The query-kind editor body: a resizable split with the live preview + the
- * kind's editor pane on the left and the config pane on the right. Draft and
- * kind-switch state live in the shell; this body owns the query session and the
- * save round-trip.
- */
-function QueryEditorBody({
-	dashboardId,
-	panelId,
-	panel,
-	savedPanel,
-	isNew = false,
-	layoutIndex,
-	isEditable,
-	editDisabledReason,
-	onClose,
-	onSaved,
-	draftApi,
-	panelDefinition,
-	onChangePanelKind,
-}: QueryEditorBodyProps): JSX.Element {
-	// 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,
-		query,
-		runQuery,
-		isQueryDirty,
-		buildSaveSpec,
-	} = usePanelEditSession({
-		panel,
-		panelId,
-		savedPanel,
-		alwaysSerializeQuery: isNew,
-		seedQuerySignal: true,
-		draftApi,
-	});
-	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.
-	const { currentQuery } = useQueryBuilder();
-	const { save, isSaving } = usePanelEditorSave({
-		dashboardId,
-		panelId,
-		isNew,
-		layoutIndex,
-	});
-
-	const panelKind = draft.spec.plugin.kind;
-	// The kind's own lower pane (query builder, plus e.g. List's columns footer).
-	const { EditorPane } = panelDefinition;
-
-	// The current kind's Formatting controls — which unit field (panel-wide `unit` vs
-	// per-column `columnUnits`) a metric unit may seed into. Same source of truth the
-	// switch-time seeding in `buildPluginSpec` reads, so the two stay in lockstep.
-	const formattingControls = useMemo(():
-		| SectionControls[SectionKind.Formatting]
-		| undefined => {
-		const section = panelDefinition.sections.find(
-			(
-				candidate,
-			): candidate is Extract<SectionConfig, { kind: SectionKind.Formatting }> =>
-				candidate.kind === SectionKind.Formatting,
-		);
-		return section?.controls;
-	}, [panelDefinition]);
-
-	// Unsaved-edits flag driving the discard confirmation on close (Save is always
-	// enabled). Read the seed `panel`, not the live `draft` — the staged-query sync
-	// commits the seed into the draft on open, which would falsely dirty an untouched
-	// query-less new panel.
-	const isDirty = useMemo(
-		() => isSpecDirty || isQueryDirty || (isNew && panel.spec.queries.length > 0),
-		[isSpecDirty, isQueryDirty, isNew, panel.spec.queries.length],
-	);
-
-	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.
-	const listSignal =
-		(getBuilderQueries(spec.queries)[0]?.signal as TelemetrytypesSignalDTO) ||
-		TelemetrytypesSignalDTO.logs;
-
-	// Swap the List panel's columns to the new signal's defaults on signal change
-	// (V1 had a per-signal field list; V2 has one `selectFields`).
-	useSwitchColumnsOnSignalChange({
-		enabled: isListPanel,
-		signal: listSignal,
-		spec,
-		onChangeSpec: setSpec,
-	});
-
-	// Seed a new List panel's columns from the query's resolved signal (not the kind's
-	// default logs signal) so a traces-List export gets traces columns, not logs.
-	useSeedNewListColumns({
-		enabled: isNew && isListPanel,
-		signal: listSignal,
-		spec,
-		onChangeSpec: setSpec,
-	});
-
-	// Drag-to-zoom on the preview updates the URL-synced time window, as on the dashboard.
-	const { onDragSelect } = usePanelInteractions();
-	const legendSeries = useLegendSeries(draft, data);
-	const tableColumns = useTableColumns(draft, data);
-
-	// Resolves the selected metric's unit and, on a new panel, seeds it into the right
-	// formatting field for the kind (panel-wide `unit`, or per-column `columnUnits` for
-	// a Table once results resolve them). `metricUnit` also drives the mismatch warning.
-	const { metricUnit } = useSeedMetricUnit({
-		isNewPanel: isNew,
-		formattingControls,
-		columns: tableColumns,
-		spec,
-		onChangeSpec: setSpec,
-	});
-
-	// Smallest query step interval (seconds) — the floor for the span-gaps
-	// threshold. Undefined until results carry step metadata.
-	const stepInterval = useMemo((): number | undefined => {
-		const intervals = getExecStats(data.response)?.stepIntervals;
-		const values = intervals ? Object.values(intervals) : [];
-		return values.length ? Math.min(...values) : undefined;
-	}, [data.response]);
-
-	const onSwitchToView = useSwitchToViewMode({
-		dashboardId,
-		panelId,
-		panelType: PANEL_KIND_TO_PANEL_TYPE[panelKind],
-		query: currentQuery,
-		spec: draft.spec,
-	});
-
-	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
-	const { showErrorModal } = useErrorModal();
-
-	const onSave = useCallback(async (): Promise<void> => {
-		if (!isEditable) {
-			return;
-		}
-		try {
-			// Bake the live query into the spec so unstaged edits are saved too.
-			const savedPanelId = await save(buildSaveSpec(draft.spec));
-			// Reveal the saved panel once the dashboard re-renders.
-			setScrollTargetId(savedPanelId);
-			toast.success('Panel saved', {
-				position: 'top-center',
-			});
-			onSaved();
-		} catch (err) {
-			showErrorModal(err);
-		}
-	}, [
-		isEditable,
-		save,
-		buildSaveSpec,
-		draft.spec,
-		setScrollTargetId,
-		onSaved,
-		showErrorModal,
-	]);
-
-	// Leaving an existing panel's editor (without saving) still returns to it, so
-	// the dashboard lands on that panel rather than scrolled to the top. A new,
-	// unsaved panel has no persisted target, so there's nothing to reveal.
-	const onCloseEditor = useCallback((): void => {
-		if (!isNew) {
-			setScrollTargetId(panelId);
-		}
-		onClose();
-	}, [isNew, panelId, setScrollTargetId, onClose]);
-
-	const switchToViewMode = useCallback((): void => {
-		logEvent(DashboardEvents.SWITCH_TO_VIEW_MODE, {
-			panelId: panelId,
-		});
-		onSwitchToView();
-	}, [onSwitchToView]);
-
-	return (
-		<PanelEditorLayout
-			split={PANE_SPLIT.query}
-			header={
-				<Header
-					isDirty={isDirty}
-					isSaving={isSaving}
-					showSwitchToView={!isNew}
-					readOnly={!isEditable}
-					readOnlyReason={editDisabledReason}
-					onSave={onSave}
-					onSwitchToView={switchToViewMode}
-					onClose={onCloseEditor}
-				/>
-			}
-			preview={
-				<PreviewPane
-					panelId={panelId}
-					panel={draft}
-					panelDefinition={panelDefinition}
-					data={data}
-					isFetching={isFetching}
-					isPreviousData={isPreviousData}
-					error={error}
-					refetch={refetch}
-					onDragSelect={onDragSelect}
-					pagination={pagination}
-				/>
-			}
-			editor={
-				<ConfigProvider getPopupContainer={getBodyPopupContainer}>
-					<EditorPane
-						panelDefinition={panelDefinition}
-						signal={listSignal}
-						isLoadingQueries={isFetching}
-						onStageRunQuery={runQuery}
-						onCancelQuery={cancelQuery}
-						spec={spec}
-						onChangeSpec={setSpec}
-					/>
-				</ConfigProvider>
-			}
-			config={
-				<ConfigPane
-					panel={draft}
-					panelId={panelId}
-					spec={spec}
-					onChangeSpec={setSpec}
-					onChangePanelKind={onChangePanelKind}
-					queryType={currentQuery.queryType}
-					legendSeries={legendSeries}
-					tableColumns={tableColumns}
-					stepInterval={stepInterval}
-					metricUnit={metricUnit}
-				/>
-			}
-		/>
-	);
-}
-
-export default QueryEditorBody;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/StaticEditorBody.tsx

@@ -1,135 +0,0 @@
-import { useCallback } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { PanelMode } from 'lib/visualization/panels/types';
-import StaticPanelBody from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/StaticPanelBody/StaticPanelBody';
-import PanelHeader from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
-import type { RenderableStaticPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import type { PanelKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import { EMPTY_PANEL_QUERY_DATA } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
-import { EQueryType } from 'types/common/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-
-import { useScrollIntoViewStore } from '../store/useScrollIntoViewStore';
-import ConfigPane from './ConfigPane/ConfigPane';
-import Header from './Header/Header';
-import PanelEditorLayout, {
-	PANE_SPLIT,
-} from './PanelEditorLayout/PanelEditorLayout';
-import type { PanelEditorContainerProps } from './index';
-import type { PanelEditorDraftApi } from './types';
-import { usePanelEditorSave } from './hooks/usePanelEditorSave';
-
-import styles from './PanelEditor.module.scss';
-
-interface StaticEditorBodyProps extends PanelEditorContainerProps {
-	draftApi: PanelEditorDraftApi;
-	panelDefinition: RenderableStaticPanelDefinition;
-	onChangePanelKind: (kind: PanelKind) => void;
-}
-
-/**
- * Editor body for a kind that renders from its own plugin spec: the kind's
- * editor pane under a live preview of the draft, the config pane on the right.
- * No query session, no builder seeding, no staged-run — the preview re-renders
- * from the draft spec on every edit.
- */
-function StaticEditorBody({
-	dashboardId,
-	panelId,
-	isNew = false,
-	layoutIndex,
-	isEditable,
-	editDisabledReason,
-	onClose,
-	onSaved,
-	draftApi,
-	panelDefinition,
-	onChangePanelKind,
-}: StaticEditorBodyProps): JSX.Element {
-	const { draft, spec, setSpec, isSpecDirty } = draftApi;
-	const { EditorPane } = panelDefinition;
-
-	const { save, isSaving } = usePanelEditorSave({
-		dashboardId,
-		panelId,
-		isNew,
-		layoutIndex,
-	});
-
-	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
-	const { showErrorModal } = useErrorModal();
-
-	const onSave = useCallback(async (): Promise<void> => {
-		if (!isEditable) {
-			return;
-		}
-		try {
-			// `queries: []` is the only shape the API accepts for a static kind.
-			const savedPanelId = await save({ ...draft.spec, queries: [] });
-			setScrollTargetId(savedPanelId);
-			toast.success('Panel saved', {
-				position: 'top-center',
-			});
-			onSaved();
-		} catch (err) {
-			showErrorModal(err);
-		}
-	}, [isEditable, save, draft.spec, setScrollTargetId, onSaved, showErrorModal]);
-
-	const onCloseEditor = useCallback((): void => {
-		if (!isNew) {
-			setScrollTargetId(panelId);
-		}
-		onClose();
-	}, [isNew, panelId, setScrollTargetId, onClose]);
-
-	return (
-		<PanelEditorLayout
-			split={PANE_SPLIT.static}
-			header={
-				<Header
-					isDirty={isSpecDirty}
-					isSaving={isSaving}
-					showSwitchToView={false}
-					readOnly={!isEditable}
-					readOnlyReason={editDisabledReason}
-					onSave={onSave}
-					onClose={onCloseEditor}
-				/>
-			}
-			preview={
-				<div className={styles.staticPreviewSurface}>
-					<PanelHeader
-						panelId={panelId}
-						panel={draft}
-						data={EMPTY_PANEL_QUERY_DATA}
-						isFetching={false}
-						error={null}
-						hideActions
-					/>
-					<StaticPanelBody
-						panelDefinition={panelDefinition}
-						panel={draft}
-						panelId={panelId}
-						panelMode={PanelMode.DASHBOARD_EDIT}
-					/>
-				</div>
-			}
-			editor={<EditorPane spec={spec} onChangeSpec={setSpec} />}
-			config={
-				<ConfigPane
-					panel={draft}
-					panelId={panelId}
-					spec={spec}
-					onChangeSpec={setSpec}
-					onChangePanelKind={onChangePanelKind}
-					queryType={EQueryType.QUERY_BUILDER}
-					legendSeries={[]}
-					tableColumns={[]}
-				/>
-			}
-		/>
-	);
-}
-
-export default StaticEditorBody;

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

@@ -3,7 +3,6 @@ import userEvent from '@testing-library/user-event';
 import { toast } from '@signozhq/ui/sonner';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getSupportedSignals } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
 import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
 
 import PanelEditorContainer from '../index';
@@ -233,12 +232,7 @@ describe('PanelEditorContainer composition', () => {
 			}),
 		);
 		expect(mockQbProps).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panelDefinition: expect.objectContaining({
-					kind: 'signoz/TimeSeriesPanel',
-					mode: 'query',
-				}),
-			}),
+			expect.objectContaining({ panelKind: 'signoz/TimeSeriesPanel' }),
 		);
 		expect(mockConfigProps).toHaveBeenCalledWith(
 			expect.objectContaining({
@@ -262,7 +256,7 @@ describe('PanelEditorContainer composition', () => {
 				setSpec: mockSetSpec,
 				refetch: mockRefetch,
 				alwaysSerializeQuery: false,
-				signal: getSupportedSignals('signoz/TimeSeriesPanel')[0],
+				signal: getPanelDefinition('signoz/TimeSeriesPanel').supportedSignals[0],
 			}),
 		);
 		expect(mockUseTypeSwitch).toHaveBeenCalledWith(

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/__tests__/panelEditorUrlQuery.promql.test.tsx

@@ -18,8 +18,6 @@ import appStore from 'store';
 
 import { useOpenPanelEditor } from '../../hooks/useOpenPanelEditor';
 import { usePanelEditorQuerySync } from '../hooks/usePanelEditorQuerySync';
-import { requireQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
-
 import PanelEditorQueryBuilder from '../PanelEditorQueryBuilder/PanelEditorQueryBuilder';
 
 // jest.config maps the real hook to a no-op mock; this suite needs real navigation.
@@ -85,7 +83,7 @@ function EditorRoute(): JSX.Element {
 
 	return (
 		<PanelEditorQueryBuilder
-			panelDefinition={requireQueryPanelDefinition('signoz/TimeSeriesPanel')}
+			panelKind="signoz/TimeSeriesPanel"
 			signal={TelemetrytypesSignalDTO.metrics}
 			isLoadingQueries={false}
 			onStageRunQuery={noop}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/hooks/__tests__/usePanelTypeSwitch.test.ts

@@ -19,10 +19,6 @@ jest.mock('lib/query/panelQuery', () => ({
 }));
 jest.mock('../../../Panels/capabilities', () => ({
 	resolveQueryType: jest.fn(),
-	// Real predicate: these specs use real (query) kinds and the static path is
-	// exercised through its own cases below.
-	isQuerylessPanelKind: jest.requireActual('../../../Panels/capabilities')
-		.isQuerylessPanelKind,
 }));
 jest.mock('../../../queryV5/persesQueryAdapters', () => ({
 	toPerses: jest.fn(),

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/hooks/useLegendSeries.ts

@@ -1,27 +1,36 @@
 import { useMemo } from 'react';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
-import { getSectionControls } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getSectionControls';
-import { SectionKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 
+import {
+	type LegendSeries,
+	resolvePieLegendSeries,
+	resolveTimeSeriesLegendSeries,
+} from '../utils/legendSeries';
+
 /**
  * Resolves the panel's rendered series into `{ label, defaultColor }` pairs so the
- * legend-colors control can key overrides by the exact labels the chart draws, using
- * the resolver the kind declares as its `colors` control.
+ * legend-colors control can key overrides by the exact labels the chart draws. Only the
+ * kinds that expose a colors control resolve series (Pie from its scalar slices, Time
+ * Series from its flat series); every other kind returns none.
  */
 export function useLegendSeries(
 	panel: DashboardtypesPanelDTO,
 	data: PanelQueryData,
 ): LegendSeries[] {
 	const isDarkMode = useIsDarkMode();
-	const kind = panel.spec.plugin.kind;
 
 	return useMemo(() => {
-		const resolve = getSectionControls(kind, SectionKind.Legend)?.colors;
-		return resolve
-			? resolve({ queries: panel.spec.queries, data, isDarkMode })
-			: [];
-	}, [kind, panel.spec.queries, data, isDarkMode]);
+		switch (panel.spec.plugin.kind) {
+			case 'signoz/PieChartPanel':
+				return resolvePieLegendSeries(data, isDarkMode);
+			case 'signoz/TimeSeriesPanel':
+			case 'signoz/BarChartPanel':
+			case 'signoz/HistogramPanel':
+				return resolveTimeSeriesLegendSeries(panel.spec.queries, data, isDarkMode);
+			default:
+				return [];
+		}
+	}, [panel.spec.plugin.kind, panel.spec.queries, data, isDarkMode]);
 }

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

@@ -4,19 +4,24 @@ import type {
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
-import { requireQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
-import { isPanelKindSupported } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-import type { RenderableQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
+import {
+	getPanelDefinition,
+	isPanelKindSupported,
+} from 'pages/DashboardPage/DashboardContainer/Panels/registry';
+import type { RenderablePanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
 import {
 	usePanelQuery,
 	type PanelQueryTimeOverride,
 	type UsePanelQueryResult,
 } from 'pages/DashboardPage/DashboardContainer/hooks/usePanelQuery';
 
-import type { PanelEditorDraftApi } from '../types';
 import { usePanelEditorDraft } from './usePanelEditorDraft';
 import { usePanelEditorQuerySync } from './usePanelEditorQuerySync';
+import { usePanelTypeSwitch } from './usePanelTypeSwitch';
 
 interface UsePanelEditSessionArgs {
 	panel: DashboardtypesPanelDTO;
@@ -33,12 +38,6 @@ interface UsePanelEditSessionArgs {
 	alwaysSerializeQuery?: boolean;
 	/** Seed an empty builder with the kind's default signal (new panels) — off for drilldown. */
 	seedQuerySignal?: boolean;
-	/**
-	 * Externally-owned draft. The editor shell hoists it above its mode fork so a
-	 * kind switch across modes survives the branch swap; hosts without a fork (the
-	 * View modal, until it forks) omit it and the session owns the draft.
-	 */
-	draftApi?: PanelEditorDraftApi;
 }
 
 export interface UsePanelEditSessionReturn {
@@ -51,7 +50,7 @@ export interface UsePanelEditSessionReturn {
 	reset: () => void;
 	/** Draft kind → V1 panel type (drives the query builder + preview). */
 	panelType: PANEL_TYPES;
-	panelDefinition: RenderableQueryPanelDefinition;
+	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. */
@@ -63,6 +62,8 @@ export interface UsePanelEditSessionReturn {
 	buildSaveSpec: (
 		spec: DashboardtypesPanelSpecDTO,
 	) => DashboardtypesPanelSpecDTO;
+	/** Switch the draft's visualization kind in place (reversible per session). */
+	onChangePanelKind: (kind: PanelKind) => void;
 }
 
 /**
@@ -79,17 +80,14 @@ export function usePanelEditSession({
 	time,
 	alwaysSerializeQuery = false,
 	seedQuerySignal = false,
-	draftApi,
 }: UsePanelEditSessionArgs): UsePanelEditSessionReturn {
-	// Called unconditionally (hooks rules); unused when a hoisted draft is passed in.
-	const internalDraftApi = usePanelEditorDraft(panel, savedPanel);
-	const { draft, spec, setSpec, isSpecDirty, reset } =
-		draftApi ?? internalDraftApi;
+	const { draft, spec, setSpec, isSpecDirty, reset } = usePanelEditorDraft(
+		panel,
+		savedPanel,
+	);
 
 	const panelKind = draft.spec.plugin.kind;
-	// Hosts fork on `definition.mode` before mounting this session (the editor and
-	// View modal shells) — asserted rather than assumed.
-	const panelDefinition = requireQueryPanelDefinition(panelKind);
+	const panelDefinition = getPanelDefinition(panelKind);
 	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
 	const defaultSignal = panelDefinition.supportedSignals[0];
 
@@ -111,6 +109,12 @@ export function usePanelEditSession({
 		savedQueries: savedPanel?.spec.queries,
 	});
 
+	const { onChangePanelKind } = usePanelTypeSwitch({
+		spec: draft.spec,
+		panelType,
+		setSpec,
+	});
+
 	return {
 		draft,
 		spec,
@@ -124,5 +128,6 @@ export function usePanelEditSession({
 		runQuery,
 		isQueryDirty,
 		buildSaveSpec,
+		onChangePanelKind,
 	};
 }

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch.ts

@@ -18,10 +18,7 @@ import type {
 	Query,
 } from 'types/api/queryBuilder/queryBuilderData';
 
-import {
-	isQuerylessPanelKind,
-	resolveQueryType,
-} from '../../Panels/capabilities';
+import { resolveQueryType } from '../../Panels/capabilities';
 import {
 	PANEL_KIND_TO_PANEL_TYPE,
 	type PanelKind,
@@ -131,25 +128,11 @@ export function usePanelTypeSwitch({
 				queries,
 			});
 
-			// Revisit → restore the stash verbatim (the reversibility path). A static
-			// kind's stash carries `queries: []` and its builder query is untouched —
-			// there is no builder to re-seed for it.
+			// Revisit → restore the stash verbatim (the reversibility path).
 			const cached = cacheRef.current.get(newKind);
 			if (cached) {
 				setSpec(buildSpec(cached.pluginSpec, cached.queries));
-				if (!isQuerylessPanelKind(newKind)) {
-					redirectWithQueryBuilderData(cached.builderQuery);
-				}
-				return;
-			}
-
-			// First visit to a static kind → fresh spec from its sections, queries
-			// emptied (the API accepts nothing else), and the query builder left as-is:
-			// the stash above keeps the old kind's query for the return trip.
-			if (isQuerylessPanelKind(newKind)) {
-				const signal = getBuilderQueries(currentSpec.queries)[0]
-					?.signal as TelemetrytypesSignalDTO;
-				setSpec(buildSpec(getSwitchedPluginSpec(currentSpec, newKind, signal), []));
+				redirectWithQueryBuilderData(cached.builderQuery);
 				return;
 			}
 

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

@@ -1,13 +1,56 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
+import { useCallback, useMemo } from 'react';
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+	useDefaultLayout,
+} from '@signozhq/ui/resizable';
+import { toast } from '@signozhq/ui/sonner';
+import { ConfigProvider } from 'antd';
+import {
+	type DashboardtypesPanelDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
+import {
+	type SectionConfig,
+	type SectionControls,
+	SectionKind,
+} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
+import { getBuilderQueries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 
-import QueryEditorBody from './QueryEditorBody';
-import StaticEditorBody from './StaticEditorBody';
-import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
-import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
+import { getExecStats } from '../queryV5/v5ResponseData';
+import { usePanelInteractions } from '../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions';
+import { useScrollIntoViewStore } from '../store/useScrollIntoViewStore';
+import ConfigPane from './ConfigPane/ConfigPane';
+import Header from './Header/Header';
+import layoutStorage from './layoutStorage';
+import PanelEditorQueryBuilder from './PanelEditorQueryBuilder/PanelEditorQueryBuilder';
+import PreviewPane from './PreviewPane/PreviewPane';
+import { useLegendSeries } from './hooks/useLegendSeries';
+import { usePanelEditSession } from './hooks/usePanelEditSession';
+import { usePanelEditorSave } from './hooks/usePanelEditorSave';
+import { useSeedMetricUnit } from './hooks/useSeedMetricUnit';
+import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
+import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
+import { useSwitchToViewMode } from './hooks/useSwitchToViewMode';
+import { useTableColumns } from './hooks/useTableColumns';
+import ListColumnsEditor from './ListColumnsEditor/ListColumnsEditor';
 
-export interface PanelEditorContainerProps {
+import styles from './PanelEditor.module.scss';
+import logEvent from '@/api/common/logEvent';
+import { DashboardEvents } from '../../constants/events';
+
+// The query builder sits in an `overflow:hidden` resizable pane, so its Select
+// popups (group-by, order-by, having, …) clip when they open into the short pane.
+// Portal them to the document body; the query-builder filters honor this via
+// `useSelectPopupContainer`. Scoped to the full-page editor — the View modal keeps
+// its own `ConfigProvider` so popups stay inside the focus-trapped dialog.
+const getBodyPopupContainer = (): HTMLElement => document.body;
+
+interface PanelEditorContainerProps {
 	dashboardId: string;
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
@@ -31,42 +74,293 @@ export interface PanelEditorContainerProps {
 }
 
 /**
- * V2 panel editor page shell. Owns exactly the state that must survive a switch
- * between authoring modes — the draft and the kind-switch cache — and forks on
- * the draft kind's `mode`: query kinds get the session-backed body, static kinds
- * an editor pane over a live preview with no query machinery at all.
+ * V2 panel editor page body: a resizable split with the live preview + query
+ * builder on the left and the config pane on the right. Owns the draft state and
+ * the save round-trip.
  */
-function PanelEditorContainer(props: PanelEditorContainerProps): JSX.Element {
-	const { panel, savedPanel } = props;
-	const draftApi = usePanelEditorDraft(panel, savedPanel);
+function PanelEditorContainer({
+	dashboardId,
+	panelId,
+	panel,
+	savedPanel,
+	isNew = false,
+	layoutIndex,
+	isEditable,
+	editDisabledReason,
+	onClose,
+	onSaved,
+}: PanelEditorContainerProps): JSX.Element {
+	// 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,
+		query,
+		runQuery,
+		isQueryDirty,
+		buildSaveSpec,
+		onChangePanelKind,
+	} = usePanelEditSession({
+		panel,
+		panelId,
+		savedPanel,
+		alwaysSerializeQuery: isNew,
+		seedQuerySignal: true,
+	});
+	const {
+		data,
+		isFetching,
+		isPreviousData,
+		error,
+		cancelQuery,
+		refetch,
+		pagination,
+	} = query;
 
-	const panelKind = draftApi.draft.spec.plugin.kind;
-	const panelDefinition = getPanelDefinition(panelKind);
-
-	const { onChangePanelKind } = usePanelTypeSwitch({
-		spec: draftApi.draft.spec,
-		panelType: PANEL_KIND_TO_PANEL_TYPE[panelKind],
-		setSpec: draftApi.setSpec,
+	// 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.
+	const { currentQuery } = useQueryBuilder();
+	const { save, isSaving } = usePanelEditorSave({
+		dashboardId,
+		panelId,
+		isNew,
+		layoutIndex,
+	});
+	const { defaultLayout, onLayoutChanged } = useDefaultLayout({
+		id: 'panel-editor-v2',
+		storage: layoutStorage,
 	});
 
-	if (panelDefinition.mode === 'static') {
-		return (
-			<StaticEditorBody
-				{...props}
-				draftApi={draftApi}
-				panelDefinition={panelDefinition}
-				onChangePanelKind={onChangePanelKind}
-			/>
+	const {
+		defaultLayout: mainDefaultLayout,
+		onLayoutChanged: onMainLayoutChanged,
+	} = useDefaultLayout({
+		id: 'panel-editor-v2-main',
+		storage: layoutStorage,
+	});
+
+	const panelKind = draft.spec.plugin.kind;
+
+	// The current kind's Formatting controls — which unit field (panel-wide `unit` vs
+	// per-column `columnUnits`) a metric unit may seed into. Same source of truth the
+	// switch-time seeding in `buildPluginSpec` reads, so the two stay in lockstep.
+	const formattingControls = useMemo(():
+		| SectionControls[SectionKind.Formatting]
+		| undefined => {
+		const section = panelDefinition.sections.find(
+			(
+				candidate,
+			): candidate is Extract<SectionConfig, { kind: SectionKind.Formatting }> =>
+				candidate.kind === SectionKind.Formatting,
 		);
-	}
+		return section?.controls;
+	}, [panelDefinition]);
+
+	// Unsaved-edits flag driving the discard confirmation on close (Save is always
+	// enabled). Read the seed `panel`, not the live `draft` — the staged-query sync
+	// commits the seed into the draft on open, which would falsely dirty an untouched
+	// query-less new panel.
+	const isDirty = useMemo(
+		() => isSpecDirty || isQueryDirty || (isNew && panel.spec.queries.length > 0),
+		[isSpecDirty, isQueryDirty, isNew, panel.spec.queries.length],
+	);
+
+	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.
+	const listSignal =
+		(getBuilderQueries(spec.queries)[0]?.signal as TelemetrytypesSignalDTO) ||
+		TelemetrytypesSignalDTO.logs;
+
+	// Swap the List panel's columns to the new signal's defaults on signal change
+	// (V1 had a per-signal field list; V2 has one `selectFields`).
+	useSwitchColumnsOnSignalChange({
+		enabled: isListPanel,
+		signal: listSignal,
+		spec,
+		onChangeSpec: setSpec,
+	});
+
+	// Seed a new List panel's columns from the query's resolved signal (not the kind's
+	// default logs signal) so a traces-List export gets traces columns, not logs.
+	useSeedNewListColumns({
+		enabled: isNew && isListPanel,
+		signal: listSignal,
+		spec,
+		onChangeSpec: setSpec,
+	});
+
+	// Drag-to-zoom on the preview updates the URL-synced time window, as on the dashboard.
+	const { onDragSelect } = usePanelInteractions();
+	const legendSeries = useLegendSeries(draft, data);
+	const tableColumns = useTableColumns(draft, data);
+
+	// Resolves the selected metric's unit and, on a new panel, seeds it into the right
+	// formatting field for the kind (panel-wide `unit`, or per-column `columnUnits` for
+	// a Table once results resolve them). `metricUnit` also drives the mismatch warning.
+	const { metricUnit } = useSeedMetricUnit({
+		isNewPanel: isNew,
+		formattingControls,
+		columns: tableColumns,
+		spec,
+		onChangeSpec: setSpec,
+	});
+
+	// Smallest query step interval (seconds) — the floor for the span-gaps
+	// threshold. Undefined until results carry step metadata.
+	const stepInterval = useMemo((): number | undefined => {
+		const intervals = getExecStats(data.response)?.stepIntervals;
+		const values = intervals ? Object.values(intervals) : [];
+		return values.length ? Math.min(...values) : undefined;
+	}, [data.response]);
+
+	const onSwitchToView = useSwitchToViewMode({
+		dashboardId,
+		panelId,
+		panelType: PANEL_KIND_TO_PANEL_TYPE[panelKind],
+		query: currentQuery,
+		spec: draft.spec,
+	});
+
+	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
+	const { showErrorModal } = useErrorModal();
+
+	const onSave = useCallback(async (): Promise<void> => {
+		if (!isEditable) {
+			return;
+		}
+		try {
+			// Bake the live query into the spec so unstaged edits are saved too.
+			const savedPanelId = await save(buildSaveSpec(draft.spec));
+			// Reveal the saved panel once the dashboard re-renders.
+			setScrollTargetId(savedPanelId);
+			toast.success('Panel saved', {
+				position: 'top-center',
+			});
+			onSaved();
+		} catch (err) {
+			showErrorModal(err);
+		}
+	}, [
+		isEditable,
+		save,
+		buildSaveSpec,
+		draft.spec,
+		setScrollTargetId,
+		onSaved,
+		showErrorModal,
+	]);
+
+	// Leaving an existing panel's editor (without saving) still returns to it, so
+	// the dashboard lands on that panel rather than scrolled to the top. A new,
+	// unsaved panel has no persisted target, so there's nothing to reveal.
+	const onCloseEditor = useCallback((): void => {
+		if (!isNew) {
+			setScrollTargetId(panelId);
+		}
+		onClose();
+	}, [isNew, panelId, setScrollTargetId, onClose]);
+
+	const switchToViewMode = useCallback((): void => {
+		logEvent(DashboardEvents.SWITCH_TO_VIEW_MODE, {
+			panelId: panelId,
+		});
+		onSwitchToView();
+	}, [onSwitchToView]);
 
 	return (
-		<QueryEditorBody
-			{...props}
-			draftApi={draftApi}
-			panelDefinition={panelDefinition}
-			onChangePanelKind={onChangePanelKind}
-		/>
+		<div className={styles.page} data-testid="panel-editor-v2">
+			<Header
+				isDirty={isDirty}
+				isSaving={isSaving}
+				showSwitchToView={!isNew}
+				readOnly={!isEditable}
+				readOnlyReason={editDisabledReason}
+				onSave={onSave}
+				onSwitchToView={switchToViewMode}
+				onClose={onCloseEditor}
+			/>
+			<ResizablePanelGroup
+				id="panel-editor-v2"
+				orientation="horizontal"
+				defaultLayout={defaultLayout}
+				onLayoutChanged={onLayoutChanged}
+			>
+				<ResizablePanel minSize="75%" maxSize="80%" defaultSize="80%">
+					<div className={styles.left}>
+						<ResizablePanelGroup
+							id="panel-editor-v2-main"
+							orientation="vertical"
+							defaultLayout={mainDefaultLayout}
+							onLayoutChanged={onMainLayoutChanged}
+						>
+							<ResizablePanel minSize="55%" maxSize="65%" defaultSize="60%">
+								{panelDefinition && (
+									<PreviewPane
+										panelId={panelId}
+										panel={draft}
+										panelDefinition={panelDefinition}
+										data={data}
+										isFetching={isFetching}
+										isPreviousData={isPreviousData}
+										error={error}
+										refetch={refetch}
+										onDragSelect={onDragSelect}
+										pagination={pagination}
+									/>
+								)}
+							</ResizablePanel>
+							<ResizableHandle withHandle className={styles.handle} />
+							<ResizablePanel minSize="35%" maxSize="45%" defaultSize="40%">
+								<ConfigProvider getPopupContainer={getBodyPopupContainer}>
+									<PanelEditorQueryBuilder
+										panelKind={panelKind}
+										signal={listSignal}
+										isLoadingQueries={isFetching}
+										onStageRunQuery={runQuery}
+										onCancelQuery={cancelQuery}
+										footer={
+											isListPanel ? (
+												<ListColumnsEditor
+													spec={spec}
+													onChangeSpec={setSpec}
+													signal={listSignal}
+												/>
+											) : undefined
+										}
+									/>
+								</ConfigProvider>
+							</ResizablePanel>
+						</ResizablePanelGroup>
+					</div>
+				</ResizablePanel>
+				<ResizableHandle withHandle className={styles.handle} />
+				<ResizablePanel
+					minSize="20%"
+					maxSize="25%"
+					defaultSize="20%"
+					className={styles.right}
+				>
+					<ConfigPane
+						panel={draft}
+						panelId={panelId}
+						spec={spec}
+						onChangeSpec={setSpec}
+						onChangePanelKind={onChangePanelKind}
+						queryType={currentQuery.queryType}
+						legendSeries={legendSeries}
+						tableColumns={tableColumns}
+						stepInterval={stepInterval}
+						metricUnit={metricUnit}
+					/>
+				</ResizablePanel>
+			</ResizablePanelGroup>
+		</div>
 	);
 }
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/utils/legendSeries.ts

@@ -2,9 +2,9 @@ import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schem
 import { themeColors } from 'constants/theme';
 import getLabelName from 'lib/getLabelName';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { preparePieData } from '../kinds/PieChartPanel/prepareData';
-import { getBuilderQueries } from './getBuilderQueries';
-import { resolveSeriesLabelV5 } from './resolveSeriesLabel';
+import { preparePieData } from 'pages/DashboardPage/DashboardContainer/Panels/kinds/PieChartPanel/prepareData';
+import { getBuilderQueries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
+import { resolveSeriesLabelV5 } from 'pages/DashboardPage/DashboardContainer/Panels/utils/resolveSeriesLabel';
 import { prepareScalarTables } from 'pages/DashboardPage/DashboardContainer/queryV5/prepareScalarTables';
 import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 import {
@@ -22,15 +22,6 @@ export interface LegendSeries {
 
 type PanelQueries = DashboardtypesPanelDTO['spec']['queries'];
 
-export interface LegendSeriesArgs {
-	queries: PanelQueries;
-	data: PanelQueryData;
-	isDarkMode: boolean;
-}
-
-/** Resolves a kind's output into the legend entries the colors control keys overrides by. */
-export type LegendSeriesResolver = (args: LegendSeriesArgs) => LegendSeries[];
-
 /**
  * Dedupes `labels` (first-seen order, empties dropped) into `{ label, defaultColor }`
  * pairs, resolving each unique label's color lazily via `colorFor` — so a repeated
@@ -57,10 +48,10 @@ function buildLegendSeries(
  * draws (without overrides, so their colors are the defaults) so the color control keys
  * overrides by the same labels the chart does.
  */
-export function resolvePieLegendSeries({
-	data,
-	isDarkMode,
-}: LegendSeriesArgs): LegendSeries[] {
+export function resolvePieLegendSeries(
+	data: PanelQueryData,
+	isDarkMode: boolean,
+): LegendSeries[] {
 	const slices = preparePieData({
 		tables: prepareScalarTables({
 			results: getScalarResults(data.response),
@@ -79,11 +70,11 @@ export function resolvePieLegendSeries({
  * Time-series kinds: resolve each flattened series' label the way the renderer does
  * (`getLabelName` → `resolveSeriesLabelV5`) and color it with `generateColor`.
  */
-export function resolveTimeSeriesLegendSeries({
-	queries,
-	data,
-	isDarkMode,
-}: LegendSeriesArgs): LegendSeries[] {
+export function resolveTimeSeriesLegendSeries(
+	queries: PanelQueries,
+	data: PanelQueryData,
+	isDarkMode: boolean,
+): LegendSeries[] {
 	const palette = isDarkMode
 		? themeColors.chartcolors
 		: themeColors.lightModeColor;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/__tests__/capabilities.test.ts

@@ -11,8 +11,6 @@ import type { PanelQueryCapabilities } from '../types/panelCapabilities';
 import { NO_PANEL_ACTIONS } from '../types/panelDefinition';
 import {
 	getHiddenQueryBuilderFields,
-	getQueryPanelDefinition,
-	requireQueryPanelDefinition,
 	getSupportedQueryTypes,
 	getSupportedSignals,
 	isPanelCombinationValid,
@@ -109,7 +107,7 @@ const ALL_KINDS = Object.keys(EXPECTED_QUERY_TYPES) as PanelKind[];
 describe('panel capabilities guard', () => {
 	describe('query capabilities', () => {
 		it.each(ALL_KINDS)('declares how %s shapes its request', (kind) => {
-			expect(getQueryPanelDefinition(kind)?.queryCapabilities).toStrictEqual(
+			expect(getPanelDefinition(kind).queryCapabilities).toStrictEqual(
 				EXPECTED_QUERY_CAPABILITIES[kind],
 			);
 		});
@@ -151,8 +149,7 @@ describe('panel capabilities guard', () => {
 		});
 
 		it('carries an inert query shape, so a stray request can do no harm', () => {
-			const queryCapabilities = requireQueryPanelDefinition(unknownKind)
-				.queryCapabilities;
+			const { queryCapabilities } = getPanelDefinition(unknownKind);
 			expect(queryCapabilities.requestType).toBe(time_series);
 			expect(queryCapabilities.serverPaginated).toBe(false);
 			expect(queryCapabilities.formatTableResultForUI).toBe(false);

frontend/src/pages/DashboardPage/DashboardContainer/Panels/capabilities.ts

@@ -2,11 +2,7 @@ import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.sche
 import { EQueryType } from 'types/common/dashboard';
 
 import { getPanelDefinition } from './registry';
-import {
-	mergeQueryBuilderFieldRule,
-	type FilterConfigsPartial,
-} from './types/panelCapabilities';
-import type { RenderableQueryPanelDefinition } from './types/panelDefinition';
+import type { FilterConfigsPartial } from './types/panelCapabilities';
 import type { PanelKind } from './types/panelKind';
 
 /**
@@ -17,46 +13,11 @@ import type { PanelKind } from './types/panelKind';
  * these functions then cover it automatically. Pure and side-effect free.
  */
 
-/** Renders from its own plugin spec — no query surface at all. */
-export function isQuerylessPanelKind(kind: PanelKind): boolean {
-	return getPanelDefinition(kind).mode === 'static';
-}
-
-/**
- * The kind's definition narrowed to the query arm, or null for a static kind.
- * The null is what hosts fork on; the accessors below fold it into "supports
- * nothing" for the guard questions.
- */
-export function getQueryPanelDefinition(
-	kind: PanelKind,
-): RenderableQueryPanelDefinition | null {
-	const definition = getPanelDefinition(kind);
-	return definition.mode === 'query' ? definition : null;
-}
-
-/**
- * The query arm, asserted present. For call sites that a host mounts only after
- * narrowing `mode === 'query'` but that read the definition by kind rather than
- * receiving it as a prop — the throw makes that invariant executable instead of
- * silently null-tolerant.
- */
-export function requireQueryPanelDefinition(
-	kind: PanelKind,
-): RenderableQueryPanelDefinition {
-	const definition = getQueryPanelDefinition(kind);
-	if (!definition) {
-		throw new Error(
-			`query machinery mounted for query-less panel kind ${kind} — the host must fork on definition.mode before this point`,
-		);
-	}
-	return definition;
-}
-
 /** Signals a kind can visualize. */
 export function getSupportedSignals(
 	kind: PanelKind,
 ): TelemetrytypesSignalDTO[] {
-	return getQueryPanelDefinition(kind)?.supportedSignals ?? [];
+	return getPanelDefinition(kind).supportedSignals;
 }
 
 export function isSignalSupported(
@@ -68,7 +29,7 @@ export function isSignalSupported(
 
 /** Query languages a kind supports (Query Builder / ClickHouse / PromQL). */
 export function getSupportedQueryTypes(kind: PanelKind): EQueryType[] {
-	return getQueryPanelDefinition(kind)?.supportedQueryTypes ?? [];
+	return getPanelDefinition(kind).supportedQueryTypes;
 }
 
 export function isQueryTypeSupportedByPanelKind(
@@ -92,10 +53,6 @@ export function isPanelCombinationValid({
 	queryType: EQueryType;
 	signal?: TelemetrytypesSignalDTO;
 }): boolean {
-	// A query-less kind ignores the query entirely, so it pairs with anything.
-	if (isQuerylessPanelKind(kind)) {
-		return true;
-	}
 	if (!isQueryTypeSupportedByPanelKind(kind, queryType)) {
 		return false;
 	}
@@ -116,11 +73,7 @@ export function resolveQueryType(
 	preferred: EQueryType,
 ): EQueryType {
 	const supported = getSupportedQueryTypes(kind);
-	if (supported.includes(preferred)) {
-		return preferred;
-	}
-	// A query-less kind has no supported types; the builder is the neutral answer.
-	return supported[0] ?? EQueryType.QUERY_BUILDER;
+	return supported.includes(preferred) ? preferred : supported[0];
 }
 
 /**
@@ -132,6 +85,7 @@ export function getHiddenQueryBuilderFields(
 	kind: PanelKind,
 	signal: TelemetrytypesSignalDTO,
 ): FilterConfigsPartial {
-	const rule = getQueryPanelDefinition(kind)?.queryBuilderFields ?? {};
-	return mergeQueryBuilderFieldRule(rule, signal);
+	const rule = getPanelDefinition(kind).queryBuilderFields;
+	const perSignal = signal ? rule[signal] : undefined;
+	return { ...rule.default, ...perSignal };
 }

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts

@@ -1,7 +1,4 @@
-import { BarChart } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -13,10 +10,7 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 	kind: 'signoz/BarChartPanel',
 	displayName: 'Bar Chart',
-	mode: 'query',
-	icon: BarChart,
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/BarChartPanel/sections.ts

@@ -1,4 +1,3 @@
-import { resolveTimeSeriesLegendSeries } from '../../utils/legendSeries';
 import {
 	SectionKind,
 	ThresholdVariant,
@@ -14,10 +13,7 @@ export const sections: SectionConfig[] = [
 	},
 	{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
 	{ kind: SectionKind.Axes, controls: { minMax: true, logScale: true } },
-	{
-		kind: SectionKind.Legend,
-		controls: { position: true, colors: resolveTimeSeriesLegendSeries },
-	},
+	{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
 	{
 		kind: SectionKind.Thresholds,
 		controls: { variant: ThresholdVariant.LABEL },

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts

@@ -1,7 +1,4 @@
-import { BarChart } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -13,10 +10,7 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 	kind: 'signoz/HistogramPanel',
 	displayName: 'Histogram',
-	mode: 'query',
-	icon: BarChart,
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/HistogramPanel/sections.ts

@@ -1,4 +1,3 @@
-import { resolveTimeSeriesLegendSeries } from '../../utils/legendSeries';
 import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { SectionKind, type SectionConfig } from '../../types/sections';
@@ -10,7 +9,7 @@ export const sections: SectionConfig[] = [
 	},
 	{
 		kind: SectionKind.Legend,
-		controls: { position: true, colors: resolveTimeSeriesLegendSeries },
+		controls: { position: true, colors: true },
 		// Merging all queries collapses to one distribution with no legend.
 		isHidden: (spec): boolean =>
 			Boolean(

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/ListPanel/ListEditorPane.tsx

@@ -1,34 +0,0 @@
-import type { QueryEditorPaneProps } from '../../types/panelDefinition';
-import ListColumnsEditor from '../../../PanelEditor/ListColumnsEditor/ListColumnsEditor';
-import PanelEditorQueryBuilder from '../../../PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder';
-
-/**
- * List's editor pane: the query builder with the columns editor pinned below it.
- * Declared here so no editor host carries a List special case.
- */
-function ListEditorPane({
-	panelDefinition,
-	signal,
-	isLoadingQueries,
-	onStageRunQuery,
-	onCancelQuery,
-	stickyHeader,
-	spec,
-	onChangeSpec,
-}: QueryEditorPaneProps): JSX.Element {
-	return (
-		<PanelEditorQueryBuilder
-			panelDefinition={panelDefinition}
-			signal={signal}
-			isLoadingQueries={isLoadingQueries}
-			onStageRunQuery={onStageRunQuery}
-			onCancelQuery={onCancelQuery}
-			stickyHeader={stickyHeader}
-			footer={
-				<ListColumnsEditor spec={spec} onChangeSpec={onChangeSpec} signal={signal} />
-			}
-		/>
-	);
-}
-
-export default ListEditorPane;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/ListPanel/definition.ts

@@ -1,7 +1,4 @@
-import { List } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
-import ListEditorPane from './ListEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -14,10 +11,7 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/ListPanel'> = {
 	kind: 'signoz/ListPanel',
 	displayName: 'List',
-	mode: 'query',
-	icon: List,
 	Renderer,
-	EditorPane: ListEditorPane,
 	// Raw records come from logs and traces; metrics don't produce row data.
 	supportedSignals: [
 		TelemetrytypesSignalDTO.logs,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/NumberPanel/definition.ts

@@ -1,7 +1,4 @@
-import { Hash } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -13,10 +10,7 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 	kind: 'signoz/NumberPanel',
 	displayName: 'Number',
-	mode: 'query',
-	icon: Hash,
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/PieChartPanel/definition.ts

@@ -1,7 +1,4 @@
-import { ChartPie } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -13,10 +10,7 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 	kind: 'signoz/PieChartPanel',
 	displayName: 'Pie Chart',
-	mode: 'query',
-	icon: ChartPie,
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/PieChartPanel/sections.ts

@@ -1,4 +1,3 @@
-import { resolvePieLegendSeries } from '../../utils/legendSeries';
 import { SectionKind, type SectionConfig } from '../../types/sections';
 
 // Pie has no axes, thresholds, or stacking — just value formatting and a legend
@@ -9,9 +8,6 @@ export const sections: SectionConfig[] = [
 		controls: { switchPanelKind: true, timePreference: true },
 	},
 	{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
-	{
-		kind: SectionKind.Legend,
-		controls: { position: true, colors: resolvePieLegendSeries },
-	},
+	{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
 	{ kind: SectionKind.ContextLinks },
 ];

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TablePanel/definition.ts

@@ -1,7 +1,4 @@
-import { Table } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -13,10 +10,7 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/TablePanel'> = {
 	kind: 'signoz/TablePanel',
 	displayName: 'Table',
-	mode: 'query',
-	icon: Table,
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts

@@ -1,7 +1,4 @@
-import { ChartLine } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -13,10 +10,7 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
 	kind: 'signoz/TimeSeriesPanel',
 	displayName: 'Time Series',
-	mode: 'query',
-	icon: ChartLine,
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TimeSeriesPanel/sections.ts

@@ -1,4 +1,3 @@
-import { resolveTimeSeriesLegendSeries } from '../../utils/legendSeries';
 import {
 	SectionKind,
 	ThresholdVariant,
@@ -12,10 +11,7 @@ export const sections: SectionConfig[] = [
 	},
 	{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
 	{ kind: SectionKind.Axes, controls: { minMax: true, logScale: true } },
-	{
-		kind: SectionKind.Legend,
-		controls: { position: true, colors: resolveTimeSeriesLegendSeries },
-	},
+	{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
 	{
 		kind: SectionKind.ChartAppearance,
 		controls: {

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/UnsupportedPanel/definition.ts

@@ -1,11 +1,9 @@
 import { Querybuildertypesv5RequestTypeDTO } from 'api/generated/services/sigNoz.schemas';
-import { TriangleAlert } from '@signozhq/icons';
 
 import {
 	NO_PANEL_ACTIONS,
 	type RenderablePanelDefinition,
 } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 
 /**
@@ -20,11 +18,7 @@ import Renderer from './Renderer';
 export const UNSUPPORTED_PANEL: RenderablePanelDefinition = {
 	kind: '<unsupported>' as RenderablePanelDefinition['kind'],
 	displayName: 'Unsupported panel',
-	mode: 'query',
-	// Never offered in the UI — the kind lists come from the registry, which omits this.
-	icon: TriangleAlert,
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections: [],
 	supportedSignals: [],
 	supportedQueryTypes: [],

frontend/src/pages/DashboardPage/DashboardContainer/Panels/registry.ts

@@ -7,33 +7,22 @@ import { definition as Table } from './kinds/TablePanel/definition';
 import { definition as List } from './kinds/ListPanel/definition';
 import { UNSUPPORTED_PANEL } from './kinds/UnsupportedPanel/definition';
 import type {
-	PanelDefinition,
 	PanelRegistry,
 	RenderablePanelDefinition,
 } from './types/panelDefinition';
 import { PanelKind } from './types/panelKind';
 
 // Each kind owns its PanelDefinition; registering a new panel is one entry here.
-// Declaration order is the order kinds are offered in the UI.
 export const PANELS: PanelRegistry = {
 	[TimeSeries.kind]: TimeSeries,
-	[NumberValue.kind]: NumberValue,
-	[Table.kind]: Table,
 	[BarChart.kind]: BarChart,
-	[PieChart.kind]: PieChart,
 	[Histogram.kind]: Histogram,
+	[NumberValue.kind]: NumberValue,
+	[PieChart.kind]: PieChart,
+	[Table.kind]: Table,
 	[List.kind]: List,
 };
 
-export type PanelOption = Pick<
-	PanelDefinition,
-	'kind' | 'displayName' | 'icon'
->;
-
-// Backs both the new-panel picker and the editor's kind switcher; derived from PANELS
-// so a registered kind can't end up unreachable from the UI.
-export const PANEL_OPTIONS: PanelOption[] = Object.values(PANELS);
-
 /**
  * Whether this build can render the kind. `PanelKind` spans every kind the API declares,
  * but a dashboard spec written by a newer SigNoz can name one this client has never heard

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/panelCapabilities.ts

@@ -22,15 +22,6 @@ export type QueryBuilderFieldRule = {
 	default?: FilterConfigsPartial;
 } & Partial<Record<TelemetrytypesSignalDTO, FilterConfigsPartial>>;
 
-/** The kind's `default` rule with its per-signal overrides merged over it (signal wins). */
-export function mergeQueryBuilderFieldRule(
-	rule: QueryBuilderFieldRule,
-	signal: TelemetrytypesSignalDTO,
-): FilterConfigsPartial {
-	const perSignal = signal ? rule[signal] : undefined;
-	return { ...rule.default, ...perSignal };
-}
-
 /**
  * How a kind's query-range request is shaped. Declared per-kind in
  * `kinds/<Kind>/definition.ts` and read through the capabilities guard, so no V2 code

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition.ts

@@ -1,9 +1,5 @@
 import type { ComponentType } from 'react';
-import {
-	type DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import type { ChartLine } from '@signozhq/icons';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import type { EQueryType } from 'types/common/dashboard';
 
 import type { SectionConfig } from './sections';
@@ -13,11 +9,7 @@ import type {
 	PanelQueryCapabilities,
 	QueryBuilderFieldRule,
 } from './panelCapabilities';
-import type {
-	BaseRendererProps,
-	PanelRendererProps,
-	StaticRendererProps,
-} from './rendererProps';
+import type { BaseRendererProps, PanelRendererProps } from './rendererProps';
 
 /** Export formats offered under the single "Download" action. */
 export enum DownloadFormat {
@@ -68,53 +60,11 @@ export const NO_PANEL_ACTIONS: PanelActionCapabilities = {
 	drilldown: false,
 };
 
-// Derived from an icon component so the props stay exact (size is a constrained
-// IconSize union) and ForwardRef-compatible.
-export type PanelIcon = typeof ChartLine;
-
-export interface PanelDefinitionBase<K extends PanelKind = PanelKind> {
+export interface PanelDefinition<K extends PanelKind = PanelKind> {
 	kind: K;
 	displayName: string;
-	icon: PanelIcon;
-	sections: SectionConfig[];
-	actions: PanelActionCapabilities;
-}
-
-/** Props for a static kind's authoring pane — rendered where the query builder sits. */
-export interface StaticEditorPaneProps {
-	spec: DashboardtypesPanelSpecDTO;
-	onChangeSpec: (spec: DashboardtypesPanelSpecDTO) => void;
-}
-
-/**
- * Props for a query kind's authoring pane (the editor's lower-left slot). Spec
- * read/write is included so a kind's pane can edit its own spec slices (the List
- * columns editor) without the host carrying per-kind conditionals.
- */
-export interface QueryEditorPaneProps {
-	/** The kind's definition, narrowed by the host's fork. */
-	panelDefinition: RenderableQueryPanelDefinition;
-	signal: TelemetrytypesSignalDTO;
-	isLoadingQueries: boolean;
-	onStageRunQuery: () => void;
-	onCancelQuery: () => void;
-	/** Pin the tabs row to the pane top; the View modal opts out. */
-	stickyHeader?: boolean;
-	spec: DashboardtypesPanelSpecDTO;
-	onChangeSpec: (spec: DashboardtypesPanelSpecDTO) => void;
-}
-
-/**
- * A kind that renders from a query. Declares its whole query surface here, so a
- * kind without one carries no query declarations at all — no dummy capabilities,
- * no empty signal lists standing in for "not applicable".
- */
-export interface QueryPanelDefinition<K extends PanelKind = PanelKind>
-	extends PanelDefinitionBase<K> {
-	mode: 'query';
 	Renderer: ComponentType<PanelRendererProps<K>>;
-	/** Lower editor pane — the shared query-builder pane, or a kind wrapper of it. */
-	EditorPane: ComponentType<QueryEditorPaneProps>;
+	sections: SectionConfig[];
 	/** Signals this kind can visualize. */
 	supportedSignals: TelemetrytypesSignalDTO[];
 	/** Query languages this kind supports (Query Builder / ClickHouse / PromQL). */
@@ -123,38 +73,16 @@ export interface QueryPanelDefinition<K extends PanelKind = PanelKind>
 	queryBuilderFields: QueryBuilderFieldRule;
 	/** How this kind's query-range request is shaped (request type, paging, result formatting). */
 	queryCapabilities: PanelQueryCapabilities;
+	actions: PanelActionCapabilities;
 }
 
-/**
- * A kind that renders from its own plugin spec and saves with `queries: []` (the
- * API rejects anything else). Its renderer takes no query data, and its editor
- * pane replaces the query builder (TDD D8). No query machinery mounts for it
- * anywhere — every host forks on `mode` before touching a query hook.
- */
-export interface StaticPanelDefinition<K extends PanelKind = PanelKind>
-	extends PanelDefinitionBase<K> {
-	mode: 'static';
-	Renderer: ComponentType<StaticRendererProps<K>>;
-	EditorPane: ComponentType<StaticEditorPaneProps>;
-}
-
-export type PanelDefinition<K extends PanelKind = PanelKind> =
-	| QueryPanelDefinition<K>
-	| StaticPanelDefinition<K>;
-
 // Every kind must be registered, so getPanelDefinition never returns undefined.
 export type PanelRegistry = { [K in PanelKind]: PanelDefinition<K> };
 
-// The arms with their Renderer widened to the kind-agnostic prop surface. Declared
-// explicitly rather than via `Omit` over the union, which collapses to common keys.
-export interface RenderableQueryPanelDefinition extends Omit<
-	QueryPanelDefinition,
+// PanelDefinition with its Renderer widened to the kind-agnostic prop surface.
+export interface RenderablePanelDefinition extends Omit<
+	PanelDefinition,
 	'Renderer'
 > {
 	Renderer: ComponentType<BaseRendererProps & AnyPanelInteractionProps>;
 }
-export type RenderableStaticPanelDefinition = StaticPanelDefinition<PanelKind>;
-
-export type RenderablePanelDefinition =
-	| RenderableQueryPanelDefinition
-	| RenderableStaticPanelDefinition;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/rendererProps.ts

@@ -75,19 +75,6 @@ export type PanelOfKind<K extends PanelKind = PanelKind> = Omit<
 	};
 };
 
-/**
- * Props a static (query-less) renderer receives: its panel and render context,
- * nothing of the fetch lifecycle. `dashboardId` scopes store reads (resolved
- * variables); the editor route seeds the same store, so previews of an unsaved
- * panel resolve variables the way the grid does.
- */
-export interface StaticRendererProps<K extends PanelKind = PanelKind> {
-	panelId: string;
-	panel: PanelOfKind<K>;
-	panelMode: PanelMode;
-	dashboardId?: string;
-}
-
 // Renderer props for kind K: the base (with `panel` narrowed to K) plus K's
 // interaction surface (PanelInteractionMap[K]), so a renderer sees its exact spec
 // and only the gestures it supports. The default K = PanelKind is the widest surface.

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/sections.ts

@@ -13,7 +13,6 @@ import type {
 	DashboardtypesTimeSeriesChartAppearanceDTO,
 	TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import type { LegendSeriesResolver } from '../utils/legendSeries';
 import {
 	Antenna,
 	BarChart,
@@ -106,12 +105,7 @@ export interface SectionControls {
 		columnUnits?: boolean;
 	};
 	[SectionKind.Axes]: { minMax?: boolean; logScale?: boolean }; // minMax → softMin/softMax
-	[SectionKind.Legend]: {
-		position?: boolean;
-		// colors → customColors; the resolver supplies the labels overrides are keyed by,
-		// so a kind can't offer color overrides with nothing to color
-		colors?: LegendSeriesResolver;
-	};
+	[SectionKind.Legend]: { position?: boolean; colors?: boolean }; // colors → customColors
 	[SectionKind.ChartAppearance]: {
 		lineStyle?: boolean;
 		lineInterpolation?: boolean;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/__tests__/buildPluginSpec.test.ts

@@ -79,7 +79,7 @@ describe('buildPluginSpec', () => {
 
 		it('omits the key entirely when a seed produces an empty slice (never key: undefined)', () => {
 			const result = buildPluginSpec([
-				{ kind: SectionKind.Legend, controls: { colors: (): [] => [] } },
+				{ kind: SectionKind.Legend, controls: { colors: true } },
 			]);
 
 			expect(result).toStrictEqual({});
@@ -129,7 +129,7 @@ describe('buildPluginSpec', () => {
 		it('seeds neither when their defaulting controls are absent', () => {
 			const sections: SectionConfig[] = [
 				{ kind: SectionKind.Visualization, controls: { switchPanelKind: true } },
-				{ kind: SectionKind.Legend, controls: { colors: (): [] => [] } },
+				{ kind: SectionKind.Legend, controls: { colors: true } },
 			];
 			expect(buildPluginSpec(sections)).toStrictEqual({});
 		});
@@ -180,10 +180,7 @@ describe('buildPluginSpec', () => {
 
 		it('carries old legend position but never customColors', () => {
 			const sections: SectionConfig[] = [
-				{
-					kind: SectionKind.Legend,
-					controls: { position: true, colors: (): [] => [] },
-				},
+				{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
 			];
 			const oldSpec = oldSpecWith({
 				legend: {

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/__tests__/getSectionControls.test.ts

@@ -1,46 +0,0 @@
-import { SectionKind, ThresholdVariant } from '../../types/sections';
-import { getSectionControls } from '../getSectionControls';
-
-describe('getSectionControls', () => {
-	it('returns the controls a kind declares for a section', () => {
-		expect(
-			getSectionControls('signoz/TimeSeriesPanel', SectionKind.Formatting),
-		).toStrictEqual({ unit: true, decimals: true });
-	});
-
-	it('distinguishes kinds that key units per column from kinds with a panel unit', () => {
-		expect(
-			getSectionControls('signoz/TablePanel', SectionKind.Formatting)?.unit,
-		).toBeUndefined();
-		expect(
-			getSectionControls('signoz/TablePanel', SectionKind.Formatting)?.columnUnits,
-		).toBe(true);
-	});
-
-	it('reports the threshold variant each kind edits', () => {
-		expect(
-			getSectionControls('signoz/NumberPanel', SectionKind.Thresholds)?.variant,
-		).toBe(ThresholdVariant.COMPARISON);
-		expect(
-			getSectionControls('signoz/BarChartPanel', SectionKind.Thresholds)?.variant,
-		).toBe(ThresholdVariant.LABEL);
-	});
-
-	it('returns undefined when the kind does not expose the section', () => {
-		expect(
-			getSectionControls('signoz/ListPanel', SectionKind.Formatting),
-		).toBeUndefined();
-		expect(
-			getSectionControls('signoz/HistogramPanel', SectionKind.Thresholds),
-		).toBeUndefined();
-	});
-
-	it('returns undefined for an unregistered kind', () => {
-		expect(
-			getSectionControls(
-				'signoz/FuturePanel' as Parameters<typeof getSectionControls>[0],
-				SectionKind.Formatting,
-			),
-		).toBeUndefined();
-	});
-});

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/getPanelBuilderQuery.ts

@@ -2,7 +2,7 @@ import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schem
 import { initialQueriesMap } from 'constants/queryBuilder';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
-import { getQueryPanelDefinition } from '../capabilities';
+import { getPanelDefinition } from '../registry';
 import { PANEL_KIND_TO_PANEL_TYPE } from '../types/panelKind';
 import { fromPerses } from '../../queryV5/persesQueryAdapters';
 
@@ -10,19 +10,10 @@ import { fromPerses } from '../../queryV5/persesQueryAdapters';
  * The panel's saved query as a builder `Query` — what the editor route and the View
  * modal put in `compositeQuery` when they open. Matches the seed
  * `usePanelEditorQuerySync` computes from the panel.
- *
- * `null` for a kind that renders from its own spec: there is no query to stage, and
- * callers skip the `compositeQuery` param entirely rather than asking about the kind.
  */
-export function getPanelBuilderQuery(
-	panel: DashboardtypesPanelDTO,
-): Query | null {
+export function getPanelBuilderQuery(panel: DashboardtypesPanelDTO): Query {
 	const kind = panel.spec.plugin.kind;
-	const definition = getQueryPanelDefinition(kind);
-	if (!definition) {
-		return null;
-	}
-	const [defaultSignal] = definition.supportedSignals;
+	const [defaultSignal] = getPanelDefinition(kind).supportedSignals;
 	// A query-less panel seeds from the kind's first supported signal — `fromPerses`'s
 	// metrics default isn't authorable in every kind (e.g. List).
 	if (panel.spec.queries.length === 0 && defaultSignal) {

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/getSectionControls.ts

@@ -1,22 +0,0 @@
-import { getPanelDefinition } from '../registry';
-import type { PanelKind } from '../types/panelKind';
-import type { ControlledSectionKind, SectionControls } from '../types/sections';
-
-/**
- * The controls a kind declares for one section, or `undefined` when it doesn't expose
- * that section — so callers read `kinds/<Kind>/sections.ts` instead of switching on kind.
- */
-export function getSectionControls<K extends ControlledSectionKind>(
-	kind: PanelKind,
-	sectionKind: K,
-): SectionControls[K] | undefined {
-	const section = getPanelDefinition(kind).sections.find(
-		(candidate) => candidate.kind === sectionKind,
-	);
-	if (!section || !('controls' in section)) {
-		return undefined;
-	}
-	// `find` can't correlate the matched member's `controls` with `sectionKind`; the
-	// SectionConfig union guarantees it.
-	return section.controls as SectionControls[K];
-}

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -1,9 +1,22 @@
+import { useState } from 'react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
+import ContextMenu from 'periscope/components/ContextMenu';
+import {
+	getPanelDefinition,
+	isPanelKindSupported,
+} from 'pages/DashboardPage/DashboardContainer/Panels/registry';
+import {
+	getPanelTimePreference,
+	panelTimePreferenceLabel,
+} from 'pages/DashboardPage/DashboardContainer/hooks/resolvePanelTimeWindow';
+import { usePanelQuery } from 'pages/DashboardPage/DashboardContainer/hooks/usePanelQuery';
 
 import type { DashboardSection } from '../../utils';
-import QueryPanel from './QueryPanel';
-import StaticPanel from './StaticPanel';
+import { useDrilldown } from './hooks/useDrilldown';
+import { usePanelInteractions } from './hooks/usePanelInteractions';
+import PanelBody from './PanelBody/PanelBody';
+import PanelHeader from './PanelHeader/PanelHeader';
+import styles from './Panel.module.scss';
 
 /**
  * Layout context for the panel actions menu — present only in editable mode. No
@@ -24,8 +37,8 @@ interface PanelProps {
 }
 
 /**
- * A single dashboard panel. Forks on the kind's mode before any query machinery
- * exists, so a static kind never mounts a fetch — not even a disabled one.
+ * A single dashboard panel (header + body). Thin orchestrator: fetching lives in
+ * `usePanelQuery`, interactions in `usePanelInteractions`, state in `PanelBody`.
  */
 function Panel({
 	panel,
@@ -33,28 +46,74 @@ function Panel({
 	isVisible,
 	panelActions,
 }: PanelProps): JSX.Element {
-	const panelDefinition = getPanelDefinition(panel.spec.plugin.kind);
+	const timeLabel = panelTimePreferenceLabel(getPanelTimePreference(panel));
 
-	if (panelDefinition.mode === 'static') {
-		return (
-			<StaticPanel
-				panel={panel}
-				panelId={panelId}
-				panelDefinition={panelDefinition}
-				isVisible={isVisible}
-				panelActions={panelActions}
-			/>
-		);
-	}
+	const panelKind = panel.spec.plugin.kind;
+	const panelDefinition = getPanelDefinition(panelKind);
+
+	// Header search: only kinds that declare it render the box. The term is owned
+	// here and threaded to both the header (input) and renderer (filter).
+	const searchable = panelDefinition.actions.search;
+	const [searchTerm, setSearchTerm] = useState('');
+
+	// Only an explicit false defers the fetch: `isVisible` is undefined wherever no
+	// observer reports visibility (the View modal, the editor preview), and those panels
+	// are on screen by construction.
+	const isOffScreen = isVisible === false;
+
+	const { data, isFetching, isPreviousData, error, refetch, pagination } =
+		usePanelQuery({
+			panel,
+			panelId,
+			queryCapabilities: panelDefinition.queryCapabilities,
+			// Lazy: fetch once on screen, and never for a kind this build can't render —
+			// the data would have nothing to render into.
+			enabled: isPanelKindSupported(panelKind) && !isOffScreen,
+		});
+
+	const { onDragSelect, dashboardPreference } = usePanelInteractions();
+	const drilldown = useDrilldown(panel, panelId);
 
 	return (
-		<QueryPanel
-			panel={panel}
-			panelId={panelId}
-			panelDefinition={panelDefinition}
-			isVisible={isVisible}
-			panelActions={panelActions}
-		/>
+		<div
+			className={styles.panel}
+			data-panel-visible={isOffScreen ? 'false' : 'true'}
+			// Stable locator so the "Download as PNG" action can find this node to
+			// capture, without threading a ref through the header/actions chain.
+			data-panel-root={panelId}
+		>
+			<PanelHeader
+				panelId={panelId}
+				panel={panel}
+				data={data}
+				isFetching={isFetching}
+				error={error}
+				warning={data.response?.data?.warning}
+				timeLabel={timeLabel}
+				panelActions={panelActions}
+				searchable={searchable}
+				searchTerm={searchTerm}
+				onSearchChange={setSearchTerm}
+			/>
+			<PanelBody
+				panelDefinition={panelDefinition}
+				panel={panel}
+				panelId={panelId}
+				data={data}
+				isFetching={isFetching}
+				isVisible={isVisible}
+				isPreviousData={isPreviousData}
+				error={error}
+				refetch={refetch}
+				onDragSelect={onDragSelect}
+				dashboardPreference={dashboardPreference}
+				searchTerm={searchable ? searchTerm : undefined}
+				pagination={pagination}
+				onClick={drilldown.onPanelClick}
+				enableDrillDown={drilldown.enableDrillDown}
+			/>
+			<ContextMenu {...drilldown.contextMenuProps} />
+		</div>
 	);
 }
 

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

@@ -1,14 +1,11 @@
-import type { ComponentType } from 'react';
 import { RotateCw, SquarePlus, TriangleAlert } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PanelMode } from 'lib/visualization/panels/types';
 import PanelLoader from 'pages/DashboardPage/DashboardContainer/Panels/components/PanelLoader/PanelLoader';
 import PanelMessage from 'pages/DashboardPage/DashboardContainer/Panels/components/PanelMessage/PanelMessage';
 import type { AnyPanelInteractionProps } from 'pages/DashboardPage/DashboardContainer/Panels/types/interactions';
-import type {
-	BaseRendererProps,
-	DashboardPreference,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/rendererProps';
+import type { RenderablePanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
+import type { DashboardPreference } from 'pages/DashboardPage/DashboardContainer/Panels/types/rendererProps';
 import { hasRunnableQueries } from 'pages/DashboardPage/DashboardContainer/queryV5/buildQueryRangeRequest';
 import { getResponseType } from 'pages/DashboardPage/DashboardContainer/queryV5/v5ResponseData';
 import type {
@@ -20,8 +17,8 @@ import { panelStatusFromError } from '../PanelStatus/utils';
 import styles from './PanelBody.module.scss';
 
 interface PanelBodyProps {
-	/** The query arm's renderer — hosts narrow `mode === 'query'` before this mounts. */
-	Renderer: ComponentType<BaseRendererProps & AnyPanelInteractionProps>;
+	/** Resolved renderer for the panel kind (`Panel` handles the unsupported case). */
+	panelDefinition: RenderablePanelDefinition;
 	panel: DashboardtypesPanelDTO;
 	panelId: string;
 	data: PanelQueryData;
@@ -54,7 +51,7 @@ interface PanelBodyProps {
  * first-load / renderer. The renderer keeps stale data mounted across refetches.
  */
 function PanelBody({
-	Renderer,
+	panelDefinition,
 	panel,
 	panelId,
 	data,
@@ -119,7 +116,7 @@ function PanelBody({
 
 	return (
 		<div className={styles.panelContainer}>
-			<Renderer
+			<panelDefinition.Renderer
 				panelId={panelId}
 				panel={panel}
 				data={data}

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/__tests__/PanelBody.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import type { RenderablePanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
 import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 
 import PanelBody from '../PanelBody';
@@ -7,6 +8,10 @@ import PanelBody from '../PanelBody';
 // Stub the renderer so these tests focus on PanelBody's state machine.
 const MockRenderer = (): JSX.Element => <div data-testid="mock-renderer" />;
 
+const panelDefinition = {
+	Renderer: MockRenderer,
+} as unknown as RenderablePanelDefinition;
+
 function panelWith(queries: unknown[]): DashboardtypesPanelDTO {
 	return {
 		kind: 'Panel',
@@ -19,7 +24,7 @@ function panelWith(queries: unknown[]): DashboardtypesPanelDTO {
 }
 
 const baseProps = {
-	Renderer: MockRenderer,
+	panelDefinition,
 	panelId: 'p1',
 	data: {} as PanelQueryData,
 	isFetching: false,

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -4,8 +4,8 @@ import { DialogWrapper } from '@signozhq/ui/dialog';
 import cx from 'classnames';
 
 import { useDashboardSections } from '../../../hooks/useDashboardSections';
-import { PANEL_OPTIONS } from '../../../Panels/registry';
 import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from './constants';
 import PanelTypeSelectionModalFooter from './PanelTypeSelectionModalFooter';
 import { buildSectionOptions, resolveDefaultSectionValue } from './utils';
 import styles from './PanelTypeSelectionModal.module.scss';
@@ -91,19 +91,19 @@ function PanelTypeSelectionModal({
 					<span className={styles.pickerLabel}>Select panel type</span>
 				)}
 				<div className={styles.grid}>
-					{PANEL_OPTIONS.map(({ kind, displayName, icon: Icon }) => (
+					{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
 						<button
-							key={kind}
+							key={panelKind}
 							type="button"
 							className={cx(styles.panelTypeCard, {
-								[styles.panelTypeCardSelected]: kind === selectedPanelKind,
+								[styles.panelTypeCardSelected]: panelKind === selectedPanelKind,
 							})}
-							data-testid={`panel-type-${kind}`}
-							aria-pressed={kind === selectedPanelKind}
-							onClick={(): void => handleTileClick(kind)}
+							data-testid={`panel-type-${panelKind}`}
+							aria-pressed={panelKind === selectedPanelKind}
+							onClick={(): void => handleTileClick(panelKind)}
 						>
 							<Icon size={24} color={Color.BG_ROBIN_400} />
-							{displayName}
+							{label}
 						</button>
 					))}
 				</div>

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants.ts

@@ -0,0 +1,24 @@
+import {
+	BarChart,
+	ChartLine,
+	ChartPie,
+	Hash,
+	List,
+	Table,
+} from '@signozhq/icons';
+
+import type { PanelType } from './types';
+
+export const PANEL_TYPES: PanelType[] = [
+	{
+		panelKind: 'signoz/TimeSeriesPanel',
+		label: 'Time Series',
+		Icon: ChartLine,
+	},
+	{ panelKind: 'signoz/NumberPanel', label: 'Number', Icon: Hash },
+	{ panelKind: 'signoz/TablePanel', label: 'Table', Icon: Table },
+	{ panelKind: 'signoz/BarChartPanel', label: 'Bar Chart', Icon: BarChart },
+	{ panelKind: 'signoz/PieChartPanel', label: 'Pie Chart', Icon: ChartPie },
+	{ panelKind: 'signoz/HistogramPanel', label: 'Histogram', Icon: BarChart },
+	{ panelKind: 'signoz/ListPanel', label: 'List', Icon: List },
+];

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts

@@ -1,11 +1,20 @@
 import type { IconSize } from '@signozhq/icons';
 import type { ComponentType, SVGProps } from 'react';
 
+import type { PanelKind } from '../../../Panels/types/panelKind';
+
 type IconProps = Omit<SVGProps<SVGSVGElement>, 'ref'> & {
 	size?: number | IconSize;
 	strokeWidth?: number;
 };
 
+export interface PanelType {
+	panelKind: PanelKind;
+	label: string;
+	/** Icon component — the consumer renders it and controls size/color/etc. */
+	Icon: ComponentType<IconProps>;
+}
+
 export interface SectionOption {
 	/** The section's `layoutIndex`, stringified for the Select value. */
 	value: string;

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/QueryPanel.tsx

@@ -1,112 +0,0 @@
-import { useState } from 'react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import ContextMenu from 'periscope/components/ContextMenu';
-import { isPanelKindSupported } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-import type { RenderableQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import {
-	getPanelTimePreference,
-	panelTimePreferenceLabel,
-} from 'pages/DashboardPage/DashboardContainer/hooks/resolvePanelTimeWindow';
-import { usePanelQuery } from 'pages/DashboardPage/DashboardContainer/hooks/usePanelQuery';
-
-import type { PanelActionsConfig } from './Panel';
-import { useDrilldown } from './hooks/useDrilldown';
-import { usePanelInteractions } from './hooks/usePanelInteractions';
-import PanelBody from './PanelBody/PanelBody';
-import PanelHeader from './PanelHeader/PanelHeader';
-import styles from './Panel.module.scss';
-
-interface QueryPanelProps {
-	panel: DashboardtypesPanelDTO;
-	panelId: string;
-	/** The kind's definition, narrowed to the query arm by `Panel`'s fork. */
-	panelDefinition: RenderableQueryPanelDefinition;
-	/** True once this panel enters the viewport — gates the fetch (owned by SectionGridItem). */
-	isVisible?: boolean;
-	/** Move/delete actions — present only in editable sectioned mode. */
-	panelActions?: PanelActionsConfig;
-}
-
-/**
- * A query-backed dashboard panel (header + body). Thin orchestrator: fetching
- * lives in `usePanelQuery`, interactions in `usePanelInteractions`, state in
- * `PanelBody`.
- */
-function QueryPanel({
-	panel,
-	panelId,
-	panelDefinition,
-	isVisible,
-	panelActions,
-}: QueryPanelProps): JSX.Element {
-	const timeLabel = panelTimePreferenceLabel(getPanelTimePreference(panel));
-
-	const panelKind = panel.spec.plugin.kind;
-
-	// Header search: only kinds that declare it render the box. The term is owned
-	// here and threaded to both the header (input) and renderer (filter).
-	const searchable = panelDefinition.actions.search;
-	const [searchTerm, setSearchTerm] = useState('');
-
-	// Only an explicit false defers the fetch: `isVisible` is undefined wherever no
-	// observer reports visibility (the View modal, the editor preview), and those panels
-	// are on screen by construction.
-	const isOffScreen = isVisible === false;
-
-	const { data, isFetching, isPreviousData, error, refetch, pagination } =
-		usePanelQuery({
-			panel,
-			panelId,
-			queryCapabilities: panelDefinition.queryCapabilities,
-			// Lazy: fetch once on screen, and never for a kind this build can't render —
-			// the data would have nothing to render into.
-			enabled: isPanelKindSupported(panelKind) && !isOffScreen,
-		});
-
-	const { onDragSelect, dashboardPreference } = usePanelInteractions();
-	const drilldown = useDrilldown(panel, panelId);
-
-	return (
-		<div
-			className={styles.panel}
-			data-panel-visible={isOffScreen ? 'false' : 'true'}
-			// Stable locator so the "Download as PNG" action can find this node to
-			// capture, without threading a ref through the header/actions chain.
-			data-panel-root={panelId}
-		>
-			<PanelHeader
-				panelId={panelId}
-				panel={panel}
-				data={data}
-				isFetching={isFetching}
-				error={error}
-				warning={data.response?.data?.warning}
-				timeLabel={timeLabel}
-				panelActions={panelActions}
-				searchable={searchable}
-				searchTerm={searchTerm}
-				onSearchChange={setSearchTerm}
-			/>
-			<PanelBody
-				Renderer={panelDefinition.Renderer}
-				panel={panel}
-				panelId={panelId}
-				data={data}
-				isFetching={isFetching}
-				isVisible={isVisible}
-				isPreviousData={isPreviousData}
-				error={error}
-				refetch={refetch}
-				onDragSelect={onDragSelect}
-				dashboardPreference={dashboardPreference}
-				searchTerm={searchable ? searchTerm : undefined}
-				pagination={pagination}
-				onClick={drilldown.onPanelClick}
-				enableDrillDown={drilldown.enableDrillDown}
-			/>
-			<ContextMenu {...drilldown.contextMenuProps} />
-		</div>
-	);
-}
-
-export default QueryPanel;

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/StaticPanel.tsx

@@ -1,56 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import type { RenderableStaticPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import { EMPTY_PANEL_QUERY_DATA } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
-
-import type { PanelActionsConfig } from './Panel';
-import PanelHeader from './PanelHeader/PanelHeader';
-import StaticPanelBody from './StaticPanelBody/StaticPanelBody';
-import styles from './Panel.module.scss';
-
-interface StaticPanelProps {
-	panel: DashboardtypesPanelDTO;
-	panelId: string;
-	panelDefinition: RenderableStaticPanelDefinition;
-	isVisible?: boolean;
-	panelActions?: PanelActionsConfig;
-}
-
-/**
- * A dashboard panel that renders from its own plugin spec: chrome plus the static
- * body. No fetch, no status indicators, no time preference, no drilldown — none
- * of that exists without a query.
- */
-function StaticPanel({
-	panel,
-	panelId,
-	panelDefinition,
-	isVisible,
-	panelActions,
-}: StaticPanelProps): JSX.Element {
-	return (
-		<div
-			className={styles.panel}
-			data-panel-visible={isVisible ? 'true' : 'false'}
-			// Stable locator, as on QueryPanel — actions that capture the panel node
-			// (and tests) address it the same way for both arms.
-			data-panel-root={panelId}
-		>
-			<PanelHeader
-				panelId={panelId}
-				panel={panel}
-				data={EMPTY_PANEL_QUERY_DATA}
-				isFetching={false}
-				error={null}
-				timeLabel={null}
-				panelActions={panelActions}
-			/>
-			<StaticPanelBody
-				panelDefinition={panelDefinition}
-				panel={panel}
-				panelId={panelId}
-			/>
-		</div>
-	);
-}
-
-export default StaticPanel;

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/StaticPanelBody/StaticPanelBody.module.scss

@@ -1,5 +0,0 @@
-.body {
-	height: 100%;
-	min-height: 0;
-	overflow: hidden;
-}

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/StaticPanelBody/StaticPanelBody.tsx

@@ -1,46 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { PanelMode } from 'lib/visualization/panels/types';
-import type { RenderableStaticPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import type { PanelOfKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/rendererProps';
-import { useDashboardStore } from 'pages/DashboardPage/DashboardContainer/store/useDashboardStore';
-
-import styles from './StaticPanelBody.module.scss';
-
-interface StaticPanelBodyProps {
-	panelDefinition: RenderableStaticPanelDefinition;
-	panel: DashboardtypesPanelDTO;
-	panelId: string;
-	/** Render context — defaults to the dashboard view; the editor preview passes EDIT. */
-	panelMode?: PanelMode;
-}
-
-/**
- * Body for a kind that renders from its own plugin spec: the static renderer and
- * nothing else — no fetch, no loading or error states. Shared by the dashboard
- * grid, the public view and the editor preview, which is what keeps the preview
- * live while the draft spec changes.
- */
-function StaticPanelBody({
-	panelDefinition,
-	panel,
-	panelId,
-	panelMode = PanelMode.DASHBOARD_VIEW,
-}: StaticPanelBodyProps): JSX.Element {
-	// From the edit context, not props: the editor route seeds it too, so an
-	// unsaved panel's preview resolves variables the same way the grid does.
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const { Renderer } = panelDefinition;
-
-	return (
-		<div className={styles.body} data-testid="static-panel-body">
-			<Renderer
-				panelId={panelId}
-				panel={panel as PanelOfKind}
-				panelMode={panelMode}
-				dashboardId={dashboardId || undefined}
-			/>
-		</div>
-	);
-}
-
-export default StaticPanelBody;

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/QueryViewModalBody.tsx

@@ -1,197 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { PanelMode } from 'lib/visualization/panels/types';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import ContextMenu from 'periscope/components/ContextMenu';
-import PreviewPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PreviewPane/PreviewPane';
-import type { DashboardPreference } from 'pages/DashboardPage/DashboardContainer/Panels/types/rendererProps';
-import type { PanelKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import type { PanelEditorDraftApi } from 'pages/DashboardPage/DashboardContainer/PanelEditor/types';
-import { useViewPanelStore } from 'pages/DashboardPage/DashboardContainer/store/useViewPanelStore';
-import { useOpenPanelEditor } from 'pages/DashboardPage/DashboardContainer/hooks/useOpenPanelEditor';
-
-import { useDrilldown } from '../hooks/useDrilldown';
-import { usePanelInteractions } from '../hooks/usePanelInteractions';
-import ViewPanelModalHeader from './ViewPanelModalHeader';
-import { useViewPanelMode } from './useViewPanelMode';
-import { useViewPanelTimeWindow } from './useViewPanelTimeWindow';
-import styles from './ViewPanelModal.module.scss';
-import logEvent from 'api/common/logEvent';
-import {
-	DashboardDetailEvents,
-	DashboardEvents,
-} from 'pages/DashboardPage/constants/events';
-
-interface QueryViewModalBodyProps {
-	panel: DashboardtypesPanelDTO;
-	panelId: string;
-	/** Close the modal — wired to the graph manager's Save/Cancel. */
-	onClose: () => void;
-	/** Draft state, owned by the modal shell so it survives an authoring-mode switch. */
-	draftApi: PanelEditorDraftApi;
-	/** Kind switch, owned by the shell (its cache must survive the fork swap). */
-	onChangePanelKind: (kind: PanelKind) => void;
-}
-
-/**
- * The query-kind View modal body: a compact drilldown editor. It renders an
- * editable draft of the panel (preview) over a per-view time window plus the
- * kind's editor pane, so the user can tweak + Stage & Run without touching the
- * dashboard. Edits are temporary.
- */
-function QueryViewModalBody({
-	panel,
-	panelId,
-	onClose,
-	draftApi,
-	onChangePanelKind,
-}: QueryViewModalBodyProps): JSX.Element | null {
-	const {
-		timeOverride,
-		selectedInterval,
-		onTimeChange,
-		refreshWindow,
-		onDragSelect,
-		extendWindow,
-	} = useViewPanelTimeWindow();
-
-	const {
-		draft,
-		setSpec,
-		panelDefinition,
-		signal,
-		queryType,
-		query,
-		runQuery,
-		resetQuery,
-		buildSaveSpec,
-		applyDrilldownQuery,
-	} = useViewPanelMode({ panel, panelId, time: timeOverride, draftApi });
-	const {
-		data,
-		isFetching,
-		isPreviousData,
-		error,
-		refetch,
-		cancelQuery,
-		pagination,
-	} = query;
-
-
-	// Grid drill-down, but filter-by-value / breakout refine this view in place. Drills the draft
-	// so it reflects in-modal edits (and the click's time range follows the per-view window).
-	const drilldown = useDrilldown(draft, panelId, {
-		openDrilldownView: applyDrilldownQuery,
-	});
-
-	// 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();
-
-	// Modal drag-to-zoom is its own path (local window, not the grid's) — tag it distinctly.
-	const handleDragSelect = useCallback(
-		(start: number, end: number): void => {
-			if (Math.floor(start) !== Math.floor(end)) {
-				void logEvent(DashboardDetailEvents.PanelZoomed, {
-					context: 'viewModal',
-					panelType: draft.spec.plugin.kind,
-					panelId,
-				});
-			}
-			onDragSelect(start, end);
-		},
-		[onDragSelect, draft.spec.plugin.kind, panelId],
-	);
-
-	// Publish the modal's local extender for the nested no-data state; cleared on close.
-	const setViewPanelExtendWindow = useViewPanelStore(
-		(s) => s.setViewPanelExtendWindow,
-	);
-	useEffect(() => {
-		setViewPanelExtendWindow(extendWindow);
-		return (): void => setViewPanelExtendWindow(null);
-	}, [extendWindow, setViewPanelExtendWindow]);
-
-	// The View action only appears for registered kinds, so this is defensive.
-	if (!panelDefinition) {
-		return null;
-	}
-	const { EditorPane } = panelDefinition;
-
-	const onSwitchToEdit = (): void => {
-		// Carry the drilldown edits so the editor opens on them, not the saved panel.
-		logEvent(DashboardEvents.SWITCH_TO_EDIT_MODE, {
-			panelId: panelId,
-		});
-		openPanelEditor(panelId, {
-			handoffState: { editSpec: buildSaveSpec(draft.spec) },
-		});
-	};
-
-	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={onSwitchToEdit}
-				panelKind={draft.spec.plugin.kind}
-				queryType={queryType}
-				signal={signal}
-				onChangePanelKind={onChangePanelKind}
-				onResetQuery={resetQuery}
-			/>
-			<div className={styles.queryBuilder}>
-				<EditorPane
-					panelDefinition={panelDefinition}
-					signal={signal}
-					isLoadingQueries={isFetching}
-					onStageRunQuery={runQuery}
-					onCancelQuery={cancelQuery}
-					stickyHeader={false}
-					spec={draft.spec}
-					onChangeSpec={setSpec}
-				/>
-			</div>
-			<div className={styles.body}>
-				<PreviewPane
-					panelId={panelId}
-					panel={draft}
-					panelDefinition={panelDefinition}
-					data={data}
-					isFetching={isFetching}
-					isPreviousData={isPreviousData}
-					error={error}
-					refetch={refetch}
-					onDragSelect={handleDragSelect}
-					pagination={pagination}
-					panelMode={PanelMode.STANDALONE_VIEW}
-					dashboardPreference={isolatedPreference}
-					onCloseStandaloneView={onClose}
-					onClick={drilldown.onPanelClick}
-					enableDrillDown={drilldown.enableDrillDown}
-					hideHeader
-				/>
-			</div>
-			<ContextMenu {...drilldown.contextMenuProps} />
-		</div>
-	);
-}
-
-export default QueryViewModalBody;

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/StaticViewModalBody.tsx

@@ -1,93 +0,0 @@
-import { useCallback } from 'react';
-import { PenLine } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { PanelMode } from 'lib/visualization/panels/types';
-import logEvent from 'api/common/logEvent';
-import PanelTypeSwitcher from 'pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher';
-import type { PanelEditorDraftApi } from 'pages/DashboardPage/DashboardContainer/PanelEditor/types';
-import PanelHeader from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
-import StaticPanelBody from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/StaticPanelBody/StaticPanelBody';
-import type { RenderableStaticPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import type { PanelKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import { EMPTY_PANEL_QUERY_DATA } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
-import { useOpenPanelEditor } from 'pages/DashboardPage/DashboardContainer/hooks/useOpenPanelEditor';
-import { DashboardEvents } from 'pages/DashboardPage/constants/events';
-import { EQueryType } from 'types/common/dashboard';
-
-import styles from './ViewPanelModal.module.scss';
-
-interface StaticViewModalBodyProps {
-	panelId: string;
-	draftApi: PanelEditorDraftApi;
-	panelDefinition: RenderableStaticPanelDefinition;
-	onChangePanelKind: (kind: PanelKind) => void;
-}
-
-/**
- * The static-kind View modal body: the panel rendered live over the kind's
- * editor pane — the same layout idea as the query body, with the time window,
- * query builder and drilldown machinery absent because none of it applies.
- * Edits are temporary; "Edit panel" hands them to the full editor.
- */
-function StaticViewModalBody({
-	panelId,
-	draftApi,
-	panelDefinition,
-	onChangePanelKind,
-}: StaticViewModalBodyProps): JSX.Element {
-	const { draft, spec, setSpec } = draftApi;
-	const { EditorPane } = panelDefinition;
-	const openPanelEditor = useOpenPanelEditor();
-
-	const onSwitchToEdit = useCallback((): void => {
-		void logEvent(DashboardEvents.SWITCH_TO_EDIT_MODE, { panelId });
-		// Carry the in-modal edits so the editor opens on them, not the saved panel.
-		openPanelEditor(panelId, {
-			handoffState: { editSpec: { ...draft.spec, queries: [] } },
-		});
-	}, [openPanelEditor, panelId, draft.spec]);
-
-	return (
-		<div className={styles.content} data-testid="view-panel-modal-content">
-			<div className={styles.staticToolbar}>
-				<PanelTypeSwitcher
-					panelKind={draft.spec.plugin.kind}
-					queryType={EQueryType.QUERY_BUILDER}
-					onChange={onChangePanelKind}
-				/>
-				<Button
-					type="button"
-					variant="outlined"
-					color="secondary"
-					size="sm"
-					prefix={<PenLine size={14} />}
-					onClick={onSwitchToEdit}
-					data-testid="static-view-switch-to-edit"
-				>
-					Edit panel
-				</Button>
-			</div>
-			<div className={styles.staticPreview}>
-				<PanelHeader
-					panelId={panelId}
-					panel={draft}
-					data={EMPTY_PANEL_QUERY_DATA}
-					isFetching={false}
-					error={null}
-					hideActions
-				/>
-				<StaticPanelBody
-					panelDefinition={panelDefinition}
-					panel={draft}
-					panelId={panelId}
-					panelMode={PanelMode.STANDALONE_VIEW}
-				/>
-			</div>
-			<div className={styles.staticEditorPane}>
-				<EditorPane spec={spec} onChangeSpec={setSpec} />
-			</div>
-		</div>
-	);
-}
-
-export default StaticViewModalBody;

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

@@ -60,29 +60,3 @@
 .panelTypeSelector {
 	width: 240px;
 }
-
-// Static-kind modal body: toolbar, live panel, editor pane.
-.staticToolbar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 8px 0;
-}
-
-.staticPreview {
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 55%;
-	min-height: 0;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	background: var(--l2-background);
-	overflow: hidden;
-}
-
-.staticEditorPane {
-	flex: 1 1 45%;
-	min-height: 0;
-	margin-top: 12px;
-}

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

@@ -1,22 +1,26 @@
-import { useMemo } from 'react';
-import type {
-	DashboardtypesPanelDTO,
-	DashboardtypesPanelSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { QueryParams } from 'constants/query';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { usePanelEditorDraft } from 'pages/DashboardPage/DashboardContainer/PanelEditor/hooks/usePanelEditorDraft';
-import { usePanelTypeSwitch } from 'pages/DashboardPage/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch';
-import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import { buildViewPanelSpec } from 'pages/DashboardPage/DashboardContainer/Panels/utils/drilldown/buildViewPanelSpec';
-import { useDashboardStore } from 'pages/DashboardPage/DashboardContainer/store/useDashboardStore';
+import { useCallback, useEffect, useMemo } from 'react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { PanelMode } from 'lib/visualization/panels/types';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import ContextMenu from 'periscope/components/ContextMenu';
+import ListColumnsEditor from 'pages/DashboardPage/DashboardContainer/PanelEditor/ListColumnsEditor/ListColumnsEditor';
+import PanelEditorQueryBuilder from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder';
+import PreviewPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PreviewPane/PreviewPane';
+import type { DashboardPreference } from 'pages/DashboardPage/DashboardContainer/Panels/types/rendererProps';
+import { useViewPanelStore } from 'pages/DashboardPage/DashboardContainer/store/useViewPanelStore';
+import { useOpenPanelEditor } from 'pages/DashboardPage/DashboardContainer/hooks/useOpenPanelEditor';
 
-import QueryViewModalBody from './QueryViewModalBody';
-import StaticViewModalBody from './StaticViewModalBody';
-import { readViewPanelHandoff } from './viewPanelHandoffStore';
+import { useDrilldown } from '../hooks/useDrilldown';
+import { usePanelInteractions } from '../hooks/usePanelInteractions';
+import ViewPanelModalHeader from './ViewPanelModalHeader';
+import { useViewPanelMode } from './useViewPanelMode';
+import { useViewPanelTimeWindow } from './useViewPanelTimeWindow';
+import styles from './ViewPanelModal.module.scss';
+import logEvent from 'api/common/logEvent';
+import {
+	DashboardDetailEvents,
+	DashboardEvents,
+} from 'pages/DashboardPage/constants/events';
 
 interface ViewPanelModalContentProps {
 	panel: DashboardtypesPanelDTO;
@@ -26,79 +30,168 @@ interface ViewPanelModalContentProps {
 }
 
 /**
- * View-modal shell. Owns the draft and the kind-switch cache — the state that
- * must survive a switch between authoring modes — and forks on the draft kind's
- * `mode`, so a static kind mounts no time window, query session or drilldown.
+ * 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 {
-	// Config edits from the editor's "Switch to View Mode" arrive via the handoff; the
-	// query still comes from the URL. Falls back to the saved panel for a plain "View".
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const baseSpec = useMemo<DashboardtypesPanelSpecDTO>(
-		() => readViewPanelHandoff(dashboardId, panelId) ?? panel.spec,
-		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only seed
-		[],
-	);
+}: ViewPanelModalContentProps): JSX.Element | null {
+	const {
+		timeOverride,
+		selectedInterval,
+		onTimeChange,
+		refreshWindow,
+		onDragSelect,
+		extendWindow,
+	} = useViewPanelTimeWindow();
 
-	// Mount-only so a refresh re-seeds and in-modal edits survive (V1 parity).
-	const compositeQuery = useGetCompositeQueryParam();
-	const urlGraphType = useUrlQuery().get(
-		QueryParams.graphType,
-	) as PANEL_TYPES | null;
-	const initialPanel = useMemo<DashboardtypesPanelDTO>(
-		() => {
-			// A URL query can only seed a kind that takes one.
-			const isQuerySeeded =
-				compositeQuery && getPanelDefinition(baseSpec.plugin.kind).mode === 'query';
-			return isQuerySeeded
-				? {
-						...panel,
-						spec: buildViewPanelSpec({
-							spec: baseSpec,
-							query: compositeQuery,
-							panelType:
-								urlGraphType ?? PANEL_KIND_TO_PANEL_TYPE[baseSpec.plugin.kind],
-						}),
-					}
-				: { ...panel, spec: baseSpec };
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only seed from the URL
-		[],
-	);
+	const {
+		draft,
+		setSpec,
+		panelDefinition,
+		signal,
+		queryType,
+		query,
+		runQuery,
+		onChangePanelKind,
+		resetQuery,
+		buildSaveSpec,
+		applyDrilldownQuery,
+	} = useViewPanelMode({ panel, panelId, time: timeOverride });
+	const {
+		data,
+		isFetching,
+		isPreviousData,
+		error,
+		refetch,
+		cancelQuery,
+		pagination,
+	} = query;
 
-	const draftApi = usePanelEditorDraft(initialPanel);
-	const draftKind = draftApi.draft.spec.plugin.kind;
-	const panelDefinition = getPanelDefinition(draftKind);
+	const isListPanel = draft.spec.plugin.kind === 'signoz/ListPanel';
 
-	const { onChangePanelKind } = usePanelTypeSwitch({
-		spec: draftApi.draft.spec,
-		panelType: PANEL_KIND_TO_PANEL_TYPE[draftKind],
-		setSpec: draftApi.setSpec,
+	// Grid drill-down, but filter-by-value / breakout refine this view in place. Drills the draft
+	// so it reflects in-modal edits (and the click's time range follows the per-view window).
+	const drilldown = useDrilldown(draft, panelId, {
+		openDrilldownView: applyDrilldownQuery,
 	});
 
-	if (panelDefinition.mode === 'static') {
-		return (
-			<StaticViewModalBody
-				panelId={panelId}
-				draftApi={draftApi}
-				panelDefinition={panelDefinition}
-				onChangePanelKind={onChangePanelKind}
-			/>
-		);
+	// 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();
+
+	// Modal drag-to-zoom is its own path (local window, not the grid's) — tag it distinctly.
+	const handleDragSelect = useCallback(
+		(start: number, end: number): void => {
+			if (Math.floor(start) !== Math.floor(end)) {
+				void logEvent(DashboardDetailEvents.PanelZoomed, {
+					context: 'viewModal',
+					panelType: draft.spec.plugin.kind,
+					panelId,
+				});
+			}
+			onDragSelect(start, end);
+		},
+		[onDragSelect, draft.spec.plugin.kind, panelId],
+	);
+
+	// Publish the modal's local extender for the nested no-data state; cleared on close.
+	const setViewPanelExtendWindow = useViewPanelStore(
+		(s) => s.setViewPanelExtendWindow,
+	);
+	useEffect(() => {
+		setViewPanelExtendWindow(extendWindow);
+		return (): void => setViewPanelExtendWindow(null);
+	}, [extendWindow, setViewPanelExtendWindow]);
+
+	// The View action only appears for registered kinds, so this is defensive.
+	if (!panelDefinition) {
+		return null;
 	}
 
+	const onSwitchToEdit = (): void => {
+		// Carry the drilldown edits so the editor opens on them, not the saved panel.
+		logEvent(DashboardEvents.SWITCH_TO_EDIT_MODE, {
+			panelId: panelId,
+		});
+		openPanelEditor(panelId, {
+			handoffState: { editSpec: buildSaveSpec(draft.spec) },
+		});
+	};
+
 	return (
-		<QueryViewModalBody
-			panel={panel}
-			panelId={panelId}
-			onClose={onClose}
-			draftApi={draftApi}
-			onChangePanelKind={onChangePanelKind}
-		/>
+		<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={onSwitchToEdit}
+				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}
+					stickyHeader={false}
+					footer={
+						isListPanel ? (
+							<ListColumnsEditor
+								spec={draft.spec}
+								onChangeSpec={setSpec}
+								signal={signal}
+							/>
+						) : undefined
+					}
+				/>
+			</div>
+			<div className={styles.body}>
+				<PreviewPane
+					panelId={panelId}
+					panel={draft}
+					panelDefinition={panelDefinition}
+					data={data}
+					isFetching={isFetching}
+					isPreviousData={isPreviousData}
+					error={error}
+					refetch={refetch}
+					onDragSelect={handleDragSelect}
+					pagination={pagination}
+					panelMode={PanelMode.STANDALONE_VIEW}
+					dashboardPreference={isolatedPreference}
+					onCloseStandaloneView={onClose}
+					onClick={drilldown.onPanelClick}
+					enableDrillDown={drilldown.enableDrillDown}
+					hideHeader
+				/>
+			</div>
+			<ContextMenu {...drilldown.contextMenuProps} />
+		</div>
 	);
 }
 

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

@@ -5,12 +5,17 @@ import type {
 	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/DashboardPage/DashboardContainer/PanelEditor/hooks/usePanelEditSession';
-import type { PanelEditorDraftApi } from 'pages/DashboardPage/DashboardContainer/PanelEditor/types';
 import type { OpenDrilldownView } from 'pages/DashboardPage/DashboardContainer/Panels/types/drilldown';
-import type { RenderableQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
+import type { RenderablePanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
 import { resolveSignal } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
 import { buildViewPanelSpec } from 'pages/DashboardPage/DashboardContainer/Panels/utils/drilldown/buildViewPanelSpec';
 import { fromPerses } from 'pages/DashboardPage/DashboardContainer/queryV5/persesQueryAdapters';
@@ -18,15 +23,16 @@ import {
 	type PanelQueryTimeOverride,
 	type UsePanelQueryResult,
 } from 'pages/DashboardPage/DashboardContainer/hooks/usePanelQuery';
+import { useDashboardStore } from 'pages/DashboardPage/DashboardContainer/store/useDashboardStore';
 import type { EQueryType } from 'types/common/dashboard';
 
+import { readViewPanelHandoff } from './viewPanelHandoffStore';
+
 interface UseViewPanelModeArgs {
 	panel: DashboardtypesPanelDTO;
 	panelId: string;
 	/** Per-view time window (epoch ms); isolates the preview from the dashboard. */
 	time: PanelQueryTimeOverride;
-	/** Draft state, owned by the modal shell so it survives an authoring-mode switch. */
-	draftApi: PanelEditorDraftApi;
 }
 
 export interface UseViewPanelModeReturn {
@@ -35,7 +41,7 @@ export interface UseViewPanelModeReturn {
 	/** Update the draft's spec in place (e.g. the List columns editor). */
 	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
 	/** Resolved renderer for the draft's current kind (registry always resolves a kind). */
-	panelDefinition: RenderableQueryPanelDefinition;
+	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
@@ -48,6 +54,8 @@ export interface UseViewPanelModeReturn {
 	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. */
@@ -69,20 +77,51 @@ export function useViewPanelMode({
 	panel,
 	panelId,
 	time,
-	draftApi,
 }: UseViewPanelModeArgs): UseViewPanelModeReturn {
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 
+	// Config edits from the editor's "Switch to View Mode" arrive via the handoff; the query
+	// still comes from the URL. Falls back to the saved panel for a plain grid "View".
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const baseSpec = useMemo<DashboardtypesPanelSpecDTO>(
+		() => readViewPanelHandoff(dashboardId, panelId) ?? panel.spec,
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only seed
+		[],
+	);
+
+	// Mount-only so a refresh re-seeds and in-modal edits survive (V1 parity).
+	const compositeQuery = useGetCompositeQueryParam();
+	const urlGraphType = useUrlQuery().get(
+		QueryParams.graphType,
+	) as PANEL_TYPES | null;
+	const initialPanel = useMemo<DashboardtypesPanelDTO>(
+		() =>
+			compositeQuery
+				? {
+						...panel,
+						spec: buildViewPanelSpec({
+							spec: baseSpec,
+							query: compositeQuery,
+							panelType:
+								urlGraphType ?? PANEL_KIND_TO_PANEL_TYPE[baseSpec.plugin.kind],
+						}),
+					}
+				: { ...panel, spec: baseSpec },
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only seed from the URL
+		[],
+	);
+
 	const {
 		draft,
 		panelDefinition,
 		defaultSignal,
 		query,
 		runQuery,
+		onChangePanelKind,
 		buildSaveSpec,
 		reset,
 		setSpec,
-	} = usePanelEditSession({ panel, panelId, time, draftApi });
+	} = usePanelEditSession({ panel: initialPanel, panelId, time });
 
 	// The query the view opened with, captured once — the Reset target.
 	const savedQuery = useMemo(
@@ -139,6 +178,7 @@ export function useViewPanelMode({
 		queryType: currentQuery.queryType,
 		query,
 		runQuery,
+		onChangePanelKind,
 		resetQuery,
 		buildSaveSpec,
 		applyDrilldownQuery,

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/Panel.test.tsx

@@ -1,115 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-import { usePanelQuery } from 'pages/DashboardPage/DashboardContainer/hooks/usePanelQuery';
-import { EMPTY_PANEL_QUERY_DATA } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
-
-import Panel from '../Panel';
-
-// Real registry by default; the static cases override per render.
-jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => {
-	const actual = jest.requireActual(
-		'pages/DashboardPage/DashboardContainer/Panels/registry',
-	);
-	return { ...actual, getPanelDefinition: jest.fn(actual.getPanelDefinition) };
-});
-jest.mock('pages/DashboardPage/DashboardContainer/hooks/usePanelQuery', () => ({
-	usePanelQuery: jest.fn(),
-}));
-
-// Chrome + query-path collaborators stubbed: this file tests the mode fork, not them.
-jest.mock('../PanelHeader/PanelHeader', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="panel-header" />,
-}));
-jest.mock('../PanelBody/PanelBody', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="query-panel-body" />,
-}));
-jest.mock('../hooks/useDrilldown', () => ({
-	useDrilldown: (): unknown => ({
-		onPanelClick: jest.fn(),
-		enableDrillDown: false,
-		contextMenuProps: {},
-	}),
-}));
-jest.mock('../hooks/usePanelInteractions', () => ({
-	usePanelInteractions: (): unknown => ({
-		onDragSelect: jest.fn(),
-		dashboardPreference: undefined,
-	}),
-}));
-jest.mock('periscope/components/ContextMenu', () => ({
-	__esModule: true,
-	default: (): null => null,
-}));
-
-const mockUsePanelQuery = usePanelQuery as jest.Mock;
-const mockGetPanelDefinition = getPanelDefinition as jest.Mock;
-
-const panel = {
-	kind: 'Panel',
-	spec: {
-		display: { name: 'P' },
-		plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-		queries: [],
-	},
-} as unknown as DashboardtypesPanelDTO;
-
-function StaticRenderer(props: { panelMode: string }): JSX.Element {
-	return <div data-testid="fake-static-renderer" data-mode={props.panelMode} />;
-}
-
-const staticDefinition = {
-	kind: 'signoz/TimeSeriesPanel',
-	displayName: 'Static',
-	sections: [],
-	actions: { search: false },
-	mode: 'static',
-	Renderer: StaticRenderer,
-	EditorPane: StaticRenderer,
-};
-
-describe('Panel — authoring-mode fork', () => {
-	beforeEach(() => {
-		mockUsePanelQuery.mockReset();
-		mockUsePanelQuery.mockReturnValue({
-			data: EMPTY_PANEL_QUERY_DATA,
-			isFetching: false,
-			isPreviousData: false,
-			error: null,
-			refetch: jest.fn(),
-			pagination: undefined,
-		});
-	});
-
-	it('mounts the query body and fetch for a query kind', () => {
-		render(<Panel panel={panel} panelId="p1" />);
-
-		expect(screen.getByTestId('query-panel-body')).toBeInTheDocument();
-		expect(mockUsePanelQuery).toHaveBeenCalledTimes(1);
-	});
-
-	it('mounts the static renderer for a static kind with no query hook at all', () => {
-		mockGetPanelDefinition.mockReturnValueOnce(staticDefinition);
-
-		render(<Panel panel={panel} panelId="p1" />);
-
-		expect(screen.getByTestId('static-panel-body')).toBeInTheDocument();
-		expect(screen.getByTestId('fake-static-renderer')).toBeInTheDocument();
-		expect(screen.queryByTestId('query-panel-body')).not.toBeInTheDocument();
-		expect(mockUsePanelQuery).not.toHaveBeenCalled();
-	});
-
-	it('renders the static body in dashboard-view mode with panel chrome', () => {
-		mockGetPanelDefinition.mockReturnValueOnce(staticDefinition);
-
-		render(<Panel panel={panel} panelId="p1" />);
-
-		expect(screen.getByTestId('fake-static-renderer')).toHaveAttribute(
-			'data-mode',
-			'DASHBOARD_VIEW',
-		);
-		expect(screen.getByTestId('panel-header')).toBeInTheDocument();
-	});
-});

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

@@ -1,11 +1,10 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { fireEvent, render, screen } from '@testing-library/react';
+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 { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-
 import ViewPanelModal from '../ViewPanelModal/ViewPanelModal';
 
 // The preview reuses the edit page's PreviewPane (chart + header + heavy render
@@ -22,30 +21,6 @@ jest.mock(
 );
 
 // Isolate from the draft/query-builder plumbing (its own suite covers it).
-// Real registry by default; the static-fork test overrides one kind.
-jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => {
-	const actual = jest.requireActual(
-		'pages/DashboardPage/DashboardContainer/Panels/registry',
-	);
-	return { ...actual, getPanelDefinition: jest.fn(actual.getPanelDefinition) };
-});
-
-// The shell reads the URL seed + kind switch itself; stub its collaborators so
-// the suite needs no router and keeps asserting through the mocked mode hook.
-jest.mock('hooks/queryBuilder/useGetCompositeQueryParam', () => ({
-	useGetCompositeQueryParam: (): null => null,
-}));
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: (): URLSearchParams => new URLSearchParams(),
-}));
-jest.mock(
-	'pages/DashboardPage/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch',
-	() => ({
-		usePanelTypeSwitch: (): unknown => ({ onChangePanelKind: jest.fn() }),
-	}),
-);
-
 jest.mock('../ViewPanelModal/useViewPanelMode', () => ({
 	useViewPanelMode: (args: {
 		panel: { spec: { plugin: { kind: string } } };
@@ -55,14 +30,8 @@ jest.mock('../ViewPanelModal/useViewPanelMode', () => ({
 			draft: args.panel,
 			panelDefinition: {
 				kind,
-				mode: 'query',
 				actions: { search: kind === 'signoz/ListPanel' },
 				Renderer: (): null => null,
-				// Same testid as the real pane: the suite asserts the modal fills its
-				// query-builder slot from the definition.
-				EditorPane: (): JSX.Element => (
-					<div data-testid="panel-editor-v2-query-builder" />
-				),
 			},
 			query: {
 				data: { response: undefined, requestPayload: undefined, legendMap: {} },
@@ -192,7 +161,8 @@ describe('ViewPanelModal', () => {
 		expect(screen.getByTestId('preview-pane')).toBeInTheDocument();
 	});
 
-	it('invokes onClose when the modal is dismissed', () => {
+	it('invokes onClose when the modal is dismissed', async () => {
+		const user = userEvent.setup();
 		const onClose = jest.fn();
 		renderWithProvider(
 			<ViewPanelModal
@@ -202,51 +172,10 @@ describe('ViewPanelModal', () => {
 				onClose={onClose}
 			/>,
 		);
-		// fireEvent: user-event's pointer walk races Radix's layer bookkeeping in
-		// jsdom, transiently dropping the dialog's pointer-events and failing the
-		// interaction check. The assertion is only that Close wires to onClose.
-		fireEvent.click(screen.getByLabelText('Close'));
+		await user.click(screen.getByLabelText('Close'));
 		expect(onClose).toHaveBeenCalled();
 	});
 
-	it('mounts the static body — editor pane, no query builder slot — for a static kind', () => {
-		const actual = jest.requireActual(
-			'pages/DashboardPage/DashboardContainer/Panels/registry',
-		);
-		const staticDefinition = {
-			kind: 'signoz/TimeSeriesPanel',
-			displayName: 'Static',
-			sections: [],
-			actions: {},
-			mode: 'static',
-			Renderer: (): JSX.Element => <div data-testid="fake-static-renderer" />,
-			EditorPane: (): JSX.Element => <div data-testid="static-editor-pane" />,
-		};
-		(getPanelDefinition as jest.Mock).mockImplementation((kind: string) =>
-			kind === 'signoz/TimeSeriesPanel' ? staticDefinition : actual.getPanelDefinition(kind),
-		);
-
-		renderWithProvider(
-			<ViewPanelModal
-				panel={makePanel('signoz/TimeSeriesPanel')}
-				panelId="p1"
-				open
-				onClose={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId('static-editor-pane')).toBeInTheDocument();
-		expect(screen.getByTestId('fake-static-renderer')).toBeInTheDocument();
-		expect(
-			screen.queryByTestId('panel-editor-v2-query-builder'),
-		).not.toBeInTheDocument();
-		expect(mockPreviewPaneRender).not.toHaveBeenCalled();
-
-		(getPanelDefinition as jest.Mock).mockImplementation(
-			actual.getPanelDefinition,
-		);
-	});
-
 	// 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', () => {

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useDrilldown.test.tsx

@@ -108,7 +108,6 @@ jest.mock(
 // importing the whole renderer registry into the test.
 jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => ({
 	getPanelDefinition: (kind: string): unknown => ({
-		mode: 'query',
 		actions: { drilldown: kind !== 'signoz/ListPanel' },
 	}),
 }));

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useViewPanel.test.tsx

@@ -10,8 +10,6 @@ import { fromPerses } from 'pages/DashboardPage/DashboardContainer/queryV5/perse
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
-import { usePanelEditorDraft } from 'pages/DashboardPage/DashboardContainer/PanelEditor/hooks/usePanelEditorDraft';
-
 import { useViewPanelMode } from '../ViewPanelModal/useViewPanelMode';
 import { useViewPanel } from '../hooks/useViewPanel';
 
@@ -91,13 +89,10 @@ const stagedIds: (string | undefined)[] = [];
 
 function ModalBody({ panelId }: { panelId: string }): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
-	// The modal shell owns the draft in production; mirrored here.
-	const draftApi = usePanelEditorDraft(PANELS[panelId]);
 	const { draft } = useViewPanelMode({
 		panel: PANELS[panelId],
 		panelId,
 		time: { startMs: 0, endMs: 1000 },
-		draftApi,
 	});
 	renders.push({
 		current: panelOf(JSON.stringify(currentQuery)),

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel.ts

@@ -15,7 +15,7 @@ import { buildQueryRangeRequest } from 'pages/DashboardPage/DashboardContainer/q
 import { envelopesToQuery } from 'pages/DashboardPage/DashboardContainer/queryV5/persesQueryAdapters';
 import { selectResolvedVariables } from 'pages/DashboardPage/DashboardContainer/store/slices/variableSelectionSlice';
 import { useDashboardStore } from 'pages/DashboardPage/DashboardContainer/store/useDashboardStore';
-import { requireQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
+import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -70,8 +70,7 @@ export function useCreateAlertFromPanel(): (
 			// Redux global time is nanoseconds; the request DTO takes epoch ms.
 			const request = buildQueryRangeRequest({
 				queries: panel.spec.queries,
-				// Reached only through the menu item `actions.createAlert` gates.
-				queryCapabilities: requireQueryPanelDefinition(panelKind).queryCapabilities,
+				queryCapabilities: getPanelDefinition(panelKind).queryCapabilities,
 				startMs: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
 				endMs: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
 				variables,

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldown.tsx

@@ -14,7 +14,6 @@ import type {
 	OpenDrilldownView,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/drilldown';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import { requireQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
 import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
 import { buildAggregateData } from 'pages/DashboardPage/DashboardContainer/Panels/utils/drilldown/buildAggregateData';
 import { getBuilderQueries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
@@ -181,7 +180,7 @@ export function useDrilldown(
 	const { resolvedQuery, isResolving } = useResolvedDrilldownQuery({
 		queries,
 		panelKind: kind,
-		queryCapabilities: requireQueryPanelDefinition(kind).queryCapabilities,
+		queryCapabilities: getPanelDefinition(kind).queryCapabilities,
 		v1Query,
 		enabled: showAggregateMenu,
 	});

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

@@ -52,18 +52,15 @@ export function useViewPanel(): UseViewPanelApi {
 			// Only a drilldown retargets the panel type.
 			next.delete(QueryParams.graphType);
 			clearViewPanelHandoff();
-			// `null` for a static kind — no query state to stage or persist.
 			const query = getPanelBuilderQuery(panel);
-			if (query) {
-				next.set(
-					QueryParams.compositeQuery,
-					encodeURIComponent(JSON.stringify(query)),
-				);
-				// The provider applies the URL in an effect, a tick after the builder's fields have
-				// mounted and read the query they keep. `resetQuery` — not `initQueryBuilderData`:
-				// swapping one staged id for another re-anchors global time and refetches the grid.
-				resetQuery(query);
-			}
+			next.set(
+				QueryParams.compositeQuery,
+				encodeURIComponent(JSON.stringify(query)),
+			);
+			// The provider applies the URL in an effect, a tick after the builder's fields have
+			// mounted and read the query they keep. `resetQuery` — not `initQueryBuilderData`:
+			// swapping one staged id for another re-anchors global time and refetches the grid.
+			resetQuery(query);
 			void logEvent(DashboardDetailEvents.PanelViewed, { panelId });
 			safeNavigate(`${pathname}?${next.toString()}`);
 		},

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/utils/buildCreateAlertUrl.ts

@@ -8,24 +8,24 @@ import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import {
-	SectionKind,
-	type PanelFormattingSlice,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
-import { getSectionControls } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getSectionControls';
 import { fromPerses } from 'pages/DashboardPage/DashboardContainer/queryV5/persesQueryAdapters';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { deriveAlertPrefill, PanelAlertPrefill } from './deriveAlertPrefill';
 
-/** The panel's configured y-axis unit, for the kinds that declare one. */
+/** The panel's configured y-axis unit, for the kinds that carry one. */
 export function readPanelUnit(
 	plugin: DashboardtypesPanelPluginDTO,
 ): string | undefined {
-	if (!getSectionControls(plugin.kind, SectionKind.Formatting)?.unit) {
-		return undefined;
+	switch (plugin.kind) {
+		case 'signoz/TimeSeriesPanel':
+		case 'signoz/BarChartPanel':
+		case 'signoz/NumberPanel':
+		case 'signoz/PieChartPanel':
+			return plugin.spec.formatting?.unit;
+		default:
+			return undefined;
 	}
-	return (plugin.spec as { formatting?: PanelFormattingSlice }).formatting?.unit;
 }
 
 /**

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/utils/deriveAlertPrefill.ts

@@ -11,15 +11,7 @@ import {
 	AlertThresholdOperator,
 	Threshold,
 } from 'container/CreateAlertV2/context/types';
-import {
-	SectionKind,
-	ThresholdVariant,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
-import {
-	THRESHOLD_COLOR_DANGER_ORDER,
-	type ComparisonThresholdShape,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/threshold';
-import { getSectionControls } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getSectionControls';
+import { THRESHOLD_COLOR_DANGER_ORDER } from 'pages/DashboardPage/DashboardContainer/Panels/types/threshold';
 import type { MetricAggregation } from 'types/api/v5/queryRange';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { ReduceOperators } from 'types/common/queryBuilder';
@@ -72,35 +64,27 @@ export function uniformReduceTo(query: Query): ReduceOperators | undefined {
 		: undefined;
 }
 
-/**
- * The panel's thresholds, normalized for alert prefill, read through the variant the
- * kind declares. A `table` variant contributes nothing: per-column thresholds have no
- * meaning for a panel-wide alert condition.
- */
 function readPanelThresholds(
 	plugin: DashboardtypesPanelPluginDTO,
 ): NormalizedPanelThreshold[] {
-	const variant = getSectionControls(
-		plugin.kind,
-		SectionKind.Thresholds,
-	)?.variant;
-	if (
-		variant !== ThresholdVariant.LABEL &&
-		variant !== ThresholdVariant.COMPARISON
-	) {
-		return [];
+	switch (plugin.kind) {
+		case 'signoz/TimeSeriesPanel':
+		case 'signoz/BarChartPanel':
+			return (plugin.spec.thresholds ?? []).map((t) => ({
+				color: t.color,
+				value: t.value,
+				unit: t.unit,
+			}));
+		case 'signoz/NumberPanel':
+			return (plugin.spec.thresholds ?? []).map((t) => ({
+				color: t.color,
+				value: t.value,
+				unit: t.unit,
+				operator: t.operator,
+			}));
+		default:
+			return [];
 	}
-	const thresholds =
-		(plugin.spec as { thresholds?: ComparisonThresholdShape[] }).thresholds ?? [];
-	return thresholds.map((threshold) => ({
-		color: threshold.color,
-		value: threshold.value,
-		unit: threshold.unit,
-		// Only comparison thresholds carry an operator.
-		...(variant === ThresholdVariant.COMPARISON && {
-			operator: threshold.operator,
-		}),
-	}));
 }
 
 // Match case-insensitively (picker emits lowercase hex); unknown colors sort last.

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

@@ -46,9 +46,8 @@ export function useOpenPanelEditor(): (
 			new URLSearchParams(timeSearch).forEach((value, key) => {
 				params.set(key, value);
 			});
-			// `null` for a static kind — no query state to stage or persist.
-			const query = options?.panel && getPanelBuilderQuery(options.panel);
-			if (query) {
+			if (options?.panel) {
+				const query = getPanelBuilderQuery(options.panel);
 				// Single-encoded: `useGetCompositeQueryParam` decodes once on top of the decode
 				// `URLSearchParams` already does.
 				params.set(

frontend/src/pages/DashboardPage/DashboardContainer/queryV5/types.ts

@@ -17,16 +17,6 @@ export interface PanelQueryData {
 	legendMap: Record<string, string>;
 }
 
-/**
- * The no-fetch value of `PanelQueryData`, for chrome shared with static panels —
- * the header renders status/download surfaces off it and shows neither.
- */
-export const EMPTY_PANEL_QUERY_DATA: PanelQueryData = {
-	response: undefined,
-	requestPayload: undefined,
-	legendMap: {},
-};
-
 /** One data point. `timestamp` is epoch milliseconds (V5 wire native). */
 export interface PanelSeriesPoint {
 	timestamp: number;

frontend/src/pages/DashboardPage/PanelEditorPage/newPanelSeed.ts

@@ -12,7 +12,6 @@ import {
 	buildPluginSpec,
 	type SeededPluginSpec,
 } from '../DashboardContainer/Panels/utils/buildPluginSpec';
-import { getSectionControls } from '../DashboardContainer/Panels/utils/getSectionControls';
 import { toPerses } from '../DashboardContainer/queryV5/persesQueryAdapters';
 
 interface NewPanelSeed {
@@ -22,6 +21,15 @@ interface NewPanelSeed {
 	pluginSpec: SeededPluginSpec;
 }
 
+function kindSupportsUnit(kind: PanelKind): boolean {
+	return getPanelDefinition(kind).sections.some(
+		(section) =>
+			section.kind === SectionKind.Formatting &&
+			'controls' in section &&
+			section.controls.unit === true,
+	);
+}
+
 /** Kind to fall back to for a query language a builder-only kind (List) can't hold. */
 const FALLBACK_KIND_BY_QUERY_TYPE: Partial<Record<EQueryType, PanelKind>> = {
 	[EQueryType.PROM]: 'signoz/TimeSeriesPanel',
@@ -66,10 +74,7 @@ export function buildNewPanelSeed(
 	const queries = converted.length > 0 ? converted : buildDefaultQueries(kind);
 
 	// Explorers put the single `unit` on the query itself, not the panel spec.
-	if (
-		compositeQuery.unit &&
-		getSectionControls(kind, SectionKind.Formatting)?.unit
-	) {
+	if (compositeQuery.unit && kindSupportsUnit(kind)) {
 		return {
 			kind,
 			queries,

frontend/src/pages/PublicDashboard/PublicDashboardView/PublicPanel/PublicPanel.tsx

@@ -4,11 +4,9 @@ import { noop } from 'lodash-es';
 import PanelBody from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
 import PanelHeader from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
 import type { DashboardPreference } from 'pages/DashboardPage/DashboardContainer/Panels/types/rendererProps';
-import type { RenderableQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
 import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
 
 import { usePublicPanelQuery } from '../hooks/usePublicPanelQuery';
-import StaticPublicPanel from './StaticPublicPanel';
 import styles from './PublicPanel.module.scss';
 
 interface PublicPanelProps {
@@ -28,40 +26,17 @@ const PUBLIC_DASHBOARD_PREFERENCE: DashboardPreference = {
 	syncMode: DashboardCursorSync.None,
 };
 
-/**
- * Read-only v2 public panel. Forks on the kind's mode before any query machinery
- * exists; the static arm renders nothing until a static kind registers.
- */
-function PublicPanel(props: PublicPanelProps): JSX.Element {
-	const panelDefinition = getPanelDefinition(props.panel.spec.plugin.kind);
-
-	if (panelDefinition.mode === 'static') {
-		return (
-			<StaticPublicPanel
-				panel={props.panel}
-				panelKey={props.panelKey}
-				panelDefinition={panelDefinition}
-			/>
-		);
-	}
-
-	return <QueryPublicPanel {...props} panelDefinition={panelDefinition} />;
-}
-
-interface QueryPublicPanelProps extends PublicPanelProps {
-	panelDefinition: RenderableQueryPanelDefinition;
-}
-
-// Reuses the V2 header/body renderers with interactions disabled.
-function QueryPublicPanel({
+// Read-only v2 public panel: reuses the V2 header/body renderers with interactions disabled.
+function PublicPanel({
 	panel,
 	panelKey,
 	publicDashboardId,
 	startMs,
 	endMs,
 	isVisible,
-	panelDefinition,
-}: QueryPublicPanelProps): JSX.Element {
+}: PublicPanelProps): JSX.Element {
+	const panelDefinition = getPanelDefinition(panel.spec.plugin.kind);
+
 	const { data, isFetching, isPreviousData, error, refetch } =
 		usePublicPanelQuery({
 			panel,
@@ -85,7 +60,7 @@ function QueryPublicPanel({
 				hideActions
 			/>
 			<PanelBody
-				Renderer={panelDefinition.Renderer}
+				panelDefinition={panelDefinition}
 				panel={panel}
 				panelId={panelKey}
 				data={data}

frontend/src/pages/PublicDashboard/PublicDashboardView/PublicPanel/StaticPublicPanel.tsx

@@ -1,45 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import PanelHeader from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
-import StaticPanelBody from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/StaticPanelBody/StaticPanelBody';
-import type { RenderableStaticPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import { EMPTY_PANEL_QUERY_DATA } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
-
-import styles from './PublicPanel.module.scss';
-
-interface StaticPublicPanelProps {
-	panel: DashboardtypesPanelDTO;
-	panelKey: string;
-	panelDefinition: RenderableStaticPanelDefinition;
-}
-
-/**
- * Read-only public rendering of a kind that renders from its own plugin spec. The
- * body is authored content meant to be read, so it is not redacted — and there is
- * no query to issue. Public dashboards carry no variable runtime, so variable
- * tokens render literally, as an undefined variable does anywhere else.
- */
-function StaticPublicPanel({
-	panel,
-	panelKey,
-	panelDefinition,
-}: StaticPublicPanelProps): JSX.Element {
-	return (
-		<div className={styles.panel} data-panel-root={panelKey}>
-			<PanelHeader
-				panelId={panelKey}
-				panel={panel}
-				data={EMPTY_PANEL_QUERY_DATA}
-				isFetching={false}
-				error={null}
-				hideActions
-			/>
-			<StaticPanelBody
-				panelDefinition={panelDefinition}
-				panel={panel}
-				panelId={panelKey}
-			/>
-		</div>
-	);
-}
-
-export default StaticPublicPanel;

frontend/src/pages/PublicDashboard/PublicDashboardView/PublicPanel/__tests__/PublicPanel.test.tsx

@@ -1,8 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 
-import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-
 import { usePublicPanelQuery } from '../../hooks/usePublicPanelQuery';
 import PublicPanel from '../PublicPanel';
 
@@ -10,14 +8,6 @@ jest.mock('../../hooks/usePublicPanelQuery', () => ({
 	usePublicPanelQuery: jest.fn(),
 }));
 
-// Real registry by default; individual tests override to a static definition.
-jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => {
-	const actual = jest.requireActual(
-		'pages/DashboardPage/DashboardContainer/Panels/registry',
-	);
-	return { ...actual, getPanelDefinition: jest.fn(actual.getPanelDefinition) };
-});
-
 // Stub the reused V2 renderers so the test targets PublicPanel's own wiring, not uPlot/timezone.
 jest.mock(
 	'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader',
@@ -107,30 +97,6 @@ describe('PublicPanel', () => {
 		);
 	});
 
-	it('renders a static kind with no fetch at all', () => {
-		const StaticRenderer = (): JSX.Element => (
-			<div data-testid="fake-static-renderer" />
-		);
-		(getPanelDefinition as jest.Mock).mockReturnValueOnce({
-			kind: 'signoz/TimeSeriesPanel',
-			displayName: 'Static',
-			sections: [],
-			actions: {},
-			mode: 'static',
-			Renderer: StaticRenderer,
-			EditorPane: StaticRenderer,
-		});
-
-		render(<PublicPanel panel={timeseriesPanel} {...commonProps} />);
-
-		expect(screen.getByTestId('fake-static-renderer')).toBeInTheDocument();
-		expect(screen.getByTestId('panel-header')).toHaveAttribute(
-			'data-hide-actions',
-			'true',
-		);
-		expect(mockQuery).not.toHaveBeenCalled();
-	});
-
 	it('gates the fetch when off screen', () => {
 		render(
 			<PublicPanel panel={timeseriesPanel} {...commonProps} isVisible={false} />,

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -114,8 +114,8 @@ func (d *DashboardSpec) validatePanels() error {
 			return err
 		}
 		panelKind := panel.Spec.Plugin.Kind
-		if len(panel.Spec.Queries) != 1 {
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s.spec.queries: panel must have one query, found %d", path, len(panel.Spec.Queries))
+		if err := validatePanelQueryCount(panel.Spec.Queries, panelKind, path); err != nil {
+			return err
 		}
 		allowed := allowedQueryKinds[panelKind]
 		for qi, q := range panel.Spec.Queries {
@@ -127,6 +127,22 @@ func (d *DashboardSpec) validatePanels() error {
 	return nil
 }
 
+func validatePanelQueryCount(queries []Query, panelKind PanelPluginKind, path string) error {
+	if queries == nil {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s.spec.queries: is required and must not be null; use [] for a panel that renders without a query", path)
+	}
+	if panelKind.rendersWithoutQuery() {
+		if len(queries) != 0 {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s.spec.queries: panel kind %q renders without a query and must have queries: [], found %d", path, panelKind, len(queries))
+		}
+		return nil
+	}
+	if len(queries) != 1 {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s.spec.queries: panel must have one query, found %d", path, len(queries))
+	}
+	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 {

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -1086,7 +1086,7 @@ func TestInvalidatePanelWithoutQueries(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected panel-without-queries to be rejected")
-	assert.Contains(t, err.Error(), "panel must have one query")
+	assert.Contains(t, err.Error(), "spec.queries: is required and must not be null")
 }
 
 func TestInvalidatePanelWithEmptyQueriesArray(t *testing.T) {
@@ -1136,6 +1136,155 @@ func TestInvalidatePanelWithMultipleDirectQueries(t *testing.T) {
 	assert.Contains(t, err.Error(), "panel must have one query")
 }
 
+func TestValidateTextPanel(t *testing.T) {
+	wrapPanel := func(panelSpec string) []byte {
+		return []byte(`{
+			"variables": [],
+			"panels": {
+				"p1": {
+					"kind": "Panel",
+					"spec": {
+						"links": [],
+						"plugin": {"kind": "signoz/TextPanel", "spec": ` + panelSpec + `},
+						"queries": []
+					}
+				}
+			},
+			"links": [],
+			"layouts": []
+		}`)
+	}
+
+	t.Run("fully specified text panel validates", func(t *testing.T) {
+		d, err := unmarshalDashboard(wrapPanel(`{
+			"mode": "markdown",
+			"text": "# Runbook\n\nSee the [oncall doc](https://example.com).",
+			"presentation": {"textAlign": "center", "verticalAlign": "bottom", "background": "#1A2b3C"},
+			"headerOptions": {"hide": true}
+		}`))
+		require.NoError(t, err, "expected a fully specified text panel to validate")
+
+		spec, ok := d.Panels["p1"].Spec.Plugin.Spec.(*TextPanelSpec)
+		require.True(t, ok, "expected the panel spec to decode as *TextPanelSpec")
+		assert.Equal(t, TextModeMarkdown, spec.Mode)
+		assert.Equal(t, "# Runbook\n\nSee the [oncall doc](https://example.com).", spec.Text)
+		assert.Equal(t, TextAlignCenter, spec.Presentation.TextAlign)
+		assert.Equal(t, VerticalAlignBottom, spec.Presentation.VerticalAlign)
+		require.NotNil(t, spec.Presentation.Background, "expected background to be set")
+		assert.Equal(t, "#1A2b3C", *spec.Presentation.Background)
+		assert.True(t, spec.HeaderOptions.Hide)
+	})
+
+	// The header shows unless explicitly hidden, so the zero value must round-trip
+	// as a shown header. Background has no default: omitted stays omitted.
+	t.Run("omitted fields marshal back as their defaults", func(t *testing.T) {
+		d, err := unmarshalDashboard(wrapPanel(`{}`))
+		require.NoError(t, err, "expected an empty text panel spec to validate")
+
+		spec, ok := d.Panels["p1"].Spec.Plugin.Spec.(*TextPanelSpec)
+		require.True(t, ok, "expected the panel spec to decode as *TextPanelSpec")
+		assert.Nil(t, spec.Presentation.Background, "expected an omitted background to stay unset")
+
+		out, err := json.Marshal(d.Panels["p1"].Spec.Plugin.Spec)
+		require.NoError(t, err, "marshalling the decoded text panel spec")
+		assert.JSONEq(t, `{
+			"mode": "markdown",
+			"text": "",
+			"presentation": {"textAlign": "left", "verticalAlign": "top"},
+			"headerOptions": {"hide": false}
+		}`, string(out))
+	})
+
+	t.Run("a text panel carrying a query is rejected", func(t *testing.T) {
+		data := []byte(`{
+			"variables": [],
+			"panels": {
+				"p1": {
+					"kind": "Panel",
+					"spec": {
+						"links": [],
+						"plugin": {"kind": "signoz/TextPanel", "spec": {"text": "hi"}},
+						"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "metrics"}}}}]
+					}
+				}
+			},
+			"links": [],
+			"layouts": []
+		}`)
+		_, err := unmarshalDashboard(data)
+		require.Error(t, err, "expected a text panel with a query to be rejected")
+		assert.Contains(t, err.Error(), "renders without a query and must have queries: [], found 1")
+	})
+
+	t.Run("a text panel with null queries is rejected", func(t *testing.T) {
+		data := []byte(`{
+			"variables": [],
+			"panels": {
+				"p1": {
+					"kind": "Panel",
+					"spec": {
+						"links": [],
+						"plugin": {"kind": "signoz/TextPanel", "spec": {"text": "hi"}},
+						"queries": null
+					}
+				}
+			},
+			"links": [],
+			"layouts": []
+		}`)
+		_, err := unmarshalDashboard(data)
+		require.Error(t, err, "expected a text panel with null queries to be rejected")
+		assert.Contains(t, err.Error(), "spec.queries: is required and must not be null")
+	})
+
+	t.Run("hex background colours validate", func(t *testing.T) {
+		for _, background := range []string{"#abc", "#abcd", "#aabbcc", "#aabbccdd", "#AABBCC"} {
+			d, err := unmarshalDashboard(wrapPanel(`{"presentation": {"background": "` + background + `"}}`))
+			require.NoError(t, err, "expected background %q to validate", background)
+
+			spec, ok := d.Panels["p1"].Spec.Plugin.Spec.(*TextPanelSpec)
+			require.True(t, ok, "expected the panel spec to decode as *TextPanelSpec")
+			require.NotNil(t, spec.Presentation.Background)
+			assert.Equal(t, background, *spec.Presentation.Background)
+		}
+	})
+
+	t.Run("unknown enum values are rejected", func(t *testing.T) {
+		for field, spec := range map[string]string{
+			"mode":          `{"mode": "html"}`,
+			"textAlign":     `{"presentation": {"textAlign": "justify"}}`,
+			"verticalAlign": `{"presentation": {"verticalAlign": "middle"}}`,
+		} {
+			_, err := unmarshalDashboard(wrapPanel(spec))
+			assert.Error(t, err, "expected an unknown %s value to be rejected", field)
+		}
+	})
+
+	t.Run("invalid background colours are rejected", func(t *testing.T) {
+		for name, spec := range map[string]string{
+			"empty string":   `{"presentation": {"background": ""}}`,
+			"missing hash":   `{"presentation": {"background": "aabbcc"}}`,
+			"named colour":   `{"presentation": {"background": "red"}}`,
+			"wrong length":   `{"presentation": {"background": "#abcde"}}`,
+			"non hex digits": `{"presentation": {"background": "#gggggg"}}`,
+		} {
+			_, err := unmarshalDashboard(wrapPanel(spec))
+			assert.Error(t, err, "expected %s background to be rejected", name)
+		}
+	})
+
+	t.Run("unknown spec fields are rejected", func(t *testing.T) {
+		for field, spec := range map[string]string{
+			"top level":     `{"markdown": "hi"}`,
+			"presentation":  `{"presentation": {"horizontalAlign": "left"}}`,
+			"headerOptions": `{"headerOptions": {"show": true}}`,
+		} {
+			_, err := unmarshalDashboard(wrapPanel(spec))
+			assert.Error(t, err, "expected an unknown %s field to be rejected", field)
+		}
+	})
+}
+
 func TestValidateRequiredFields(t *testing.T) {
 	wrapVariable := func(pluginKind, pluginSpec string) string {
 		return `{

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -35,6 +35,7 @@ func (PanelPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
 		string(PanelKindTable):      schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec"),
 		string(PanelKindHistogram):  schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec"),
 		string(PanelKindList):       schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec"),
+		string(PanelKindText):       schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec"),
 	})
 }
 
@@ -65,6 +66,7 @@ func (PanelPlugin) JSONSchemaOneOf() []any {
 		PanelPluginVariant[TablePanelSpec]{Kind: string(PanelKindTable)},
 		PanelPluginVariant[HistogramPanelSpec]{Kind: string(PanelKindHistogram)},
 		PanelPluginVariant[ListPanelSpec]{Kind: string(PanelKindList)},
+		PanelPluginVariant[TextPanelSpec]{Kind: string(PanelKindText)},
 	}
 }
 
@@ -228,6 +230,7 @@ var (
 		PanelKindTable:      func() any { return new(TablePanelSpec) },
 		PanelKindHistogram:  func() any { return new(HistogramPanelSpec) },
 		PanelKindList:       func() any { return new(ListPanelSpec) },
+		PanelKindText:       func() any { return new(TextPanelSpec) },
 	}
 	queryPluginSpecs = map[QueryPluginKind]func() any{
 		QueryKindBuilder:       func() any { return new(BuilderQuerySpec) },
@@ -250,6 +253,7 @@ var (
 		PanelKindPieChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
 		PanelKindTable:      {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
 		PanelKindList:       {QueryKindBuilder},
+		PanelKindText:       {},
 	}
 )
 

pkg/types/dashboardtypes/perses_public_dashboard.go

@@ -172,7 +172,12 @@ func (d *DashboardV2) GetPanelQuery(startTime, endTime uint64, panelKey string)
 	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.
+	// A panel kind that renders from its own plugin spec has no query to execute;
+	// asking for its query range is a client mistake.
+	if panel.Spec.Plugin.Kind.rendersWithoutQuery() {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "panel %q is a %q and has no query to execute", panelKey, panel.Spec.Plugin.Kind)
+	}
+	// Validator guarantees exactly one query for every other panel kind.
 	if len(panel.Spec.Queries) != 1 {
 		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "panel %q must have exactly one query", panelKey)
 	}

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -173,10 +173,15 @@ const (
 	PanelKindTable      PanelPluginKind = "signoz/TablePanel"
 	PanelKindHistogram  PanelPluginKind = "signoz/HistogramPanel"
 	PanelKindList       PanelPluginKind = "signoz/ListPanel"
+	PanelKindText       PanelPluginKind = "signoz/TextPanel"
 )
 
 func (PanelPluginKind) Enum() []any {
-	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList}
+	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList, PanelKindText}
+}
+
+func (k PanelPluginKind) rendersWithoutQuery() bool {
+	return k == PanelKindText
 }
 
 type TimeSeriesPanelSpec struct {
@@ -237,6 +242,19 @@ type ListPanelSpec struct {
 	SelectFields []telemetrytypes.TelemetryFieldKey `json:"selectFields,omitzero" validate:"dive"`
 }
 
+type TextPanelSpec struct {
+	Mode          TextMode         `json:"mode"`
+	Text          string           `json:"text"`
+	Presentation  TextPresentation `json:"presentation"`
+	HeaderOptions HeaderOptions    `json:"headerOptions"`
+}
+
+type TextPresentation struct {
+	TextAlign     TextAlign     `json:"textAlign"`
+	VerticalAlign VerticalAlign `json:"verticalAlign"`
+	Background    *string       `json:"background,omitempty" validate:"omitempty,hexcolor"`
+}
+
 // ══════════════════════════════════════════════
 // Panel common types
 // ══════════════════════════════════════════════
@@ -247,6 +265,13 @@ type Axes struct {
 	IsLogScale bool     `json:"isLogScale"`
 }
 
+// HeaderOptions controls the panel card's header strip — the title/description
+// row above the panel content. Phrased as hide so the zero value shows the
+// header, matching every other panel kind.
+type HeaderOptions struct {
+	Hide bool `json:"hide"`
+}
+
 type BasicVisualization struct {
 	TimePreference TimePreference `json:"timePreference"`
 }
@@ -658,6 +683,118 @@ func (sg SpanGaps) validate() error {
 	return nil
 }
 
+// TextMode is how a text panel interprets its `text`. Only markdown is
+// rendered today; further modes (e.g. plain text, HTML) are expected.
+type TextMode struct{ valuer.String }
+
+var TextModeMarkdown = TextMode{valuer.NewString("markdown")} // default
+
+func (TextMode) Enum() []any {
+	return []any{TextModeMarkdown}
+}
+
+func (m TextMode) ValueOrDefault() string {
+	if m.IsZero() {
+		return TextModeMarkdown.StringValue()
+	}
+	return m.StringValue()
+}
+
+func (m TextMode) MarshalJSON() ([]byte, error) {
+	return json.Marshal(m.ValueOrDefault())
+}
+
+func (m *TextMode) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid text mode: must be the string `markdown`")
+	}
+	tm := TextMode{valuer.NewString(v)}
+	switch tm {
+	case TextModeMarkdown:
+		*m = tm
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid text mode %q: must be `markdown`", v)
+	}
+}
+
+type TextAlign struct{ valuer.String }
+
+var (
+	TextAlignLeft   = TextAlign{valuer.NewString("left")} // default
+	TextAlignCenter = TextAlign{valuer.NewString("center")}
+	TextAlignRight  = TextAlign{valuer.NewString("right")}
+)
+
+func (TextAlign) Enum() []any {
+	return []any{TextAlignLeft, TextAlignCenter, TextAlignRight}
+}
+
+func (a TextAlign) ValueOrDefault() string {
+	if a.IsZero() {
+		return TextAlignLeft.StringValue()
+	}
+	return a.StringValue()
+}
+
+func (a TextAlign) MarshalJSON() ([]byte, error) {
+	return json.Marshal(a.ValueOrDefault())
+}
+
+func (a *TextAlign) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid text align: must be a string, one of `left`, `center`, or `right`")
+	}
+	val := TextAlign{valuer.NewString(v)}
+	switch val {
+	case TextAlignLeft, TextAlignCenter, TextAlignRight:
+		*a = val
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid text align %q: must be `left`, `center`, or `right`", v)
+	}
+}
+
+type VerticalAlign struct{ valuer.String }
+
+var (
+	VerticalAlignTop    = VerticalAlign{valuer.NewString("top")} // default
+	VerticalAlignCenter = VerticalAlign{valuer.NewString("center")}
+	VerticalAlignBottom = VerticalAlign{valuer.NewString("bottom")}
+)
+
+func (VerticalAlign) Enum() []any {
+	return []any{VerticalAlignTop, VerticalAlignCenter, VerticalAlignBottom}
+}
+
+func (a VerticalAlign) ValueOrDefault() string {
+	if a.IsZero() {
+		return VerticalAlignTop.StringValue()
+	}
+	return a.StringValue()
+}
+
+func (a VerticalAlign) MarshalJSON() ([]byte, error) {
+	return json.Marshal(a.ValueOrDefault())
+}
+
+func (a *VerticalAlign) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid vertical align: must be a string, one of `top`, `center`, or `bottom`")
+	}
+	val := VerticalAlign{valuer.NewString(v)}
+	switch val {
+	case VerticalAlignTop, VerticalAlignCenter, VerticalAlignBottom:
+		*a = val
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid vertical align %q: must be `top`, `center`, or `bottom`", v)
+	}
+}
+
 type PrecisionOption struct{ valuer.String }
 
 var (