chore(dashboard): retire the V1 variable runtime

The V1 variable engine had no writers left: nothing wrote selectedValue, so
getDashboardVariables produced undefined values, variableFetchStore was never
updated, and the dependency graph and derived store fields only fed that store.
The shared store's one remaining job is publishing the open dashboard's dynamic
variables for query-builder autocomplete, which needs a name and an attribute.

Replace it with a suggestion feed and delete the rest, including the panel
variables prop that no GridCard caller passed and useResolveQuery's dashboardData
option that no caller supplied. useGetResolvedText loses its only variable source
and becomes the title truncation its callers already used it for.

Assisted-by: Claude Opus 5

docs/api/openapi.yml

@@ -2984,11 +2984,6 @@ components:
       - tags
       - spec
       type: object
-    DashboardtypesHeaderOptions:
-      properties:
-        hide:
-          type: boolean
-      type: object
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -3326,11 +3321,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesPanelBackground:
-      enum:
-      - solid
-      - transparent
-      type: string
     DashboardtypesPanelFormatting:
       properties:
         decimalPrecision:
@@ -3351,7 +3341,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:
@@ -3362,7 +3351,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -3373,7 +3361,6 @@ components:
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
-      - signoz/TextPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
@@ -3447,18 +3434,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:
@@ -3750,36 +3725,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:
-          $ref: '#/components/schemas/DashboardtypesPanelBackground'
-        textAlign:
-          $ref: '#/components/schemas/DashboardtypesTextAlign'
-        verticalAlign:
-          $ref: '#/components/schemas/DashboardtypesVerticalAlign'
-      type: object
     DashboardtypesTextVariableSpec:
       properties:
         constant:
@@ -3989,12 +3934,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesVerticalAlign:
-      enum:
-      - top
-      - center
-      - bottom
-      type: string
     ErrorsJSON:
       properties:
         code:

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

@@ -4277,58 +4277,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 DashboardtypesPanelBackgroundDTO {
-	solid = 'solid',
-	transparent = 'transparent',
-}
-export enum DashboardtypesTextAlignDTO {
-	left = 'left',
-	center = 'center',
-	right = 'right',
-}
-export enum DashboardtypesVerticalAlignDTO {
-	top = 'top',
-	center = 'center',
-	bottom = 'bottom',
-}
-export interface DashboardtypesTextPresentationDTO {
-	background?: DashboardtypesPanelBackgroundDTO;
-	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
@@ -4336,8 +4284,7 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -5259,7 +5206,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TablePanel' = 'signoz/TablePanel',
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
-	'signoz/TextPanel' = 'signoz/TextPanel',
 }
 /**
  * @nullable

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

@@ -671,9 +671,9 @@ export const prepareQueryRangePayloadV5 = ({
 			(acc, [key, value]) => {
 				acc[key] = {
 					value,
-					type: dynamicVariables
-						?.find((v) => v.name === key)
-						?.type?.toLowerCase() as VariableType,
+					type: dynamicVariables?.some((v) => v.name === key)
+						? ('dynamic' as VariableType)
+						: undefined,
 				};
 				return acc;
 			},

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

@@ -27,7 +27,7 @@ import {
 	QUERY_BUILDER_OPERATORS_BY_KEY_TYPE,
 	queryOperatorSuggestions,
 } from 'constants/antlrQueryConstants';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
@@ -258,10 +258,7 @@ function QuerySearch({
 	const lastValueRef = useRef<string>('');
 	const isMountedRef = useRef<boolean>(true);
 
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	// Add back the generateOptions function and useEffect
 	const generateOptions = (keys: {
@@ -1189,7 +1186,7 @@ function QuerySearch({
 
 			// Add dynamic variables suggestions for the current key
 			const variableName = dashboardDynamicVariables?.find(
-				(variable) => variable?.dynamicVariablesAttribute === keyName,
+				(variable) => variable?.attribute === keyName,
 			)?.name;
 
 			if (variableName) {

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/configBuilder.ts

@@ -1,4 +1,5 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import {
@@ -75,7 +76,7 @@ export function buildEntityMetricsChartConfig({
 		show: true,
 		side: 2,
 		isDarkMode,
-		isTimeAxis: true,
+		panelType: PANEL_TYPES.TIME_SERIES,
 	});
 
 	builder.addAxis({
@@ -84,6 +85,7 @@ export function buildEntityMetricsChartConfig({
 		side: 3,
 		isDarkMode,
 		yAxisUnit,
+		panelType: PANEL_TYPES.TIME_SERIES,
 	});
 
 	if (!apiResponse?.data?.result) {

frontend/src/container/MeterExplorer/Explorer/configBuilder.ts

@@ -1,4 +1,5 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import {
@@ -71,7 +72,7 @@ export function buildMeterChartConfig({
 		show: true,
 		side: 2,
 		isDarkMode,
-		isTimeAxis: true,
+		panelType: PANEL_TYPES.BAR,
 	});
 
 	builder.addAxis({
@@ -80,6 +81,7 @@ export function buildMeterChartConfig({
 		side: 3,
 		isDarkMode,
 		yAxisUnit,
+		panelType: PANEL_TYPES.BAR,
 	});
 
 	if (!apiResponse?.data?.result) {

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -21,7 +21,7 @@ import {
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import type { WhereClauseConfig } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
@@ -263,10 +263,7 @@ function QueryBuilderSearchV2(
 		return false;
 	}, [currentState, query.aggregateAttribute?.dataType, query.dataSource]);
 
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	const { data, isFetching } = useGetAggregateKeys(
 		{
@@ -817,8 +814,7 @@ function QueryBuilderSearchV2(
 
 				// here we want to suggest the variable name matching with the key here, we will go over the dynamic variables for the keys
 				const variableName = dashboardDynamicVariables?.find(
-					(variable) =>
-						variable?.dynamicVariablesAttribute === currentFilterItem?.key?.key,
+					(variable) => variable?.attribute === currentFilterItem?.key?.key,
 				)?.name;
 
 				if (variableName) {

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/__test__/QueryBuilderSearchV2.test.tsx

@@ -5,9 +5,8 @@ import {
 	initialQueriesMap,
 	initialQueryBuilderFormValues,
 } from 'constants/queryBuilder';
-import { IUseDashboardVariablesReturn } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { DynamicVariableSuggestion } from 'providers/Dashboard/store/dynamicVariableSuggestions';
 import { QueryBuilderContext } from 'providers/QueryBuilder';
-import { IDashboardVariable } from 'types/api/dashboard/variables';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -150,24 +149,14 @@ jest.mock('hooks/useSafeNavigate', () => ({
 	}),
 }));
 
-// Mock dashboard variables
-const dashboardVariables = {
-	service: {
-		id: 'service',
-		name: 'service',
-		type: 'DYNAMIC' as IDashboardVariable['type'],
-		dynamicVariablesAttribute: 'service.name',
-		description: '',
-		sort: 'DISABLED' as IDashboardVariable['sort'],
-		multiSelect: false,
-		showALLOption: false,
-	},
-};
+// Mock the dynamic variables the open dashboard would publish
+const dynamicVariableSuggestions = [
+	{ name: 'service', attribute: 'service.name' },
+];
 
-jest.mock('hooks/dashboard/useDashboardVariables', () => ({
-	useDashboardVariables: (): IUseDashboardVariablesReturn => ({
-		dashboardVariables: dashboardVariables,
-	}),
+jest.mock('hooks/dashboard/useDynamicVariableSuggestions', () => ({
+	useDynamicVariableSuggestions: (): DynamicVariableSuggestion[] =>
+		dynamicVariableSuggestions,
 }));
 
 describe('Suggestion Key -> Operator -> Value Flow', () => {

frontend/src/container/ServiceApplication/utils.ts

@@ -2,7 +2,6 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { ServicesList } from 'types/api/metrics/getService';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 import { EQueryType } from 'types/common/dashboard';
@@ -47,7 +46,6 @@ export const getQueryRangeRequestData = ({
 			graphType: serviceMetricsWidget?.panelTypes,
 			query: updatedQuery,
 			globalSelectedInterval,
-			variables: getDashboardVariables(),
 		});
 	});
 	return requestData;

frontend/src/container/WidgetCard/Card/FullView/index.tsx

@@ -28,13 +28,11 @@ import { populateMultipleResults } from 'lib/query/populateMultipleResults';
 import { timeItems, timePreferance } from 'constants/timePreference';
 import PanelWrapper from 'container/WidgetCard/Panels/PanelWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
-import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useChartMutable } from 'hooks/useChartMutable';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import GetMinMax from 'lib/getMinMax';
 import { isEmpty } from 'lodash-es';
 import { AppState } from 'store/reducers';
@@ -82,8 +80,6 @@ function FullView({
 		setCurrentGraphRef(fullViewRef);
 	}, [setCurrentGraphRef]);
 
-	const { dashboardVariables } = useDashboardVariables();
-
 	const getSelectedTime = useCallback(
 		() =>
 			timeItems.find((e) => e.enum === (widget?.timePreferance || 'GLOBAL_TIME')),
@@ -115,7 +111,6 @@ function FullView({
 				graphType: getGraphType(selectedPanelType),
 				query: updatedQuery,
 				globalSelectedInterval: globalSelectedTime,
-				variables: getDashboardVariables(dashboardVariables),
 				fillGaps: widget.fillSpans,
 				formatForWeb: selectedPanelType === PANEL_TYPES.TABLE,
 				originalGraphType: selectedPanelType,
@@ -126,7 +121,6 @@ function FullView({
 			graphType: PANEL_TYPES.LIST,
 			selectedTime: widget?.timePreferance || 'GLOBAL_TIME',
 			globalSelectedInterval: globalSelectedTime,
-			variables: getDashboardVariables(dashboardVariables),
 			tableParams: {
 				pagination: {
 					offset: 0,

frontend/src/container/WidgetCard/Card/index.tsx

@@ -8,12 +8,9 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useScrollWidgetIntoView } from 'lib/visualization/hooks/useScrollWidgetIntoView';
 import { populateMultipleResults } from 'lib/query/populateMultipleResults';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
-import { useIsPanelWaitingOnVariable } from 'hooks/dashboard/useVariableFetchState';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
-import { getVariableReferencesInQuery } from 'lib/dashboardVariables/variableReference';
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
@@ -45,7 +42,6 @@ function GridCardGraph({
 	headerMenuList = [MenuItemKeys.View],
 	isQueryEnabled,
 	threshold,
-	variables,
 	version,
 	onClickHandler,
 	onDragSelect,
@@ -113,25 +109,10 @@ function GridCardGraph({
 
 	const updatedQuery = widget?.query;
 
-	const referencedVariableNames = useMemo(() => {
-		if (!variables || !updatedQuery) {
-			return [];
-		}
-		const allNames = Object.values(variables)
-			.map((v) => v.name)
-			.filter((name): name is string => !!name);
-		return getVariableReferencesInQuery(updatedQuery, allNames);
-	}, [updatedQuery, variables]);
-
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const isPanelWaitingOnAnyVariable = useIsPanelWaitingOnVariable(
-		referencedVariableNames,
-	);
-
-	const queryEnabledCondition =
-		isVisible && !isEmptyWidget && isQueryEnabled && !isPanelWaitingOnAnyVariable;
+	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -140,7 +121,6 @@ function GridCardGraph({
 				graphType: getGraphType(widget.panelTypes),
 				query: updatedQuery,
 				globalSelectedInterval,
-				variables: getDashboardVariables(variables),
 				fillGaps: widget.fillSpans,
 				formatForWeb: widget.panelTypes === PANEL_TYPES.TABLE,
 				start: customTimeRange?.startTime || start,
@@ -191,7 +171,6 @@ function GridCardGraph({
 	const queryResponse = useGetQueryRange(
 		{
 			...requestData,
-			variables: getDashboardVariables(variables),
 			selectedTime: widget.timePreferance || 'GLOBAL_TIME',
 			globalSelectedInterval:
 				widget?.panelTypes === PANEL_TYPES.LIST && isLogsQuery
@@ -214,14 +193,6 @@ function GridCardGraph({
 				widget.timePreferance,
 				widget.fillSpans,
 				requestData,
-				variables
-					? Object.entries(variables).reduce((acc, [id, variable]) => {
-							if (variable.name && referencedVariableNames.includes(variable.name)) {
-								return { ...acc, [id]: variable.selectedValue };
-							}
-							return acc;
-						}, {})
-					: {},
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),
@@ -303,9 +274,7 @@ function GridCardGraph({
 					version={version}
 					threshold={threshold}
 					headerMenuList={menuList}
-					isFetchingResponse={
-						queryResponse.isFetching || isPanelWaitingOnAnyVariable
-					}
+					isFetchingResponse={queryResponse.isFetching}
 					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}
 					onDragSelect={onDragSelect}

frontend/src/container/WidgetCard/Card/types.ts

@@ -4,7 +4,6 @@ import { ToggleGraphProps } from 'components/Graph/types';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { Widgets } from 'types/api/widgets/widget';
 import {
 	MetricQueryRangeSuccessResponse,
@@ -52,7 +51,6 @@ export interface GridCardGraphProps {
 	headerMenuList?: WidgetGraphComponentProps['headerMenuList'];
 	onClickHandler?: OnClickPluginOpts['onClick'];
 	isQueryEnabled: boolean;
-	variables?: IDashboardVariables;
 	version?: string;
 	onDragSelect: (start: number, end: number) => void;
 	customOnDragSelect?: (start: number, end: number) => void;

frontend/src/container/WidgetCard/__tests__/useResolveQuery.test.tsx

@@ -26,8 +26,8 @@ jest.mock(
 	}),
 );
 
-jest.mock('hooks/dashboard/useDashboardVariablesByType', () => ({
-	useDashboardVariablesByType: (): unknown[] => mockDynamicVariables,
+jest.mock('hooks/dashboard/useDynamicVariableSuggestions', () => ({
+	useDynamicVariableSuggestions: (): unknown[] => mockDynamicVariables,
 }));
 
 jest.mock('react-redux', () => ({
@@ -64,11 +64,12 @@ describe('useResolveQuery', () => {
 		expect(resolved).toBe(QUERY);
 	});
 
-	it('resolves through substitute_vars when the dashboard has variables', async () => {
+	it('resolves through substitute_vars when the dashboard has dynamic variables', async () => {
 		mockGetSubstituteVars.mockResolvedValue({
 			httpStatusCode: 200,
 			data: { compositeQuery: {} },
 		});
+		mockDynamicVariables.push({ name: 'env', attribute: 'deployment.env' });
 
 		const { result } = renderHook(() => useUpdatedQuery(), {
 			wrapper: MockQueryClientProvider,
@@ -76,13 +77,6 @@ describe('useResolveQuery', () => {
 
 		const resolved = await result.current.getUpdatedQuery({
 			widgetConfig: WIDGET_CONFIG,
-			dashboardData: {
-				data: {
-					variables: {
-						env: { name: 'env', selectedValue: 'prod' },
-					},
-				},
-			},
 		});
 
 		expect(mockGetSubstituteVars).toHaveBeenCalledTimes(1);

frontend/src/container/WidgetCard/hooks/useResolveQuery.ts

@@ -7,8 +7,7 @@ import { getSubstituteVars } from 'api/dashboard/substitute_vars';
 import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { timePreferenceType } from 'constants/timePreference';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { AppState } from 'store/reducers';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -21,7 +20,6 @@ interface UseUpdatedQueryOptions {
 		panelTypes: PANEL_TYPES;
 		timePreferance: timePreferenceType;
 	};
-	dashboardData?: any;
 }
 
 interface UseUpdatedQueryResult {
@@ -37,21 +35,13 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 
 	const queryRangeMutation = useMutation(getSubstituteVars);
 
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	const getUpdatedQuery = useCallback(
-		async ({
-			widgetConfig,
-			dashboardData,
-		}: UseUpdatedQueryOptions): Promise<Query> => {
-			const variables = getDashboardVariables(dashboardData?.data?.variables);
-
+		async ({ widgetConfig }: UseUpdatedQueryOptions): Promise<Query> => {
 			// `/substitute_vars` only rewrites `$variable` references, so on surfaces with no
 			// dashboard behind them (APM, Celery, API monitoring) the round-trip is a no-op.
-			if (isEmpty(variables) && isEmpty(dashboardDynamicVariables)) {
+			if (isEmpty(dashboardDynamicVariables)) {
 				return widgetConfig.query;
 			}
 
@@ -61,7 +51,6 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 				graphType: getGraphType(widgetConfig.panelTypes),
 				selectedTime: widgetConfig.timePreferance,
 				globalSelectedInterval,
-				variables,
 				originalGraphType: widgetConfig.panelTypes,
 				dynamicVariables: dashboardDynamicVariables,
 			});

frontend/src/hooks/dashboard/__test__/useGetResolvedText.test.tsx

@@ -1,242 +1,40 @@
-import React from 'react';
 import { renderHook } from '@testing-library/react';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-
-import useGetResolvedText from '../useGetResolvedText';
-
-// Create a mock function that we can modify per test
-let mockDashboardVariables: IDashboardVariables = {};
-
-// Mock the useDashboardVariables hook
-jest.mock('hooks/dashboard/useDashboardVariables', () => ({
-	useDashboardVariables: jest.fn(() => ({
-		dashboardVariables: mockDashboardVariables,
-	})),
-}));
+import useGetResolvedText from 'hooks/dashboard/useGetResolvedText';
 
 describe('useGetResolvedText', () => {
-	const SERVICE_VAR = 'test, app +2-|-test, app, frontend, env';
-	const SEVERITY_VAR = 'DEBUG, INFO-|-DEBUG, INFO';
-	const EXPECTED_FULL_TEXT =
-		'Logs count in test, app, frontend, env in DEBUG, INFO';
-	const TRUNCATED_SERVICE = 'test, app +2';
-	const TEXT_TEMPLATE = 'Logs count in $service.name in $severity';
-
-	const renderHookWithProps = (
-		props: {
-			text: string | React.ReactNode;
-			maxLength?: number;
-			matcher?: string;
-		},
-		variables?: Record<string, string | number | boolean>,
-	): any => {
-		if (variables) {
-			mockDashboardVariables = Object.entries(
-				variables,
-			).reduce<IDashboardVariables>((acc, [key, value]) => {
-				acc[key] = {
-					id: key,
-					name: key,
-					description: '',
-					type: 'CUSTOM' as const,
-					sort: 'DISABLED' as const,
-					multiSelect: false,
-					showALLOption: false,
-					selectedValue: value,
-				};
-				return acc;
-			}, {});
-		} else {
-			mockDashboardVariables = {};
-		}
-		return renderHook(() => useGetResolvedText(props));
-	};
-
-	it('should resolve variables with truncated and full text', () => {
-		const text = TEXT_TEMPLATE;
-		const variables = {
-			'service.name': SERVICE_VAR,
-			severity: SEVERITY_VAR,
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.truncatedText).toBe(
-			`Logs count in ${TRUNCATED_SERVICE} in DEBUG, INFO`,
+	it('returns the text unchanged when it fits within maxLength', () => {
+		const { result } = renderHook(() =>
+			useGetResolvedText({ text: 'Logs count', maxLength: 100 }),
 		);
-		expect(result.current.fullText).toBe(EXPECTED_FULL_TEXT);
+
+		expect(result.current.fullText).toBe('Logs count');
+		expect(result.current.truncatedText).toBe('Logs count');
 	});
 
-	it('should handle text with maxLength truncation', () => {
-		const text = TEXT_TEMPLATE;
-		const variables = {
-			'service.name': SERVICE_VAR,
-			severity: SEVERITY_VAR,
-		};
+	it('returns the text unchanged when no maxLength is given', () => {
+		const text = 'a'.repeat(200);
+		const { result } = renderHook(() => useGetResolvedText({ text }));
 
-		const { result } = renderHookWithProps({ text, maxLength: 20 }, variables);
-
-		expect(result.current.truncatedText).toBe('Logs count in test, a...');
-		expect(result.current.fullText).toBe(EXPECTED_FULL_TEXT);
-	});
-
-	it('should handle multiple occurrences of the same variable', () => {
-		const text = 'Logs count in $service.name and $service.name';
-		const variables = {
-			'service.name': SERVICE_VAR,
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.truncatedText).toBe(
-			'Logs count in test, app +2 and test, app +2',
-		);
-		expect(result.current.fullText).toBe(
-			'Logs count in test, app, frontend, env and test, app, frontend, env',
-		);
-	});
-
-	it('should handle different variable formats', () => {
-		const text =
-			'Logs in $service.name, {{service.name}}, [[service.name]] - $dyn-service.name';
-		const variables = {
-			'service.name': SERVICE_VAR,
-			'$dyn-service.name': 'dyn-1, dyn-2',
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.truncatedText).toBe(
-			'Logs in test, app +2, test, app +2, test, app +2 - dyn-1, dyn-2',
-		);
-		expect(result.current.fullText).toBe(
-			'Logs in test, app, frontend, env, test, app, frontend, env, test, app, frontend, env - dyn-1, dyn-2',
-		);
-	});
-
-	it('should handle custom matcher', () => {
-		const text = 'Logs count in #service.name in #severity';
-		const variables = {
-			'service.name': SERVICE_VAR,
-			severity: SEVERITY_VAR,
-		};
-
-		const { result } = renderHookWithProps({ text, matcher: '#' }, variables);
-
-		expect(result.current.truncatedText).toBe(
-			'Logs count in test, app +2 in DEBUG, INFO',
-		);
-		expect(result.current.fullText).toBe(EXPECTED_FULL_TEXT);
-	});
-
-	it('should handle non-string variable values', () => {
-		const text = 'Count: $count, Active: $active';
-		const variables = {
-			count: 42,
-			active: true,
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.fullText).toBe('Count: 42, Active: true');
-		expect(result.current.truncatedText).toBe('Count: 42, Active: true');
-	});
-
-	it('should keep original text for undefined variables', () => {
-		const text = 'Logs count in $service.name in $unknown';
-		const variables = {
-			'service.name': SERVICE_VAR,
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.truncatedText).toBe(
-			'Logs count in test, app +2 in $unknown',
-		);
-		expect(result.current.fullText).toBe(
-			'Logs count in test, app, frontend, env in $unknown',
-		);
-	});
-
-	it('should handle non-string text input (ReactNode)', () => {
-		const reactNodeText = <div>Test ReactNode</div>;
-		const variables = {
-			'service.name': SERVICE_VAR,
-		};
-
-		const { result } = renderHookWithProps(
-			{
-				text: reactNodeText,
-			},
-			variables,
-		);
-
-		// Should return the ReactNode unchanged
-		expect(result.current.fullText).toBe(reactNodeText);
-		expect(result.current.truncatedText).toBe(reactNodeText);
-	});
-
-	it('should handle number input', () => {
-		const text = 123;
-		const variables = {
-			'service.name': SERVICE_VAR,
-		};
-
-		const { result } = renderHookWithProps(
-			{
-				text,
-			},
-			variables,
-		);
-
-		// Should return the number unchanged
-		expect(result.current.fullText).toBe(text);
 		expect(result.current.truncatedText).toBe(text);
 	});
 
-	it('should handle boolean input', () => {
-		const text = true;
-		const variables = {
-			'service.name': SERVICE_VAR,
-		};
-
-		const { result } = renderHookWithProps(
-			{
-				text,
-			},
-			variables,
+	it('truncates to maxLength with an ellipsis and keeps the full text', () => {
+		const { result } = renderHook(() =>
+			useGetResolvedText({ text: 'Logs count in production', maxLength: 20 }),
 		);
 
-		// Should return the boolean unchanged
-		expect(result.current.fullText).toBe(text);
-		expect(result.current.truncatedText).toBe(text);
+		expect(result.current.truncatedText).toBe('Logs count in pro...');
+		expect(result.current.truncatedText).toHaveLength(20);
+		expect(result.current.fullText).toBe('Logs count in production');
 	});
 
-	it('should handle complex variable names with improved patterns', () => {
-		const text = 'API: $api.v1.endpoint Config: $config.database.host';
-		const variables = {
-			'api.v1.endpoint': '/users',
-			'config.database.host': 'localhost:5432',
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.fullText).toBe('API: /users Config: localhost:5432');
-		expect(result.current.truncatedText).toBe(
-			'API: /users Config: localhost:5432',
+	it('passes non-string content through untouched', () => {
+		const node = <span>title</span>;
+		const { result } = renderHook(() =>
+			useGetResolvedText({ text: node, maxLength: 2 }),
 		);
-	});
 
-	it('should stop at punctuation boundaries correctly', () => {
-		const text = 'Status: $service.name, Error: $error.type;';
-		const variables = {
-			'service.name': 'web-api',
-			'error.type': 'timeout',
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.fullText).toBe('Status: web-api, Error: timeout;');
-		expect(result.current.truncatedText).toBe('Status: web-api, Error: timeout;');
+		expect(result.current.fullText).toBe(node);
+		expect(result.current.truncatedText).toBe(node);
 	});
 });

frontend/src/hooks/dashboard/__test__/useIsPanelWaitingOnVariable.test.ts

@@ -1,351 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { dashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import { IDashboardVariablesStoreState } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import {
-	VariableFetchState,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
-import { IDashboardVariable } from 'types/api/dashboard/variables';
-
-import { useIsPanelWaitingOnVariable } from '../useVariableFetchState';
-
-function makeVariable(
-	overrides: Partial<IDashboardVariable> & { id: string },
-): IDashboardVariable {
-	return {
-		name: overrides.id,
-		description: '',
-		type: 'QUERY',
-		sort: 'DISABLED',
-		multiSelect: false,
-		showALLOption: false,
-		...overrides,
-	};
-}
-
-function resetStores(): void {
-	variableFetchStore.set(() => ({
-		states: {},
-		lastUpdated: {},
-		cycleIds: {},
-	}));
-	dashboardVariablesStore.set(() => ({
-		dashboardId: '',
-		variables: {},
-		sortedVariablesArray: [],
-		dependencyData: null,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-	}));
-}
-
-function setFetchStates(states: Record<string, VariableFetchState>): void {
-	variableFetchStore.set(() => ({
-		states,
-		lastUpdated: {},
-		cycleIds: {},
-	}));
-}
-
-function setDashboardVariables(
-	overrides: Partial<IDashboardVariablesStoreState>,
-): void {
-	dashboardVariablesStore.set(() => ({
-		dashboardId: '',
-		variables: {},
-		sortedVariablesArray: [],
-		dependencyData: null,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-		...overrides,
-	}));
-}
-
-describe('useIsPanelWaitingOnVariable', () => {
-	beforeEach(() => {
-		resetStores();
-	});
-
-	it('should return false when variableNames is empty', () => {
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable([]));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false when all referenced variables are idle', () => {
-		setFetchStates({ a: 'idle', b: 'idle' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'val1' }),
-				b: makeVariable({ id: 'b', selectedValue: 'val2' }),
-			},
-			variableTypes: { a: 'QUERY', b: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a', 'b']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return true when a variable is loading with empty selectedValue', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return true when a variable is waiting with empty selectedValue', () => {
-		setFetchStates({ a: 'waiting' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: '' }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return true when a variable is revalidating with empty selectedValue', () => {
-		setFetchStates({ a: 'revalidating' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return false when a variable is loading but has a selectedValue', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'some-value' }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false for DYNAMIC variable with allSelected=true that is loading but has a selectedValue', () => {
-		setFetchStates({ dyn: 'loading' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: 'some-val',
-					allSelected: true,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false for DYNAMIC variable with allSelected=true that is waiting but has a selectedValue', () => {
-		setFetchStates({ dyn: 'waiting' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: 'val',
-					allSelected: true,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false for DYNAMIC variable with allSelected=true that is idle', () => {
-		setFetchStates({ dyn: 'idle' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: 'val',
-					allSelected: true,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false for non-DYNAMIC variable with allSelected=false and non-empty value that is loading', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({
-					id: 'a',
-					selectedValue: 'val',
-					allSelected: false,
-				}),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return true if any one of multiple variables is blocking', () => {
-		setFetchStates({ a: 'idle', b: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'val' }),
-				b: makeVariable({ id: 'b', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY', b: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a', 'b']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return false when variable has no entry in fetch store (treated as idle)', () => {
-		setFetchStates({}); // no state entry for 'a'
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'val' }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false when variable is in error state with empty selectedValue', () => {
-		setFetchStates({ a: 'error' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should react to store updates', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-
-		// Simulate variable fetch completing
-		act(() => {
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-			});
-		});
-
-		expect(result.current).toBe(false);
-	});
-
-	it('should handle DYNAMIC variable with allSelected=false and empty selectedValue as blocking', () => {
-		setFetchStates({ dyn: 'loading' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: undefined,
-					allSelected: false,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should handle variable with array selectedValue as non-blocking when loading', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: ['val1', 'val2'] }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should handle variable with empty array selectedValue as blocking when loading', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: [] }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should find variable by name when store key differs from variable name', () => {
-		setFetchStates({ myVar: 'loading' });
-		setDashboardVariables({
-			variables: {
-				'uuid-abc-123': makeVariable({
-					id: 'uuid-abc-123',
-					name: 'myVar',
-					selectedValue: undefined,
-				}),
-			},
-			variableTypes: { myVar: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['myVar']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should respect selectedValue when store key differs from variable name', () => {
-		// When the variable has a value, it should not block even if loading
-		setFetchStates({ myVar: 'loading' });
-		setDashboardVariables({
-			variables: {
-				'uuid-abc-123': makeVariable({
-					id: 'uuid-abc-123',
-					name: 'myVar',
-					selectedValue: 'production',
-				}),
-			},
-			variableTypes: { myVar: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['myVar']));
-		expect(result.current).toBe(false);
-	});
-});

frontend/src/hooks/dashboard/useContextVariables.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -42,38 +41,10 @@ function useContextVariables({
 	// ! To be noted: This customVariables is not Dashboard Custom Variables
 	customVariables,
 }: UseContextVariablesProps): UseContextVariablesResult {
-	const { dashboardVariables } = useDashboardVariables();
 	const globalTime = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
 
-	// Extract dashboard variables
-	const processedDashboardVariables = useMemo(() => {
-		return Object.entries(dashboardVariables)
-			.filter(([, value]) => value.name)
-			.map(([, value]) => {
-				let processedValue: string | number | boolean;
-				let isArray = false;
-
-				if (Array.isArray(value.selectedValue)) {
-					processedValue = value.selectedValue.join(', ');
-					isArray = true;
-				} else if (value.selectedValue != null) {
-					processedValue = value.selectedValue;
-				} else {
-					processedValue = '';
-				}
-
-				return {
-					name: value.name || '',
-					value: processedValue,
-					source: 'dashboard' as const,
-					isArray,
-					originalValue: value.selectedValue,
-				};
-			});
-	}, [dashboardVariables]);
-
 	// Extract global variables
 	const globalVariables = useMemo(
 		() => [
@@ -109,12 +80,8 @@ function useContextVariables({
 
 	// Combine all variables
 	const allVariables = useMemo(
-		() => [
-			...processedDashboardVariables,
-			...globalVariables,
-			...customVariablesList,
-		],
-		[processedDashboardVariables, globalVariables, customVariablesList],
+		() => [...globalVariables, ...customVariablesList],
+		[globalVariables, customVariablesList],
 	);
 
 	// Create processed variables with truncation logic

frontend/src/hooks/dashboard/useDashboardVariables.ts

@@ -1,40 +0,0 @@
-import { useCallback, useRef, useSyncExternalStore } from 'react';
-import { dashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import {
-	IDashboardVariablesStoreState,
-	IUseDashboardVariablesReturn,
-} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-
-/**
- * Generic selector hook for dashboard variables store
- * Allows granular subscriptions to any part of the store state
- *
- * @example
- * ! Select top-level field
- * const variables = useDashboardVariablesSelector(s => s.variables);
- *
- * ! Select specific variable
- * const fooVar = useDashboardVariablesSelector(s => s.variables['foo']);
- *
- * ! Select derived value
- * const hasVariables = useDashboardVariablesSelector(s => Object.keys(s.variables).length > 0);
- */
-export const useDashboardVariablesSelector = <T>(
-	selector: (state: IDashboardVariablesStoreState) => T,
-): T => {
-	const selectorRef = useRef(selector);
-	selectorRef.current = selector;
-
-	const getSnapshot = useCallback(
-		() => selectorRef.current(dashboardVariablesStore.getSnapshot()),
-		[],
-	);
-
-	return useSyncExternalStore(dashboardVariablesStore.subscribe, getSnapshot);
-};
-
-export const useDashboardVariables = (): IUseDashboardVariablesReturn => {
-	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
-
-	return { dashboardVariables };
-};

frontend/src/hooks/dashboard/useDashboardVariablesByType.ts

@@ -1,30 +0,0 @@
-import { useMemo } from 'react';
-import {
-	IDashboardVariable,
-	TVariableQueryType,
-} from 'types/api/dashboard/variables';
-
-import { useDashboardVariables } from './useDashboardVariables';
-
-export function useDashboardVariablesByType(
-	variableType: TVariableQueryType,
-	returnType: 'values',
-): IDashboardVariable[];
-export function useDashboardVariablesByType(
-	variableType: TVariableQueryType,
-	returnType?: 'entries',
-): [string, IDashboardVariable][];
-export function useDashboardVariablesByType(
-	variableType: TVariableQueryType,
-	returnType?: 'values' | 'entries',
-): IDashboardVariable[] | [string, IDashboardVariable][] {
-	const { dashboardVariables } = useDashboardVariables();
-
-	return useMemo(() => {
-		const entries = Object.entries(dashboardVariables || {}).filter(
-			(entry): entry is [string, IDashboardVariable] =>
-				Boolean(entry[1].name) && entry[1].type === variableType,
-		);
-		return returnType === 'values' ? entries.map(([, value]) => value) : entries;
-	}, [dashboardVariables, variableType, returnType]);
-}

frontend/src/hooks/dashboard/useDynamicVariableSuggestions.ts

@@ -0,0 +1,17 @@
+import { useSyncExternalStore } from 'react';
+import {
+	DynamicVariableSuggestion,
+	dynamicVariableSuggestionsStore,
+} from 'providers/Dashboard/store/dynamicVariableSuggestions';
+
+/**
+ * Dynamic variables published by the dashboard currently open, so the query
+ * builder can offer `$variable` as a value for the key each one backs. Empty on
+ * surfaces with no dashboard behind them (APM, Celery, messaging queues).
+ */
+export function useDynamicVariableSuggestions(): DynamicVariableSuggestion[] {
+	return useSyncExternalStore(
+		dynamicVariableSuggestionsStore.subscribe,
+		dynamicVariableSuggestionsStore.getSnapshot,
+	);
+}

frontend/src/hooks/dashboard/useGetResolvedText.tsx

@@ -1,18 +1,8 @@
-// this hook is used to get the resolved text of a variable, lets say we have a text - "Logs count in $service.name in $severity and $service.name and $severity $service.name"
-// and the values of service.name and severity are "service1" and "error" respectively, then the resolved text should be "Logs count in service1 in error and service1 and error service1"
-// is case of the multiple variables value, make them comma separated
-// also have a prop saying max length post that you should truncate the text with "..."
-// return value should be a full text string, and a truncated text string (if max length is provided)
-
-import { ReactNode, useCallback, useMemo } from 'react';
-import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
+import { ReactNode, useMemo } from 'react';
 
 interface UseGetResolvedTextProps {
 	text: string | ReactNode;
-	variables?: Record<string, string | number | boolean>;
 	maxLength?: number;
-	matcher?: string;
-	maxValues?: number; // Maximum number of values to show before adding +n more
 }
 
 interface ResolvedTextResult {
@@ -20,173 +10,23 @@ interface ResolvedTextResult {
 	truncatedText: string | ReactNode;
 }
 
+/**
+ * Returns a panel title alongside a copy truncated to `maxLength`, so a card can
+ * show the short form and keep the full string for its tooltip. Non-string content
+ * passes through untouched.
+ */
 function useGetResolvedText({
 	text,
 	maxLength,
-	matcher = '$',
-	maxValues = 2, // Default to showing 2 values before +n more
 }: UseGetResolvedTextProps): ResolvedTextResult {
-	const { dashboardVariables } = useDashboardVariables();
-	const isString = typeof text === 'string';
-
-	const processedDashboardVariables = useMemo(() => {
-		return Object.entries(dashboardVariables).reduce<
-			Record<string, string | number | boolean>
-		>((acc, [, value]) => {
-			if (!value.name) {
-				return acc;
-			}
-
-			// Handle array values
-			if (Array.isArray(value.selectedValue)) {
-				acc[value.name] = value.selectedValue.join(', ');
-			} else if (value.selectedValue != null) {
-				acc[value.name] = value.selectedValue;
-			}
-			return acc;
-		}, {});
-	}, [dashboardVariables]);
-
-	// Process array values to add +n more notation for truncated text
-	const processedVariables = useMemo(() => {
-		const result: Record<string, string> = {};
-
-		Object.entries(processedDashboardVariables).forEach(([key, value]) => {
-			// If the value contains array data (comma-separated string), format it with +n more
-			if (
-				typeof value === 'string' &&
-				!value.includes('-|-') &&
-				value.includes(',')
-			) {
-				const values = value.split(',').map((v) => v.trim());
-				if (values.length > maxValues) {
-					const visibleValues = values.slice(0, maxValues);
-					const remainingCount = values.length - maxValues;
-					result[key] = `${visibleValues.join(
-						', ',
-					)} +${remainingCount}-|-${values.join(', ')}`;
-				} else {
-					result[key] = `${values.join(', ')}-|-${values.join(', ')}`;
-				}
-			} else {
-				// For values already formatted with -|- or non-array values
-				result[key] = String(value);
-			}
-		});
-
-		return result;
-	}, [processedDashboardVariables, maxValues]);
-
-	const combinedPattern = useMemo(() => {
-		const escapedMatcher = matcher.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-		const variablePatterns = [
-			`\\{\\{\\s*?\\.([^\\s}]+?)\\s*?\\}\\}`, // {{.var}}
-			`\\{\\{\\s*([^\\s}]+?)\\s*\\}\\}`, // {{var}}
-			`${escapedMatcher}([^\\s.,;)\\]}>]+(?:\\.[^\\s.,;)\\]}>]+)*)`, // $var.name.path - allows dots but stops at punctuation
-			`\\[\\[\\s*([^\\s\\]]+?)\\s*\\]\\]`, // [[var]]
-		];
-		return new RegExp(variablePatterns.join('|'), 'g');
-	}, [matcher]);
-
-	const extractVarName = useCallback(
-		(match: string): string => {
-			// Extract variable name from different formats
-			const varNamePattern = '[a-zA-Z_\\-][a-zA-Z0-9_.\\-]*';
-			if (match.startsWith('{{')) {
-				const dotMatch = match.match(
-					new RegExp(`\\{\\{\\s*\\.(${varNamePattern})\\s*\\}\\}`),
-				);
-				if (dotMatch) {
-					return dotMatch[1].trim();
-				}
-				const normalMatch = match.match(
-					new RegExp(`\\{\\{\\s*(${varNamePattern})\\s*\\}\\}`),
-				);
-				if (normalMatch) {
-					return normalMatch[1].trim();
-				}
-			} else if (match.startsWith('[[')) {
-				const bracketMatch = match.match(
-					new RegExp(`\\[\\[\\s*(${varNamePattern})\\s*\\]\\]`),
-				);
-				if (bracketMatch) {
-					return bracketMatch[1].trim();
-				}
-			} else if (match.startsWith(matcher)) {
-				// For $ variables, we always want to strip the prefix
-				// unless the full match exists in processedVariables
-				const withoutPrefix = match.substring(matcher.length).trim();
-				const fullMatch = match.trim();
-
-				// If the full match (with prefix) exists, use it
-				if (processedVariables[fullMatch] !== undefined) {
-					return fullMatch;
-				}
-
-				// Otherwise return without prefix
-				return withoutPrefix;
-			}
-			return match;
-		},
-		[matcher, processedVariables],
-	);
-
-	const fullText = useMemo(() => {
-		if (!isString) {
-			return text;
-		}
-
-		return (text as string)?.replace(combinedPattern, (match) => {
-			const varName = extractVarName(match);
-			const value = processedVariables[varName];
-
-			if (value != null) {
-				const parts = value.split('-|-');
-				return parts.length > 1 ? parts[1] : value;
-			}
-			return match;
-		});
-	}, [text, processedVariables, combinedPattern, extractVarName, isString]);
-
 	const truncatedText = useMemo(() => {
-		if (!isString) {
+		if (typeof text !== 'string' || !maxLength || text.length <= maxLength) {
 			return text;
 		}
+		return `${text.substring(0, maxLength - 3)}...`;
+	}, [text, maxLength]);
 
-		const result = (text as string)?.replace(combinedPattern, (match) => {
-			const varName = extractVarName(match);
-			const value = processedVariables[varName];
-
-			if (value != null) {
-				const parts = value.split('-|-');
-				return parts[0] || value;
-			}
-			return match;
-		});
-
-		if (maxLength && result.length > maxLength) {
-			// For the specific test case
-			if (maxLength === 20 && result.startsWith('Logs count in')) {
-				return 'Logs count in test, a...';
-			}
-
-			// General case
-			return `${result.substring(0, maxLength - 3)}...`;
-		}
-		return result;
-	}, [
-		text,
-		processedVariables,
-		combinedPattern,
-		maxLength,
-		extractVarName,
-		isString,
-	]);
-
-	return {
-		fullText,
-		truncatedText,
-	};
+	return { fullText: text, truncatedText };
 }
 
 export default useGetResolvedText;

frontend/src/hooks/dashboard/useVariableFetchState.ts

@@ -1,151 +0,0 @@
-import { useCallback, useMemo, useRef, useSyncExternalStore } from 'react';
-import isEmpty from 'lodash-es/isEmpty';
-import {
-	IVariableFetchStoreState,
-	VariableFetchState,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
-
-import { useDashboardVariablesSelector } from './useDashboardVariables';
-
-/**
- * Generic selector hook for the variable fetch store.
- * Same pattern as useDashboardVariablesSelector.
- */
-const useVariableFetchSelector = <T>(
-	selector: (state: IVariableFetchStoreState) => T,
-): T => {
-	const selectorRef = useRef(selector);
-	selectorRef.current = selector;
-
-	const getSnapshot = useCallback(
-		() => selectorRef.current(variableFetchStore.getSnapshot()),
-		[],
-	);
-
-	return useSyncExternalStore(variableFetchStore.subscribe, getSnapshot);
-};
-
-interface UseVariableFetchStateReturn {
-	/** The current fetch state for this variable */
-	variableFetchState: VariableFetchState;
-	/** Current fetch cycle — include in react-query keys to auto-cancel stale requests */
-	variableFetchCycleId: number;
-	/** True if this variable is idle (not waiting and not fetching) */
-	isVariableSettled: boolean;
-	/** True if this variable is actively fetching (loading or revalidating) */
-	isVariableFetching: boolean;
-	/** True if this variable has completed at least one fetch cycle */
-	hasVariableFetchedOnce: boolean;
-	/** True if any parent variable hasn't settled yet */
-	isVariableWaitingForDependencies: boolean;
-	/** Message describing what this variable is waiting on, or null if not waiting */
-	variableDependencyWaitMessage?: string;
-}
-
-/**
- * Per-variable hook that exposes the fetch state of a single variable.
- * Reusable by both variable input components and panel components.
- *
- * Subscribes to both variableFetchStore (for states) and
- * dashboardVariablesStore (for parent graph) to compute derived values.
- */
-export function useVariableFetchState(
-	variableName: string,
-): UseVariableFetchStateReturn {
-	// This variable's fetch state (loading, waiting, idle, etc.)
-	const variableFetchState = useVariableFetchSelector(
-		(s) => s.states[variableName] || 'idle',
-	) as VariableFetchState;
-
-	// All variable states — needed to check if parent variables are still in-flight
-	const allStates = useVariableFetchSelector((s) => s.states);
-
-	// Parent dependency graph — maps each variable to its direct parents
-	// e.g. { "childVariable": ["parentVariable"] } means "childVariable" depends on "parentVariable"
-	const parentGraph = useDashboardVariablesSelector(
-		(s) => s.dependencyData?.parentDependencyGraph,
-	);
-
-	// Timestamp of last successful fetch — 0 means never fetched
-	const lastUpdated = useVariableFetchSelector(
-		(s) => s.lastUpdated[variableName] || 0,
-	);
-
-	// Per-variable cycle counter — used as part of react-query keys
-	// so changing it auto-cancels stale requests for this variable only
-	const variableFetchCycleId = useVariableFetchSelector(
-		(s) => s.cycleIds[variableName] || 0,
-	);
-
-	const isVariableSettled = variableFetchState === 'idle';
-
-	const isVariableFetching =
-		variableFetchState === 'loading' || variableFetchState === 'revalidating';
-	// True after at least one successful fetch — used to show stale data while revalidating
-	const hasVariableFetchedOnce = lastUpdated > 0;
-
-	// Variable type — needed to differentiate waiting messages
-	const variableType = useDashboardVariablesSelector(
-		(s) => s.variableTypes[variableName],
-	);
-
-	// Parent variable names that haven't settled yet
-	const unsettledParents = useMemo(() => {
-		const parents = parentGraph?.[variableName] || [];
-		return parents.filter((p) => (allStates[p] || 'idle') !== 'idle');
-	}, [parentGraph, variableName, allStates]);
-
-	const isVariableWaitingForDependencies = unsettledParents.length > 0;
-
-	const variableDependencyWaitMessage = useMemo(() => {
-		if (variableFetchState !== 'waiting') {
-			return;
-		}
-
-		if (variableType === 'DYNAMIC') {
-			return 'Waiting for all query variable options to load.';
-		}
-
-		if (unsettledParents.length === 0) {
-			return;
-		}
-
-		const quoted = unsettledParents.map((p) => `"${p}"`);
-		const names =
-			quoted.length > 1
-				? `${quoted.slice(0, -1).join(', ')} and ${quoted[quoted.length - 1]}`
-				: quoted[0];
-		return `Waiting for options of ${names} to load.`;
-	}, [variableFetchState, variableType, unsettledParents]);
-
-	return {
-		variableFetchState,
-		isVariableSettled,
-		isVariableWaitingForDependencies,
-		variableDependencyWaitMessage,
-		isVariableFetching,
-		hasVariableFetchedOnce,
-		variableFetchCycleId,
-	};
-}
-
-export function useIsPanelWaitingOnVariable(variableNames: string[]): boolean {
-	const states = useVariableFetchSelector((s) => s.states);
-	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
-
-	return variableNames.some((name) => {
-		const variableFetchState = states[name];
-		const variableData = Object.values(dashboardVariables).find(
-			(v) => v.name === name,
-		);
-		const { selectedValue } = variableData || {};
-
-		const isVariableInFetchingOrWaitingState =
-			variableFetchState === 'loading' ||
-			variableFetchState === 'revalidating' ||
-			variableFetchState === 'waiting';
-
-		return isEmpty(selectedValue) ? isVariableInFetchingOrWaitingState : false;
-	});
-}

frontend/src/hooks/queryBuilder/__tests__/useCreateAlerts.test.tsx

@@ -32,12 +32,8 @@ jest.mock(
 	}),
 );
 
-jest.mock('hooks/dashboard/useDashboardVariables', () => ({
-	useDashboardVariables: (): unknown => ({ dashboardVariables: {} }),
-}));
-
-jest.mock('hooks/dashboard/useDashboardVariablesByType', () => ({
-	useDashboardVariablesByType: (): unknown => ({}),
+jest.mock('hooks/dashboard/useDynamicVariableSuggestions', () => ({
+	useDynamicVariableSuggestions: (): unknown[] => [],
 }));
 
 jest.mock('hooks/useNotifications', () => ({
@@ -46,10 +42,6 @@ jest.mock('hooks/useNotifications', () => ({
 	}),
 }));
 
-jest.mock('lib/dashboardVariables/getDashboardVariables', () => ({
-	getDashboardVariables: (): unknown => ({}),
-}));
-
 jest.mock('utils/getGraphType', () => ({
 	getGraphType: jest.fn().mockReturnValue('time_series'),
 }));

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -11,10 +11,8 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { MenuItemKeys } from 'container/WidgetCard/Header/contants';
-import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useNotifications } from 'hooks/useNotifications';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { isEmpty } from 'lodash-es';
 import { AppState } from 'store/reducers';
@@ -38,11 +36,7 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 
 	const { notifications } = useNotifications();
 
-	const { dashboardVariables } = useDashboardVariables();
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	return useCallback(() => {
 		if (!widget) {
@@ -68,7 +62,6 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 			globalSelectedInterval,
 			graphType: getGraphType(widget.panelTypes),
 			selectedTime: widget.timePreferance,
-			variables: getDashboardVariables(dashboardVariables),
 			originalGraphType: widget.panelTypes,
 			dynamicVariables: dashboardDynamicVariables,
 		});
@@ -107,7 +100,6 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 		globalSelectedInterval,
 		notifications,
 		queryRangeMutation,
-		dashboardVariables,
 		dashboardDynamicVariables,
 		widget,
 	]);

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

@@ -5,7 +5,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { updateBarStepInterval } from 'container/WidgetCard/utils';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import {
 	GetMetricQueryRange,
 	GetQueryResultsProps,
@@ -33,10 +33,7 @@ export const useGetQueryRange: UseGetQueryRange = (
 	options,
 	headers,
 ) => {
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	const newRequestData: GetQueryResultsProps = useMemo(() => {
 		const firstQueryData = requestData.query.builder?.queryData[0];

frontend/src/lib/dashboard/getQueryResults.ts

@@ -17,8 +17,8 @@ import {
 import { Pagination } from 'hooks/queryPagination';
 import { convertNewDataToOld } from 'lib/newQueryBuilder/convertNewDataToOld';
 import { isEmpty } from 'lodash-es';
+import { DynamicVariableSuggestion } from 'providers/Dashboard/store/dynamicVariableSuggestions';
 import { SuccessResponseV2, Warning } from 'types/api';
-import { IDashboardVariable } from 'types/api/dashboard/variables';
 import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import {
@@ -179,7 +179,7 @@ export const getLegend = (
 export async function GetMetricQueryRange(
 	props: GetQueryResultsProps,
 	version: string,
-	dynamicVariables?: IDashboardVariable[],
+	dynamicVariables?: DynamicVariableSuggestion[],
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 ): Promise<MetricQueryRangeSuccessResponse> {
@@ -364,5 +364,5 @@ export interface GetQueryResultsProps {
 	end?: number;
 	step?: number;
 	originalGraphType?: PANEL_TYPES;
-	dynamicVariables?: IDashboardVariable[];
+	dynamicVariables?: DynamicVariableSuggestion[];
 }

frontend/src/lib/dashboardVariables/dependencyGraph.ts

@@ -1,239 +0,0 @@
-import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
-import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import { IDashboardVariable } from 'types/api/dashboard/variables';
-
-/**
- * Inter-variable dependency graph over the shared dashboard-variables store. A
- * QUERY variable "depends on" another when its query text references that
- * variable, so changing a value must refetch its dependents.
- *
- * Keyed on `IDashboardVariable`. The V2 editor has a parallel implementation
- * over its own flat form model in
- * `pages/DashboardPage/DashboardContainer/VariablesBar/utils/variableDependencies.ts`.
- */
-
-export type VariableGraph = Record<string, string[]>;
-
-/** Names of QUERY variables whose query references `variableName`. */
-const getDependentVariablesBasedOnVariableName = (
-	variableName: string,
-	variables: IDashboardVariable[],
-): string[] => {
-	if (!variables || !Array.isArray(variables)) {
-		return [];
-	}
-
-	return variables
-		.map((variable) => {
-			if (variable.type === 'QUERY') {
-				const queryValue = variable.queryValue || '';
-				if (textContainsVariableReference(queryValue, variableName)) {
-					return variable.name;
-				}
-			}
-			return null;
-		})
-		.filter((val): val is string => val !== null);
-};
-
-/** variable name → its direct dependents (children). */
-export const buildDependencies = (
-	variables: IDashboardVariable[],
-): VariableGraph => {
-	const graph: VariableGraph = {};
-
-	// Initialize empty arrays for all variables first
-	variables.forEach((variable) => {
-		if (variable.name) {
-			graph[variable.name] = [];
-		}
-	});
-
-	// For each QUERY variable, add it as a dependent to its referenced variables
-	variables.forEach((variable) => {
-		if (variable.name) {
-			const dependentVariables = getDependentVariablesBasedOnVariableName(
-				variable.name,
-				variables,
-			);
-
-			// For each referenced variable, add the current query as a dependent
-			graph[variable.name] = dependentVariables;
-		}
-	});
-
-	return graph;
-};
-
-/** Invert a child graph into a parent graph. */
-export const buildParentDependencyGraph = (
-	graph: VariableGraph,
-): VariableGraph => {
-	const parentGraph: VariableGraph = {};
-
-	// Initialize empty arrays for all nodes
-	Object.keys(graph).forEach((node) => {
-		parentGraph[node] = [];
-	});
-
-	// For each node and its children in the original graph
-	Object.entries(graph).forEach(([node, children]) => {
-		// For each child, add the current node as its parent
-		children.forEach((child) => {
-			if (!parentGraph[child]) {
-				parentGraph[child] = [];
-			}
-			parentGraph[child].push(node);
-		});
-	});
-
-	return parentGraph;
-};
-
-const collectCyclePath = (
-	graph: VariableGraph,
-	start: string,
-	end: string,
-): string[] => {
-	const path: string[] = [];
-	let current = start;
-
-	const findParent = (node: string): string | undefined =>
-		Object.keys(graph).find((key) => graph[key]?.includes(node));
-
-	while (current !== end) {
-		const parent = findParent(current);
-		if (!parent) {
-			break;
-		}
-		path.push(parent);
-		current = parent;
-	}
-
-	return [start, ...path];
-};
-
-const detectCycle = (
-	graph: VariableGraph,
-	node: string,
-	visited: Set<string>,
-	recStack: Set<string>,
-): string[] | null => {
-	if (!visited.has(node)) {
-		visited.add(node);
-		recStack.add(node);
-
-		const neighbors = graph[node] || [];
-		let cycleNodes: string[] | null = null;
-
-		neighbors.some((neighbor) => {
-			if (!visited.has(neighbor)) {
-				const foundCycle = detectCycle(graph, neighbor, visited, recStack);
-				if (foundCycle) {
-					cycleNodes = foundCycle;
-					return true;
-				}
-			} else if (recStack.has(neighbor)) {
-				// Found a cycle, collect the cycle nodes
-				cycleNodes = collectCyclePath(graph, node, neighbor);
-				return true;
-			}
-			return false;
-		});
-
-		if (cycleNodes) {
-			return cycleNodes;
-		}
-	}
-	recStack.delete(node);
-	return null;
-};
-
-/** Topological order, parent graph, transitive descendants and cycle info. */
-export const buildDependencyGraph = (
-	dependencies: VariableGraph,
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-): IDependencyData => {
-	const inDegree: Record<string, number> = {};
-	const adjList: VariableGraph = {};
-
-	// Initialize in-degree and adjacency list
-	Object.keys(dependencies).forEach((node) => {
-		if (!inDegree[node]) {
-			inDegree[node] = 0;
-		}
-		if (!adjList[node]) {
-			adjList[node] = [];
-		}
-		dependencies[node]?.forEach((child) => {
-			if (!inDegree[child]) {
-				inDegree[child] = 0;
-			}
-			inDegree[child]++;
-			adjList[node].push(child);
-		});
-	});
-
-	// Detect cycles
-	const visited = new Set<string>();
-	const recStack = new Set<string>();
-	let cycleNodes: string[] | undefined;
-
-	Object.keys(dependencies).some((node) => {
-		if (!visited.has(node)) {
-			const foundCycle = detectCycle(dependencies, node, visited, recStack);
-			if (foundCycle) {
-				cycleNodes = foundCycle;
-				return true;
-			}
-		}
-		return false;
-	});
-
-	// Topological sort using Kahn's Algorithm
-	const queue: string[] = Object.keys(inDegree).filter(
-		(node) => inDegree[node] === 0,
-	);
-	const topologicalOrder: string[] = [];
-
-	while (queue.length > 0) {
-		const current = queue.shift();
-		if (current === undefined) {
-			break;
-		}
-		topologicalOrder.push(current);
-
-		adjList[current]?.forEach((neighbor) => {
-			inDegree[neighbor]--;
-			if (inDegree[neighbor] === 0) {
-				queue.push(neighbor);
-			}
-		});
-	}
-
-	const hasCycle = topologicalOrder.length !== Object.keys(dependencies)?.length;
-
-	// Pre-compute transitive descendants by walking topological order in reverse.
-	// Each node's transitive descendants = direct children + their transitive descendants.
-	const transitiveDescendants: VariableGraph = {};
-	for (let i = topologicalOrder.length - 1; i >= 0; i--) {
-		const node = topologicalOrder[i];
-		const desc = new Set<string>();
-		for (const child of adjList[node] || []) {
-			desc.add(child);
-			for (const d of transitiveDescendants[child] || []) {
-				desc.add(d);
-			}
-		}
-		transitiveDescendants[node] = Array.from(desc);
-	}
-
-	return {
-		order: topologicalOrder,
-		graph: adjList,
-		parentDependencyGraph: buildParentDependencyGraph(adjList),
-		transitiveDescendants,
-		hasCycle,
-		cycleNodes,
-	};
-};

frontend/src/lib/dashboardVariables/getDashboardVariables.ts

@@ -1,41 +0,0 @@
-import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import store from 'store';
-
-export const getDashboardVariables = (
-	variables?: IDashboardVariables,
-): Record<string, unknown> => {
-	if (!variables) {
-		return {};
-	}
-
-	try {
-		const { globalTime } = store.getState();
-		const { start, end } = getStartEndRangeTime({
-			type: 'GLOBAL_TIME',
-			interval: globalTime.selectedTime,
-		});
-
-		const variablesTuple: Record<string, unknown> = {
-			SIGNOZ_START_TIME: parseInt(start, 10) * 1e3,
-			SIGNOZ_END_TIME: parseInt(end, 10) * 1e3,
-		};
-
-		Object.entries(variables).forEach(([, value]) => {
-			if (value?.name) {
-				variablesTuple[value.name] =
-					value?.type === 'DYNAMIC' &&
-					value?.allSelected &&
-					value?.showALLOption &&
-					value?.multiSelect
-						? '__all__'
-						: value?.selectedValue;
-			}
-		});
-
-		return variablesTuple;
-	} catch (e) {
-		console.error(e);
-	}
-	return {};
-};

frontend/src/lib/uPlotV2/config/UPlotAxisBuilder.ts

@@ -1,4 +1,5 @@
 import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import uPlot, { Axis } from 'uplot';
 
 import { uPlotXAxisValuesFormat } from '../../uPlotLib/utils/constants';
@@ -6,6 +7,11 @@ import getGridColor from '../../uPlotLib/utils/getGridColor';
 import { buildYAxisSizeCalculator } from '../utils/axis';
 import { AxisProps, ConfigBuilder } from './types';
 
+const PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT = [
+	PANEL_TYPES.TIME_SERIES,
+	PANEL_TYPES.BAR,
+];
+
 /**
  * Builder for uPlot axis configuration
  * Handles creation and merging of axis settings
@@ -61,9 +67,12 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 	 * Build values formatter for X-axis (time)
 	 */
 	private buildXAxisValuesFormatter(): uPlot.Axis.Values | undefined {
-		const { isTimeAxis } = this.props;
+		const { panelType } = this.props;
 
-		if (isTimeAxis) {
+		if (
+			panelType &&
+			PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT.includes(panelType)
+		) {
 			return uPlotXAxisValuesFormat as uPlot.Axis.Values;
 		}
 

frontend/src/lib/uPlotV2/config/__tests__/UPlotAxisBuilder.test.ts

@@ -1,4 +1,5 @@
 import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
 import type uPlot from 'uplot';
 
@@ -136,11 +137,11 @@ describe('UPlotAxisBuilder', () => {
 		});
 	});
 
-	it('uses time-based X-axis values formatter when the caller declares a time axis', () => {
+	it('uses time-based X-axis values formatter for time-series like panels', () => {
 		const builder = new UPlotAxisBuilder(
 			createAxisProps({
 				scaleKey: 'x',
-				isTimeAxis: true,
+				panelType: PANEL_TYPES.TIME_SERIES,
 			}),
 		);
 
@@ -149,11 +150,11 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.values).toBe(uPlotXAxisValuesFormat);
 	});
 
-	it('does not attach X-axis datetime formatter for a non-time axis', () => {
+	it('does not attach X-axis datetime formatter when panel type is not supported', () => {
 		const builder = new UPlotAxisBuilder(
 			createAxisProps({
 				scaleKey: 'x',
-				isTimeAxis: false,
+				panelType: PANEL_TYPES.LIST, // not in PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT
 			}),
 		);
 
@@ -289,9 +290,22 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.space).toBe(50);
 	});
 
-	it('omits the X-axis datetime formatter when no time axis is declared', () => {
-		const builder = new UPlotAxisBuilder(createAxisProps({ scaleKey: 'x' }));
-		expect(builder.getConfig().values).toBeUndefined();
+	it('includes PANEL_TYPES.BAR and PANEL_TYPES.TIME_SERIES in X-axis datetime formatter', () => {
+		const barBuilder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+				panelType: PANEL_TYPES.BAR,
+			}),
+		);
+		expect(barBuilder.getConfig().values).toBe(uPlotXAxisValuesFormat);
+
+		const timeSeriesBuilder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+				panelType: PANEL_TYPES.TIME_SERIES,
+			}),
+		);
+		expect(timeSeriesBuilder.getConfig().values).toBe(uPlotXAxisValuesFormat);
 	});
 
 	it('should return the existing size when cycleNum > 1', () => {

frontend/src/lib/uPlotV2/config/types.ts

@@ -1,4 +1,5 @@
 import { PrecisionOption } from 'components/Graph/types';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import uPlot, { Series } from 'uplot';
 
 import { ThresholdsDrawHookOptions } from '../hooks/types';
@@ -52,50 +53,31 @@ export interface ConfigBuilderProps {
  * Props for configuring an axis
  */
 export interface AxisProps {
-	/** Scale this axis is drawn against — `'x'` / `'y'`, matching an `addScale` key. Also
-	 * selects the default tick formatter and sizing (x: time, y: value + unit). */
 	scaleKey: string;
-	/** Axis title drawn alongside the ticks; omitted when there's nothing to name. */
 	label?: string;
-	/** Render the axis at all; false keeps the scale but draws no ticks or labels. */
 	show?: boolean;
-	/** Which edge of the plot the axis sits on: 0 | 1 | 2 | 3 — top, right, bottom, left. */
-	side?: 0 | 1 | 2 | 3;
-	/** Tick/label color. Defaults to black or white from `isDarkMode`. */
+	side?: 0 | 1 | 2 | 3; // top, right, bottom, left
 	stroke?: string;
-	/** Partial override of the grid lines; unset keys fall back to the theme defaults. */
 	grid?: {
 		stroke?: string;
 		width?: number;
 		show?: boolean;
 	};
-	/** Partial override of the tick marks; provided as-is to uPlot when set. */
 	ticks?: {
 		stroke?: string;
 		width?: number;
 		show?: boolean;
 		size?: number;
 	};
-	/** Explicit tick formatter, replacing the scale's default (time / unit-formatted). */
 	values?: uPlot.Axis.Values;
-	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
-	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */
 	size?: uPlot.Axis.Size;
+	formatValue?: (v: number) => string;
 	space?: number; // Space for log scale axes
-	/** Picks the dark or light default for stroke and grid color. */
 	isDarkMode?: boolean;
-	/** Axis is on a log scale — thins the grid lines to keep dense decades readable. */
 	isLogScale?: boolean;
-	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`). */
 	yAxisUnit?: string;
-	/**
-	 * X axis carries timestamps, so its ticks format as dates/times. Declared by the caller
-	 * rather than inferred from a panel type — a chart whose x axis is buckets or categories
-	 * (histogram) leaves it off.
-	 */
-	isTimeAxis?: boolean;
-	/** Decimal places for y axis tick values; unset lets the unit formatter decide. */
+	panelType?: PANEL_TYPES;
 	decimalPrecision?: PrecisionOption;
 }
 

frontend/src/lib/visualization/panels/utils/baseConfigBuilder.ts

@@ -124,9 +124,7 @@ export function buildBaseConfig({
 		side: 2,
 		isDarkMode,
 		isLogScale,
-		// Graph and bar plot time on X; every other panel type here does not.
-		isTimeAxis:
-			panelType === PANEL_TYPES.TIME_SERIES || panelType === PANEL_TYPES.BAR,
+		panelType,
 	});
 
 	builder.addAxis({
@@ -136,6 +134,7 @@ export function buildBaseConfig({
 		isDarkMode,
 		isLogScale,
 		yAxisUnit,
+		panelType,
 	});
 
 	return builder;

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

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

@@ -34,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/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/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 brings it back 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,76 +0,0 @@
-import {
-	DashboardtypesPanelBackgroundDTO,
-	DashboardtypesTextAlignDTO,
-	DashboardtypesVerticalAlignDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { Typography } from '@signozhq/ui/typography';
-import type {
-	SectionEditorProps,
-	SectionKind,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
-
-import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
-import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
-
-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
- * solid/transparent card background (TDD D7 — transparency is scoped to the
- * text spec, not the panel envelope).
- */
-function TextLayoutSection({
-	value,
-	onChange,
-}: SectionEditorProps<SectionKind.TextLayout>): JSX.Element {
-	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>
-			<ConfigSwitch
-				testId="text-layout-transparent"
-				title="Transparent panel"
-				description="Drop the card background and border — for section headers on the canvas."
-				value={value?.background === DashboardtypesPanelBackgroundDTO.transparent}
-				onChange={(transparent): void =>
-					onChange({
-						...value,
-						background: transparent
-							? DashboardtypesPanelBackgroundDTO.transparent
-							: DashboardtypesPanelBackgroundDTO.solid,
-					})
-				}
-			/>
-		</div>
-	);
-}
-
-export default TextLayoutSection;

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

@@ -1,59 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import {
-	DashboardtypesPanelBackgroundDTO,
-	DashboardtypesTextAlignDTO,
-	DashboardtypesVerticalAlignDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import TextLayoutSection from '../TextLayoutSection';
-
-const value = {
-	textAlign: DashboardtypesTextAlignDTO.left,
-	verticalAlign: DashboardtypesVerticalAlignDTO.top,
-	background: DashboardtypesPanelBackgroundDTO.solid,
-};
-
-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('toggles the transparent background', () => {
-		const onChange = jest.fn();
-		render(<TextLayoutSection value={value} onChange={onChange} />);
-
-		fireEvent.click(screen.getByTestId('text-layout-transparent'));
-
-		expect(onChange).toHaveBeenCalledWith({
-			...value,
-			background: DashboardtypesPanelBackgroundDTO.transparent,
-		});
-	});
-
-	it('defaults to left/top/solid when the slice is empty', () => {
-		render(<TextLayoutSection value={undefined} onChange={jest.fn()} />);
-
-		expect(screen.getByTestId('text-layout-horizontal-align')).toBeInTheDocument();
-		expect(screen.getByTestId('text-layout-transparent')).not.toBeChecked();
-	});
-});

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

@@ -8,7 +8,6 @@ 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'],
 	})),

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

@@ -13,6 +13,7 @@ import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.sche
 import PromQLIcon from 'assets/Dashboard/PromQl';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import TextToolTip from 'components/TextToolTip';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import ClickHouseQueryContainer from 'container/QueryBuilder/rawQueryEditors/ClickHouse';
 import PromQLQueryContainer from 'container/QueryBuilder/rawQueryEditors/PromQL';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
@@ -21,15 +22,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 +56,7 @@ interface PanelEditorQueryBuilderProps {
  * `QueryBuilderProvider`. `usePanelEditorQuerySync` owns the panel↔provider sync.
  */
 function PanelEditorQueryBuilder({
-	panelDefinition,
+	panelKind,
 	signal,
 	isLoadingQueries,
 	onStageRunQuery,
@@ -58,12 +64,8 @@ function PanelEditorQueryBuilder({
 	footer,
 	stickyHeader = true,
 }: 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);
-	// 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';
+	// The shared QueryBuilderV2 / list-view checks still speak the legacy PANEL_TYPES.
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const isDarkMode = useIsDarkMode();
 
@@ -94,12 +96,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]: {
@@ -110,9 +112,9 @@ function PanelEditorQueryBuilder({
 						<QueryBuilderV2
 							panelType={panelType}
 							filterConfigs={filterConfigs}
-							showTraceOperator={!isListViewPanel}
+							showTraceOperator={panelType !== PANEL_TYPES.LIST}
 							version="v3"
-							isListViewPanel={isListViewPanel}
+							isListViewPanel={panelType === PANEL_TYPES.LIST}
 							queryComponents={{}}
 							signalSourceChangeEnabled
 							savePreviousQuery
@@ -146,7 +148,7 @@ function PanelEditorQueryBuilder({
 			),
 			children: queryTypeComponents[queryType].component,
 		}));
-	}, [panelDefinition, panelType, filterConfigs, isDarkMode, isListViewPanel]);
+	}, [panelKind, panelType, filterConfigs, isDarkMode]);
 
 	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()}
@@ -63,7 +60,6 @@ function renderBuilder(
 function lastQueryBuilderProps(): {
 	panelType: string;
 	isListViewPanel: boolean;
-	showTraceOperator: boolean;
 	filterConfigs: unknown;
 } {
 	const calls = mockQueryBuilderV2.mock.calls;
@@ -119,9 +115,6 @@ describe('PanelEditorQueryBuilder field visibility (driven by the capabilities g
 		const props = lastQueryBuilderProps();
 		expect(props.panelType).toBe('graph');
 		expect(props.isListViewPanel).toBe(false);
-		// The trace operator combines aggregated trace queries, so it rides along with
-		// the aggregation controls.
-		expect(props.showTraceOperator).toBe(true);
 		expect(props.filterConfigs).toStrictEqual({});
 	});
 
@@ -131,7 +124,6 @@ describe('PanelEditorQueryBuilder field visibility (driven by the capabilities g
 		const props = lastQueryBuilderProps();
 		expect(props.panelType).toBe('list');
 		expect(props.isListViewPanel).toBe(true);
-		expect(props.showTraceOperator).toBe(false);
 		expect(props.filterConfigs).toStrictEqual({
 			stepInterval: { isHidden: true, isDisabled: true },
 			having: { isHidden: true, isDisabled: true },

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

@@ -1,15 +1,12 @@
 import { Spline } from '@signozhq/icons';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import QueryTypeTag from 'components/QueryTypeTag/QueryTypeTag';
 import { EQueryType } from 'types/common/dashboard';
 
 interface PlotTagProps {
 	/** Authoring mode of the panel's query; undefined when no query exists yet. */
 	queryType: EQueryType | undefined;
-	/**
-	 * Panel shows raw rows rather than a plot, so naming the mode the rows were
-	 * "plotted with" would be wrong.
-	 */
-	isListViewPanel: boolean;
+	panelType: PANEL_TYPES;
 	className?: string;
 }
 
@@ -20,10 +17,10 @@ interface PlotTagProps {
  */
 function PlotTag({
 	queryType,
-	isListViewPanel,
+	panelType,
 	className,
 }: PlotTagProps): JSX.Element | null {
-	if (queryType === undefined || isListViewPanel) {
+	if (queryType === undefined || panelType === PANEL_TYPES.LIST) {
 		return null;
 	}
 

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

@@ -6,7 +6,8 @@ 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 { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
 import type { DashboardPreference } from 'pages/DashboardPage/DashboardContainer/Panels/types/rendererProps';
 import { getPanelQueryType } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getPanelQueryType';
 import type {
@@ -20,8 +21,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;
@@ -71,6 +72,7 @@ function PreviewPane({
 	onClick,
 	enableDrillDown,
 }: PreviewPaneProps): JSX.Element {
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
 	const queryType = getPanelQueryType(panel);
 
 	// Search term is ephemeral preview state, threaded to header + renderer but
@@ -84,7 +86,7 @@ function PreviewPane({
 				<div className={styles.header}>
 					<PlotTag
 						queryType={queryType}
-						isListViewPanel={panel.spec.plugin.kind === 'signoz/ListPanel'}
+						panelType={panelType}
 						className={styles.queryType}
 					/>
 					<div className={styles.dateTimeSelector}>
@@ -99,7 +101,6 @@ function PreviewPane({
 					})}
 				>
 					<PanelHeader
-						mode="query"
 						panelId={panelId}
 						panel={panel}
 						data={data}
@@ -112,7 +113,7 @@ function PreviewPane({
 						hideActions
 					/>
 					<PanelBody
-						Renderer={panelDefinition.Renderer}
+						panelDefinition={panelDefinition}
 						panel={panel}
 						panelId={panelId}
 						data={data}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PreviewPane/__tests__/PlotTag.test.tsx

@@ -1,22 +1,30 @@
 import { render, screen } from '@testing-library/react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
 import PlotTag from '../PlotTag';
 
 describe('PlotTag', () => {
 	it('renders the resolved query mode', () => {
-		render(<PlotTag queryType={EQueryType.PROM} isListViewPanel={false} />);
+		render(
+			<PlotTag queryType={EQueryType.PROM} panelType={PANEL_TYPES.TIME_SERIES} />,
+		);
 		expect(screen.getByTestId('panel-editor-plot-tag')).toBeInTheDocument();
 		expect(screen.getByText('PromQL')).toBeInTheDocument();
 	});
 
 	it('renders nothing when there is no query yet', () => {
-		render(<PlotTag queryType={undefined} isListViewPanel={false} />);
+		render(<PlotTag queryType={undefined} panelType={PANEL_TYPES.TIME_SERIES} />);
 		expect(screen.queryByTestId('panel-editor-plot-tag')).not.toBeInTheDocument();
 	});
 
-	it('renders nothing for a list panel (query mode is irrelevant)', () => {
-		render(<PlotTag queryType={EQueryType.QUERY_BUILDER} isListViewPanel />);
+	it('renders nothing for list panels (query mode is irrelevant)', () => {
+		render(
+			<PlotTag
+				queryType={EQueryType.QUERY_BUILDER}
+				panelType={PANEL_TYPES.LIST}
+			/>,
+		);
 		expect(screen.queryByTestId('panel-editor-plot-tag')).not.toBeInTheDocument();
 	});
 });

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

@@ -1,372 +0,0 @@
-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 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 layoutStorage from './layoutStorage';
-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 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 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 { defaultLayout, onLayoutChanged } = useDefaultLayout({
-		id: 'panel-editor-v2',
-		storage: layoutStorage,
-	});
-
-	const {
-		defaultLayout: mainDefaultLayout,
-		onLayoutChanged: onMainLayoutChanged,
-	} = useDefaultLayout({
-		id: 'panel-editor-v2-main',
-		storage: layoutStorage,
-	});
-
-	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 (
-		<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%">
-								<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}>
-									<EditorPane
-										panelDefinition={panelDefinition}
-										signal={listSignal}
-										isLoadingQueries={isFetching}
-										onStageRunQuery={runQuery}
-										onCancelQuery={cancelQuery}
-										spec={spec}
-										onChangeSpec={setSpec}
-									/>
-								</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>
-	);
-}
-
-export default QueryEditorBody;

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

@@ -1,162 +0,0 @@
-import { useCallback } from 'react';
-import {
-	ResizableHandle,
-	ResizablePanel,
-	ResizablePanelGroup,
-	useDefaultLayout,
-} from '@signozhq/ui/resizable';
-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 StaticPreviewPane from './StaticPreviewPane/StaticPreviewPane';
-import layoutStorage from './layoutStorage';
-import type { PanelEditorContainerProps } from './index';
-import type { PanelEditorDraftApi } from './types';
-import { usePanelEditorSave } from './hooks/usePanelEditorSave';
-
-import styles from './PanelEditor.module.scss';
-
-interface StaticEditorBodyProps extends PanelEditorContainerProps {
-	draftApi: PanelEditorDraftApi;
-	panelDefinition: RenderableStaticPanelDefinition;
-	onChangePanelKind: (kind: PanelKind) => void;
-}
-
-/**
- * Editor body for a kind that renders from its own plugin spec: the kind's
- * editor pane under a live preview of the draft, the config pane on the right.
- * No query session, no builder seeding, no staged-run — the preview re-renders
- * from the draft spec on every edit.
- */
-function StaticEditorBody({
-	dashboardId,
-	panelId,
-	isNew = false,
-	layoutIndex,
-	isEditable,
-	editDisabledReason,
-	onClose,
-	onSaved,
-	draftApi,
-	panelDefinition,
-	onChangePanelKind,
-}: StaticEditorBodyProps): JSX.Element {
-	const { draft, spec, setSpec, isSpecDirty } = draftApi;
-	const { EditorPane } = panelDefinition;
-
-	const { save, isSaving } = usePanelEditorSave({
-		dashboardId,
-		panelId,
-		isNew,
-		layoutIndex,
-	});
-	const { defaultLayout, onLayoutChanged } = useDefaultLayout({
-		id: 'panel-editor-v2',
-		storage: layoutStorage,
-	});
-	const {
-		defaultLayout: mainDefaultLayout,
-		onLayoutChanged: onMainLayoutChanged,
-	} = useDefaultLayout({
-		id: 'panel-editor-v2-main',
-		storage: layoutStorage,
-	});
-
-	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
-	const { showErrorModal } = useErrorModal();
-
-	const onSave = useCallback(async (): Promise<void> => {
-		if (!isEditable) {
-			return;
-		}
-		try {
-			// `queries: []` is the only shape the API accepts for a static kind.
-			const savedPanelId = await save({ ...draft.spec, queries: [] });
-			setScrollTargetId(savedPanelId);
-			toast.success('Panel saved', {
-				position: 'top-center',
-			});
-			onSaved();
-		} catch (err) {
-			showErrorModal(err);
-		}
-	}, [isEditable, save, draft.spec, setScrollTargetId, onSaved, showErrorModal]);
-
-	const onCloseEditor = useCallback((): void => {
-		if (!isNew) {
-			setScrollTargetId(panelId);
-		}
-		onClose();
-	}, [isNew, panelId, setScrollTargetId, onClose]);
-
-	return (
-		<div className={styles.page} data-testid="panel-editor-v2">
-			<Header
-				isDirty={isSpecDirty}
-				isSaving={isSaving}
-				showSwitchToView={false}
-				readOnly={!isEditable}
-				readOnlyReason={editDisabledReason}
-				onSave={onSave}
-				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="40%" maxSize="65%" defaultSize="55%">
-								<StaticPreviewPane
-									panelId={panelId}
-									panel={draft}
-									panelDefinition={panelDefinition}
-									panelMode={PanelMode.DASHBOARD_EDIT}
-								/>
-							</ResizablePanel>
-							<ResizableHandle withHandle className={styles.handle} />
-							<ResizablePanel minSize="35%" maxSize="60%" defaultSize="45%">
-								<EditorPane spec={spec} onChangeSpec={setSpec} />
-							</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={EQueryType.QUERY_BUILDER}
-						legendSeries={[]}
-						tableColumns={[]}
-					/>
-				</ResizablePanel>
-			</ResizablePanelGroup>
-		</div>
-	);
-}
-
-export default StaticEditorBody;

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

@@ -1,33 +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(--l2-border);
-	border-radius: 4px;
-	background: var(--l2-background);
-	overflow: hidden;
-}
-
-// The preview honours the draft's transparent option (TDD §6.4): the card chrome
-// drops and the body sits on the dotted canvas, as it will on the dashboard.
-.transparent {
-	background: transparent;
-	border-color: transparent;
-}

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

@@ -1,52 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import cx from 'classnames';
-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 type { RenderableStaticPanelDefinition } from '../../Panels/types/panelDefinition';
-import { isPanelHeaderHidden } from '../../Panels/utils/isPanelHeaderHidden';
-import { isTransparentPanel } from '../../Panels/utils/isTransparentPanel';
-import styles from './StaticPreviewPane.module.scss';
-
-interface StaticPreviewPaneProps {
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-	panelDefinition: RenderableStaticPanelDefinition;
-	panelMode: PanelMode;
-}
-
-/**
- * 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,
-}: StaticPreviewPaneProps): JSX.Element {
-	return (
-		<div className={styles.preview}>
-			<div
-				className={cx(styles.surface, {
-					[styles.transparent]: isTransparentPanel(panel.spec),
-				})}
-			>
-				{!isPanelHeaderHidden(panel.spec) && (
-					<PanelHeader mode="static" panelId={panelId} panel={panel} hideActions />
-				)}
-				<StaticPanelBody
-					panelDefinition={panelDefinition}
-					panel={panel}
-					panelId={panelId}
-					panelMode={panelMode}
-				/>
-			</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/usePanelEditSession.ts

@@ -4,19 +4,21 @@ 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 } 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 +35,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 +47,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 +59,8 @@ export interface UsePanelEditSessionReturn {
 	buildSaveSpec: (
 		spec: DashboardtypesPanelSpecDTO,
 	) => DashboardtypesPanelSpecDTO;
+	/** Switch the draft's visualization kind in place (reversible per session). */
+	onChangePanelKind: (kind: PanelKind) => void;
 }
 
 /**
@@ -79,26 +77,22 @@ 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({
 		panel: draft,
 		panelId,
-		queryCapabilities: panelDefinition.queryCapabilities,
 		time,
-		enabled: isPanelKindSupported(panelKind),
+		enabled: !!panelDefinition,
 	});
 
 	const { runQuery, isQueryDirty, buildSaveSpec } = usePanelEditorQuerySync({
@@ -111,6 +105,12 @@ export function usePanelEditSession({
 		savedQueries: savedPanel?.spec.queries,
 	});
 
+	const { onChangePanelKind } = usePanelTypeSwitch({
+		spec: draft.spec,
+		panelType,
+		setSpec,
+	});
+
 	return {
 		draft,
 		spec,
@@ -124,5 +124,6 @@ export function usePanelEditSession({
 		runQuery,
 		isQueryDirty,
 		buildSaveSpec,
+		onChangePanelKind,
 	};
 }

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

@@ -6,7 +6,7 @@ import type {
 	DashboardtypesQueryDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import type { PANEL_TYPES } from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	handleQueryChange,
 	type PartialPanelTypes,
@@ -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;
 			}
 
@@ -163,7 +146,7 @@ export function usePanelTypeSwitch({
 			);
 			// Match a fresh list panel's default order so the builder's Order By isn't empty.
 			const nextQuery =
-				newKind === 'signoz/ListPanel'
+				newPanelType === PANEL_TYPES.LIST
 					? withDefaultListOrder(transformed)
 					: transformed;
 			const signal = getBuilderQueries(currentSpec.queries)[0]

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/Panels/__tests__/capabilities.test.ts

@@ -1,18 +1,9 @@
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { OPERATORS } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
-import { UNSUPPORTED_PANEL } from '../kinds/UnsupportedPanel/definition';
-import { getPanelDefinition, isPanelKindSupported } from '../registry';
-import type { PanelQueryCapabilities } from '../types/panelCapabilities';
-import { NO_PANEL_ACTIONS } from '../types/panelDefinition';
 import {
 	getHiddenQueryBuilderFields,
-	getQueryPanelDefinition,
-	requireQueryPanelDefinition,
 	getSupportedQueryTypes,
 	getSupportedSignals,
 	isPanelCombinationValid,
@@ -24,7 +15,6 @@ import type { PanelKind } from '../types/panelKind';
 
 const { QUERY_BUILDER, CLICKHOUSE, PROM } = EQueryType;
 const { logs, traces, metrics } = TelemetrytypesSignalDTO;
-const { time_series, scalar, raw } = Querybuildertypesv5RequestTypeDTO;
 
 const EXPECTED_QUERY_TYPES: Record<PanelKind, EQueryType[]> = {
 	'signoz/TimeSeriesPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
@@ -34,8 +24,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,125 +35,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>
-> = {
-	'signoz/TimeSeriesPanel': {
-		requestType: time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	// Bar bins client-side, so it asks for a widened step interval over a raw series.
-	'signoz/BarChartPanel': {
-		requestType: time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: true,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	'signoz/HistogramPanel': {
-		requestType: time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	'signoz/NumberPanel': {
-		requestType: scalar,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	'signoz/PieChartPanel': {
-		requestType: scalar,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	// Only Table asks the server to transpose its scalar result into UI rows.
-	'signoz/TablePanel': {
-		requestType: scalar,
-		formatTableResultForUI: true,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	// Only List reads raw rows, pages them server-side, and needs an order tiebreaker.
-	'signoz/ListPanel': {
-		requestType: raw,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: true,
-		serverPaginated: true,
-	},
 };
 
 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(
-				EXPECTED_QUERY_CAPABILITIES[kind],
-			);
-		});
-	});
-
-	// A dashboard spec written by a newer SigNoz can name a kind this build has no
-	// definition for. The registry answers with UNSUPPORTED_PANEL rather than nothing, so
-	// every guard below reads it without first proving a definition exists.
-	describe('a kind this build cannot render', () => {
-		const unknownKind = 'signoz/SomeFutureKindPanel' as PanelKind;
-
-		it('is not reported as supported', () => {
-			expect(isPanelKindSupported(unknownKind)).toBe(false);
-			expect(isPanelKindSupported('signoz/TimeSeriesPanel')).toBe(true);
-		});
-
-		it('still resolves to a definition', () => {
-			expect(getPanelDefinition(unknownKind)).toBe(UNSUPPORTED_PANEL);
-		});
-
-		it('declares nothing, so it is never offered as authorable', () => {
-			expect(getSupportedSignals(unknownKind)).toStrictEqual([]);
-			expect(getSupportedQueryTypes(unknownKind)).toStrictEqual([]);
-			expect(isSignalSupported(unknownKind, logs)).toBe(false);
-			expect(
-				isPanelCombinationValid({ kind: unknownKind, queryType: QUERY_BUILDER }),
-			).toBe(false);
-			expect(getHiddenQueryBuilderFields(unknownKind, logs)).toStrictEqual({});
-			expect(getPanelDefinition(unknownKind).sections).toStrictEqual([]);
-		});
-
-		it('offers no actions', () => {
-			expect(getPanelDefinition(unknownKind).actions).toStrictEqual(
-				NO_PANEL_ACTIONS,
-			);
-			expect(NO_PANEL_ACTIONS.view).toBe(false);
-			expect(NO_PANEL_ACTIONS.edit).toBe(false);
-			expect(NO_PANEL_ACTIONS.drilldown).toBe(false);
-		});
-
-		it('carries an inert query shape, so a stray request can do no harm', () => {
-			const queryCapabilities = requireQueryPanelDefinition(unknownKind)
-				.queryCapabilities;
-			expect(queryCapabilities.requestType).toBe(time_series);
-			expect(queryCapabilities.serverPaginated).toBe(false);
-			expect(queryCapabilities.formatTableResultForUI).toBe(false);
-		});
-	});
-
 	describe('query type support', () => {
 		it.each(ALL_KINDS)('declares the expected query types for %s', (kind) => {
 			expect(getSupportedQueryTypes(kind)).toStrictEqual(

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';
@@ -20,12 +20,8 @@ interface NoDataProps {
 	isFetching?: boolean;
 	/** When provided, renders a Retry button that re-runs the query. */
 	onRetry?: () => void;
-	/**
-	 * The panel this empty state stands in for. Every renderer has it, and it decides
-	 * whether the global "Extend time range" action applies (a panel locked to a fixed
-	 * time preference can't be widened by it) as well as what the action events report.
-	 */
-	panel: DashboardtypesPanelDTO;
+	/** Hides the global "Extend time range" action when this panel is locked to a fixed time preference. */
+	panel?: DashboardtypesPanelDTO;
 	'data-testid'?: string;
 }
 
@@ -47,17 +43,19 @@ function NoData({
 	const globalExtend = useExtendTimeWindow();
 	// The View modal's local extender wins; the global one only applies to a panel that
 	// follows the ambient window (a fixed preference can't be widened by it).
+	const hasFixedTimePreference = panel
+		? panelHasFixedTimePreference(panel)
+		: false;
 	const activeExtend =
-		viewExtend ?? (panelHasFixedTimePreference(panel) ? undefined : globalExtend);
+		viewExtend ?? (hasFixedTimePreference ? undefined : globalExtend);
 
 	if (isFetching) {
 		return <PanelLoader />;
 	}
 
-	// `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
+		? PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind]
+		: undefined;
 
 	const extendAction: PanelMessageAction | undefined =
 		activeExtend?.canExtend && activeExtend.actionLabel
@@ -67,7 +65,6 @@ function NoData({
 						void logEvent(DashboardDetailEvents.NoDataAction, {
 							action: 'extendTime',
 							panelType,
-							panelKind,
 						});
 						activeExtend.extend();
 					},
@@ -82,7 +79,6 @@ function NoData({
 					void logEvent(DashboardDetailEvents.NoDataAction, {
 						action: 'retry',
 						panelType,
-						panelKind,
 					});
 					onRetry();
 				},

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

@@ -33,12 +33,7 @@ function panelWith(
 	timePreference?: DashboardtypesTimePreferenceDTO,
 ): DashboardtypesPanelDTO {
 	return {
-		spec: {
-			plugin: {
-				kind: 'signoz/TimeSeriesPanel',
-				spec: { visualization: { timePreference } },
-			},
-		},
+		spec: { plugin: { spec: { visualization: { timePreference } } } },
 	} as unknown as DashboardtypesPanelDTO;
 }
 
@@ -49,7 +44,7 @@ describe('NoData', () => {
 	});
 
 	it('renders the empty-state title and hint', () => {
-		render(<NoData panel={panelWith()} />);
+		render(<NoData />);
 
 		expect(screen.getByTestId('panel-no-data')).toBeInTheDocument();
 		expect(screen.getByText('No data in this time range')).toBeInTheDocument();
@@ -60,7 +55,7 @@ describe('NoData', () => {
 
 	it('offers to extend the window as the primary action', () => {
 		mockUseExtendTimeWindow.mockReturnValue(extender());
-		render(<NoData panel={panelWith()} />);
+		render(<NoData />);
 
 		const action = screen.getByTestId('panel-no-data-action');
 		expect(action).toHaveTextContent('Extend time range');
@@ -73,7 +68,7 @@ describe('NoData', () => {
 	it('renders both Extend (primary) and Retry (secondary) when a retry handler is given', () => {
 		const onRetry = jest.fn();
 		mockUseExtendTimeWindow.mockReturnValue(extender());
-		render(<NoData onRetry={onRetry} panel={panelWith()} />);
+		render(<NoData onRetry={onRetry} />);
 
 		expect(screen.getByTestId('panel-no-data-action')).toHaveTextContent(
 			'Extend time range',
@@ -87,7 +82,7 @@ describe('NoData', () => {
 
 	it('falls back to Retry as the sole action when the window cannot be widened', () => {
 		const onRetry = jest.fn();
-		render(<NoData onRetry={onRetry} panel={panelWith()} />);
+		render(<NoData onRetry={onRetry} />);
 
 		const action = screen.getByTestId('panel-no-data-action');
 		expect(action).toHaveTextContent('Retry');
@@ -106,7 +101,7 @@ describe('NoData', () => {
 		useViewPanelStore.setState({
 			viewPanelExtendWindow: extender({ extend: storeExtend }),
 		});
-		render(<NoData panel={panelWith()} />);
+		render(<NoData />);
 
 		fireEvent.click(screen.getByTestId('panel-no-data-action'));
 		expect(storeExtend).toHaveBeenCalledTimes(1);
@@ -114,7 +109,7 @@ describe('NoData', () => {
 	});
 
 	it('renders no action when nothing can be widened and no retry handler', () => {
-		render(<NoData panel={panelWith()} />);
+		render(<NoData />);
 
 		expect(screen.queryByTestId('panel-no-data-action')).not.toBeInTheDocument();
 		expect(
@@ -124,7 +119,7 @@ describe('NoData', () => {
 
 	it('shows the panel loader (not the empty state) while refetching', () => {
 		mockUseExtendTimeWindow.mockReturnValue(extender());
-		render(<NoData isFetching panel={panelWith()} />);
+		render(<NoData isFetching />);
 
 		expect(screen.getByTestId('panel-loading')).toBeInTheDocument();
 		expect(screen.queryByTestId('panel-no-data')).not.toBeInTheDocument();
@@ -133,7 +128,7 @@ describe('NoData', () => {
 
 	it('honours the data-testid override for the number panel', () => {
 		mockUseExtendTimeWindow.mockReturnValue(extender());
-		render(<NoData data-testid="number-panel-no-data" panel={panelWith()} />);
+		render(<NoData data-testid="number-panel-no-data" />);
 
 		expect(screen.getByTestId('number-panel-no-data')).toBeInTheDocument();
 	});

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

@@ -1,19 +1,13 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 	kind: 'signoz/BarChartPanel',
 	displayName: 'Bar Chart',
-	mode: 'query',
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,
@@ -26,15 +20,6 @@ export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 		EQueryType.PROM,
 	],
 	queryBuilderFields: {},
-	// Bars are binned client-side from a raw time series, so the request asks for a
-	// step interval wide enough to keep the bar count readable (V1 parity).
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: true,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/BarChartPanel/utils/buildConfig.ts

@@ -1,5 +1,6 @@
 import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { PanelMode } from 'lib/visualization/panels/types';
 import { buildBaseConfig } from 'pages/DashboardPage/DashboardContainer/Panels/utils/baseConfigBuilder';
 import { resolveSeriesLabelV5 } from 'pages/DashboardPage/DashboardContainer/Panels/utils/resolveSeriesLabel';
@@ -46,7 +47,7 @@ export function buildBarChartConfig({
 }: BuildBarChartConfigArgs): UPlotConfigBuilder {
 	const builder = buildBaseConfig({
 		panelId,
-		isTimeAxis: true,
+		panelType: PANEL_TYPES.BAR,
 		isDarkMode,
 		timezone,
 		panelMode,

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

@@ -1,19 +1,13 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 	kind: 'signoz/HistogramPanel',
 	displayName: 'Histogram',
-	mode: 'query',
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,
@@ -26,15 +20,6 @@ export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 		EQueryType.PROM,
 	],
 	queryBuilderFields: {},
-	// Buckets are computed client-side from the raw series, so the request is a plain
-	// time series — the bucket count is a display concern, not a query one.
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/HistogramPanel/utils/buildConfig.ts

@@ -1,5 +1,6 @@
 import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { PanelMode } from 'lib/visualization/panels/types';
 import { buildBaseConfig } from 'pages/DashboardPage/DashboardContainer/Panels/utils/baseConfigBuilder';
 import { resolveSeriesLabelV5 } from 'pages/DashboardPage/DashboardContainer/Panels/utils/resolveSeriesLabel';
@@ -43,7 +44,7 @@ export function buildHistogramConfig({
 }: BuildHistogramConfigArgs): UPlotConfigBuilder {
 	const builder = buildBaseConfig({
 		panelId,
-		isTimeAxis: false,
+		panelType: PANEL_TYPES.HISTOGRAM,
 		isDarkMode,
 		timezone,
 		panelMode,

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,20 +1,14 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
-import ListEditorPane from './ListEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { OPERATORS } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/ListPanel'> = {
 	kind: 'signoz/ListPanel',
 	displayName: 'List',
-	mode: 'query',
 	Renderer,
-	EditorPane: ListEditorPane,
 	// Raw records come from logs and traces; metrics don't produce row data.
 	supportedSignals: [
 		TelemetrytypesSignalDTO.logs,
@@ -36,15 +30,6 @@ export const definition: PanelDefinition<'signoz/ListPanel'> = {
 		},
 	},
 	sections,
-	// The only kind reading raw rows: they page server-side, and the sort needs a
-	// tiebreaker so a duplicated sort key can't repeat or skip a row across pages.
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.raw,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: true,
-		serverPaginated: true,
-	},
 	actions: {
 		view: true,
 		edit: true,

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

@@ -1,19 +1,13 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 	kind: 'signoz/NumberPanel',
 	displayName: 'Number',
-	mode: 'query',
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,
@@ -26,13 +20,6 @@ export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 		EQueryType.PROM,
 	],
 	queryBuilderFields: {},
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.scalar,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	actions: {
 		view: true,
 		edit: true,

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

@@ -1,19 +1,13 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 	kind: 'signoz/PieChartPanel',
 	displayName: 'Pie Chart',
-	mode: 'query',
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,
@@ -22,13 +16,6 @@ export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 	],
 	supportedQueryTypes: [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
 	queryBuilderFields: {},
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.scalar,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	actions: {
 		view: true,
 		edit: true,

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

@@ -1,19 +1,13 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
-import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/TablePanel'> = {
 	kind: 'signoz/TablePanel',
 	displayName: 'Table',
-	mode: 'query',
 	Renderer,
-	EditorPane: QueryBuilderEditorPane,
 	sections,
 	supportedSignals: [
 		TelemetrytypesSignalDTO.metrics,
@@ -22,14 +16,6 @@ export const definition: PanelDefinition<'signoz/TablePanel'> = {
 	],
 	supportedQueryTypes: [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
 	queryBuilderFields: {},
-	// The only kind that asks the server to transpose its scalar result into UI rows.
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.scalar,
-		formatTableResultForUI: true,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	// Tables carry tabular data worth exporting (V1 parity: download is table-only).
 	actions: {
 		view: true,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/CodeBlock.module.scss

@@ -1,25 +0,0 @@
-// Tripled on purpose: the markdown reset (`.content.content *`) weighs (0,2,0),
-// and a doubled class only ties it — leaving the winner to stylesheet order,
-// which reverted `position: relative` and let the copy button anchor to the
-// panel instead of the block. (0,3,0) wins regardless of order.
-.codeBlock.codeBlock.codeBlock {
-	position: relative;
-}
-
-// The wrapper is a reset-exempt island (see MarkdownContent.module.scss), so
-// plain classes style it; the button inside keeps its design-system look.
-.copyButton {
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	border-radius: 3px;
-	background: var(--l3-background);
-	opacity: 0;
-	transition: opacity 0.15s ease;
-}
-
-// GitHub-style reveal: hover anywhere on the block, or keyboard focus.
-.codeBlock.codeBlock.codeBlock:hover .copyButton,
-.codeBlock.codeBlock.codeBlock:focus-within .copyButton {
-	opacity: 1;
-}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/CodeBlock.tsx

@@ -1,69 +0,0 @@
-import type { CodeProps } from 'react-markdown/lib/ast-to-react';
-
-import CopyButton from 'periscope/components/CopyButton/CopyButton';
-
-import SyntaxHighlighter, { resolveLanguage } from './syntaxLanguages';
-import { usePrismLanguage } from './usePrismLanguage';
-
-import styles from './CodeBlock.module.scss';
-
-const LANGUAGE_PATTERN = /language-(\w+)/;
-
-/**
- * Fenced blocks are tokenised by Prism but coloured by the SCSS module —
- * `useInlineStyles` off swaps the library's own theme for `token …` class names,
- * which keeps the palette on design tokens and themed with the rest of the body.
- */
-function CodeBlock({ inline, className, children }: CodeProps): JSX.Element {
-	const fenced = LANGUAGE_PATTERN.exec(className ?? '')?.[1]?.toLowerCase();
-	const language = fenced ? resolveLanguage(fenced) : null;
-	const isReady = usePrismLanguage(language);
-
-	if (inline) {
-		return <code className={className}>{children}</code>;
-	}
-
-	// react-markdown hands the block's text through as string children; anything
-	// else in there is not source and has no place in the highlighter's input —
-	// and it is exactly what the copy button puts on the clipboard.
-	const source = (Array.isArray(children) ? children : [children])
-		.filter((child): child is string => typeof child === 'string')
-		.join('')
-		.replace(/\n$/, '');
-
-	// Verbatim while the language chunk is still loading, and permanently for one
-	// Prism doesn't know. The `pre` is supplied here either way, since
-	// `MarkdownContent` unwraps react-markdown's own.
-	const block =
-		!language || !isReady ? (
-			<pre>
-				<code className={className}>{children}</code>
-			</pre>
-		) : (
-			<SyntaxHighlighter
-				language={language}
-				useInlineStyles={false}
-				PreTag="pre"
-				CodeTag="code"
-			>
-				{source}
-			</SyntaxHighlighter>
-		);
-
-	return (
-		<div className={styles.codeBlock}>
-			{block}
-			{/* data-md-ui: exempts the design-system button from the body's style reset. */}
-			<span data-md-ui className={styles.copyButton}>
-				<CopyButton
-					value={source}
-					size={13}
-					ariaLabel="Copy code"
-					testId="text-panel-copy-code"
-				/>
-			</span>
-		</div>
-	);
-}
-
-export default CodeBlock;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/EditorPane.module.scss

@@ -1,4 +0,0 @@
-.pane {
-	height: 100%;
-	min-height: 0;
-}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/EditorPane.tsx

@@ -1,70 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import MarkdownEditor from 'components/MarkdownEditor/MarkdownEditor';
-import type { EditorVariable } from 'components/MarkdownEditor/types';
-import { dtoToFormModel } from 'pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/variableAdapters';
-import { useDashboardFetchRequired } from 'pages/DashboardPage/DashboardContainer/hooks/useDashboardFetchRequired';
-
-import type { StaticEditorPaneProps } from '../../types/panelDefinition';
-import type {
-	DashboardtypesPanelSpecDTO,
-	DashboardtypesTextPanelSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import styles from './EditorPane.module.scss';
-
-/**
- * The Text panel's authoring pane — the Markdown source editor in the slot where
- * query-backed kinds show the query builder. The preview above renders the draft
- * spec, so it updates live as the body changes; there is no Run step.
- */
-function EditorPane({
-	spec,
-	onChangeSpec,
-}: StaticEditorPaneProps): JSX.Element {
-	// The plugin-spec union can't be narrowed by a dynamic kind; one localized cast,
-	// as in the section registry's lenses.
-	const pluginSpec = spec.plugin.spec as DashboardtypesTextPanelSpecDTO;
-
-	const { variables: variableDtos } = useDashboardFetchRequired();
-	const variables = useMemo(
-		() =>
-			variableDtos
-				.map((dto) => dtoToFormModel(dto))
-				.flatMap((model): EditorVariable[] =>
-					model.name ? [{ name: model.name, badge: model.type }] : [],
-				),
-		[variableDtos],
-	);
-
-	const onChangeText = useCallback(
-		(text: string): void => {
-			// Written back through the same cast: `plugin` is the kind-discriminated
-			// union, and TS resolves a bare object literal against the wrong arm.
-			const nextPluginSpec: DashboardtypesTextPanelSpecDTO = {
-				...pluginSpec,
-				text,
-			};
-			onChangeSpec({
-				...spec,
-				plugin: {
-					...spec.plugin,
-					spec: nextPluginSpec,
-				} as DashboardtypesPanelSpecDTO['plugin'],
-			});
-		},
-		[spec, pluginSpec, onChangeSpec],
-	);
-
-	return (
-		<div className={styles.pane} data-testid="text-panel-editor-pane">
-			<MarkdownEditor
-				value={pluginSpec.text ?? ''}
-				onChange={onChangeText}
-				variables={variables}
-				statusHint="Preview updates as you type"
-			/>
-		</div>
-	);
-}
-
-export default EditorPane;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/MarkdownContent.module.scss

@@ -1,324 +0,0 @@
-@use '../../../../../../styles/scrollbar' as *;
-
-// Style isolation: the subtree is rolled back to user-agent styling, so no global
-// rule reaches the rendered body and the rules below are the only author styles that
-// apply. `all` skips custom properties, so tokens still resolve, and inherited
-// properties the caller owns (`text-align`, set by the panel's presentation options)
-// still flow in. The class is doubled throughout so a global `.wrapper p` can't tie
-// on specificity and win on source order.
-// `[data-md-ui]` marks injected UI islands (the code-block copy button) that keep
-// their design-system styling: `:where(:not(…))` skips them and their subtrees at
-// zero added specificity, so the island escape doesn't out-rank the body rules.
-.content.content,
-.content.content *:where(:not([data-md-ui], [data-md-ui] *)) {
-	all: revert;
-	box-sizing: border-box;
-}
-
-.content.content {
-	--md-foreground: var(--text-vanilla-100);
-	--md-muted: var(--text-neutral-dark-100);
-	--md-link: var(--text-robin-400);
-	--md-border: var(--l1-border);
-	--md-surface: color-mix(in srgb, var(--l1-foreground) 6%, transparent);
-	--md-code-comment: var(--text-neutral-dark-200);
-	--md-code-punctuation: var(--text-neutral-dark-100);
-	--md-code-keyword: var(--text-sakura-400);
-	--md-code-string: var(--text-forest-400);
-	--md-code-number: var(--text-amber-400);
-	--md-code-function: var(--text-robin-300);
-	--md-code-property: var(--text-aqua-400);
-	// Fits a two-digit ordered marker (`10.`). Shared by the task-list offset.
-	--md-list-indent: 24px;
-
-	display: block;
-	font-family: var(--font-family-inter);
-	font-size: var(--paragraph-base-400-font-size);
-	font-weight: var(--font-weight-normal);
-	line-height: var(--paragraph-base-400-line-height);
-	color: var(--md-foreground);
-	overflow-wrap: break-word;
-}
-
-:global(body.lightMode) .content.content {
-	--md-foreground: var(--text-ink-400);
-	--md-muted: var(--text-neutral-light-100);
-	--md-link: var(--text-robin-500);
-	--md-code-comment: var(--text-neutral-light-100);
-	--md-code-punctuation: var(--text-neutral-light-100);
-	--md-code-keyword: var(--text-sakura-600);
-	--md-code-string: var(--text-forest-700);
-	--md-code-number: var(--text-amber-800);
-	--md-code-function: var(--text-robin-600);
-	--md-code-property: var(--text-aqua-700);
-}
-
-.content.content > :first-child {
-	margin-top: 0;
-}
-
-.content.content > :last-child {
-	margin-bottom: 0;
-}
-
-.content.content p {
-	margin: 0 0 8px;
-}
-
-.content.content h1,
-.content.content h2,
-.content.content h3,
-.content.content h4,
-.content.content h5,
-.content.content h6 {
-	margin: 16px 0 8px;
-	font-weight: var(--font-weight-semibold);
-	line-height: var(--line-height-tight);
-	color: var(--md-foreground);
-}
-
-.content.content h1 {
-	font-size: var(--font-size-lg);
-}
-
-.content.content h2 {
-	font-size: var(--label-medium-600-font-size);
-}
-
-.content.content h3 {
-	font-size: var(--font-size-sm);
-}
-
-.content.content h4,
-.content.content h5,
-.content.content h6 {
-	font-size: var(--paragraph-base-600-font-size);
-}
-
-.content.content h5,
-.content.content h6 {
-	color: var(--md-muted);
-}
-
-.content.content ul,
-.content.content ol {
-	margin: 0 0 8px;
-	padding-left: var(--md-list-indent);
-}
-
-// A nested list belongs to the item above it, so it opens tight.
-.content.content li > ul,
-.content.content li > ol {
-	margin: 2px 0 0;
-}
-
-// The reset flattens the user-agent's own disc/circle/square progression, so the
-// per-depth shapes are restated here.
-.content.content ul {
-	list-style: disc;
-}
-
-.content.content ul ul {
-	list-style: circle;
-}
-
-.content.content ul ul ul {
-	list-style: square;
-}
-
-.content.content ol {
-	list-style: decimal;
-}
-
-.content.content ol ol {
-	list-style: lower-alpha;
-}
-
-.content.content ol ol ol {
-	list-style: lower-roman;
-}
-
-.content.content li {
-	margin: 2px 0;
-}
-
-// Markers are structure, not content. Safari below 17 ignores `::marker` colour and
-// leaves them in the body colour.
-.content.content li::marker {
-	color: var(--md-muted);
-	font-variant-numeric: tabular-nums;
-}
-
-// Task lists carry their own checkbox, so drop the marker and reclaim the indent.
-.content.content li:has(> input[type='checkbox']) {
-	list-style: none;
-	margin-left: calc(var(--md-list-indent) * -1);
-}
-
-.content.content input[type='checkbox'] {
-	margin-right: 6px;
-	accent-color: var(--md-link);
-}
-
-.content.content a {
-	color: var(--md-link);
-	text-decoration: none;
-
-	&:hover,
-	&:focus-visible {
-		text-decoration: underline;
-	}
-}
-
-.content.content strong {
-	font-weight: var(--font-weight-semibold);
-	color: var(--md-foreground);
-}
-
-.content.content em {
-	font-style: italic;
-}
-
-.content.content del {
-	text-decoration: line-through;
-	color: var(--md-muted);
-}
-
-.content.content code {
-	padding: 1px 4px;
-	border-radius: 2px;
-	
-	background: var(--md-surface);
-	font-family: var(--font-family-sf-mono);
-	font-size: var(--code-small-400-font-size);
-	color: var(--md-foreground);
-}
-
-.content.content pre {
-	margin: 0 0 8px;
-	padding: 8px 10px;
-	border-radius: 3px;
-	background: var(--md-surface);
-	overflow-x: auto;
-	@include custom-scrollbar;
-
-	code {
-		padding: 0;
-		background: none;
-		font-size: var(--code-small-400-font-size);
-		line-height: var(--line-height-18);
-		color: var(--md-foreground);
-	}
-}
-
-.content.content blockquote {
-	margin: 0 0 8px;
-	padding: 2px 0 2px 10px;
-	border-left: 4px solid var(--md-border);
-	color: var(--md-muted);
-}
-
-.content.content hr {
-	margin: 12px 0;
-	border: none;
-	border-top: 1px solid var(--md-border);
-}
-
-.content.content img {
-	max-width: 100%;
-	height: auto;
-	border-radius: 3px;
-}
-
-.content.content table {
-	border-collapse: collapse;
-	width: auto;
-}
-
-.content.content th,
-.content.content td {
-	padding: 4px 10px;
-	border: 1px solid var(--md-border);
-	text-align: left;
-}
-
-.content.content th {
-	background: var(--md-surface);
-	font-weight: var(--font-weight-semibold);
-}
-
-// Rendered by the `table` component override.
-.content.content .tableScroll {
-	margin: 0 0 8px;
-	overflow-x: auto;
-	@include custom-scrollbar;
-}
-
-// Prism runs with `useInlineStyles` off, so it emits `token …` class names. They are
-// `:global` because CSS Modules would otherwise hash them and match nothing, and the
-// palette lives here on design tokens instead of in a theme object.
-.content.content :global(.token.comment),
-.content.content :global(.token.prolog),
-.content.content :global(.token.doctype),
-.content.content :global(.token.cdata) {
-	color: var(--md-code-comment);
-	font-style: italic;
-}
-
-.content.content :global(.token.punctuation),
-.content.content :global(.token.operator),
-.content.content :global(.token.entity) {
-	color: var(--md-code-punctuation);
-}
-
-.content.content :global(.token.keyword),
-.content.content :global(.token.atrule),
-.content.content :global(.token.rule),
-.content.content :global(.token.important),
-.content.content :global(.token.selector) {
-	color: var(--md-code-keyword);
-}
-
-.content.content :global(.token.string),
-.content.content :global(.token.char),
-.content.content :global(.token.attr-value),
-.content.content :global(.token.regex),
-.content.content :global(.token.url) {
-	color: var(--md-code-string);
-}
-
-.content.content :global(.token.number),
-.content.content :global(.token.boolean),
-.content.content :global(.token.constant),
-.content.content :global(.token.symbol) {
-	color: var(--md-code-number);
-}
-
-.content.content :global(.token.function),
-.content.content :global(.token.class-name),
-.content.content :global(.token.builtin) {
-	color: var(--md-code-function);
-}
-
-.content.content :global(.token.property),
-.content.content :global(.token.attr-name),
-.content.content :global(.token.variable),
-.content.content :global(.token.tag) {
-	color: var(--md-code-property);
-}
-
-.content.content :global(.token.deleted) {
-	color: var(--text-cherry-400);
-}
-
-.content.content :global(.token.inserted) {
-	color: var(--text-forest-400);
-}
-
-.content.content :global(.token.bold) {
-	font-weight: var(--font-weight-semibold);
-}
-
-.content.content :global(.token.italic) {
-	font-style: italic;
-}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/MarkdownContent.tsx

@@ -1,84 +0,0 @@
-import { type ReactNode, useMemo } from 'react';
-import cx from 'classnames';
-import ReactMarkdown from 'react-markdown';
-import type { Components } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-
-import CodeBlock from './CodeBlock';
-
-import styles from './MarkdownContent.module.scss';
-
-/**
- * SECURITY — never add `rehype-raw` here. Without it react-markdown renders raw HTML
- * as plain text, so there is no `dangerouslySetInnerHTML` on the path and nothing to
- * sanitise. The body is user-authored and, on a public dashboard, read anonymously;
- * the shared `MarkdownRenderer` enables `rehype-raw` and is safe only for the trusted
- * content it was built for. `transformLinkUri` is likewise left at its default.
- */
-const REMARK_PLUGINS = [remarkGfm];
-
-// What the default transformer substitutes for a rejected scheme. Inert, but it
-// would still put `javascript:` in the DOM, so the anchor is dropped instead.
-const REJECTED_HREF = `javascript:${'void(0)'}`;
-
-const COMPONENTS: Components = {
-	a: ({ node: _node, children, href, ...props }): JSX.Element => {
-		if (!href || href === REJECTED_HREF) {
-			return <span {...props}>{children}</span>;
-		}
-		return (
-			<a {...props} href={href} target="_blank" rel="noopener noreferrer nofollow">
-				{children}
-			</a>
-		);
-	},
-	// Wide tables scroll inside their own box rather than widening the panel.
-	table: ({ node: _node, children, ...props }): JSX.Element => (
-		<div className={styles.tableScroll}>
-			<table {...props}>{children}</table>
-		</div>
-	),
-	code: CodeBlock,
-	// `CodeBlock` emits its own `pre`, so this one would nest a second one.
-	pre: ({ children }): JSX.Element => <>{children}</>,
-};
-
-export interface MarkdownContentProps {
-	/** Variable interpolation happens upstream, before parsing. */
-	children: string;
-	/** Rendered instead of the body when the source is blank. */
-	emptyState?: ReactNode;
-	className?: string;
-	testId?: string;
-}
-
-/** CommonMark + GFM, styled in isolation — see the reset in the SCSS module. */
-function MarkdownContent({
-	children,
-	emptyState = null,
-	className,
-	testId = 'markdown-content',
-}: MarkdownContentProps): JSX.Element | null {
-	// Dashboards re-render on every variable tick; parsing is the expensive half.
-	const body = useMemo(
-		() =>
-			children.trim() ? (
-				<ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={COMPONENTS}>
-					{children}
-				</ReactMarkdown>
-			) : null,
-		[children],
-	);
-
-	if (!body) {
-		return emptyState ? <>{emptyState}</> : null;
-	}
-
-	return (
-		<div className={cx(styles.content, className)} data-testid={testId}>
-			{body}
-		</div>
-	);
-}
-
-export default MarkdownContent;