feat(dashboards-v2): add a Create alert rule action to the panel editor

Add an "Actions" group at the foot of the editor config pane — a list of
cross-page navigation links kept distinct from the collapsible config
sections above. The first action, "Create alert rule", reuses
useCreateAlertFromPanel to seed an alert from the draft query; the group
hides for kinds that can't seed an alert and scales to more actions.

ConfigPane now derives the panel kind from its spec and takes the draft
panel + panelId so the group can build the link.

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActionRow.tsx

@@ -0,0 +1,43 @@
+import { SquareArrowOutUpRight } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import type { ReactNode } from 'react';
+
+import styles from './ConfigActions.module.scss';
+import { Button } from '@signozhq/ui/button';
+
+interface ConfigActionRowProps {
+	/** Leading glyph for the action. */
+	icon: ReactNode;
+	label: string;
+	onClick: () => void;
+	testId?: string;
+}
+
+/**
+ * One row in the config pane's "Actions" list — a cross-page navigation link
+ * (leading icon, label, trailing external-link affordance). The whole row is the
+ * click target.
+ */
+function ConfigActionRow({
+	icon,
+	label,
+	onClick,
+	testId,
+}: ConfigActionRowProps): JSX.Element {
+	return (
+		<Button
+			type="button"
+			variant="outlined"
+			color="secondary"
+			className={styles.row}
+			data-testid={testId}
+			onClick={onClick}
+			prefix={<span className={styles.icon}>{icon}</span>}
+			suffix={<SquareArrowOutUpRight size={14} />}
+		>
+			<Typography.Text className={styles.label}>{label}</Typography.Text>
+		</Button>
+	);
+}
+
+export default ConfigActionRow;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActions.module.scss

@@ -0,0 +1,57 @@
+/* The "Actions" group: a list of cross-page navigation links, visually separated
+   from the collapsible config sections above by the same hairline divider. */
+.divider {
+	height: 1px;
+	background: var(--l2-border);
+	margin: 18px 0;
+}
+
+.container {
+	padding: 0 16px;
+}
+
+.eyebrow {
+	display: block;
+	margin: 0 2px 10px;
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--l1-foreground);
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+}
+
+/* A navigation-link row: leading icon, label, trailing external-link affordance. */
+.row {
+	display: flex;
+	align-items: center;
+	gap: 11px;
+	width: 100%;
+	height: 44px;
+	padding: 0 4px;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	color: var(--text-vanilla-100);
+	border-radius: 4px;
+
+	&:hover {
+		background: color-mix(in srgb, var(--bg-vanilla-100) 6%, transparent);
+	}
+}
+
+.icon {
+	display: grid;
+	place-items: center;
+	flex: none;
+	color: var(--l2-foreground);
+}
+
+.label {
+	flex: 1;
+	text-align: left;
+}

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

@@ -0,0 +1,52 @@
+import { Bell } from '@signozhq/icons';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+import { useCreateAlertFromPanel } from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel';
+
+import ConfigActionRow from './ConfigActionRow';
+import styles from './ConfigActions.module.scss';
+
+interface ConfigActionsProps {
+	/** The draft panel — its current query seeds the actions (e.g. Create alert rule). */
+	panel: DashboardtypesPanelDTO;
+	panelId: string;
+}
+
+/**
+ * The "Actions" group at the foot of the config pane: cross-page navigation links,
+ * kept distinct from the collapsible config sections above (config you edit in place
+ * vs. links that take you elsewhere). Each link is gated by the panel kind's
+ * capabilities; the whole group hides when none apply. Extend by adding rows here.
+ */
+function ConfigActions({
+	panel,
+	panelId,
+}: ConfigActionsProps): JSX.Element | null {
+	const createAlert = useCreateAlertFromPanel();
+	const { actions } = getPanelDefinition(panel.spec.plugin.kind);
+
+	// Only kinds whose query can seed an alert offer this today; mirror the panel
+	// menu's create-alert capability.
+	if (!actions.createAlert) {
+		return null;
+	}
+
+	return (
+		<>
+			<div className={styles.divider} />
+			<div className={styles.container}>
+				<span className={styles.eyebrow}>Actions</span>
+				<div className={styles.list}>
+					<ConfigActionRow
+						testId="panel-editor-v2-create-alert"
+						icon={<Bell size={14} />}
+						label="Create alert"
+						onClick={(): void => createAlert(panel, panelId)}
+					/>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default ConfigActions;

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

@@ -0,0 +1,49 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+
+import ConfigActions from '../ConfigActions';
+
+const mockCreateAlert = jest.fn();
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel',
+	() => ({
+		useCreateAlertFromPanel: jest.fn(() => mockCreateAlert),
+	}),
+);
+
+function makePanel(kind: string): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name: 'CPU' },
+			plugin: { kind, spec: {} },
+			queries: [],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+describe('ConfigActions', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	it('offers "Create alert rule" for a create-alert-capable kind and seeds from the panel', () => {
+		const panel = makePanel('signoz/TimeSeriesPanel');
+		render(<ConfigActions panel={panel} panelId="panel-1" />);
+
+		const row = screen.getByTestId('panel-editor-v2-create-alert');
+		expect(row).toHaveTextContent('Create alert rule');
+
+		fireEvent.click(row);
+		expect(mockCreateAlert).toHaveBeenCalledWith(panel, 'panel-1');
+	});
+
+	it('renders nothing for a kind that cannot seed an alert', () => {
+		const { container } = render(
+			<ConfigActions panel={makePanel('signoz/TablePanel')} panelId="panel-1" />,
+		);
+
+		expect(
+			screen.queryByTestId('panel-editor-v2-create-alert'),
+		).not.toBeInTheDocument();
+		expect(container).toBeEmptyDOMElement();
+	});
+});

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

@@ -1,29 +1,46 @@
 import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type {
+	DashboardtypesPanelDTO,
 	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
+import { resolveSignal } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
+import type { EQueryType } from 'types/common/dashboard';
 
 import type { LegendSeries } from '../hooks/useLegendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
+import ConfigActions from './ConfigActions/ConfigActions';
 import SectionSlot from './SectionSlot/SectionSlot';
 
 import styles from './ConfigPane.module.scss';
 import { PanelKind } from '../../Panels/types/panelKind';
 
 interface ConfigPaneProps {
-	/** Full plugin kind (e.g. `signoz/TimeSeriesPanel`); drives which sections show. */
-	panelKind: PanelKind;
 	/** The panel spec — the single editing surface (title/description + section slices). */
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
+	/** Switch the panel to another visualization kind. */
+	onChangePanelKind: (kind: PanelKind) => void;
+	/**
+	 * Active query type from the query-builder provider (the selected tab). Drives which
+	 * panel types the visualization switcher disables — read from the provider, not the
+	 * spec, because a new panel's spec has no query until staged.
+	 */
+	queryType?: EQueryType;
 	/** Panel's resolved series, provided to sections that need them (legend colors). */
 	legendSeries: LegendSeries[];
 	/** Table panel's resolved value columns, for the table-only editors. */
 	tableColumns: TableColumnOption[];
+	/** Query step interval (seconds), for the chart-appearance span-gaps floor. */
+	stepInterval?: number;
+	/**
+	 * The draft panel and its id — supplied by the editor so the "Actions" group can
+	 * seed cross-page links (Create alert rule) from the current query. Absent (e.g.
+	 * in isolation tests) hides that group.
+	 */
+	panel: DashboardtypesPanelDTO;
+	panelId: string;
 }
 
 /**
@@ -33,18 +50,21 @@ interface ConfigPaneProps {
  * generically via the section registry — only sections with a built editor appear.
  */
 function ConfigPane({
-	panelKind,
 	spec,
 	onChangeSpec,
+	onChangePanelKind,
+	queryType,
 	legendSeries,
 	tableColumns,
+	stepInterval,
+	panel,
+	panelId,
 }: ConfigPaneProps): JSX.Element {
+	const panelKind = spec.plugin.kind;
 	const definition = getPanelDefinition(panelKind);
 	const sections = definition.sections;
 
-	const signal = getBuilderQueries(spec.queries || [])[0]?.signal as
-		| TelemetrytypesSignalDTO
-		| undefined;
+	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.
@@ -95,12 +115,18 @@ function ConfigPane({
 									legendSeries={legendSeries}
 									tableColumns={tableColumns}
 									signal={signal}
+									panelKind={panelKind}
+									onChangePanelKind={onChangePanelKind}
+									queryType={queryType}
+									stepInterval={stepInterval}
 								/>
 							))}
 						</div>
 					</div>
 				</>
 			)}
+
+			<ConfigActions panel={panel} panelId={panelId} />
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.module.scss

@@ -0,0 +1,6 @@
+// Matches ConfigPane's `.field` so the switcher lines up with the title/description fields.
+.field {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}

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

@@ -0,0 +1,64 @@
+import { Typography } from '@signozhq/ui/typography';
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
+
+import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
+import ConfigSelect from '../controls/ConfigSelect/ConfigSelect';
+
+import styles from './PanelTypeSwitcher.module.scss';
+import { getPanelTypeDisabledReason } from './utils';
+
+interface PanelTypeSwitcherProps {
+	/** The current panel kind (selected value). */
+	panelKind: PanelKind;
+	/** Active query type — a kind that can't be authored in it is disabled (e.g. List is Query-Builder-only, so PromQL/ClickHouse disable it). Defaults to Query Builder. */
+	queryType?: EQueryType;
+	/** Panel's current datasource — also gates the disabled rule (List needs logs/traces, not metrics). */
+	signal?: TelemetrytypesSignalDTO;
+	onChange: (kind: PanelKind) => void;
+}
+
+/**
+ * Visualization-type selector (rendered inside the Visualization section). A type is
+ * disabled when the active query type or datasource is incompatible with it — resolved
+ * through the capabilities guard. The datasource is unknown for PromQL/ClickHouse, but
+ * those query types still disable kinds that only support Query Builder (e.g. List).
+ */
+function PanelTypeSwitcher({
+	panelKind,
+	queryType,
+	signal,
+	onChange,
+}: PanelTypeSwitcherProps): JSX.Element {
+	const items = PANEL_TYPES.map(({ panelKind, label, Icon }) => {
+		// One reason drives both the disabled flag and the tooltip, so they can't disagree.
+		const disabledReason = getPanelTypeDisabledReason({
+			kind: panelKind,
+			queryType: queryType ?? EQueryType.QUERY_BUILDER,
+			signal,
+			label,
+		});
+		return {
+			value: panelKind,
+			label,
+			icon: <Icon size={14} />,
+			disabled: !!disabledReason,
+			tooltip: disabledReason,
+		};
+	});
+
+	return (
+		<div className={styles.field}>
+			<Typography.Text>Panel Type</Typography.Text>
+			<ConfigSelect
+				testId="panel-editor-v2-type-switcher"
+				value={panelKind}
+				items={items}
+				onChange={(value): void => onChange(value as PanelKind)}
+			/>
+		</div>
+	);
+}
+
+export default PanelTypeSwitcher;

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

@@ -0,0 +1,122 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+
+import PanelTypeSwitcher from '../PanelTypeSwitcher';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
+
+jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
+	getPanelDefinition: jest.fn(),
+}));
+
+const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
+
+// Query-type support per kind: List is Query-Builder-only; Table/Pie drop PromQL.
+const SUPPORTED_QUERY_TYPES: Record<string, EQueryType[]> = {
+	'signoz/ListPanel': [EQueryType.QUERY_BUILDER],
+	'signoz/TablePanel': [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
+	'signoz/PieChartPanel': [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
+};
+
+function disabledLabels(): (string | null)[] {
+	return Array.from(
+		document.querySelectorAll('.ant-select-item-option-disabled'),
+	).map((el) => el.textContent);
+}
+
+function openDropdown(): void {
+	fireEvent.mouseDown(screen.getByRole('combobox'));
+}
+
+describe('PanelTypeSwitcher', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		// 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) => ({
+			supportedSignals:
+				kind === 'signoz/ListPanel'
+					? ['logs', 'traces']
+					: ['metrics', 'logs', 'traces'],
+			supportedQueryTypes: SUPPORTED_QUERY_TYPES[kind] ?? [
+				EQueryType.QUERY_BUILDER,
+				EQueryType.CLICKHOUSE,
+				EQueryType.PROM,
+			],
+		}));
+	});
+
+	it('fires onChange with the chosen plugin kind', () => {
+		const onChange = jest.fn();
+		render(
+			<PanelTypeSwitcher panelKind="signoz/TimeSeriesPanel" onChange={onChange} />,
+		);
+
+		openDropdown();
+		fireEvent.click(screen.getByText('List'));
+
+		expect(onChange).toHaveBeenCalledWith('signoz/ListPanel');
+	});
+
+	it('disables types whose supported signals exclude the current datasource', () => {
+		render(
+			<PanelTypeSwitcher
+				panelKind="signoz/TimeSeriesPanel"
+				signal={TelemetrytypesSignalDTO.metrics}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		openDropdown();
+		// List can't render a metrics query, so it's disabled; Time Series stays enabled.
+		expect(disabledLabels()).toContain('List');
+		expect(disabledLabels()).not.toContain('Time Series');
+	});
+
+	it('does not disable any type when the datasource is unknown (builder, no signal)', () => {
+		render(
+			<PanelTypeSwitcher
+				panelKind="signoz/TimeSeriesPanel"
+				onChange={jest.fn()}
+			/>,
+		);
+
+		openDropdown();
+		expect(
+			document.querySelectorAll('.ant-select-item-option-disabled'),
+		).toHaveLength(0);
+	});
+
+	it('disables Query-Builder-only kinds under PromQL even without a datasource', () => {
+		render(
+			<PanelTypeSwitcher
+				panelKind="signoz/TimeSeriesPanel"
+				queryType={EQueryType.PROM}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		openDropdown();
+		// List/Table/Pie can't be authored in PromQL; Time Series can.
+		expect(disabledLabels()).toContain('List');
+		expect(disabledLabels()).toContain('Table');
+		expect(disabledLabels()).toContain('Pie Chart');
+		expect(disabledLabels()).not.toContain('Time Series');
+	});
+
+	it('disables List under ClickHouse while Table/Pie stay enabled', () => {
+		render(
+			<PanelTypeSwitcher
+				panelKind="signoz/TablePanel"
+				queryType={EQueryType.CLICKHOUSE}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		openDropdown();
+		expect(disabledLabels()).toContain('List');
+		expect(disabledLabels()).not.toContain('Table');
+		expect(disabledLabels()).not.toContain('Pie Chart');
+		expect(disabledLabels()).not.toContain('Time Series');
+	});
+});

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

@@ -0,0 +1,73 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
+
+import { getPanelTypeDisabledReason } from '../utils';
+
+const { QUERY_BUILDER, CLICKHOUSE, PROM } = EQueryType;
+const { logs, metrics } = TelemetrytypesSignalDTO;
+
+describe('getPanelTypeDisabledReason', () => {
+	it('returns undefined for a supported combination', () => {
+		expect(
+			getPanelTypeDisabledReason({
+				kind: 'signoz/TimeSeriesPanel',
+				queryType: PROM,
+				label: 'Time Series',
+			}),
+		).toBeUndefined();
+		expect(
+			getPanelTypeDisabledReason({
+				kind: 'signoz/ListPanel',
+				queryType: QUERY_BUILDER,
+				signal: logs,
+				label: 'List',
+			}),
+		).toBeUndefined();
+	});
+
+	it('explains an unsupported query type', () => {
+		expect(
+			getPanelTypeDisabledReason({
+				kind: 'signoz/ListPanel',
+				queryType: PROM,
+				label: 'List',
+			}),
+		).toBe("List isn't available for PromQL queries");
+		expect(
+			getPanelTypeDisabledReason({
+				kind: 'signoz/ListPanel',
+				queryType: CLICKHOUSE,
+				label: 'List',
+			}),
+		).toBe("List isn't available for ClickHouse queries");
+		expect(
+			getPanelTypeDisabledReason({
+				kind: 'signoz/TablePanel',
+				queryType: PROM,
+				label: 'Table',
+			}),
+		).toBe("Table isn't available for PromQL queries");
+	});
+
+	it('explains an unsupported datasource', () => {
+		expect(
+			getPanelTypeDisabledReason({
+				kind: 'signoz/ListPanel',
+				queryType: QUERY_BUILDER,
+				signal: metrics,
+				label: 'List',
+			}),
+		).toBe("List doesn't support metrics data");
+	});
+
+	it('prefers the query-type reason when both are incompatible', () => {
+		expect(
+			getPanelTypeDisabledReason({
+				kind: 'signoz/ListPanel',
+				queryType: PROM,
+				signal: metrics,
+				label: 'List',
+			}),
+		).toBe("List isn't available for PromQL queries");
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/utils.ts

@@ -0,0 +1,46 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
+
+import {
+	isQueryTypeSupported,
+	isSignalSupported,
+} from '../../../Panels/capabilities';
+import type { PanelKind } from '../../../Panels/types/panelKind';
+
+const QUERY_TYPE_LABEL: Record<EQueryType, string> = {
+	[EQueryType.QUERY_BUILDER]: 'Query Builder',
+	[EQueryType.CLICKHOUSE]: 'ClickHouse',
+	[EQueryType.PROM]: 'PromQL',
+};
+
+const SIGNAL_LABEL: Record<TelemetrytypesSignalDTO, string> = {
+	[TelemetrytypesSignalDTO.logs]: 'logs',
+	[TelemetrytypesSignalDTO.traces]: 'traces',
+	[TelemetrytypesSignalDTO.metrics]: 'metrics',
+};
+
+/**
+ * Why a panel kind can't be selected for the current query type / datasource, or
+ * `undefined` when it can. Drives both the type switcher's disabled state and its
+ * tooltip, so the two never disagree. The query-type reason takes precedence (it's the
+ * outer choice): query types have no datasource, so the signal only matters in builder.
+ */
+export function getPanelTypeDisabledReason({
+	kind,
+	queryType,
+	signal,
+	label,
+}: {
+	kind: PanelKind;
+	queryType: EQueryType;
+	signal?: TelemetrytypesSignalDTO;
+	label: string;
+}): string | undefined {
+	if (!isQueryTypeSupported(kind, queryType)) {
+		return `${label} isn't available for ${QUERY_TYPE_LABEL[queryType]} queries`;
+	}
+	if (signal !== undefined && !isSignalSupported(kind, signal)) {
+		return `${label} doesn't support ${SIGNAL_LABEL[signal]} data`;
+	}
+	return undefined;
+}

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

@@ -7,7 +7,9 @@ import {
 	SECTION_METADATA,
 	type SectionConfig,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import type { EQueryType } from 'types/common/dashboard';
 
+import type { PanelKind } from '../../../Panels/types/panelKind';
 import type { LegendSeries } from '../../hooks/useLegendSeries';
 import type { TableColumnOption } from '../../hooks/useTableColumns';
 import { resolveSectionEditor } from '../sectionRegistry';
@@ -23,6 +25,13 @@ interface SectionSlotProps {
 	tableColumns: TableColumnOption[];
 	/** Panel's telemetry signal, for editors that fetch field suggestions (List columns). */
 	signal?: TelemetrytypesSignalDTO;
+	/** Current panel kind + switch handler, for the visualization section's type switcher. */
+	panelKind: PanelKind;
+	onChangePanelKind: (kind: PanelKind) => void;
+	/** Active query type, for the type switcher's disabled rule (Query-Builder-only kinds). */
+	queryType?: EQueryType;
+	/** Query step interval (seconds), for the chart-appearance span-gaps floor. */
+	stepInterval?: number;
 }
 
 /**
@@ -38,6 +47,10 @@ function SectionSlot({
 	legendSeries,
 	tableColumns,
 	signal,
+	panelKind,
+	onChangePanelKind,
+	queryType,
+	stepInterval,
 }: SectionSlotProps): JSX.Element | null {
 	// A kind can hide a section based on current spec state (e.g. Histogram legend once
 	// queries are merged) — skip it before resolving the editor.
@@ -60,7 +73,12 @@ function SectionSlot({
 		.formatting?.unit;
 
 	return (
-		<SettingsSection title={title} icon={<Icon size={15} />}>
+		<SettingsSection
+			title={title}
+			icon={<Icon size={15} />}
+			// Open Visualization by default so the type switcher is visible.
+			defaultOpen={config.kind === 'visualization'}
+		>
 			<Component
 				value={get(spec)}
 				controls={controls}
@@ -69,6 +87,10 @@ function SectionSlot({
 				yAxisUnit={yAxisUnit}
 				tableColumns={tableColumns}
 				signal={signal}
+				panelKind={panelKind}
+				onChangePanelKind={onChangePanelKind}
+				queryType={queryType}
+				stepInterval={stepInterval}
 			/>
 		</SettingsSection>
 	);

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

@@ -26,13 +26,15 @@ function SettingsSection({
 }: SettingsSectionProps): JSX.Element {
 	const [isOpen, setIsOpen] = useState(defaultOpen);
 
+	const serializedTitle = title.toLowerCase().replace(/\s+/g, '-');
+
 	return (
 		<section className={styles.section}>
 			<button
 				type="button"
 				className={styles.header}
 				aria-expanded={isOpen}
-				data-testid={`config-section-${title}`}
+				data-testid={`config-section-${serializedTitle}`}
 				onClick={(): void => setIsOpen((prev) => !prev)}
 			>
 				{icon && (

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

@@ -1,8 +1,19 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesPanelDTO,
+	DashboardtypesPanelSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 import ConfigPane from '../ConfigPane';
 
+// The Actions group's hook navigates/logs; stub it so ConfigPane renders without a router.
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel',
+	() => ({
+		useCreateAlertFromPanel: (): jest.Mock => jest.fn(),
+	}),
+);
+
 function spec(unit?: string): DashboardtypesPanelSpecDTO {
 	return {
 		display: { name: 'CPU', description: 'usage' },
@@ -18,11 +29,13 @@ function renderConfigPane(
 	overrides: Partial<React.ComponentProps<typeof ConfigPane>> = {},
 ): React.ComponentProps<typeof ConfigPane> {
 	const props: React.ComponentProps<typeof ConfigPane> = {
-		panelKind: 'signoz/TimeSeriesPanel',
 		spec: spec(),
 		onChangeSpec: jest.fn(),
+		onChangePanelKind: jest.fn(),
 		legendSeries: [],
 		tableColumns: [],
+		panel: { kind: 'Panel', spec: spec() } as DashboardtypesPanelDTO,
+		panelId: 'panel-1',
 		...overrides,
 	};
 	render(<ConfigPane {...props} />);
@@ -56,6 +69,32 @@ describe('ConfigPane', () => {
 	it('renders the Formatting section for a kind that declares it', () => {
 		renderConfigPane();
 		// The TimeSeries kind declares a Formatting section; its collapsible header shows.
-		expect(screen.getByTestId('config-section-Formatting')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('config-section-formatting-&-units'),
+		).toBeInTheDocument();
+	});
+
+	it('renders the Actions group for a create-alert-capable panel', () => {
+		// renderConfigPane defaults to a TimeSeries panel, which can seed an alert.
+		renderConfigPane();
+
+		expect(screen.getByText('Actions')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('panel-editor-v2-create-alert'),
+		).toBeInTheDocument();
+	});
+
+	it('omits the create-alert action for a kind that cannot seed an alert', () => {
+		// Table panels can't seed alerts → the Actions group hides its row. Only the
+		// panel passed to ConfigActions needs the kind; sections are asserted elsewhere.
+		const panel = {
+			kind: 'Panel',
+			spec: { ...spec(), plugin: { kind: 'signoz/TablePanel', spec: {} } },
+		} as DashboardtypesPanelDTO;
+		renderConfigPane({ panel });
+
+		expect(
+			screen.queryByTestId('panel-editor-v2-create-alert'),
+		).not.toBeInTheDocument();
 	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSegmented/ConfigSegmented.module.scss

@@ -1,5 +1,5 @@
 .group {
-	width: min(350px, 100%);
+	width: 100%;
 }
 
 .segment {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSelect/ConfigSelect.module.scss

@@ -8,3 +8,11 @@
 	align-items: center;
 	gap: 9px;
 }
+
+// Wraps a tooltip-bearing option so the hover target fills the row and still receives
+// pointer events when the option is disabled (antd dims it but doesn't block events).
+.tooltipTrigger {
+	display: block;
+	width: 100%;
+	pointer-events: auto;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSelect/ConfigSelect.tsx

@@ -1,4 +1,5 @@
-import { Select } from 'antd';
+import type { ReactNode } from 'react';
+import { Select, Tooltip } from 'antd';
 
 import { SegmentIcon, type SegmentIconName } from '../segmentIcons';
 
@@ -7,7 +8,11 @@ import styles from './ConfigSelect.module.scss';
 export interface ConfigSelectItem {
 	value: string;
 	label: string;
-	icon?: SegmentIconName;
+	/** A `SegmentIconName` string (resolved to a glyph), or an arbitrary icon node. */
+	icon?: ReactNode;
+	disabled?: boolean;
+	/** Hover hint shown on the option — typically the reason a disabled item is disabled. */
+	tooltip?: string;
 }
 
 interface ConfigSelectProps {
@@ -38,17 +43,31 @@ function ConfigSelect({
 			placeholder={placeholder}
 			onChange={onChange}
 			virtual={false}
-			options={items.map((item) => ({
-				value: item.value,
-				label: item.icon ? (
+			options={items.map((item) => {
+				const content = item.icon ? (
 					<span className={styles.item}>
-						<SegmentIcon name={item.icon} />
+						{typeof item.icon === 'string' ? (
+							<SegmentIcon name={item.icon as SegmentIconName} />
+						) : (
+							item.icon
+						)}
 						{item.label}
 					</span>
 				) : (
 					item.label
-				),
-			}))}
+				);
+				return {
+					value: item.value,
+					disabled: item.disabled,
+					label: item.tooltip ? (
+						<Tooltip title={item.tooltip} placement="top">
+							<span className={styles.tooltipTrigger}>{content}</span>
+						</Tooltip>
+					) : (
+						content
+					),
+				};
+			})}
 		/>
 	);
 }

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

@@ -157,6 +157,16 @@ export interface ErasedSectionDescriptor {
 		// The panel's telemetry signal; read by editors that fetch field-key
 		// suggestions scoped to it (List column picker).
 		signal?: unknown;
+		// Current panel kind + switch handler; read by the visualization section's
+		// type switcher.
+		panelKind?: unknown;
+		onChangePanelKind?: unknown;
+		// Active query type; read by the visualization section's type switcher to
+		// disable kinds that can't be authored in it (List is Query-Builder-only).
+		queryType?: unknown;
+		// Query step interval (seconds); read by chart appearance to floor the
+		// span-gaps threshold.
+		stepInterval?: unknown;
 	}>;
 	get: (spec: PanelSpec) => unknown;
 	update: (spec: PanelSpec, value: unknown) => PanelSpec;

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

@@ -3,3 +3,14 @@
 	flex-direction: column;
 	gap: 8px;
 }
+
+.thresholdField {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.thresholdPrefix {
+	padding-right: 4px;
+	opacity: 0.6;
+}

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

@@ -1,6 +1,4 @@
-import type { ChangeEvent } from 'react';
 import { Typography } from '@signozhq/ui/typography';
-import { Input } from 'antd';
 import {
 	DashboardtypesFillModeDTO,
 	DashboardtypesLineInterpolationDTO,
@@ -11,6 +9,7 @@ import type { SectionEditorProps } from 'pages/DashboardPageV2/DashboardContaine
 import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
+import DisconnectValuesField from './DisconnectValuesField';
 
 import styles from './ChartAppearanceSection.module.scss';
 
@@ -77,16 +76,11 @@ function ChartAppearanceSection({
 	value,
 	controls,
 	onChange,
-}: SectionEditorProps<'chartAppearance'>): JSX.Element {
-	// `spanGaps.fillLessThan` is a stringified seconds threshold: empty means "connect
-	// every gap" (the chart default), a number means "only bridge gaps shorter than this".
-	const handleSpanGaps = (e: ChangeEvent<HTMLInputElement>): void => {
-		const raw = e.target.value;
-		onChange({
-			...value,
-			spanGaps: raw === '' ? undefined : { ...value?.spanGaps, fillLessThan: raw },
-		});
-	};
+	stepInterval,
+}: SectionEditorProps<'chartAppearance'> & {
+	/** Query step interval (seconds) for the span-gaps threshold floor. */
+	stepInterval?: number;
+}): JSX.Element {
 	return (
 		<>
 			{controls.lineStyle && (
@@ -146,16 +140,12 @@ function ChartAppearanceSection({
 			)}
 
 			{controls.spanGaps && (
-				<div className={styles.field}>
-					<Typography.Text>Connect gaps shorter than (s)</Typography.Text>
-					<Input
-						data-testid="panel-editor-v2-span-gaps"
-						type="number"
-						placeholder="All gaps"
-						value={value?.spanGaps?.fillLessThan ?? ''}
-						onChange={handleSpanGaps}
-					/>
-				</div>
+				<DisconnectValuesField
+					testId="panel-editor-v2-span-gaps"
+					value={value?.spanGaps}
+					stepInterval={stepInterval}
+					onChange={(spanGaps): void => onChange({ ...value, spanGaps })}
+				/>
 			)}
 		</>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/DisconnectValuesField.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { rangeUtil } from '@grafana/data';
+import { Typography } from '@signozhq/ui/typography';
+import type { DashboardtypesSpanGapsDTO } from 'api/generated/services/sigNoz.schemas';
+
+import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
+import DisconnectValuesThresholdInput from './DisconnectValuesThresholdInput';
+
+import styles from './ChartAppearanceSection.module.scss';
+
+const DEFAULT_THRESHOLD = '1m';
+const MODE_NEVER = 'never';
+const MODE_THRESHOLD = 'threshold';
+const MODE_OPTIONS = [
+	{ value: MODE_NEVER, label: 'Never' },
+	{ value: MODE_THRESHOLD, label: 'Threshold' },
+];
+
+interface DisconnectValuesFieldProps {
+	testId: string;
+	value: DashboardtypesSpanGapsDTO | undefined;
+	/** Query step interval (seconds): seeds the default threshold and floors it. */
+	stepInterval?: number;
+	onChange: (next: DashboardtypesSpanGapsDTO | undefined) => void;
+}
+
+/** Default threshold duration: the step interval (smallest meaningful), else 1m. */
+function defaultDuration(stepInterval?: number): string {
+	return stepInterval && stepInterval > 0
+		? rangeUtil.secondsToHms(stepInterval)
+		: DEFAULT_THRESHOLD;
+}
+
+/**
+ * "Disconnect values": Never (span every gap — the chart default) vs Threshold
+ * (only bridge gaps shorter than a duration). The threshold persists as a
+ * duration string in `spanGaps.fillLessThan` ("10m", "5s") — the wire format the
+ * backend expects.
+ */
+function DisconnectValuesField({
+	testId,
+	value,
+	stepInterval,
+	onChange,
+}: DisconnectValuesFieldProps): JSX.Element {
+	const duration = value?.fillLessThan || undefined;
+	const isThreshold = !!duration;
+	// Remember the last threshold so toggling Never → Threshold restores it.
+	const [lastDuration, setLastDuration] = useState(
+		duration ?? defaultDuration(stepInterval),
+	);
+
+	useEffect(() => {
+		if (duration) {
+			setLastDuration(duration);
+		}
+	}, [duration]);
+
+	const handleMode = (mode: string): void => {
+		onChange(
+			mode === MODE_THRESHOLD
+				? { ...value, fillLessThan: lastDuration }
+				: undefined,
+		);
+	};
+
+	return (
+		<>
+			<div className={styles.field}>
+				<Typography.Text>Disconnect values</Typography.Text>
+				<ConfigSegmented
+					testId={testId}
+					value={isThreshold ? MODE_THRESHOLD : MODE_NEVER}
+					items={MODE_OPTIONS}
+					onChange={handleMode}
+				/>
+			</div>
+			{isThreshold && (
+				<div className={styles.field}>
+					<Typography.Text>Threshold value</Typography.Text>
+					<DisconnectValuesThresholdInput
+						testId={`${testId}-value`}
+						value={lastDuration}
+						minValue={stepInterval}
+						onChange={(next): void => onChange({ ...value, fillLessThan: next })}
+					/>
+				</div>
+			)}
+		</>
+	);
+}
+
+export default DisconnectValuesField;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/DisconnectValuesThresholdInput.tsx

@@ -0,0 +1,94 @@
+import { type ChangeEvent, useEffect, useState } from 'react';
+import { rangeUtil } from '@grafana/data';
+import { Callout } from '@signozhq/ui/callout';
+import { Input } from 'antd';
+
+import styles from './ChartAppearanceSection.module.scss';
+
+interface DisconnectValuesThresholdInputProps {
+	testId: string;
+	/** Current threshold as a duration string (e.g. "1m") — the stored wire value. */
+	value: string;
+	/** Smallest allowed threshold (the query step interval), in seconds. */
+	minValue?: number;
+	onChange: (duration: string) => void;
+}
+
+/**
+ * Duration input for the span-gaps threshold: shows/accepts and reports a human
+ * duration ("30s", "1m", "1h"), which is the value stored verbatim in
+ * `fillLessThan` (a bare number is read as seconds). It is only parsed to seconds
+ * to validate against the query step interval. Invalid entries, or values below
+ * that floor, surface an inline error and are not committed (V1 parity).
+ */
+function DisconnectValuesThresholdInput({
+	testId,
+	value,
+	minValue,
+	onChange,
+}: DisconnectValuesThresholdInputProps): JSX.Element {
+	const [text, setText] = useState(value);
+	const [error, setError] = useState<string | null>(null);
+
+	// Resync the displayed duration when the committed value changes upstream.
+	useEffect(() => {
+		setText(value);
+		setError(null);
+	}, [value]);
+
+	const commit = (raw: string): void => {
+		if (!raw) {
+			return;
+		}
+		let seconds: number;
+		try {
+			seconds = rangeUtil.isValidTimeSpan(raw)
+				? rangeUtil.intervalToSeconds(raw)
+				: NaN;
+		} catch {
+			seconds = NaN;
+		}
+		if (!Number.isFinite(seconds) || seconds <= 0) {
+			setError('Enter a valid duration (e.g. 30s, 1m, 1h)');
+			return;
+		}
+		if (minValue !== undefined && seconds < minValue) {
+			setError(`Threshold should be > ${rangeUtil.secondsToHms(minValue)}`);
+			return;
+		}
+		setError(null);
+		// Store the user's duration string as-is — the wire format the backend wants.
+		onChange(raw);
+	};
+
+	return (
+		<div className={styles.thresholdField}>
+			<Input
+				data-testid={testId}
+				type="text"
+				status={error ? 'error' : undefined}
+				prefix={<span className={styles.thresholdPrefix}>&gt;</span>}
+				value={text}
+				onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+					setText(e.target.value);
+					if (error) {
+						setError(null);
+					}
+				}}
+				onBlur={(e): void => commit(e.currentTarget.value)}
+				onKeyDown={(e): void => {
+					if (e.key === 'Enter') {
+						commit(e.currentTarget.value);
+					}
+				}}
+			/>
+			{error && (
+				<Callout type="error" size="small" showIcon>
+					{error}
+				</Callout>
+			)}
+		</div>
+	);
+}
+
+export default DisconnectValuesThresholdInput;

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

@@ -108,9 +108,24 @@ describe('ChartAppearanceSection', () => {
 		expect(onChange).toHaveBeenCalledWith({ showPoints: true });
 	});
 
-	it('writes a span-gaps threshold and clears it when emptied', () => {
+	it('defaults to "Never" (no threshold) and hides the threshold input', () => {
+		render(
+			<ChartAppearanceSection
+				value={undefined}
+				controls={{ spanGaps: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByText('Never')).toBeInTheDocument();
+		expect(
+			screen.queryByTestId('panel-editor-v2-span-gaps-value'),
+		).not.toBeInTheDocument();
+	});
+
+	it('switching to "Threshold" seeds the default 1m threshold', () => {
 		const onChange = jest.fn();
-		const { rerender } = render(
+		render(
 			<ChartAppearanceSection
 				value={undefined}
 				controls={{ spanGaps: true }}
@@ -118,23 +133,103 @@ describe('ChartAppearanceSection', () => {
 			/>,
 		);
 
-		fireEvent.change(screen.getByTestId('panel-editor-v2-span-gaps'), {
-			target: { value: '60' },
-		});
-		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillLessThan: '60' },
-		});
+		fireEvent.click(screen.getByText('Threshold'));
 
-		rerender(
+		expect(onChange).toHaveBeenLastCalledWith({
+			spanGaps: { fillLessThan: '1m' },
+		});
+	});
+
+	it('stores the threshold as a duration string (not seconds)', () => {
+		const onChange = jest.fn();
+		render(
 			<ChartAppearanceSection
-				value={{ spanGaps: { fillLessThan: '60' } }}
+				value={{ spanGaps: { fillLessThan: '1m' } }}
 				controls={{ spanGaps: true }}
 				onChange={onChange}
 			/>,
 		);
-		fireEvent.change(screen.getByTestId('panel-editor-v2-span-gaps'), {
-			target: { value: '' },
+
+		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
+		expect(input).toHaveValue('1m');
+
+		fireEvent.change(input, { target: { value: '5m' } });
+		fireEvent.blur(input);
+
+		expect(onChange).toHaveBeenLastCalledWith({
+			spanGaps: { fillLessThan: '5m' },
 		});
+	});
+
+	it('stores the entry verbatim (bare number kept as typed, not converted)', () => {
+		const onChange = jest.fn();
+		render(
+			<ChartAppearanceSection
+				value={{ spanGaps: { fillLessThan: '1m' } }}
+				controls={{ spanGaps: true }}
+				onChange={onChange}
+			/>,
+		);
+
+		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
+		fireEvent.change(input, { target: { value: '300' } });
+		fireEvent.blur(input);
+
+		expect(onChange).toHaveBeenLastCalledWith({
+			spanGaps: { fillLessThan: '300' },
+		});
+	});
+
+	it('switching back to "Never" clears the threshold', () => {
+		const onChange = jest.fn();
+		render(
+			<ChartAppearanceSection
+				value={{ spanGaps: { fillLessThan: '1m' } }}
+				controls={{ spanGaps: true }}
+				onChange={onChange}
+			/>,
+		);
+
+		fireEvent.click(screen.getByText('Never'));
+
 		expect(onChange).toHaveBeenLastCalledWith({ spanGaps: undefined });
 	});
+
+	it('shows an error and does not commit an invalid duration', () => {
+		const onChange = jest.fn();
+		render(
+			<ChartAppearanceSection
+				value={{ spanGaps: { fillLessThan: '1m' } }}
+				controls={{ spanGaps: true }}
+				onChange={onChange}
+			/>,
+		);
+
+		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
+		fireEvent.change(input, { target: { value: 'abc' } });
+		fireEvent.blur(input);
+
+		expect(screen.getByText(/valid duration/i)).toBeInTheDocument();
+		expect(onChange).not.toHaveBeenCalled();
+	});
+
+	it('rejects a threshold below the query step interval', () => {
+		const onChange = jest.fn();
+		render(
+			<ChartAppearanceSection
+				value={{ spanGaps: { fillLessThan: '2m' } }}
+				controls={{ spanGaps: true }}
+				stepInterval={120}
+				onChange={onChange}
+			/>,
+		);
+
+		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
+		// 1m (60s) is below the 2m (120s) step interval.
+		fireEvent.change(input, { target: { value: '1m' } });
+		fireEvent.blur(input);
+
+		expect(screen.getByText(/Threshold should be >/)).toBeInTheDocument();
+		expect(onChange).not.toHaveBeenCalled();
+	});
 });

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

@@ -123,6 +123,25 @@ describe('ComparisonThresholdsSection', () => {
 		]);
 	});
 
+	it('lets the value input be cleared instead of snapping back to 0', async () => {
+		const user = userEvent.setup();
+		render(
+			<ComparisonThresholdsSection value={THRESHOLDS} onChange={jest.fn()} />,
+		);
+
+		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
+		const valueInput = screen.getByTestId('comparison-threshold-value-0');
+
+		// Regression: clearing used to coerce "" → 0 and refill the field, so the
+		// seeded value could never be removed.
+		await user.clear(valueInput);
+		expect(valueInput).toHaveValue(null);
+
+		// And a fresh value can be typed into the now-empty field.
+		await user.type(valueInput, '5');
+		expect(valueInput).toHaveValue(5);
+	});
+
 	it('does not commit edits when Discard is clicked', async () => {
 		const user = userEvent.setup();
 		const onChange = jest.fn();

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/shared/ThresholdValueField.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Typography } from '@signozhq/ui/typography';
 import { Input } from 'antd';
 
@@ -16,6 +17,12 @@ function ThresholdValueField({
 	value,
 	onChange,
 }: ThresholdValueFieldProps): JSX.Element {
+	const [raw, setRaw] = useState(String(value));
+
+	useEffect(() => {
+		setRaw((prev) => (Number(prev) === value ? prev : String(value)));
+	}, [value]);
+
 	return (
 		<div className={styles.field}>
 			<Typography.Text className={styles.fieldLabel}>Value</Typography.Text>
@@ -23,8 +30,11 @@ function ThresholdValueField({
 				data-testid={testId}
 				type="number"
 				placeholder="Value"
-				value={value}
-				onChange={(e): void => onChange(e.target.value)}
+				value={raw}
+				onChange={(e): void => {
+					setRaw(e.target.value);
+					onChange(e.target.value);
+				}}
 			/>
 		</div>
 	);

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

@@ -1,26 +1,55 @@
 import { Typography } from '@signozhq/ui/typography';
-import { DashboardtypesTimePreferenceDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	DashboardtypesTimePreferenceDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import type { SectionEditorProps } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import type { EQueryType } from 'types/common/dashboard';
 
+import type { PanelKind } from '../../../../Panels/types/panelKind';
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
+import PanelTypeSwitcher from '../../PanelTypeSwitcher/PanelTypeSwitcher';
 import { TIME_PREFERENCE_OPTIONS } from './timePreferenceOptions';
 
 import styles from './VisualizationSection.module.scss';
 
+type VisualizationSectionProps = SectionEditorProps<'visualization'> & {
+	/** Current panel kind + switch handler, forwarded by SectionSlot for the type switcher. */
+	panelKind?: PanelKind;
+	onChangePanelKind?: (kind: PanelKind) => void;
+	/** Active query type, forwarded by SectionSlot — scopes the switcher's disabled types. */
+	queryType?: EQueryType;
+	/** Panel's datasource, forwarded by SectionSlot — scopes the switcher's disabled types. */
+	signal?: TelemetrytypesSignalDTO;
+};
+
 /**
- * Edits the `visualization` slice: the per-panel time preference (all kinds), bar
- * stacking (`stackedBarChart`, Bar only), and gap filling (`fillSpans`, TimeSeries
- * only). Each control is gated by its `controls` flag, so a kind only renders — and only
- * writes — the visualization fields its spec actually supports.
+ * Edits the `visualization` slice: the panel-type switcher (`switchPanelKind`, every
+ * kind), the per-panel time preference, bar stacking (`stackedBarChart`, Bar only), and
+ * gap filling (`fillSpans`, TimeSeries only). Each control is gated by its `controls`
+ * flag, so a kind only renders — and only writes — the fields its spec supports.
  */
 function VisualizationSection({
 	value,
 	controls,
 	onChange,
-}: SectionEditorProps<'visualization'>): JSX.Element {
+	panelKind,
+	onChangePanelKind,
+	queryType,
+	signal,
+}: VisualizationSectionProps): JSX.Element {
 	return (
 		<>
+			{controls.switchPanelKind && panelKind && onChangePanelKind && (
+				<PanelTypeSwitcher
+					panelKind={panelKind}
+					queryType={queryType}
+					signal={signal}
+					onChange={onChangePanelKind}
+				/>
+			)}
+
 			{controls.timePreference && (
 				<div className={styles.field}>
 					<Typography.Text>Panel time preference</Typography.Text>

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

@@ -4,6 +4,15 @@ import { DashboardtypesTimePreferenceDTO } from 'api/generated/services/sigNoz.s
 
 import VisualizationSection from '../VisualizationSection';
 
+// The type switcher resolves each kind's supported signals + query types; stub it so
+// the test doesn't pull the whole panel registry (renderers, chart libs).
+jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
+	getPanelDefinition: jest.fn(() => ({
+		supportedSignals: ['metrics', 'logs', 'traces'],
+		supportedQueryTypes: ['builder', 'clickhouse_sql', 'promql'],
+	})),
+}));
+
 // Open the antd Select by clicking its selector, then pick the option by label.
 async function pickOption(triggerTestId: string, label: string): Promise<void> {
 	const user = userEvent.setup();
@@ -17,7 +26,12 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{ timePreference: true, stacking: true, fillSpans: true }}
+				controls={{
+					switchPanelKind: true,
+					timePreference: true,
+					stacking: true,
+					fillSpans: true,
+				}}
 				onChange={jest.fn()}
 			/>,
 		);
@@ -35,7 +49,10 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{ timePreference: true }}
+				controls={{
+					switchPanelKind: true,
+					timePreference: true,
+				}}
 				onChange={jest.fn()}
 			/>,
 		);
@@ -56,7 +73,10 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{ timePreference: true }}
+				controls={{
+					switchPanelKind: true,
+					timePreference: true,
+				}}
 				onChange={onChange}
 			/>,
 		);
@@ -74,7 +94,10 @@ describe('VisualizationSection', () => {
 					timePreference: DashboardtypesTimePreferenceDTO.global_time,
 					stackedBarChart: false,
 				}}
-				controls={{ stacking: true }}
+				controls={{
+					switchPanelKind: true,
+					stacking: true,
+				}}
 				onChange={onChange}
 			/>,
 		);
@@ -92,7 +115,10 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={{ fillSpans: false }}
-				controls={{ fillSpans: true }}
+				controls={{
+					switchPanelKind: true,
+					fillSpans: true,
+				}}
 				onChange={onChange}
 			/>,
 		);
@@ -101,4 +127,43 @@ describe('VisualizationSection', () => {
 
 		expect(onChange).toHaveBeenCalledWith({ fillSpans: true });
 	});
+
+	it('renders the type switcher and switches kind when switchPanelKind is set', async () => {
+		const onChangePanelKind = jest.fn();
+		render(
+			<VisualizationSection
+				value={undefined}
+				controls={{ switchPanelKind: true }}
+				onChange={jest.fn()}
+				panelKind="signoz/TimeSeriesPanel"
+				onChangePanelKind={onChangePanelKind}
+			/>,
+		);
+
+		expect(
+			screen.getByTestId('panel-editor-v2-type-switcher'),
+		).toBeInTheDocument();
+
+		await pickOption('panel-editor-v2-type-switcher', 'Table');
+		expect(onChangePanelKind).toHaveBeenCalledWith('signoz/TablePanel');
+	});
+
+	it('hides the type switcher when switchPanelKind is not set', () => {
+		render(
+			<VisualizationSection
+				value={undefined}
+				controls={{
+					switchPanelKind: false,
+					timePreference: true,
+				}}
+				onChange={jest.fn()}
+				panelKind="signoz/TimeSeriesPanel"
+				onChangePanelKind={jest.fn()}
+			/>,
+		);
+
+		expect(
+			screen.queryByTestId('panel-editor-v2-type-switcher'),
+		).not.toBeInTheDocument();
+	});
 });

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

@@ -8,23 +8,35 @@ import { Color } from '@signozhq/design-tokens';
 import { Atom, Terminal } from '@signozhq/icons';
 import { Tabs } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import PromQLIcon from 'assets/Dashboard/PromQl';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import TextToolTip from 'components/TextToolTip';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ClickHouseQueryContainer from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse';
 import PromQLQueryContainer from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL';
-import { PANEL_TYPE_TO_QUERY_TYPES } from 'container/NewWidget/utils';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { EQueryType } from 'types/common/dashboard';
 
+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 {
-	panelType: PANEL_TYPES;
+	/** The edited panel's visualization kind — drives supported query types + field visibility via the capabilities guard. */
+	panelKind: PanelKind;
+	/** The panel's current datasource; selects per-signal query-builder field rules. */
+	signal?: TelemetrytypesSignalDTO;
 	/** Preview fetch in flight — drives the Stage & Run button's loading/cancel state. */
 	isLoadingQueries: boolean;
 	/** Run the current query (Stage & Run button / ⌘↵). Always re-runs. */
@@ -41,12 +53,15 @@ interface PanelEditorQueryBuilderProps {
  * `QueryBuilderProvider`. `usePanelEditorQuerySync` owns the panel↔provider sync.
  */
 function PanelEditorQueryBuilder({
-	panelType,
+	panelKind,
+	signal,
 	isLoadingQueries,
 	onStageRunQuery,
 	onCancelQuery,
 	footer,
 }: PanelEditorQueryBuilderProps): JSX.Element {
+	// The shared QueryBuilderV2 / list-view checks still speak the legacy PANEL_TYPES.
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const isDarkMode = useIsDarkMode();
 
@@ -74,13 +89,16 @@ function PanelEditorQueryBuilder({
 		[onStageRunQuery],
 	);
 
+	// Query-builder field visibility for this kind + signal (e.g. List hides step
+	// interval / having). QueryBuilderV2 ignores it for list view (its internal config
+	// wins), but the guard stays the single declared source — see ListPanel definition.
 	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(
-		() => ({ stepInterval: { isHidden: false, isDisabled: false } }),
-		[],
+		() => getHiddenQueryBuilderFields(panelKind, signal),
+		[panelKind, signal],
 	);
 
 	const items = useMemo(() => {
-		const supportedQueryTypes = PANEL_TYPE_TO_QUERY_TYPES[panelType] || [];
+		const supportedQueryTypes = getSupportedQueryTypes(panelKind);
 
 		const queryTypeComponents = {
 			[EQueryType.QUERY_BUILDER]: {
@@ -127,7 +145,7 @@ function PanelEditorQueryBuilder({
 			),
 			children: queryTypeComponents[queryType].component,
 		}));
-	}, [panelType, filterConfigs, isDarkMode]);
+	}, [panelKind, panelType, filterConfigs, isDarkMode]);
 
 	return (
 		<div

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

@@ -0,0 +1,145 @@
+import { render, screen } from '@testing-library/react';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { OPERATORS } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { EQueryType } from 'types/common/dashboard';
+
+import PanelEditorQueryBuilder from '../PanelEditorQueryBuilder';
+
+// Capture the props the (real-guard-fed) QueryBuilderV2 receives without rendering it.
+const mockQueryBuilderV2 = jest.fn();
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+jest.mock('hooks/useDarkMode', () => ({ useIsDarkMode: (): boolean => false }));
+jest.mock('components/QueryBuilderV2/QueryBuilderV2', () => ({
+	QueryBuilderV2: (props: unknown): null => {
+		mockQueryBuilderV2(props);
+		return null;
+	},
+}));
+jest.mock(
+	'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse',
+	() => ({ __esModule: true, default: (): null => null }),
+);
+jest.mock(
+	'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL',
+	() => ({ __esModule: true, default: (): null => null }),
+);
+jest.mock('container/QueryBuilder/components/RunQueryBtn/RunQueryBtn', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+jest.mock('components/TextToolTip', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+jest.mock('assets/Dashboard/PromQl', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+const mockUseQueryBuilder = useQueryBuilder as unknown as jest.Mock;
+
+function renderBuilder(
+	panelKind: string,
+	signal?: TelemetrytypesSignalDTO,
+): void {
+	render(
+		<PanelEditorQueryBuilder
+			panelKind={panelKind as never}
+			signal={signal}
+			isLoadingQueries={false}
+			onStageRunQuery={jest.fn()}
+			onCancelQuery={jest.fn()}
+		/>,
+	);
+}
+
+function lastQueryBuilderProps(): {
+	panelType: string;
+	isListViewPanel: boolean;
+	filterConfigs: unknown;
+} {
+	const calls = mockQueryBuilderV2.mock.calls;
+	return calls[calls.length - 1][0];
+}
+
+describe('PanelEditorQueryBuilder query-type tabs (driven by the capabilities guard)', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseQueryBuilder.mockReturnValue({
+			currentQuery: { queryType: EQueryType.QUERY_BUILDER },
+			redirectWithQueryBuilderData: jest.fn(),
+		});
+	});
+
+	it('shows only the Query Builder tab for the List kind', () => {
+		renderBuilder('signoz/ListPanel', TelemetrytypesSignalDTO.logs);
+
+		expect(screen.getByText('Query Builder')).toBeInTheDocument();
+		expect(screen.queryByText('ClickHouse Query')).not.toBeInTheDocument();
+		expect(screen.queryByText('PromQL')).not.toBeInTheDocument();
+	});
+
+	it('shows Query Builder + ClickHouse but not PromQL for the Table kind', () => {
+		renderBuilder('signoz/TablePanel');
+
+		expect(screen.getByText('Query Builder')).toBeInTheDocument();
+		expect(screen.getByText('ClickHouse Query')).toBeInTheDocument();
+		expect(screen.queryByText('PromQL')).not.toBeInTheDocument();
+	});
+
+	it('shows all three tabs for the Time Series kind', () => {
+		renderBuilder('signoz/TimeSeriesPanel');
+
+		expect(screen.getByText('Query Builder')).toBeInTheDocument();
+		expect(screen.getByText('ClickHouse Query')).toBeInTheDocument();
+		expect(screen.getByText('PromQL')).toBeInTheDocument();
+	});
+});
+
+describe('PanelEditorQueryBuilder field visibility (driven by the capabilities guard)', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseQueryBuilder.mockReturnValue({
+			currentQuery: { queryType: EQueryType.QUERY_BUILDER },
+			redirectWithQueryBuilderData: jest.fn(),
+		});
+	});
+
+	it('passes empty field config + non-list flag for a non-list kind', () => {
+		renderBuilder('signoz/TimeSeriesPanel', TelemetrytypesSignalDTO.metrics);
+
+		const props = lastQueryBuilderProps();
+		expect(props.panelType).toBe('graph');
+		expect(props.isListViewPanel).toBe(false);
+		expect(props.filterConfigs).toStrictEqual({});
+	});
+
+	it('hides step interval / having and sets body-contains for List + logs', () => {
+		renderBuilder('signoz/ListPanel', TelemetrytypesSignalDTO.logs);
+
+		const props = lastQueryBuilderProps();
+		expect(props.panelType).toBe('list');
+		expect(props.isListViewPanel).toBe(true);
+		expect(props.filterConfigs).toStrictEqual({
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+		});
+	});
+
+	it('additionally hides limit for List + traces', () => {
+		renderBuilder('signoz/ListPanel', TelemetrytypesSignalDTO.traces);
+
+		const props = lastQueryBuilderProps();
+		expect(props.filterConfigs).toStrictEqual({
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			limit: { isHidden: true, isDisabled: true },
+			filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+		});
+	});
+});

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

@@ -71,10 +71,8 @@ function PreviewPane({
 			<div className={styles.container}>
 				<div className={styles.surface}>
 					<PanelHeader
-						name={panel.spec.display.name}
-						description={panel.spec.display.description}
 						panelId={panelId}
-						panelKind={panel.spec.plugin.kind}
+						panel={panel}
 						isFetching={isFetching}
 						error={error}
 						warning={data.response?.data?.warning}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/getSwitchedPluginSpec.test.ts

@@ -0,0 +1,98 @@
+import {
+	TelemetrytypesSignalDTO,
+	type DashboardtypesPanelSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+
+import { defaultColumnsForSignal } from '../ListColumnsEditor/selectFields';
+import { getSwitchedPluginSpec } from '../getSwitchedPluginSpec';
+
+jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
+	getPanelDefinition: jest.fn(),
+}));
+jest.mock('../ListColumnsEditor/selectFields', () => ({
+	defaultColumnsForSignal: jest.fn(),
+}));
+
+const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
+const mockDefaultColumnsForSignal =
+	defaultColumnsForSignal as unknown as jest.Mock;
+
+function specWith(pluginSpec: unknown): DashboardtypesPanelSpecDTO {
+	return {
+		display: { name: 'Panel' },
+		plugin: { kind: 'signoz/TablePanel', spec: pluginSpec },
+		queries: [],
+	} as unknown as DashboardtypesPanelSpecDTO;
+}
+
+describe('getSwitchedPluginSpec', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockDefaultColumnsForSignal.mockReturnValue([]);
+	});
+
+	it('carries only unit + decimalPrecision when the new kind has a formatting section', () => {
+		mockGetPanelDefinition.mockReturnValue({
+			sections: [{ kind: 'formatting', controls: { unit: true, decimals: true } }],
+		});
+		const old = specWith({
+			formatting: { unit: 'ms', decimalPrecision: 2, columnUnits: { A: 'bytes' } },
+			axes: { logScale: true },
+		});
+
+		const result = getSwitchedPluginSpec(
+			old,
+			'signoz/TimeSeriesPanel',
+			TelemetrytypesSignalDTO.logs,
+		);
+
+		expect(result.formatting).toStrictEqual({ unit: 'ms', decimalPrecision: 2 });
+		// Type-specific config from the old kind is dropped.
+		expect((result as { axes?: unknown }).axes).toBeUndefined();
+	});
+
+	it('does not carry formatting when the new kind has no formatting section', () => {
+		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
+		const old = specWith({ formatting: { unit: 'ms' } });
+
+		const result = getSwitchedPluginSpec(
+			old,
+			'signoz/ListPanel',
+			TelemetrytypesSignalDTO.logs,
+		);
+
+		expect(result.formatting).toBeUndefined();
+	});
+
+	it('seeds List columns from the signal when switching into a List', () => {
+		const columns = [{ name: 'body' }];
+		mockDefaultColumnsForSignal.mockReturnValue(columns);
+		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
+
+		const result = getSwitchedPluginSpec(
+			specWith({}),
+			'signoz/ListPanel',
+			TelemetrytypesSignalDTO.logs,
+		);
+
+		expect(mockDefaultColumnsForSignal).toHaveBeenCalledWith(
+			TelemetrytypesSignalDTO.logs,
+		);
+		expect(result.selectFields).toBe(columns);
+	});
+
+	it('includes the kind section defaults (e.g. legend position)', () => {
+		mockGetPanelDefinition.mockReturnValue({
+			sections: [{ kind: 'legend', controls: { position: true } }],
+		});
+
+		const result = getSwitchedPluginSpec(
+			specWith({}),
+			'signoz/PieChartPanel',
+			TelemetrytypesSignalDTO.logs,
+		);
+
+		expect(result.legend?.position).toBe('bottom');
+	});
+});

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

@@ -0,0 +1,67 @@
+import type {
+	DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import type { PanelFormattingSlice } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import {
+	buildDefaultPluginSpec,
+	type DefaultPluginSpec,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/buildDefaultPluginSpec';
+
+import { defaultColumnsForSignal } from './ListColumnsEditor/selectFields';
+
+/**
+ * Plugin spec produced on a first-time switch to a new kind. A partial cross-section
+ * of the per-kind spec union; the caller assigns it to `plugin.spec` (typed `unknown`)
+ * at the boundary.
+ */
+export interface SwitchedPluginSpec extends DefaultPluginSpec {
+	formatting?: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'>;
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+}
+
+/**
+ * Builds the plugin spec for a first-visit switch to `newKind`: the kind's declared
+ * section defaults (so the config pane opens populated, matching new-panel seeding) plus
+ * the only cross-kind config worth keeping — unit + decimal precision. Switching into a
+ * List seeds the current signal's default columns so the columns control isn't empty.
+ *
+ * Revisiting a kind restores its stashed spec instead, so this runs only on first visit.
+ */
+export function getSwitchedPluginSpec(
+	oldSpec: DashboardtypesPanelSpecDTO,
+	newKind: PanelKind,
+	signal: TelemetrytypesSignalDTO,
+): SwitchedPluginSpec {
+	const sections = getPanelDefinition(newKind)?.sections ?? [];
+	const result: SwitchedPluginSpec = buildDefaultPluginSpec(sections);
+
+	if (sections.some((section) => section.kind === 'formatting')) {
+		const oldFormatting = (
+			oldSpec.plugin.spec as {
+				formatting?: PanelFormattingSlice;
+			}
+		).formatting;
+		const carried: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'> = {
+			...(oldFormatting?.unit !== undefined && { unit: oldFormatting.unit }),
+			...(oldFormatting?.decimalPrecision !== undefined && {
+				decimalPrecision: oldFormatting.decimalPrecision,
+			}),
+		};
+		if (Object.keys(carried).length > 0) {
+			result.formatting = carried;
+		}
+	}
+
+	if (sections.some((section) => section.kind === 'columns')) {
+		const columns = defaultColumnsForSignal(signal);
+		if (columns.length > 0) {
+			result.selectFields = columns;
+		}
+	}
+
+	return result;
+}

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

@@ -0,0 +1,194 @@
+import { act, renderHook } from '@testing-library/react';
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { handleQueryChange } from 'container/NewWidget/utils';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { resolveQueryType } from '../../../Panels/capabilities';
+import { getBuilderQueries } from '../../../Panels/utils/getBuilderQueries';
+import { toPerses } from '../../../queryV5/persesQueryAdapters';
+import { getSwitchedPluginSpec } from '../../getSwitchedPluginSpec';
+import { usePanelTypeSwitch } from '../usePanelTypeSwitch';
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+jest.mock('container/NewWidget/utils', () => ({
+	handleQueryChange: jest.fn(),
+}));
+jest.mock('../../../Panels/capabilities', () => ({
+	resolveQueryType: jest.fn(),
+}));
+jest.mock('../../../queryV5/persesQueryAdapters', () => ({
+	toPerses: jest.fn(),
+}));
+jest.mock('../../getSwitchedPluginSpec', () => ({
+	getSwitchedPluginSpec: jest.fn(),
+}));
+jest.mock('../../../Panels/utils/getBuilderQueries', () => ({
+	getBuilderQueries: jest.fn(),
+}));
+
+const mockUseQueryBuilder = useQueryBuilder as unknown as jest.Mock;
+const mockHandleQueryChange = handleQueryChange as unknown as jest.Mock;
+const mockResolveQueryType = resolveQueryType as unknown as jest.Mock;
+const mockToPerses = toPerses as unknown as jest.Mock;
+const mockGetSwitchedPluginSpec = getSwitchedPluginSpec as unknown as jest.Mock;
+const mockGetBuilderQueries = getBuilderQueries as unknown as jest.Mock;
+
+// Opaque sentinels — the leaf utilities are mocked, so only identity matters.
+const TABLE_PLUGIN_SPEC = { table: true } as unknown;
+const TABLE_QUERIES = [{ id: 'table-q' }] as unknown as NonNullable<
+	DashboardtypesPanelSpecDTO['queries']
+>;
+const LIST_PLUGIN_SPEC = { list: true } as unknown;
+const LIST_QUERIES = [{ id: 'list-q' }] as unknown as NonNullable<
+	DashboardtypesPanelSpecDTO['queries']
+>;
+const TRANSFORMED = {
+	id: 'transformed',
+	queryType: 'builder',
+} as unknown as Query;
+const CONVERTED = [{ id: 'converted' }] as unknown as NonNullable<
+	DashboardtypesPanelSpecDTO['queries']
+>;
+const SWITCHED_SPEC = { switched: true } as unknown;
+
+function makeSpec(
+	kind: string,
+	pluginSpec: unknown,
+	queries: NonNullable<DashboardtypesPanelSpecDTO['queries']>,
+): DashboardtypesPanelSpecDTO {
+	return {
+		display: { name: 'Panel' },
+		plugin: { kind, spec: pluginSpec },
+		queries,
+	} as unknown as DashboardtypesPanelSpecDTO;
+}
+
+const tableSpec = makeSpec(
+	'signoz/TablePanel',
+	TABLE_PLUGIN_SPEC,
+	TABLE_QUERIES,
+);
+const listSpec = makeSpec('signoz/ListPanel', LIST_PLUGIN_SPEC, LIST_QUERIES);
+
+function builderState(currentQuery: Query): {
+	currentQuery: Query;
+	redirectWithQueryBuilderData: jest.Mock;
+} {
+	return { currentQuery, redirectWithQueryBuilderData: jest.fn() };
+}
+
+describe('usePanelTypeSwitch', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockHandleQueryChange.mockReturnValue(TRANSFORMED);
+		mockToPerses.mockReturnValue(CONVERTED);
+		mockGetSwitchedPluginSpec.mockReturnValue(SWITCHED_SPEC);
+		mockGetBuilderQueries.mockReturnValue([{ signal: 'logs' }]);
+		// The guard owns coercion (tested in capabilities.test.ts); here it always
+		// resolves to Query Builder so the coerced type flows into handleQueryChange.
+		mockResolveQueryType.mockReturnValue('builder');
+	});
+
+	it('does nothing when switching to the current kind', () => {
+		const setSpec = jest.fn();
+		const state = builderState({ id: 'q', queryType: 'builder' } as Query);
+		mockUseQueryBuilder.mockReturnValue(state);
+
+		const { result } = renderHook(() =>
+			usePanelTypeSwitch({
+				spec: tableSpec,
+				panelType: PANEL_TYPES.TABLE,
+				setSpec,
+			}),
+		);
+		act(() => result.current.onChangePanelKind('signoz/TablePanel'));
+
+		expect(setSpec).not.toHaveBeenCalled();
+		expect(state.redirectWithQueryBuilderData).not.toHaveBeenCalled();
+	});
+
+	it('on first visit: transforms the query and resets the spec to the new kind', () => {
+		const setSpec = jest.fn();
+		const tableQuery = { id: 'table-current', queryType: 'builder' } as Query;
+		const state = builderState(tableQuery);
+		mockUseQueryBuilder.mockReturnValue(state);
+
+		const { result } = renderHook(() =>
+			usePanelTypeSwitch({
+				spec: tableSpec,
+				panelType: PANEL_TYPES.TABLE,
+				setSpec,
+			}),
+		);
+		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
+
+		expect(setSpec).toHaveBeenCalledTimes(1);
+		const next = setSpec.mock.calls[0][0] as DashboardtypesPanelSpecDTO;
+		expect(next.plugin.kind).toBe('signoz/ListPanel');
+		expect(next.plugin.spec).toBe(SWITCHED_SPEC);
+		expect(next.queries).toBe(CONVERTED);
+		expect(state.redirectWithQueryBuilderData).toHaveBeenCalledWith(TRANSFORMED);
+	});
+
+	it('coerces the query type when the new kind disallows it (promql → List)', () => {
+		const setSpec = jest.fn();
+		const promQuery = { id: 'prom', queryType: 'promql' } as Query;
+		mockUseQueryBuilder.mockReturnValue(builderState(promQuery));
+
+		const { result } = renderHook(() =>
+			usePanelTypeSwitch({
+				spec: makeSpec('signoz/TimeSeriesPanel', {}, TABLE_QUERIES),
+				panelType: PANEL_TYPES.TIME_SERIES,
+				setSpec,
+			}),
+		);
+		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
+
+		// The hook asks the guard to resolve the active query type against the new kind…
+		expect(mockResolveQueryType).toHaveBeenCalledWith(
+			'signoz/ListPanel',
+			'promql',
+		);
+		// …and the resolved type ('builder') flows into the query rebuild.
+		const [, queryArg] = mockHandleQueryChange.mock.calls[0];
+		expect((queryArg as Query).queryType).toBe('builder');
+	});
+
+	it('restores the original kind verbatim on switch-back (reversibility)', () => {
+		const setSpec = jest.fn();
+		const tableQuery = { id: 'table-current', queryType: 'builder' } as Query;
+		const listQuery = { id: 'list-current', queryType: 'builder' } as Query;
+		let state = builderState(tableQuery);
+		mockUseQueryBuilder.mockImplementation(() => state);
+
+		const { result, rerender } = renderHook(
+			(props: { spec: DashboardtypesPanelSpecDTO; panelType: PANEL_TYPES }) =>
+				usePanelTypeSwitch({ ...props, setSpec }),
+			{ initialProps: { spec: tableSpec, panelType: PANEL_TYPES.TABLE } },
+		);
+
+		// Leave Table for List (stashes Table in its pristine state).
+		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
+
+		// Parent re-renders as a List panel; the builder now holds the List query.
+		state = builderState(listQuery);
+		rerender({ spec: listSpec, panelType: PANEL_TYPES.LIST });
+
+		// Switch back to Table → restored from the stash, not re-transformed.
+		act(() => result.current.onChangePanelKind('signoz/TablePanel'));
+
+		const restored = setSpec.mock.calls[
+			setSpec.mock.calls.length - 1
+		][0] as DashboardtypesPanelSpecDTO;
+		expect(restored.plugin.kind).toBe('signoz/TablePanel');
+		expect(restored.plugin.spec).toBe(TABLE_PLUGIN_SPEC);
+		expect(restored.queries).toBe(TABLE_QUERIES);
+		expect(state.redirectWithQueryBuilderData).toHaveBeenCalledWith(tableQuery);
+		// The restore path must not run the query transform again.
+		expect(mockHandleQueryChange).toHaveBeenCalledTimes(1);
+	});
+});

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

@@ -40,7 +40,7 @@ export function useLegendSeries(
 			getTimeSeriesResults(data?.response),
 			data.legendMap,
 		);
-		const builderQueries = getBuilderQueries(panel?.spec?.queries || []);
+		const builderQueries = getBuilderQueries(panel.spec.queries || []);
 
 		const byLabel = new Map<string, string>();
 		series.forEach((s) => {

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

@@ -0,0 +1,134 @@
+import { useCallback, useRef } from 'react';
+import type {
+	DashboardtypesPanelPluginDTO,
+	DashboardtypesPanelSpecDTO,
+	DashboardtypesQueryDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	handleQueryChange,
+	type PartialPanelTypes,
+} from 'container/NewWidget/utils';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { resolveQueryType } from '../../Panels/capabilities';
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from '../../Panels/types/panelKind';
+import { getBuilderQueries } from '../../Panels/utils/getBuilderQueries';
+import { toPerses } from '../../queryV5/persesQueryAdapters';
+import {
+	getSwitchedPluginSpec,
+	type SwitchedPluginSpec,
+} from '../getSwitchedPluginSpec';
+
+/** What a kind looks like when you leave it; restored verbatim if you return. */
+interface KindState {
+	pluginSpec: DashboardtypesPanelPluginDTO['spec'];
+	queries: DashboardtypesQueryDTO[] | null;
+	builderQuery: Query;
+}
+
+interface UsePanelTypeSwitchArgs {
+	spec: DashboardtypesPanelSpecDTO;
+	panelType: PANEL_TYPES;
+	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
+}
+
+interface UsePanelTypeSwitchApi {
+	/** Switch the panel to `newKind`, transforming/restoring its query + spec. */
+	onChangePanelKind: (newKind: PanelKind) => void;
+}
+
+/**
+ * Switches the edited panel's visualization kind. Mutating `plugin.kind` re-derives the
+ * renderer, config sections, query-builder tabs and request type for free; this hook adds
+ * the two things that don't: a per-kind session cache that makes switching reversible
+ * (`Table → List → Table` restores the original query + spec), and, on first visit to a
+ * kind, a query rebuild (`handleQueryChange`) + spec reset (`getSwitchedPluginSpec`).
+ */
+export function usePanelTypeSwitch({
+	spec,
+	panelType,
+	setSpec,
+}: UsePanelTypeSwitchArgs): UsePanelTypeSwitchApi {
+	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
+
+	const cacheRef = useRef<Map<PanelKind, KindState>>(new Map());
+
+	// Latest spec/query/type, read inside the stable callback without re-subscribing.
+	const specRef = useRef(spec);
+	specRef.current = spec;
+	const queryRef = useRef(currentQuery);
+	queryRef.current = currentQuery;
+	const panelTypeRef = useRef(panelType);
+	panelTypeRef.current = panelType;
+
+	const onChangePanelKind = useCallback(
+		(newKind: PanelKind): void => {
+			const currentSpec = specRef.current;
+			const oldKind = currentSpec.plugin.kind as PanelKind;
+			if (newKind === oldKind) {
+				return;
+			}
+			const query = queryRef.current;
+
+			cacheRef.current.set(oldKind, {
+				pluginSpec: currentSpec.plugin.spec,
+				queries: currentSpec.queries ?? null,
+				builderQuery: query,
+			});
+
+			const newPanelType = PANEL_KIND_TO_PANEL_TYPE[newKind];
+
+			// Only `plugin` needs a cast: it's a discriminated union over `kind`, and a
+			// dynamically-chosen kind can't be correlated with its spec statically (as in
+			// `createDefaultPanel`). The surrounding spec stays fully typed.
+			const buildSpec = (
+				pluginSpec: DashboardtypesPanelPluginDTO['spec'] | SwitchedPluginSpec,
+				queries: DashboardtypesQueryDTO[] | null,
+			): DashboardtypesPanelSpecDTO => ({
+				...currentSpec,
+				plugin: {
+					...currentSpec.plugin,
+					kind: newKind,
+					spec: pluginSpec,
+				} as DashboardtypesPanelPluginDTO,
+				queries,
+			});
+
+			// Revisit → restore the stash verbatim (the reversibility path).
+			const cached = cacheRef.current.get(newKind);
+			if (cached) {
+				setSpec(buildSpec(cached.pluginSpec, cached.queries));
+				redirectWithQueryBuilderData(cached.builderQuery);
+				return;
+			}
+
+			// First visit → coerce the query type if the new kind disallows it, then
+			// rebuild the builder query for the new type.
+			const queryType = resolveQueryType(newKind, query.queryType);
+			const transformed = handleQueryChange(
+				newPanelType as keyof PartialPanelTypes,
+				{ ...query, queryType },
+				panelTypeRef.current,
+			);
+			const signal = getBuilderQueries(currentSpec.queries || [])[0]
+				?.signal as TelemetrytypesSignalDTO;
+
+			setSpec(
+				buildSpec(
+					getSwitchedPluginSpec(currentSpec, newKind, signal),
+					toPerses(transformed, newPanelType),
+				),
+			);
+			redirectWithQueryBuilderData(transformed);
+		},
+		[setSpec, redirectWithQueryBuilderData],
+	);
+
+	return { onChangePanelKind };
+}

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

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import {
 	ResizableHandle,
 	ResizablePanel,
@@ -11,6 +11,7 @@ import {
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import {
 	PANEL_KIND_TO_PANEL_TYPE,
@@ -18,6 +19,7 @@ import {
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
 
+import { getExecStats } from '../queryV5/v5ResponseData';
 import { usePanelInteractions } from '../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions';
 import ConfigPane from './ConfigPane/ConfigPane';
 import Header from './Header/Header';
@@ -29,6 +31,7 @@ import { usePanelQuery } from '../hooks/usePanelQuery';
 import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
 import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
+import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
 import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
 import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
 import { useTableColumns } from './hooks/useTableColumns';
@@ -65,6 +68,10 @@ function PanelEditorContainer({
 	onSaved,
 }: PanelEditorContainerProps): JSX.Element {
 	const { draft, spec, setSpec, isSpecDirty } = usePanelEditorDraft(panel);
+	// 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,
@@ -113,6 +120,9 @@ function PanelEditorContainer({
 		signal: defaultSignal,
 	});
 
+	// Switch the panel's visualization kind in place (reversible per session).
+	const { onChangePanelKind } = usePanelTypeSwitch({ spec, panelType, setSpec });
+
 	// Spec and query dirtiness are tracked independently so query re-serialization
 	// never false-dirties. A new panel is always savable (you're creating it).
 	const isDirty = isNew || isSpecDirty || isQueryDirty;
@@ -146,6 +156,14 @@ function PanelEditorContainer({
 	const legendSeries = useLegendSeries(draft, data);
 	const tableColumns = useTableColumns(draft, data);
 
+	// 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 onSave = useCallback(async (): Promise<void> => {
 		try {
 			// Bake the live query into the spec so unstaged edits are saved too.
@@ -197,7 +215,8 @@ function PanelEditorContainer({
 							<ResizableHandle withHandle className={styles.handle} />
 							<ResizablePanel minSize="35%" maxSize="45%" defaultSize="40%">
 								<PanelEditorQueryBuilder
-									panelType={panelType}
+									panelKind={fullKind}
+									signal={listSignal}
 									isLoadingQueries={isFetching}
 									onStageRunQuery={runQuery}
 									onCancelQuery={cancelQuery}
@@ -223,11 +242,16 @@ function PanelEditorContainer({
 					className={styles.right}
 				>
 					<ConfigPane
-						panelKind={draft.spec.plugin.kind}
+						panel={draft}
+						panelId={panelId}
+						// panelKind={draft.spec.plugin.kind}
 						spec={spec}
 						onChangeSpec={setSpec}
+						onChangePanelKind={onChangePanelKind}
+						queryType={currentQuery.queryType}
 						legendSeries={legendSeries}
 						tableColumns={tableColumns}
+						stepInterval={stepInterval}
 					/>
 				</ResizablePanel>
 			</ResizablePanelGroup>

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

@@ -0,0 +1,175 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { OPERATORS } from 'constants/queryBuilder';
+import { EQueryType } from 'types/common/dashboard';
+
+import {
+	getHiddenQueryBuilderFields,
+	getSupportedQueryTypes,
+	getSupportedSignals,
+	isPanelCombinationValid,
+	isQueryTypeSupported,
+	isSignalSupported,
+	resolveQueryType,
+} from '../capabilities';
+import type { PanelKind } from '../types/panelKind';
+
+const { QUERY_BUILDER, CLICKHOUSE, PROM } = EQueryType;
+const { logs, traces, metrics } = TelemetrytypesSignalDTO;
+
+const EXPECTED_QUERY_TYPES: Record<PanelKind, EQueryType[]> = {
+	'signoz/TimeSeriesPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
+	'signoz/BarChartPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
+	'signoz/NumberPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
+	'signoz/HistogramPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
+	'signoz/PieChartPanel': [QUERY_BUILDER, CLICKHOUSE],
+	'signoz/TablePanel': [QUERY_BUILDER, CLICKHOUSE],
+	'signoz/ListPanel': [QUERY_BUILDER],
+};
+
+const EXPECTED_SIGNALS: Record<PanelKind, TelemetrytypesSignalDTO[]> = {
+	'signoz/TimeSeriesPanel': [metrics, logs, traces],
+	'signoz/BarChartPanel': [metrics, logs, traces],
+	'signoz/NumberPanel': [metrics, logs, traces],
+	'signoz/HistogramPanel': [metrics, logs, traces],
+	'signoz/PieChartPanel': [metrics, logs, traces],
+	'signoz/TablePanel': [metrics, logs, traces],
+	// List renders raw rows; metrics produce no row data.
+	'signoz/ListPanel': [logs, traces],
+};
+
+const ALL_KINDS = Object.keys(EXPECTED_QUERY_TYPES) as PanelKind[];
+
+describe('panel capabilities guard', () => {
+	describe('query type support', () => {
+		it.each(ALL_KINDS)('declares the expected query types for %s', (kind) => {
+			expect(getSupportedQueryTypes(kind)).toStrictEqual(
+				EXPECTED_QUERY_TYPES[kind],
+			);
+		});
+
+		it('Table and Pie do not support PromQL', () => {
+			expect(isQueryTypeSupported('signoz/TablePanel', PROM)).toBe(false);
+			expect(isQueryTypeSupported('signoz/PieChartPanel', PROM)).toBe(false);
+		});
+
+		it('List only supports Query Builder', () => {
+			expect(isQueryTypeSupported('signoz/ListPanel', QUERY_BUILDER)).toBe(true);
+			expect(isQueryTypeSupported('signoz/ListPanel', CLICKHOUSE)).toBe(false);
+			expect(isQueryTypeSupported('signoz/ListPanel', PROM)).toBe(false);
+		});
+	});
+
+	describe('signal support', () => {
+		it.each(ALL_KINDS)('declares the expected signals for %s', (kind) => {
+			expect(getSupportedSignals(kind)).toStrictEqual(EXPECTED_SIGNALS[kind]);
+		});
+
+		it('List excludes metrics', () => {
+			expect(isSignalSupported('signoz/ListPanel', metrics)).toBe(false);
+			expect(isSignalSupported('signoz/ListPanel', logs)).toBe(true);
+			expect(isSignalSupported('signoz/ListPanel', traces)).toBe(true);
+		});
+	});
+
+	describe('isPanelCombinationValid', () => {
+		it('accepts a supported triad', () => {
+			expect(
+				isPanelCombinationValid({
+					kind: 'signoz/TimeSeriesPanel',
+					queryType: PROM,
+				}),
+			).toBe(true);
+			expect(
+				isPanelCombinationValid({
+					kind: 'signoz/ListPanel',
+					queryType: QUERY_BUILDER,
+					signal: logs,
+				}),
+			).toBe(true);
+		});
+
+		it('rejects an unsupported query type', () => {
+			expect(
+				isPanelCombinationValid({ kind: 'signoz/ListPanel', queryType: PROM }),
+			).toBe(false);
+			expect(
+				isPanelCombinationValid({ kind: 'signoz/TablePanel', queryType: PROM }),
+			).toBe(false);
+		});
+
+		it('rejects an unsupported signal when one is given', () => {
+			expect(
+				isPanelCombinationValid({
+					kind: 'signoz/ListPanel',
+					queryType: QUERY_BUILDER,
+					signal: metrics,
+				}),
+			).toBe(false);
+		});
+
+		it('ignores signal when none is given (ClickHouse/PromQL have no datasource)', () => {
+			expect(
+				isPanelCombinationValid({
+					kind: 'signoz/ListPanel',
+					queryType: QUERY_BUILDER,
+				}),
+			).toBe(true);
+		});
+	});
+
+	describe('resolveQueryType', () => {
+		it('keeps a supported query type', () => {
+			expect(resolveQueryType('signoz/TimeSeriesPanel', PROM)).toBe(PROM);
+			expect(resolveQueryType('signoz/ListPanel', QUERY_BUILDER)).toBe(
+				QUERY_BUILDER,
+			);
+		});
+
+		it('coerces an unsupported query type to the first supported one', () => {
+			// PromQL → List has no PromQL, falls back to its first (and only) type.
+			expect(resolveQueryType('signoz/ListPanel', PROM)).toBe(QUERY_BUILDER);
+			expect(resolveQueryType('signoz/TablePanel', PROM)).toBe(QUERY_BUILDER);
+		});
+	});
+
+	describe('getHiddenQueryBuilderFields', () => {
+		it('returns {} for kinds that declare no field rules', () => {
+			expect(getHiddenQueryBuilderFields('signoz/TimeSeriesPanel')).toStrictEqual(
+				{},
+			);
+			expect(getHiddenQueryBuilderFields('signoz/TablePanel', logs)).toStrictEqual(
+				{},
+			);
+		});
+
+		// Mirrors QueryBuilderV2's internal listViewLogFilterConfigs — the guard is the
+		// single source of truth for these values.
+		it('hides step interval / having and sets body-contains for List + logs', () => {
+			expect(getHiddenQueryBuilderFields('signoz/ListPanel', logs)).toStrictEqual({
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+			});
+		});
+
+		// Mirrors listViewTracesFilterConfigs — traces additionally hide `limit`.
+		it('additionally hides limit for List + traces', () => {
+			expect(
+				getHiddenQueryBuilderFields('signoz/ListPanel', traces),
+			).toStrictEqual({
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				limit: { isHidden: true, isDisabled: true },
+				filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+			});
+		});
+
+		it('falls back to the default rule when no signal is given', () => {
+			expect(getHiddenQueryBuilderFields('signoz/ListPanel')).toStrictEqual({
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+			});
+		});
+	});
+});

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

@@ -0,0 +1,94 @@
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
+
+import { getPanelDefinition } from './registry';
+import type { FilterConfigsPartial } from './types/panelCapabilities';
+import type { PanelKind } from './types/panelKind';
+
+/**
+ * The single deterministic guard for V2 dashboards. Every "what works with what"
+ * question — panel kind × query type × signal, and which query-builder fields a kind
+ * hides — is answered here by reading each kind's declared capabilities from the panel
+ * registry. Adding a new kind means declaring its capabilities once in its definition;
+ * these functions then cover it automatically. Pure and side-effect free.
+ */
+
+/** Signals (datasources) a kind can visualize. */
+export function getSupportedSignals(
+	kind: PanelKind,
+): TelemetrytypesSignalDTO[] {
+	return getPanelDefinition(kind).supportedSignals;
+}
+
+export function isSignalSupported(
+	kind: PanelKind,
+	signal: TelemetrytypesSignalDTO,
+): boolean {
+	return getSupportedSignals(kind).includes(signal);
+}
+
+/** Query languages a kind supports (Query Builder / ClickHouse / PromQL). */
+export function getSupportedQueryTypes(kind: PanelKind): EQueryType[] {
+	return getPanelDefinition(kind).supportedQueryTypes;
+}
+
+export function isQueryTypeSupported(
+	kind: PanelKind,
+	queryType: EQueryType,
+): boolean {
+	return getSupportedQueryTypes(kind).includes(queryType);
+}
+
+/**
+ * Master guard: is this panel kind renderable with this query type (and, when a
+ * datasource is known, this signal)? Signal is only meaningful in builder mode —
+ * ClickHouse/PromQL queries have no datasource — so it's validated only when given.
+ */
+export function isPanelCombinationValid({
+	kind,
+	queryType,
+	signal,
+}: {
+	kind: PanelKind;
+	queryType: EQueryType;
+	signal?: TelemetrytypesSignalDTO;
+}): boolean {
+	if (!isQueryTypeSupported(kind, queryType)) {
+		return false;
+	}
+	if (signal !== undefined && !isSignalSupported(kind, signal)) {
+		return false;
+	}
+	return true;
+}
+
+/**
+ * The query type to use for a kind given a `preferred` one: keep it if the kind
+ * supports it, otherwise fall back to the kind's first supported type. Used when
+ * switching panel kinds to coerce an unsupported active query type (e.g. PromQL → a
+ * List panel coerces to Query Builder).
+ */
+export function resolveQueryType(
+	kind: PanelKind,
+	preferred: EQueryType,
+): EQueryType {
+	const supported = getSupportedQueryTypes(kind);
+	return supported.includes(preferred) ? preferred : supported[0];
+}
+
+/**
+ * Query-builder field visibility for a kind + signal: the kind's `default` rule with
+ * its per-signal overrides merged over it (signal wins). `{}` when the kind declares
+ * nothing, i.e. the builder shows every field.
+ */
+export function getHiddenQueryBuilderFields(
+	kind: PanelKind,
+	signal?: TelemetrytypesSignalDTO,
+): FilterConfigsPartial {
+	const rule = getPanelDefinition(kind).queryBuilderFields;
+	if (!rule) {
+		return {};
+	}
+	const perSignal = signal ? rule[signal] : undefined;
+	return { ...rule.default, ...perSignal };
+}

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

@@ -2,6 +2,7 @@ import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 	kind: 'signoz/BarChartPanel',
@@ -13,6 +14,11 @@ export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 		TelemetrytypesSignalDTO.logs,
 		TelemetrytypesSignalDTO.traces,
 	],
+	supportedQueryTypes: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
 	actions: {
 		view: true,
 		edit: true,

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

@@ -3,7 +3,10 @@ import type { SectionConfig } from '../../types/sections';
 // Bar stacking lives in `visualization.stackedBarChart`, so it's a `visualization`
 // control, not `chartAppearance`. fillSpans is TimeSeries-only, so Bar omits it (V1 parity).
 export const sections: SectionConfig[] = [
-	{ kind: 'visualization', controls: { timePreference: true, stacking: true } },
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true, timePreference: true, stacking: true },
+	},
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'axes', controls: { minMax: true, logScale: true } },
 	{ kind: 'legend', controls: { position: true } },

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

@@ -2,6 +2,7 @@ import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 	kind: 'signoz/HistogramPanel',
@@ -13,6 +14,11 @@ export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 		TelemetrytypesSignalDTO.logs,
 		TelemetrytypesSignalDTO.traces,
 	],
+	supportedQueryTypes: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
 	actions: {
 		view: true,
 		edit: true,

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

@@ -3,6 +3,10 @@ import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services
 import type { SectionConfig } from '../../types/sections';
 
 export const sections: SectionConfig[] = [
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true },
+	},
 	{
 		kind: 'legend',
 		controls: { position: true },

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

@@ -2,6 +2,8 @@ import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { OPERATORS } from 'constants/queryBuilder';
+import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/ListPanel'> = {
 	kind: 'signoz/ListPanel',
@@ -12,6 +14,21 @@ export const definition: PanelDefinition<'signoz/ListPanel'> = {
 		TelemetrytypesSignalDTO.logs,
 		TelemetrytypesSignalDTO.traces,
 	],
+	// Raw rows have no aggregation, so step interval / having never apply, and the
+	// Where clause searches the log/span body via `body CONTAINS`. Traces additionally
+	// hide `limit` (the server paginates raw spans). Mirrors QueryBuilderV2's internal
+	// list configs — the capabilities guard is the single source for both.
+	supportedQueryTypes: [EQueryType.QUERY_BUILDER],
+	queryBuilderFields: {
+		default: {
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+		},
+		[TelemetrytypesSignalDTO.traces]: {
+			limit: { isHidden: true, isDisabled: true },
+		},
+	},
 	sections,
 	actions: {
 		view: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/sections.ts

@@ -1,3 +1,8 @@
 import type { SectionConfig } from '../../types/sections';
 
-export const sections: SectionConfig[] = [];
+export const sections: SectionConfig[] = [
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true },
+	},
+];

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

@@ -2,6 +2,7 @@ import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 	kind: 'signoz/NumberPanel',
@@ -13,6 +14,11 @@ export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 		TelemetrytypesSignalDTO.logs,
 		TelemetrytypesSignalDTO.traces,
 	],
+	supportedQueryTypes: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/sections.ts

@@ -1,7 +1,10 @@
 import type { SectionConfig } from '../../types/sections';
 
 export const sections: SectionConfig[] = [
-	{ kind: 'visualization', controls: { timePreference: true } },
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true, timePreference: true },
+	},
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'thresholds', controls: { variant: 'comparison' } },
 	{ kind: 'contextLinks' },

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

@@ -2,6 +2,7 @@ import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 	kind: 'signoz/PieChartPanel',
@@ -13,6 +14,7 @@ export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 		TelemetrytypesSignalDTO.logs,
 		TelemetrytypesSignalDTO.traces,
 	],
+	supportedQueryTypes: [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
 	actions: {
 		view: true,
 		edit: true,

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

@@ -3,7 +3,10 @@ import type { SectionConfig } from '../../types/sections';
 // Pie has no axes, thresholds, or stacking — just value formatting and a legend.
 // Legend `colors` is omitted: the pie legend is always interactive swatches.
 export const sections: SectionConfig[] = [
-	{ kind: 'visualization', controls: { timePreference: true } },
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true, timePreference: true },
+	},
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'legend', controls: { position: true } },
 	{ kind: 'contextLinks' },

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

@@ -2,6 +2,7 @@ import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/TablePanel'> = {
 	kind: 'signoz/TablePanel',
@@ -13,6 +14,7 @@ export const definition: PanelDefinition<'signoz/TablePanel'> = {
 		TelemetrytypesSignalDTO.logs,
 		TelemetrytypesSignalDTO.traces,
 	],
+	supportedQueryTypes: [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
 	// Tables carry tabular data worth exporting (V1 parity: download is table-only).
 	actions: {
 		view: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/sections.ts

@@ -4,7 +4,10 @@ import type { SectionConfig } from '../../types/sections';
 // single column set). It exposes the per-panel time scope, formatting (decimals +
 // per-column units), per-column thresholds, and context links.
 export const sections: SectionConfig[] = [
-	{ kind: 'visualization', controls: { timePreference: true } },
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true, timePreference: true },
+	},
 	{ kind: 'formatting', controls: { decimals: true, columnUnits: true } },
 	{ kind: 'thresholds', controls: { variant: 'table' } },
 	{ kind: 'contextLinks' },

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

@@ -2,6 +2,7 @@ import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
 	kind: 'signoz/TimeSeriesPanel',
@@ -13,6 +14,11 @@ export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
 		TelemetrytypesSignalDTO.logs,
 		TelemetrytypesSignalDTO.traces,
 	],
+	supportedQueryTypes: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
 	actions: {
 		view: true,
 		edit: true,

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

@@ -1,7 +1,10 @@
 import type { SectionConfig } from '../../types/sections';
 
 export const sections: SectionConfig[] = [
-	{ kind: 'visualization', controls: { timePreference: true, fillSpans: true } },
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true, timePreference: true, fillSpans: true },
+	},
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'axes', controls: { minMax: true, logScale: true } },
 	{ kind: 'legend', controls: { position: true, colors: true } },

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

@@ -0,0 +1,20 @@
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+
+/**
+ * Query-builder field-visibility config a panel kind can declare, mirroring the
+ * shape `QueryBuilderV2` consumes via its `filterConfigs` prop. Derived from that
+ * prop type (the underlying `FilterConfigs` isn't exported) so the two never drift.
+ */
+export type FilterConfigsPartial = NonNullable<
+	QueryBuilderProps['filterConfigs']
+>;
+
+/**
+ * Per-signal query-builder field rules for a panel kind. `default` applies to every
+ * signal; a per-signal entry is merged over it (signal wins). The capabilities guard
+ * resolves this into a single `FilterConfigsPartial` via `getHiddenQueryBuilderFields`.
+ */
+export type QueryBuilderFieldRule = {
+	default?: FilterConfigsPartial;
+} & Partial<Record<TelemetrytypesSignalDTO, FilterConfigsPartial>>;

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

@@ -1,9 +1,11 @@
 import type { ComponentType } from 'react';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { EQueryType } from 'types/common/dashboard';
 
 import type { SectionConfig } from './sections';
 import type { AnyPanelInteractionProps } from './interactions';
 import type { PanelKind } from './panelKind';
+import type { QueryBuilderFieldRule } from './panelCapabilities';
 import type { BaseRendererProps, PanelRendererProps } from './rendererProps';
 
 /**
@@ -35,7 +37,12 @@ export interface PanelDefinition<K extends PanelKind = PanelKind> {
 	displayName: string;
 	Renderer: ComponentType<PanelRendererProps<K>>;
 	sections: SectionConfig[];
+	/** Signals (datasources) this kind can visualize. */
 	supportedSignals: TelemetrytypesSignalDTO[];
+	/** Query languages this kind supports (Query Builder / ClickHouse / PromQL). */
+	supportedQueryTypes: EQueryType[];
+	/** Query-builder fields this kind hides/disables, optionally per signal. */
+	queryBuilderFields?: QueryBuilderFieldRule;
 	actions: PanelActionCapabilities;
 }
 

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

@@ -89,8 +89,11 @@ export interface SectionControls {
 		spanGaps?: boolean;
 	};
 	buckets: { count?: boolean; width?: boolean; mergeQueries?: boolean };
-	// stacking → stackedBarChart (Bar); fillSpans → fill gaps with 0 (TimeSeries).
+	// switchPanelKind → the visualization-type switcher (every kind, so you can switch
+	// away from any panel); stacking → stackedBarChart (Bar); fillSpans → fill gaps with
+	// 0 (TimeSeries).
 	visualization: {
+		switchPanelKind: boolean;
 		timePreference?: boolean;
 		stacking?: boolean;
 		fillSpans?: boolean;
@@ -128,7 +131,7 @@ export type SectionConfig =
 // Per-section title + sidebar icon. Pure data; the editor component + spec lens
 // live in the ConfigPane section registry.
 export const SECTION_METADATA = {
-	formatting: { title: 'Formatting', icon: Hash },
+	formatting: { title: 'Formatting & Units', icon: Hash },
 	axes: { title: 'Axes', icon: Ruler },
 	legend: { title: 'Legend', icon: Layers },
 	chartAppearance: { title: 'Chart appearance', icon: Palette },

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

@@ -0,0 +1,39 @@
+import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { resolveSignal } from '../getBuilderQueries';
+
+function builderQuery(signal: string): DashboardtypesQueryDTO {
+	return {
+		spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { signal } } },
+	} as unknown as DashboardtypesQueryDTO;
+}
+
+const promqlQuery = {
+	spec: { plugin: { kind: 'signoz/PromQuery', spec: { query: 'up' } } },
+} as unknown as DashboardtypesQueryDTO;
+
+describe('resolveSignal', () => {
+	const DEFAULT = TelemetrytypesSignalDTO.metrics;
+
+	it("uses the first builder query's signal when present", () => {
+		expect(
+			resolveSignal([builderQuery('logs')], DEFAULT),
+		).toBe('logs');
+	});
+
+	it("prefers the builder signal over the default", () => {
+		expect(resolveSignal([builderQuery('traces')], DEFAULT)).toBe(
+			'traces',
+		);
+	});
+
+	it('falls back to the default signal when there are no queries (new panel)', () => {
+		expect(resolveSignal([], DEFAULT)).toBe('metrics');
+		expect(resolveSignal(null, DEFAULT)).toBe('metrics');
+	});
+
+	it('stays undefined when queries exist but none are builder queries (PromQL/ClickHouse)', () => {
+		expect(resolveSignal([promqlQuery], DEFAULT)).toBeUndefined();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/__tests__/resolvers.test.ts

@@ -0,0 +1,22 @@
+import { resolveSpanGaps } from '../resolvers';
+
+describe('resolveSpanGaps', () => {
+	it('spans all gaps (true) when unset', () => {
+		expect(resolveSpanGaps(undefined)).toBe(true);
+		expect(resolveSpanGaps('')).toBe(true);
+	});
+
+	it('parses a duration string into seconds', () => {
+		expect(resolveSpanGaps('5s')).toBe(5);
+		expect(resolveSpanGaps('10m')).toBe(600);
+		expect(resolveSpanGaps('1h')).toBe(3600);
+	});
+
+	it('tolerates a bare seconds number (back-compat)', () => {
+		expect(resolveSpanGaps('600')).toBe(600);
+	});
+
+	it('falls back to true for unparseable input', () => {
+		expect(resolveSpanGaps('abc')).toBe(true);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/resolvers.ts

@@ -1,3 +1,4 @@
+import { rangeUtil } from '@grafana/data';
 import {
 	DashboardtypesLegendPositionDTO,
 	DashboardtypesPrecisionOptionDTO,
@@ -38,9 +39,10 @@ export function resolveDecimalPrecision(
 }
 
 /**
- * `spec.chartAppearance.spanGaps.fillLessThan` is a stringified number on the
- * wire. Empty/missing → span all gaps (default); numeric → forward the threshold
- * so uPlot only bridges short runs of nulls.
+ * `spec.chartAppearance.spanGaps.fillLessThan` is a duration string on the wire
+ * ("10m", "5s"). Empty/missing → span all gaps (default); otherwise forward the
+ * threshold in seconds so uPlot only bridges short runs of nulls. Tolerates a
+ * bare seconds number for back-compat.
  */
 export function resolveSpanGaps(
 	fillLessThan: string | undefined,
@@ -48,8 +50,10 @@ export function resolveSpanGaps(
 	if (!fillLessThan) {
 		return true;
 	}
-	const parsed = Number(fillLessThan);
-	return Number.isFinite(parsed) ? parsed : true;
+	const seconds = rangeUtil.isValidTimeSpan(fillLessThan)
+		? rangeUtil.intervalToSeconds(fillLessThan)
+		: Number(fillLessThan);
+	return Number.isFinite(seconds) && seconds > 0 ? seconds : true;
 }
 
 /** Legend position; missing/unknown falls back to `BOTTOM` (chart default, V1 parity). */

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries.ts

@@ -1,4 +1,7 @@
-import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesQueryDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import type { BuilderQuery } from 'types/api/v5/queryRange';
 
 /**
@@ -33,3 +36,21 @@ export function getBuilderQueries(
 	});
 	return flattened;
 }
+
+/**
+ * Datasource signal scoping panel-type compatibility (List needs logs/traces, not
+ * metrics): the builder query's signal if present; else `defaultSignal` for a new
+ * panel (queries empty until edited); else undefined for PromQL/ClickHouse.
+ */
+export function resolveSignal(
+	queries: DashboardtypesQueryDTO[] | null,
+	defaultSignal: TelemetrytypesSignalDTO,
+): TelemetrytypesSignalDTO | undefined {
+	const builderSignal = getBuilderQueries(queries ?? [])[0]?.signal as
+		| TelemetrytypesSignalDTO
+		| undefined;
+	if (builderSignal) {
+		return builderSignal;
+	}
+	return queries?.length ? undefined : defaultSignal;
+}

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

@@ -41,10 +41,6 @@ function Panel({
 	isVisible,
 	panelActions,
 }: PanelProps): JSX.Element {
-	const name = panel.spec.display.name;
-	const description = panel.spec.display?.description;
-	const fullKind = panel.spec.plugin.kind;
-
 	// A per-panel time preference is surfaced as a header pill. `visualization` is
 	// common to every plugin-spec variant — localized cast reads it without
 	// narrowing on kind.
@@ -55,7 +51,8 @@ function Panel({
 	)?.visualization?.timePreference;
 	const timeLabel = panelTimePreferenceLabel(timePreference);
 
-	const panelDefinition = getPanelDefinition(fullKind);
+	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).
@@ -77,10 +74,8 @@ function Panel({
 			data-panel-visible={isVisible ? 'true' : 'false'}
 		>
 			<PanelHeader
-				name={name}
-				description={description}
 				panelId={panelId}
-				panelKind={fullKind}
+				panel={panel}
 				isFetching={isFetching}
 				error={error}
 				warning={data.response?.data?.warning}

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

@@ -1,17 +1,17 @@
 import { EllipsisVertical } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 
 import ConfirmDeleteDialog from '../../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import type { PanelActionsConfig } from '../Panel';
 import { usePanelActionItems } from './usePanelActionItems';
 import styles from './PanelActionsMenu.module.scss';
-import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 interface PanelActionsMenuProps {
 	panelId: string;
-	/** Full plugin kind (e.g. `signoz/TimeSeriesPanel`);*/
-	panelKind: PanelKind;
+	/** The panel itself — its query seeds "Create Alerts". */
+	panel: DashboardtypesPanelDTO;
 	/** Layout context for move/delete — absent outside editable sectioned mode. */
 	panelActions?: PanelActionsConfig;
 }
@@ -23,12 +23,12 @@ interface PanelActionsMenuProps {
  */
 function PanelActionsMenu({
 	panelId,
-	panelKind,
+	panel,
 	panelActions,
 }: PanelActionsMenuProps): JSX.Element | null {
 	const { items, deleteConfirm } = usePanelActionItems({
 		panelId,
-		panelKind,
+		panel,
 		panelActions,
 	});
 

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

@@ -1,10 +1,10 @@
 import { act, renderHook } from '@testing-library/react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import type { ROLES } from 'types/roles';
 
 import type { DashboardSection } from '../../../../utils';
 import { useDashboardStore } from '../../../../store/useDashboardStore';
 import { usePanelActionItems } from '../usePanelActionItems';
-import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 const mockOpenEditor = jest.fn();
 jest.mock(
@@ -29,6 +29,11 @@ jest.mock('../../hooks/useClonePanel', () => ({
 	useClonePanel: (): jest.Mock => mockClonePanel,
 }));
 
+const mockCreateAlert = jest.fn();
+jest.mock('../../hooks/useCreateAlertFromPanel', () => ({
+	useCreateAlertFromPanel: (): jest.Mock => mockCreateAlert,
+}));
+
 // Role is the only thing read off the app context; useComponentPermission runs
 // for real so the tests exercise the actual role → permission mapping.
 let mockRole: ROLES = 'ADMIN';
@@ -52,10 +57,23 @@ function section(
 }
 
 const TWO_TITLED_SECTIONS = [section(0, 'Overview'), section(1, 'Latency')];
+// Index 0 is the untitled root (free-flow) section; index 1 is a titled section.
+const TITLED_WITH_ROOT = [section(0, undefined), section(1, 'Latency')];
+
+// Minimal panel — only its presence gates "Create Alerts"; the query→URL
+// translation it drives is covered by buildCreateAlertUrl's own tests.
+const mockPanel = {
+	kind: 'Panel',
+	spec: {
+		display: { name: 'CPU' },
+		plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+		queries: [],
+	},
+} as unknown as DashboardtypesPanelDTO;
 
 const baseArgs = {
 	panelId: 'panel-1',
-	panelKind: 'signoz/TimeSeriesPanel' as PanelKind,
+	panel: mockPanel,
 	panelActions: { currentLayoutIndex: 0, sections: TWO_TITLED_SECTIONS },
 };
 
@@ -113,29 +131,18 @@ describe('usePanelActionItems', () => {
 		]);
 	});
 
-	it('unknown panel kind hides all kind-gated actions (incl. clone), keeping only move/delete', () => {
-		const { result } = renderHook(() =>
-			// A kind with no registered definition — exercises the "unsupported kind"
-			// branch. Clone is kind-gated (needs the kind to declare actions.clone),
-			// so it drops too; only the kind-agnostic layout actions remain.
-			usePanelActionItems({
-				...baseArgs,
-				panelKind: 'signoz/UnsupportedPanel' as PanelKind,
-			}),
-		);
-		expect(itemKeys(result.current)).toStrictEqual([
-			'move',
-			'divider',
-			'delete-panel',
-		]);
-	});
-
-	it('read-only dashboard keeps only View (V1 parity)', () => {
+	it('read-only dashboard keeps View and Create Alerts (V1 parity: both survive a lock)', () => {
 		useDashboardStore.setState({ isEditable: false });
 		const { result } = renderHook(() =>
 			usePanelActionItems({ ...baseArgs, panelActions: undefined }),
 		);
-		expect(itemKeys(result.current)).toStrictEqual(['view-panel']);
+		// Create Alerts opens a new tab and never mutates the dashboard, so it
+		// isn't gated on edit access — matching V1's locked-dashboard menu.
+		expect(itemKeys(result.current)).toStrictEqual([
+			'view-panel',
+			'divider',
+			'create-alert',
+		]);
 	});
 
 	it('move is disabled when there is no other titled section to move to', () => {
@@ -177,6 +184,49 @@ describe('usePanelActionItems', () => {
 		});
 	});
 
+	it('offers "Move out of section" for a panel in a titled section when an untitled root exists', () => {
+		const { result } = renderHook(() =>
+			usePanelActionItems({
+				...baseArgs,
+				panelActions: { currentLayoutIndex: 1, sections: TITLED_WITH_ROOT },
+			}),
+		);
+		expect(itemKeys(result.current)).toContain('move-to-root');
+	});
+
+	it('"Move out of section" moves the panel to the untitled root section', () => {
+		const { result } = renderHook(() =>
+			usePanelActionItems({
+				...baseArgs,
+				panelActions: { currentLayoutIndex: 1, sections: TITLED_WITH_ROOT },
+			}),
+		);
+		const moveOut = result.current.items.find(
+			(i) => 'key' in i && i.key === 'move-to-root',
+		);
+		(moveOut as { onClick: () => void }).onClick();
+		expect(mockMovePanel).toHaveBeenCalledWith({
+			panelId: 'panel-1',
+			fromLayoutIndex: 1,
+			toLayoutIndex: 0,
+		});
+	});
+
+	it('hides "Move out of section" when the panel already sits in the root section', () => {
+		const { result } = renderHook(() =>
+			usePanelActionItems({
+				...baseArgs,
+				panelActions: { currentLayoutIndex: 0, sections: TITLED_WITH_ROOT },
+			}),
+		);
+		expect(itemKeys(result.current)).not.toContain('move-to-root');
+	});
+
+	it('hides "Move out of section" when every section is titled (no root)', () => {
+		const { result } = renderHook(() => usePanelActionItems(baseArgs));
+		expect(itemKeys(result.current)).not.toContain('move-to-root');
+	});
+
 	it('delete defers to a confirmation: the item opens the dialog, confirm runs the mutation', async () => {
 		const { result } = renderHook(() => usePanelActionItems(baseArgs));
 		const del = result.current.items.find(
@@ -214,18 +264,26 @@ describe('usePanelActionItems', () => {
 		});
 	});
 
-	it('not-yet-implemented actions (view/create-alert) fire the placeholder alert with the feature name', () => {
+	it('not-yet-implemented actions (view) fire the placeholder alert with the feature name', () => {
 		const alertSpy = jest.spyOn(window, 'alert').mockImplementation(() => {});
 		const { result } = renderHook(() => usePanelActionItems(baseArgs));
 
-		['view-panel', 'create-alert'].forEach((key) => {
-			const item = result.current.items.find((i) => 'key' in i && i.key === key);
-			(item as { onClick: () => void }).onClick();
-		});
+		const view = result.current.items.find(
+			(i) => 'key' in i && i.key === 'view-panel',
+		);
+		(view as { onClick: () => void }).onClick();
 
-		expect(alertSpy).toHaveBeenCalledTimes(2);
+		expect(alertSpy).toHaveBeenCalledTimes(1);
 		expect(alertSpy).toHaveBeenCalledWith('View option clicked');
-		expect(alertSpy).toHaveBeenCalledWith('Create Alerts option clicked');
 		alertSpy.mockRestore();
 	});
+
+	it('create-alert seeds an alert from this panel', () => {
+		const { result } = renderHook(() => usePanelActionItems(baseArgs));
+		const createAlert = result.current.items.find(
+			(i) => 'key' in i && i.key === 'create-alert',
+		);
+		(createAlert as { onClick: () => void }).onClick();
+		expect(mockCreateAlert).toHaveBeenCalledWith(mockPanel, 'panel-1');
+	});
 });

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

@@ -4,11 +4,13 @@ import {
 	CloudDownload,
 	Copy,
 	FolderInput,
+	FolderOutput,
 	Fullscreen,
 	PenLine,
 	Trash2,
 } from '@signozhq/icons';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import useComponentPermission from 'hooks/useComponentPermission';
 import {
 	type ConfirmableAction,
@@ -22,10 +24,13 @@ import { useAppContext } from 'providers/App/App';
 import type { DashboardSection } from '../../../utils';
 import type { PanelActionsConfig } from '../Panel';
 import { useClonePanel } from '../hooks/useClonePanel';
+import { useCreateAlertFromPanel } from '../hooks/useCreateAlertFromPanel';
 import { useDeletePanel } from '../hooks/useDeletePanel';
-import { useMovePanelToSection } from '../hooks/useMovePanelToSection';
+import {
+	type MovePanelArgs,
+	useMovePanelToSection,
+} from '../hooks/useMovePanelToSection';
 import { PANEL_ACTION_META } from './panelActionMeta';
-import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 // Stable fallback so renders without layout context don't churn the mutation
 // hooks' deps (a fresh [] each render would re-create their callbacks).
@@ -37,10 +42,73 @@ function notImplementedYet(feature: string): void {
 	alert(`${feature} option clicked`);
 }
 
+interface MoveItemsArgs {
+	sections: DashboardSection[];
+	currentLayoutIndex: number;
+	panelId: string;
+	movePanel: (args: MovePanelArgs) => Promise<void>;
+}
+
+/**
+ * The "Move to section" submenu (other titled sections) plus a direct "Move out
+ * of section" to the untitled root, shown only when the panel sits in a titled
+ * section and a root section exists to receive it.
+ */
+function buildMoveItems({
+	sections,
+	currentLayoutIndex,
+	panelId,
+	movePanel,
+}: MoveItemsArgs): MenuItem[] {
+	const targets = sections.filter(
+		(s) => s.title && s.layoutIndex !== currentLayoutIndex,
+	);
+	const items: MenuItem[] = [
+		{
+			key: 'move',
+			label: 'Move to section',
+			icon: <FolderInput size={14} />,
+			...(targets.length === 0
+				? { disabled: true }
+				: {
+						children: targets.map((s) => ({
+							key: `move-${s.layoutIndex}`,
+							label: s.title,
+							onClick: (): void =>
+								void movePanel({
+									panelId,
+									fromLayoutIndex: currentLayoutIndex,
+									toLayoutIndex: s.layoutIndex,
+								}),
+						})),
+					}),
+		},
+	];
+
+	const rootSection = sections.find((s) => !s.title);
+	if (rootSection && rootSection.layoutIndex !== currentLayoutIndex) {
+		items.push({
+			key: 'move-to-root',
+			label: 'Move out of section',
+			icon: <FolderOutput size={14} />,
+			onClick: (): void =>
+				void movePanel({
+					panelId,
+					fromLayoutIndex: currentLayoutIndex,
+					toLayoutIndex: rootSection.layoutIndex,
+				}),
+		});
+	}
+	return items;
+}
+
 interface UsePanelActionItemsArgs {
 	panelId: string;
-	/** Full plugin kind (e.g. `signoz/TimeSeriesPanel`); */
-	panelKind: PanelKind;
+	/**
+	 * The panel itself — its query seeds the "Create Alerts" action. Absent where
+	 * the panel data isn't threaded (so that action simply doesn't appear).
+	 */
+	panel: DashboardtypesPanelDTO;
 	/** Layout context for move/delete — absent outside editable mode. */
 	panelActions?: PanelActionsConfig;
 }
@@ -64,9 +132,10 @@ export interface PanelActionItems {
  */
 export function usePanelActionItems({
 	panelId,
-	panelKind,
+	panel,
 	panelActions,
 }: UsePanelActionItemsArgs): PanelActionItems {
+	const panelKind = panel.spec.plugin.kind;
 	const { user } = useAppContext();
 	const [canEditWidget, canMove, canDelete] = useComponentPermission(
 		[
@@ -79,6 +148,7 @@ export function usePanelActionItems({
 	);
 	const isEditable = useDashboardStore((s) => s.isEditable);
 	const openPanelEditor = useOpenPanelEditor();
+	const createAlert = useCreateAlertFromPanel();
 
 	// Mutations are store-backed (dashboardId/refetch) — the layout tree only
 	// supplies data (`sections`), so no callbacks are threaded through it.
@@ -87,7 +157,7 @@ export function usePanelActionItems({
 	const deletePanel = useDeletePanel({ sections });
 	const clonePanel = useClonePanel({ sections });
 
-	const kindActions = getPanelDefinition(panelKind)?.actions;
+	const kindActions = getPanelDefinition(panelKind).actions;
 
 	// Delete runs on confirm, not on click — the menu item opens a prompt.
 	const deleteConfirm = useConfirmableAction(
@@ -106,7 +176,7 @@ export function usePanelActionItems({
 
 	const items = useMemo<MenuItem[]>(() => {
 		const panelGroup: MenuItem[] = [];
-		if (kindActions?.view) {
+		if (kindActions.view) {
 			panelGroup.push({
 				key: 'view-panel',
 				label: 'View',
@@ -114,7 +184,7 @@ export function usePanelActionItems({
 				onClick: (): void => notImplementedYet('View'),
 			});
 		}
-		if (isEditable && canEditWidget && kindActions?.edit) {
+		if (isEditable && canEditWidget && kindActions.edit) {
 			panelGroup.push({
 				key: 'edit-panel',
 				label: 'Edit panel',
@@ -124,7 +194,7 @@ export function usePanelActionItems({
 		}
 		// Clone needs the section context (source spec + dimensions) to place the
 		// copy, so — unlike Edit — it requires panelActions.
-		if (isEditable && canEditWidget && panelActions && kindActions?.clone) {
+		if (isEditable && canEditWidget && panelActions && kindActions.clone) {
 			panelGroup.push({
 				key: 'clone-panel',
 				label: 'Clone',
@@ -138,7 +208,7 @@ export function usePanelActionItems({
 		}
 
 		const dataGroup: MenuItem[] = [];
-		if (kindActions?.download) {
+		if (kindActions.download) {
 			dataGroup.push({
 				key: 'download-panel',
 				label: 'Download as CSV',
@@ -146,40 +216,27 @@ export function usePanelActionItems({
 				onClick: (): void => notImplementedYet('Download'),
 			});
 		}
-		if (isEditable && kindActions?.createAlert) {
+		// Seeding an alert opens a new tab and never mutates the dashboard, so —
+		// unlike edit/clone — it isn't gated on `isEditable` (V1 parity: available
+		// on locked dashboards too). It needs the panel to read its query.
+		if (kindActions.createAlert && panel) {
 			dataGroup.push({
 				key: 'create-alert',
 				label: 'Create Alerts',
 				icon: <Bell size={14} />,
-				onClick: (): void => notImplementedYet('Create Alerts'),
+				onClick: (): void => createAlert(panel, panelId),
 			});
 		}
 
-		const moveGroup: MenuItem[] = [];
-		if (canMove && panelActions) {
-			const targets = sections.filter(
-				(s) => s.title && s.layoutIndex !== panelActions.currentLayoutIndex,
-			);
-			moveGroup.push({
-				key: 'move',
-				label: 'Move to section',
-				icon: <FolderInput size={14} />,
-				...(targets.length === 0
-					? { disabled: true }
-					: {
-							children: targets.map((s) => ({
-								key: `move-${s.layoutIndex}`,
-								label: s.title,
-								onClick: (): void =>
-									void movePanel({
-										panelId,
-										fromLayoutIndex: panelActions.currentLayoutIndex,
-										toLayoutIndex: s.layoutIndex,
-									}),
-							})),
-						}),
-			});
-		}
+		const moveGroup: MenuItem[] =
+			canMove && panelActions
+				? buildMoveItems({
+						sections,
+						currentLayoutIndex: panelActions.currentLayoutIndex,
+						panelId,
+						movePanel,
+					})
+				: [];
 
 		const deleteGroup: MenuItem[] =
 			canDelete && panelActions
@@ -205,10 +262,12 @@ export function usePanelActionItems({
 		canMove,
 		canDelete,
 		kindActions,
+		panel,
 		panelActions,
 		sections,
 		panelId,
 		openPanelEditor,
+		createAlert,
 		movePanel,
 		clonePanel,
 		requestDelete,

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

@@ -1,7 +1,10 @@
 import { useMemo } from 'react';
 import { Info, Loader } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
-import type { Querybuildertypesv5QueryWarnDataDTO as WarningDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesPanelDTO,
+	Querybuildertypesv5QueryWarnDataDTO as WarningDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import type { PanelTimePreferenceLabel } from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';
 
@@ -14,15 +17,12 @@ import {
 	panelStatusFromWarning,
 } from '../PanelStatus/utils';
 import styles from './PanelHeader.module.scss';
-import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 interface PanelHeaderProps {
-	name: string;
-	description?: string;
 	panelId: string;
-	/** Full plugin kind — drives kind-gated menu actions. */
-	panelKind: PanelKind;
+	/** The panel itself — its query seeds the menu's "Create Alerts" action. */
+	panel: DashboardtypesPanelDTO;
 	/** Background refresh in flight — shows a spinner without blinking the chart. */
 	isFetching: boolean;
 	/** Latest query error — surfaced as a header error indicator. */
@@ -49,10 +49,8 @@ interface PanelHeaderProps {
 
 /** Panel chrome: drag handle, title, refetch + status indicators, actions. */
 function PanelHeader({
-	name,
-	description,
 	panelId,
-	panelKind,
+	panel,
 	isFetching,
 	error,
 	warning,
@@ -63,6 +61,8 @@ function PanelHeader({
 	onSearchChange,
 	hideActions,
 }: PanelHeaderProps): JSX.Element {
+	const name = panel.spec.display.name;
+	const description = panel.spec.display.description;
 	const errorDetail = useMemo(() => panelStatusFromError(error), [error]);
 
 	const warningDetail = useMemo(
@@ -116,7 +116,7 @@ function PanelHeader({
 				{!hideActions && (
 					<PanelActionsMenu
 						panelId={panelId}
-						panelKind={panelKind}
+						panel={panel}
 						panelActions={panelActions}
 					/>
 				)}

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

@@ -8,7 +8,7 @@ import styles from './PanelTypeSelectionModal.module.scss';
 interface PanelTypeSelectionModalProps {
 	open: boolean;
 	onClose: () => void;
-	onSelect: (pluginKind: PanelKind) => void;
+	onSelect: (panelKind: PanelKind) => void;
 }
 
 function PanelTypeSelectionModal({
@@ -25,17 +25,17 @@ function PanelTypeSelectionModal({
 			destroyOnClose
 		>
 			<div className={styles.grid}>
-				{PANEL_TYPES.map((type) => (
+				{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
 					<Button
-						key={type.pluginKind}
+						key={panelKind}
 						type="button"
 						variant="ghost"
 						className={styles.typeButton}
-						data-testid={`panel-type-${type.pluginKind}`}
-						onClick={(): void => onSelect(type.pluginKind)}
+						data-testid={`panel-type-${panelKind}`}
+						onClick={(): void => onSelect(panelKind)}
 					>
-						{type.icon}
-						{type.label}
+						<Icon size={14} />
+						{label}
 					</Button>
 				))}
 			</div>

frontend/src/pages/DashboardPageV2/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/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants.tsx

@@ -1,36 +0,0 @@
-import {
-	BarChart,
-	ChartLine,
-	ChartPie,
-	Hash,
-	List,
-	Table,
-} from '@signozhq/icons';
-
-import type { PanelType } from './types';
-
-export const PANEL_TYPES: PanelType[] = [
-	{
-		pluginKind: 'signoz/TimeSeriesPanel',
-		label: 'Time Series',
-		icon: <ChartLine size={16} />,
-	},
-	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
-	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
-	{
-		pluginKind: 'signoz/BarChartPanel',
-		label: 'Bar Chart',
-		icon: <BarChart size={16} />,
-	},
-	{
-		pluginKind: 'signoz/PieChartPanel',
-		label: 'Pie Chart',
-		icon: <ChartPie size={16} />,
-	},
-	{
-		pluginKind: 'signoz/HistogramPanel',
-		label: 'Histogram',
-		icon: <BarChart size={16} />,
-	},
-	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
-];

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

@@ -1,7 +1,16 @@
+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 {
-	pluginKind: PanelKind;
+	panelKind: PanelKind;
 	label: string;
-	icon: JSX.Element;
+	/** Icon component — the consumer renders it and controls size/color/etc. */
+	Icon: ComponentType<IconProps>;
 }

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

@@ -1,11 +1,11 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import type { ReactElement } from 'react';
 import type { Warning } from 'types/api';
 
 import PanelHeader from '../PanelHeader/PanelHeader';
-import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 // Status indicators use a radix tooltip, which needs a TooltipProvider ancestor
 // (supplied globally by AppLayout at runtime).
@@ -22,9 +22,26 @@ jest.mock(
 		},
 );
 
+// The header reads its name/description/kind off the panel itself.
+function makePanel(overrides?: {
+	name?: string;
+	description?: string;
+}): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: {
+				name: overrides?.name ?? 'My panel',
+				description: overrides?.description,
+			},
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
 const baseProps = {
-	name: 'My panel',
-	panelKind: 'signoz/TimeSeriesPanel' as PanelKind,
+	panel: makePanel(),
 	panelId: 'panel-1',
 	isFetching: false,
 };
@@ -44,7 +61,10 @@ describe('PanelHeader title and description', () => {
 
 	it('shows the description info icon when a description is provided', () => {
 		renderWithProvider(
-			<PanelHeader {...baseProps} description="What this panel measures" />,
+			<PanelHeader
+				{...baseProps}
+				panel={makePanel({ description: 'What this panel measures' })}
+			/>,
 		);
 		expect(screen.getByTestId('panel-header-info-icon')).toBeInTheDocument();
 	});

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

@@ -63,9 +63,10 @@ describe('useClonePanel', () => {
 				op: 'add',
 				path: '/spec/layouts/0/spec/items/-',
 				value: {
-					// Same dimensions as the source panel (p1: 8x5).
+					// Same dimensions as the source panel (p1: 8x5). The last row is
+					// full (8 + 4 = 12 cols), so the 8-wide clone wraps to a fresh row
+					// at the section bottom: max(y + height) = 5.
 					x: 0,
-					// Bottom of the section: max(y + height) over existing items = 5.
 					y: 5,
 					width: 8,
 					height: 5,
@@ -75,6 +76,27 @@ describe('useClonePanel', () => {
 		]);
 	});
 
+	it('places the clone beside the last row when it fits', async () => {
+		const oneNarrowItem: DashboardSection[] = [
+			{
+				id: 'section-0',
+				layoutIndex: 0,
+				title: 'Overview',
+				repeatVariable: undefined,
+				items: [{ id: 'p1', x: 0, y: 0, width: 4, height: 5, panel: sourcePanel }],
+			},
+		];
+		const { result } = renderHook(() =>
+			useClonePanel({ sections: oneNarrowItem }),
+		);
+
+		await result.current({ panelId: 'p1', layoutIndex: 0 });
+
+		const ops = mockPatch.mock.calls[0][1];
+		// Room in the last row (4 + 4 = 8 ≤ 12 cols) → sits to the right at y:0.
+		expect(ops[1].value).toMatchObject({ x: 4, y: 0, width: 4, height: 5 });
+	});
+
 	it('deep-copies the spec — the cloned value is not the same object reference', async () => {
 		const { result } = renderHook(() => useClonePanel({ sections: sections() }));
 

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

@@ -0,0 +1,69 @@
+import { renderHook } from '@testing-library/react';
+import logEvent from 'api/common/logEvent';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
+
+import { useCreateAlertFromPanel } from '../useCreateAlertFromPanel';
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockSafeNavigate = jest.fn();
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+// The V5→V1 query→URL translation is covered by buildCreateAlertUrl's own tests;
+// stub it so this asserts only the hook's side effects (analytics + navigation).
+jest.mock('../../utils/buildCreateAlertUrl', () => ({
+	buildCreateAlertUrl: (): string => '/alerts/new?composite=1',
+}));
+
+const mockLogEvent = logEvent as jest.Mock;
+
+const panel = {
+	kind: 'Panel',
+	spec: {
+		display: { name: 'CPU' },
+		plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+		queries: [],
+	},
+} as unknown as DashboardtypesPanelDTO;
+
+describe('useCreateAlertFromPanel', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		useDashboardStore.setState({ dashboardId: 'dash-1' });
+	});
+
+	it('opens the seeded alert builder in a new tab', () => {
+		const { result } = renderHook(() => useCreateAlertFromPanel());
+
+		result.current(panel, 'panel-1');
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith('/alerts/new?composite=1', {
+			newTab: true,
+		});
+	});
+
+	it('logs the create-alert action with panel and dashboard context (V1 parity)', () => {
+		const { result } = renderHook(() => useCreateAlertFromPanel());
+
+		result.current(panel, 'panel-1');
+
+		expect(mockLogEvent).toHaveBeenCalledWith(
+			'Dashboard Detail: Panel action',
+			expect.objectContaining({
+				action: 'createAlerts',
+				panelType: PANEL_TYPES.TIME_SERIES,
+				dashboardId: 'dash-1',
+				widgetId: 'panel-1',
+			}),
+		);
+	});
+});

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

@@ -5,7 +5,11 @@ import { v4 as uuid } from 'uuid';
 
 import { patchDashboardV2 } from 'api/generated/services/dashboard';
 
-import { addPanelToSectionOps, panelRef } from '../../../patchOps';
+import {
+	addPanelToSectionOps,
+	findFreeSlot,
+	panelRef,
+} from '../../../patchOps';
 import { useDashboardStore } from '../../../store/useDashboardStore';
 import type { DashboardSection } from '../../../utils';
 
@@ -20,8 +24,9 @@ export interface ClonePanelArgs {
 
 /**
  * Duplicates a panel: deep-copies the source spec under a fresh id and drops a
- * same-size grid item at the bottom of the section, as one atomic patch. Mirrors
- * V1's clone (verbatim spec copy, no rename).
+ * same-size grid item into the section via `findFreeSlot` (beside the last row
+ * if it fits, else a fresh row), as one atomic patch. Mirrors V1's clone
+ * (verbatim spec copy, no rename).
  */
 export function useClonePanel({
 	sections,
@@ -38,10 +43,7 @@ export function useClonePanel({
 			}
 
 			const newPanelId = uuid();
-			const nextY = section.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
+			const { x, y } = findFreeSlot(section.items, source.width);
 
 			const clone = patchDashboardV2(
 				{ id: dashboardId },
@@ -50,8 +52,8 @@ export function useClonePanel({
 					panel: cloneDeep(source.panel),
 					layoutIndex,
 					item: {
-						x: 0,
-						y: nextY,
+						x,
+						y,
 						width: source.width,
 						height: source.height,
 						content: { $ref: panelRef(newPanelId) },

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

@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+import logEvent from 'api/common/logEvent';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
+import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
+
+import { buildCreateAlertUrl } from '../utils/buildCreateAlertUrl';
+
+/**
+ * Returns a callback that opens the alert builder in a new tab, seeded from a
+ * panel's query, and logs the action — mirroring V1's `useCreateAlerts`
+ * ('dashboardView' caller). The panel is supplied at call time so the callback
+ * stays stable across panels (and the dashboard's react-query refetches).
+ */
+export function useCreateAlertFromPanel(): (
+	panel: DashboardtypesPanelDTO,
+	panelId: string,
+) => void {
+	const { safeNavigate } = useSafeNavigate();
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+
+	return useCallback(
+		(panel: DashboardtypesPanelDTO, panelId: string): void => {
+			void logEvent('Dashboard Detail: Panel action', {
+				action: 'createAlerts',
+				panelType: PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind],
+				dashboardId,
+				widgetId: panelId,
+				queryType: getPanelQueryType(panel),
+			});
+			safeNavigate(buildCreateAlertUrl(panel), { newTab: true });
+		},
+		[dashboardId, safeNavigate],
+	);
+}

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

@@ -0,0 +1,103 @@
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { fromPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+
+import { buildCreateAlertUrl } from '../buildCreateAlertUrl';
+
+// The V5→V1 translation has its own coverage; stub it so this asserts only the
+// URL assembly (params, encoding, unit) buildCreateAlertUrl owns.
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters',
+	() => ({
+		fromPerses: jest.fn(),
+	}),
+);
+
+const mockFromPerses = fromPerses as jest.Mock;
+
+const translatedQuery: Query = {
+	queryType: EQueryType.QUERY_BUILDER,
+	promql: [],
+	clickhouse_sql: [],
+	builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
+	id: 'q1',
+};
+
+function makePanel(
+	overrides?: Partial<{ unit: string; queries: unknown[] }>,
+): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name: 'CPU' },
+			plugin: {
+				kind: 'signoz/TimeSeriesPanel',
+				spec: overrides?.unit ? { formatting: { unit: overrides.unit } } : {},
+			},
+			queries: overrides?.queries ?? [{ some: 'query' }],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+describe('buildCreateAlertUrl', () => {
+	beforeEach(() => {
+		mockFromPerses.mockReset();
+		mockFromPerses.mockReturnValue({ ...translatedQuery });
+	});
+
+	function parse(url: string): URLSearchParams {
+		expect(url.startsWith(`${ROUTES.ALERTS_NEW}?`)).toBe(true);
+		return new URLSearchParams(url.slice(url.indexOf('?') + 1));
+	}
+
+	it('translates the panel queries with the mapped panel type', () => {
+		const panel = makePanel();
+		buildCreateAlertUrl(panel);
+
+		expect(mockFromPerses).toHaveBeenCalledWith(
+			panel.spec.queries,
+			PANEL_TYPES.TIME_SERIES,
+		);
+	});
+
+	it('tags the URL with panel type, v5 version, and the dashboards source', () => {
+		const params = parse(buildCreateAlertUrl(makePanel()));
+
+		expect(params.get(QueryParams.panelTypes)).toBe(PANEL_TYPES.TIME_SERIES);
+		expect(params.get(QueryParams.version)).toBe(ENTITY_VERSION_V5);
+		expect(params.get(QueryParams.source)).toBe('dashboards');
+	});
+
+	it('encodes the translated query as the compositeQuery param', () => {
+		const params = parse(buildCreateAlertUrl(makePanel()));
+
+		const raw = params.get(QueryParams.compositeQuery);
+		expect(raw).toBeTruthy();
+		const decoded = JSON.parse(decodeURIComponent(raw as string));
+		expect(decoded.queryType).toBe(EQueryType.QUERY_BUILDER);
+		expect(decoded.id).toBe('q1');
+	});
+
+	it('carries the panel formatting unit onto the alert query when set', () => {
+		const params = parse(buildCreateAlertUrl(makePanel({ unit: 'bytes' })));
+
+		const decoded = JSON.parse(
+			decodeURIComponent(params.get(QueryParams.compositeQuery) as string),
+		);
+		expect(decoded.unit).toBe('bytes');
+	});
+
+	it('leaves the query unit unset when the panel has no formatting unit', () => {
+		const params = parse(buildCreateAlertUrl(makePanel()));
+
+		const decoded = JSON.parse(
+			decodeURIComponent(params.get(QueryParams.compositeQuery) as string),
+		);
+		expect(decoded.unit).toBeUndefined();
+	});
+});

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

@@ -0,0 +1,46 @@
+import type {
+	DashboardtypesPanelDTO,
+	DashboardtypesPanelFormattingDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import { fromPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+
+/**
+ * Builds the `/alerts/new` URL that seeds the alert builder from a panel's query,
+ * mirroring V1's `useCreateAlerts`: the panel's V5 queries are translated to the
+ * V1 `Query` the alert page reads from `compositeQuery`, tagged with the panel
+ * type, entity version, and a `dashboards` source.
+ *
+ * Unlike V1 there is no `/substitute_vars` round-trip — V2 has no query-variable
+ * plumbing yet, so any dashboard-variable references travel through verbatim.
+ */
+export function buildCreateAlertUrl(panel: DashboardtypesPanelDTO): string {
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
+	const query = fromPerses(panel.spec.queries ?? [], panelType);
+
+	// `formatting.unit` is shared by the formattable plugin specs; read it with a
+	// localized cast rather than narrowing on kind (mirrors Panel's time-preference read).
+	const unit = (
+		panel.spec.plugin.spec as
+			| { formatting?: DashboardtypesPanelFormattingDTO }
+			| undefined
+	)?.formatting?.unit;
+	if (unit) {
+		query.unit = unit;
+	}
+
+	const params = new URLSearchParams();
+	params.set(
+		QueryParams.compositeQuery,
+		encodeURIComponent(JSON.stringify(query)),
+	);
+	params.set(QueryParams.panelTypes, panelType);
+	params.set(QueryParams.version, ENTITY_VERSION_V5);
+	params.set(QueryParams.source, YAxisSource.DASHBOARDS);
+
+	return `${ROUTES.ALERTS_NEW}?${params.toString()}`;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/__tests__/patchOps.test.ts

@@ -107,7 +107,7 @@ describe('createPanelOps', () => {
 		expect(value.y).toBe(6);
 	});
 
-	it('falls back to the last section when no index is requested', () => {
+	it('falls back to the root (first) section when no index is requested', () => {
 		const layouts = [section([]), section([item(0, 6)])];
 		const ops = createPanelOps({
 			layouts,
@@ -116,11 +116,11 @@ describe('createPanelOps', () => {
 			panel,
 		});
 
-		expect(ops[1].path).toBe('/spec/layouts/1/spec/items/-');
+		expect(ops[1].path).toBe('/spec/layouts/0/spec/items/-');
 	});
 
-	it('falls back to the last section when the requested index is out of range', () => {
-		const layouts = [section([])];
+	it('falls back to the root (first) section when the requested index is out of range', () => {
+		const layouts = [section([item(0, 6)]), section([])];
 		const ops = createPanelOps({ layouts, layoutIndex: 5, panelId: 'p1', panel });
 		expect(ops[1].path).toBe('/spec/layouts/0/spec/items/-');
 	});

frontend/src/pages/DashboardPageV2/DashboardContainer/patchOps.ts

@@ -121,7 +121,7 @@ export function addPanelToSectionOps({
 interface CreatePanelOpsArgs {
 	/** Current sections, used to resolve the target and the next free row. */
 	layouts: DashboardtypesLayoutDTO[];
-	/** Preferred section (from the "Add panel" trigger); falls back to the last. */
+	/** Preferred section (from a section's "Add panel" trigger); falls back to the root (first) section. */
 	layoutIndex: number | undefined;
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
@@ -132,13 +132,16 @@ const NEW_PANEL_SIZE = { width: 6, height: 6 };
 /** Columns in the section grid — mirrors `cols` on SectionGrid's GridLayout. */
 const GRID_COLS = 12;
 
+/** Minimal placement fields shared by grid-item DTOs and flattened `GridItem`s. */
+type PlacedItem = Pick<DashboardGridItemDTO, 'x' | 'y' | 'width' | 'height'>;
+
 /**
  * Placement for a new grid item: drop it right of the last row if there's room,
  * else wrap to a fresh row at the bottom. Only the last row is considered (items
  * sharing the greatest top-y); gaps in earlier rows are left alone.
  */
-function findFreeSlot(
-	items: DashboardGridItemDTO[],
+export function findFreeSlot(
+	items: PlacedItem[],
 	width: number,
 ): { x: number; y: number } {
 	const w = Math.min(width, GRID_COLS);
@@ -163,8 +166,8 @@ function findFreeSlot(
 
 /**
  * Ops to persist a brand-new panel (editor save path): resolve the target
- * section (requested index if valid, else last, else a freshly-created one) and
- * place the panel via `findFreeSlot`.
+ * section (requested index if valid, else the root/first section, else a
+ * freshly-created one) and place the panel via `findFreeSlot`.
  */
 export function createPanelOps({
 	layouts,
@@ -174,14 +177,17 @@ export function createPanelOps({
 }: CreatePanelOpsArgs): DashboardtypesJSONPatchOperationDTO[] {
 	const ops: DashboardtypesJSONPatchOperationDTO[] = [];
 
-	const requested =
-		layoutIndex !== undefined && layouts[layoutIndex] !== undefined
-			? layoutIndex
-			: layouts.length - 1;
-
-	let targetIndex = requested;
-	let items: DashboardGridItemDTO[] = layouts[requested]?.spec.items ?? [];
-	if (targetIndex < 0) {
+	let targetIndex: number;
+	let items: DashboardGridItemDTO[];
+	if (layoutIndex !== undefined && layouts[layoutIndex] !== undefined) {
+		// Explicit section — a section's own "New Panel" trigger.
+		targetIndex = layoutIndex;
+		items = layouts[layoutIndex]?.spec.items ?? [];
+	} else if (layouts.length > 0) {
+		// No section specified (toolbar "New Panel") → the root (first) section.
+		targetIndex = 0;
+		items = layouts[0]?.spec.items ?? [];
+	} else {
 		// No sections yet — create an untitled one and target it.
 		ops.push(addSectionOp(''));
 		targetIndex = 0;

frontend/src/pages/DashboardPageV2/DashboardContainer/utils.ts

@@ -137,13 +137,3 @@ export function layoutsToSections(
 		})
 		.filter((s): s is DashboardSection => s !== null);
 }
-
-export function getPanelKindLabel(
-	panel: DashboardtypesPanelDTO | undefined,
-): string {
-	const kind = panel?.spec?.plugin?.kind;
-	if (!kind) {
-		return 'unknown';
-	}
-	return kind.replace(/^signoz\//, '');
-}