feat(dashboards): let the text panel hide its header

New Panel header config section writing plugin.spec.headerOptions.hide
(carried across kind switches; absent = show, the API zero value). On the
grid a hidden header swaps for hover-revealed controls - a centered drag
pill and the floating actions menu - so the panel stays movable and
editable; the public view and previews just drop the strip.

Assisted-by: Claude Fable 5

docs/api/openapi.yml

@@ -2984,6 +2984,11 @@ components:
       - tags
       - spec
       type: object
+    DashboardtypesHeaderOptions:
+      properties:
+        hide:
+          type: boolean
+      type: object
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -3321,6 +3326,11 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelBackground:
+      enum:
+      - solid
+      - transparent
+      type: string
     DashboardtypesPanelFormatting:
       properties:
         decimalPrecision:
@@ -3341,6 +3351,7 @@ components:
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
+          signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
         propertyName: kind
       oneOf:
@@ -3351,6 +3362,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -3361,6 +3373,7 @@ components:
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
+      - signoz/TextPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
@@ -3434,6 +3447,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/TextPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesTextPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec:
       properties:
         kind:
@@ -3725,6 +3750,36 @@ 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:
@@ -3934,6 +3989,12 @@ 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|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|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)/)',
 		// 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|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|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)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

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

@@ -4277,6 +4277,58 @@ 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
@@ -4284,7 +4336,8 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -5206,6 +5259,7 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TablePanel' = 'signoz/TablePanel',
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
+	'signoz/TextPanel' = 'signoz/TextPanel',
 }
 /**
  * @nullable

frontend/src/components/MarkdownEditor/EditorStatusBar.tsx

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,253 @@
+@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

@@ -0,0 +1,245 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,270 @@
+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

@@ -0,0 +1,258 @@
+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

@@ -0,0 +1,24 @@
+// 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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,269 @@
+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

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,27 @@
+/** 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/pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/VariableImpactDialog/VariableImpactDialog.tsx

@@ -19,6 +19,7 @@ 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

@@ -0,0 +1,49 @@
+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,6 +45,16 @@ 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[],
@@ -99,6 +109,38 @@ 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

@@ -0,0 +1,16 @@
+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,6 +107,18 @@ 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,6 +12,7 @@ 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. */
@@ -19,7 +20,8 @@ export type VariableUsageKind =
 	| 'builder'
 	| 'promql'
 	| 'clickhouse'
-	| 'variable';
+	| 'variable'
+	| 'text';
 
 export type VariableImpactMode = 'rename' | 'delete' | 'apply';
 
@@ -81,7 +83,7 @@ function computeResultingText(
 		return rewriteVariableReferences(text, variableName, newName);
 	}
 	// delete: only builder filter clauses can be safely auto-stripped; raw PromQL/
-	// ClickHouse and variable queries are left for the user to edit.
+	// ClickHouse, markdown bodies and variable queries are left for the user to edit.
 	return kind === 'builder'
 		? removeVariableFromExpression(text, variableName)
 		: text;
@@ -106,6 +108,31 @@ 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,6 +5,7 @@ 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';
 
@@ -67,7 +68,7 @@ function ConfigPane({
 	const definition = getPanelDefinition(panelKind);
 	const sections = definition.sections;
 
-	const signal = resolveSignal(spec.queries, definition.supportedSignals[0]);
+	const signal = resolveSignal(spec.queries, getSupportedSignals(panelKind)[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,6 +34,7 @@ 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,6 +2,7 @@ import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 import {
+	isQuerylessPanelKind,
 	isQueryTypeSupportedByPanelKind,
 	isSignalSupported,
 } from '../../../Panels/capabilities';
@@ -37,6 +38,12 @@ 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,6 +23,8 @@ 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';
 
@@ -117,6 +119,23 @@ 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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,11 @@
+.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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,59 @@
+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,6 +8,7 @@ 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

@@ -21,20 +21,15 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { EQueryType } from 'types/common/dashboard';
 
-import {
-	getHiddenQueryBuilderFields,
-	getSupportedQueryTypes,
-} from '../../Panels/capabilities';
-import {
-	PANEL_KIND_TO_PANEL_TYPE,
-	type PanelKind,
-} from '../../Panels/types/panelKind';
+import { mergeQueryBuilderFieldRule } from '../../Panels/types/panelCapabilities';
+import type { RenderableQueryPanelDefinition } from '../../Panels/types/panelDefinition';
+import { toLegacyPanelType } from '../../Panels/types/panelKind';
 
 import styles from './PanelEditorQueryBuilder.module.scss';
 
 interface PanelEditorQueryBuilderProps {
-	/** The edited panel's visualization kind — drives supported query types + field visibility via the capabilities guard. */
-	panelKind: PanelKind;
+	/** The edited kind's definition — drives supported query types + field visibility. */
+	panelDefinition: RenderableQueryPanelDefinition;
 	/** 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. */
@@ -55,7 +50,7 @@ interface PanelEditorQueryBuilderProps {
  * `QueryBuilderProvider`. `usePanelEditorQuerySync` owns the panel↔provider sync.
  */
 function PanelEditorQueryBuilder({
-	panelKind,
+	panelDefinition,
 	signal,
 	isLoadingQueries,
 	onStageRunQuery,
@@ -65,10 +60,10 @@ function PanelEditorQueryBuilder({
 }: PanelEditorQueryBuilderProps): JSX.Element {
 	// The shared QueryBuilderV2 provider still speaks the legacy PANEL_TYPES; what the
 	// builder offers for this kind comes from the kind's own declaration.
-	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
+	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 = panelKind === 'signoz/ListPanel';
+	const isListViewPanel = panelDefinition.kind === 'signoz/ListPanel';
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const isDarkMode = useIsDarkMode();
 
@@ -99,12 +94,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(
-		() => getHiddenQueryBuilderFields(panelKind, signal),
-		[panelKind, signal],
+		() => mergeQueryBuilderFieldRule(panelDefinition.queryBuilderFields, signal),
+		[panelDefinition.queryBuilderFields, signal],
 	);
 
 	const items = useMemo(() => {
-		const supportedQueryTypes = getSupportedQueryTypes(panelKind);
+		const { supportedQueryTypes } = panelDefinition;
 
 		const queryTypeComponents = {
 			[EQueryType.QUERY_BUILDER]: {
@@ -151,7 +146,7 @@ function PanelEditorQueryBuilder({
 			),
 			children: queryTypeComponents[queryType].component,
 		}));
-	}, [panelKind, panelType, filterConfigs, isDarkMode, isListViewPanel]);
+	}, [panelDefinition, panelType, filterConfigs, isDarkMode, isListViewPanel]);
 
 	return (
 		<div

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

@@ -0,0 +1,28 @@
+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,6 +4,9 @@ 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.
@@ -48,7 +51,7 @@ function renderBuilder(
 ): void {
 	render(
 		<PanelEditorQueryBuilder
-			panelKind={panelKind as never}
+			panelDefinition={requireQueryPanelDefinition(panelKind as PanelKind)}
 			signal={signal}
 			isLoadingQueries={false}
 			onStageRunQuery={jest.fn()}

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

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

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

@@ -0,0 +1,372 @@
+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

@@ -0,0 +1,162 @@
+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

@@ -0,0 +1,33 @@
+// 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

@@ -0,0 +1,52 @@
+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,6 +3,7 @@ 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';
@@ -232,7 +233,12 @@ describe('PanelEditorContainer composition', () => {
 			}),
 		);
 		expect(mockQbProps).toHaveBeenCalledWith(
-			expect.objectContaining({ panelKind: 'signoz/TimeSeriesPanel' }),
+			expect.objectContaining({
+				panelDefinition: expect.objectContaining({
+					kind: 'signoz/TimeSeriesPanel',
+					mode: 'query',
+				}),
+			}),
 		);
 		expect(mockConfigProps).toHaveBeenCalledWith(
 			expect.objectContaining({
@@ -256,7 +262,7 @@ describe('PanelEditorContainer composition', () => {
 				setSpec: mockSetSpec,
 				refetch: mockRefetch,
 				alwaysSerializeQuery: false,
-				signal: getPanelDefinition('signoz/TimeSeriesPanel').supportedSignals[0],
+				signal: getSupportedSignals('signoz/TimeSeriesPanel')[0],
 			}),
 		);
 		expect(mockUseTypeSwitch).toHaveBeenCalledWith(

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

@@ -0,0 +1,129 @@
+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,3 +115,15 @@ 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,6 +18,8 @@ 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.
@@ -83,7 +85,7 @@ function EditorRoute(): JSX.Element {
 
 	return (
 		<PanelEditorQueryBuilder
-			panelKind="signoz/TimeSeriesPanel"
+			panelDefinition={requireQueryPanelDefinition('signoz/TimeSeriesPanel')}
 			signal={TelemetrytypesSignalDTO.metrics}
 			isLoadingQueries={false}
 			onStageRunQuery={noop}

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

@@ -19,6 +19,10 @@ 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,24 +4,19 @@ import type {
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	getPanelDefinition,
-	isPanelKindSupported,
-} from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-import type { RenderablePanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import {
-	PANEL_KIND_TO_PANEL_TYPE,
-	type PanelKind,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
+import { 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 {
 	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;
@@ -38,6 +33,12 @@ 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 {
@@ -50,7 +51,7 @@ export interface UsePanelEditSessionReturn {
 	reset: () => void;
 	/** Draft kind → V1 panel type (drives the query builder + preview). */
 	panelType: PANEL_TYPES;
-	panelDefinition: RenderablePanelDefinition;
+	panelDefinition: RenderableQueryPanelDefinition;
 	/** The kind's first supported signal — seeds new queries/columns. */
 	defaultSignal: TelemetrytypesSignalDTO;
 	/** Shared query result for the draft over the resolved time window. */
@@ -62,8 +63,6 @@ export interface UsePanelEditSessionReturn {
 	buildSaveSpec: (
 		spec: DashboardtypesPanelSpecDTO,
 	) => DashboardtypesPanelSpecDTO;
-	/** Switch the draft's visualization kind in place (reversible per session). */
-	onChangePanelKind: (kind: PanelKind) => void;
 }
 
 /**
@@ -80,15 +79,18 @@ export function usePanelEditSession({
 	time,
 	alwaysSerializeQuery = false,
 	seedQuerySignal = false,
+	draftApi,
 }: UsePanelEditSessionArgs): UsePanelEditSessionReturn {
-	const { draft, spec, setSpec, isSpecDirty, reset } = usePanelEditorDraft(
-		panel,
-		savedPanel,
-	);
+	// 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 panelKind = draft.spec.plugin.kind;
-	const panelDefinition = getPanelDefinition(panelKind);
-	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
+	// 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 defaultSignal = panelDefinition.supportedSignals[0];
 
 	const query = usePanelQuery({
@@ -109,12 +111,6 @@ export function usePanelEditSession({
 		savedQueries: savedPanel?.spec.queries,
 	});
 
-	const { onChangePanelKind } = usePanelTypeSwitch({
-		spec: draft.spec,
-		panelType,
-		setSpec,
-	});
-
 	return {
 		draft,
 		spec,
@@ -128,6 +124,5 @@ export function usePanelEditSession({
 		runQuery,
 		isQueryDirty,
 		buildSaveSpec,
-		onChangePanelKind,
 	};
 }

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

@@ -18,9 +18,12 @@ import type {
 	Query,
 } from 'types/api/queryBuilder/queryBuilderData';
 
-import { resolveQueryType } from '../../Panels/capabilities';
 import {
-	PANEL_KIND_TO_PANEL_TYPE,
+	isQuerylessPanelKind,
+	resolveQueryType,
+} from '../../Panels/capabilities';
+import {
+	toLegacyPanelType,
 	type PanelKind,
 } from '../../Panels/types/panelKind';
 import { getBuilderQueries } from '../../Panels/utils/getBuilderQueries';
@@ -110,7 +113,7 @@ export function usePanelTypeSwitch({
 				builderQuery: query,
 			});
 
-			const newPanelType = PANEL_KIND_TO_PANEL_TYPE[newKind];
+			const newPanelType = toLegacyPanelType(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
@@ -128,11 +131,25 @@ export function usePanelTypeSwitch({
 				queries,
 			});
 
-			// Revisit → restore the stash verbatim (the reversibility path).
+			// 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.
 			const cached = cacheRef.current.get(newKind);
 			if (cached) {
 				setSpec(buildSpec(cached.pluginSpec, cached.queries));
-				redirectWithQueryBuilderData(cached.builderQuery);
+				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), []));
 				return;
 			}
 

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

@@ -1,56 +1,13 @@
-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 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 { 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';
+import QueryEditorBody from './QueryEditorBody';
+import StaticEditorBody from './StaticEditorBody';
+import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
+import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
 
-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 {
+export interface PanelEditorContainerProps {
 	dashboardId: string;
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
@@ -74,293 +31,42 @@ interface PanelEditorContainerProps {
 }
 
 /**
- * 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.
+ * 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.
  */
-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;
+function PanelEditorContainer(props: PanelEditorContainerProps): JSX.Element {
+	const { panel, savedPanel } = props;
+	const draftApi = usePanelEditorDraft(panel, savedPanel);
 
-	// 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 panelKind = draftApi.draft.spec.plugin.kind;
+	const panelDefinition = getPanelDefinition(panelKind);
+
+	const { onChangePanelKind } = usePanelTypeSwitch({
+		spec: draftApi.draft.spec,
+		panelType: toLegacyPanelType(panelKind),
+		setSpec: draftApi.setSpec,
 	});
 
-	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,
+	if (panelDefinition.mode === 'static') {
+		return (
+			<StaticEditorBody
+				{...props}
+				draftApi={draftApi}
+				panelDefinition={panelDefinition}
+				onChangePanelKind={onChangePanelKind}
+			/>
 		);
-		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 (
-		<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>
+		<QueryEditorBody
+			{...props}
+			draftApi={draftApi}
+			panelDefinition={panelDefinition}
+			onChangePanelKind={onChangePanelKind}
+		/>
 	);
 }
 

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,7 +40,9 @@ export function parseNewPanelKind(
 		return null;
 	}
 	const kind = new URLSearchParams(search).get(PANEL_KIND_PARAM);
-	return kind && kind in PANEL_KIND_TO_PANEL_TYPE ? (kind as PanelKind) : null;
+	// 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;
 }
 
 /**

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

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

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

@@ -2,7 +2,11 @@ import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.sche
 import { EQueryType } from 'types/common/dashboard';
 
 import { getPanelDefinition } from './registry';
-import type { FilterConfigsPartial } from './types/panelCapabilities';
+import {
+	mergeQueryBuilderFieldRule,
+	type FilterConfigsPartial,
+} from './types/panelCapabilities';
+import type { RenderableQueryPanelDefinition } from './types/panelDefinition';
 import type { PanelKind } from './types/panelKind';
 
 /**
@@ -13,11 +17,46 @@ 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 getPanelDefinition(kind).supportedSignals;
+	return getQueryPanelDefinition(kind)?.supportedSignals ?? [];
 }
 
 export function isSignalSupported(
@@ -29,7 +68,7 @@ export function isSignalSupported(
 
 /** Query languages a kind supports (Query Builder / ClickHouse / PromQL). */
 export function getSupportedQueryTypes(kind: PanelKind): EQueryType[] {
-	return getPanelDefinition(kind).supportedQueryTypes;
+	return getQueryPanelDefinition(kind)?.supportedQueryTypes ?? [];
 }
 
 export function isQueryTypeSupportedByPanelKind(
@@ -53,6 +92,10 @@ 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;
 	}
@@ -73,7 +116,11 @@ export function resolveQueryType(
 	preferred: EQueryType,
 ): EQueryType {
 	const supported = getSupportedQueryTypes(kind);
-	return supported.includes(preferred) ? preferred : supported[0];
+	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;
 }
 
 /**
@@ -85,7 +132,6 @@ export function getHiddenQueryBuilderFields(
 	kind: PanelKind,
 	signal: TelemetrytypesSignalDTO,
 ): FilterConfigsPartial {
-	const rule = getPanelDefinition(kind).queryBuilderFields;
-	const perSignal = signal ? rule[signal] : undefined;
-	return { ...rule.default, ...perSignal };
+	const rule = getQueryPanelDefinition(kind)?.queryBuilderFields ?? {};
+	return mergeQueryBuilderFieldRule(rule, signal);
 }

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

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

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

@@ -1,4 +1,5 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
+import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -10,7 +11,9 @@ 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,

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

@@ -1,4 +1,5 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
+import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -10,7 +11,9 @@ 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,

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

@@ -0,0 +1,34 @@
+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,4 +1,5 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
+import ListEditorPane from './ListEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -11,7 +12,9 @@ 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,

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

@@ -1,4 +1,5 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
+import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -10,7 +11,9 @@ 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,

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

@@ -1,4 +1,5 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
+import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -10,7 +11,9 @@ 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,

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

@@ -1,4 +1,5 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
+import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 import { sections } from './sections';
 import {
@@ -10,7 +11,9 @@ 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,

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

@@ -0,0 +1,25 @@
+// 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

@@ -0,0 +1,69 @@
+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

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

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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,324 @@
+@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

@@ -0,0 +1,84 @@
+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;

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

@@ -0,0 +1,69 @@
+@use '../../../../../../styles/scrollbar' as *;
+
+.panel {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	padding: 8px 12px;
+	overflow: auto;
+	@include custom-scrollbar;
+}
+
+// Horizontal alignment inherits into the rendered body, which deliberately leaves
+// `text-align` alone so the panel can own it.
+.alignLeft {
+	text-align: left;
+}
+
+.alignCenter {
+	text-align: center;
+}
+
+.alignRight {
+	text-align: right;
+}
+
+// `text-align` moves only inline content: the table is a block box inside its
+// scroll wrapper and stays put, and list markers hang at the list's left edge.
+// (0,2,1) beats the body reset at (0,2,0); `list-style-position` goes on the
+// `li` directly because the body's `list-style` shorthand on `ul`/`ol` resets
+// the inherited position.
+.panel.alignRight table {
+	margin-left: auto;
+}
+
+.panel.alignCenter table {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.panel.alignRight li,
+.panel.alignCenter li {
+	list-style-position: inside;
+}
+
+.alignTop {
+	justify-content: flex-start;
+}
+
+// Auto margins, not `justify-content`: when the body overflows, an auto margin
+// resolves to zero so the content's top stays scrollable — `center`/`flex-end`
+// push the overflow above the scrollport, where no scroll position reaches it.
+// Specificity (0,3,0): the body root's `all: revert` reset sits at (0,2,0) and
+// would strip a tied margin rule.
+.panel.alignMiddle > *:first-child {
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+.panel.alignBottom > *:first-child {
+	margin-top: auto;
+}
+
+// Positioning context for the scroll-to-bottom pill floating over the body.
+.host {
+	position: relative;
+	height: 100%;
+	min-height: 0;
+}

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

@@ -0,0 +1,77 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import {
+	DashboardtypesTextAlignDTO,
+	DashboardtypesVerticalAlignDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { selectResolvedVariables } from 'pages/DashboardPage/DashboardContainer/store/slices/variableSelectionSlice';
+import { useDashboardStore } from 'pages/DashboardPage/DashboardContainer/store/useDashboardStore';
+
+import type { StaticRendererProps } from '../../types/rendererProps';
+import { interpolateVariables } from './interpolateVariables';
+import MarkdownContent from './MarkdownContent';
+import ScrollToBottomPill from './ScrollToBottomPill';
+import { useOverflowBelow } from './useOverflowBelow';
+
+import styles from './Renderer.module.scss';
+
+const HORIZONTAL_ALIGN_CLASS: Record<DashboardtypesTextAlignDTO, string> = {
+	[DashboardtypesTextAlignDTO.left]: styles.alignLeft,
+	[DashboardtypesTextAlignDTO.center]: styles.alignCenter,
+	[DashboardtypesTextAlignDTO.right]: styles.alignRight,
+};
+
+const VERTICAL_ALIGN_CLASS: Record<DashboardtypesVerticalAlignDTO, string> = {
+	[DashboardtypesVerticalAlignDTO.top]: styles.alignTop,
+	[DashboardtypesVerticalAlignDTO.center]: styles.alignMiddle,
+	[DashboardtypesVerticalAlignDTO.bottom]: styles.alignBottom,
+};
+
+/**
+ * Renders the panel's own Markdown body. The first kind that issues no query, so it
+ * reads nothing from `data` and has no loading or error state — malformed Markdown
+ * renders as literal text rather than throwing.
+ */
+function Renderer({
+	panel,
+	dashboardId,
+}: StaticRendererProps<'signoz/TextPanel'>): JSX.Element {
+	const { text, presentation } = panel.spec.plugin.spec;
+
+	const variables = useDashboardStore(
+		selectResolvedVariables(dashboardId ?? ''),
+	);
+
+	// Interpolate and parse together: a dashboard re-renders on every variable tick,
+	// and re-parsing every text panel on each one is the cost worth avoiding.
+	const body = useMemo(
+		() => interpolateVariables(text ?? '', variables),
+		[text, variables],
+	);
+
+	const { scrollRef, hasMoreBelow, scrollToBottom } =
+		useOverflowBelow<HTMLDivElement>();
+
+	return (
+		<div className={styles.host}>
+			<div
+				ref={scrollRef}
+				className={cx(
+					styles.panel,
+					HORIZONTAL_ALIGN_CLASS[
+						presentation?.textAlign ?? DashboardtypesTextAlignDTO.left
+					],
+					VERTICAL_ALIGN_CLASS[
+						presentation?.verticalAlign ?? DashboardtypesVerticalAlignDTO.top
+					],
+				)}
+				data-testid="text-panel"
+			>
+				<MarkdownContent>{body}</MarkdownContent>
+			</div>
+			{hasMoreBelow && <ScrollToBottomPill onClick={scrollToBottom} />}
+		</div>
+	);
+}
+
+export default Renderer;

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

@@ -0,0 +1,37 @@
+.pill {
+	all: unset;
+	position: absolute;
+	bottom: 8px;
+	left: 50%;
+	transform: translateX(-50%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	padding: 4px 12px 4px 10px;
+	background-color: var(--l1-border);
+	border-radius: 20px;
+	cursor: pointer;
+	transition: background-color 0.1s;
+	color: var(--l2-foreground);
+
+	span {
+		font-size: 12px;
+		line-height: 18px;
+		color: var(--l2-foreground);
+	}
+
+	svg {
+		animation: scroll-pill-pulse 1s infinite;
+	}
+}
+
+@keyframes scroll-pill-pulse {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+}

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

@@ -0,0 +1,26 @@
+import { ChevronsDown } from '@signozhq/icons';
+
+import styles from './ScrollToBottomPill.module.scss';
+
+interface ScrollToBottomPillProps {
+	onClick: () => void;
+}
+
+/**
+ * Floating affordance signalling content below the fold; click jumps to the end.
+ */
+function ScrollToBottomPill({ onClick }: ScrollToBottomPillProps): JSX.Element {
+	return (
+		<button
+			type="button"
+			className={styles.pill}
+			onClick={onClick}
+			data-testid="text-panel-scroll-more"
+		>
+			<ChevronsDown size={14} />
+			<span>Scroll for more</span>
+		</button>
+	);
+}
+
+export default ScrollToBottomPill;

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

@@ -0,0 +1,201 @@
+import { render, screen, waitFor } from 'tests/test-utils';
+
+import MarkdownContent from '../MarkdownContent';
+import { loadLanguage } from '../syntaxLanguages';
+
+describe('MarkdownContent', () => {
+	describe('security', () => {
+		it('renders a script tag as literal text, never as an element', () => {
+			const { container } = render(
+				<MarkdownContent>{'<script>alert(1)</script>'}</MarkdownContent>,
+			);
+
+			expect(container.querySelector('script')).toBeNull();
+			expect(screen.getByTestId('markdown-content')).toHaveTextContent(
+				'<script>alert(1)</script>',
+			);
+		});
+
+		it('renders raw HTML as text rather than markup', () => {
+			const { container } = render(
+				<MarkdownContent>{'<b>bold</b> and <img src="x" onerror="alert(1)">'}</MarkdownContent>,
+			);
+
+			expect(container.querySelector('b')).toBeNull();
+			expect(container.querySelector('img')).toBeNull();
+			expect(screen.getByTestId('markdown-content')).toHaveTextContent(
+				'<b>bold</b>',
+			);
+		});
+
+		it('drops the anchor for a javascript: href, keeping the label as text', () => {
+			const { container } = render(
+				<MarkdownContent>{'[x](javascript:alert(1))'}</MarkdownContent>,
+			);
+
+			expect(screen.queryByRole('link')).not.toBeInTheDocument();
+			expect(container.innerHTML).not.toContain('javascript');
+			expect(screen.getByTestId('markdown-content')).toHaveTextContent('x');
+		});
+
+		it('opens links in a new tab without handing over the opener', () => {
+			render(<MarkdownContent>{'[docs](https://signoz.io)'}</MarkdownContent>);
+
+			const link = screen.getByRole('link', { name: 'docs' });
+			expect(link).toHaveAttribute('href', 'https://signoz.io');
+			expect(link).toHaveAttribute('target', '_blank');
+			expect(link).toHaveAttribute('rel', 'noopener noreferrer nofollow');
+		});
+	});
+
+	describe('CommonMark and GFM', () => {
+		it('renders headings, lists and emphasis', () => {
+			render(
+				<MarkdownContent>
+					{'# Runbook\n\n- **owner** payments\n- _rotation_ weekly'}
+				</MarkdownContent>,
+			);
+
+			expect(
+				screen.getByRole('heading', { level: 1, name: 'Runbook' }),
+			).toBeInTheDocument();
+			expect(screen.getAllByRole('listitem')).toHaveLength(2);
+			expect(screen.getByText('owner').tagName).toBe('STRONG');
+			expect(screen.getByText('rotation').tagName).toBe('EM');
+		});
+
+		it('renders GFM tables, task lists and strikethrough', () => {
+			const { container } = render(
+				<MarkdownContent>
+					{'| a | b |\n| --- | --- |\n| 1 | 2 |\n\n- [x] done\n\n~~gone~~'}
+				</MarkdownContent>,
+			);
+
+			expect(screen.getByRole('table')).toBeInTheDocument();
+			expect(screen.getByRole('checkbox')).toBeChecked();
+			expect(container.querySelector('del')).toHaveTextContent('gone');
+		});
+
+		it('renders fenced code as a preformatted block', () => {
+			const { container } = render(
+				<MarkdownContent>{'```sh\nkubectl get pods\n```'}</MarkdownContent>,
+			);
+
+			expect(container.querySelector('pre code')).toHaveTextContent(
+				'kubectl get pods',
+			);
+			expect(container.querySelectorAll('pre')).toHaveLength(1);
+		});
+
+		it('renders malformed markdown as literal text instead of throwing', () => {
+			render(<MarkdownContent>{'| broken | table\n**unclosed'}</MarkdownContent>);
+
+			expect(screen.getByTestId('markdown-content')).toHaveTextContent(
+				'**unclosed',
+			);
+		});
+	});
+
+	describe('syntax highlighting', () => {
+		it('tokenises a fenced block once its language has loaded', async () => {
+			const { container } = render(
+				<MarkdownContent>{'```js\nconst x = 1; // note\n```'}</MarkdownContent>,
+			);
+
+			await waitFor(() => {
+				expect(container.querySelector('.token.keyword')).toHaveTextContent('const');
+			});
+			expect(container.querySelector('.token.number')).toHaveTextContent('1');
+			expect(container.querySelector('.token.comment')).toHaveTextContent('// note');
+		});
+
+		it('shows the source verbatim while the language is still loading', () => {
+			const { container } = render(
+				<MarkdownContent>{'```rust\nfn main() {}\n```'}</MarkdownContent>,
+			);
+
+			expect(container.querySelector('pre code')).toHaveTextContent('fn main() {}');
+			expect(container.querySelector('.token')).toBeNull();
+		});
+
+		it('highlights a language already loaded on the first render', async () => {
+			await loadLanguage('sql');
+			const { container } = render(
+				<MarkdownContent>{'```sql\nSELECT 1\n```'}</MarkdownContent>,
+			);
+
+			expect(container.querySelector('.token.keyword')).toHaveTextContent('SELECT');
+		});
+
+		it('tags the code element with the language', () => {
+			const { container } = render(
+				<MarkdownContent>{'```python\nx = 1\n```'}</MarkdownContent>,
+			);
+
+			expect(container.querySelector('code')).toHaveClass('language-python');
+		});
+
+		it('renders an unknown language verbatim', () => {
+			const { container } = render(
+				<MarkdownContent>{'```promql\nrate(foo[5m])\n```'}</MarkdownContent>,
+			);
+
+			expect(container.querySelector('pre code')).toHaveTextContent('rate(foo[5m])');
+			expect(container.querySelector('.token')).toBeNull();
+		});
+
+		it('renders a fence with no language verbatim', () => {
+			const { container } = render(
+				<MarkdownContent>{'```\nplain text\n```'}</MarkdownContent>,
+			);
+
+			expect(container.querySelector('pre code')).toHaveTextContent('plain text');
+			expect(container.querySelector('.token')).toBeNull();
+		});
+
+		it('leaves inline code untokenised', () => {
+			const { container } = render(
+				<MarkdownContent>{'use `const` here'}</MarkdownContent>,
+			);
+
+			expect(container.querySelector('pre')).toBeNull();
+			expect(container.querySelector('.token')).toBeNull();
+		});
+	});
+
+	describe('empty body', () => {
+		it('renders nothing when the source is blank', () => {
+			const { container } = render(<MarkdownContent>{'   \n  '}</MarkdownContent>);
+
+			expect(container).toBeEmptyDOMElement();
+		});
+
+		it('renders the empty state when one is supplied', () => {
+			render(
+				<MarkdownContent emptyState={<span>Nothing here yet</span>}>
+					{''}
+				</MarkdownContent>,
+			);
+
+			expect(screen.getByText('Nothing here yet')).toBeInTheDocument();
+			expect(screen.queryByTestId('markdown-content')).not.toBeInTheDocument();
+		});
+	});
+});
+
+describe('code block copy button', () => {
+	it('offers the block source, exactly as fenced, to the copy control', () => {
+		render(<MarkdownContent>{'```sh\nkubectl get pods\n```'}</MarkdownContent>);
+
+		const button = screen.getByTestId('text-panel-copy-code');
+		expect(button).toHaveAccessibleName('Copy code');
+	});
+
+	it('renders no copy control on inline code', () => {
+		render(<MarkdownContent>{'run `npm i` now'}</MarkdownContent>);
+
+		expect(
+			screen.queryByTestId('text-panel-copy-code'),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/__tests__/Renderer.scrollPill.test.tsx

@@ -0,0 +1,81 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import type { PanelOfKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/rendererProps';
+import { PanelMode } from 'lib/visualization/panels/types';
+
+import Renderer from '../Renderer';
+
+const panel = {
+	kind: 'Panel',
+	spec: {
+		display: { name: 'Runbook' },
+		plugin: { kind: 'signoz/TextPanel', spec: { text: '# hello' } },
+		queries: [],
+	},
+} as unknown as PanelOfKind<'signoz/TextPanel'>;
+
+/** jsdom has no layout: stub the scroll geometry the hook reads. */
+function setScrollGeometry(
+	el: HTMLElement,
+	{ scrollHeight, clientHeight }: { scrollHeight: number; clientHeight: number },
+): void {
+	Object.defineProperty(el, 'scrollHeight', {
+		configurable: true,
+		value: scrollHeight,
+	});
+	Object.defineProperty(el, 'clientHeight', {
+		configurable: true,
+		value: clientHeight,
+	});
+}
+
+function renderPanel(): HTMLElement {
+	render(
+		<Renderer
+			panelId="p1"
+			panel={panel}
+			panelMode={PanelMode.DASHBOARD_VIEW}
+		/>,
+	);
+	return screen.getByTestId('text-panel');
+}
+
+describe('Text panel scroll-to-bottom pill', () => {
+	it('is absent when the body fits', () => {
+		const scroller = renderPanel();
+		setScrollGeometry(scroller, { scrollHeight: 100, clientHeight: 100 });
+		fireEvent.scroll(scroller);
+
+		expect(screen.queryByTestId('text-panel-scroll-more')).not.toBeInTheDocument();
+	});
+
+	it('appears when content extends below the fold and jumps to the end on click', () => {
+		const scroller = renderPanel();
+		setScrollGeometry(scroller, { scrollHeight: 400, clientHeight: 100 });
+		act(() => {
+			fireEvent.scroll(scroller);
+		});
+
+		const pill = screen.getByTestId('text-panel-scroll-more');
+		const scrollTo = jest.fn();
+		scroller.scrollTo = scrollTo;
+		fireEvent.click(pill);
+
+		expect(scrollTo).toHaveBeenCalledWith({ top: 400, behavior: 'smooth' });
+	});
+
+	it('hides once the user reaches the bottom', () => {
+		const scroller = renderPanel();
+		setScrollGeometry(scroller, { scrollHeight: 400, clientHeight: 100 });
+		act(() => {
+			fireEvent.scroll(scroller);
+		});
+		expect(screen.getByTestId('text-panel-scroll-more')).toBeInTheDocument();
+
+		scroller.scrollTop = 300;
+		act(() => {
+			fireEvent.scroll(scroller);
+		});
+
+		expect(screen.queryByTestId('text-panel-scroll-more')).not.toBeInTheDocument();
+	});
+});

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/__tests__/interpolateVariables.test.ts

@@ -0,0 +1,56 @@
+import { interpolateVariables } from '../interpolateVariables';
+
+const variables = {
+	env: { value: 'prod' },
+	service: { value: ['checkout', 'cart'] },
+	count: { value: 3 },
+};
+
+describe('interpolateVariables', () => {
+	it.each([
+		['{{env}}', 'prod'],
+		['{{.env}}', 'prod'],
+		['[[env]]', 'prod'],
+		['$env', 'prod'],
+	])('substitutes the %s syntax', (token, expected) => {
+		expect(interpolateVariables(`env is ${token}.`, variables)).toBe(
+			`env is ${expected}.`,
+		);
+	});
+
+	it('substitutes a dotted name in the $ syntax', () => {
+		const dotted = { 'service.name': { value: 'checkout' } };
+		expect(interpolateVariables('svc is $service.name.', dotted)).toBe(
+			'svc is checkout.',
+		);
+	});
+
+	it('leaves $__ macros alone', () => {
+		expect(interpolateVariables('every $__interval', variables)).toBe(
+			'every $__interval',
+		);
+	});
+
+	it('joins list values with a comma', () => {
+		expect(interpolateVariables('on {{service}}', variables)).toBe(
+			'on checkout, cart',
+		);
+	});
+
+	it('stringifies numeric values', () => {
+		expect(interpolateVariables('n={{count}}', variables)).toBe('n=3');
+	});
+
+	it('leaves an undefined variable as literal text', () => {
+		expect(interpolateVariables('see {{missing}} and $nope', variables)).toBe(
+			'see {{missing}} and $nope',
+		);
+	});
+
+	it('injects values as content, not markup boundaries', () => {
+		const hostile = { env: { value: '**bold** <script>x</script>' } };
+		expect(interpolateVariables('{{env}}', hostile)).toBe(
+			'**bold** <script>x</script>',
+		);
+	});
+});

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

@@ -0,0 +1,23 @@
+import type { PanelDefinition } from '../../types/panelDefinition';
+import EditorPane from './EditorPane';
+import Renderer from './Renderer';
+import { sections } from './sections';
+
+export const definition: PanelDefinition<'signoz/TextPanel'> = {
+	kind: 'signoz/TextPanel',
+	displayName: 'Text',
+	sections,
+	mode: 'static',
+	Renderer,
+	EditorPane,
+	actions: {
+		view: true,
+		edit: true,
+		clone: true,
+		// Nothing tabular or chart-like to export; the body is already the readable form.
+		download: { csv: false, png: false, svg: false },
+		createAlert: false,
+		search: false,
+		drilldown: false,
+	},
+};

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/interpolateVariables.ts

@@ -0,0 +1,51 @@
+import type { Querybuildertypesv5QueryRangeRequestDTOVariables } from 'api/generated/services/sigNoz.schemas';
+
+// The four syntaxes a dashboard body may carry. Group 1 covers `{{name}}` and
+// `{{.name}}`, group 2 `[[name]]`, group 3 `$name`. The `$` form takes dotted
+// names (`$service.name`) but not a trailing dot, so a sentence-ending period
+// stays prose; `$__…` macros are excluded, as in the query reference engine.
+const VARIABLE_PATTERN =
+	/\{\{\s*\.?([\w.-]+)\s*\}\}|\[\[\s*([\w.-]+)\s*\]\]|\$(?!__)([A-Za-z_]\w*(?:\.\w+)*)/g;
+
+// Variable values arrive as scalars or lists of them; anything else is not
+// something a reader would want spliced into prose.
+function formatValue(value: unknown): string | null {
+	if (Array.isArray(value)) {
+		return value.map((entry) => formatValue(entry) ?? '').join(', ');
+	}
+	if (typeof value === 'string') {
+		return value;
+	}
+	if (typeof value === 'number' || typeof value === 'boolean') {
+		return value.toString();
+	}
+	return null;
+}
+
+/**
+ * Substitutes dashboard variables into a Markdown body before it is parsed, so an
+ * injected value becomes Markdown *content* rather than markup — dynamic-variable
+ * values come from telemetry and are attacker-influenceable.
+ *
+ * An undefined variable is left as literal text, matching how queries treat one.
+ */
+export function interpolateVariables(
+	text: string,
+	variables: Querybuildertypesv5QueryRangeRequestDTOVariables | undefined,
+): string {
+	if (!text || !variables) {
+		return text;
+	}
+
+	return text.replace(
+		VARIABLE_PATTERN,
+		(match, braced?: string, bracketed?: string, dollar?: string): string => {
+			const name = braced ?? bracketed ?? dollar;
+			if (!name) {
+				return match;
+			}
+			const formatted = formatValue(variables[name]?.value);
+			return formatted ?? match;
+		},
+	);
+}

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

@@ -0,0 +1,13 @@
+import { SectionKind, type SectionConfig } from '../../types/sections';
+
+// No thresholds, legend, axes or formatting: there is no data to threshold, scale
+// or format. No context links either — they resolve against query fields at
+// click-time, and a text body has neither.
+export const sections: SectionConfig[] = [
+	{
+		kind: SectionKind.Visualization,
+		controls: { switchPanelKind: true },
+	},
+	{ kind: SectionKind.TextLayout },
+	{ kind: SectionKind.PanelHeader },
+];

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/syntaxLanguages.ts

@@ -0,0 +1,86 @@
+import { PrismLight } from 'react-syntax-highlighter';
+
+type PrismLanguage = Parameters<typeof PrismLight.registerLanguage>[1];
+type LanguageLoader = () => Promise<{ default: PrismLanguage }>;
+
+// One dynamic import per language, so each becomes its own chunk and a panel pays
+// only for the languages its fences actually name.
+const LOADERS: Record<string, LanguageLoader> = {
+	bash: () => import('react-syntax-highlighter/dist/esm/languages/prism/bash'),
+	css: () => import('react-syntax-highlighter/dist/esm/languages/prism/css'),
+	diff: () => import('react-syntax-highlighter/dist/esm/languages/prism/diff'),
+	docker: () => import('react-syntax-highlighter/dist/esm/languages/prism/docker'),
+	go: () => import('react-syntax-highlighter/dist/esm/languages/prism/go'),
+	java: () => import('react-syntax-highlighter/dist/esm/languages/prism/java'),
+	javascript: () =>
+		import('react-syntax-highlighter/dist/esm/languages/prism/javascript'),
+	json: () => import('react-syntax-highlighter/dist/esm/languages/prism/json'),
+	markup: () => import('react-syntax-highlighter/dist/esm/languages/prism/markup'),
+	python: () => import('react-syntax-highlighter/dist/esm/languages/prism/python'),
+	rust: () => import('react-syntax-highlighter/dist/esm/languages/prism/rust'),
+	sql: () => import('react-syntax-highlighter/dist/esm/languages/prism/sql'),
+	typescript: () =>
+		import('react-syntax-highlighter/dist/esm/languages/prism/typescript'),
+	yaml: () => import('react-syntax-highlighter/dist/esm/languages/prism/yaml'),
+};
+
+const ALIASES: Record<string, string> = {
+	dockerfile: 'docker',
+	html: 'markup',
+	js: 'javascript',
+	py: 'python',
+	sh: 'bash',
+	shell: 'bash',
+	ts: 'typescript',
+	xml: 'markup',
+	yml: 'yaml',
+};
+
+const registered = new Set<string>();
+const inFlight = new Map<string, Promise<boolean>>();
+
+/** The name Prism knows a fence's language by, or null if it knows none. */
+export function resolveLanguage(name: string): string | null {
+	const canonical = ALIASES[name] ?? name;
+	return canonical in LOADERS ? canonical : null;
+}
+
+export function isLanguageRegistered(name: string): boolean {
+	return registered.has(name);
+}
+
+/**
+ * Resolves to whether `name` is registered and ready to highlight with. Concurrent
+ * callers share one import, so a dashboard of same-language fences fetches once.
+ */
+export function loadLanguage(name: string): Promise<boolean> {
+	if (registered.has(name)) {
+		return Promise.resolve(true);
+	}
+
+	const pending = inFlight.get(name);
+	if (pending) {
+		return pending;
+	}
+
+	const loader = LOADERS[name];
+	if (!loader) {
+		return Promise.resolve(false);
+	}
+
+	const request = loader()
+		.then((module) => {
+			PrismLight.registerLanguage(name, module.default);
+			registered.add(name);
+			return true;
+		})
+		.catch(() => false)
+		.finally(() => {
+			inFlight.delete(name);
+		});
+
+	inFlight.set(name, request);
+	return request;
+}
+
+export default PrismLight;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/useOverflowBelow.ts

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

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/usePrismLanguage.ts

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

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

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

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

@@ -4,6 +4,7 @@ import {
 	NO_PANEL_ACTIONS,
 	type RenderablePanelDefinition,
 } from '../../types/panelDefinition';
+import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
 import Renderer from './Renderer';
 
 /**
@@ -18,7 +19,9 @@ import Renderer from './Renderer';
 export const UNSUPPORTED_PANEL: RenderablePanelDefinition = {
 	kind: '<unsupported>' as RenderablePanelDefinition['kind'],
 	displayName: 'Unsupported panel',
+	mode: 'query',
 	Renderer,
+	EditorPane: QueryBuilderEditorPane,
 	sections: [],
 	supportedSignals: [],
 	supportedQueryTypes: [],

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

@@ -5,6 +5,7 @@ import { definition as PieChart } from './kinds/PieChartPanel/definition';
 import { definition as TimeSeries } from './kinds/TimeSeriesPanel/definition';
 import { definition as Table } from './kinds/TablePanel/definition';
 import { definition as List } from './kinds/ListPanel/definition';
+import { definition as Text } from './kinds/TextPanel/definition';
 import { UNSUPPORTED_PANEL } from './kinds/UnsupportedPanel/definition';
 import type {
 	PanelRegistry,
@@ -21,6 +22,7 @@ export const PANELS: PanelRegistry = {
 	[PieChart.kind]: PieChart,
 	[Table.kind]: Table,
 	[List.kind]: List,
+	[Text.kind]: Text,
 };
 
 /**

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

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

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

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

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

@@ -8,7 +8,12 @@ import type { DashboardtypesPanelPluginKindDTO } from 'api/generated/services/si
  */
 export type PanelKind = `${DashboardtypesPanelPluginKindDTO}`;
 
-export const PANEL_KIND_TO_PANEL_TYPE: Record<PanelKind, PANEL_TYPES> = {
+/**
+ * Partial: a static kind has no legacy `PANEL_TYPES` counterpart — V1 never had
+ * one. V1-era query/alert/drilldown paths read {@link toLegacyPanelType}; new code
+ * reads this map directly, where the `undefined` is worth seeing.
+ */
+export const PANEL_KIND_TO_PANEL_TYPE: Partial<Record<PanelKind, PANEL_TYPES>> = {
 	'signoz/TimeSeriesPanel': PANEL_TYPES.TIME_SERIES,
 	'signoz/BarChartPanel': PANEL_TYPES.BAR,
 	'signoz/NumberPanel': PANEL_TYPES.VALUE,
@@ -18,6 +23,17 @@ export const PANEL_KIND_TO_PANEL_TYPE: Record<PanelKind, PANEL_TYPES> = {
 	'signoz/ListPanel': PANEL_TYPES.LIST,
 };
 
+/**
+ * The legacy `PANEL_TYPES` a kind maps to, for the V1-era query, alert and
+ * drilldown surfaces that still speak it. Every such path is gated on the kind's
+ * query arm or an action capability a static kind declares `false`, so the
+ * fallback is unreachable — it exists to keep those call sites total rather than
+ * have each invent its own.
+ */
+export function toLegacyPanelType(kind: PanelKind): PANEL_TYPES {
+	return PANEL_KIND_TO_PANEL_TYPE[kind] ?? PANEL_TYPES.TIME_SERIES;
+}
+
 /**
  * Reverse of {@link PANEL_KIND_TO_PANEL_TYPE} — the mapping is a bijection, so every
  * panel kind round-trips. Partial because `PANEL_TYPES` also has types with no V2 kind

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

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

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

@@ -3,12 +3,14 @@ import type {
 	DashboardtypesAxesDTO,
 	DashboardtypesBarChartVisualizationDTO,
 	DashboardtypesComparisonThresholdDTO,
+	DashboardtypesHeaderOptionsDTO,
 	DashboardtypesHistogramBucketsDTO,
 	DashboardtypesLegendDTO,
 	DashboardtypesPanelFormattingDTO,
 	DashboardtypesPanelSpecDTO,
 	DashboardtypesTableFormattingDTO,
 	DashboardtypesTableThresholdDTO,
+	DashboardtypesTextPresentationDTO,
 	DashboardtypesThresholdWithLabelDTO,
 	DashboardtypesTimeSeriesChartAppearanceDTO,
 	TelemetrytypesTelemetryFieldKeyDTO,
@@ -20,10 +22,12 @@ import {
 	Hash,
 	Link2,
 	Palette,
+	PanelTop,
 	PencilRuler,
 	Scale3D,
 	Signpost,
 	Wallpaper,
+	AlignLeft,
 } from '@signozhq/icons';
 
 // Derived from an actual icon component so the type stays exact (size is a
@@ -50,6 +54,8 @@ export enum SectionKind {
 	Thresholds = 'thresholds',
 	ContextLinks = 'contextLinks',
 	Columns = 'columns',
+	TextLayout = 'presentation',
+	PanelHeader = 'headerOptions',
 }
 
 /**
@@ -92,6 +98,8 @@ export interface SectionSpecMap {
 	[SectionKind.Thresholds]: AnyThreshold[]; // spec.plugin.spec.thresholds (variant picks the editor)
 	[SectionKind.ContextLinks]: DashboardtypesLinkDTO[]; // spec.links (PANEL-level)
 	[SectionKind.Columns]: TelemetrytypesTelemetryFieldKeyDTO[]; // spec.plugin.spec.selectFields (List)
+	[SectionKind.TextLayout]: DashboardtypesTextPresentationDTO; // spec.plugin.spec.presentation (Text)
+	[SectionKind.PanelHeader]: DashboardtypesHeaderOptionsDTO; // spec.plugin.spec.headerOptions (Text)
 }
 
 /**
@@ -134,7 +142,11 @@ export interface SectionControls {
 export type ControlledSectionKind = keyof SectionControls;
 
 /** Atomic sections — no sub-controls; a kind either shows them or not. */
-export type AtomicSectionKind = SectionKind.ContextLinks | SectionKind.Columns;
+export type AtomicSectionKind =
+	| SectionKind.ContextLinks
+	| SectionKind.Columns
+	| SectionKind.TextLayout
+	| SectionKind.PanelHeader;
 
 /** Predicate to hide a section from the current spec; returning true removes it. */
 export type SectionVisibilityPredicate = (
@@ -167,6 +179,8 @@ export const SECTION_METADATA = {
 	[SectionKind.Thresholds]: { title: 'Thresholds', icon: Antenna },
 	[SectionKind.ContextLinks]: { title: 'Context Links', icon: Link2 },
 	[SectionKind.Columns]: { title: 'Columns', icon: Columns3 },
+	[SectionKind.TextLayout]: { title: 'Text layout', icon: AlignLeft },
+	[SectionKind.PanelHeader]: { title: 'Panel header', icon: PanelTop },
 } as const satisfies Record<SectionKind, SectionMetadata>;
 
 /**

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

@@ -2,7 +2,7 @@ import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schem
 import { listViewInitialLogQuery } from 'constants/queryBuilder';
 
 import { toPerses } from '../../queryV5/persesQueryAdapters';
-import { PANEL_KIND_TO_PANEL_TYPE, type PanelKind } from '../types/panelKind';
+import { toLegacyPanelType, type PanelKind } from '../types/panelKind';
 
 /** Seed query for a new panel. Only a list panel needs one (logs, timestamp desc) so its
  * preview runs on open; other kinds start empty and seed from the builder. */
@@ -11,5 +11,5 @@ export function buildDefaultQueries(kind: PanelKind): DashboardtypesQueryDTO[] {
 		return [];
 	}
 	// `toPerses` pivots through the V1 `Query`, which is still keyed by panel type.
-	return toPerses(listViewInitialLogQuery, PANEL_KIND_TO_PANEL_TYPE[kind]);
+	return toPerses(listViewInitialLogQuery, toLegacyPanelType(kind));
 }

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

@@ -4,9 +4,12 @@ import {
 	DashboardtypesLegendPositionDTO,
 	DashboardtypesLineInterpolationDTO,
 	DashboardtypesLineStyleDTO,
+	DashboardtypesPanelBackgroundDTO,
 	type DashboardtypesPanelSpecDTO,
 	DashboardtypesThresholdFormatDTO,
+	DashboardtypesTextAlignDTO,
 	DashboardtypesTimePreferenceDTO,
+	DashboardtypesVerticalAlignDTO,
 	type TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
@@ -35,6 +38,10 @@ export interface SeededPluginSpec {
 	>;
 	selectFields?: SectionSpecMap[SectionKind.Columns];
 	thresholds?: AnyThreshold[];
+	presentation?: SectionSpecMap[SectionKind.TextLayout];
+	headerOptions?: SectionSpecMap[SectionKind.PanelHeader];
+	/** Text panel body. Not a config section — the editor's main pane owns it. */
+	text?: string;
 }
 
 export interface SeedContext {
@@ -114,6 +121,33 @@ function isEmptySlice(value: object): boolean {
 }
 
 const SECTION_SEEDS: SectionSeeds = {
+	[SectionKind.TextLayout]: {
+		specKey: 'presentation',
+		// Explicit defaults (not the API's implicit ones) so the alignment controls
+		// open on a value, and the body carries across a kind switch and back.
+		seed: (
+			_controls,
+			{ oldPluginSpec },
+		): SectionSpecMap[SectionKind.TextLayout] => ({
+			textAlign:
+				oldPluginSpec?.presentation?.textAlign ?? DashboardtypesTextAlignDTO.left,
+			verticalAlign:
+				oldPluginSpec?.presentation?.verticalAlign ??
+				DashboardtypesVerticalAlignDTO.top,
+			background:
+				oldPluginSpec?.presentation?.background ??
+				DashboardtypesPanelBackgroundDTO.solid,
+		}),
+	},
+	[SectionKind.PanelHeader]: {
+		specKey: 'headerOptions',
+		// Only an active opt-out carries; absent = show (the API's zero value).
+		seed: (
+			_controls,
+			{ oldPluginSpec },
+		): SectionSpecMap[SectionKind.PanelHeader] =>
+			oldPluginSpec?.headerOptions?.hide ? { hide: true } : {},
+	},
 	[SectionKind.Visualization]: {
 		specKey: 'visualization',
 		seed: (

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

@@ -2,8 +2,8 @@ import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schem
 import { initialQueriesMap } from 'constants/queryBuilder';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
-import { getPanelDefinition } from '../registry';
-import { PANEL_KIND_TO_PANEL_TYPE } from '../types/panelKind';
+import { getSupportedSignals } from '../capabilities';
+import { toLegacyPanelType } from '../types/panelKind';
 import { fromPerses } from '../../queryV5/persesQueryAdapters';
 
 /**
@@ -13,11 +13,11 @@ import { fromPerses } from '../../queryV5/persesQueryAdapters';
  */
 export function getPanelBuilderQuery(panel: DashboardtypesPanelDTO): Query {
 	const kind = panel.spec.plugin.kind;
-	const [defaultSignal] = getPanelDefinition(kind).supportedSignals;
+	const [defaultSignal] = getSupportedSignals(kind);
 	// A query-less panel seeds from the kind's first supported signal — `fromPerses`'s
 	// metrics default isn't authorable in every kind (e.g. List).
 	if (panel.spec.queries.length === 0 && defaultSignal) {
 		return initialQueriesMap[defaultSignal];
 	}
-	return fromPerses(panel.spec.queries, PANEL_KIND_TO_PANEL_TYPE[kind]);
+	return fromPerses(panel.spec.queries, toLegacyPanelType(kind));
 }

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

@@ -0,0 +1,17 @@
+import type {
+	DashboardtypesHeaderOptionsDTO,
+	DashboardtypesPanelSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Whether the panel opted out of its header strip (`headerOptions.hide`) —
+ * one localized cast over the plugin-spec union, as `isTransparentPanel`.
+ */
+export function isPanelHeaderHidden(spec: DashboardtypesPanelSpecDTO): boolean {
+	const headerOptions = (
+		spec.plugin.spec as {
+			headerOptions?: DashboardtypesHeaderOptionsDTO;
+		}
+	).headerOptions;
+	return headerOptions?.hide === true;
+}

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

@@ -0,0 +1,20 @@
+import {
+	DashboardtypesPanelBackgroundDTO,
+	type DashboardtypesPanelSpecDTO,
+	type DashboardtypesTextPresentationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Whether the panel opted out of its card chrome (TDD D7). The card is an
+ * ancestor of the renderer, so hosts read this one plugin-spec field — the
+ * accepted smell; the union can't be narrowed by a dynamic kind, hence one
+ * localized cast for every host.
+ */
+export function isTransparentPanel(spec: DashboardtypesPanelSpecDTO): boolean {
+	const presentation = (spec.plugin.spec as {
+		presentation?: DashboardtypesTextPresentationDTO;
+	}).presentation;
+	return (
+		presentation?.background === DashboardtypesPanelBackgroundDTO.transparent
+	);
+}

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

@@ -1,4 +1,5 @@
 .panel {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
@@ -8,3 +9,50 @@
 	border-radius: 4px;
 	overflow: hidden;
 }
+
+// `headerOptions.hide`: hover floats in the drag pill + actions menu, so a
+// headerless panel can still be moved and edited.
+.hiddenHeaderControls {
+	position: absolute;
+	inset: 0 0 auto;
+	z-index: 2;
+	height: 36px;
+	display: flex;
+	align-items: flex-start;
+	justify-content: center;
+	padding-top: 8px;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.15s ease;
+	background: linear-gradient(to bottom, var(--l2-background), transparent);
+}
+
+// The open-menu case: the dropdown is a portal, so hovering it un-hovers the
+// panel — without this the trigger fades while its menu stays up.
+.panel:hover .hiddenHeaderControls,
+.hiddenHeaderControls:focus-within,
+.hiddenHeaderControls:has([data-state='open']) {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.dragPill {
+	width: 64px;
+	height: 6px;
+	border-radius: 999px;
+	background: var(--l2-border);
+	cursor: grab;
+}
+
+.floatingActions {
+	position: absolute;
+	top: 4px;
+	right: 8px;
+}
+
+// D7: a static kind may drop the card so its body sits on the dashboard canvas
+// (section headers). Chrome only — hover actions in the header stay reachable.
+.transparent {
+	background: transparent;
+	border-color: transparent;
+}

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

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

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

@@ -14,7 +14,7 @@ interface PanelActionsMenuProps {
 	/** The panel itself — seeds "Create Alerts" and the download filename. */
 	panel: DashboardtypesPanelDTO;
 	/** The panel's query response — the source for "Download as CSV". */
-	data: PanelQueryData;
+	data?: PanelQueryData;
 	/** Layout context for move/delete — absent outside editable sectioned mode. */
 	panelActions?: PanelActionsConfig;
 }

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

@@ -42,7 +42,7 @@ interface UsePanelActionItemsArgs {
 	/** The panel itself — seeds "Create Alerts" and the download filename. */
 	panel: DashboardtypesPanelDTO;
 	/** The panel's query response — the source for "Download as CSV". */
-	data: PanelQueryData;
+	data?: PanelQueryData;
 	/** Layout context for move/delete — absent outside editable mode. */
 	panelActions?: PanelActionsConfig;
 }

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

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

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

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

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

@@ -8,6 +8,11 @@
 	min-height: 32px;
 }
 
+// D7: when the panel drops its card chrome, the header's divider goes with it.
+.transparent {
+	border-bottom-color: transparent;
+}
+
 .headerLeft {
 	display: flex;
 	align-items: center;

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

@@ -9,6 +9,8 @@ import cx from 'classnames';
 import type { PanelTimePreferenceLabel } from 'pages/DashboardPage/DashboardContainer/hooks/resolvePanelTimeWindow';
 import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 
+import { isTransparentPanel } from 'pages/DashboardPage/DashboardContainer/Panels/utils/isTransparentPanel';
+
 import type { PanelActionsConfig } from '../Panel';
 import PanelActionsMenu from '../PanelActionsMenu/PanelActionsMenu';
 import PanelHeaderSearch from './PanelHeaderSearch';
@@ -21,10 +23,22 @@ import {
 import styles from './PanelHeader.module.scss';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 
-interface PanelHeaderProps {
+interface PanelHeaderBaseProps {
 	panelId: string;
 	/** The panel itself — its query seeds the menu's "Create Alerts" action. */
 	panel: DashboardtypesPanelDTO;
+	/** Layout context for move/delete — absent outside editable sectioned mode. */
+	panelActions?: PanelActionsConfig;
+	/**
+	 * Suppress the actions menu entirely — for the editor preview, where
+	 * panel-level actions don't apply (some survive their gates without
+	 * `panelActions`, so omitting it isn't enough).
+	 */
+	hideActions?: boolean;
+}
+
+interface QueryPanelHeaderProps extends PanelHeaderBaseProps {
+	mode: 'query';
 	/** The panel's query response — the menu's source for "Download as CSV". */
 	data: PanelQueryData;
 	/** Background refresh in flight — shows a spinner without blinking the chart. */
@@ -35,44 +49,35 @@ interface PanelHeaderProps {
 	warning?: WarningDTO;
 	/** Per-panel time-preference label; null when it follows the dashboard window. */
 	timeLabel?: PanelTimePreferenceLabel | null;
-	/** Layout context for move/delete — absent outside editable sectioned mode. */
-	panelActions?: PanelActionsConfig;
 	/** Kind declares header search — renders the box. */
 	searchable?: boolean;
 	/** Current search term; shell owns it, the renderer applies the filter. */
 	searchTerm?: string;
 	/** Pushes a new search term up to the shell. */
 	onSearchChange?: (value: string) => void;
-	/**
-	 * Suppress the actions menu entirely — for the editor preview, where
-	 * panel-level actions don't apply (some survive their gates without
-	 * `panelActions`, so omitting it isn't enough).
-	 */
-	hideActions?: boolean;
 }
 
+interface StaticPanelHeaderProps extends PanelHeaderBaseProps {
+	mode: 'static';
+}
+
+type PanelHeaderProps = QueryPanelHeaderProps | StaticPanelHeaderProps;
+
 /** Panel chrome: drag handle, title, refetch + status indicators, actions. */
-function PanelHeader({
-	panelId,
-	panel,
-	data,
-	isFetching,
-	error,
-	warning,
-	timeLabel,
-	panelActions,
-	searchable,
-	searchTerm = '',
-	onSearchChange,
-	hideActions,
-}: PanelHeaderProps): JSX.Element {
+function PanelHeader(props: PanelHeaderProps): JSX.Element {
+	const { panelId, panel, panelActions, hideActions } = props;
+	const query = props.mode === 'query' ? props : null;
+
 	const name = panel.spec.display.name;
 	const description = panel.spec.display.description;
-	const errorDetail = useMemo(() => panelStatusFromError(error), [error]);
+	const errorDetail = useMemo(
+		() => panelStatusFromError(query?.error),
+		[query?.error],
+	);
 
 	const warningDetail = useMemo(
-		() => panelStatusFromWarning(warning),
-		[warning],
+		() => panelStatusFromWarning(query?.warning),
+		[query?.warning],
 	);
 
 	// Client-derived: warn a Number panel that has more than one enabled query (#9512).
@@ -97,7 +102,11 @@ function PanelHeader({
 	}
 
 	return (
-		<div className={cx(styles.header, 'panel-drag-handle')}>
+		<div
+			className={cx(styles.header, 'panel-drag-handle', {
+				[styles.transparent]: isTransparentPanel(panel.spec),
+			})}
+		>
 			<div className={styles.headerLeft}>
 				<Typography.Text className={styles.headerTitle}>{name}</Typography.Text>
 				{description && (
@@ -113,7 +122,7 @@ function PanelHeader({
 						/>
 					</TooltipSimple>
 				)}
-				{isFetching && (
+				{query?.isFetching && (
 					<Loader
 						size={12}
 						className={cx('animate-spin', styles.refetchIndicator)}
@@ -124,13 +133,16 @@ function PanelHeader({
 			{/* `panel-no-drag` opts this region out of the drag handle so clicks hit
 			    the controls instead of starting a panel drag. */}
 			<div className={cx('panel-no-drag', styles.actions)}>
-				{searchable && onSearchChange && (
-					<PanelHeaderSearch value={searchTerm ?? ''} onChange={onSearchChange} />
+				{query?.searchable && query.onSearchChange && (
+					<PanelHeaderSearch
+						value={query.searchTerm ?? ''}
+						onChange={query.onSearchChange}
+					/>
 				)}
-				{timeLabel && (
-					<TooltipSimple title={timeLabel.full} arrow>
+				{query?.timeLabel && (
+					<TooltipSimple title={query.timeLabel.full} arrow>
 						<span className={styles.timePill} data-testid="panel-time-preference">
-							{timeLabel.short}
+							{query.timeLabel.short}
 						</span>
 					</TooltipSimple>
 				)}
@@ -150,7 +162,7 @@ function PanelHeader({
 					<PanelActionsMenu
 						panelId={panelId}
 						panel={panel}
-						data={data}
+						data={query?.data}
 						panelActions={panelActions}
 					/>
 				)}

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

@@ -5,6 +5,7 @@ import {
 	Hash,
 	List,
 	Table,
+	Type,
 } from '@signozhq/icons';
 
 import type { PanelType } from './types';
@@ -21,4 +22,5 @@ export const PANEL_TYPES: PanelType[] = [
 	{ panelKind: 'signoz/PieChartPanel', label: 'Pie Chart', Icon: ChartPie },
 	{ panelKind: 'signoz/HistogramPanel', label: 'Histogram', Icon: BarChart },
 	{ panelKind: 'signoz/ListPanel', label: 'List', Icon: List },
+	{ panelKind: 'signoz/TextPanel', label: 'Text', Icon: Type },
 ];