fix: regen api spec

#### Description
- first slice of saved views in the quick filters sidebar..
`QuickFiltersLayout` gets a `savedViewProps` next to `quickFilterProps`,
both optional. views header sits above the filters, `≡` opens an All
views panel in the sidebar's place and the filters slide right over the
content as one drawer. nothing remounts, so expanded sections and an
open settings drawer survive the toggle.
- header and panel are placeholders for now (dummy name, empty list)..
this PR is the layout, the real header / list / actions come on top of
it. behind `SAVED_VIEW_ENABLED`, flag off is today's ui.
- metrics has no quick filters, so it gets the layout with only the
views side.. header on top, list always visible, nothing slides.
- logs explorer moved onto `QuickFiltersLayout`.. it was the last one
mounting quick filters on its own. content wrapper now hands a definite
height down so logs can keep sizing its list from the pane instead of
`calc(100vh - ..)`.
- quick filters settings drawer animates with transform instead of
width.. width relaid out the drawer every frame, that was the jitter.
clipped so it comes out from behind the filters.

#### Issues closed by this PR

Part of https://github.com/SigNoz/events-pod/issues/71


#### Screenshots/ Screen recording 

<img width="1728" height="1001" alt="12994 - metrics dummy section"
src="https://github.com/user-attachments/assets/7a57fd43-a11b-44e7-a8ca-4b197826bd36"
/>


https://github.com/user-attachments/assets/fd6a4ac4-6464-4059-9986-99d42e159a3d




#### Additional Information
- flag off checked on logs / traces / metrics / exceptions.. sidebar,
list scroll and pane scroll same as before.
- borders and l1 background per figma, quick filters width still 280px..
will take that up with design.
- cc. @H4ad since `QuickFiltersLayout` is from the scroll fix PR.

docs/api/openapi.yml

@@ -3367,6 +3367,69 @@ components:
         repeatVariable:
           type: string
       type: object
+    DashboardtypesAIBuilderQuerySpec:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5TraceAggregation'
+          nullable: true
+          type: array
+        bucketOptions:
+          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
+        cursor:
+          type: string
+        disabled:
+          type: boolean
+        filter:
+          $ref: '#/components/schemas/Querybuildertypesv5Filter'
+        functions:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5Function'
+          nullable: true
+          type: array
+        groupBy:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
+          nullable: true
+          type: array
+        having:
+          $ref: '#/components/schemas/Querybuildertypesv5Having'
+        legend:
+          type: string
+        limit:
+          type: integer
+        limitBy:
+          $ref: '#/components/schemas/Querybuildertypesv5LimitBy'
+        name:
+          type: string
+        offset:
+          type: integer
+        order:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+          nullable: true
+          type: array
+        secondaryAggregations:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
+          nullable: true
+          type: array
+        selectFields:
+          items:
+            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          nullable: true
+          type: array
+        signal:
+          enum:
+          - traces
+          type: string
+        source:
+          $ref: '#/components/schemas/TelemetrytypesSource'
+        stepInterval:
+          $ref: '#/components/schemas/Querybuildertypesv5Step'
+      required:
+      - signal
+      type: object
     DashboardtypesAreaChartAppearance:
       properties:
         fillMode:
@@ -4420,6 +4483,7 @@ components:
     DashboardtypesQueryPlugin:
       discriminator:
         mapping:
+          signoz/AIBuilderQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec'
           signoz/BuilderQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
           signoz/ClickHouseSQL: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5ClickHouseQuery'
           signoz/CompositeQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery'
@@ -4429,6 +4493,7 @@ components:
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
+      - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderFormula'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQuery'
@@ -4438,12 +4503,25 @@ components:
     DashboardtypesQueryPluginKind:
       enum:
       - signoz/BuilderQuery
+      - signoz/AIBuilderQuery
       - signoz/CompositeQuery
       - signoz/Formula
       - signoz/PromQLQuery
       - signoz/ClickHouseSQL
       - signoz/TraceOperator
       type: string
+    DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec:
+      properties:
+        kind:
+          enum:
+          - signoz/AIBuilderQuery
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesAIBuilderQuerySpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec:
       properties:
         kind:

frontend/scripts/story-shots.mjs

@@ -417,7 +417,7 @@ for (const theme of themes.length ? themes : [null]) {
 						break;
 					}
 
-					height = needed;
+					height = Math.ceil(needed);
 					await page.setViewportSize({ width: Number(opts.width), height });
 					await page.waitForTimeout(Number(opts.settle));
 				}

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -12,6 +12,7 @@
 		overflow: visible;
 		position: relative;
 		align-self: stretch;
+		clip-path: inset(0 -100vw 0 0);
 	}
 }
 

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -57,6 +57,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		showFilterCollapse = true,
 		showQueryName = true,
 		useFieldApis,
+		savedViewsHeader,
 	} = props;
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 	const [params, setParams] = useApiMonitoringParams();
@@ -379,6 +380,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	return (
 		<div className="quick-filters-container">
 			<div className="quick-filters">
+				{savedViewsHeader}
 				{source !== QuickFiltersSource.INFRA_MONITORING && (
 					<section className="header">
 						{renderLeftActions()}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -8,9 +8,7 @@
 	overflow: hidden;
 }
 
-// Positioned so overlays (settings drawer) paint above the content pane
-// without changing this pane's layout width.
-.filters {
+.sidebar {
 	width: 280px;
 	flex-shrink: 0;
 	display: flex;
@@ -21,6 +19,44 @@
 	z-index: 2;
 }
 
+.savedViews {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	background: var(--l1-background);
+	border-right: 1px solid var(--l1-border);
+}
+
+.quickFilters {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	background: var(--l1-background);
+	transition: transform 0.2s ease-in-out;
+	z-index: 1;
+
+	&.isOpen {
+		transform: translateX(100%);
+	}
+}
+
+// No quick filters: the header sits in flow and the list stays under it
+.isStatic {
+	border-right: 1px solid var(--l1-border);
+
+	.quickFilters {
+		position: static;
+		flex-shrink: 0;
+	}
+
+	.savedViews {
+		border-right: 0;
+	}
+}
+
 // Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
 // `height: 100%`), which owns the scrolling.
 .content {
@@ -31,3 +67,7 @@
 	flex-direction: column;
 	overflow: hidden;
 }
+
+.contentInner {
+	height: 100%;
+}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -1,6 +1,9 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode, useState } from 'react';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
+import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
 
@@ -12,8 +15,15 @@ type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
 	ComponentProps<typeof QuickFilters>
 >;
 
+// What the page configures; the layout adds the open / close wiring.
+type SavedViewsElementProps = Omit<
+	ComponentProps<typeof SavedViewsPanel>,
+	'onClose'
+>;
+
 export interface QuickFiltersLayoutProps {
-	quickFilterProps: QuickFiltersElementProps;
+	quickFilterProps?: QuickFiltersElementProps;
+	savedViewProps?: SavedViewsElementProps;
 	showFilters: boolean;
 	className?: string;
 	contentClassName?: string;
@@ -23,20 +33,60 @@ export interface QuickFiltersLayoutProps {
 
 function QuickFiltersLayout({
 	quickFilterProps,
+	savedViewProps,
 	showFilters,
 	className,
 	contentClassName,
 	testId,
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
+	const [isViewsOpen, setIsViewsOpen] = useState(false);
+	const isSavedViewEnabled = useSavedViewEnabled();
+
+	const hasQuickFilters = !!quickFilterProps;
+	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
+
+	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
+
+	const isPanelPinned = hasSavedViews && !hasQuickFilters;
+
+	const isSliding = hasQuickFilters && isViewsOpen;
+
+	const savedViewsHeader = hasSavedViews ? (
+		<SavedViewsHeader
+			{...savedViewProps}
+			onOpenViews={isPanelPinned ? undefined : (): void => setIsViewsOpen(true)}
+		/>
+	) : undefined;
+
 	return (
 		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showFilters && (
+			{showSidebar && (
 				<aside
-					className={styles.filters}
+					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
 					data-testid="quick-filters-layout-filters"
 				>
-					<QuickFilters {...quickFilterProps} />
+					<div
+						className={cx(styles.quickFilters, { [styles.isOpen]: isSliding })}
+						data-testid="quick-filters-layout-drawer"
+					>
+						{hasQuickFilters ? (
+							<QuickFilters
+								{...quickFilterProps}
+								savedViewsHeader={savedViewsHeader}
+							/>
+						) : (
+							savedViewsHeader
+						)}
+					</div>
+					<div className={styles.savedViews}>
+						{hasSavedViews && (isPanelPinned || isViewsOpen) && (
+							<SavedViewsPanel
+								{...savedViewProps}
+								onClose={isPanelPinned ? undefined : (): void => setIsViewsOpen(false)}
+							/>
+						)}
+					</div>
 				</aside>
 			)}
 			<section
@@ -44,7 +94,7 @@ function QuickFiltersLayout({
 				data-testid="quick-filters-layout-content"
 			>
 				<OverlayScrollbar>
-					<div>{children}</div>
+					<div className={styles.contentInner}>{children}</div>
 				</OverlayScrollbar>
 			</section>
 		</div>

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -1,4 +1,6 @@
-import { render, screen } from 'tests/test-utils';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
+import { render, screen, userEvent } from 'tests/test-utils';
 
 import { QuickFiltersSource } from '../../types';
 import QuickFiltersLayout from '../QuickFiltersLayout';
@@ -7,15 +9,33 @@ jest.mock('../QuickFiltersLayout.module.scss', () => ({
 	__esModule: true,
 	default: {
 		layout: 'layout',
-		filters: 'filters',
+		sidebar: 'sidebar',
+		isStatic: 'isStatic',
+		savedViews: 'savedViews',
+		quickFilters: 'quickFilters',
+		isOpen: 'isOpen',
 		content: 'content',
+		contentInner: 'contentInner',
 	},
 }));
 
+jest.mock('hooks/useSavedViewEnabled', () => ({
+	useSavedViewEnabled: jest.fn(() => true),
+}));
+
 jest.mock('../../QuickFilters', () => ({
 	__esModule: true,
-	default: ({ source }: { source: string }): JSX.Element => (
-		<div data-testid="quick-filters">{source}</div>
+	default: ({
+		source,
+		savedViewsHeader,
+	}: {
+		source: string;
+		savedViewsHeader?: React.ReactNode;
+	}): JSX.Element => (
+		<div data-testid="quick-filters">
+			{savedViewsHeader}
+			{source}
+		</div>
 	),
 }));
 
@@ -23,8 +43,16 @@ const quickFilterProps = {
 	source: QuickFiltersSource.TRACES_EXPLORER,
 	handleFilterVisibilityChange: jest.fn(),
 };
+const savedViewProps = { source: SavedviewtypesSourceDTO.traces };
+
+const drawer = (): HTMLElement =>
+	screen.getByTestId('quick-filters-layout-drawer');
 
 describe('QuickFiltersLayout', () => {
+	beforeEach(() => {
+		jest.mocked(useSavedViewEnabled).mockReturnValue(true);
+	});
+
 	it('renders QuickFilters with the given props inside the filters pane', () => {
 		render(
 			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
@@ -40,11 +68,16 @@ describe('QuickFiltersLayout', () => {
 		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
 			'content',
 		);
+		expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
 	});
 
 	it('does not render the filters pane when showFilters is false', () => {
 		render(
-			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
+			<QuickFiltersLayout
+				showFilters={false}
+				quickFilterProps={quickFilterProps}
+				savedViewProps={savedViewProps}
+			>
 				<div>content</div>
 			</QuickFiltersLayout>,
 		);
@@ -56,24 +89,138 @@ describe('QuickFiltersLayout', () => {
 		expect(screen.getByText('content')).toBeInTheDocument();
 	});
 
+	it('renders no sidebar at all without quick filters or saved views', () => {
+		render(
+			<QuickFiltersLayout showFilters>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		expect(
+			screen.queryByTestId('quick-filters-layout-filters'),
+		).not.toBeInTheDocument();
+		expect(screen.getByText('content')).toBeInTheDocument();
+	});
+
 	it('merges classNames onto the root and content panes', () => {
 		render(
 			<QuickFiltersLayout
 				showFilters
 				quickFilterProps={quickFilterProps}
-				className="page-root"
-				contentClassName="page-content"
-				testId="page"
+				className="root-extra"
+				contentClassName="content-extra"
+				testId="layout"
 			>
 				<div>content</div>
 			</QuickFiltersLayout>,
 		);
 
-		const root = screen.getByTestId('page');
-		expect(root).toHaveClass('layout', 'page-root');
+		expect(screen.getByTestId('layout')).toHaveClass('layout', 'root-extra');
 		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
 			'content',
-			'page-content',
+			'content-extra',
 		);
 	});
+
+	describe('saved views', () => {
+		it('ignores savedViewProps while the flag is off', () => {
+			jest.mocked(useSavedViewEnabled).mockReturnValue(false);
+			const { unmount } = render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.getByTestId('quick-filters')).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+
+			// Saved views only, so nothing is left to show.
+			unmount();
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+			expect(
+				screen.queryByTestId('quick-filters-layout-filters'),
+			).not.toBeInTheDocument();
+		});
+
+		it('opens the panel from the header and slides the quick filters drawer, keeping the same QuickFilters node', async () => {
+			render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+			const user = userEvent.setup();
+			const quickFilters = screen.getByTestId('quick-filters');
+
+			expect(quickFilters).toContainElement(
+				screen.getByTestId('saved-views-header'),
+			);
+			expect(drawer()).toContainElement(quickFilters);
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+
+			await user.click(screen.getByTestId('saved-views-open'));
+
+			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
+			expect(drawer()).toHaveClass('isOpen');
+			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
+
+			await user.click(screen.getByTestId('saved-views-close'));
+
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
+		});
+
+		it('hands the source to the header and the panel', async () => {
+			render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.getByTestId('saved-views-header')).toHaveAttribute(
+				'data-source',
+				SavedviewtypesSourceDTO.traces,
+			);
+			await userEvent.setup().click(screen.getByTestId('saved-views-open'));
+			expect(screen.getByTestId('saved-views-panel')).toHaveAttribute(
+				'data-source',
+				SavedviewtypesSourceDTO.traces,
+			);
+		});
+
+		it('without quick filters: static sidebar, header on top, list always on screen with no open or close controls', () => {
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			const sidebar = screen.getByTestId('quick-filters-layout-filters');
+			expect(sidebar).toHaveClass('isStatic');
+			expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
+			expect(screen.getByTestId('saved-views-header')).toBeInTheDocument();
+			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-close')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+		});
+	});
 });

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -8,12 +8,20 @@
 	width: 342px;
 	height: 100%;
 	background: var(--l1-background);
-	transition: width 0.05s ease-in-out;
+	border-right: 1px solid var(--l1-border);
 	overflow: hidden;
 	color: var(--l1-foreground);
+	transition:
+		transform 0.2s ease-in-out,
+		visibility 0s;
 
 	&.hidden {
-		width: 0;
+		transform: translateX(-100%);
+		visibility: hidden;
+		pointer-events: none;
+		transition:
+			transform 0.2s ease-in-out,
+			visibility 0s 0.2s;
 	}
 	.qf-header {
 		display: flex;

frontend/src/components/QuickFilters/types.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -61,6 +62,7 @@ export interface IQuickFiltersProps {
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
 	useFieldApis?: QuickFilterCheckboxUseFieldApis;
+	savedViewsHeader?: ReactNode;
 }
 
 export enum QuickFiltersSource {

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -10,6 +10,8 @@ import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
@@ -347,57 +349,62 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div className="metrics-explorer-explore-container">
-				<div className="explore-header">
-					<div className="explore-header-left-actions">
-						<span>1 chart/query</span>
-						<Tooltip
-							open={disableOneChartPerQuery ? undefined : false}
-							title={oneChartPerQueryDisabledTooltip}
-						>
-							<Switch
-								value={showOneChartPerQuery}
-								onChange={handleToggleShowOneChartPerQuery}
-								disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
+			<QuickFiltersLayout
+				showFilters
+				savedViewProps={{ source: SavedviewtypesSourceDTO.metrics }}
+			>
+				<div className="metrics-explorer-explore-container">
+					<div className="explore-header">
+						<div className="explore-header-left-actions">
+							<span>1 chart/query</span>
+							<Tooltip
+								open={disableOneChartPerQuery ? undefined : false}
+								title={oneChartPerQueryDisabledTooltip}
+							>
+								<Switch
+									value={showOneChartPerQuery}
+									onChange={handleToggleShowOneChartPerQuery}
+									disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
+								/>
+							</Tooltip>
+						</div>
+						<div className="explore-header-right-actions">
+							{!isEmpty(warning) && <WarningPopover warningData={warning} />}
+							<DateTimeSelector showAutoRefresh />
+							<RightToolbarActions
+								onStageRunQuery={(): void => handleRunQuery()}
+								isLoadingQueries={isLoadingQueries}
+								handleCancelQuery={handleCancelQuery}
 							/>
-						</Tooltip>
+						</div>
 					</div>
-					<div className="explore-header-right-actions">
-						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
-						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions
-							onStageRunQuery={(): void => handleRunQuery()}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
+					<QueryBuilderV2
+						config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
+						panelType={PANEL_TYPES.TIME_SERIES}
+						showFunctions={false}
+						version="v3"
+					/>
+					<div className="explore-content">
+						<TimeSeries
+							onFetchingStateChange={setIsLoadingQueries}
+							showOneChartPerQuery={showOneChartPerQuery}
+							setWarning={setWarning}
+							areAllMetricUnitsSame={areAllMetricUnitsSame}
+							isMetricUnitsLoading={isMetricUnitsLoading}
+							isMetricUnitsError={isMetricUnitsError}
+							metricUnits={units}
+							metricNames={metricNames}
+							metrics={metrics}
+							handleOpenMetricDetails={handleOpenMetricDetails}
+							yAxisUnit={yAxisUnit}
+							setYAxisUnit={setYAxisUnit}
+							showYAxisUnitSelector={showYAxisUnitSelector}
+							isCancelled={isCancelled}
+							exportDefaultQuery={exportDefaultQuery}
 						/>
 					</div>
 				</div>
-				<QueryBuilderV2
-					config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
-					panelType={PANEL_TYPES.TIME_SERIES}
-					showFunctions={false}
-					version="v3"
-				/>
-				<div className="explore-content">
-					<TimeSeries
-						onFetchingStateChange={setIsLoadingQueries}
-						showOneChartPerQuery={showOneChartPerQuery}
-						setWarning={setWarning}
-						areAllMetricUnitsSame={areAllMetricUnitsSame}
-						isMetricUnitsLoading={isMetricUnitsLoading}
-						isMetricUnitsError={isMetricUnitsError}
-						metricUnits={units}
-						metricNames={metricNames}
-						metrics={metrics}
-						handleOpenMetricDetails={handleOpenMetricDetails}
-						yAxisUnit={yAxisUnit}
-						setYAxisUnit={setYAxisUnit}
-						showYAxisUnitSelector={showYAxisUnitSelector}
-						isCancelled={isCancelled}
-						exportDefaultQuery={exportDefaultQuery}
-					/>
-				</div>
-			</div>
+			</QuickFiltersLayout>
 			<ExplorerOptionWrapper
 				disabled={!stagedQuery}
 				query={exportDefaultQuery}

frontend/src/container/SavedViews/SavedViewsHeader.module.scss

@@ -0,0 +1,19 @@
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-2);
+	padding: var(--spacing-2) var(--spacing-3);
+	border-bottom: 1px solid var(--l1-border);
+	color: var(--l1-foreground);
+	flex-shrink: 0;
+}
+
+.name {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-medium);
+}

frontend/src/container/SavedViews/SavedViewsHeader.tsx

@@ -0,0 +1,43 @@
+import { Menu } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+
+import styles from './SavedViewsHeader.module.scss';
+
+// Temp Placeholder data till main functionality is plugged in
+const PLACEHOLDER_VIEW_NAME = 'My view';
+
+function SavedViewsHeader({
+	source,
+	onOpenViews,
+}: {
+	source: SavedviewtypesSourceDTO;
+	// Absent when the list is always on screen.
+	onOpenViews?: () => void;
+}): JSX.Element {
+	return (
+		<div
+			className={styles.header}
+			data-testid="saved-views-header"
+			data-source={source}
+		>
+			<Typography.Text className={styles.name}>
+				{PLACEHOLDER_VIEW_NAME}
+			</Typography.Text>
+			{onOpenViews && (
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					aria-label="All views"
+					prefix={<Menu size={14} />}
+					onClick={onOpenViews}
+					data-testid="saved-views-open"
+				/>
+			)}
+		</div>
+	);
+}
+
+export default SavedViewsHeader;

frontend/src/container/SavedViews/SavedViewsPanel.module.scss

@@ -0,0 +1,21 @@
+.panel {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	color: var(--l1-foreground);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--spacing-2) var(--spacing-3);
+	border-bottom: 1px solid var(--l1-border);
+	flex-shrink: 0;
+}
+
+.title {
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-medium);
+}

frontend/src/container/SavedViews/SavedViewsPanel.tsx

@@ -0,0 +1,40 @@
+import { X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+
+import styles from './SavedViewsPanel.module.scss';
+
+function SavedViewsPanel({
+	source,
+	onClose,
+}: {
+	source: SavedviewtypesSourceDTO;
+	// Absent when the list is always on screen.
+	onClose?: () => void;
+}): JSX.Element {
+	return (
+		<div
+			className={styles.panel}
+			data-testid="saved-views-panel"
+			data-source={source}
+		>
+			<div className={styles.header}>
+				<Typography.Text className={styles.title}>All views</Typography.Text>
+				{onClose && (
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						aria-label="Close"
+						prefix={<X size={14} />}
+						onClick={onClose}
+						data-testid="saved-views-close"
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default SavedViewsPanel;

frontend/src/pages/DashboardPage/PanelEditorPage/stories/PanelEditorPage.stories.tsx

@@ -2,6 +2,7 @@ import type { ComponentType } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Route } from 'react-router-dom';
 import ROUTES from 'constants/routes';
+import { userEvent, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
@@ -22,6 +23,7 @@ const pageStory = storyMocks(panelEditorMocks, { layout: 'app' });
  */
 const meta = {
 	title: 'Pages/Dashboards/Panel Editor',
+	tags: ['play'],
 	// The page is wrapped in `withAuthZPage`, which types its props as an index
 	// signature; the story's args are what the controls resolve to.
 	component: PanelEditorPage as ComponentType<PanelEditorArgs>,
@@ -38,6 +40,25 @@ export default meta;
 
 type Story = StoryObj<PanelEditorArgs>;
 
+const expandConfigSections: Story['play'] = async ({ canvasElement }) => {
+	const canvas = within(canvasElement);
+
+	const headers = await canvas.findAllByTestId(
+		/^config-section-/,
+		{},
+		{ timeout: 10000 },
+	);
+	for (const header of headers) {
+		if (header.getAttribute('aria-expanded') === 'false') {
+			await userEvent.click(header);
+		}
+	}
+	(document.activeElement as HTMLElement | null)?.blur();
+	for (let el = headers[0].parentElement; el; el = el.parentElement) {
+		el.scrollTop = 0;
+	}
+};
+
 /**
  * Editing a saved time series panel: the live preview over the query builder on
  * the left, the panel's formatting, legend, axes and thresholds on the right.
@@ -86,3 +107,57 @@ export const ReadOnly: Story = {
 export const Tooltips: Story = {
 	args: { tooltipsOpen: true },
 };
+
+/** A new time series panel's config pane, every section expanded. */
+export const ConfigTimeSeries: Story = {
+	args: { panel: 'new', newPanelKind: 'time-series' },
+	play: expandConfigSections,
+};
+
+/** A new number panel's config pane, every section expanded. */
+export const ConfigNumber: Story = {
+	args: { panel: 'new', newPanelKind: 'number' },
+	play: expandConfigSections,
+};
+
+/** A new table panel's config pane, every section expanded. */
+export const ConfigTable: Story = {
+	args: { panel: 'new', newPanelKind: 'table' },
+	play: expandConfigSections,
+};
+
+/** A new bar chart panel's config pane, every section expanded. */
+export const ConfigBarChart: Story = {
+	args: { panel: 'new', newPanelKind: 'bar-chart' },
+	play: expandConfigSections,
+};
+
+/** A new area chart panel's config pane, every section expanded. */
+export const ConfigAreaChart: Story = {
+	args: { panel: 'new', newPanelKind: 'area-chart' },
+	play: expandConfigSections,
+};
+
+/** A new pie chart panel's config pane, every section expanded. */
+export const ConfigPieChart: Story = {
+	args: { panel: 'new', newPanelKind: 'pie-chart' },
+	play: expandConfigSections,
+};
+
+/** A new histogram panel's config pane, every section expanded. */
+export const ConfigHistogram: Story = {
+	args: { panel: 'new', newPanelKind: 'histogram' },
+	play: expandConfigSections,
+};
+
+/** A new list panel's config pane, every section expanded. */
+export const ConfigList: Story = {
+	args: { panel: 'new', newPanelKind: 'list' },
+	play: expandConfigSections,
+};
+
+/** A new text panel's config pane, every section expanded. */
+export const ConfigText: Story = {
+	args: { panel: 'new', newPanelKind: 'text' },
+	play: expandConfigSections,
+};

frontend/src/pages/DashboardPage/PanelEditorPage/stories/__story_mockdata__/panelEditor.ts

@@ -21,12 +21,14 @@ import type { PanelKind } from '../../../DashboardContainer/Panels/types/panelKi
  */
 export const NEW_PANEL_KINDS = [
 	'time-series',
-	'bar-chart',
 	'number',
-	'pie-chart',
 	'table',
+	'bar-chart',
+	'area-chart',
+	'pie-chart',
 	'histogram',
 	'list',
+	'text',
 ] as const;
 
 export type NewPanelKind = (typeof NEW_PANEL_KINDS)[number];
@@ -34,11 +36,13 @@ export type NewPanelKind = (typeof NEW_PANEL_KINDS)[number];
 const KIND_BY_OPTION: Record<NewPanelKind, PanelKind> = {
 	'time-series': 'signoz/TimeSeriesPanel',
 	'bar-chart': 'signoz/BarChartPanel',
+	'area-chart': 'signoz/AreaChartPanel',
 	number: 'signoz/NumberPanel',
 	'pie-chart': 'signoz/PieChartPanel',
 	table: 'signoz/TablePanel',
 	histogram: 'signoz/HistogramPanel',
 	list: 'signoz/ListPanel',
+	text: 'signoz/TextPanel',
 };
 
 export const newPanelKindOf = (option: NewPanelKind): PanelKind =>

frontend/src/pages/DashboardPage/stories/DashboardPage.stories.tsx

@@ -285,6 +285,70 @@ export const SectionActionsMenu: Story = {
 	},
 };
 
+/**
+ * The new-panel picker opened from the toolbar: the panel kinds as tiles, with
+ * the target section to place the panel in.
+ */
+export const NewPanelPicker: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		await userEvent.click(
+			await canvas.findByTestId('add-panel-header', {}, { timeout: 10000 }),
+		);
+		await screen.findByTestId('panel-type-signoz/TimeSeriesPanel');
+	},
+};
+
+/** The new-panel picker with a kind picked, waiting on the section to confirm. */
+export const NewPanelPickerTypeSelected: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		await userEvent.click(
+			await canvas.findByTestId('add-panel-header', {}, { timeout: 10000 }),
+		);
+		await userEvent.click(
+			await screen.findByTestId('panel-type-signoz/TimeSeriesPanel'),
+		);
+	},
+};
+
+/**
+ * The new-panel picker on a dashboard without sections, where there is no
+ * section to choose.
+ */
+export const NewPanelPickerNoSections: Story = {
+	args: { sectioned: false },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		await userEvent.click(
+			await canvas.findByTestId('add-panel-header', {}, { timeout: 10000 }),
+		);
+		await screen.findByTestId('panel-type-signoz/TimeSeriesPanel');
+	},
+};
+
+/**
+ * The new-panel picker opened from the second section's menu, targeting that
+ * section.
+ */
+export const NewPanelPickerFromSection: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const [, secondSection] = await canvas.findAllByRole(
+			'button',
+			{ name: 'Section actions' },
+			{ timeout: 10000 },
+		);
+		await userEvent.click(secondSection);
+		await userEvent.click(await screen.findByText('Add panel'));
+		await screen.findByTestId('panel-type-signoz/TimeSeriesPanel');
+	},
+};
+
 /**
  * A dashboard id nobody has, which is what a deleted or mistyped link opens on.
  *

frontend/src/pages/LogsExplorer/LogsExplorer.styles.scss

@@ -4,15 +4,10 @@
 	min-height: 0;
 	overflow: hidden;
 
-	.log-quick-filter-left-section {
-		width: 0%;
-		flex-shrink: 0;
-	}
-
 	.log-module-right-section {
 		display: flex;
 		flex-direction: column;
-		width: 100%;
+		height: 100%;
 		min-height: 0;
 
 		.log-explorer-query-container {
@@ -39,26 +34,4 @@
 			}
 		}
 	}
-
-	&.filter-visible {
-		.log-quick-filter-left-section {
-			width: 260px;
-			height: 100%;
-			overflow: visible;
-			min-height: 0;
-			position: relative;
-			z-index: 2;
-			display: flex;
-			flex-direction: column;
-
-			.quick-filters-container {
-				flex: 1;
-				min-height: 0;
-			}
-		}
-
-		.log-module-right-section {
-			width: calc(100% - 260px);
-		}
-	}
 }

frontend/src/pages/LogsExplorer/index.tsx

@@ -3,10 +3,10 @@ import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -225,21 +225,19 @@ function LogsExplorer(): JSX.Element {
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<EventSourceProvider>
-				<div
-					className={cx('logs-module-page', showFilters ? 'filter-visible' : '')}
+				<QuickFiltersLayout
+					className="logs-module-page"
+					showFilters={showFilters}
+					savedViewProps={{ source: SavedviewtypesSourceDTO.logs }}
+					quickFilterProps={{
+						className: 'qf-logs-explorer',
+						signal: SignalType.LOGS,
+						source: QuickFiltersSource.LOGS_EXPLORER,
+						handleFilterVisibilityChange,
+						useFieldApis: quickFilterFieldApis,
+					}}
 				>
-					{showFilters && (
-						<section className={cx('log-quick-filter-left-section')}>
-							<QuickFilters
-								className="qf-logs-explorer"
-								signal={SignalType.LOGS}
-								source={QuickFiltersSource.LOGS_EXPLORER}
-								handleFilterVisibilityChange={handleFilterVisibilityChange}
-								useFieldApis={quickFilterFieldApis}
-							/>
-						</section>
-					)}
-					<section className={cx('log-module-right-section')}>
+					<section className="log-module-right-section">
 						<Toolbar
 							showAutoRefresh={false}
 							leftActions={
@@ -292,7 +290,7 @@ function LogsExplorer(): JSX.Element {
 							</div>
 						</div>
 					</section>
-				</div>
+				</QuickFiltersLayout>
 			</EventSourceProvider>
 		</Sentry.ErrorBoundary>
 	);

frontend/src/pages/TracesExplorer/index.tsx

@@ -5,6 +5,7 @@ import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
@@ -285,6 +286,7 @@ function TracesExplorer(): JSX.Element {
 			<QuickFiltersLayout
 				className="trace-explorer-page"
 				showFilters={isOpen}
+				savedViewProps={{ source: SavedviewtypesSourceDTO.traces }}
 				quickFilterProps={{
 					className: 'qf-traces-explorer',
 					source: QuickFiltersSource.TRACES_EXPLORER,

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -157,6 +157,7 @@ func (d *DashboardSpec) validateQuery(qi int, q Query, panelKind PanelPluginKind
 func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind, panelKind PanelPluginKind, path string) error {
 	compositeSubQueryTypeToPluginKind := map[qb.QueryType]QueryPluginKind{
 		qb.QueryTypeBuilder:       QueryKindBuilder,
+		qb.QueryTypeBuilderAI:     QueryKindAIBuilder,
 		qb.QueryTypeFormula:       QueryKindFormula,
 		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
 		qb.QueryTypePromQL:        QueryKindPromQL,

pkg/types/dashboardtypes/perses_dashboard_stats_test.go

@@ -117,6 +117,22 @@ func TestNewStatsFromStorableDashboardsCountsCompositeSubQueries(t *testing.T) {
 	assert.Equal(t, int64(1), stats[statKeyPanelLogsCount])
 }
 
+// An AI builder query is always a traces query, so it counts towards traces.
+func TestNewStatsFromStorableDashboardsCountsAIBuilderQueries(t *testing.T) {
+	aiBuilder := `{
+		"kind": "time_series",
+		"spec": {"plugin": {"kind": "signoz/AIBuilderQuery", "spec": {"name": "A", "aggregations": [{"expression": "count()"}]}}}
+	}`
+	dashboard := newStatsStorableV2(t, `"p1": `+statsPanel(aiBuilder))
+
+	stats := NewStatsFromStorableDashboards([]*StorableDashboard{dashboard})
+
+	assert.Equal(t, int64(1), stats[statKeyPanelCount])
+	assert.Equal(t, int64(1), stats[statKeyPanelTracesCount])
+	assert.Equal(t, int64(0), stats[statKeyPanelMetricsCount])
+	assert.Equal(t, int64(0), stats[statKeyPanelLogsCount])
+}
+
 // promql and clickhouse queries carry no signal, so they land in the panel total
 // and nowhere else.
 func TestNewStatsFromStorableDashboardsIgnoresSignallessQueries(t *testing.T) {

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/perses/spec/go/dashboard"
 	"github.com/stretchr/testify/assert"
@@ -2020,6 +2021,43 @@ func TestStorageRoundTrip(t *testing.T) {
 	assert.Contains(t, responseStr, `"operator":"above"`, "expected operator:above after storage round-trip")
 }
 
+// An AI builder query carries no signal of its own: the plugin kind implies
+// gen_ai, which only reads traces, so decode pins the signal and marshal emits it.
+func TestAIBuilderQueryStorageRoundTrip(t *testing.T) {
+	input := []byte(`{
+		"variables": [],
+		"panels": {"p1": {"kind": "Panel", "spec": {
+			"links": [],
+			"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
+			"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/AIBuilderQuery", "spec": {
+				"name": "A", "aggregations": [{"expression": "count()"}]
+			}}}}]
+		}}},
+		"links": [],
+		"layouts": []
+	}`)
+
+	d, err := unmarshalDashboard(input)
+	require.NoError(t, err)
+
+	plugin := d.Panels["p1"].Spec.Queries[0].Spec.Plugin
+	assert.Equal(t, QueryKindAIBuilder, plugin.Kind)
+
+	aiSpec, ok := plugin.Spec.(*AIBuilderQuerySpec)
+	require.True(t, ok, "expected *AIBuilderQuerySpec, got %T", plugin.Spec)
+	assert.Equal(t, "A", aiSpec.Name)
+	assert.Equal(t, telemetrytypes.SignalTraces, aiSpec.Signal)
+
+	stored, err := json.Marshal(plugin)
+	require.NoError(t, err)
+	assert.Contains(t, string(stored), `"kind":"signoz/AIBuilderQuery"`)
+	assert.Contains(t, string(stored), `"signal":"traces"`)
+
+	var loaded QueryPlugin
+	require.NoError(t, json.Unmarshal(stored, &loaded))
+	assert.Equal(t, plugin, loaded)
+}
+
 func TestPostableDashboardV2GenerateNameFlag(t *testing.T) {
 	const validSpec = `"spec": {"variables": [], "panels": {}, "layouts": [], "links": []}`
 
@@ -2232,6 +2270,8 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		{"TimeSeries+PromQL", mkQuery("signoz/TimeSeriesPanel", "signoz/PromQLQuery", `{"name":"A","query":"up"}`), false},
 		{"Table+ClickHouse", mkQuery("signoz/TablePanel", "signoz/ClickHouseSQL", `{"name":"A","query":"SELECT 1"}`), false},
 		{"List+Builder", mkQuery("signoz/ListPanel", "signoz/BuilderQuery", `{"name":"A","signal":"logs"}`), false},
+		{"TimeSeries+AIBuilder", mkQuery("signoz/TimeSeriesPanel", "signoz/AIBuilderQuery", `{"name":"A","aggregations":[{"expression":"count()"}]}`), false},
+		{"List+AIBuilder", mkQuery("signoz/ListPanel", "signoz/AIBuilderQuery", `{"name":"A"}`), false},
 		// Top-level: rejected
 		{"Table+PromQL", mkQuery("signoz/TablePanel", "signoz/PromQLQuery", `{"name":"A","query":"up"}`), true},
 		{"List+ClickHouse", mkQuery("signoz/ListPanel", "signoz/ClickHouseSQL", `{"name":"A","query":"SELECT 1"}`), true},
@@ -2241,6 +2281,7 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		// Composite sub-queries
 		{"Table+Composite(promql)", mkComposite("signoz/TablePanel", "promql", `{"name":"A","query":"up"}`), true},
 		{"Table+Composite(clickhouse)", mkComposite("signoz/TablePanel", "clickhouse_sql", `{"name":"A","query":"SELECT 1"}`), false},
+		{"Table+Composite(builder_ai)", mkComposite("signoz/TablePanel", "builder_ai_query", `{"name":"A","aggregations":[{"expression":"count()"}]}`), false},
 	}
 
 	for _, tc := range cases {

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -95,6 +95,7 @@ type QueryPlugin struct {
 func (QueryPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
 	return markDiscriminator(s, "kind", map[string]string{
 		string(QueryKindBuilder):       schemaRef("DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec"),
+		string(QueryKindAIBuilder):     schemaRef("DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec"),
 		string(QueryKindComposite):     schemaRef("DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery"),
 		string(QueryKindFormula):       schemaRef("DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderFormula"),
 		string(QueryKindPromQL):        schemaRef("DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQuery"),
@@ -124,6 +125,7 @@ func (p *QueryPlugin) UnmarshalJSON(data []byte) error {
 func (QueryPlugin) JSONSchemaOneOf() []any {
 	return []any{
 		QueryPluginVariant[BuilderQuerySpec]{Kind: string(QueryKindBuilder)},
+		QueryPluginVariant[AIBuilderQuerySpec]{Kind: string(QueryKindAIBuilder)},
 		QueryPluginVariant[CompositeQuerySpec]{Kind: string(QueryKindComposite)},
 		QueryPluginVariant[FormulaSpec]{Kind: string(QueryKindFormula)},
 		QueryPluginVariant[PromQLQuerySpec]{Kind: string(QueryKindPromQL)},
@@ -144,6 +146,11 @@ func (plugin QueryPlugin) buildV5CompositeQueryFromPlugin() (qb.CompositeQuery,
 			return qb.CompositeQuery{}, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "builder query is empty")
 		}
 		return wrapEnvelope(qb.QueryTypeBuilder, spec.Spec), nil
+	case *AIBuilderQuerySpec:
+		if spec == nil {
+			return qb.CompositeQuery{}, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "AI builder query is empty")
+		}
+		return wrapEnvelope(qb.QueryTypeBuilderAI, qb.QueryBuilderQuery[qb.TraceAggregation](*spec)), nil
 	case *qb.PromQuery:
 		return wrapEnvelope(qb.QueryTypePromQL, *spec), nil
 	case *qb.ClickHouseQuery:
@@ -240,6 +247,7 @@ var (
 	}
 	queryPluginSpecs = map[QueryPluginKind]func() any{
 		QueryKindBuilder:       func() any { return new(BuilderQuerySpec) },
+		QueryKindAIBuilder:     func() any { return new(AIBuilderQuerySpec) },
 		QueryKindComposite:     func() any { return new(CompositeQuerySpec) },
 		QueryKindFormula:       func() any { return new(FormulaSpec) },
 		QueryKindPromQL:        func() any { return new(PromQLQuerySpec) },
@@ -252,14 +260,14 @@ var (
 		VariableKindCustom:  func() any { return new(CustomVariableSpec) },
 	}
 	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
-		PanelKindTimeSeries: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindBarChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindAreaChart:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindNumber:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindHistogram:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindPieChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindTable:      {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindList:       {QueryKindBuilder},
+		PanelKindTimeSeries: {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindBarChart:   {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindAreaChart:  {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindNumber:     {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindHistogram:  {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindPieChart:   {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
+		PanelKindTable:      {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
+		PanelKindList:       {QueryKindBuilder, QueryKindAIBuilder},
 		PanelKindText:       {},
 		PanelKindHeatmap:    {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindPromQL, QueryKindClickHouseSQL},
 	}

pkg/types/dashboardtypes/perses_public_dashboard.go

@@ -106,6 +106,13 @@ func redactQuery(spec any) any {
 			return spec
 		}
 		return &BuilderQuerySpec{Spec: redactLeafQuery(s.Spec)}
+	case *AIBuilderQuerySpec:
+		if s == nil {
+			return spec
+		}
+		redacted := redactLeafQuery(qb.QueryBuilderQuery[qb.TraceAggregation](*s)).(qb.QueryBuilderQuery[qb.TraceAggregation])
+		out := AIBuilderQuerySpec(redacted)
+		return &out
 	case *qb.PromQuery:
 		return redactQueryPtr(s)
 	case *qb.ClickHouseQuery:

pkg/types/dashboardtypes/perses_public_dashboard_panel_query_test.go

@@ -5,6 +5,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 )
@@ -159,6 +160,11 @@ func TestDashboardV2GetPanelQuery(t *testing.T) {
 			plugin       QueryPlugin
 			expectedType qb.QueryType
 		}{
+			{
+				description:  "AI builder query",
+				plugin:       QueryPlugin{Kind: QueryKindAIBuilder, Spec: &AIBuilderQuerySpec{Name: "A"}},
+				expectedType: qb.QueryTypeBuilderAI,
+			},
 			{
 				description:  "promql",
 				plugin:       QueryPlugin{Kind: QueryKindPromQL, Spec: &qb.PromQuery{Name: "A", Query: "up"}},
@@ -209,6 +215,42 @@ func TestDashboardV2GetPanelQuery(t *testing.T) {
 		}
 	})
 
+	// The gen_ai statement builder only reads traces, so an AI builder query
+	// carries no signal of its own and unwraps to a traces builder query.
+	t.Run("unwraps an AI builder query to a traces builder query", func(t *testing.T) {
+		dashboard := &DashboardV2{
+			Spec: DashboardSpec{
+				Panels: map[string]*Panel{
+					"panel-1": {
+						Spec: PanelSpec{
+							Plugin: PanelPlugin{Kind: PanelKindTimeSeries},
+							Queries: []Query{
+								{
+									Kind: qb.RequestTypeTimeSeries,
+									Spec: QuerySpec{
+										Plugin: QueryPlugin{
+											Kind: QueryKindAIBuilder,
+											Spec: &AIBuilderQuerySpec{Name: "A", Signal: telemetrytypes.SignalTraces},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		}
+
+		req, err := dashboard.GetPanelQuery(1, 2, "panel-1")
+		require.NoError(t, err)
+		require.Len(t, req.CompositeQuery.Queries, 1)
+
+		spec, ok := req.CompositeQuery.Queries[0].Spec.(qb.QueryBuilderQuery[qb.TraceAggregation])
+		require.True(t, ok, "expected traces builder query, got %T", req.CompositeQuery.Queries[0].Spec)
+		assert.Equal(t, "A", spec.Name)
+		assert.Equal(t, telemetrytypes.SignalTraces, spec.Signal)
+	})
+
 	t.Run("sets FormatTableResultForUI only for table panels", func(t *testing.T) {
 		dashboard := &DashboardV2{
 			Spec: DashboardSpec{

pkg/types/dashboardtypes/perses_public_dashboard_redaction_test.go

@@ -133,6 +133,19 @@ func TestRedactQueryPluginWrappers(t *testing.T) {
 		assert.Equal(t, "A", builder.Name)
 	})
 
+	t.Run("AI builder plugin pointer is redacted and stays a pointer", func(t *testing.T) {
+		plugin := &AIBuilderQuerySpec{
+			Name:   "A",
+			Filter: &qb.Filter{Expression: "body contains 'secret'"},
+		}
+
+		result, ok := redactQuery(plugin).(*AIBuilderQuerySpec)
+		require.True(t, ok)
+
+		assert.Nil(t, result.Filter)
+		assert.Equal(t, "A", result.Name)
+	})
+
 	t.Run("composite plugin redacts every sub-query envelope", func(t *testing.T) {
 		composite := &qb.CompositeQuery{Queries: []qb.QueryEnvelope{
 			{Type: qb.QueryTypeBuilder, Spec: qb.QueryBuilderQuery[qb.MetricAggregation]{Name: "A", Filter: &qb.Filter{Expression: "x = 1"}}},

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -93,6 +93,7 @@ type QueryPluginKind string
 
 const (
 	QueryKindBuilder       QueryPluginKind = "signoz/BuilderQuery"
+	QueryKindAIBuilder     QueryPluginKind = "signoz/AIBuilderQuery"
 	QueryKindComposite     QueryPluginKind = "signoz/CompositeQuery"
 	QueryKindFormula       QueryPluginKind = "signoz/Formula"
 	QueryKindPromQL        QueryPluginKind = "signoz/PromQLQuery"
@@ -101,7 +102,7 @@ const (
 )
 
 func (QueryPluginKind) Enum() []any {
-	return []any{QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindPromQL, QueryKindClickHouseSQL, QueryKindTraceOperator}
+	return []any{QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindPromQL, QueryKindClickHouseSQL, QueryKindTraceOperator}
 }
 
 type (
@@ -159,6 +160,26 @@ func (BuilderQuerySpec) JSONSchemaOneOf() []any {
 	}
 }
 
+// AIBuilderQuerySpec is the spec of a signoz/AIBuilderQuery plugin: a gen_ai-scoped
+// (AI observability) traces builder query, executed as qb.QueryTypeBuilderAI. The
+// signal is implied by the kind and pinned to traces, mirroring the builder_ai_query
+// QueryEnvelope decode.
+type AIBuilderQuerySpec qb.QueryBuilderQuery[qb.TraceAggregation]
+
+func (b *AIBuilderQuerySpec) UnmarshalJSON(data []byte) error {
+	var spec qb.QueryBuilderQuery[qb.TraceAggregation]
+	if err := json.Unmarshal(data, &spec); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid AI builder query spec")
+	}
+	spec.Signal = telemetrytypes.SignalTraces
+	*b = AIBuilderQuerySpec(spec)
+	return nil
+}
+
+func (AIBuilderQuerySpec) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return (qb.QueryBuilderQuery[qb.TraceAggregation]{}).PrepareJSONSchema(s)
+}
+
 // ══════════════════════════════════════════════
 // SigNoz panel plugin specs
 // ══════════════════════════════════════════════