fix: minor changes

#### Description

- Adds the `builder_ai_query` envelope type, seeded by the AI explorer
via `initialQueryAIWithType`.
- AI queries pull filter-bar keys from
`/api/v1/ai_observability/fields/keys` and values from
`/api/v1/ai_observability/fields/values`.
- `QuerySection` drops the builder's custom order-by (`ExplorerOrderBy`
via `renderOrderBy`) for the list and trace panels, along with
`showTraceOperator`. Ordering for those views is the list's own concern,
not the builder's — the trace view supplies its own control in #12688.
`limit` and `having` are now rendered disabled on every panel instead of
hidden on list.
- Hides the span-scope selector for AI queries — "Root / Entrypoint
Spans" ANDs badly with the gate, since GenAI attributes sit on nested
spans. Derived from the query itself, so no new prop on the shared
builder.
- `createNewBuilderQuery` inherits `builderQueryType` from the first
query, the way it already inherits `source`.
- Response conversion reads aggregation metadata from both builder
envelope types, not just `builder_query`.

TDD -
https://app.notion.com/p/signoz/Query-Builder-Changes-3b4fcc6bcd1980889c7aed782665e78d

#### Issues closed by this PR

Closes -
https://github.com/orgs/SigNoz/projects/39/views/20?pane=issue&itemId=226748421&issue=SigNoz%7Cengineering-pod%7C5889

#### Screenshots / Screen Recordings


https://github.com/user-attachments/assets/985cb178-ffb0-405c-b0a6-82ec242c3d68

---------

Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>

docs/api/openapi.yml

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

frontend/jest.config.ts

@@ -56,10 +56,10 @@ const config: Config.InitialOptions = {
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
 		// Pattern 1: allow .pnpm virtual store through (handled by pattern 2), plus root-level ESM packages.
-		'node_modules/(?!(\\.pnpm|react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|remark-gfm|mdast-util-gfm|mdast-util-gfm-autolink-literal|mdast-util-gfm-footnote|mdast-util-gfm-strikethrough|mdast-util-gfm-table|mdast-util-gfm-task-list-item|mdast-util-find-and-replace|mdast-util-phrasing|mdast-util-to-markdown|markdown-table|longest-streak|ccount|escape-string-regexp|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
+		'node_modules/(?!(\\.pnpm|react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
 		// Pattern 2: pnpm virtual store — ignore everything except ESM-only packages.
 		// pnpm encodes scoped packages as @scope+name@version, so match on scope prefix.
-		'node_modules/\\.pnpm/(?!(react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|remark-gfm|mdast-util-gfm|mdast-util-gfm-autolink-literal|mdast-util-gfm-footnote|mdast-util-gfm-strikethrough|mdast-util-gfm-table|mdast-util-gfm-task-list-item|mdast-util-find-and-replace|mdast-util-phrasing|mdast-util-to-markdown|markdown-table|longest-streak|ccount|escape-string-regexp|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
+		'node_modules/\\.pnpm/(?!(react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

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

@@ -4402,57 +4402,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesListPanelSpecDTO;
 }
 
-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTOKind {
-	'signoz/TextPanel' = 'signoz/TextPanel',
-}
-export interface DashboardtypesHeaderOptionsDTO {
-	/**
-	 * @type boolean
-	 */
-	hide?: boolean;
-}
-
-export enum DashboardtypesTextModeDTO {
-	markdown = 'markdown',
-}
-export enum DashboardtypesTextAlignDTO {
-	left = 'left',
-	center = 'center',
-	right = 'right',
-}
-export enum DashboardtypesVerticalAlignDTO {
-	top = 'top',
-	center = 'center',
-	bottom = 'bottom',
-}
-export interface DashboardtypesTextPresentationDTO {
-	/**
-	 * @type string,null
-	 */
-	background?: string | null;
-	textAlign?: DashboardtypesTextAlignDTO;
-	verticalAlign?: DashboardtypesVerticalAlignDTO;
-}
-
-export interface DashboardtypesTextPanelSpecDTO {
-	headerOptions?: DashboardtypesHeaderOptionsDTO;
-	mode?: DashboardtypesTextModeDTO;
-	presentation?: DashboardtypesTextPresentationDTO;
-	/**
-	 * @type string
-	 */
-	text?: string;
-}
-
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO {
-	/**
-	 * @enum signoz/TextPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTOKind;
-	spec: DashboardtypesTextPanelSpecDTO;
-}
-
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -4460,8 +4409,7 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -5383,7 +5331,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TablePanel' = 'signoz/TablePanel',
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
-	'signoz/TextPanel' = 'signoz/TextPanel',
 }
 /**
  * @nullable
@@ -9151,6 +9098,10 @@ export interface RulestatehistorytypesGettableRuleStateHistoryDTO {
 	 * @type boolean
 	 */
 	overallStateChanged: boolean;
+	/**
+	 * @type string
+	 */
+	relatedAITracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -9199,6 +9150,10 @@ export interface RulestatehistorytypesGettableRuleStateHistoryContributorDTO {
 	 * @type array,null
 	 */
 	labels: Querybuildertypesv5LabelDTO[] | null;
+	/**
+	 * @type string
+	 */
+	relatedAITracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -9294,6 +9249,7 @@ export enum RuletypesAlertTypeDTO {
 	TRACES_BASED_ALERT = 'TRACES_BASED_ALERT',
 	LOGS_BASED_ALERT = 'LOGS_BASED_ALERT',
 	EXCEPTIONS_BASED_ALERT = 'EXCEPTIONS_BASED_ALERT',
+	AI_TRACES_BASED_ALERT = 'AI_TRACES_BASED_ALERT',
 }
 export enum RuletypesMatchTypeDTO {
 	at_least_once = 'at_least_once',

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -2,8 +2,10 @@ import { cloneDeep, isEmpty } from 'lodash-es';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
 import {
+	BuilderQuery,
 	DistributionData,
 	MetricRangePayloadV5,
+	QueryEnvelope,
 	QueryRangeRequestV5,
 	RawData,
 	ScalarData,
@@ -11,6 +13,11 @@ import {
 } from 'types/api/v5/queryRange';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
+const isBuilderQueryEnvelope = (
+	envelope: QueryEnvelope,
+): envelope is QueryEnvelope & { spec: BuilderQuery } =>
+	envelope.type === 'builder_query' || envelope.type === 'builder_ai_query';
+
 function getColName(
 	col: ScalarData['columns'][number],
 	legendMap: Record<string, string>,
@@ -409,21 +416,19 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		params?.compositeQuery?.queries
-			?.filter((query) => query.type === 'builder_query')
-			.reduce(
-				(acc, query) => {
-					if (
-						query.type === 'builder_query' &&
-						'aggregations' in query.spec &&
-						query.spec.name
-					) {
-						acc[query.spec.name] = query.spec.aggregations;
-					}
-					return acc;
-				},
-				{} as Record<string, any>,
-			) || {};
+		params?.compositeQuery?.queries?.filter(isBuilderQueryEnvelope).reduce(
+			(acc, query) => {
+				if (
+					isBuilderQueryEnvelope(query) &&
+					'aggregations' in query.spec &&
+					query.spec.name
+				) {
+					acc[query.spec.name] = query.spec.aggregations;
+				}
+				return acc;
+			},
+			{} as Record<string, any>,
+		) || {};
 
 	// clickhouse_sql queries have no aggregation metadata; their value columns
 	// are named/keyed by the real SQL alias the response carries (see getColId).

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -14,6 +14,7 @@ import {
 	QueryBuilderFormula as V5QueryBuilderFormula,
 	QueryEnvelope,
 	QueryRangePayloadV5,
+	RequestType,
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -935,3 +936,41 @@ describe('convertBuilderQueriesToV5 having normalization', () => {
 		});
 	});
 });
+
+describe('convertBuilderQueriesToV5 builder query type', () => {
+	const buildEnvelope = (
+		builderQueryType: IBuilderQuery['builderQueryType'],
+		requestType: RequestType,
+	): QueryEnvelope => {
+		const [envelope] = convertBuilderQueriesToV5(
+			{
+				A: {
+					dataSource: DataSource.TRACES,
+					queryName: 'A',
+					builderQueryType,
+				} as unknown as IBuilderQuery,
+			},
+			requestType,
+		);
+		return envelope;
+	};
+
+	it.each<[RequestType]>([
+		['trace'],
+		['raw'],
+		['time_series'],
+		['scalar'],
+		['distribution'],
+	])('sends builder_ai_query for the %s request type', (requestType) => {
+		expect(buildEnvelope('builder_ai_query', requestType).type).toBe(
+			'builder_ai_query',
+		);
+	});
+
+	it.each<[string, IBuilderQuery['builderQueryType']]>([
+		['an unmarked query', undefined],
+		['an explicitly generic query', 'builder_query'],
+	])('sends builder_query for %s', (_label, builderQueryType) => {
+		expect(buildEnvelope(builderQueryType, 'trace').type).toBe('builder_query');
+	});
+});

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -365,7 +365,7 @@ export function convertBuilderQueriesToV5(
 			}
 
 			return {
-				type: 'builder_query' as QueryType,
+				type: queryData.builderQueryType ?? 'builder_query',
 				spec,
 			};
 		},

frontend/src/components/MarkdownEditor/EditorStatusBar.tsx

@@ -1,47 +0,0 @@
-import type { ReactNode } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import type { CursorPosition } from './types';
-
-import styles from './MarkdownEditor.module.scss';
-
-interface EditorStatusBarProps {
-	cursor: CursorPosition;
-	length: number;
-	maxLength: number;
-	hint?: ReactNode;
-}
-
-function EditorStatusBar({
-	cursor,
-	length,
-	maxLength,
-	hint,
-}: EditorStatusBarProps): JSX.Element {
-	const isOverLimit = length > maxLength;
-
-	return (
-		<div className={styles.statusBar} data-testid="markdown-editor-status">
-			<Typography.Text className={styles.statusPosition}>
-				{`Ln ${cursor.line}, Col ${cursor.column}`}
-				<span className={styles.statusSeparator}>·</span>
-				<span
-					className={cx(styles.statusCount, {
-						[styles.statusCountOverLimit]: isOverLimit,
-					})}
-					data-testid="markdown-editor-char-count"
-				>
-					{isOverLimit
-						? `${length} / ${maxLength} chars`
-						: `${length} chars`}
-				</span>
-			</Typography.Text>
-			{hint && (
-				<Typography.Text className={styles.statusHint}>{hint}</Typography.Text>
-			)}
-		</div>
-	);
-}
-
-export default EditorStatusBar;

frontend/src/components/MarkdownEditor/EditorToolbar.tsx

@@ -1,93 +0,0 @@
-import type { ReactNode } from 'react';
-import {
-	Bold,
-	CodeXml,
-	Heading,
-	Italic,
-	Link,
-	List,
-	ListOrdered,
-	Table,
-	Type,
-} from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { Typography } from '@signozhq/ui/typography';
-
-import InsertVariableMenu from './InsertVariableMenu';
-import MarkdownHelp from './MarkdownHelp';
-import type { EditorCommand, EditorVariable } from './types';
-
-import styles from './MarkdownEditor.module.scss';
-
-const COMMAND_ICONS: Record<string, ReactNode> = {
-	heading: <Heading size={14} />,
-	bold: <Bold size={14} />,
-	italic: <Italic size={14} />,
-	'bulleted-list': <List size={14} />,
-	'numbered-list': <ListOrdered size={14} />,
-	link: <Link size={14} />,
-	code: <CodeXml size={14} />,
-	table: <Table size={14} />,
-};
-
-interface EditorToolbarProps {
-	formatLabel: string;
-	commands: EditorCommand[];
-	onRunCommand: (command: EditorCommand) => void;
-	variables: EditorVariable[];
-	onInsertVariable: (name: string) => void;
-	disabled: boolean;
-	extra?: ReactNode;
-}
-
-function EditorToolbar({
-	formatLabel,
-	commands,
-	onRunCommand,
-	variables,
-	onInsertVariable,
-	disabled,
-	extra,
-}: EditorToolbarProps): JSX.Element {
-	return (
-		<div className={styles.toolbar} data-testid="markdown-editor-toolbar">
-			<span className={styles.formatChip}>
-				<Type size={14} />
-				<Typography.Text className={styles.formatLabel}>
-					{formatLabel}
-				</Typography.Text>
-			</span>
-			<span className={styles.toolbarDivider} />
-			<div className={styles.commands}>
-				{commands.map((command) => (
-					<TooltipSimple key={command.id} title={command.label}>
-						<Button
-							type="button"
-							variant="ghost"
-							color="secondary"
-							size="icon"
-							disabled={disabled}
-							aria-label={command.label}
-							data-testid={`markdown-command-${command.id}`}
-							onClick={(): void => onRunCommand(command)}
-						>
-							{COMMAND_ICONS[command.id]}
-						</Button>
-					</TooltipSimple>
-				))}
-			</div>
-			<div className={styles.toolbarEnd}>
-				{extra}
-				<InsertVariableMenu
-					variables={variables}
-					onSelect={onInsertVariable}
-					disabled={disabled}
-				/>
-				<MarkdownHelp />
-			</div>
-		</div>
-	);
-}
-
-export default EditorToolbar;

frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx

@@ -1,91 +0,0 @@
-import { useMemo, useState } from 'react';
-import { ChevronDown, DollarSign, Search } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import type { EditorVariable } from './types';
-
-import styles from './MarkdownEditor.module.scss';
-
-interface InsertVariableMenuProps {
-	variables: EditorVariable[];
-	/** Receives the variable name; the caller decides the token syntax. */
-	onSelect: (name: string) => void;
-	disabled: boolean;
-}
-
-function toMenuItems(
-	variables: EditorVariable[],
-	onSelect: (name: string) => void,
-): MenuItem[] {
-	return variables.map((variable) => ({
-		key: variable.name,
-		label: (
-			<span
-				className={styles.variableRow}
-				data-testid={`markdown-variable-${variable.name}`}
-			>
-				<span className={styles.variableName}>{`$${variable.name}`}</span>
-				{variable.badge && (
-					<span className={styles.variableBadge}>{variable.badge}</span>
-				)}
-			</span>
-		),
-		onClick: (): void => onSelect(variable.name),
-	}));
-}
-
-/** Searchable variable picker; hidden entirely when there is nothing to insert. */
-function InsertVariableMenu({
-	variables,
-	onSelect,
-	disabled,
-}: InsertVariableMenuProps): JSX.Element | null {
-	const [search, setSearch] = useState('');
-
-	const matches = useMemo(() => {
-		const query = search.trim().toLowerCase();
-		return query
-			? variables.filter((variable) => variable.name.toLowerCase().includes(query))
-			: variables;
-	}, [variables, search]);
-
-	const items = useMemo(
-		() => toMenuItems(matches, onSelect),
-		[matches, onSelect],
-	);
-
-	if (variables.length === 0) {
-		return null;
-	}
-
-	return (
-		<DropdownMenuSimple
-			className={styles.variableMenu}
-			menu={{
-				items,
-				search: {
-					placeholder: 'Search variables',
-					searchIcon: <Search size={14} />,
-					onSearchChange: setSearch,
-				},
-			}}
-		>
-			<Button
-				type="button"
-				variant="outlined"
-				color="secondary"
-				size="sm"
-				disabled={disabled}
-				prefix={<DollarSign size={14} className={styles.insertVariableIcon} />}
-				suffix={<ChevronDown size={14} />}
-				className={styles.insertVariable}
-				data-testid="markdown-insert-variable"
-			>
-				Insert variable
-			</Button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default InsertVariableMenu;

frontend/src/components/MarkdownEditor/MarkdownEditor.module.scss

@@ -1,253 +0,0 @@
-@use '../../styles/scrollbar' as *;
-
-.container {
-	// Read by the decoration theme in `markdownHighlight`, which can't see SCSS.
-	--md-syntax-heading: var(--text-vanilla-100);
-	--md-syntax-strong: var(--text-vanilla-100);
-	--md-syntax-emphasis: var(--text-vanilla-300);
-	--md-syntax-quote: var(--text-vanilla-400);
-	--md-syntax-marker: var(--text-robin-300);
-	--md-syntax-code: var(--text-forest-400);
-	--md-syntax-link: var(--text-robin-400);
-	--md-syntax-variable: var(--text-amber-400);
-
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	min-height: 0;
-	background: var(--l1-background);
-}
-
-:global(body.lightMode) .container {
-	--md-syntax-heading: var(--text-ink-400);
-	--md-syntax-strong: var(--text-ink-400);
-	--md-syntax-emphasis: var(--text-ink-200);
-	--md-syntax-quote: var(--text-neutral-light-100);
-	--md-syntax-marker: var(--text-robin-500);
-	--md-syntax-code: var(--text-forest-700);
-	--md-syntax-link: var(--text-robin-500);
-	--md-syntax-variable: var(--text-sienna-500);
-}
-
-.toolbar {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex-shrink: 0;
-	padding: 8px 12px;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.formatChip {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	padding: 4px 8px;
-	border: 1px solid var(--l1-border);
-	border-radius: 2px;
-	color: var(--text-sienna-400);
-}
-
-.formatLabel {
-	font-size: 12px;
-	font-weight: 500;
-	color: var(--l1-foreground);
-}
-
-.toolbarDivider {
-	width: 1px;
-	height: 16px;
-	flex-shrink: 0;
-	background: var(--l1-border);
-}
-
-.commands {
-	display: flex;
-	align-items: center;
-	gap: 2px;
-}
-
-.toolbarEnd {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-left: auto;
-}
-
-.insertVariable {
-	white-space: nowrap;
-}
-
-.insertVariableIcon {
-	color: var(--text-amber-400);
-}
-
-// The ui library's dropdown assumes a global border-box reset this app doesn't
-// have (`box-sizing` is set on `body` only and doesn't inherit): its items are
-// `width: 100%` + padding, so in the portal they lay out content-box and
-// overflow the popup by the padding — clipping the flush-right badge.
-.variableMenu,
-.variableMenu * {
-	box-sizing: border-box;
-}
-
-.variableMenu {
-	width: 320px;
-}
-
-// Shrinkable, so a clamped popup truncates the name instead of clipping the
-// badge at the content's `overflow: hidden` edge.
-.variableRow {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	flex: 1;
-	min-width: 0;
-}
-
-.variableName {
-	font-family: var(--font-family-sf-mono);
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.variableBadge {
-	flex-shrink: 0;
-	margin-left: auto;
-	padding: 2px 6px;
-	border: 1px solid color-mix(in srgb, var(--text-amber-400) 40%, transparent);
-	border-radius: 4px;
-	font-family: var(--font-family-sf-mono);
-	font-size: 10px;
-	letter-spacing: 0.08em;
-	text-transform: uppercase;
-	color: var(--text-amber-400);
-}
-
-.editorArea {
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-}
-
-.codeMirror {
-	height: 100%;
-	font-family: var(--font-family-sf-mono);
-	font-size: 13px;
-
-	:global(.cm-editor) {
-		height: 100%;
-		background: transparent;
-	}
-
-	:global(.cm-editor.cm-focused) {
-		outline: none;
-	}
-
-	:global(.cm-gutters) {
-		background: transparent;
-		border-right: none;
-		color: var(--text-neutral-dark-200);
-	}
-
-	:global(.cm-scroller) {
-		line-height: 20px;
-		padding: 0 12px;
-		@include custom-scrollbar;
-	}
-
-	:global(.cm-content) {
-		padding: 8px 0;
-	}
-}
-
-.statusBar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	flex-shrink: 0;
-	padding: 6px 12px;
-	border-top: 1px solid var(--l1-border);
-}
-
-.statusPosition {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	font-family: var(--font-family-sf-mono);
-	font-size: 11px;
-	color: var(--text-neutral-dark-200);
-}
-
-.statusSeparator {
-	color: var(--l1-border);
-}
-
-.statusCount {
-	color: inherit;
-}
-
-.statusCountOverLimit {
-	color: var(--text-cherry-400);
-	font-weight: 600;
-}
-
-.statusHint {
-	font-size: 11px;
-	color: var(--text-neutral-dark-200);
-}
-
-.helpContent {
-	width: 280px;
-	max-height: 320px;
-	overflow-y: auto;
-	@include custom-scrollbar;
-}
-
-.helpTitle {
-	display: block;
-	margin-bottom: 8px;
-	font-size: 11px;
-	font-weight: 600;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--text-neutral-dark-200);
-}
-
-.helpList {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	margin: 0;
-}
-
-.helpRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-
-	dt {
-		margin: 0;
-
-		code {
-			font-family: var(--font-family-sf-mono);
-			font-size: 11px;
-			color: var(--text-forest-400);
-		}
-	}
-
-	dd {
-		margin: 0;
-		font-size: 11px;
-		color: var(--text-neutral-dark-200);
-	}
-}
-
-// The help popover portals out of `.container`, so it can't inherit its tokens.
-:global(body.lightMode) .helpRow dt code {
-	color: var(--text-forest-700);
-}

frontend/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -1,245 +0,0 @@
-import {
-	type ReactNode,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { copilot } from '@uiw/codemirror-theme-copilot';
-import { githubLight } from '@uiw/codemirror-theme-github';
-import CodeMirror, {
-	type BasicSetupOptions,
-	EditorView,
-	type ViewUpdate,
-} from '@uiw/react-codemirror';
-import cx from 'classnames';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { formatVariableToken, MARKDOWN_MAX_LENGTH } from './constants';
-import EditorStatusBar from './EditorStatusBar';
-import EditorToolbar from './EditorToolbar';
-import { applyTransform, replaceDocument } from './editorDocument';
-import { insertText, MARKDOWN_COMMANDS } from './markdownCommands';
-import { markdownHighlight } from './markdownHighlight';
-import type {
-	CursorPosition,
-	EditorCommand,
-	EditorTransform,
-	EditorVariable,
-} from './types';
-
-import styles from './MarkdownEditor.module.scss';
-
-/** What the status bar reports. */
-type DocumentStatus = CursorPosition & { length: number };
-
-// No language grammar is loaded, so bracket/indent/completion behaviour would only
-// get in the way of prose. `indentWithTab` stays off so Tab keeps moving focus.
-const BASIC_SETUP: BasicSetupOptions = {
-	lineNumbers: true,
-	highlightActiveLine: true,
-	highlightActiveLineGutter: true,
-	foldGutter: false,
-	autocompletion: false,
-	bracketMatching: false,
-	closeBrackets: false,
-	indentOnInput: false,
-	syntaxHighlighting: false,
-	highlightSelectionMatches: false,
-	rectangularSelection: false,
-	crosshairCursor: false,
-	searchKeymap: false,
-	foldKeymap: false,
-	lintKeymap: false,
-	completionKeymap: false,
-	closeBracketsKeymap: false,
-};
-
-const EMPTY_VARIABLES: EditorVariable[] = [];
-
-export interface MarkdownEditorProps {
-	/** Seeds the document; replaced only from outside. See the sync effect. */
-	value: string;
-	onChange: (value: string) => void;
-	/** Offered by the "Insert variable" menu; the button disables when empty. */
-	variables?: EditorVariable[];
-	/** What the character counter reports against. */
-	maxLength?: number;
-	placeholder?: string;
-	readOnly?: boolean;
-	/** Shown on the toolbar chip. */
-	formatLabel?: string;
-	/** Rendered before the "Insert variable" menu. */
-	toolbarExtra?: ReactNode;
-	/** Right-hand status-bar note, e.g. "Preview updates as you type". */
-	statusHint?: ReactNode;
-	autoFocus?: boolean;
-	className?: string;
-	testId?: string;
-}
-
-/**
- * Source editor for Markdown bodies. Source-only: it neither parses nor renders
- * the body, so the preview surface and its sanitisation stay the caller's concern.
- */
-function MarkdownEditor({
-	value,
-	onChange,
-	variables = EMPTY_VARIABLES,
-	maxLength = MARKDOWN_MAX_LENGTH,
-	placeholder = 'Write Markdown…',
-	readOnly = false,
-	formatLabel = 'Markdown',
-	toolbarExtra,
-	statusHint,
-	autoFocus = false,
-	className,
-	testId = 'markdown-editor',
-}: MarkdownEditorProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const viewRef = useRef<EditorView | null>(null);
-	// Set while a programmatic replacement is in flight, so the caller isn't told
-	// about a change it asked for. `dispatch` runs listeners synchronously, so the
-	// window is exactly one call.
-	const isSyncingRef = useRef(false);
-	const previousValueRef = useRef(value);
-	const hasSeededRef = useRef(false);
-	const [isEditorReady, setIsEditorReady] = useState(false);
-	const [status, setStatus] = useState<DocumentStatus>(() => ({
-		line: 1,
-		column: 1,
-		length: value.length,
-	}));
-
-	const syncDocument = useCallback((view: EditorView, next: string): void => {
-		isSyncingRef.current = true;
-		replaceDocument(view, next);
-		isSyncingRef.current = false;
-	}, []);
-
-	const onCreateEditor = useCallback((view: EditorView): void => {
-		viewRef.current = view;
-		setIsEditorReady(true);
-	}, []);
-
-	/**
-	 * Seeds the document, then applies external replacements — nothing else. Keeping
-	 * keystrokes out of this round-trip is what stops a stale `value` from replacing
-	 * the document and resetting the caret when typing outpaces React.
-	 *
-	 * The seed can't go in `onCreateEditor`: the wrapper defaults its own `value` to
-	 * `''` and reconciles against it once the view exists, wiping anything written
-	 * before that. `isEditorReady` puts this effect after that pass, since a parent's
-	 * effects flush after its children's.
-	 *
-	 * Focus marks ownership: a replacement arriving mid-typing is dropped rather than
-	 * applied over the author.
-	 */
-	useEffect(() => {
-		const view = viewRef.current;
-		if (!view) {
-			return;
-		}
-
-		const previous = previousValueRef.current;
-		previousValueRef.current = value;
-		const isSeeding = !hasSeededRef.current;
-		hasSeededRef.current = true;
-
-		if (!isSeeding && (value === previous || view.hasFocus)) {
-			return;
-		}
-		if (view.state.doc.toString() !== value) {
-			syncDocument(view, value);
-		}
-	}, [value, isEditorReady, syncDocument]);
-
-	const handleChange = useCallback(
-		(next: string): void => {
-			if (!isSyncingRef.current) {
-				onChange(next);
-			}
-		},
-		[onChange],
-	);
-
-	const runTransform = useCallback((transform: EditorTransform): void => {
-		const view = viewRef.current;
-		if (view) {
-			applyTransform(view, transform);
-		}
-	}, []);
-
-	const onRunCommand = useCallback(
-		(command: EditorCommand): void => runTransform(command.run),
-		[runTransform],
-	);
-
-	const onInsertVariable = useCallback(
-		(name: string): void =>
-			runTransform((snapshot) => insertText(snapshot, formatVariableToken(name))),
-		[runTransform],
-	);
-
-	const extensions = useMemo(
-		() => [markdownHighlight(), EditorView.lineWrapping],
-		[],
-	);
-
-	// From the document, not `value`: the caller may debounce or drop a change, and
-	// the counter has to match what the author sees.
-	const onUpdate = useCallback((update: ViewUpdate): void => {
-		if (!update.selectionSet && !update.docChanged) {
-			return;
-		}
-		const { head } = update.state.selection.main;
-		const line = update.state.doc.lineAt(head);
-		setStatus({
-			line: line.number,
-			column: head - line.from + 1,
-			length: update.state.doc.length,
-		});
-	}, []);
-
-	return (
-		<div className={cx(styles.container, className)} data-testid={testId}>
-			<EditorToolbar
-				formatLabel={formatLabel}
-				commands={MARKDOWN_COMMANDS}
-				onRunCommand={onRunCommand}
-				variables={variables}
-				onInsertVariable={onInsertVariable}
-				disabled={readOnly}
-				extra={toolbarExtra}
-			/>
-			<div className={styles.editorArea}>
-				<CodeMirror
-					className={styles.codeMirror}
-					// No `value`: passing it re-enables the wrapper's own reconciliation,
-					// and with it the caret reset.
-					onCreateEditor={onCreateEditor}
-					onChange={handleChange}
-					onUpdate={onUpdate}
-					theme={isDarkMode ? copilot : githubLight}
-					basicSetup={BASIC_SETUP}
-					placeholder={placeholder}
-					editable={!readOnly}
-					readOnly={readOnly}
-					indentWithTab={false}
-					autoFocus={autoFocus}
-					extensions={extensions}
-					height="100%"
-				/>
-			</div>
-			<EditorStatusBar
-				cursor={status}
-				length={status.length}
-				maxLength={maxLength}
-				hint={statusHint}
-			/>
-		</div>
-	);
-}
-
-export default MarkdownEditor;

frontend/src/components/MarkdownEditor/MarkdownHelp.tsx

@@ -1,44 +0,0 @@
-import { CircleHelp } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-import { Typography } from '@signozhq/ui/typography';
-
-import { MARKDOWN_HELP_ITEMS } from './constants';
-
-import styles from './MarkdownEditor.module.scss';
-
-function MarkdownHelp(): JSX.Element {
-	return (
-		<Popover>
-			<PopoverTrigger asChild>
-				<Button
-					type="button"
-					variant="ghost"
-					color="secondary"
-					size="icon"
-					aria-label="Markdown syntax help"
-					data-testid="markdown-help-trigger"
-				>
-					<CircleHelp size={14} />
-				</Button>
-			</PopoverTrigger>
-			<PopoverContent align="end" className={styles.helpContent}>
-				<Typography.Text className={styles.helpTitle}>
-					Markdown syntax
-				</Typography.Text>
-				<dl className={styles.helpList}>
-					{MARKDOWN_HELP_ITEMS.map((item) => (
-						<div key={item.syntax} className={styles.helpRow}>
-							<dt>
-								<code>{item.syntax}</code>
-							</dt>
-							<dd>{item.label}</dd>
-						</div>
-					))}
-				</dl>
-			</PopoverContent>
-		</Popover>
-	);
-}
-
-export default MarkdownHelp;

frontend/src/components/MarkdownEditor/__tests__/MarkdownEditor.test.tsx

@@ -1,270 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-import { EditorView } from '@uiw/react-codemirror';
-import { mockCodeMirrorDomApis } from 'components/QueryBuilderV2/QueryV2/__tests__/codemirrorDomMocks';
-import {
-	act,
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
-
-import MarkdownEditor from '../MarkdownEditor';
-import type { EditorVariable } from '../types';
-
-beforeAll(() => {
-	mockCodeMirrorDomApis();
-});
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => true,
-}));
-
-const VARIABLES: EditorVariable[] = [
-	{ name: 'environment', badge: 'QUERY' },
-	{ name: 'service', badge: 'CUSTOM' },
-];
-
-/** A caller whose state trails the editor by one keystroke. */
-function LaggingHarness(): JSX.Element {
-	const [value, setValue] = useState('');
-	const previousRef = useRef('');
-	const onChange = useCallback((next: string): void => {
-		setValue(previousRef.current);
-		previousRef.current = next;
-	}, []);
-
-	return <MarkdownEditor value={value} onChange={onChange} />;
-}
-
-/** Pushes a replacement in from outside the editor. */
-function ExternalHarness(): JSX.Element {
-	const [value, setValue] = useState('before');
-
-	return (
-		<>
-			<button type="button" onClick={(): void => setValue('after')}>
-				push
-			</button>
-			<MarkdownEditor value={value} onChange={setValue} />
-		</>
-	);
-}
-
-function Harness({
-	initialValue = '',
-	maxLength,
-	variables = VARIABLES,
-}: {
-	initialValue?: string;
-	maxLength?: number;
-	variables?: EditorVariable[];
-}): JSX.Element {
-	const [value, setValue] = useState(initialValue);
-	return (
-		<MarkdownEditor
-			value={value}
-			onChange={setValue}
-			variables={variables}
-			maxLength={maxLength}
-			statusHint="Preview updates as you type"
-		/>
-	);
-}
-
-const getView = (): EditorView => {
-	const dom = document.querySelector('.cm-editor');
-	const view = dom ? EditorView.findFromDOM(dom as HTMLElement) : null;
-	if (!view) {
-		throw new Error('editor view not mounted');
-	}
-	return view;
-};
-
-const select = (from: number, to: number): void => {
-	act(() => {
-		getView().dispatch({ selection: { anchor: from, head: to } });
-	});
-};
-
-const documentText = (): string => getView().state.doc.toString();
-
-describe('MarkdownEditor', () => {
-	it('reports the caret position and character count', async () => {
-		render(<Harness initialValue={'one\ntwo'} />);
-
-		select(5, 5);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('markdown-editor-status')).toHaveTextContent(
-				'Ln 2, Col 2',
-			);
-		});
-		expect(screen.getByTestId('markdown-editor-char-count')).toHaveTextContent(
-			'7 chars',
-		);
-	});
-
-	it('flags a body over the character cap', async () => {
-		render(<Harness initialValue="123456" maxLength={5} />);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('markdown-editor-char-count')).toHaveTextContent(
-				'6 / 5 chars',
-			);
-		});
-	});
-
-	it('applies a toolbar command to the selection', async () => {
-		render(<Harness initialValue="a word b" />);
-
-		select(2, 6);
-		await userEvent.click(screen.getByTestId('markdown-command-bold'));
-
-		await waitFor(() => {
-			expect(documentText()).toBe('a **word** b');
-		});
-	});
-
-	it('inserts a variable token at the caret', async () => {
-		render(<Harness initialValue="env: " />);
-
-		select(5, 5);
-		await userEvent.click(screen.getByTestId('markdown-insert-variable'));
-
-		// The row shows the name and kind badge.
-		const row = await screen.findByTestId('markdown-variable-environment');
-		expect(row).toHaveTextContent('$environment');
-		expect(row).toHaveTextContent('QUERY');
-
-		// fireEvent: userEvent's pointer-down path walks DOM selection APIs the
-		// CodeMirror mocks stub out.
-		fireEvent.click(row);
-
-		await waitFor(() => {
-			expect(documentText()).toBe('env: $environment');
-		});
-	});
-
-	it('colours Markdown syntax and variable tokens in the source', async () => {
-		render(<Harness initialValue={'## Runbook\nowner {{team}}'} />);
-
-		await waitFor(() => {
-			expect(document.querySelector('.cm-md-heading')).toBeInTheDocument();
-		});
-		expect(document.querySelector('.cm-md-variable')).toHaveTextContent(
-			'{{team}}',
-		);
-	});
-
-	describe('uncontrolled document', () => {
-		const type = (at: number, text: string): void => {
-			act(() => {
-				getView().dispatch({
-					changes: { from: at, insert: text },
-					selection: { anchor: at + text.length },
-				});
-			});
-		};
-
-		const focusEditor = (): void => {
-			act(() => {
-				getView().focus();
-			});
-		};
-
-		it('keeps the document and caret while the caller lags behind the typing', () => {
-			render(<LaggingHarness />);
-			focusEditor();
-
-			type(0, 'a');
-			type(1, 'b');
-			type(2, 'c');
-
-			expect(documentText()).toBe('abc');
-			expect(getView().state.selection.main.head).toBe(3);
-		});
-
-		it('reports every keystroke to the caller', () => {
-			const onChange = jest.fn();
-			render(<MarkdownEditor value="ab" onChange={onChange} />);
-
-			type(2, 'c');
-
-			expect(onChange).toHaveBeenLastCalledWith('abc');
-		});
-
-		it('does not report the seed back as a change', () => {
-			const onChange = jest.fn();
-			render(<MarkdownEditor value="seeded" onChange={onChange} />);
-
-			expect(documentText()).toBe('seeded');
-			expect(onChange).not.toHaveBeenCalled();
-		});
-
-		it('applies an external replacement while the editor is unfocused', async () => {
-			render(<ExternalHarness />);
-
-			await userEvent.click(screen.getByRole('button', { name: 'push' }));
-
-			expect(documentText()).toBe('after');
-		});
-
-		it('ignores a replacement that arrives while the author is still typing', () => {
-			render(<ExternalHarness />);
-			focusEditor();
-
-			// fireEvent: a real click would blur the editor first. This covers an update
-			// arriving on its own, while the author is still in the document.
-			fireEvent.click(screen.getByRole('button', { name: 'push' }));
-
-			expect(documentText()).toBe('before');
-		});
-
-		it('counts characters from the document, not from the lagging value', async () => {
-			render(<MarkdownEditor value="ab" onChange={jest.fn()} />);
-
-			type(2, 'cde');
-
-			await waitFor(() => {
-				expect(screen.getByTestId('markdown-editor-char-count')).toHaveTextContent(
-					'5 chars',
-				);
-			});
-		});
-	});
-
-	it('offers both list kinds in the toolbar', () => {
-		render(<Harness />);
-
-		expect(
-			screen.getByTestId('markdown-command-bulleted-list'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByTestId('markdown-command-numbered-list'),
-		).toBeInTheDocument();
-	});
-
-	it('disables authoring affordances when read-only', () => {
-		render(
-			<MarkdownEditor
-				value="body"
-				onChange={jest.fn()}
-				variables={VARIABLES}
-				readOnly
-			/>,
-		);
-
-		expect(screen.getByTestId('markdown-command-bold')).toBeDisabled();
-		expect(screen.getByTestId('markdown-insert-variable')).toBeDisabled();
-	});
-
-	it('hides the insert-variable control when none are available', () => {
-		render(<Harness variables={[]} />);
-
-		expect(
-			screen.queryByTestId('markdown-insert-variable'),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/components/MarkdownEditor/__tests__/markdownCommands.test.ts

@@ -1,258 +0,0 @@
-import { insertText, MARKDOWN_COMMANDS } from '../markdownCommands';
-import type { EditorSnapshot, EditorTransform } from '../types';
-
-const commandById = (id: string): EditorTransform => {
-	const command = MARKDOWN_COMMANDS.find((entry) => entry.id === id);
-	if (!command) {
-		throw new Error(`unknown command: ${id}`);
-	}
-	return command.run;
-};
-
-const heading = commandById('heading');
-const bold = commandById('bold');
-const italic = commandById('italic');
-const bulletedList = commandById('bulleted-list');
-const numberedList = commandById('numbered-list');
-const link = commandById('link');
-const code = commandById('code');
-const table = commandById('table');
-
-/** `|` marks a caret, `[...]` a range, so expectations read like the editor looks. */
-const snapshot = (marked: string): EditorSnapshot => {
-	if (marked.includes('|')) {
-		const caret = marked.indexOf('|');
-		return {
-			text: marked.replace('|', ''),
-			selectionStart: caret,
-			selectionEnd: caret,
-		};
-	}
-	const start = marked.indexOf('[');
-	const end = marked.indexOf(']') - 1;
-	return {
-		text: marked.replace('[', '').replace(']', ''),
-		selectionStart: start,
-		selectionEnd: end,
-	};
-};
-
-const selectionOf = (result: EditorSnapshot): string =>
-	result.text.slice(result.selectionStart, result.selectionEnd);
-
-describe('heading', () => {
-	it('prefixes the caret line and keeps the caret on the same character', () => {
-		const result = heading(snapshot('Chec|kout'));
-
-		expect(result.text).toBe('## Checkout');
-		expect(result.selectionStart).toBe(7);
-	});
-
-	it('strips the prefix when every selected line already has one', () => {
-		const result = heading({
-			text: '## one\n### two',
-			selectionStart: 0,
-			selectionEnd: 13,
-		});
-
-		expect(result.text).toBe('one\ntwo');
-	});
-
-	it('adds the prefix when only some selected lines have one', () => {
-		const result = heading({
-			text: '## one\ntwo',
-			selectionStart: 0,
-			selectionEnd: 10,
-		});
-
-		expect(result.text).toBe('## ## one\n## two');
-	});
-
-	it('does not pull in the line after a selection ending on a line break', () => {
-		const result = heading({
-			text: 'one\ntwo',
-			selectionStart: 0,
-			selectionEnd: 4,
-		});
-
-		expect(result.text).toBe('## one\ntwo');
-	});
-});
-
-describe('bulleted list', () => {
-	it('bullets every line of a multi-line selection', () => {
-		const result = bulletedList({
-			text: 'one\ntwo',
-			selectionStart: 0,
-			selectionEnd: 7,
-		});
-
-		expect(result.text).toBe('- one\n- two');
-		expect(selectionOf(result)).toBe('- one\n- two');
-	});
-
-	it('unbullets a list written with a different marker', () => {
-		const result = bulletedList({
-			text: '* one\n+ two',
-			selectionStart: 0,
-			selectionEnd: 11,
-		});
-
-		expect(result.text).toBe('one\ntwo');
-	});
-});
-
-describe('numbered list', () => {
-	it('numbers each line of the selection in order', () => {
-		const result = numberedList({
-			text: 'one\ntwo\nthree',
-			selectionStart: 0,
-			selectionEnd: 13,
-		});
-
-		expect(result.text).toBe('1. one\n2. two\n3. three');
-	});
-
-	it('unnumbers a list whose numbering is not sequential', () => {
-		const result = numberedList({
-			text: '1. one\n5. two',
-			selectionStart: 0,
-			selectionEnd: 13,
-		});
-
-		expect(result.text).toBe('one\ntwo');
-	});
-});
-
-describe('switching between list kinds', () => {
-	it('converts bullets to numbers rather than marking them twice', () => {
-		const result = numberedList({
-			text: '- one\n- two',
-			selectionStart: 0,
-			selectionEnd: 11,
-		});
-
-		expect(result.text).toBe('1. one\n2. two');
-	});
-
-	it('converts numbers to bullets', () => {
-		const result = bulletedList({
-			text: '1. one\n2. two',
-			selectionStart: 0,
-			selectionEnd: 13,
-		});
-
-		expect(result.text).toBe('- one\n- two');
-	});
-
-	it('keeps indentation so nested items stay nested', () => {
-		const result = numberedList({
-			text: 'one\n    - nested',
-			selectionStart: 0,
-			selectionEnd: 16,
-		});
-
-		expect(result.text).toBe('1. one\n    2. nested');
-	});
-});
-
-describe('bold and italic', () => {
-	it('wraps the selection and keeps the original text selected', () => {
-		const result = bold(snapshot('a [word] b'));
-
-		expect(result.text).toBe('a **word** b');
-		expect(selectionOf(result)).toBe('word');
-	});
-
-	it('unwraps when the markers sit inside the selection', () => {
-		const result = bold({
-			text: 'a **word** b',
-			selectionStart: 2,
-			selectionEnd: 10,
-		});
-
-		expect(result.text).toBe('a word b');
-		expect(selectionOf(result)).toBe('word');
-	});
-
-	it('unwraps when the markers sit just outside the selection', () => {
-		const result = bold({
-			text: 'a **word** b',
-			selectionStart: 4,
-			selectionEnd: 8,
-		});
-
-		expect(result.text).toBe('a word b');
-		expect(selectionOf(result)).toBe('word');
-	});
-
-	it('leaves the caret between the markers when nothing is selected', () => {
-		const result = italic(snapshot('a |b'));
-
-		expect(result.text).toBe('a __b');
-		expect(result.selectionStart).toBe(3);
-		expect(result.selectionEnd).toBe(3);
-	});
-
-	it('does not mistake a leading document boundary for a marker', () => {
-		const result = bold(snapshot('[word] tail'));
-
-		expect(result.text).toBe('**word** tail');
-	});
-});
-
-describe('link', () => {
-	it('selects the url when the label came from the selection', () => {
-		const result = link(snapshot('see [docs] now'));
-
-		expect(result.text).toBe('see [docs](https://) now');
-		expect(selectionOf(result)).toBe('https://');
-	});
-
-	it('selects the label placeholder when nothing was selected', () => {
-		const result = link(snapshot('see |'));
-
-		expect(result.text).toBe('see [text](https://)');
-		expect(selectionOf(result)).toBe('text');
-	});
-});
-
-describe('code', () => {
-	it('uses backticks for a single-line selection', () => {
-		const result = code(snapshot('run [npm] here'));
-
-		expect(result.text).toBe('run `npm` here');
-	});
-
-	it('fences a multi-line selection and selects its content', () => {
-		const result = code({
-			text: 'one\ntwo',
-			selectionStart: 0,
-			selectionEnd: 7,
-		});
-
-		expect(result.text).toBe('```\none\ntwo\n```');
-		expect(selectionOf(result)).toBe('one\ntwo');
-	});
-});
-
-describe('table', () => {
-	it('starts the skeleton on its own line and selects the first header cell', () => {
-		const result = table(snapshot('intro|'));
-
-		expect(result.text).toBe(
-			'intro\n| Column | Column |\n| --- | --- |\n|  |  |',
-		);
-		expect(selectionOf(result)).toBe('Column');
-	});
-});
-
-describe('insertText', () => {
-	it('replaces the selection and leaves the caret after the insertion', () => {
-		const result = insertText(snapshot('env is [old]'), '{{env}}');
-
-		expect(result.text).toBe('env is {{env}}');
-		expect(result.selectionStart).toBe(14);
-		expect(result.selectionEnd).toBe(14);
-	});
-});

frontend/src/components/MarkdownEditor/constants.ts

@@ -1,24 +0,0 @@
-// The body is persisted inline in the dashboard JSON, so its length is capped.
-export const MARKDOWN_MAX_LENGTH = 16000;
-
-/** The canonical syntax; the renderer resolves the other three too. */
-export const formatVariableToken = (name: string): string => `$${name}`;
-
-export const MARKDOWN_HELP_ITEMS: { syntax: string; label: string }[] = [
-	// First: consecutive lines joining into one paragraph is the CommonMark rule
-	// authors trip over before any of the formatting syntax.
-	{ syntax: 'blank line', label: 'New paragraph' },
-	{ syntax: '2 spaces + ⏎', label: 'Line break' },
-	{ syntax: '# Heading', label: 'Heading (1–6 #)' },
-	{ syntax: '**bold**', label: 'Bold' },
-	{ syntax: '_italic_', label: 'Italic' },
-	{ syntax: '- item', label: 'Bulleted list' },
-	{ syntax: '1. item', label: 'Numbered list' },
-	{ syntax: '- [ ] task', label: 'Task list' },
-	{ syntax: '[label](url)', label: 'Link' },
-	{ syntax: '![alt](url)', label: 'Image' },
-	{ syntax: '`code`', label: 'Inline code' },
-	{ syntax: '```lang', label: 'Code block' },
-	{ syntax: '> quote', label: 'Blockquote' },
-	{ syntax: '| a | b |', label: 'Table' },
-];

frontend/src/components/MarkdownEditor/editorDocument.ts

@@ -1,69 +0,0 @@
-import { EditorView } from '@uiw/react-codemirror';
-
-import type { EditorSnapshot, EditorTransform } from './types';
-
-// Narrows a whole-document replacement to the range that changed, so a toolbar
-// action doesn't invalidate the document's decorations or scroll position.
-function toChangeSpec(
-	previous: string,
-	next: string,
-): { from: number; to: number; insert: string } | null {
-	if (previous === next) {
-		return null;
-	}
-
-	const shorter = Math.min(previous.length, next.length);
-	let start = 0;
-	while (start < shorter && previous[start] === next[start]) {
-		start += 1;
-	}
-
-	let previousEnd = previous.length;
-	let nextEnd = next.length;
-	while (
-		previousEnd > start &&
-		nextEnd > start &&
-		previous[previousEnd - 1] === next[nextEnd - 1]
-	) {
-		previousEnd -= 1;
-		nextEnd -= 1;
-	}
-
-	return { from: start, to: previousEnd, insert: next.slice(start, nextEnd) };
-}
-
-export function readSnapshot(view: EditorView): EditorSnapshot {
-	const range = view.state.selection.main;
-	return {
-		text: view.state.doc.toString(),
-		selectionStart: range.from,
-		selectionEnd: range.to,
-	};
-}
-
-/** Returns whether the transform ran, as CodeMirror's keymap contract expects. */
-export function applyTransform(
-	view: EditorView,
-	transform: EditorTransform,
-): boolean {
-	if (view.state.readOnly) {
-		return false;
-	}
-
-	const next = transform(readSnapshot(view));
-	const changes = toChangeSpec(view.state.doc.toString(), next.text);
-	view.dispatch({
-		...(changes ? { changes } : {}),
-		selection: { anchor: next.selectionStart, head: next.selectionEnd },
-		scrollIntoView: true,
-	});
-	view.focus();
-	return true;
-}
-
-/** Replaces the whole document, for seeding and external replacements. */
-export function replaceDocument(view: EditorView, next: string): void {
-	view.dispatch({
-		changes: { from: 0, to: view.state.doc.length, insert: next },
-	});
-}

frontend/src/components/MarkdownEditor/markdownCommands.ts

@@ -1,269 +0,0 @@
-import type { EditorCommand, EditorSnapshot, EditorTransform } from './types';
-
-const BOLD_MARKER = '**';
-const ITALIC_MARKER = '_';
-const INLINE_CODE_MARKER = '`';
-const CODE_FENCE = '```';
-const HEADING_PREFIX = '## ';
-const BULLET_MARKER = '- ';
-
-const HEADING_PATTERN = /^ {0,3}#{1,6} /;
-const BULLET_LIST_PATTERN = /^[ \t]*[-*+] /;
-const ORDERED_LIST_PATTERN = /^[ \t]*\d+\. /;
-// Either kind of marker, matched after the indent has been split off.
-const LIST_MARKER_PATTERN = /^(?:[-*+]|\d+\.) /;
-const INDENT_PATTERN = /^[ \t]*/;
-
-const LINK_LABEL_PLACEHOLDER = 'text';
-const LINK_URL_PLACEHOLDER = 'https://';
-const TABLE_CELL_PLACEHOLDER = 'Column';
-const TABLE_SNIPPET = [
-	`| ${TABLE_CELL_PLACEHOLDER} | ${TABLE_CELL_PLACEHOLDER} |`,
-	'| --- | --- |',
-	'|  |  |',
-].join('\n');
-
-interface LineRange {
-	start: number;
-	end: number;
-}
-
-// A selection ending exactly on a line break stops there rather than pulling in
-// the next line, so "select the line, hit list" doesn't bullet the line below too.
-function expandToLines(text: string, from: number, to: number): LineRange {
-	const end = to > from && text[to - 1] === '\n' ? to - 1 : to;
-	const breakBefore = from === 0 ? -1 : text.lastIndexOf('\n', from - 1);
-	const breakAfter = text.indexOf('\n', end);
-	return {
-		start: breakBefore + 1,
-		end: breakAfter === -1 ? text.length : breakAfter,
-	};
-}
-
-/** Pads `block` so it starts and ends on its own line. */
-function replaceWithBlock(
-	snapshot: EditorSnapshot,
-	block: string,
-): { text: string; blockStart: number } {
-	const { text, selectionStart, selectionEnd } = snapshot;
-	const before = text.slice(0, selectionStart);
-	const after = text.slice(selectionEnd);
-	const lead = before === '' || before.endsWith('\n') ? '' : '\n';
-	const trail = after === '' || after.startsWith('\n') ? '' : '\n';
-	return {
-		text: before + lead + block + trail + after,
-		blockStart: before.length + lead.length,
-	};
-}
-
-/** Rewrites every line the selection touches. */
-function replaceLines(
-	snapshot: EditorSnapshot,
-	mapLines: (lines: string[]) => string[],
-): EditorSnapshot {
-	const { text, selectionStart, selectionEnd } = snapshot;
-	const { start, end } = expandToLines(text, selectionStart, selectionEnd);
-	const lines = text.slice(start, end).split('\n');
-	const nextLines = mapLines(lines);
-	const block = nextLines.join('\n');
-	const nextText = text.slice(0, start) + block + text.slice(end);
-
-	if (selectionStart !== selectionEnd) {
-		return {
-			text: nextText,
-			selectionStart: start,
-			selectionEnd: start + block.length,
-		};
-	}
-
-	// Caret-only: the range covers one line, so shift by that line's delta.
-	const shifted = selectionStart + nextLines[0].length - lines[0].length;
-	const caret = Math.min(Math.max(shifted, start), start + nextLines[0].length);
-	return { text: nextText, selectionStart: caret, selectionEnd: caret };
-}
-
-/** Strips `prefix` when every selected line already matches `pattern`, else adds it. */
-function toggleLinePrefix(prefix: string, pattern: RegExp): EditorTransform {
-	return (snapshot): EditorSnapshot =>
-		replaceLines(snapshot, (lines) => {
-			const isApplied = lines.every((line) => pattern.test(line));
-			return lines.map((line) =>
-				isApplied ? line.replace(pattern, '') : `${prefix}${line}`,
-			);
-		});
-}
-
-/**
- * Toggles this kind of list marker. A line carrying the *other* kind is converted
- * rather than marked twice, and indentation is preserved so nesting survives.
- * `markerAt` takes the line's position, which is what lets an ordered list number.
- */
-function toggleList(
-	pattern: RegExp,
-	markerAt: (index: number) => string,
-): EditorTransform {
-	return (snapshot): EditorSnapshot =>
-		replaceLines(snapshot, (lines) => {
-			const isApplied = lines.every((line) => pattern.test(line));
-			return lines.map((line, index) => {
-				const indent = INDENT_PATTERN.exec(line)?.[0] ?? '';
-				const body = line.slice(indent.length).replace(LIST_MARKER_PATTERN, '');
-				return isApplied
-					? `${indent}${body}`
-					: `${indent}${markerAt(index)}${body}`;
-			});
-		});
-}
-
-/**
- * Unwraps when the markers are already there, whether they sit inside the selection
- * (`**bold**` selected whole) or just outside it (only `bold` selected).
- */
-function toggleWrap(marker: string): EditorTransform {
-	return ({ text, selectionStart, selectionEnd }): EditorSnapshot => {
-		const selected = text.slice(selectionStart, selectionEnd);
-		const width = marker.length;
-
-		if (
-			selected.length >= width * 2 &&
-			selected.startsWith(marker) &&
-			selected.endsWith(marker)
-		) {
-			const inner = selected.slice(width, -width);
-			return {
-				text: text.slice(0, selectionStart) + inner + text.slice(selectionEnd),
-				selectionStart,
-				selectionEnd: selectionStart + inner.length,
-			};
-		}
-
-		if (
-			selectionStart >= width &&
-			text.slice(selectionStart - width, selectionStart) === marker &&
-			text.slice(selectionEnd, selectionEnd + width) === marker
-		) {
-			return {
-				text:
-					text.slice(0, selectionStart - width) +
-					selected +
-					text.slice(selectionEnd + width),
-				selectionStart: selectionStart - width,
-				selectionEnd: selectionStart - width + selected.length,
-			};
-		}
-
-		return {
-			text:
-				text.slice(0, selectionStart) +
-				marker +
-				selected +
-				marker +
-				text.slice(selectionEnd),
-			selectionStart: selectionStart + width,
-			selectionEnd: selectionStart + width + selected.length,
-		};
-	};
-}
-
-/** Lands the selection on whichever half is still a placeholder. */
-const insertLink: EditorTransform = ({
-	text,
-	selectionStart,
-	selectionEnd,
-}): EditorSnapshot => {
-	const selected = text.slice(selectionStart, selectionEnd);
-	const label = selected || LINK_LABEL_PLACEHOLDER;
-	const snippet = `[${label}](${LINK_URL_PLACEHOLDER})`;
-	const nextText =
-		text.slice(0, selectionStart) + snippet + text.slice(selectionEnd);
-	// `[` + label + `](` is label.length + 3 characters.
-	const target = selected
-		? {
-				from: selectionStart + label.length + 3,
-				length: LINK_URL_PLACEHOLDER.length,
-			}
-		: { from: selectionStart + 1, length: label.length };
-
-	return {
-		text: nextText,
-		selectionStart: target.from,
-		selectionEnd: target.from + target.length,
-	};
-};
-
-/** Backticks for a single-line selection, a fence for a multi-line one. */
-const insertCode: EditorTransform = (snapshot): EditorSnapshot => {
-	const { text, selectionStart, selectionEnd } = snapshot;
-	const selected = text.slice(selectionStart, selectionEnd);
-	if (!selected.includes('\n')) {
-		return toggleWrap(INLINE_CODE_MARKER)(snapshot);
-	}
-
-	const { text: nextText, blockStart } = replaceWithBlock(
-		snapshot,
-		`${CODE_FENCE}\n${selected}\n${CODE_FENCE}`,
-	);
-	const contentStart = blockStart + CODE_FENCE.length + 1;
-	return {
-		text: nextText,
-		selectionStart: contentStart,
-		selectionEnd: contentStart + selected.length,
-	};
-};
-
-/** Selects the first header cell, for immediate typing. */
-const insertTable: EditorTransform = (snapshot): EditorSnapshot => {
-	const { text, blockStart } = replaceWithBlock(snapshot, TABLE_SNIPPET);
-	const firstCell = blockStart + TABLE_SNIPPET.indexOf(TABLE_CELL_PLACEHOLDER);
-	return {
-		text,
-		selectionStart: firstCell,
-		selectionEnd: firstCell + TABLE_CELL_PLACEHOLDER.length,
-	};
-};
-
-/** Replaces the selection and leaves the caret after the insertion. */
-export function insertText(
-	snapshot: EditorSnapshot,
-	value: string,
-): EditorSnapshot {
-	const { text, selectionStart, selectionEnd } = snapshot;
-	const caret = selectionStart + value.length;
-	return {
-		text: text.slice(0, selectionStart) + value + text.slice(selectionEnd),
-		selectionStart: caret,
-		selectionEnd: caret,
-	};
-}
-
-/** Display order. A new action is an entry here plus an icon in `EditorToolbar`. */
-export const MARKDOWN_COMMANDS: EditorCommand[] = [
-	{
-		id: 'heading',
-		label: 'Heading',
-		run: toggleLinePrefix(HEADING_PREFIX, HEADING_PATTERN),
-	},
-	{
-		id: 'bold',
-		label: 'Bold',
-		run: toggleWrap(BOLD_MARKER),
-	},
-	{
-		id: 'italic',
-		label: 'Italic',
-		run: toggleWrap(ITALIC_MARKER),
-	},
-	{
-		id: 'bulleted-list',
-		label: 'Bulleted list',
-		run: toggleList(BULLET_LIST_PATTERN, () => BULLET_MARKER),
-	},
-	{
-		id: 'numbered-list',
-		label: 'Numbered list',
-		run: toggleList(ORDERED_LIST_PATTERN, (index) => `${index + 1}. `),
-	},
-	{ id: 'link', label: 'Link', run: insertLink },
-	{ id: 'code', label: 'Code', run: insertCode },
-	{ id: 'table', label: 'Table', run: insertTable },
-];

frontend/src/components/MarkdownEditor/markdownHighlight.ts

@@ -1,149 +0,0 @@
-import type { Extension, Line, Range } from '@codemirror/state';
-import {
-	Decoration,
-	type DecorationSet,
-	EditorView,
-	ViewPlugin,
-	type ViewUpdate,
-} from '@codemirror/view';
-
-const FENCE_PATTERN = /^ {0,3}(```|~~~)/;
-const HEADING_PATTERN = /^ {0,3}#{1,6} /;
-const QUOTE_PATTERN = /^ {0,3}> ?/;
-const LIST_MARKER_PATTERN = /^ {0,3}([-*+]|\d+\.) /;
-
-/**
- * Convention: capture group 1, when present, is a left guard the token excludes —
- * the token runs from the end of that group to the end of the match. Lookbehind is
- * avoided for Safari compatibility, so guards are captured rather than asserted.
- */
-const INLINE_PATTERNS: { pattern: RegExp; className: string }[] = [
-	{ pattern: /`[^`\n]+`/g, className: 'cm-md-code' },
-	{ pattern: /\*\*[^*\n]+\*\*/g, className: 'cm-md-strong' },
-	{ pattern: /(^|[^\w*_`])_[^_\n]+_(?![\w_])/g, className: 'cm-md-emphasis' },
-	{ pattern: /!?\[[^\]\n]*\]\([^)\n]*\)/g, className: 'cm-md-link' },
-	{
-		// The four variable syntaxes a dashboard body may carry.
-		pattern:
-			/\{\{\s*\.?[\w.-]+\s*\}\}|\[\[\s*[\w.-]+\s*\]\]|\$(?!__)[A-Za-z_]\w*(?:\.\w+)*/g,
-		className: 'cm-md-variable',
-	},
-];
-
-const MARKS = {
-	heading: Decoration.mark({ class: 'cm-md-heading' }),
-	quote: Decoration.mark({ class: 'cm-md-quote' }),
-	listMarker: Decoration.mark({ class: 'cm-md-list-marker' }),
-	code: Decoration.mark({ class: 'cm-md-code' }),
-} as const;
-
-const INLINE_MARKS = INLINE_PATTERNS.map(({ pattern, className }) => ({
-	pattern,
-	mark: Decoration.mark({ class: className }),
-}));
-
-function pushInlineMarks(
-	lineText: string,
-	lineFrom: number,
-	ranges: Range<Decoration>[],
-): void {
-	INLINE_MARKS.forEach(({ pattern, mark }) => {
-		pattern.lastIndex = 0;
-		let match = pattern.exec(lineText);
-		while (match !== null) {
-			const guardLength = match[1]?.length ?? 0;
-			const from = lineFrom + match.index + guardLength;
-			const to = lineFrom + match.index + match[0].length;
-			if (to > from) {
-				ranges.push(mark.range(from, to));
-			}
-			match = pattern.exec(lineText);
-		}
-	});
-}
-
-function pushBlockMark(line: Line, ranges: Range<Decoration>[]): void {
-	if (HEADING_PATTERN.test(line.text)) {
-		ranges.push(MARKS.heading.range(line.from, line.to));
-		return;
-	}
-	if (QUOTE_PATTERN.test(line.text)) {
-		ranges.push(MARKS.quote.range(line.from, line.to));
-		return;
-	}
-	const listMarker = LIST_MARKER_PATTERN.exec(line.text);
-	if (listMarker) {
-		ranges.push(
-			MARKS.listMarker.range(line.from, line.from + listMarker[0].length),
-		);
-	}
-}
-
-// Scans the whole document rather than the viewport: fenced blocks opening above
-// the visible range would otherwise be mis-detected. Bounded by the length cap.
-function buildDecorations(view: EditorView): DecorationSet {
-	const { doc } = view.state;
-	const ranges: Range<Decoration>[] = [];
-	let isInsideFence = false;
-
-	for (let lineNumber = 1; lineNumber <= doc.lines; lineNumber += 1) {
-		const line = doc.line(lineNumber);
-		const isFenceDelimiter = FENCE_PATTERN.test(line.text);
-
-		if (isFenceDelimiter || isInsideFence) {
-			if (line.to > line.from) {
-				ranges.push(MARKS.code.range(line.from, line.to));
-			}
-			isInsideFence = isFenceDelimiter ? !isInsideFence : isInsideFence;
-		} else {
-			pushBlockMark(line, ranges);
-			pushInlineMarks(line.text, line.from, ranges);
-		}
-	}
-
-	return Decoration.set(ranges, true);
-}
-
-// Colours come from custom properties so the SCSS module owns light/dark.
-const syntaxTheme = EditorView.theme({
-	'.cm-md-heading': {
-		color: 'var(--md-syntax-heading)',
-		fontWeight: '600',
-	},
-	'.cm-md-quote': { color: 'var(--md-syntax-quote)', fontStyle: 'italic' },
-	'.cm-md-list-marker': { color: 'var(--md-syntax-marker)' },
-	'.cm-md-code': { color: 'var(--md-syntax-code)' },
-	'.cm-md-strong': { color: 'var(--md-syntax-strong)', fontWeight: '600' },
-	'.cm-md-emphasis': {
-		color: 'var(--md-syntax-emphasis)',
-		fontStyle: 'italic',
-	},
-	'.cm-md-link': { color: 'var(--md-syntax-link)' },
-	'.cm-md-variable': { color: 'var(--md-syntax-variable)' },
-});
-
-const highlightPlugin = ViewPlugin.fromClass(
-	class {
-		decorations: DecorationSet;
-
-		constructor(view: EditorView) {
-			this.decorations = buildDecorations(view);
-		}
-
-		update(update: ViewUpdate): void {
-			if (update.docChanged || update.viewportChanged) {
-				this.decorations = buildDecorations(update.view);
-			}
-		}
-	},
-	{ decorations: (plugin): DecorationSet => plugin.decorations },
-);
-
-/**
- * Decorations rather than a grammar, so the editor stays on the CodeMirror packages
- * already bundled — no `@codemirror/lang-markdown` / `@lezer` for what is only a
- * colouring pass over a body the renderer parses for real.
- */
-export function markdownHighlight(): Extension {
-	return [highlightPlugin, syntaxTheme];
-}

frontend/src/components/MarkdownEditor/types.ts

@@ -1,27 +0,0 @@
-/** The value every editor command reads and returns. */
-export interface EditorSnapshot {
-	text: string;
-	selectionStart: number;
-	selectionEnd: number;
-}
-
-export type EditorTransform = (snapshot: EditorSnapshot) => EditorSnapshot;
-
-export interface EditorVariable {
-	name: string;
-	/** Short tag for the variable's kind, e.g. "QUERY". */
-	badge?: string;
-}
-
-export interface EditorCommand {
-	id: string;
-	/** Accessible name and tooltip for the toolbar button. */
-	label: string;
-	run: EditorTransform;
-}
-
-/** 1-based, as the status bar reports it. */
-export interface CursorPosition {
-	line: number;
-	column: number;
-}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -16,8 +16,6 @@ import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
 import { Button, Card, Collapse, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
 import {
 	negationQueryOperatorSuggestions,
@@ -54,6 +52,12 @@ import {
 	SUGGESTION_FETCH_DEBOUNCE_MS,
 	SUGGESTIONS_SECTION,
 } from './constants';
+import {
+	fetchFieldKeysForQuery,
+	fetchFieldValuesForQuery,
+	SuggestedFieldKey,
+	SuggestedFieldKeysByName,
+} from './fieldSuggestions';
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
@@ -261,10 +265,8 @@ function QuerySearch({
 	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	// Add back the generateOptions function and useEffect
-	const generateOptions = (keys: {
-		[key: string]: QueryKeyDataSuggestionsProps[];
-	}): any[] =>
-		Object.values(keys).flatMap((items: QueryKeyDataSuggestionsProps[]) =>
+	const generateOptions = (keys: SuggestedFieldKeysByName): any[] =>
+		Object.values(keys).flatMap((items: SuggestedFieldKey[]) =>
 			items.map(({ name, fieldDataType, fieldContext }) => ({
 				label: name,
 				type: fieldDataType === 'string' ? 'keyword' : fieldDataType,
@@ -317,8 +319,9 @@ function QuerySearch({
 
 			lastFetchedKeyRef.current = searchText || '';
 
-			const response = await getKeySuggestions({
-				signal: dataSource,
+			const response = await fetchFieldKeysForQuery({
+				builderQueryType: queryData.builderQueryType,
+				dataSource,
 				searchText: searchText || '',
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
@@ -360,6 +363,7 @@ function QuerySearch({
 			hardcodedAttributeKeys,
 			showFilterSuggestionsWithoutMetric,
 			metricNamespace,
+			queryData.builderQueryType,
 		],
 	);
 
@@ -493,10 +497,11 @@ function QuerySearch({
 			try {
 				const values = valueSuggestionsOverride
 					? await valueSuggestionsOverride(key, sanitizedSearchText)
-					: await getValueSuggestions({
+					: await fetchFieldValuesForQuery({
+							builderQueryType: queryData.builderQueryType,
+							dataSource,
 							key,
 							searchText: sanitizedSearchText,
-							signal: dataSource,
 							signalSource: signalSource as 'meter' | '',
 							metricName: debouncedMetricName ?? undefined,
 						}).then((response) => {
@@ -601,6 +606,7 @@ function QuerySearch({
 			signalSource,
 			toggleSuggestions,
 			valueSuggestionsOverride,
+			queryData.builderQueryType,
 		],
 	);
 

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/fieldSuggestions.test.ts

@@ -0,0 +1,215 @@
+import {
+	getAIObservabilityFieldsKeys,
+	getAIObservabilityFieldsValues,
+} from 'api/generated/services/ai-observability';
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
+import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	fetchFieldKeysForQuery,
+	fetchFieldValuesForQuery,
+} from '../fieldSuggestions';
+
+jest.mock('api/generated/services/ai-observability', () => ({
+	getAIObservabilityFieldsKeys: jest.fn(),
+	getAIObservabilityFieldsValues: jest.fn(),
+}));
+
+jest.mock('api/querySuggestions/getKeySuggestions', () => ({
+	getKeySuggestions: jest.fn(),
+}));
+
+jest.mock('api/querySuggestions/getValueSuggestion', () => ({
+	getValueSuggestions: jest.fn(),
+}));
+
+const mockedAIKeys = getAIObservabilityFieldsKeys as jest.MockedFunction<
+	typeof getAIObservabilityFieldsKeys
+>;
+const mockedGenericKeys = getKeySuggestions as jest.MockedFunction<
+	typeof getKeySuggestions
+>;
+const mockedAIValues = getAIObservabilityFieldsValues as jest.MockedFunction<
+	typeof getAIObservabilityFieldsValues
+>;
+const mockedGenericValues = getValueSuggestions as jest.MockedFunction<
+	typeof getValueSuggestions
+>;
+
+const aiValuesResponse = (
+	values: { stringValues?: string[]; numberValues?: number[] } | null,
+	complete = true,
+): Awaited<ReturnType<typeof getAIObservabilityFieldsValues>> =>
+	({
+		status: 'success',
+		data: { complete, values },
+	}) as Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>;
+
+describe('fetchFieldKeysForQuery', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
+		mockedAIKeys.mockResolvedValue({
+			status: 'success',
+			data: {
+				complete: true,
+				keys: { llm_call_count: [{ name: 'llm_call_count' }] },
+			},
+		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
+
+		const keys = await fetchFieldKeysForQuery({
+			builderQueryType: 'builder_ai_query',
+			dataSource: DataSource.TRACES,
+			searchText: 'llm',
+		});
+
+		expect(mockedAIKeys).toHaveBeenCalledWith({ searchText: 'llm' });
+		expect(mockedGenericKeys).not.toHaveBeenCalled();
+		expect(keys.data.data).toStrictEqual({
+			complete: true,
+			keys: { llm_call_count: [{ name: 'llm_call_count' }] },
+		});
+	});
+
+	it.each<[string, 'builder_query' | undefined]>([
+		['an unmarked query', undefined],
+		['an explicitly generic query', 'builder_query'],
+	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
+		mockedGenericKeys.mockResolvedValue({
+			data: { status: 'success', data: { complete: true, keys: {} } },
+		} as Awaited<ReturnType<typeof getKeySuggestions>>);
+
+		await fetchFieldKeysForQuery({
+			builderQueryType,
+			dataSource: DataSource.TRACES,
+			searchText: 'svc',
+		});
+
+		expect(mockedAIKeys).not.toHaveBeenCalled();
+		expect(mockedGenericKeys).toHaveBeenCalledWith(
+			expect.objectContaining({ signal: DataSource.TRACES, searchText: 'svc' }),
+		);
+	});
+
+	it('normalizes a null ai_observability keys payload to an empty map', async () => {
+		mockedAIKeys.mockResolvedValue({
+			status: 'success',
+			data: { complete: false, keys: null },
+		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
+
+		const response = await fetchFieldKeysForQuery({
+			builderQueryType: 'builder_ai_query',
+			dataSource: DataSource.TRACES,
+			searchText: '',
+		});
+
+		expect(response.data.data).toStrictEqual({ complete: false, keys: {} });
+	});
+
+	it('passes the generic response through untouched', async () => {
+		const genericResponse = {
+			data: { status: 'success', data: { complete: true, keys: {} } },
+		} as unknown as Awaited<ReturnType<typeof getKeySuggestions>>;
+		mockedGenericKeys.mockResolvedValue(genericResponse);
+
+		await expect(
+			fetchFieldKeysForQuery({
+				builderQueryType: 'builder_query',
+				dataSource: DataSource.TRACES,
+				searchText: '',
+			}),
+		).resolves.toBe(genericResponse);
+	});
+});
+
+describe('fetchFieldValuesForQuery', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
+		mockedAIValues.mockResolvedValue(
+			aiValuesResponse({ stringValues: ['gpt-4o'], numberValues: [] }),
+		);
+
+		const response = await fetchFieldValuesForQuery({
+			builderQueryType: 'builder_ai_query',
+			dataSource: DataSource.TRACES,
+			key: 'gen_ai.request.model',
+			searchText: 'gpt',
+		});
+
+		expect(mockedGenericValues).not.toHaveBeenCalled();
+		expect(response).toStrictEqual({
+			data: {
+				data: {
+					complete: true,
+					values: { stringValues: ['gpt-4o'], numberValues: [] },
+				},
+			},
+		});
+	});
+
+	it('forwards the key as the name the endpoint expects', async () => {
+		mockedAIValues.mockResolvedValue(aiValuesResponse({}));
+
+		await fetchFieldValuesForQuery({
+			builderQueryType: 'builder_ai_query',
+			dataSource: DataSource.TRACES,
+			key: 'total_tokens',
+			searchText: '',
+		});
+
+		expect(mockedAIValues).toHaveBeenCalledWith({
+			name: 'total_tokens',
+			searchText: '',
+		});
+	});
+
+	it('wraps the ai_observability payload in the envelope the call site unwraps', async () => {
+		mockedAIValues.mockResolvedValue(aiValuesResponse(null, false));
+
+		await expect(
+			fetchFieldValuesForQuery({
+				builderQueryType: 'builder_ai_query',
+				dataSource: DataSource.TRACES,
+				key: 'llm_call_count',
+				searchText: '',
+			}),
+		).resolves.toStrictEqual({
+			data: { data: { complete: false, values: null } },
+		});
+	});
+
+	it.each<[string, 'builder_query' | undefined]>([
+		['an unmarked query', undefined],
+		['an explicitly generic query', 'builder_query'],
+	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
+		const genericResponse = {
+			data: {
+				data: { complete: false, values: { stringValues: ['frontend'] } },
+			},
+		} as unknown as Awaited<ReturnType<typeof getValueSuggestions>>;
+		mockedGenericValues.mockResolvedValue(genericResponse);
+
+		const response = await fetchFieldValuesForQuery({
+			builderQueryType,
+			dataSource: DataSource.TRACES,
+			key: 'service.name',
+			searchText: 'front',
+		});
+
+		expect(mockedAIValues).not.toHaveBeenCalled();
+		expect(mockedGenericValues).toHaveBeenCalledWith(
+			expect.objectContaining({
+				signal: DataSource.TRACES,
+				key: 'service.name',
+				searchText: 'front',
+			}),
+		);
+		expect(response).toBe(genericResponse);
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/fieldSuggestions.ts

@@ -0,0 +1,111 @@
+import {
+	getAIObservabilityFieldsKeys,
+	getAIObservabilityFieldsValues,
+} from 'api/generated/services/ai-observability';
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+export interface SuggestedFieldKey {
+	name: string;
+	fieldContext?: string;
+	fieldDataType?: string;
+}
+
+export type SuggestedFieldKeysByName = Record<string, SuggestedFieldKey[]>;
+
+export interface SuggestedFieldKeysPayload {
+	complete: boolean;
+	keys: SuggestedFieldKeysByName;
+}
+
+export interface SuggestedFieldKeysResponse {
+	data: { data?: SuggestedFieldKeysPayload };
+}
+
+export interface SuggestedFieldValuesPayload {
+	complete?: boolean;
+	values?: {
+		stringValues?: string[] | null;
+		numberValues?: number[] | null;
+	} | null;
+}
+
+export interface SuggestedFieldValuesResponse {
+	data: { data?: SuggestedFieldValuesPayload };
+}
+
+interface FetchFieldKeysParams {
+	builderQueryType: IBuilderQuery['builderQueryType'];
+	dataSource: DataSource;
+	searchText: string;
+	metricName?: string;
+	signalSource?: 'meter' | '';
+	metricNamespace?: string;
+}
+
+interface FetchFieldValuesParams {
+	builderQueryType: IBuilderQuery['builderQueryType'];
+	dataSource: DataSource;
+	key: string;
+	searchText: string;
+	metricName?: string;
+	signalSource?: 'meter' | '';
+}
+
+export const fetchFieldKeysForQuery = async ({
+	builderQueryType,
+	dataSource,
+	searchText,
+	metricName,
+	signalSource,
+	metricNamespace,
+}: FetchFieldKeysParams): Promise<SuggestedFieldKeysResponse> => {
+	if (builderQueryType === 'builder_ai_query') {
+		const response = await getAIObservabilityFieldsKeys({ searchText });
+
+		return {
+			data: {
+				data: response.data
+					? { complete: response.data.complete, keys: response.data.keys ?? {} }
+					: undefined,
+			},
+		};
+	}
+
+	return getKeySuggestions({
+		signal: dataSource,
+		searchText,
+		metricName,
+		signalSource,
+		metricNamespace,
+	});
+};
+
+export const fetchFieldValuesForQuery = async ({
+	builderQueryType,
+	dataSource,
+	key,
+	searchText,
+	metricName,
+	signalSource,
+}: FetchFieldValuesParams): Promise<SuggestedFieldValuesResponse> => {
+	if (builderQueryType === 'builder_ai_query') {
+		const response = await getAIObservabilityFieldsValues({
+			name: key,
+			searchText,
+		});
+
+		return { data: { data: response.data } };
+	}
+
+	// getValueSuggestions' declared response type does not match what the endpoint returns.
+	return getValueSuggestions({
+		signal: dataSource,
+		key,
+		searchText,
+		signalSource,
+		metricName,
+	}) as unknown as Promise<SuggestedFieldValuesResponse>;
+};

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -54,7 +54,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	const { cloneQuery, panelType } = useQueryBuilder();
 
 	const showFunctions = query?.functions?.length > 0;
-	const { dataSource } = query;
+	const { dataSource, builderQueryType } = query;
 
 	const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -94,8 +94,9 @@ export const QueryV2 = forwardRef(function QueryV2(
 	);
 
 	const showSpanScopeSelector = useMemo(
-		() => dataSource === DataSource.TRACES,
-		[dataSource],
+		() =>
+			dataSource === DataSource.TRACES && builderQueryType !== 'builder_ai_query',
+		[dataSource, builderQueryType],
 	);
 
 	const showInlineQuerySearch = useMemo(() => {

frontend/src/constants/panelTypes.ts

@@ -31,8 +31,6 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.BAR]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
-		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
-		[PANEL_TYPES.TEXT]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -348,6 +348,19 @@ export const initialQueryMeterWithType: Query = {
 	},
 };
 
+export const initialQueryAIWithType: Query = {
+	...initialQueryWithType,
+	builder: {
+		...initialQueryWithType.builder,
+		queryData: [
+			{
+				...initialQueryBuilderFormValuesMap.traces,
+				builderQueryType: 'builder_ai_query',
+			},
+		],
+	},
+};
+
 export const operatorsByTypes: Record<LocalDataType, string[]> = {
 	string: Object.values(StringOperators),
 	number: Object.values(NumberOperators),
@@ -363,7 +376,6 @@ export enum PANEL_TYPES {
 	BAR = 'bar',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
-	TEXT = 'text',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }
 
@@ -611,8 +623,6 @@ export const PANEL_TYPES_INITIAL_QUERY: Record<PANEL_TYPES, Query> = {
 	[PANEL_TYPES.BAR]: initialQueriesMap.metrics,
 	[PANEL_TYPES.PIE]: initialQueriesMap.metrics,
 	[PANEL_TYPES.HISTOGRAM]: initialQueriesMap.metrics,
-	// No query of its own: a text panel renders an authored body.
-	[PANEL_TYPES.TEXT]: initialQueriesMap.metrics,
 	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
 };
 

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -11,17 +11,13 @@ import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
-import {
-	getExportQueryData,
-	getQueryByPanelType,
-} from 'container/TracesExplorer/explorerUtils';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
@@ -52,6 +48,7 @@ import {
 import { v4 } from 'uuid';
 
 import { TOOLBAR_VIEWS } from './constants';
+import { getExportQueryData, getQueryByPanelType } from './explorerUtils';
 import ListView from './ListView/ListView';
 import { defaultSelectedColumns } from './ListView/configs';
 import QuerySection from './QuerySection/QuerySection';
@@ -118,7 +115,7 @@ function Explorer(): JSX.Element {
 	const defaultQuery = useMemo(
 		(): Query =>
 			updateAllQueriesOperators(
-				initialQueriesMap.traces,
+				initialQueryAIWithType,
 				PANEL_TYPES.LIST,
 				DataSource.TRACES,
 			),
@@ -185,7 +182,7 @@ function Explorer(): JSX.Element {
 	const exportDefaultQuery = useMemo(
 		() =>
 			getQueryByPanelType(
-				stagedQuery || initialQueriesMap.traces,
+				stagedQuery || initialQueryAIWithType,
 				panelType || PANEL_TYPES.LIST,
 			),
 		[stagedQuery, panelType],

frontend/src/container/LLMObservability/Explorer/ListView/ListView.tsx

@@ -17,12 +17,11 @@ import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import type { TableColumnDef } from 'components/TanStackTableView/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
 import {
 	getTraceLink,
 	transformSpanRows,
@@ -43,6 +42,7 @@ import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { getListViewQuery } from '../explorerUtils';
 import {
 	defaultSelectedColumns,
 	PER_PAGE_OPTIONS,
@@ -94,7 +94,7 @@ function ListView({
 		paginationQueryData ?? getDefaultPaginationConfig(PER_PAGE_OPTIONS);
 
 	const requestQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueriesMap.traces, orderBy),
+		() => getListViewQuery(stagedQuery || initialQueryAIWithType, orderBy),
 		[stagedQuery, orderBy],
 	);
 

frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx

@@ -1,8 +1,6 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import ExplorerOrderBy from 'container/ExplorerOrderBy';
-import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
@@ -10,33 +8,16 @@ import { DataSource } from 'types/common/queryBuilder';
 function QuerySection(): JSX.Element {
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
-	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
-		const isList = panelTypes === PANEL_TYPES.LIST;
-		const config: QueryBuilderProps['filterConfigs'] = {
+	// Only reaches the builder for timeseries/table; list/trace panels use QueryBuilderV2's listViewTracesFilterConfigs.
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(
+		() => ({
 			stepInterval: { isHidden: false, isDisabled: false },
-			limit: { isHidden: isList, isDisabled: true },
-			having: { isHidden: isList, isDisabled: true },
-		};
-
-		return config;
-	}, [panelTypes]);
-
-	const renderOrderBy = useCallback(
-		({ query, onChange }: OrderByFilterProps) => (
-			<ExplorerOrderBy query={query} onChange={onChange} />
-		),
+			limit: { isHidden: false, isDisabled: true },
+			having: { isHidden: false, isDisabled: true },
+		}),
 		[],
 	);
 
-	const queryComponents = useMemo((): QueryBuilderProps['queryComponents'] => {
-		const shouldRenderCustomOrderBy =
-			panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE;
-
-		return {
-			...(shouldRenderCustomOrderBy ? { renderOrderBy } : {}),
-		};
-	}, [panelTypes, renderOrderBy]);
-
 	const isListViewPanel = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
 		[panelTypes],
@@ -45,14 +26,10 @@ function QuerySection(): JSX.Element {
 	return (
 		<QueryBuilderV2
 			isListViewPanel={isListViewPanel}
-			showTraceOperator
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
-			queryComponents={queryComponents}
 			panelType={panelTypes}
 			filterConfigs={filterConfigs}
-			showOnlyWhereClause={
-				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
-			}
+			showOnlyWhereClause={isListViewPanel}
 			version="v3" // setting this to v3 as we this is rendered in logs explorer
 		/>
 	);

frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.tsx

@@ -14,10 +14,9 @@ import logEvent from 'api/common/logEvent';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
 import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
 import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
@@ -31,6 +30,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
 
+import { getListViewQuery } from '../explorerUtils';
 import { columns, PER_PAGE_OPTIONS } from './configs';
 import styles from './TracesView.module.scss';
 
@@ -60,7 +60,7 @@ function TracesView({
 	);
 
 	const transformedQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueriesMap.traces),
+		() => getListViewQuery(stagedQuery || initialQueryAIWithType),
 		[stagedQuery],
 	);
 

frontend/src/container/LLMObservability/Explorer/explorerUtils.ts

@@ -0,0 +1,61 @@
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { OptionsQuery } from 'container/OptionsMenu/types';
+import { cloneDeep, set } from 'lodash-es';
+import { OrderByPayload, Query } from 'types/api/queryBuilder/queryBuilderData';
+
+export const getListViewQuery = (
+	stagedQuery: Query,
+	orderBy?: string,
+): Query => {
+	const query = stagedQuery
+		? cloneDeep(stagedQuery)
+		: cloneDeep(initialQueriesMap.traces);
+
+	const orderByPayload: OrderByPayload[] = orderBy
+		? [
+				{
+					columnName: orderBy.split(':')[0],
+					order: orderBy.split(':')[1] as 'asc' | 'desc',
+				},
+			]
+		: [];
+
+	for (let i = 0; i < query.builder.queryData.length; i++) {
+		const queryData = query.builder.queryData[i];
+		queryData.groupBy = [];
+		queryData.having = {
+			expression: '',
+		};
+		queryData.orderBy = orderByPayload;
+	}
+
+	return query;
+};
+
+export const getQueryByPanelType = (
+	stagedQuery: Query,
+	panelType: PANEL_TYPES,
+): Query => {
+	if (panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE) {
+		return getListViewQuery(stagedQuery);
+	}
+	return stagedQuery;
+};
+
+export const getExportQueryData = (
+	query: Query,
+	panelType: PANEL_TYPES,
+	options: OptionsQuery,
+): Query => {
+	if (panelType === PANEL_TYPES.LIST) {
+		const updatedQuery = cloneDeep(query);
+		set(
+			updatedQuery,
+			'builder.queryData[0].selectColumns',
+			options.selectColumns,
+		);
+
+		return updatedQuery;
+	}
+	return query;
+};

frontend/src/container/WidgetCard/Card/FullView/contants.ts

@@ -29,6 +29,5 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		BAR: true,
 		PIE: false,
 		HISTOGRAM: false,
-		TEXT: false,
 		EMPTY_WIDGET: false,
 	};

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -14,8 +14,6 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.LIST]: ListPanelWrapper,
 	[PANEL_TYPES.VALUE]: ValuePanelWrapper,
 	[PANEL_TYPES.TRACE]: null,
-	// Dashboards v2 renders this kind; the V1 wrapper map is never asked for it.
-	[PANEL_TYPES.TEXT]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,

frontend/src/pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/VariableImpactDialog/VariableImpactDialog.tsx

@@ -19,7 +19,6 @@ const KIND_LABEL: Record<VariableUsage['kind'], string> = {
 	promql: 'PromQL',
 	clickhouse: 'ClickHouse',
 	variable: 'Variable',
-	text: 'Markdown body',
 };
 
 interface VariableImpactDialogProps {

frontend/src/pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/__tests__/variableImpactPatch.test.ts

@@ -1,49 +0,0 @@
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import { buildVariableImpactPatch } from '../utils/variableImpactPatch';
-import type { VariableUsage } from '../utils/variableUsages';
-
-jest.mock('../variableAdapters', () => ({
-	formModelToDto: (model: unknown): unknown => model,
-}));
-
-const dashboard = {
-	spec: {
-		panels: {
-			runbook: {
-				spec: {
-					display: { name: 'Runbook' },
-					plugin: { kind: 'signoz/TextPanel', spec: { text: 'env {{svc}}' } },
-					queries: [],
-				},
-			},
-		},
-		variables: [],
-	},
-} as unknown as DashboardtypesGettableDashboardV2DTO;
-
-const textUsage: VariableUsage = {
-	id: 'panel:runbook:0',
-	sourceType: 'panel',
-	sourceId: 'runbook',
-	sourceLabel: 'Runbook',
-	kind: 'text',
-	envelopeIndex: 0,
-	currentText: 'env {{svc}}',
-	resultingText: 'env {{zone}}',
-};
-
-describe('buildVariableImpactPatch — text panel bodies', () => {
-	it('replaces the plugin-spec text, never the (empty) queries', () => {
-		const ops = buildVariableImpactPatch(dashboard, [], [textUsage]);
-
-		const panelOps = ops.filter((op) => op.path.includes('/panels/'));
-		expect(panelOps).toStrictEqual([
-			{
-				op: 'replace',
-				path: '/spec/panels/runbook/spec/plugin/spec/text',
-				value: 'env {{zone}}',
-			},
-		]);
-	});
-});

frontend/src/pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/__tests__/variableUsages.test.ts

@@ -45,16 +45,6 @@ function promqlPanel(name: string, query: string): unknown {
 	};
 }
 
-function textPanel(name: string, text: string): unknown {
-	return {
-		spec: {
-			display: { name },
-			plugin: { kind: 'signoz/TextPanel', spec: { text } },
-			queries: [],
-		},
-	};
-}
-
 function dashboard(
 	panels: Record<string, unknown>,
 	variables: VariableFormModel[],
@@ -109,38 +99,6 @@ describe('findVariableUsages', () => {
 	it('returns nothing for an unreferenced variable', () => {
 		expect(findVariableUsages(dash, 'nope', 'delete')).toStrictEqual([]);
 	});
-
-	describe('text panel bodies (TDD D5)', () => {
-		const textDash = dashboard(
-			{
-				runbook: textPanel(
-					'Runbook',
-					'env {{svc}} / {{.svc}} / [[svc]] / $svc / {{svcx}}',
-				),
-				unrelated: textPanel('Plain', 'no tokens here'),
-			},
-			[variable({ name: 'svc', type: 'QUERY' })],
-		);
-
-		it('finds the body usage and skips bodies without the token', () => {
-			const usages = findVariableUsages(textDash, 'svc', 'rename', 'zone');
-			expect(usages.map((u) => u.id)).toStrictEqual(['panel:runbook:0']);
-			expect(usages[0].kind).toBe('text');
-			expect(usages[0].sourceLabel).toBe('Runbook');
-		});
-
-		it('rewrites all four syntaxes on rename, leaving other names alone', () => {
-			const [usage] = findVariableUsages(textDash, 'svc', 'rename', 'zone');
-			expect(usage.resultingText).toBe(
-				'env {{zone}} / {{.zone}} / [[zone]] / $zone / {{svcx}}',
-			);
-		});
-
-		it('leaves the body for review on delete', () => {
-			const [usage] = findVariableUsages(textDash, 'svc', 'delete');
-			expect(usage.resultingText).toBe(usage.currentText);
-		});
-	});
 });
 
 describe('findApplyUsages', () => {

frontend/src/pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/utils/getTextPanelBody.ts

@@ -1,16 +0,0 @@
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { isQuerylessPanelKind } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
-
-/**
- * The markdown body of a static (query-less) panel, or null for query kinds.
- * One localized cast: the plugin-spec union can't be narrowed by a dynamic kind.
- */
-export function getTextPanelBody(
-	spec: DashboardtypesPanelSpecDTO | undefined,
-): string | null {
-	if (!spec?.plugin || !isQuerylessPanelKind(spec.plugin.kind)) {
-		return null;
-	}
-	const { text } = spec.plugin.spec as { text?: string };
-	return typeof text === 'string' ? text : null;
-}

frontend/src/pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/utils/variableImpactPatch.ts

@@ -107,18 +107,6 @@ export function buildVariableImpactPatch(
 
 	byPanel.forEach((list, panelId) => {
 		const panel = panels[panelId];
-
-		// A static kind's usage edits its markdown body, not a query.
-		const textUsage = list.find((usage) => usage.kind === 'text');
-		if (textUsage) {
-			ops.push({
-				op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-				path: `/spec/panels/${panelId}/spec/plugin/spec/text`,
-				value: textUsage.resultingText,
-			});
-			return;
-		}
-
 		if (!panel?.spec?.queries?.length) {
 			return;
 		}

frontend/src/pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/utils/variableUsages.ts

@@ -12,7 +12,6 @@ import {
 } from 'lib/dashboardVariables/variableReference';
 
 import { toQueryEnvelopes } from '../../../queryV5/buildQueryRangeRequest';
-import { getTextPanelBody } from './getTextPanelBody';
 import { dtoToFormModel } from '../variableAdapters';
 
 /** The kind of query text a variable is referenced from. */
@@ -20,8 +19,7 @@ export type VariableUsageKind =
 	| 'builder'
 	| 'promql'
 	| 'clickhouse'
-	| 'variable'
-	| 'text';
+	| 'variable';
 
 export type VariableImpactMode = 'rename' | 'delete' | 'apply';
 
@@ -83,7 +81,7 @@ function computeResultingText(
 		return rewriteVariableReferences(text, variableName, newName);
 	}
 	// delete: only builder filter clauses can be safely auto-stripped; raw PromQL/
-	// ClickHouse, markdown bodies and variable queries are left for the user to edit.
+	// ClickHouse and variable queries are left for the user to edit.
 	return kind === 'builder'
 		? removeVariableFromExpression(text, variableName)
 		: text;
@@ -108,31 +106,6 @@ export function findVariableUsages(
 	const spec = dashboard.spec;
 
 	Object.entries(spec.panels ?? {}).forEach(([panelId, panel]) => {
-		// A static kind references variables from its body, not a query (TDD D5 —
-		// rename must rewrite text bodies too, or it silently orphans the tokens).
-		const textBody = getTextPanelBody(panel?.spec);
-		if (typeof textBody === 'string') {
-			if (textContainsVariableReference(textBody, variableName)) {
-				usages.push({
-					id: `panel:${panelId}:0`,
-					sourceType: 'panel',
-					sourceId: panelId,
-					sourceLabel: panel.spec?.display?.name || panelId,
-					kind: 'text',
-					envelopeIndex: 0,
-					currentText: textBody,
-					resultingText: computeResultingText(
-						'text',
-						textBody,
-						variableName,
-						mode,
-						newName,
-					),
-				});
-			}
-			return;
-		}
-
 		const queries = panel?.spec?.queries;
 		if (!queries?.length) {
 			return;

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

@@ -5,12 +5,10 @@ import type {
 	DashboardtypesPanelSpecDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-import { SectionKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
-import { getSupportedSignals } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
 import { resolveSignal } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
 import type { EQueryType } from 'types/common/dashboard';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../utils/legendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
 import ConfigActions from './ConfigActions/ConfigActions';
 import SectionSlot from './SectionSlot/SectionSlot';
@@ -67,16 +65,9 @@ function ConfigPane({
 }: ConfigPaneProps): JSX.Element {
 	const panelKind = spec.plugin.kind;
 	const definition = getPanelDefinition(panelKind);
-	// The header toggle belongs with the title and description it hides, so the kind's
-	// declaration still gates it but it renders above, out of the display options.
-	const headerSection = definition.sections.find(
-		(config) => config.kind === SectionKind.PanelHeader,
-	);
-	const sections = definition.sections.filter(
-		(config) => config.kind !== SectionKind.PanelHeader,
-	);
+	const sections = definition.sections;
 
-	const signal = resolveSignal(spec.queries, getSupportedSignals(panelKind)[0]);
+	const signal = resolveSignal(spec.queries, definition.supportedSignals[0]);
 
 	// Title/description are just a slice of the spec — edit them through the same
 	// onChangeSpec path the sections use, so there's a single editing surface.
@@ -113,23 +104,6 @@ function ConfigPane({
 						onChange={(e): void => setDisplayField('description', e.target.value)}
 					/>
 				</div>
-
-				{headerSection && (
-					<SectionSlot
-						bare
-						config={headerSection}
-						spec={spec}
-						onChangeSpec={onChangeSpec}
-						legendSeries={legendSeries}
-						tableColumns={tableColumns}
-						signal={signal}
-						panelKind={panelKind}
-						onChangePanelKind={onChangePanelKind}
-						queryType={queryType}
-						stepInterval={stepInterval}
-						metricUnit={metricUnit}
-					/>
-				)}
 			</div>
 
 			{sections.length > 0 && (

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

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

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

@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import type { EQueryType } from 'types/common/dashboard';
 
-import { PANEL_OPTIONS } from '../../../Panels/registry';
 import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
 import type { ConfigSelectItem } from '../controls/ConfigSelect/ConfigSelect';
 
 import { getPanelTypeDisabledReason } from './utils';
@@ -27,17 +27,17 @@ export function usePanelTypeSelectItems({
 }: UsePanelTypeSelectItemsArgs): ConfigSelectItem<PanelKind>[] {
 	return useMemo(
 		() =>
-			PANEL_OPTIONS.map(({ kind, displayName, icon: Icon }) => {
+			PANEL_TYPES.map(({ panelKind, label, Icon }) => {
 				// One reason drives both the disabled flag and the tooltip, so they can't disagree.
 				const disabledReason = getPanelTypeDisabledReason({
-					kind,
+					kind: panelKind,
 					queryType,
 					signal,
-					label: displayName,
+					label,
 				});
 				return {
-					value: kind,
-					label: displayName,
+					value: panelKind,
+					label,
 					icon: <Icon size={14} />,
 					disabled: !!disabledReason,
 					tooltip: disabledReason,

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

@@ -2,7 +2,6 @@ import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 import {
-	isQuerylessPanelKind,
 	isQueryTypeSupportedByPanelKind,
 	isSignalSupported,
 } from '../../../Panels/capabilities';
@@ -38,12 +37,6 @@ export function getPanelTypeDisabledReason({
 	signal?: TelemetrytypesSignalDTO;
 	label: string;
 }): string | undefined {
-	// A kind that renders without a query pairs with anything — it declares no
-	// query types or signals, and the checks below would read that as "supports
-	// nothing" and disable it everywhere.
-	if (isQuerylessPanelKind(kind)) {
-		return undefined;
-	}
 	if (!isQueryTypeSupportedByPanelKind(kind, queryType)) {
 		return `${label} isn't available for ${QUERY_TYPE_LABEL[queryType]} queries`;
 	}

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

@@ -16,8 +16,6 @@ type SectionSlotProps = {
 	config: SectionConfig;
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
-	/** Renders the editor alone, for a section promoted into the Panel Details fields. */
-	bare?: boolean;
 } & Omit<SectionEditorContext, 'yAxisUnit' | 'registerHeaderAction'>;
 
 // Per-section header content; `trigger` expands the section and runs the editor's handler.
@@ -52,7 +50,6 @@ function SectionSlot({
 	config,
 	spec,
 	onChangeSpec,
-	bare,
 	legendSeries,
 	tableColumns,
 	signal,
@@ -113,28 +110,6 @@ function SectionSlot({
 
 	const headerSlot = SECTION_HEADER_SLOT[config.kind]?.(triggerHeaderAction);
 
-	const editorElement = (
-		<Component
-			value={get(spec)}
-			controls={controls}
-			onChange={(next): void => onChangeSpec(update(spec, next))}
-			legendSeries={legendSeries}
-			yAxisUnit={yAxisUnit}
-			tableColumns={tableColumns}
-			signal={signal}
-			panelKind={panelKind}
-			onChangePanelKind={onChangePanelKind}
-			queryType={queryType}
-			stepInterval={stepInterval}
-			metricUnit={metricUnit}
-			registerHeaderAction={registerHeaderAction}
-		/>
-	);
-
-	if (bare) {
-		return editorElement;
-	}
-
 	return (
 		<SettingsSection
 			title={title}
@@ -143,7 +118,21 @@ function SectionSlot({
 			onOpenChange={setOpen}
 			headerSlot={headerSlot}
 		>
-			{editorElement}
+			<Component
+				value={get(spec)}
+				controls={controls}
+				onChange={(next): void => onChangeSpec(update(spec, next))}
+				legendSeries={legendSeries}
+				yAxisUnit={yAxisUnit}
+				tableColumns={tableColumns}
+				signal={signal}
+				panelKind={panelKind}
+				onChangePanelKind={onChangePanelKind}
+				queryType={queryType}
+				stepInterval={stepInterval}
+				metricUnit={metricUnit}
+				registerHeaderAction={registerHeaderAction}
+			/>
 		</SettingsSection>
 	);
 }

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

@@ -23,14 +23,6 @@ jest.mock(
 	}),
 );
 
-function textSpec(): DashboardtypesPanelSpecDTO {
-	return {
-		display: { name: 'Runbook', description: 'steps' },
-		plugin: { kind: 'signoz/TextPanel', spec: { text: '' } },
-		queries: [],
-	} as unknown as DashboardtypesPanelSpecDTO;
-}
-
 function spec(unit?: string): DashboardtypesPanelSpecDTO {
 	return {
 		display: { name: 'CPU', description: 'usage' },
@@ -101,24 +93,6 @@ describe('ConfigPane', () => {
 		);
 	});
 
-	// It hides the title strip, so it sits with the title rather than under the
-	// display options — and only a kind whose spec accepts `headerOptions` shows it.
-	it('renders the hide-header toggle among the Panel Details fields', () => {
-		renderConfigPane({ spec: textSpec() });
-
-		const toggle = screen.getByTestId('panel-header-hide');
-		expect(toggle).toBeInTheDocument();
-		expect(screen.getByText('Hide header')).toBeInTheDocument();
-		// No collapsible wrapper of its own.
-		expect(screen.queryByText('Panel header')).not.toBeInTheDocument();
-	});
-
-	it('omits the hide-header toggle for a kind that has no header options', () => {
-		renderConfigPane();
-
-		expect(screen.queryByTestId('panel-header-hide')).not.toBeInTheDocument();
-	});
-
 	it('renders the Formatting section for a kind that declares it', () => {
 		renderConfigPane();
 		// The TimeSeries kind declares a Formatting section; its collapsible header shows.

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/BackgroundSwatches/BackgroundSwatches.module.scss

@@ -1,76 +0,0 @@
-.row {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-}
-
-.swatch {
-	flex: none;
-	width: 26px;
-	height: 26px;
-	padding: 0;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	background: none;
-	cursor: pointer;
-	position: relative;
-
-	// The input carries focus, so the ring is drawn on the swatch around it.
-	&:has(.input:focus-visible) {
-		outline: 2px solid var(--bg-robin-400);
-		outline-offset: 1px;
-	}
-}
-
-// The real control, sized to the swatch and invisible over it: clicks and focus
-// land on the radio, the swatch is what the user sees.
-.input {
-	position: absolute;
-	inset: 0;
-	margin: 0;
-	opacity: 0;
-	cursor: pointer;
-}
-
-.selected {
-	box-shadow: 0 0 0 2px var(--bg-robin-500);
-}
-
-// Transparency has no colour to show, so it reads as the conventional checkerboard.
-.checkerboard {
-	background-color: var(--l2-background);
-	background-image:
-		linear-gradient(
-			45deg,
-			var(--l2-border) 25%,
-			transparent 25%,
-			transparent 75%,
-			var(--l2-border) 75%
-		),
-		linear-gradient(
-			45deg,
-			var(--l2-border) 25%,
-			transparent 25%,
-			transparent 75%,
-			var(--l2-border) 75%
-		);
-	background-size: 8px 8px;
-	background-position:
-		0 0,
-		4px 4px;
-}
-
-.defaultSurface {
-	background: var(--l2-background);
-}
-
-.divider {
-	flex: none;
-	width: 1px;
-	height: 18px;
-	margin: 0 2px;
-	background: var(--l2-border);
-}

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

@@ -1,114 +0,0 @@
-import { Fragment } from 'react';
-import { Check } from '@signozhq/icons';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import cx from 'classnames';
-import {
-	TEXT_BACKGROUND_PAIRS,
-	TEXT_BACKGROUND_PRESETS,
-} from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/presets';
-import type {
-	PanelTheme,
-	TextBackgroundPreset,
-	TextBackgroundSelection,
-} from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/types';
-
-import styles from './BackgroundSwatches.module.scss';
-
-const PRESET_TITLES: Record<TextBackgroundPreset, string> = {
-	robin: 'Robin',
-	purple: 'Purple',
-	sakura: 'Sakura',
-	cherry: 'Cherry',
-	amber: 'Amber',
-	forest: 'Forest',
-	sienna: 'Sienna',
-	slate: 'Slate',
-};
-
-const BASE_TITLES: Record<'none' | 'default', string> = {
-	none: 'Transparent',
-	default: 'Default panel',
-};
-
-/** Neither base swatch shows a colour, so its tooltip says what it does. */
-const BASE_TOOLTIPS: Record<'none' | 'default', string> = {
-	none: 'Transparent — no card, border or title bar',
-	default: 'Default panel colour',
-};
-
-const OPTIONS: TextBackgroundSelection[] = [
-	'none',
-	'default',
-	...TEXT_BACKGROUND_PRESETS,
-];
-
-const DIVIDER_AFTER = 1;
-
-interface BackgroundSwatchesProps {
-	testId: string;
-	/** Names the group for assistive tech — the row carries no visible label. */
-	label: string;
-	/** `undefined` while a custom colour is active: no swatch is selected. */
-	value: TextBackgroundSelection | undefined;
-	/** Swatches paint in this theme's pair, so what the user picks is what they see. */
-	theme: PanelTheme;
-	onChange: (value: TextBackgroundSelection) => void;
-}
-
-/**
- * The Text panel's background choices as one radio group. Native radios sharing a
- * `name`, so arrow-key movement, the single tab stop and selection-follows-focus
- * are the platform's; each input is transparent and fills its swatch.
- */
-function BackgroundSwatches({
-	testId,
-	label,
-	value,
-	theme,
-	onChange,
-}: BackgroundSwatchesProps): JSX.Element {
-	return (
-		<div
-			className={styles.row}
-			role="radiogroup"
-			aria-label={label}
-			data-testid={testId}
-		>
-			{OPTIONS.map((option, index) => {
-				const isBase = option === 'none' || option === 'default';
-				const pair = isBase ? undefined : TEXT_BACKGROUND_PAIRS[option][theme];
-				const title = isBase ? BASE_TITLES[option] : PRESET_TITLES[option];
-
-				return (
-					<Fragment key={option}>
-						<TooltipSimple title={isBase ? BASE_TOOLTIPS[option] : title} arrow>
-							<label
-								className={cx(styles.swatch, {
-									[styles.checkerboard]: option === 'none',
-									[styles.defaultSurface]: option === 'default',
-									[styles.selected]: option === value,
-								})}
-								style={pair ? { background: pair.surface, color: pair.ink } : undefined}
-								data-testid={`${testId}-${option}`}
-							>
-								<input
-									type="radio"
-									className={styles.input}
-									name={testId}
-									value={option}
-									checked={option === value}
-									aria-label={title}
-									onChange={(): void => onChange(option)}
-								/>
-								{option === value && <Check size={14} />}
-							</label>
-						</TooltipSimple>
-						{index === DIVIDER_AFTER && <span className={styles.divider} />}
-					</Fragment>
-				);
-			})}
-		</div>
-	);
-}
-
-export default BackgroundSwatches;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/BackgroundSwatches/CustomBackgroundRow.module.scss

@@ -1,67 +0,0 @@
-.row {
-	display: flex;
-	width: 100%;
-	align-items: center;
-	gap: 10px;
-	padding: 8px 10px;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	background: transparent;
-	cursor: pointer;
-	text-align: left;
-}
-
-.active {
-	border-color: var(--bg-robin-500);
-}
-
-.chip {
-	flex: none;
-	width: 18px;
-	height: 18px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-}
-
-// No colour to show yet, so the chip advertises that it opens a picker.
-.chipEmpty {
-	background: conic-gradient(
-		from 0deg,
-		var(--bg-cherry-400),
-		var(--bg-amber-400),
-		var(--bg-forest-400),
-		var(--bg-robin-400),
-		var(--bg-sakura-400),
-		var(--bg-cherry-400)
-	);
-}
-
-.label {
-	flex: 1;
-	font-size: 12px;
-	color: var(--l2-foreground);
-}
-
-.hex {
-	font-family: var(--font-family-sf-mono);
-	font-size: 12px;
-	color: var(--text-vanilla-400);
-	letter-spacing: 0.02em;
-}
-
-// Appended under the picker's own panel.
-.contrast {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	padding: 8px 4px 2px;
-	font-size: 12px;
-	color: var(--text-vanilla-400);
-}
-
-.warning {
-	color: var(--bg-amber-400);
-}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/BackgroundSwatches/CustomBackgroundRow.tsx

@@ -1,91 +0,0 @@
-import type { ReactNode } from 'react';
-import { Check, ChevronDown, TriangleAlert } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import { ColorPicker } from 'antd';
-import cx from 'classnames';
-import {
-	contrastRatio,
-	inkForSurface,
-	MIN_CONTRAST_RATIO,
-} from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/contrast';
-
-import styles from './CustomBackgroundRow.module.scss';
-
-const HEX_PLACEHOLDER = '#______';
-
-/** What the picker opens on before a colour is chosen. */
-const INITIAL_COLOR = '#3A2A63';
-
-interface CustomBackgroundRowProps {
-	testId: string;
-	/** The stored hex while a custom colour is active; `undefined` otherwise. */
-	value: string | undefined;
-	onChange: (hex: string) => void;
-}
-
-/**
- * The custom colour, as a row rather than a swatch: it opens a picker instead of
- * committing a value in one click. The picker warns below the contrast floor but
- * never blocks the choice.
- */
-function CustomBackgroundRow({
-	testId,
-	value,
-	onChange,
-}: CustomBackgroundRowProps): JSX.Element {
-	const color = value ?? INITIAL_COLOR;
-	const ratio = contrastRatio(inkForSurface(color), color);
-	const isLegible = ratio >= MIN_CONTRAST_RATIO;
-
-	const contrastMessage = isLegible
-		? `Contrast ${ratio.toFixed(1)}:1`
-		: `Contrast ${ratio.toFixed(1)}:1 — below ${MIN_CONTRAST_RATIO}:1`;
-
-	function renderPanel(panel: ReactNode): ReactNode {
-		return (
-			<>
-				{panel}
-				<div
-					className={cx(styles.contrast, { [styles.warning]: !isLegible })}
-					data-testid={`${testId}-contrast`}
-				>
-					{!isLegible && <TriangleAlert size={12} />}
-					<span className="translate-safe">{contrastMessage}</span>
-				</div>
-			</>
-		);
-	}
-
-	return (
-		<ColorPicker
-			value={color}
-			size="small"
-			showText={false}
-			trigger="click"
-			panelRender={renderPanel}
-			onChangeComplete={(next): void => onChange(next.toHexString())}
-		>
-			<button
-				type="button"
-				className={cx(styles.row, { [styles.active]: value !== undefined })}
-				data-testid={testId}
-			>
-				<span
-					className={cx(styles.chip, { [styles.chipEmpty]: value === undefined })}
-					style={
-						value ? { background: value, color: inkForSurface(value) } : undefined
-					}
-				>
-					{value !== undefined && <Check size={14} />}
-				</span>
-				<Typography.Text className={styles.label}>Custom</Typography.Text>
-				<span className={cx(styles.hex, 'translate-safe')}>
-					{value ?? HEX_PLACEHOLDER}
-				</span>
-				<ChevronDown size={14} />
-			</button>
-		</ColorPicker>
-	);
-}
-
-export default CustomBackgroundRow;

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

@@ -1,113 +0,0 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { TEXT_BACKGROUND_PAIRS } from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/presets';
-
-import BackgroundSwatches from '../BackgroundSwatches';
-
-function renderRow(
-	props: Partial<React.ComponentProps<typeof BackgroundSwatches>> = {},
-): jest.Mock {
-	const onChange = jest.fn();
-	render(
-		<TooltipProvider>
-			<BackgroundSwatches
-				testId="background"
-				label="Panel background"
-				theme="dark"
-				value="default"
-				onChange={onChange}
-				{...props}
-			/>
-		</TooltipProvider>,
-	);
-	return onChange;
-}
-
-describe('BackgroundSwatches', () => {
-	it('offers transparent, the default surface and the eight presets in order', () => {
-		renderRow();
-
-		expect(
-			screen
-				.getAllByRole('radio')
-				.map((swatch) => swatch.getAttribute('aria-label')),
-		).toStrictEqual([
-			'Transparent',
-			'Default panel',
-			'Robin',
-			'Purple',
-			'Sakura',
-			'Cherry',
-			'Amber',
-			'Forest',
-			'Sienna',
-			'Slate',
-		]);
-	});
-
-	it('is one labelled group', () => {
-		renderRow();
-
-		expect(
-			screen.getByRole('radiogroup', { name: 'Panel background' }),
-		).toBeInTheDocument();
-	});
-
-	it.each([
-		['background-none', 'Transparent — no card, border or title bar'],
-		['background-default', 'Default panel colour'],
-		['background-sakura', 'Sakura'],
-	])('explains %s on hover', async (swatchId, copy) => {
-		renderRow();
-
-		fireEvent.focus(screen.getByTestId(swatchId));
-
-		await waitFor(() => {
-			expect(screen.getByRole('tooltip')).toHaveTextContent(copy);
-		});
-	});
-
-	it('paints each preset in the given theme', () => {
-		renderRow({ theme: 'light' });
-
-		expect(screen.getByTestId('background-amber')).toHaveStyle({
-			background: TEXT_BACKGROUND_PAIRS.amber.light.surface,
-			color: TEXT_BACKGROUND_PAIRS.amber.light.ink,
-		});
-	});
-
-	it('marks only the selected swatch, and checks it', () => {
-		renderRow({ value: 'forest' });
-
-		expect(screen.getByRole('radio', { name: 'Forest' })).toBeChecked();
-		expect(
-			screen.getByRole('radio', { name: 'Default panel' }),
-		).not.toBeChecked();
-		expect(
-			screen.getByTestId('background-forest').querySelector('svg'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByTestId('background-default').querySelector('svg'),
-		).not.toBeInTheDocument();
-	});
-
-	it('reports the swatch that was clicked', () => {
-		const onChange = renderRow();
-
-		fireEvent.click(screen.getByRole('radio', { name: 'Sienna' }));
-
-		expect(onChange).toHaveBeenCalledWith('sienna');
-	});
-
-	// jsdom does not implement radio arrow navigation, so the shared name — what
-	// makes them one group — is what there is to assert.
-	it('groups every swatch under one radio name', () => {
-		renderRow();
-
-		const names = new Set(
-			screen.getAllByRole('radio').map((swatch) => swatch.getAttribute('name')),
-		);
-
-		expect(names).toStrictEqual(new Set(['background']));
-	});
-});

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

@@ -1,77 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import CustomBackgroundRow from '../CustomBackgroundRow';
-
-function renderRow(value?: string): jest.Mock {
-	const onChange = jest.fn();
-	render(
-		<CustomBackgroundRow testId="custom" value={value} onChange={onChange} />,
-	);
-	return onChange;
-}
-
-describe('CustomBackgroundRow', () => {
-	it('stands in for the hex while no custom colour is set', () => {
-		renderRow();
-
-		expect(screen.getByTestId('custom')).toHaveTextContent('#______');
-	});
-
-	it('shows the stored hex once one is set', () => {
-		renderRow('#3A2A63');
-
-		expect(screen.getByTestId('custom')).toHaveTextContent('#3A2A63');
-	});
-
-	it('checks the chip only while the custom colour is the selection', () => {
-		renderRow('#3A2A63');
-
-		expect(screen.getByTestId('custom').querySelector('svg')).toBeInTheDocument();
-	});
-
-	it('leaves the chip unchecked while no custom colour is set', () => {
-		renderRow();
-
-		expect(screen.getByTestId('custom').querySelectorAll('svg')).toHaveLength(1);
-	});
-
-	describe('the picker', () => {
-		it('opens on the row', () => {
-			renderRow('#3A2A63');
-
-			fireEvent.click(screen.getByTestId('custom'));
-
-			expect(screen.getByTestId('custom-contrast')).toBeInTheDocument();
-		});
-
-		it('reports the contrast the colour achieves', () => {
-			renderRow('#3A2A63');
-
-			fireEvent.click(screen.getByTestId('custom'));
-
-			// The derived ink is pure white, not purple's paired ink.
-			expect(screen.getByTestId('custom-contrast')).toHaveTextContent(
-				'Contrast 12.4:1',
-			);
-		});
-
-		it('warns when no ink clears the floor, without disabling anything', () => {
-			renderRow('#808080');
-
-			fireEvent.click(screen.getByTestId('custom'));
-
-			expect(screen.getByTestId('custom-contrast')).toHaveTextContent(
-				'below 4.5:1',
-			);
-			expect(screen.getByTestId('custom')).toBeEnabled();
-		});
-
-		it('says nothing about the floor when the colour clears it', () => {
-			renderRow('#111111');
-
-			fireEvent.click(screen.getByTestId('custom'));
-
-			expect(screen.getByTestId('custom-contrast')).not.toHaveTextContent('below');
-		});
-	});
-});

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

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

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

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

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

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

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

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

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

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

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

@@ -23,8 +23,6 @@ import ChartAppearanceSection from './sections/ChartAppearanceSection/ChartAppea
 import ContextLinksSection from './sections/ContextLinksSection/ContextLinksSection';
 import FormattingSection from './sections/FormattingSection/FormattingSection';
 import LegendSection from './sections/LegendSection/LegendSection';
-import PanelHeaderSection from './sections/PanelHeaderSection/PanelHeaderSection';
-import TextLayoutSection from './sections/TextLayoutSection/TextLayoutSection';
 import ThresholdsSection from './sections/ThresholdsSection/ThresholdsSection';
 import VisualizationSection from './sections/VisualizationSection/VisualizationSection';
 
@@ -119,23 +117,6 @@ export const SECTION_REGISTRY: {
 		update: (spec, buckets): PanelSpec =>
 			updatePluginSlice(spec, 'histogramBuckets', buckets),
 	},
-	[SectionKind.TextLayout]: {
-		Component: TextLayoutSection,
-		get: (spec): SectionSpecMap[SectionKind.TextLayout] | undefined =>
-			getPluginSlice<SectionSpecMap[SectionKind.TextLayout]>(spec, 'presentation'),
-		update: (spec, presentation): PanelSpec =>
-			updatePluginSlice(spec, 'presentation', presentation),
-	},
-	[SectionKind.PanelHeader]: {
-		Component: PanelHeaderSection,
-		get: (spec): SectionSpecMap[SectionKind.PanelHeader] | undefined =>
-			getPluginSlice<SectionSpecMap[SectionKind.PanelHeader]>(
-				spec,
-				'headerOptions',
-			),
-		update: (spec, headerOptions): PanelSpec =>
-			updatePluginSlice(spec, 'headerOptions', headerOptions),
-	},
 	[SectionKind.ContextLinks]: {
 		Component: ContextLinksSection,
 		// Panel-level slice (spec.links), not under the plugin spec — no cast needed.

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

@@ -1,24 +0,0 @@
-import type {
-	SectionEditorProps,
-	SectionKind,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
-
-import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
-
-/** Edits the Text panel's `headerOptions` slice: the panel card's title strip. */
-function PanelHeaderSection({
-	value,
-	onChange,
-}: SectionEditorProps<SectionKind.PanelHeader>): JSX.Element {
-	return (
-		<ConfigSwitch
-			testId="panel-header-hide"
-			title="Hide header"
-			description="Drop the title strip on the dashboard; hovering the panel shows controls for drag and actions."
-			value={value?.hide === true}
-			onChange={(hide): void => onChange({ ...value, hide })}
-		/>
-	);
-}
-
-export default PanelHeaderSection;

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

@@ -1,29 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import PanelHeaderSection from '../PanelHeaderSection';
-
-describe('PanelHeaderSection', () => {
-	it('toggles hide on', () => {
-		const onChange = jest.fn();
-		render(<PanelHeaderSection value={undefined} onChange={onChange} />);
-
-		fireEvent.click(screen.getByTestId('panel-header-hide'));
-
-		expect(onChange).toHaveBeenCalledWith({ hide: true });
-	});
-
-	it('toggles hide back off', () => {
-		const onChange = jest.fn();
-		render(<PanelHeaderSection value={{ hide: true }} onChange={onChange} />);
-
-		fireEvent.click(screen.getByTestId('panel-header-hide'));
-
-		expect(onChange).toHaveBeenCalledWith({ hide: false });
-	});
-
-	it('shows the header by default when the slice is empty', () => {
-		render(<PanelHeaderSection value={undefined} onChange={jest.fn()} />);
-
-		expect(screen.getByTestId('panel-header-hide')).not.toBeChecked();
-	});
-});

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/TextLayoutSection/TextLayoutSection.module.scss

@@ -1,11 +0,0 @@
-.section {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}

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

@@ -1,91 +0,0 @@
-import {
-	DashboardtypesTextAlignDTO,
-	DashboardtypesVerticalAlignDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { Typography } from '@signozhq/ui/typography';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import {
-	resolveTextBackground,
-	selectionFromResolved,
-	storedFromSelection,
-} from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/resolveTextBackground';
-import type { TextBackgroundSelection } from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/types';
-import type {
-	SectionEditorProps,
-	SectionKind,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
-
-import BackgroundSwatches from '../../controls/BackgroundSwatches/BackgroundSwatches';
-import CustomBackgroundRow from '../../controls/BackgroundSwatches/CustomBackgroundRow';
-import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
-
-import styles from './TextLayoutSection.module.scss';
-
-const HORIZONTAL_OPTIONS = [
-	{ value: DashboardtypesTextAlignDTO.left, label: 'Left' },
-	{ value: DashboardtypesTextAlignDTO.center, label: 'Center' },
-	{ value: DashboardtypesTextAlignDTO.right, label: 'Right' },
-];
-
-const VERTICAL_OPTIONS = [
-	{ value: DashboardtypesVerticalAlignDTO.top, label: 'Top' },
-	{ value: DashboardtypesVerticalAlignDTO.center, label: 'Middle' },
-	{ value: DashboardtypesVerticalAlignDTO.bottom, label: 'Bottom' },
-];
-
-/**
- * Edits the Text panel's `presentation` slice: body alignment and the card
- * background (TDD D7 — scoped to the text spec, not the panel envelope).
- */
-function TextLayoutSection({
-	value,
-	onChange,
-}: SectionEditorProps<SectionKind.TextLayout>): JSX.Element {
-	const theme = useIsDarkMode() ? 'dark' : 'light';
-	const background = resolveTextBackground(value?.background, theme);
-
-	return (
-		<div className={styles.section}>
-			<div className={styles.field}>
-				<Typography.Text>Horizontal alignment</Typography.Text>
-				<ConfigSegmented
-					testId="text-layout-horizontal-align"
-					items={HORIZONTAL_OPTIONS}
-					value={value?.textAlign ?? DashboardtypesTextAlignDTO.left}
-					onChange={(textAlign): void => onChange({ ...value, textAlign })}
-				/>
-			</div>
-			<div className={styles.field}>
-				<Typography.Text>Vertical alignment</Typography.Text>
-				<ConfigSegmented
-					testId="text-layout-vertical-align"
-					items={VERTICAL_OPTIONS}
-					value={value?.verticalAlign ?? DashboardtypesVerticalAlignDTO.top}
-					onChange={(verticalAlign): void => onChange({ ...value, verticalAlign })}
-				/>
-			</div>
-			<div className={styles.field}>
-				<Typography.Text>Background</Typography.Text>
-				<BackgroundSwatches
-					testId="text-layout-background"
-					label="Panel background"
-					theme={theme}
-					value={selectionFromResolved(background)}
-					onChange={(selection: TextBackgroundSelection): void =>
-						onChange({
-							...value,
-							background: storedFromSelection(selection, theme),
-						})
-					}
-				/>
-				<CustomBackgroundRow
-					testId="text-layout-background-custom"
-					value={background.kind === 'custom' ? background.surface : undefined}
-					onChange={(hex): void => onChange({ ...value, background: hex })}
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default TextLayoutSection;

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

@@ -1,144 +0,0 @@
-import type { ReactElement } from 'react';
-import {
-	fireEvent,
-	render as rtlRender,
-	type RenderResult,
-	screen,
-} from '@testing-library/react';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import {
-	DashboardtypesTextAlignDTO,
-	DashboardtypesVerticalAlignDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import {
-	TEXT_BACKGROUND_PAIRS,
-	TRANSPARENT_BACKGROUND,
-} from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/presets';
-
-import TextLayoutSection from '../TextLayoutSection';
-
-const value = {
-	textAlign: DashboardtypesTextAlignDTO.left,
-	verticalAlign: DashboardtypesVerticalAlignDTO.top,
-};
-
-// The swatch tooltips need a provider; AppLayout supplies one at runtime.
-function render(ui: ReactElement): RenderResult {
-	return rtlRender(<TooltipProvider>{ui}</TooltipProvider>);
-}
-
-// The theme context defaults to dark, so the swatches paint the dark pairs.
-describe('TextLayoutSection', () => {
-	it('changes horizontal alignment', () => {
-		const onChange = jest.fn();
-		render(<TextLayoutSection value={value} onChange={onChange} />);
-
-		fireEvent.click(screen.getByText('Center'));
-
-		expect(onChange).toHaveBeenCalledWith({
-			...value,
-			textAlign: DashboardtypesTextAlignDTO.center,
-		});
-	});
-
-	it('changes vertical alignment', () => {
-		const onChange = jest.fn();
-		render(<TextLayoutSection value={value} onChange={onChange} />);
-
-		fireEvent.click(screen.getByText('Bottom'));
-
-		expect(onChange).toHaveBeenCalledWith({
-			...value,
-			verticalAlign: DashboardtypesVerticalAlignDTO.bottom,
-		});
-	});
-
-	it('stores the surface of the theme a preset was picked in', () => {
-		const onChange = jest.fn();
-		render(<TextLayoutSection value={value} onChange={onChange} />);
-
-		fireEvent.click(screen.getByRole('radio', { name: 'Amber' }));
-
-		expect(onChange).toHaveBeenCalledWith({
-			...value,
-			background: TEXT_BACKGROUND_PAIRS.amber.dark.surface,
-		});
-	});
-
-	it('stores a zero-alpha colour for transparent', () => {
-		const onChange = jest.fn();
-		render(<TextLayoutSection value={value} onChange={onChange} />);
-
-		fireEvent.click(screen.getByRole('radio', { name: 'Transparent' }));
-
-		expect(onChange).toHaveBeenCalledWith({
-			...value,
-			background: TRANSPARENT_BACKGROUND,
-		});
-	});
-
-	it('unsets the background for the default panel surface', () => {
-		const onChange = jest.fn();
-		render(
-			<TextLayoutSection
-				value={{ ...value, background: TRANSPARENT_BACKGROUND }}
-				onChange={onChange}
-			/>,
-		);
-
-		fireEvent.click(screen.getByRole('radio', { name: 'Default panel' }));
-
-		expect(onChange).toHaveBeenCalledWith({ ...value, background: undefined });
-	});
-
-	it('lights up the swatch the stored surface belongs to', () => {
-		render(
-			<TextLayoutSection
-				value={{ ...value, background: TEXT_BACKGROUND_PAIRS.sakura.light.surface }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByRole('radio', { name: 'Sakura' })).toBeChecked();
-	});
-
-	it('stores a custom colour straight from the picker', () => {
-		const onChange = jest.fn();
-		render(<TextLayoutSection value={value} onChange={onChange} />);
-
-		fireEvent.click(screen.getByTestId('text-layout-background-custom'));
-		fireEvent.change(screen.getByRole('textbox'), {
-			target: { value: '3A2A64' },
-		});
-
-		expect(onChange).toHaveBeenCalledWith({
-			...value,
-			background: '#3a2a64',
-		});
-	});
-
-	it('shows a stored custom colour on the custom row alone', () => {
-		render(
-			<TextLayoutSection
-				value={{ ...value, background: '#3A2A64' }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId('text-layout-background-custom')).toHaveTextContent(
-			'#3A2A64',
-		);
-		expect(
-			screen
-				.getAllByRole<HTMLInputElement>('radio')
-				.filter((swatch) => swatch.checked),
-		).toHaveLength(0);
-	});
-
-	it('selects the default surface when nothing is stored', () => {
-		render(<TextLayoutSection value={undefined} onChange={jest.fn()} />);
-
-		expect(screen.getByRole('radio', { name: 'Default panel' })).toBeChecked();
-		expect(screen.getByRole('radio', { name: 'Transparent' })).not.toBeChecked();
-	});
-});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,27 +0,0 @@
-// Same dotted backdrop and spacing as the query preview. The pane itself never
-// scrolls — the panel card clips, and the renderer scrolls its own body when the
-// content outgrows it, as on the grid.
-.preview {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	box-sizing: border-box;
-	padding: 24px;
-	background-image: radial-gradient(var(--l2-border) 1px, transparent 0);
-	background-size: 20px 20px;
-	border-bottom: 1px solid var(--l1-border);
-	overflow: hidden;
-}
-
-// The draft panel, rendered as the card the grid shows (minus actions).
-.surface {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	border: 1px solid var(--text-panel-border, var(--l2-border));
-	border-radius: 4px;
-	background: var(--text-panel-surface, var(--l2-background));
-	color: var(--text-panel-ink, inherit);
-	overflow: hidden;
-}

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

@@ -1,53 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import type { PanelMode } from 'lib/visualization/panels/types';
-import PanelHeader from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
-import StaticPanelBody from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/StaticPanelBody/StaticPanelBody';
-
-import { useTextBackground } from '../../Panels/hooks/useTextBackground';
-import type { RenderableStaticPanelDefinition } from '../../Panels/types/panelDefinition';
-import { isPanelHeaderHidden } from '../../Panels/utils/isPanelHeaderHidden';
-import styles from './StaticPreviewPane.module.scss';
-
-interface StaticPreviewPaneProps {
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-	panelDefinition: RenderableStaticPanelDefinition;
-	panelMode: PanelMode;
-	/** Saves an edit made from the rendered body into the draft; absent = read-only. */
-	onChangeText?: (text: string) => void;
-}
-
-/**
- * Live preview of a static draft: the panel card rendered through the same
- * `StaticPanelBody` the grid uses, on the query preview's dotted canvas. It
- * re-renders from the draft spec on every edit — no query, no Run step. Shared
- * by the full editor and the View modal.
- */
-function StaticPreviewPane({
-	panelId,
-	panel,
-	panelDefinition,
-	panelMode,
-	onChangeText,
-}: StaticPreviewPaneProps): JSX.Element {
-	const background = useTextBackground(panel.spec);
-
-	return (
-		<div className={styles.preview}>
-			<div className={styles.surface} style={background.style}>
-				{!isPanelHeaderHidden(panel.spec) && (
-					<PanelHeader mode="static" panelId={panelId} panel={panel} hideActions />
-				)}
-				<StaticPanelBody
-					panelDefinition={panelDefinition}
-					panel={panel}
-					panelId={panelId}
-					panelMode={panelMode}
-					onChangeText={onChangeText}
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default StaticPreviewPane;

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

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

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

@@ -1,129 +0,0 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import type { RenderableStaticPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-
-import StaticEditorBody from '../StaticEditorBody';
-import type { PanelEditorDraftApi } from '../types';
-import { usePanelEditorSave } from '../hooks/usePanelEditorSave';
-
-jest.mock('../hooks/usePanelEditorSave', () => ({
-	usePanelEditorSave: jest.fn(),
-}));
-// Chrome + collaborators stubbed: this suite asserts the static body's wiring —
-// the save shape above all — not their internals.
-jest.mock('../Header/Header', () => ({
-	__esModule: true,
-	default: ({ onSave }: { onSave: () => void }): JSX.Element => (
-		<button type="button" data-testid="header-save" onClick={onSave}>
-			Save
-		</button>
-	),
-}));
-jest.mock('../ConfigPane/ConfigPane', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="config-pane" />,
-}));
-jest.mock(
-	'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader',
-	() => ({ __esModule: true, default: (): null => null }),
-);
-jest.mock(
-	'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/StaticPanelBody/StaticPanelBody',
-	() => ({
-		__esModule: true,
-		default: (): JSX.Element => <div data-testid="static-preview-body" />,
-	}),
-);
-jest.mock('@signozhq/ui/sonner', () => ({ toast: { success: jest.fn() } }));
-jest.mock('providers/ErrorModalProvider', () => ({
-	useErrorModal: (): unknown => ({ showErrorModal: jest.fn() }),
-}));
-
-const mockUseSave = usePanelEditorSave as jest.Mock;
-
-// The draft deliberately carries a stray query: Save must strip it — the API
-// rejects anything but [] for a static kind.
-const draft = {
-	kind: 'Panel',
-	spec: {
-		display: { name: 'Runbook' },
-		plugin: { kind: 'signoz/TextPanel', spec: { text: '# hi' } },
-		queries: [{ spec: {} }],
-	},
-} as unknown as DashboardtypesPanelDTO;
-
-const draftApi: PanelEditorDraftApi = {
-	draft,
-	spec: draft.spec,
-	setSpec: jest.fn(),
-	isSpecDirty: false,
-	reset: jest.fn(),
-};
-
-const definition = ({
-	kind: 'signoz/TextPanel',
-	displayName: 'Text',
-	sections: [],
-	actions: {},
-	mode: 'static',
-	Renderer: (): null => null,
-	EditorPane: (): JSX.Element => <div data-testid="editor-pane" />,
-} as unknown) as RenderableStaticPanelDefinition;
-
-function renderBody(isEditable = true): void {
-	render(
-		<StaticEditorBody
-			dashboardId="d1"
-			panelId="p1"
-			panel={draft}
-			isEditable={isEditable}
-			editDisabledReason=""
-			onClose={jest.fn()}
-			onSaved={jest.fn()}
-			draftApi={draftApi}
-			panelDefinition={definition}
-			onChangePanelKind={jest.fn()}
-		/>,
-	);
-}
-
-describe('StaticEditorBody', () => {
-	beforeEach(() => {
-		mockUseSave.mockReset();
-		mockUseSave.mockReturnValue({
-			save: jest.fn().mockResolvedValue('p1'),
-			isSaving: false,
-		});
-	});
-
-	it('renders the editor pane and the live preview, no query builder', () => {
-		renderBody();
-
-		expect(screen.getByTestId('editor-pane')).toBeInTheDocument();
-		expect(screen.getByTestId('static-preview-body')).toBeInTheDocument();
-		expect(
-			screen.queryByTestId('panel-editor-v2-query-builder'),
-		).not.toBeInTheDocument();
-	});
-
-	it('saves the spec with queries forced to [] — the only shape the API accepts', async () => {
-		const save = jest.fn().mockResolvedValue('p1');
-		mockUseSave.mockReturnValue({ save, isSaving: false });
-		renderBody();
-
-		fireEvent.click(screen.getByTestId('header-save'));
-
-		await waitFor(() => expect(save).toHaveBeenCalledTimes(1));
-		expect(save).toHaveBeenCalledWith({ ...draft.spec, queries: [] });
-	});
-
-	it('does not save when the dashboard is not editable', () => {
-		const save = jest.fn();
-		mockUseSave.mockReturnValue({ save, isSaving: false });
-		renderBody(false);
-
-		fireEvent.click(screen.getByTestId('header-save'));
-
-		expect(save).not.toHaveBeenCalled();
-	});
-});

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/__tests__/newPanelRoute.test.ts

@@ -115,15 +115,3 @@ describe('newPanelRoute', () => {
 		});
 	});
 });
-
-describe('parseNewPanelKind — kinds without a legacy panel type', () => {
-	it('accepts a registered static kind', () => {
-		expect(parseNewPanelKind('new', '?panelKind=signoz%2FTextPanel')).toBe(
-			'signoz/TextPanel',
-		);
-	});
-
-	it('still rejects a kind that is not registered', () => {
-		expect(parseNewPanelKind('new', '?panelKind=signoz%2FNopePanel')).toBeNull();
-	});
-});

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute.ts

@@ -4,8 +4,8 @@ import type { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
-import { PANELS } from '../Panels/registry';
 import {
+	PANEL_KIND_TO_PANEL_TYPE,
 	PANEL_TYPE_TO_PANEL_KIND,
 	type PanelKind,
 } from '../Panels/types/panelKind';
@@ -40,9 +40,7 @@ export function parseNewPanelKind(
 		return null;
 	}
 	const kind = new URLSearchParams(search).get(PANEL_KIND_PARAM);
-	// Gated on the registry, not the legacy map — a static kind has no legacy
-	// panel type, and the map would reject its route as a stale link.
-	return kind && kind in PANELS ? (kind as PanelKind) : null;
+	return kind && kind in PANEL_KIND_TO_PANEL_TYPE ? (kind as PanelKind) : null;
 }
 
 /**

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

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

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

@@ -11,8 +11,6 @@ import type { PanelQueryCapabilities } from '../types/panelCapabilities';
 import { NO_PANEL_ACTIONS } from '../types/panelDefinition';
 import {
 	getHiddenQueryBuilderFields,
-	getQueryPanelDefinition,
-	requireQueryPanelDefinition,
 	getSupportedQueryTypes,
 	getSupportedSignals,
 	isPanelCombinationValid,
@@ -34,8 +32,6 @@ const EXPECTED_QUERY_TYPES: Record<PanelKind, EQueryType[]> = {
 	'signoz/PieChartPanel': [QUERY_BUILDER, CLICKHOUSE],
 	'signoz/TablePanel': [QUERY_BUILDER, CLICKHOUSE],
 	'signoz/ListPanel': [QUERY_BUILDER],
-	// Static kind: no query surface at all.
-	'signoz/TextPanel': [],
 };
 
 const EXPECTED_SIGNALS: Record<PanelKind, TelemetrytypesSignalDTO[]> = {
@@ -47,16 +43,11 @@ const EXPECTED_SIGNALS: Record<PanelKind, TelemetrytypesSignalDTO[]> = {
 	'signoz/TablePanel': [metrics, logs, traces],
 	// List renders raw rows; metrics produce no row data.
 	'signoz/ListPanel': [logs, traces],
-	'signoz/TextPanel': [],
 };
 
 // Exhaustive over PanelKind, so a new kind can't ship without stating how its request is
 // shaped — the check that used to be implicit in a legacy PANEL_TYPES switch.
-// Partial: a static kind declares no query capabilities — the lookup below
-// resolves undefined on both sides for it.
-const EXPECTED_QUERY_CAPABILITIES: Partial<
-	Record<PanelKind, PanelQueryCapabilities>
-> = {
+const EXPECTED_QUERY_CAPABILITIES: Record<PanelKind, PanelQueryCapabilities> = {
 	'signoz/TimeSeriesPanel': {
 		requestType: time_series,
 		formatTableResultForUI: false,
@@ -116,7 +107,7 @@ const ALL_KINDS = Object.keys(EXPECTED_QUERY_TYPES) as PanelKind[];
 describe('panel capabilities guard', () => {
 	describe('query capabilities', () => {
 		it.each(ALL_KINDS)('declares how %s shapes its request', (kind) => {
-			expect(getQueryPanelDefinition(kind)?.queryCapabilities).toStrictEqual(
+			expect(getPanelDefinition(kind).queryCapabilities).toStrictEqual(
 				EXPECTED_QUERY_CAPABILITIES[kind],
 			);
 		});
@@ -158,8 +149,7 @@ describe('panel capabilities guard', () => {
 		});
 
 		it('carries an inert query shape, so a stray request can do no harm', () => {
-			const queryCapabilities = requireQueryPanelDefinition(unknownKind)
-				.queryCapabilities;
+			const { queryCapabilities } = getPanelDefinition(unknownKind);
 			expect(queryCapabilities.requestType).toBe(time_series);
 			expect(queryCapabilities.serverPaginated).toBe(false);
 			expect(queryCapabilities.formatTableResultForUI).toBe(false);

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

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

frontend/src/pages/DashboardPage/DashboardContainer/Panels/components/NoData/NoData.tsx

@@ -8,7 +8,7 @@ import {
 	selectViewPanelExtendWindow,
 	useViewPanelStore,
 } from '../../../store/useViewPanelStore';
-import { toLegacyPanelType } from '../../types/panelKind';
+import { PANEL_KIND_TO_PANEL_TYPE } from '../../types/panelKind';
 import PanelLoader from '../PanelLoader/PanelLoader';
 import PanelMessage, { PanelMessageAction } from '../PanelMessage/PanelMessage';
 import { useExtendTimeWindow } from './useExtendTimeWindow';
@@ -57,7 +57,7 @@ function NoData({
 	// `panelType` stays on the event so existing reports keep resolving; `panelKind` is the
 	// V2 identity, and the only one that can tell two kinds sharing a panel type apart.
 	const panelKind = panel.spec.plugin.kind;
-	const panelType = toLegacyPanelType(panelKind);
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
 
 	const extendAction: PanelMessageAction | undefined =
 		activeExtend?.canExtend && activeExtend.actionLabel

frontend/src/pages/DashboardPage/DashboardContainer/Panels/hooks/__tests__/useTextBackground.test.tsx

@@ -1,147 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { rgbaFromHex } from '../../kinds/TextPanel/background/contrast';
-import {
-	INK_ALPHAS,
-	SECONDARY_INK_OPACITY,
-	TEXT_BACKGROUND_PAIRS,
-	TRANSPARENT_BACKGROUND,
-} from '../../kinds/TextPanel/background/presets';
-import { useTextBackground } from '../useTextBackground';
-
-const isDarkMode = jest.fn<boolean, []>(() => true);
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => isDarkMode(),
-}));
-
-function textPanel(background?: string): DashboardtypesPanelSpecDTO {
-	return {
-		display: { name: 'Panel' },
-		plugin: {
-			kind: 'signoz/TextPanel',
-			spec: { text: '', presentation: { background } },
-		},
-		queries: [],
-	} as unknown as DashboardtypesPanelSpecDTO;
-}
-
-describe('useTextBackground', () => {
-	beforeEach(() => {
-		isDarkMode.mockReturnValue(true);
-	});
-
-	it('sets no custom properties for the default surface', () => {
-		const { result } = renderHook(() => useTextBackground(textPanel()));
-
-		expect(result.current).toStrictEqual({ kind: 'default', style: {} });
-	});
-
-	// The card, its border and the header's divider all read these.
-	it('paints a zero-alpha background transparent rather than dropping the card', () => {
-		const { result } = renderHook(() =>
-			useTextBackground(textPanel(TRANSPARENT_BACKGROUND)),
-		);
-
-		expect(result.current).toStrictEqual({
-			kind: 'none',
-			style: {
-				'--text-panel-surface': 'transparent',
-				'--text-panel-border': 'transparent',
-			},
-		});
-	});
-
-	it('exposes the preset pair for the current theme', () => {
-		const { result } = renderHook(() =>
-			useTextBackground(textPanel(TEXT_BACKGROUND_PAIRS.amber.dark.surface)),
-		);
-
-		const { ink } = TEXT_BACKGROUND_PAIRS.amber.dark;
-
-		expect(result.current.style).toStrictEqual({
-			'--text-panel-surface': TEXT_BACKGROUND_PAIRS.amber.dark.surface,
-			'--text-panel-ink': ink,
-			'--text-panel-border': 'rgba(255, 255, 255, 0.09)',
-			'--text-panel-link-decoration': 'underline',
-			'--text-panel-ink-secondary': rgbaFromHex(ink, SECONDARY_INK_OPACITY),
-			'--text-panel-grip': rgbaFromHex(ink, INK_ALPHAS['--text-panel-grip']),
-			'--scrollbar-thumb': rgbaFromHex(ink, INK_ALPHAS['--scrollbar-thumb']),
-			'--scrollbar-thumb-hover': rgbaFromHex(
-				ink,
-				INK_ALPHAS['--scrollbar-thumb-hover'],
-			),
-			'--text-panel-pill-surface': rgbaFromHex(
-				ink,
-				INK_ALPHAS['--text-panel-pill-surface'],
-			),
-		});
-	});
-
-	it('draws the surface chrome from the ink', () => {
-		const { result } = renderHook(() =>
-			useTextBackground(textPanel(TEXT_BACKGROUND_PAIRS.amber.light.surface)),
-		);
-
-		Object.keys(INK_ALPHAS).forEach((name) => {
-			expect(result.current.style).toHaveProperty(name);
-		});
-	});
-
-	// Stored light, read in dark: the ink is the dark pair's.
-	it('carries the secondary ink and the link underline', () => {
-		const { result } = renderHook(() =>
-			useTextBackground(textPanel(TEXT_BACKGROUND_PAIRS.sakura.light.surface)),
-		);
-
-		expect(result.current.style).toMatchObject({
-			'--text-panel-ink-secondary': `rgba(253, 232, 242, ${SECONDARY_INK_OPACITY})`,
-			'--text-panel-link-decoration': 'underline',
-		});
-	});
-
-	it('re-resolves a stored surface when the theme changes', () => {
-		const spec = textPanel(TEXT_BACKGROUND_PAIRS.forest.dark.surface);
-		const { result, rerender } = renderHook(() => useTextBackground(spec));
-
-		expect(result.current.style).toMatchObject({
-			'--text-panel-surface': TEXT_BACKGROUND_PAIRS.forest.dark.surface,
-		});
-
-		isDarkMode.mockReturnValue(false);
-		rerender();
-
-		expect(result.current.style).toMatchObject({
-			'--text-panel-surface': TEXT_BACKGROUND_PAIRS.forest.light.surface,
-			'--text-panel-ink': TEXT_BACKGROUND_PAIRS.forest.light.ink,
-			'--text-panel-border': 'rgba(0, 0, 0, 0.07)',
-		});
-	});
-
-	it('paints a custom colour the same in both themes', () => {
-		const spec = textPanel('#3A2A64');
-		const { result, rerender } = renderHook(() => useTextBackground(spec));
-		const inDark = result.current.style;
-
-		isDarkMode.mockReturnValue(false);
-		rerender();
-
-		expect(result.current.style).toMatchObject({
-			'--text-panel-surface': '#3A2A64',
-			'--text-panel-ink': inDark['--text-panel-ink' as keyof typeof inDark],
-		});
-	});
-
-	it('leaves a kind without a presentation slice alone', () => {
-		const { result } = renderHook(() =>
-			useTextBackground({
-				display: { name: 'Panel' },
-				plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-				queries: [],
-			} as unknown as DashboardtypesPanelSpecDTO),
-		);
-
-		expect(result.current).toStrictEqual({ kind: 'default', style: {} });
-	});
-});

frontend/src/pages/DashboardPage/DashboardContainer/Panels/hooks/__tests__/useUpdatePanelText.test.tsx

@@ -1,68 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { useUpdatePanelText } from '../useUpdatePanelText';
-
-const patchAsync = jest.fn<Promise<unknown>, [unknown]>(() =>
-	Promise.resolve(undefined),
-);
-const showErrorModal = jest.fn();
-let store = { dashboardId: 'dash-1', isEditable: true };
-
-jest.mock('../../../hooks/useOptimisticPatch', () => ({
-	useOptimisticPatch: (): unknown => ({ patchAsync }),
-}));
-jest.mock('providers/ErrorModalProvider', () => ({
-	useErrorModal: (): unknown => ({ showErrorModal }),
-}));
-jest.mock('../../../store/useDashboardStore', () => ({
-	useDashboardStore: (select: (s: typeof store) => unknown): unknown =>
-		select(store),
-}));
-
-describe('useUpdatePanelText', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		store = { dashboardId: 'dash-1', isEditable: true };
-	});
-
-	it('patches the panel body', () => {
-		const { result } = renderHook(() => useUpdatePanelText('p1'));
-
-		result.current?.('- [x] done');
-
-		expect(patchAsync).toHaveBeenCalledWith([
-			{
-				op: 'add',
-				path: '/spec/panels/p1/spec/plugin/spec/text',
-				value: '- [x] done',
-			},
-		]);
-	});
-
-	it('gives no callback when the viewer cannot edit', () => {
-		store = { dashboardId: 'dash-1', isEditable: false };
-
-		const { result } = renderHook(() => useUpdatePanelText('p1'));
-
-		expect(result.current).toBeUndefined();
-	});
-
-	it('gives no callback outside a dashboard', () => {
-		store = { dashboardId: '', isEditable: true };
-
-		const { result } = renderHook(() => useUpdatePanelText('p1'));
-
-		expect(result.current).toBeUndefined();
-	});
-
-	it('surfaces a failed save', async () => {
-		const failure = new Error('locked');
-		patchAsync.mockRejectedValueOnce(failure);
-		const { result } = renderHook(() => useUpdatePanelText('p1'));
-
-		result.current?.('- [x] done');
-		await Promise.resolve();
-
-		expect(showErrorModal).toHaveBeenCalledWith(failure);
-	});
-});

frontend/src/pages/DashboardPage/DashboardContainer/Panels/hooks/useOverflowBelow.ts

@@ -1,67 +0,0 @@
-import {
-	type RefObject,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
-
-// Within this distance of the end counts as "at the bottom", so the pill isn't
-// kept alive by sub-pixel rounding or a trailing margin.
-const BOTTOM_EPSILON_PX = 16;
-
-interface UseOverflowBelowResult<T extends HTMLElement> {
-	scrollRef: RefObject<T>;
-	/** Content extends below the fold and the user isn't at the bottom yet. */
-	hasMoreBelow: boolean;
-	scrollToBottom: () => void;
-}
-
-/**
- * Tracks whether a scroll container has unseen content below the fold. Re-measures
- * on scroll, on container resize, and on every commit — the cheap way to follow
- * content growth (a live preview re-rendering as the body is typed) without
- * observing the subtree.
- */
-export function useOverflowBelow<
-	T extends HTMLElement,
->(): UseOverflowBelowResult<T> {
-	const scrollRef = useRef<T>(null);
-	const [hasMoreBelow, setHasMoreBelow] = useState(false);
-
-	const measure = useCallback((): void => {
-		const el = scrollRef.current;
-		if (!el) {
-			return;
-		}
-		const remaining = el.scrollHeight - el.scrollTop - el.clientHeight;
-		setHasMoreBelow(remaining > BOTTOM_EPSILON_PX);
-	}, []);
-
-	// No deps on purpose: runs after every commit. setState bails on unchanged
-	// values, so this settles instead of looping.
-	useEffect(() => {
-		measure();
-	});
-
-	useEffect(() => {
-		const el = scrollRef.current;
-		if (!el) {
-			return undefined;
-		}
-		el.addEventListener('scroll', measure, { passive: true });
-		const observer = new ResizeObserver(measure);
-		observer.observe(el);
-		return (): void => {
-			el.removeEventListener('scroll', measure);
-			observer.disconnect();
-		};
-	}, [measure]);
-
-	const scrollToBottom = useCallback((): void => {
-		const el = scrollRef.current;
-		el?.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
-	}, []);
-
-	return { scrollRef, hasMoreBelow, scrollToBottom };
-}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/hooks/usePrismLanguage.ts

@@ -1,42 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { isLanguageRegistered, loadLanguage } from '../utils/syntaxLanguages';
-
-/**
- * Registers `language` with Prism on demand, reporting when it is ready to
- * highlight with. Already-loaded languages report ready on the first render, so a
- * second fence of the same language never flashes unhighlighted.
- */
-export function usePrismLanguage(language: string | null): boolean {
-	const [isReady, setIsReady] = useState(
-		() => !!language && isLanguageRegistered(language),
-	);
-
-	useEffect(() => {
-		if (!language) {
-			setIsReady(false);
-			return undefined;
-		}
-		if (isLanguageRegistered(language)) {
-			setIsReady(true);
-			return undefined;
-		}
-
-		setIsReady(false);
-		let isStale = false;
-		// `loadLanguage` resolves false rather than rejecting, so there is no failure
-		// path here beyond leaving the block unhighlighted.
-		void loadLanguage(language).then((loaded): boolean => {
-			if (!isStale && loaded) {
-				setIsReady(true);
-			}
-			return loaded;
-		});
-
-		return (): void => {
-			isStale = true;
-		};
-	}, [language]);
-
-	return isReady;
-}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/hooks/useTextBackground.ts

@@ -1,80 +0,0 @@
-import { useMemo } from 'react';
-import type { CSSProperties } from 'react';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { rgbaFromHex } from '../kinds/TextPanel/background/contrast';
-import {
-	INK_ALPHAS,
-	PRESET_BORDER,
-} from '../kinds/TextPanel/background/presets';
-import { resolveTextBackground } from '../kinds/TextPanel/background/resolveTextBackground';
-import type { TextBackgroundKind } from '../kinds/TextPanel/background/types';
-
-export interface TextBackground {
-	kind: TextBackgroundKind;
-	/**
-	 * Custom properties for the card root. Empty for `default`, so the stylesheet's
-	 * own fallbacks decide — nothing here hardcodes a surface.
-	 */
-	style: CSSProperties;
-}
-
-const NO_STYLE: CSSProperties = {};
-
-// D7: `none` drops the card so the body sits on the dashboard canvas. It rides the
-// same properties as a colour, which takes the header's divider with it.
-const CARDLESS_STYLE = {
-	'--text-panel-surface': 'transparent',
-	'--text-panel-border': 'transparent',
-} as CSSProperties;
-
-function inkShares(ink: string): Record<string, string> {
-	return Object.fromEntries(
-		Object.entries(INK_ALPHAS).map(([name, alpha]) => [
-			name,
-			rgbaFromHex(ink, alpha) ?? ink,
-		]),
-	);
-}
-
-/**
- * The card is an ancestor of the renderer, so the host owns these properties and
- * everything below inherits them.
- *
- * Reading one plugin-spec field off the kind union is the accepted smell (TDD
- * D7): a dynamic kind can't narrow it, hence one localized cast per host.
- */
-export function useTextBackground(
-	spec: DashboardtypesPanelSpecDTO,
-): TextBackground {
-	const isDarkMode = useIsDarkMode();
-	const background = (
-		spec.plugin.spec as {
-			presentation?: { background?: string | null };
-		}
-	).presentation?.background;
-
-	return useMemo(() => {
-		const theme = isDarkMode ? 'dark' : 'light';
-		const resolved = resolveTextBackground(background, theme);
-
-		if (resolved.kind === 'none') {
-			return { kind: resolved.kind, style: CARDLESS_STYLE };
-		}
-
-		return {
-			kind: resolved.kind,
-			style:
-				resolved.surface && resolved.ink
-					? ({
-							'--text-panel-surface': resolved.surface,
-							'--text-panel-ink': resolved.ink,
-							'--text-panel-border': PRESET_BORDER[theme],
-							'--text-panel-link-decoration': 'underline',
-							...inkShares(resolved.ink),
-						} as CSSProperties)
-					: NO_STYLE,
-		};
-	}, [background, isDarkMode]);
-}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/hooks/useUpdatePanelText.ts

@@ -1,32 +0,0 @@
-import { useCallback } from 'react';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import type APIError from 'types/api/error';
-
-import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
-import { setPanelTextOp } from '../../patchOps';
-import { useDashboardStore } from '../../store/useDashboardStore';
-
-/**
- * Saves a panel's authored body, or `undefined` when the viewer cannot edit it —
- * the absent callback is the read-only gate, so nothing downstream re-checks.
- * The patch is optimistic: the edit shows at once and rolls back if it fails.
- */
-export function useUpdatePanelText(
-	panelId: string,
-): ((text: string) => void) | undefined {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const isEditable = useDashboardStore((s) => s.isEditable);
-	const { patchAsync } = useOptimisticPatch();
-	const { showErrorModal } = useErrorModal();
-
-	const save = useCallback(
-		(text: string): void => {
-			patchAsync([setPanelTextOp(panelId, text)]).catch((error) => {
-				showErrorModal(error as APIError);
-			});
-		},
-		[panelId, patchAsync, showErrorModal],
-	);
-
-	return dashboardId && isEditable ? save : undefined;
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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