fix: opamp collector reconnect send updated config

2026-09-30 07:10:42 +01:00 · 2026-09-23 20:41:25 +05:30
255 changed files with 1260 additions and 8396 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -200,15 +200,6 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
-/frontend/src/container/RoutingPolicies/ @SigNoz/pulse-frontend
-/frontend/src/components/AlertBreadcrumb/ @SigNoz/pulse-frontend
-/frontend/src/container/EditRules/ @SigNoz/pulse-frontend
-/frontend/src/components/AlertDetailsFilters/ @SigNoz/pulse-frontend
-/frontend/src/components/Alerts/ @SigNoz/pulse-frontend
-/frontend/src/hooks/routingPolicies/ @SigNoz/pulse-frontend
-/frontend/src/types/api/alerts/ @SigNoz/pulse-frontend
-/frontend/src/providers/Alert.tsx @SigNoz/pulse-frontend
-/frontend/src/constants/alerts.ts @SigNoz/pulse-frontend

 ## Notification Channels
 /frontend/src/pages/ChannelsEdit/ @SigNoz/pulse-frontend
@@ -216,8 +207,6 @@ go.mod @therealpandey
 /frontend/src/container/AllAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/CreateAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/EditAlertChannels/ @SigNoz/pulse-frontend
-/frontend/src/container/FormAlertChannels/ @SigNoz/pulse-frontend
-/frontend/src/hooks/notificationChannels/ @SigNoz/pulse-frontend

 ## OpenAPI Schema - Generated
 /frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv
--- a/.github/workflows/integrationci.yaml
+++ b/.github/workflows/integrationci.yaml
@@ -38,6 +38,7 @@ jobs:
      fail-fast: false
      matrix:
        suite:
+          - alerts
          - alertmanager
          - alertmanagerrotation
          - basepath
@@ -63,7 +64,6 @@ jobs:
          - querierauthz
          - role
          - rootuser
-          - ruler
          - savedview
          - semconvfamilies
          - serviceaccount
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
--- a/docs/contributing/go/handler.md
+++ b/docs/contributing/go/handler.md
@@ -179,7 +179,6 @@ The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAP
 - **SuccessStatusCode**: The HTTP status for successful responses (for example, `http.StatusOK`, `http.StatusCreated`, `http.StatusNoContent`).
 - **ErrorStatusCodes**: Additional error status codes beyond the standard ones automatically added by `handler.New`.
 - **SecuritySchemes**: Auth mechanisms and scopes required by the operation.
- **Stability**: Maturity marker (`handler.StabilityDevelopment`, `handler.StabilityAlpha`, `handler.StabilityBeta`, `handler.StabilityStable`, the OpenTelemetry Collector levels) emitted as the `x-signoz-stability` extension on every operation. Unset is emitted as `alpha`.

 The generic handler:

--- a/ee/sqlstore/postgressqlstore/formatter.go
+++ b/ee/sqlstore/postgressqlstore/formatter.go
@@ -23,15 +23,6 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return append(f.TextToJsonColumn(column), ops...)
 }

-func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
-	sql := f.TextToJsonColumn(column)
-	sql = append(sql, "->"...)
-	sql = schema.Append(f.bunf, sql, mapField)
-	sql = append(sql, "->>"...)
-	sql = schema.Append(f.bunf, sql, key)
-	return sql
-}
-
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "jsonb_typeof("...)
--- a/ee/sqlstore/postgressqlstore/formatter_test.go
+++ b/ee/sqlstore/postgressqlstore/formatter_test.go
@@ -55,67 +55,6 @@ func TestJSONExtractString(t *testing.T) {
 	}
 }

-func TestJSONExtractMapValue(t *testing.T) {
-	tests := []struct {
-		name     string
-		column   string
-		mapField string
-		key      string
-		expected string
-	}{
-		{
-			name:     "PlainKey",
-			column:   "data",
-			mapField: "labels",
-			key:      "team",
-			expected: `"data"::jsonb->'labels'->>'team'`,
-		},
-		{
-			name:     "DottedKey_OneMapEntry",
-			column:   "data",
-			mapField: "labels",
-			key:      "k8s.cluster",
-			expected: `"data"::jsonb->'labels'->>'k8s.cluster'`,
-		},
-		{
-			name:     "SingleQuoteInKey_Doubled",
-			column:   "data",
-			mapField: "labels",
-			key:      "o'brien",
-			expected: `"data"::jsonb->'labels'->>'o''brien'`,
-		},
-		{
-			name:     "BackslashInKey_Literal",
-			column:   "data",
-			mapField: "labels",
-			key:      `a\b`,
-			expected: `"data"::jsonb->'labels'->>'a\b'`,
-		},
-		{
-			name:     "DoubleQuoteInKey_Literal",
-			column:   "data",
-			mapField: "labels",
-			key:      `a"b`,
-			expected: `"data"::jsonb->'labels'->>'a"b'`,
-		},
-		{
-			name:     "QualifiedColumn",
-			column:   "rule.data",
-			mapField: "labels",
-			key:      "severity",
-			expected: `"rule"."data"::jsonb->'labels'->>'severity'`,
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			f := newFormatter(pgdialect.New())
-			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
-			assert.Equal(t, tt.expected, got)
-		})
-	}
-}
-
 func TestJSONType(t *testing.T) {
 	tests := []struct {
 		name     string
--- a/frontend/src/api/generated/services/rules/index.ts
+++ b/frontend/src/api/generated/services/rules/index.ts
@@ -41,8 +41,6 @@ import type {
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
 	ListRules200,
-	ListRulesV3200,
-	ListRulesV3Params,
 	PatchRuleByID200,
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
@@ -75,8 +73,7 @@ const withQueryKey = <T extends object, K>(
 };

 /**
- * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
- * @deprecated
+ * This endpoint lists all alert rules with their current evaluation state
 * @summary List alert rules
 */
 export const listRules = (signal?: AbortSignal) => {
@@ -118,7 +115,6 @@ export type ListRulesQueryResult = NonNullable<
 export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;

 /**
- * @deprecated
 * @summary List alert rules
 */

@@ -138,7 +134,6 @@ export function useListRules<
 }

 /**
- * @deprecated
 * @summary List alert rules
 */
 export const invalidateListRules = async (
@@ -1393,97 +1388,3 @@ export const useTestRule = <
 > => {
 	return useMutation(getTestRuleMutationOptions(options));
 };
-/**
- * Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.
- * @summary List alert rules (v3)
- */
-export const listRulesV3 = (
-	params?: ListRulesV3Params,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListRulesV3200>({
-		url: `/api/v3/rules`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListRulesV3QueryKey = (params?: ListRulesV3Params) => {
-	return [`/api/v3/rules`, ...(params ? [params] : [])] as const;
-};
-
-export const getListRulesV3QueryOptions = <
-	TData = Awaited<ReturnType<typeof listRulesV3>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListRulesV3Params,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listRulesV3>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListRulesV3QueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRulesV3>>> = ({
-		signal,
-	}) => listRulesV3(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listRulesV3>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListRulesV3QueryResult = NonNullable<
-	Awaited<ReturnType<typeof listRulesV3>>
->;
-export type ListRulesV3QueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List alert rules (v3)
- */
-
-export function useListRulesV3<
-	TData = Awaited<ReturnType<typeof listRulesV3>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListRulesV3Params,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listRulesV3>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListRulesV3QueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return withQueryKey(query, queryOptions.queryKey);
-}
-
-/**
- * @summary List alert rules (v3)
- */
-export const invalidateListRulesV3 = async (
-	queryClient: QueryClient,
-	params?: ListRulesV3Params,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListRulesV3QueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -10188,99 +10188,6 @@ export interface RuletypesGettableTestRuleDTO {
 	message?: string;
 }

-export interface RuletypesLabelPairDTO {
-	/**
-	 * @type string
-	 */
-	key: string;
-	/**
-	 * @type string
-	 */
-	value: string;
-}
-
-export enum RuletypesListOrderDTO {
-	asc = 'asc',
-	desc = 'desc',
-}
-export enum RuletypesListSortDTO {
-	updated_at = 'updated_at',
-	created_at = 'created_at',
-	name = 'name',
-	state = 'state',
-	severity = 'severity',
-}
-export type RuletypesListableRuleDTOLabels = { [key: string]: string };
-
-export enum RuletypesRuleTypeDTO {
-	threshold_rule = 'threshold_rule',
-	promql_rule = 'promql_rule',
-	anomaly_rule = 'anomaly_rule',
-}
-export interface RuletypesListableRuleDTO {
-	/**
-	 * @type string
-	 */
-	alert: string;
-	alertType: RuletypesAlertTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type boolean
-	 */
-	disabled?: boolean;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type object
-	 */
-	labels?: RuletypesListableRuleDTOLabels;
-	ruleType: RuletypesRuleTypeDTO;
-	state: RuletypesAlertStateDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
-export interface RuletypesListableRulesDTO {
-	/**
-	 * @type array
-	 */
-	labels: RuletypesLabelPairDTO[];
-	/**
-	 * @type array
-	 */
-	reservedKeywords: string[];
-	/**
-	 * @type array
-	 */
-	rules: RuletypesListableRuleDTO[];
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	total: number;
-}
-
 export interface RuletypesRenotifyDTO {
 	/**
 	 * @type array,null
@@ -10377,6 +10284,11 @@ export interface RuletypesRuleConditionDTO {
 	thresholds?: RuletypesRuleThresholdDataDTO;
 }

+export enum RuletypesRuleTypeDTO {
+	threshold_rule = 'threshold_rule',
+	promql_rule = 'promql_rule',
+	anomaly_rule = 'anomaly_rule',
+}
 export interface RuletypesPostableRuleDTO {
 	/**
 	 * @type string
@@ -14277,45 +14189,6 @@ export type GetMetricDashboardsV2200 = {
 	status: string;
 };

-export type ListRulesV3Params = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	query?: string;
-	/**
-	 * @type array
-	 * @description undefined
-	 */
-	states?: string[];
-	/**
-	 * @description undefined
-	 */
-	sort?: RuletypesListSortDTO;
-	/**
-	 * @description undefined
-	 */
-	order?: RuletypesListOrderDTO;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	offset?: number;
-};
-
-export type ListRulesV3200 = {
-	data: RuletypesListableRulesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetFlamegraphPathParameters = {
 	traceID: string;
 };
--- a/frontend/src/components/QuickFilters/QuickFilters.styles.scss
+++ b/frontend/src/components/QuickFilters/QuickFilters.styles.scss
@@ -2,8 +2,6 @@
 	display: flex;
 	flex-direction: row;
 	position: relative;
-	flex: 1;
-	min-height: 0;

 	.quick-filters-settings-container {
 		flex: 0 0 0;
@@ -12,7 +10,6 @@
 		overflow: visible;
 		position: relative;
 		align-self: stretch;
-		clip-path: inset(0 -100vw 0 0);
 	}
 }

@@ -35,7 +32,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: var(--spacing-2) 10.5px;
+		padding: 10.5px;
 		border-bottom: 1px solid var(--l1-border);

 		.left-actions {
@@ -46,9 +43,6 @@
 			justify-content: flex-start;

 			.text {
-				padding-left: var(--spacing-4);
-				white-space: nowrap;
-				flex-shrink: 0;
 				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 14px;
@@ -81,8 +75,6 @@
 			}

 			.select-box {
-				--combobox-trigger-width: auto;
-
 				display: flex;
 				padding: 2px 5px;
 				flex-direction: row;
@@ -100,9 +92,10 @@
 		.right-actions {
 			display: flex;
 			align-items: center;
-			gap: var(--spacing-1);
-			flex-shrink: 0;
+			gap: 10px;
+			width: 100%;
 			justify-content: flex-end;
+			--button-variant-link-color: var(--l1-foreground);

 			.divider-filter {
 				width: 1px;
@@ -110,8 +103,26 @@
 				background: var(--l1-background);
 			}

-			.active {
-				background: var(--l2-background);
+			.sync-icon {
+				cursor: pointer;
+			}
+
+			.right-action-icon-container {
+				position: relative;
+				display: flex;
+				padding: 2px;
+				background-color: var(--l1-background);
+
+				.settings-icon {
+					height: 14px;
+					width: 14px;
+					cursor: pointer;
+				}
+
+				&.active,
+				&:hover {
+					background: var(--l2-background);
+				}
 			}
 		}
 	}
--- a/frontend/src/components/QuickFilters/QuickFilters.tsx
+++ b/frontend/src/components/QuickFilters/QuickFilters.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import {
 	ArrowUpToLine,
+	Filter,
 	Frown,
 	RefreshCw,
 	Settings2 as SettingsIcon,
@@ -13,9 +14,8 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
-import { Skeleton } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -57,7 +57,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		showFilterCollapse = true,
 		showQueryName = true,
 		useFieldApis,
-		savedViewsHeader,
 	} = props;
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 	const [params, setParams] = useApiMonitoringParams();
@@ -180,6 +179,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	// Helpers to reduce cognitive complexity in main render
 	const renderLeftActions = (): JSX.Element => (
 		<section className="left-actions">
+			<Filter size="md" />
 			<Typography.Text className="text">
 				{displayedQueryName ? 'Filters for' : 'Filters'}
 			</Typography.Text>
@@ -216,13 +216,13 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				</Combobox>
 			) : (
 				displayedQueryName && (
-					<TooltipSimple
+					<Tooltip
 						title={`Filter currently in sync with query ${displayedQueryName}`}
 					>
 						<Typography.Text className="sync-tag">
 							{displayedQueryName}
 						</Typography.Text>
-					</TooltipSimple>
+					</Tooltip>
 				)
 			)}
 		</section>
@@ -230,54 +230,51 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {

 	const renderRightActions = (): JSX.Element => (
 		<section className="right-actions">
-			<TooltipSimple title="Reset All">
+			<Tooltip title="Reset All">
 				<Button
-					variant="ghost"
+					variant="link"
 					color="secondary"
-					size="icon"
 					aria-label="Reset All"
+					className="right-action-icon-container"
 					onClick={handleReset}
-					prefix={<RefreshCw size={14} />}
+					prefix={<RefreshCw className="sync-icon" size="md" />}
 				/>
-			</TooltipSimple>
+			</Tooltip>
 			{showFilterCollapse && (
-				<TooltipSimple title="Collapse Filters">
+				<Tooltip title="Collapse Filters">
 					<Button
-						variant="ghost"
+						variant="link"
 						color="secondary"
-						size="icon"
 						aria-label="Collapse Filters"
+						className="right-action-icon-container"
 						onClick={handleFilterVisibilityChange}
-						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size={14} />}
+						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
 					/>
-				</TooltipSimple>
+				</Tooltip>
+			)}
+			{isDynamicFilters && (
+				<AuthZButton
+					checks={QuickFilterManagePermissions}
+					variant="link"
+					color="secondary"
+					aria-label="Settings"
+					className={classNames('right-action-icon-container', {
+						active: isSettingsOpen,
+					})}
+					onClick={(): void => setIsSettingsOpen(true)}
+					testId="settings-icon-container"
+					prefix={
+						<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
+							<SettingsIcon
+								className="settings-icon"
+								data-testid="settings-icon"
+								width={14}
+								height={14}
+							/>
+						</Tooltip>
+					}
+				/>
 			)}
-			{isDynamicFilters &&
-				(isSettingsDisabled ? (
-					<AuthZButton
-						checks={QuickFilterManagePermissions}
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						aria-label="Settings"
-						onClick={(): void => setIsSettingsOpen(true)}
-						testId="settings-icon-container"
-						prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
-					/>
-				) : (
-					<TooltipSimple title="Settings">
-						<Button
-							variant="ghost"
-							color="secondary"
-							size="icon"
-							aria-label="Settings"
-							className={classNames({ active: isSettingsOpen })}
-							onClick={(): void => setIsSettingsOpen(true)}
-							data-testid="settings-icon-container"
-							prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
-						/>
-					</TooltipSimple>
-				))}
 		</section>
 	);

@@ -382,7 +379,6 @@ 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()}
--- a/frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss
+++ b/frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss
@@ -1,73 +0,0 @@
-// The one `overflow: hidden` in the chain. Ancestors (RouteTab, AppLayout)
-// only hand height down; each pane below owns its own scroll.
-.layout {
-	display: flex;
-	flex: 1;
-	height: 100%;
-	min-height: 0;
-	overflow: hidden;
-}
-
-.sidebar {
-	width: 280px;
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	position: relative;
-	overflow: visible;
-	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 {
-	flex: 1;
-	min-width: 0;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}
-
-.contentInner {
-	height: 100%;
-}
--- a/frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx
@@ -1,109 +0,0 @@
-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';
-
-import styles from './QuickFiltersLayout.module.scss';
-
-// Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
-type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
-	typeof QuickFilters,
-	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;
-	savedViewProps?: SavedViewsElementProps;
-	showFilters: boolean;
-	className?: string;
-	contentClassName?: string;
-	testId?: string;
-	children: ReactNode;
-}
-
-function QuickFiltersLayout({
-	quickFilterProps,
-	savedViewProps,
-	showFilters,
-	className,
-	contentClassName,
-	testId,
-	children,
-}: QuickFiltersLayoutProps): JSX.Element {
-	const [isViewsListOpen, setIsViewsListOpen] = useState(false);
-	const isSavedViewEnabled = useSavedViewEnabled();
-
-	const hasQuickFilters = !!quickFilterProps;
-	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
-
-	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
-
-	const isViewsListPinned = hasSavedViews && !hasQuickFilters;
-	const isViewsListVisible = isViewsListPinned || isViewsListOpen;
-
-	const isSliding = hasQuickFilters && isViewsListOpen;
-
-	const savedViewsHeader = hasSavedViews ? (
-		<SavedViewsHeader
-			{...savedViewProps}
-			onOpenViews={
-				isViewsListVisible ? undefined : (): void => setIsViewsListOpen(true)
-			}
-		/>
-	) : undefined;
-
-	return (
-		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showSidebar && (
-				<aside
-					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
-					data-testid="quick-filters-layout-filters"
-				>
-					<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 && isViewsListVisible && (
-							<SavedViewsPanel
-								{...savedViewProps}
-								onClose={
-									isViewsListPinned ? undefined : (): void => setIsViewsListOpen(false)
-								}
-							/>
-						)}
-					</div>
-				</aside>
-			)}
-			<section
-				className={cx(styles.content, contentClassName)}
-				data-testid="quick-filters-layout-content"
-			>
-				<OverlayScrollbar>
-					<div className={styles.contentInner}>{children}</div>
-				</OverlayScrollbar>
-			</section>
-		</div>
-	);
-}
-
-export default QuickFiltersLayout;
--- a/frontend/src/components/QuickFilters/QuickFiltersLayout/tests/QuickFiltersLayout.test.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersLayout/tests/QuickFiltersLayout.test.tsx
@@ -1,228 +0,0 @@
-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';
-
-jest.mock('../QuickFiltersLayout.module.scss', () => ({
-	__esModule: true,
-	default: {
-		layout: 'layout',
-		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,
-		savedViewsHeader,
-	}: {
-		source: string;
-		savedViewsHeader?: React.ReactNode;
-	}): JSX.Element => (
-		<div data-testid="quick-filters">
-			{savedViewsHeader}
-			{source}
-		</div>
-	),
-}));
-
-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}>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		const filtersPane = screen.getByTestId('quick-filters-layout-filters');
-		expect(filtersPane).toContainElement(screen.getByTestId('quick-filters'));
-		expect(screen.getByTestId('quick-filters')).toHaveTextContent(
-			QuickFiltersSource.TRACES_EXPLORER,
-		);
-		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}
-				savedViewProps={savedViewProps}
-			>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		expect(
-			screen.queryByTestId('quick-filters-layout-filters'),
-		).not.toBeInTheDocument();
-		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
-		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="root-extra"
-				contentClassName="content-extra"
-				testId="layout"
-			>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		expect(screen.getByTestId('layout')).toHaveClass('layout', 'root-extra');
-		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
-			'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);
-			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
-
-			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);
-			expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
-		});
-
-		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');
-		});
-	});
-});
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss
@@ -6,22 +6,29 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
-	height: 100%;
 	background: var(--l1-background);
-	border-right: 1px solid var(--l1-border);
+	transition: width 0.05s ease-in-out;
 	overflow: hidden;
 	color: var(--l1-foreground);
-	transition:
-		transform 0.2s ease-in-out,
-		visibility 0s;
+
+	&.qf-logs-explorer {
+		height: calc(100vh - 45px);
+	}
+
+	&.qf-exceptions {
+		height: 100vh;
+	}
+
+	&.qf-api-monitoring {
+		height: calc(100vh - 45px);
+	}
+
+	&.qf-traces-explorer {
+		height: calc(100vh - 45px);
+	}

 	&.hidden {
-		transform: translateX(-100%);
-		visibility: hidden;
-		pointer-events: none;
-		transition:
-			transform 0.2s ease-in-out,
-			visibility 0s 0.2s;
+		width: 0;
 	}
 	.qf-header {
 		display: flex;
--- a/frontend/src/components/QuickFilters/types.ts
+++ b/frontend/src/components/QuickFilters/types.ts
@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -62,7 +61,6 @@ export interface IQuickFiltersProps {
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
 	useFieldApis?: QuickFilterCheckboxUseFieldApis;
-	savedViewsHeader?: ReactNode;
 }

 export enum QuickFiltersSource {
--- a/frontend/src/components/RouteTab/RouteTab.module.scss
+++ b/frontend/src/components/RouteTab/RouteTab.module.scss
@@ -1,38 +0,0 @@
-// Hands the parent's height down to the active pane and lets the pane scroll
-// its own content, so TopNav and the tab bar stay put. Child combinators only
-// (nested Tabs must not be caught).
-.routeTab {
-	flex: 1;
-	min-height: 0;
-}
-
-.routeTab > :global(.ant-tabs-content-holder) {
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab > :global(.ant-tabs-content-holder) > :global(.ant-tabs-content) {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab
-	> :global(.ant-tabs-content-holder)
-	> :global(.ant-tabs-content)
-	> :global(.ant-tabs-tabpane-active) {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab
-	> :global(.ant-tabs-content-holder)
-	> :global(.ant-tabs-content)
-	> :global(.ant-tabs-tabpane-active)
-	> :global(.overlay-scrollbar) {
-	flex: 1;
-	min-height: 0;
-}
--- a/frontend/src/components/RouteTab/RouteTab.test.tsx
+++ b/frontend/src/components/RouteTab/RouteTab.test.tsx
@@ -5,11 +5,6 @@ import { fireEvent, render, screen } from 'tests/test-utils';
 import RouteTab from './index';
 import { RouteTabProps } from './types';

-jest.mock('./RouteTab.module.scss', () => ({
-	__esModule: true,
-	default: { routeTab: 'routeTab' },
-}));
-
 function DummyComponent1(): JSX.Element {
 	return <div>Dummy Component 1</div>;
 }
@@ -79,36 +74,6 @@ describe('RouteTab component', () => {
 		expect(history.location.pathname).toBe('/tab2');
 	});

-	it('applies the layout class alongside a custom className', () => {
-		const history = createMemoryHistory();
-		const { container } = render(
-			<Router history={history}>
-				<RouteTab
-					history={history}
-					routes={testRoutes}
-					activeKey="Tab1"
-					className="custom-tabs"
-				/>
-			</Router>,
-		);
-		expect(container.querySelector('.ant-tabs')).toHaveClass(
-			'routeTab',
-			'custom-tabs',
-		);
-	});
-
-	it('renders the active tab content inside an overlay scrollbar', () => {
-		const history = createMemoryHistory();
-		const { container } = render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
-			</Router>,
-		);
-		expect(
-			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
-		).toHaveTextContent('Dummy Component 1');
-	});
-
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
 		const history = createMemoryHistory();
--- a/frontend/src/components/RouteTab/index.tsx
+++ b/frontend/src/components/RouteTab/index.tsx
@@ -5,32 +5,20 @@ import {
 	useParams,
 } from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
-import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';

 import { RouteTabProps } from './types';

-import styles from './RouteTab.module.scss';
-
 interface Params {
 	[key: string]: string;
 }

-/**
- * Each pane scrolls its own content inside an OverlayScrollbar, so the tab bar
- * stays put. Mounted as the page root the pane is bounded to the viewport; inside
- * a plain block wrapper the scroller is inert and the page scrolls as usual.
- * Pane content that needs a bounded box must size itself with `height: 100%`
- * (the scroller's viewport is block flow, so `flex: 1` has no effect there).
- */
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
 	history,
 	showRightSection,
-	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
@@ -62,16 +50,11 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: (
-			<OverlayScrollbar>
-				<Component />
-			</OverlayScrollbar>
-		),
+		children: <Component />,
 	}));

 	return (
 		<Tabs
-			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -47,5 +47,4 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
-	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }
--- a/frontend/src/constants/theme.ts
+++ b/frontend/src/constants/theme.ts
@@ -129,10 +129,6 @@ const themeColors = {
 		salmon2: '#FFAB91',
 		salmon3: '#E0876A',
 	},
-	/* Series palette (dark). Hues in the red band are deliberately absent: red is
-	   reserved for thresholds and error states, so an arbitrary series must never
-	   claim it. generateColor indexes by `hash % Object.keys(...).length`, so
-	   adding or removing an entry recolors every existing chart. */
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',
@@ -156,13 +152,13 @@ const themeColors = {

 		// Oranges (3)
 		festivalOrange: '#F2994A',
-		amber1: '#E1A155',
+		coralOrange: '#E17055',
 		pumpkin: '#FF7F50',

-		// Olives / Greens (3)
-		olive1: '#DFC33A',
-		olive2: '#D5E55D',
-		green7: '#81C220',
+		// Reds (3)
+		radicalRed: '#FF1A66',
+		crimsonRed: '#EB5757',
+		fireRed: '#E10600',

 		// Pinks (3)
 		hotPink: '#E84393',
@@ -195,9 +191,9 @@ const themeColors = {
 		orange1: '#D35400',
 		orange2: '#E67E22',
 		orange3: '#F5B041',
-		green8: '#5AC02B',
-		green9: '#48E043',
-		green10: '#68E788',
+		red1: '#C0392B',
+		red2: '#E74C3C',
+		red3: '#EC7063',
 		pink1: '#D81B60',
 		pink2: '#E91E63',
 		pink3: '#F06292',
@@ -216,9 +212,9 @@ const themeColors = {
 		coral1: '#E67E22',
 		coral2: '#F39C12',
 		coral3: '#F5B041',
-		teal7: '#2BC07B',
-		teal8: '#43E0C5',
-		teal9: '#68D9E7',
+		crimson1: '#C0392B',
+		crimson2: '#E74C3C',
+		crimson3: '#EC7063',
 		violet1: '#8E44AD',
 		violet2: '#9B59B6',
 		violet3: '#BB8FCE',
@@ -228,18 +224,18 @@ const themeColors = {
 		forest1: '#27AE60',
 		forest2: '#2ECC71',
 		forest3: '#58D68D',
-		cyan4: '#83C2EB',
+		blush1: '#FF6F91',
 		blush2: '#FF85A2',
 		blush3: '#FFA0B3',
 		lavender1: '#9B59B6',
 		lavender2: '#AF7AC5',
 		lavender3: '#C39BD3',
-		blue7: '#4375E0',
-		blue8: '#686DE7',
-		indigo1: '#A68EED',
-		indigo2: '#B980EA',
-		purple6: '#EE98D9',
-		olive3: '#F2F0AE',
+		tomato1: '#E74C3C',
+		tomato2: '#EC7063',
+		tomato3: '#F1948A',
+		salmon1: '#FF6B6B',
+		salmon2: '#FF8787',
+		salmon3: '#FFA1A1',
 		mustard1: '#F1C40F',
 		mustard2: '#F7DC6F',
 		mustard3: '#F9E79F',
@@ -258,9 +254,9 @@ const themeColors = {
 		blue4: '#2874A6',
 		blue5: '#2E86C1',
 		blue6: '#3498DB',
-		purple4: '#A52BC0',
-		purple5: '#E043D0',
-		magenta4: '#E768B5',
+		red4: '#C0392B',
+		red5: '#E74C3C',
+		red6: '#EC7063',
 		orange4: '#D35400',
 		orange5: '#E67E22',
 		orange6: '#EB984E',
@@ -271,19 +267,18 @@ const themeColors = {
 		gold5: '#F1C40F',
 		gold6: '#F4D03F',
 	},
-	/* Series palette (light). Same red-free constraint as chartcolors above. */
 	lightModeColor: {
-		magenta1: '#D81B60',
+		radicalRed: '#D81B60',

 		dodgerBlueDark: '#1E5BD9',
 		steelgrey: '#344B6B',
 		steelpurple: '#5E548E',
 		steelindigo: '#8E4A7C',
 		steelpink: '#B63A6F',
-		amber1: '#E1A14B',
+		steelcoral: '#E14B5A',
 		steelorange: '#E76F2F',
 		steelgold: '#E09B00',
-		olive1: '#C9BD3A',
+		steelrust: '#C93A50',
 		steelgreen: '#2F7D69',

 		mediumOrchidDark: '#8E24AA',
@@ -291,17 +286,17 @@ const themeColors = {
 		seaGreen: '#1E7F5A',
 		turquoiseBlueDark: '#007EA7',
 		silverDark: '#5F5F5F',
-		green1: '#ACDB24',
-		green2: '#66CC21',
+		outrageousOrangeDark: '#E64A19',
+		roseBudDark: '#D84315',
 		deepSkyBlueDark: '#0277BD',
 		royalBlue: '#2A4FDB',

 		avocadoDark: '#6B6B1E',
 		mintGreenDark: '#2E9E55',
-		green3: '#3F8B3A',
+		chestnut: '#8B3A3A',
 		limaDark: '#5C7F00',
 		olive: '#6E7F00',
-		green4: '#3CC964',
+		beautyBushDark: '#C93C3C',

 		danube: '#4F6FB3',
 		oliveDrab: '#4F7F1A',
@@ -309,13 +304,13 @@ const themeColors = {
 		electricLimeDark: '#6B8F00',
 		robin: '#2F4FCC',

-		teal1: '#1FBF83',
+		harleyOrange: '#CC2E12',
 		gladeGreen: '#4F7F46',
 		hemlock: '#5C5C45',
 		vidaLoca: '#3D6B00',
 		rust: '#993300',

-		teal2: '#28C6C1',
+		red: '#C62828',
 		blue: '#1A237E',
 		green: '#1B7F3A',
 		purple: '#6A1B9A',
@@ -325,7 +320,7 @@ const themeColors = {
 		brown: '#7A3A1E',
 		teal: '#006D6F',
 		limeDark: '#4C8C2B',
-		cyan1: '#1B546D',
+		maroon: '#6D1B1B',
 		navy: '#0D1B5E',
 		gray: '#616161',

@@ -333,25 +328,25 @@ const themeColors = {
 		indigo: '#303F9F',
 		slateGray: '#556B7C',
 		chocolate: '#9C4A1A',
-		blue1: '#3B74DF',
+		tomato: '#E53935',
 		steelBlue: '#3A6EA5',

 		peruDark: '#B35E00',
 		darkOliveGreen: '#445B1F',
-		blue2: '#4041B0',
+		indianRed: '#B04040',
 		mediumSlateBlue: '#5C6BC0',
-		indigo1: '#6644A9',
+		rosyBrownDark: '#A94444',
 		darkSlateGray: '#2E4A4A',

 		fuchsia: '#C511C5',
-		indigo2: '#AD42E0',
-		purple1: '#C83AC5',
+		salmonDark: '#E64A3C',
+		darkSalmonDark: '#C85A3A',
 		paleVioletRedDark: '#C2186A',

 		mediumPurple: '#7E57C2',
 		darkOrchid: '#7B1FA2',
 		mediumSeaGreenDark: '#2E8B57',
-		purple2: '#E573BC',
+		lightCoralDark: '#E57373',

 		gold: '#D4AF37',
 		sandyBrownDark: '#C76A15',
--- a/frontend/src/container/AIAssistant/components/ActionsSection/utils/tests/openSavedView.test.ts
+++ b/frontend/src/container/AIAssistant/components/ActionsSection/utils/tests/openSavedView.test.ts
@@ -3,22 +3,15 @@ import {
 	MessageActionKindDTO,
 	SavedViewEntityDTO,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import {
-	getSavedView,
-	listSavedViews,
-} from 'api/generated/services/saved-view';
-import {
-	GetSavedView200,
-	ListSavedViews200,
-	SavedviewtypesPanelTypeDTO,
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSchemaVersionDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { getAllViews } from 'api/saveView/getAllViews';
+import { getViewById } from 'api/saveView/getViewById';
 import ROUTES from 'constants/routes';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+import { AllViewsProps, ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
+import { AxiosResponse } from 'axios';
 import type { History } from 'history';

 import {
@@ -38,7 +31,8 @@ import {
 } from '../resolveOpenResource';
 import { resourceRoute, ResourceType } from '../resourceRoute';

-jest.mock('api/generated/services/saved-view');
+jest.mock('api/saveView/getAllViews');
+jest.mock('api/saveView/getViewById');

 jest.mock(
 	'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi',
@@ -54,45 +48,43 @@ jest.mock(
 	}),
 );

-const mockedListSavedViews = listSavedViews as jest.MockedFunction<
-	typeof listSavedViews
+const mockedGetAllViews = getAllViews as jest.MockedFunction<
+	typeof getAllViews
 >;
-const mockedGetSavedView = getSavedView as jest.MockedFunction<
-	typeof getSavedView
+const mockedGetViewById = getViewById as jest.MockedFunction<
+	typeof getViewById
 >;

-function makeView(
-	id: string,
-	source: SavedviewtypesSourceDTO,
-): SavedviewtypesSavedViewDTO {
+function makeView(id: string, sourcePage: DataSource): ViewProps {
 	return {
 		id,
-		name: `view-${id}`,
-		source,
-		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
+		name: `View ${id}`,
+		category: 'test',
 		createdAt: '2021-07-07T06:31:00.000Z',
 		createdBy: 'user',
 		updatedAt: '2021-07-07T06:33:00.000Z',
 		updatedBy: 'user',
-		spec: {
-			displayName: `View ${id}`,
-			panelType: SavedviewtypesPanelTypeDTO.list,
-			requestType: 'raw',
-			queries: [{ type: 'builder_query', spec: { name: 'A', signal: source } }],
-		},
-	} as unknown as SavedviewtypesSavedViewDTO;
+		sourcePage,
+		tags: [],
+		extraData: '',
+		compositeQuery: {
+			panelType: PANEL_TYPES.LIST,
+		} as ICompositeMetricQuery,
+	};
 }

-function mockViewsResponse(
-	views: SavedviewtypesSavedViewDTO[],
-): ListSavedViews200 {
-	return { status: 'success', data: views };
+function mockViewsResponse(views: ViewProps[]): AxiosResponse<AllViewsProps> {
+	return {
+		data: { status: 'success', data: views },
+	} as AxiosResponse<AllViewsProps>;
 }

 function mockViewByIdResponse(
-	view: SavedviewtypesSavedViewDTO,
-): GetSavedView200 {
-	return { status: 'success', data: view };
+	view: ViewProps,
+): AxiosResponse<{ status: string; data: ViewProps }> {
+	return {
+		data: { status: 'success', data: view },
+	} as AxiosResponse<{ status: string; data: ViewProps }>;
 }

 describe('resourceRoute', () => {
@@ -198,33 +190,18 @@ describe('resolveOpenResource', () => {

 describe('findSavedViewInLists', () => {
 	beforeEach(() => {
-		mockedListSavedViews.mockReset();
+		mockedGetAllViews.mockReset();
 	});

 	it('loads only the hinted source when entity is provided', async () => {
-		const tracesView = makeView('view-traces', SavedviewtypesSourceDTO.traces);
-		mockedListSavedViews.mockResolvedValueOnce(mockViewsResponse([tracesView]));
+		const tracesView = makeView('view-traces', DataSource.TRACES);
+		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([tracesView]));

 		const result = await findSavedViewInLists('view-traces', DataSource.TRACES);

 		expect(result).toStrictEqual(tracesView);
-		expect(mockedListSavedViews).toHaveBeenCalledTimes(1);
-		expect(mockedListSavedViews).toHaveBeenCalledWith({
-			source: SavedviewtypesSourceDTO.traces,
-		});
-	});
-
-	it('treats a null list as empty and probes the next source', async () => {
-		const metricsView = makeView('view-metrics', SavedviewtypesSourceDTO.metrics);
-		mockedListSavedViews
-			.mockResolvedValueOnce({ status: 'success', data: null })
-			.mockResolvedValueOnce(mockViewsResponse([]))
-			.mockResolvedValueOnce(mockViewsResponse([metricsView]));
-
-		const result = await findSavedViewInLists('view-metrics');
-
-		expect(result).toStrictEqual(metricsView);
-		expect(mockedListSavedViews).toHaveBeenCalledTimes(3);
+		expect(mockedGetAllViews).toHaveBeenCalledTimes(1);
+		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
 	});
 });

@@ -250,75 +227,52 @@ describe('openSavedView', () => {
 	it('navigates with history.push and view query params', () => {
 		const push = jest.fn();
 		const history = { push } as unknown as History;
-		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
+		const view = makeView('view-logs', DataSource.LOGS);

 		openSavedView(view, history);

 		expect(push).toHaveBeenCalledTimes(1);
 		const pushedUrl = push.mock.calls[0][0] as string;
 		expect(pushedUrl).toContain(ROUTES.LOGS_EXPLORER);
-		const params = new URLSearchParams(pushedUrl.split('?')[1]);
-		expect(params.get(QueryParams.viewKey)).toBe('"view-logs"');
-		expect(params.get(QueryParams.viewName)).toBe('"View view-logs"');
-		expect(params.get(QueryParams.panelTypes)).toBe('"list"');
-	});
-
-	it('throws when the view has no source', () => {
-		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
-		delete view.source;
-
-		expect(() =>
-			openSavedView(view, { push: jest.fn() } as unknown as History),
-		).toThrow('Unsupported saved view source');
-	});
-
-	it('throws when the view has no queries', () => {
-		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
-		view.spec.queries = [];
-
-		expect(() =>
-			openSavedView(view, { push: jest.fn() } as unknown as History),
-		).toThrow('Saved view is missing query data');
+		expect(pushedUrl).toContain(QueryParams.viewKey);
 	});
 });

 describe('openSavedViewByKey', () => {
 	beforeEach(() => {
-		mockedListSavedViews.mockReset();
-		mockedGetSavedView.mockReset();
+		mockedGetAllViews.mockReset();
+		mockedGetViewById.mockReset();
 	});

 	it('prefers the direct view lookup endpoint', async () => {
-		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
-		mockedGetSavedView.mockResolvedValueOnce(mockViewByIdResponse(view));
+		const view = makeView('view-logs', DataSource.LOGS);
+		mockedGetViewById.mockResolvedValueOnce(mockViewByIdResponse(view));
 		const push = jest.fn();
 		const history = { push } as unknown as History;

 		await openSavedViewByKey('view-logs', DataSource.LOGS, history);

-		expect(mockedGetSavedView).toHaveBeenCalledWith({ id: 'view-logs' });
-		expect(mockedListSavedViews).not.toHaveBeenCalled();
+		expect(mockedGetViewById).toHaveBeenCalledWith('view-logs');
+		expect(mockedGetAllViews).not.toHaveBeenCalled();
 		expect(push).toHaveBeenCalled();
 	});

 	it('falls back to list probing when direct lookup fails', async () => {
-		const view = makeView('view-traces', SavedviewtypesSourceDTO.traces);
-		mockedGetSavedView.mockRejectedValueOnce(new Error('not found'));
-		mockedListSavedViews.mockResolvedValueOnce(mockViewsResponse([view]));
+		const view = makeView('view-traces', DataSource.TRACES);
+		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
+		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([view]));
 		const push = jest.fn();
 		const history = { push } as unknown as History;

 		await openSavedViewByKey('view-traces', DataSource.TRACES, history);

-		expect(mockedListSavedViews).toHaveBeenCalledWith({
-			source: SavedviewtypesSourceDTO.traces,
-		});
+		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
 		expect(push).toHaveBeenCalled();
 	});

 	it('throws when the saved view does not exist', async () => {
-		mockedGetSavedView.mockRejectedValueOnce(new Error('not found'));
-		mockedListSavedViews.mockResolvedValue(mockViewsResponse([]));
+		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
+		mockedGetAllViews.mockResolvedValue(mockViewsResponse([]));

 		await expect(
 			openSavedViewByKey('missing', DataSource.LOGS, {
--- a/frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts
+++ b/frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts
@@ -1,20 +1,15 @@
-import {
-	getSavedView,
-	listSavedViews,
-} from 'api/generated/services/saved-view';
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
+import { getAllViews } from 'api/saveView/getAllViews';
+import { getViewById } from 'api/saveView/getViewById';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { SavedViewSourcePage } from 'container/SavedViews/types';
-import { findSavedView } from 'container/SavedViews/utils/findSavedView';
-import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
-import { toSavedViewSource } from 'container/SavedViews/utils/toSavedViewSource';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
+import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { History } from 'history';

-type SavedViewSourceHint = SavedViewSourcePage;
+type SavedViewSourceHint = DataSource | 'meter';

 const DEFAULT_PROBE_SOURCES: SavedViewSourceHint[] = [
 	DataSource.LOGS,
@@ -25,15 +20,13 @@ const DEFAULT_PROBE_SOURCES: SavedViewSourceHint[] = [
 export async function findSavedViewInLists(
 	viewKey: string,
 	sourceHint?: SavedViewSourceHint | null,
-): Promise<SavedviewtypesSavedViewDTO | null> {
+): Promise<ViewProps | null> {
 	const sources = sourceHint ? [sourceHint] : DEFAULT_PROBE_SOURCES;

 	for (const source of sources) {
 		try {
-			const response = await listSavedViews({
-				source: toSavedViewSource(source),
-			});
-			const match = findSavedView(response.data, viewKey);
+			const response = await getAllViews(source);
+			const match = response.data.data.find((view) => view.id === viewKey);
 			if (match) {
 				return match;
 			}
@@ -48,11 +41,11 @@ export async function findSavedViewInLists(
 async function loadSavedView(
 	viewKey: string,
 	sourceHint?: SavedViewSourceHint | null,
-): Promise<SavedviewtypesSavedViewDTO> {
+): Promise<ViewProps> {
 	try {
-		const response = await getSavedView({ id: viewKey });
-		if (response.data) {
-			return response.data;
+		const response = await getViewById(viewKey);
+		if (response.data?.data) {
+			return response.data.data;
 		}
 	} catch {
 		// Fall back to list probing when the direct lookup fails.
@@ -92,23 +85,20 @@ export function buildExplorerNavigationUrl(
 	return `${route}?${params.toString()}`;
 }

-export function openSavedView(
-	view: SavedviewtypesSavedViewDTO,
-	history: History,
-): void {
-	const route = view.source ? explorerRouteForSourcePage(view.source) : null;
+export function openSavedView(view: ViewProps, history: History): void {
+	const route = explorerRouteForSourcePage(view.sourcePage);
 	if (!route) {
 		throw new Error('Unsupported saved view source');
 	}

-	if (!view.spec.queries?.length) {
+	if (!view.compositeQuery) {
 		throw new Error('Saved view is missing query data');
 	}

-	const query = getSavedViewQuery(view);
+	const query = mapQueryDataFromApi(view.compositeQuery);
 	const url = buildExplorerNavigationUrl(route, query, {
-		[QueryParams.panelTypes]: view.spec.panelType as unknown as PANEL_TYPES,
-		[QueryParams.viewName]: view.spec.displayName,
+		[QueryParams.panelTypes]: view.compositeQuery.panelType as PANEL_TYPES,
+		[QueryParams.viewName]: view.name,
 		[QueryParams.viewKey]: view.id,
 	});
 	history.push(url);
@@ -122,3 +112,6 @@ export async function openSavedViewByKey(
 	const view = await loadSavedView(viewKey, sourceHint);
 	openSavedView(view, history);
 }
+
+/** @deprecated Use findSavedViewInLists — kept for tests. */
+export const findSavedView = findSavedViewInLists;
--- a/frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss
+++ b/frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss
@@ -1,15 +1,23 @@
-.api-monitoring-explorer {
-	.api-quick-filters-header {
-		padding: 12px;
-		border-bottom: 1px solid var(--l1-border);
-		border-right: 1px solid var(--l1-border);
+.api-monitoring-page {
+	display: flex;
+	height: 100%;

-		display: flex;
-		align-items: center;
-		gap: 6px;
+	.api-quick-filter-left-section {
+		width: 0%;
+		flex-shrink: 0;

-		font-size: 14px;
-		line-height: 18px;
+		.api-quick-filters-header {
+			padding: 12px;
+			border-bottom: 1px solid var(--l1-border);
+			border-right: 1px solid var(--l1-border);
+
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			font-size: 14px;
+			line-height: 18px;
+		}
 	}

 	.api-module-right-section {
@@ -153,6 +161,16 @@
 			}
 		}
 	}
+
+	&.filter-visible {
+		.api-quick-filter-left-section {
+			width: 260px;
+		}
+
+		.api-module-right-section {
+			width: calc(100% - 260px);
+		}
+	}
 }

 .no-filtered-domains-message-container {
--- a/frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import cx from 'classnames';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -19,21 +20,20 @@ function Explorer(): JSX.Element {

 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="api-monitoring-explorer"
-				showFilters
-				quickFilterProps={{
-					className: 'qf-api-monitoring',
-					source: QuickFiltersSource.API_MONITORING,
-					signal: SignalType.API_MONITORING,
-					showFilterCollapse: false,
-					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {},
-					useFieldApis: quickFilterFieldApis,
-				}}
-			>
+			<div className={cx('api-monitoring-page', 'filter-visible')}>
+				<section className="api-quick-filter-left-section">
+					<QuickFilters
+						className="qf-api-monitoring"
+						source={QuickFiltersSource.API_MONITORING}
+						signal={SignalType.API_MONITORING}
+						showFilterCollapse={false}
+						showQueryName={false}
+						handleFilterVisibilityChange={(): void => {}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</section>
 				<DomainList />
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }
--- a/frontend/src/container/AppLayout/AppLayout.styles.scss
+++ b/frontend/src/container/AppLayout/AppLayout.styles.scss
@@ -53,10 +53,6 @@
 		z-index: 0;
 		background: var(--l1-background);

-		// Column so the bottom strip sits under the scrolling content, not inside it.
-		display: flex;
-		flex-direction: column;
-
 		&.full-screen-content {
 			width: 100%;
 		}
@@ -74,9 +70,7 @@

 .chat-support-gateway {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: calc(20px + var(--bottom-strip-height, 0px));
+	bottom: 20px;
 	right: 20px;
 	z-index: 1000;

--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -43,7 +43,6 @@ import { USER_PREFERENCES } from 'constants/userPreferences';
 import AIAssistantModal from 'container/AIAssistant/AIAssistantModal';
 import AIAssistantPanel from 'container/AIAssistant/AIAssistantPanel';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
-import BottomStrip from 'container/BottomStrip';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import dayjs from 'dayjs';
@@ -52,7 +51,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
@@ -404,7 +402,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [pathname]);

 	const isToDisplayLayout = isLoggedIn;
-	const isSavedViewEnabled = useSavedViewEnabled();

 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
 	const pageTitle = t(routeKey);
@@ -871,10 +868,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 								</OverlayScrollbar>
 							</LayoutContent>
 						</Sentry.ErrorBoundary>
-
-						{isSavedViewEnabled && isToDisplayLayout && !renderFullScreen && (
-							<BottomStrip />
-						)}
 					</div>

 					{isLoggedIn && isAIAssistantEnabled && (
--- a/frontend/src/container/AppLayout/styles.ts
+++ b/frontend/src/container/AppLayout/styles.ts
@@ -12,12 +12,8 @@ export const Layout = styled(LayoutComponent)`
 	}
 `;

-// Takes the height left in `.app-content` after the bottom strip.
-// `min-height: 0` is not needed right now, overlayscrollbars already sets
-// `overflow: auto` here. Kept so this does not break if that goes away.
 export const LayoutContent = styled(LayoutComponent.Content)`
-	flex: 1;
-	min-height: 0;
+	height: 100%;
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}
--- a/frontend/src/container/BottomStrip/BottomStrip.module.scss
+++ b/frontend/src/container/BottomStrip/BottomStrip.module.scss
@@ -1,36 +0,0 @@
-.strip {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-6);
-
-	flex-shrink: 0;
-	height: var(--bottom-strip-height);
-	padding: 0 var(--spacing-6);
-
-	background: var(--l2-background);
-	border-top: 1px solid var(--l2-border);
-
-	font-family: var(--font-family-sf-mono, monospace);
-
-	// Above page content, below the body-portalled overlays that are meant to
-	// cover the strip.
-	position: relative;
-	z-index: 1;
-}
-
-.left,
-.right {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-	min-width: 0;
-}
-
-// Temporary placeholder for the left slot. Replaced later.
-.version {
-	color: var(--l2-foreground);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
--- a/frontend/src/container/BottomStrip/tests/BottomStrip.test.tsx
+++ b/frontend/src/container/BottomStrip/tests/BottomStrip.test.tsx
@@ -1,49 +0,0 @@
-import { render } from 'tests/test-utils';
-
-import BottomStrip, {
-	BOTTOM_STRIP_HEIGHT,
-	BOTTOM_STRIP_HEIGHT_VAR,
-	BOTTOM_STRIP_ON_CLASS,
-} from '..';
-
-describe('BottomStrip', () => {
-	it('publishes the body class and height property while mounted', () => {
-		const { unmount } = render(<BottomStrip />);
-
-		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(true);
-		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
-			`${BOTTOM_STRIP_HEIGHT}px`,
-		);
-
-		unmount();
-
-		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(false);
-		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
-			'',
-		);
-	});
-
-	// The string is whatever the Go build injected, so it is rendered untouched —
-	// same as SideNav. Release tags carry the "v", local builds do not.
-	it.each([['v0.134.67'], ['main-64f1c2a']])(
-		'renders the build version %p exactly as given',
-		(version) => {
-			const { getByTestId } = render(<BottomStrip />, undefined, {
-				appContextOverrides: {
-					versionData: { version, ee: 'Y', setupCompleted: true },
-				},
-			});
-
-			expect(getByTestId('bottom-strip-version')).toHaveTextContent(version);
-		},
-	);
-
-	it('renders the strip without a version when none is available', () => {
-		const { getByTestId, queryByTestId } = render(<BottomStrip />, undefined, {
-			appContextOverrides: { versionData: null },
-		});
-
-		expect(getByTestId('bottom-strip')).toBeInTheDocument();
-		expect(queryByTestId('bottom-strip-version')).not.toBeInTheDocument();
-	});
-});
--- a/frontend/src/container/BottomStrip/index.tsx
+++ b/frontend/src/container/BottomStrip/index.tsx
@@ -1,42 +0,0 @@
-import { useLayoutEffect } from 'react';
-import { useAppContext } from 'providers/App/App';
-
-import styles from './BottomStrip.module.scss';
-
-export const BOTTOM_STRIP_HEIGHT = 24;
-
-export const BOTTOM_STRIP_ON_CLASS = 'bottom-strip-on';
-export const BOTTOM_STRIP_HEIGHT_VAR = '--bottom-strip-height';
-
-function BottomStrip(): JSX.Element {
-	const { versionData } = useAppContext();
-	const version = versionData?.version?.trim();
-
-	useLayoutEffect(() => {
-		document.body.classList.add(BOTTOM_STRIP_ON_CLASS);
-		document.body.style.setProperty(
-			BOTTOM_STRIP_HEIGHT_VAR,
-			`${BOTTOM_STRIP_HEIGHT}px`,
-		);
-
-		return (): void => {
-			document.body.classList.remove(BOTTOM_STRIP_ON_CLASS);
-			document.body.style.removeProperty(BOTTOM_STRIP_HEIGHT_VAR);
-		};
-	}, []);
-
-	return (
-		<div className={styles.strip} data-testid="bottom-strip">
-			<div className={styles.left}>
-				{version && (
-					<span className={styles.version} data-testid="bottom-strip-version">
-						{version}
-					</span>
-				)}
-			</div>
-			<div className={styles.right} />
-		</div>
-	);
-}
-
-export default BottomStrip;
--- a/frontend/src/container/CreateAlertV2/Footer/styles.scss
+++ b/frontend/src/container/CreateAlertV2/Footer/styles.scss
@@ -1,8 +1,6 @@
 .create-alert-v2-footer {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: var(--bottom-strip-height, 0px);
+	bottom: 0;
 	left: 63px;
 	right: 0;
 	background-color: var(--l1-background);
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
@@ -1,8 +1,6 @@
 .explorer-options-container {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: var(--bottom-strip-height, 0px);
+	bottom: 0px;
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;
--- a/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss
@@ -1,8 +1,6 @@
 .explorer-option-droppable-container {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: var(--bottom-strip-height, 0px);
+	bottom: 0;
 	width: -webkit-fill-available;
 	height: 24px;
 	display: flex;
--- a/frontend/src/container/Home/Home.styles.scss
+++ b/frontend/src/container/Home/Home.styles.scss
@@ -1,6 +1,7 @@
 .home-container {
 	display: flex;
 	flex-direction: column;
+	min-height: 100vh;
 	overflow-y: auto;
 	height: 100%;
 	width: 100%;
--- a/frontend/src/container/Home/SavedViews/SavedViews.tsx
+++ b/frontend/src/container/Home/SavedViews/SavedViews.tsx
@@ -1,18 +1,17 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Skeleton } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import logEvent from 'api/common/logEvent';
-import { useListSavedViews } from 'api/generated/services/saved-view';
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
 import ROUTES from 'constants/routes';
-import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
+import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
+import { ViewProps } from 'types/api/saveViews/types';
+import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';

 import floppyDiscUrl from '@/assets/Icons/floppy-disc.svg';
@@ -36,40 +35,38 @@ export default function SavedViews({
 }): JSX.Element {
 	const { user } = useAppContext();
 	const [selectedEntity, setSelectedEntity] = useState<string>('logs');
-	const [selectedEntityViews, setSelectedEntityViews] = useState<
-		SavedviewtypesSavedViewDTO[]
-	>([]);
+	const [selectedEntityViews, setSelectedEntityViews] = useState<any[]>([]);

 	const {
 		data: logsViewsData,
 		isLoading: logsViewsLoading,
 		isError: logsViewsError,
-	} = useListSavedViews({ source: SavedviewtypesSourceDTO.logs });
+	} = useGetAllViews(DataSource.LOGS);

 	const {
 		data: tracesViewsData,
 		isLoading: tracesViewsLoading,
 		isError: tracesViewsError,
-	} = useListSavedViews({ source: SavedviewtypesSourceDTO.traces });
+	} = useGetAllViews(DataSource.TRACES);

 	const {
 		data: metricsViewsData,
 		isLoading: metricsViewsLoading,
 		isError: metricsViewsError,
-	} = useListSavedViews({ source: SavedviewtypesSourceDTO.metrics });
+	} = useGetAllViews(DataSource.METRICS);

 	const logsViews = useMemo(
-		() => [...(logsViewsData?.data || [])],
+		() => [...(logsViewsData?.data.data || [])],
 		[logsViewsData],
 	);

 	const tracesViews = useMemo(
-		() => [...(tracesViewsData?.data || [])],
+		() => [...(tracesViewsData?.data.data || [])],
 		[tracesViewsData],
 	);

 	const metricsViews = useMemo(
-		() => [...(metricsViewsData?.data || [])],
+		() => [...(metricsViewsData?.data.data || [])],
 		[metricsViewsData],
 	);

@@ -91,22 +88,39 @@ export default function SavedViews({

 	const { handleExplorerTabChange } = useHandleExplorerTabChange();

-	const handleRedirectQuery = (view: SavedviewtypesSavedViewDTO): void => {
+	const handleRedirectQuery = (view: ViewProps): void => {
 		logEvent('Homepage: Saved view clicked', {
 			viewId: view.id,
-			viewName: view.spec.displayName,
+			viewName: view.name,
 			entity: selectedEntity,
 		});

-		handleExplorerTabChange(
-			view.spec.panelType,
-			{
-				query: getSavedViewQuery(view),
-				viewName: view.spec.displayName,
-				viewKey: view.id,
-			},
-			SOURCEPAGE_VS_ROUTES[selectedEntity],
-		);
+		let currentViews: ViewProps[] = [];
+		if (selectedEntity === 'logs') {
+			currentViews = logsViews;
+		} else if (selectedEntity === 'traces') {
+			currentViews = tracesViews;
+		} else if (selectedEntity === 'metrics') {
+			currentViews = metricsViews;
+		}
+
+		const currentViewDetails = getViewDetailsUsingViewKey(view.id, currentViews);
+		if (!currentViewDetails) {
+			return;
+		}
+		const { query, name, id, panelType: currentPanelType } = currentViewDetails;
+
+		if (selectedEntity) {
+			handleExplorerTabChange(
+				currentPanelType,
+				{
+					query,
+					viewName: name,
+					viewKey: id,
+				},
+				SOURCEPAGE_VS_ROUTES[selectedEntity],
+			);
+		}
 	};

 	useEffect(() => {
@@ -225,10 +239,24 @@ export default function SavedViews({
 							/>

 							<div className="saved-view-item-name home-data-item-name">
-								{view.spec.displayName}
+								{view.name}
 							</div>
 						</div>

+						<div className="saved-view-item-description home-data-item-tag">
+							{view.tags?.map((tag: string) => {
+								if (tag === '') {
+									return null;
+								}
+
+								return (
+									<Badge color="sienna" key={tag}>
+										{tag}
+									</Badge>
+								);
+							})}
+						</div>
+
 						<Button
 							type="link"
 							size="small"
@@ -279,7 +307,7 @@ export default function SavedViews({
 		logEvent('Homepage: Saved views switched', {
 			tab,
 		});
-		let currentViews: SavedviewtypesSavedViewDTO[] = [];
+		let currentViews: ViewProps[] = [];
 		if (tab === 'logs') {
 			currentViews = logsViews;
 		} else if (tab === 'traces') {
--- a/frontend/src/container/LLMObservability/Explorer/Explorer.styles.scss
+++ b/frontend/src/container/LLMObservability/Explorer/Explorer.styles.scss
@@ -65,6 +65,8 @@
 }

 .trace-explorer-page {
+	display: flex;
+
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -73,8 +75,32 @@
 	--input-hover-border-color: var(--internal-ant-border-color-hover);
 	--input-focus-border-color: var(--internal-ant-border-color-hover);

+	.filter {
+		width: 260px;
+		height: 100%;
+		min-height: 100vh;
+
+		border-right: 0px;
+		border: 1px solid var(--l1-border);
+		background-color: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+			width: 258px;
+		}
+	}
+
 	.trace-explorer {
+		width: 100%;
 		background: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+		}
+
 		border-color: var(--l1-border);
 	}
+	.trace-explorer.filters-expanded {
+		width: calc(100% - 260px);
+	}
 }
--- a/frontend/src/container/LLMObservability/Explorer/Explorer.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/Explorer.tsx
@@ -2,10 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -186,21 +188,26 @@ function Explorer(): JSX.Element {

 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
+			<div
 				className="trace-explorer-page"
-				testId="llm-observability-explorer"
-				showFilters={isOpen}
-				quickFilterProps={{
-					className: 'qf-traces-explorer',
-					source: QuickFiltersSource.AI_OBSERVABILITY,
-					signal: SignalType.AI_OBSERVABILITY,
-					useFieldApis: quickFiltersFieldApis,
-					handleFilterVisibilityChange: (): void => {
-						setOpen(!isOpen);
-					},
-				}}
+				data-testid="llm-observability-explorer"
 			>
-				<div className="trace-explorer">
+				<Card className="filter" hidden={!isOpen}>
+					<QuickFilters
+						className="qf-traces-explorer"
+						source={QuickFiltersSource.AI_OBSERVABILITY}
+						signal={SignalType.AI_OBSERVABILITY}
+						useFieldApis={quickFiltersFieldApis}
+						handleFilterVisibilityChange={(): void => {
+							setOpen(!isOpen);
+						}}
+					/>
+				</Card>
+				<div
+					className={cx('trace-explorer', {
+						'filters-expanded': isOpen,
+					})}
+				>
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -284,7 +291,7 @@ function Explorer(): JSX.Element {
 						)}
 					</div>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }
--- a/frontend/src/container/Licenses/Licenses.styles.scss
+++ b/frontend/src/container/Licenses/Licenses.styles.scss
@@ -1,4 +1,7 @@
 .licenses-page {
+	max-height: 100vh;
+	overflow: hidden;
+
 	.licenses-page-header {
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);
@@ -29,6 +32,7 @@

 		.licenses-page-content {
 			flex: 1;
+			height: calc(100vh - 48px);
 			background: var(--l1-background);
 			padding: 10px 8px;
 			overflow-y: auto;
--- a/frontend/src/container/ListAlertRules/ListAlertRules.module.scss
+++ b/frontend/src/container/ListAlertRules/ListAlertRules.module.scss
@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	flex: 1;
+	height: calc(100vh - 62px);
 	min-height: 400px;
 }

--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
@@ -1,7 +1,18 @@
 .meter-explorer-container {
+	display: flex;
+	flex-direction: row;
+
+	.meter-explorer-quick-filters-section {
+		width: 280px;
+		border-right: 1px solid var(--l1-border);
+
+		&.hidden {
+			display: none;
+		}
+	}
+
 	.meter-explorer-content-section {
-		// Clearance for the fixed ExplorerOptions bar.
-		padding-bottom: 80px;
+		width: 100%;

 		// Meant to fix the query builder colors
 		--input-background: var(--l2-background);
@@ -72,6 +83,14 @@
 			}
 		}
 	}
+
+	&.quick-filters-open {
+		.meter-explorer-content-section {
+			width: calc(100% - 280px);
+		}
+	}
+
+	padding-bottom: 80px;
 }

 .dashboards-and-alerts-popover-container {
--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
@@ -3,8 +3,9 @@ import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
@@ -120,21 +121,29 @@ function Explorer(): JSX.Element {

 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="meter-explorer-container"
-				showFilters={showQuickFilters}
-				quickFilterProps={{
-					className: 'qf-meter-explorer',
-					source: QuickFiltersSource.METER_EXPLORER,
-					signal: SignalType.METER_EXPLORER,
-					showFilterCollapse: true,
-					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {
-						setShowQuickFilters(!showQuickFilters);
-					},
-					useFieldApis: quickFilterFieldApis,
-				}}
+			<div
+				className={cx('meter-explorer-container', {
+					'quick-filters-open': showQuickFilters,
+				})}
 			>
+				<div
+					className={cx('meter-explorer-quick-filters-section', {
+						hidden: !showQuickFilters,
+					})}
+				>
+					<QuickFilters
+						className="qf-meter-explorer"
+						source={QuickFiltersSource.METER_EXPLORER}
+						signal={SignalType.METER_EXPLORER}
+						showFilterCollapse
+						showQueryName={false}
+						handleFilterVisibilityChange={(): void => {
+							setShowQuickFilters(!showQuickFilters);
+						}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</div>
+
 				<div className="meter-explorer-content-section">
 					<div className="meter-explorer-explore-content">
 						<div className="explore-header">
@@ -187,7 +196,7 @@ function Explorer(): JSX.Element {
 						splitedQueries={splitedQueries}
 					/>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }
--- a/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
@@ -10,8 +10,6 @@ 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';
@@ -349,61 +347,56 @@ function Explorer(): JSX.Element {

 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<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}
+			<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}
 							/>
-						</div>
+						</Tooltip>
 					</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}
+					<div className="explore-header-right-actions">
+						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
+						<DateTimeSelector showAutoRefresh />
+						<RightToolbarActions
+							onStageRunQuery={(): void => handleRunQuery()}
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
 						/>
 					</div>
 				</div>
-			</QuickFiltersLayout>
+				<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}
+					/>
+				</div>
+			</div>
 			<ExplorerOptionWrapper
 				disabled={!stagedQuery}
 				query={exportDefaultQuery}
--- a/frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss
+++ b/frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss
@@ -60,6 +60,9 @@
 	.metrics-table-container {
 		padding-bottom: 48px;
 		.ant-table {
+			margin-left: -16px;
+			margin-right: -16px;
+
 			.ant-table-thead > tr > th {
 				padding: 12px;
 				font-weight: 500;
@@ -181,9 +184,7 @@

 		.ant-pagination {
 			position: fixed;
-			// Lifted above the bottom strip. Don't extend this pattern — new
-			// fixed-bottom UI belongs in the bounded layout, not in another offset here.
-			bottom: var(--bottom-strip-height, 0px);
+			bottom: 0;
 			width: calc(100% - 54px);
 			background: var(--l1-background);
 			padding: 16px;
--- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts
+++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts
@@ -41,7 +41,7 @@ import { buildCompositeKey, getOptionsFromKeys } from './utils';
 interface UseOptionsMenuProps {
 	storageKey?: string;
 	dataSource: DataSource;
-	aggregateOperator?: string;
+	aggregateOperator: string;
 	initialOptions?: InitialOptions;
 }

--- a/frontend/src/container/SavedViews/SaveChangesMenu.tsx
+++ b/frontend/src/container/SavedViews/SaveChangesMenu.tsx
@@ -1,34 +0,0 @@
-import { useMemo } from 'react';
-import { Check } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import SavedViewsIconButton from './SavedViewsIconButton';
-import { SaveChangesMenuProps } from './types';
-
-function SaveChangesMenu({
-	disabled,
-	onSaveAsNew,
-	onUpdate,
-}: SaveChangesMenuProps): JSX.Element {
-	const items = useMemo<MenuItem[]>(
-		() => [
-			{ key: 'save-as-new', label: 'Save as new view', onClick: onSaveAsNew },
-			{ key: 'update', label: 'Update selected view', onClick: onUpdate },
-		],
-		[onSaveAsNew, onUpdate],
-	);
-
-	return (
-		<DropdownMenuSimple menu={{ items }} align="end">
-			<SavedViewsIconButton
-				title="Save changes"
-				icon={<Check size={14} />}
-				color="warning"
-				disabled={disabled}
-				testId="saved-views-save-changes"
-			/>
-		</DropdownMenuSimple>
-	);
-}
-
-export default SaveChangesMenu;
--- a/frontend/src/container/SavedViews/SaveViewModal.module.scss
+++ b/frontend/src/container/SavedViews/SaveViewModal.module.scss
@@ -1,18 +0,0 @@
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-}
-
-.label {
-	font-size: var(--font-size-xs);
-	color: var(--l1-foreground);
-}
-
-.footer {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--spacing-4);
-	width: 100%;
-}
--- a/frontend/src/container/SavedViews/SaveViewModal.tsx
+++ b/frontend/src/container/SavedViews/SaveViewModal.tsx
@@ -1,94 +0,0 @@
-import { FormEvent, useState } from 'react';
-import { Check, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-
-import { SAVE_VIEW_MODAL_TITLE } from './constants';
-import { SaveViewModalProps } from './types';
-
-import styles from './SaveViewModal.module.scss';
-
-const NAME_INPUT_ID = 'save-view-name';
-
-function SaveViewModal({
-	mode,
-	isSaving,
-	onClose,
-	onSave,
-}: SaveViewModalProps): JSX.Element {
-	const [name, setName] = useState('');
-	const displayName = name.trim();
-
-	const handleSave = async (): Promise<void> => {
-		if (!displayName || isSaving) {
-			return;
-		}
-		if (await onSave(displayName)) {
-			onClose();
-		}
-	};
-
-	const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
-		event.preventDefault();
-		void handleSave();
-	};
-
-	return (
-		<DialogWrapper
-			open
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title={SAVE_VIEW_MODAL_TITLE[mode]}
-			testId="save-view-modal"
-			footer={
-				<div className={styles.footer}>
-					<Button
-						variant="outlined"
-						color="secondary"
-						size="md"
-						prefix={<X size={14} />}
-						onClick={onClose}
-						testId="save-view-cancel"
-					>
-						Cancel
-					</Button>
-					<Button
-						color="primary"
-						size="md"
-						prefix={<Check size={14} />}
-						loading={isSaving}
-						disabled={!displayName}
-						onClick={(): void => {
-							void handleSave();
-						}}
-						testId="save-view-submit"
-					>
-						Save view
-					</Button>
-				</div>
-			}
-		>
-			<form className={styles.field} onSubmit={handleSubmit}>
-				<label htmlFor={NAME_INPUT_ID}>
-					<Typography.Text className={styles.label}>Enter view name</Typography.Text>
-				</label>
-				<Input
-					id={NAME_INPUT_ID}
-					placeholder="Eg. payments-view"
-					value={name}
-					onChange={(event): void => setName(event.target.value)}
-					autoFocus
-					autoComplete="off"
-					testId="save-view-name"
-				/>
-			</form>
-		</DialogWrapper>
-	);
-}
-
-export default SaveViewModal;
--- a/frontend/src/container/SavedViews/SavedViewsHeader.module.scss
+++ b/frontend/src/container/SavedViews/SavedViewsHeader.module.scss
@@ -1,61 +0,0 @@
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-2);
-	padding: var(--spacing-2) var(--spacing-5);
-	border-bottom: 1px solid var(--l1-border);
-	color: var(--l1-foreground);
-	flex-shrink: 0;
-
-	&.isDirty {
-		background: linear-gradient(
-			to right,
-			var(--callout-warning-background),
-			transparent
-		);
-	}
-}
-
-.name {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	min-width: 0;
-	padding: var(--spacing-1) var(--spacing-4);
-	border-radius: var(--spacing-1);
-	background: var(--l3-background);
-	color: var(--l1-foreground);
-	font-size: var(--font-size-sm);
-
-	&.isDirty {
-		background: var(--callout-warning-background);
-		color: var(--callout-warning-title);
-	}
-}
-
-.nameText {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.dot {
-	width: var(--spacing-3);
-	height: var(--spacing-3);
-	flex-shrink: 0;
-	border-radius: 50%;
-	background: var(--callout-warning-icon);
-}
-
-.skeleton {
-	flex: 1;
-	min-width: 0;
-}
-
-.actions {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	gap: var(--spacing-1);
-}
--- a/frontend/src/container/SavedViews/SavedViewsHeader.tsx
+++ b/frontend/src/container/SavedViews/SavedViewsHeader.tsx
@@ -1,146 +0,0 @@
-import { useCallback, useState } from 'react';
-import cx from 'classnames';
-import { Menu, Plus, Undo2, X } from '@signozhq/icons';
-import { Skeleton } from '@signozhq/ui/skeleton';
-import { toast } from '@signozhq/ui/sonner';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { MY_VIEW_NAME, SAVED_VIEW_TOAST_POSITION } from './constants';
-import { useActiveSavedView } from './hooks/useActiveSavedView';
-import { useRestoreLastUsedView } from './hooks/useRestoreLastUsedView';
-import { useSavedViewActions } from './hooks/useSavedViewActions';
-import SaveChangesMenu from './SaveChangesMenu';
-import SavedViewsIconButton from './SavedViewsIconButton';
-import SaveViewModal from './SaveViewModal';
-import { SaveViewModalMode } from './types';
-
-import styles from './SavedViewsHeader.module.scss';
-
-function SavedViewsHeader({
-	source,
-	onOpenViews,
-}: {
-	source: SavedviewtypesSourceDTO;
-	// Absent while the list is on screen.
-	onOpenViews?: () => void;
-}): JSX.Element {
-	const { view, isLoading, hasUnsavedChanges } = useActiveSavedView(source);
-	const { selectView, revertView, clearView, createView, updateView, isSaving } =
-		useSavedViewActions(source);
-	useRestoreLastUsedView({ source, selectView });
-
-	const [modalMode, setModalMode] = useState<SaveViewModalMode | null>(null);
-
-	const handleSave = useCallback(
-		async (displayName: string): Promise<boolean> => {
-			const id = await createView(displayName);
-			if (!id) {
-				return false;
-			}
-			toast.success('You have created a new view.', {
-				position: SAVED_VIEW_TOAST_POSITION,
-				...(onOpenViews && { action: { label: 'View', onClick: onOpenViews } }),
-			});
-			return true;
-		},
-		[createView, onOpenViews],
-	);
-
-	const handleUpdate = useCallback(async (): Promise<void> => {
-		if (view && (await updateView(view))) {
-			toast.success('View updated', { position: SAVED_VIEW_TOAST_POSITION });
-		}
-	}, [view, updateView]);
-
-	const openSaveAsNew = useCallback((): void => setModalMode('saveAsNew'), []);
-	const closeModal = useCallback((): void => setModalMode(null), []);
-
-	const name = view?.spec.displayName ?? MY_VIEW_NAME;
-	const isDirty = !!view && hasUnsavedChanges;
-
-	return (
-		<div
-			className={cx(styles.header, { [styles.isDirty]: isDirty })}
-			data-testid="saved-views-header"
-			data-source={source}
-		>
-			{isLoading ? (
-				<Skeleton.Input
-					active
-					size="small"
-					className={styles.skeleton}
-					testId="saved-views-loading"
-				/>
-			) : (
-				<TooltipSimple title={name}>
-					<span
-						className={cx(styles.name, { [styles.isDirty]: isDirty })}
-						data-testid="saved-views-name"
-					>
-						{isDirty && <span className={styles.dot} />}
-						<span className={styles.nameText}>{name}</span>
-					</span>
-				</TooltipSimple>
-			)}
-
-			<div className={styles.actions}>
-				{!view && (
-					<SavedViewsIconButton
-						title="Create new view"
-						icon={<Plus size={14} />}
-						disabled={isLoading}
-						onClick={(): void => setModalMode('create')}
-						testId="saved-views-create"
-					/>
-				)}
-				{view && !isDirty && (
-					<SavedViewsIconButton
-						title="Clear view"
-						icon={<Undo2 size={14} />}
-						onClick={clearView}
-						testId="saved-views-clear"
-					/>
-				)}
-				{view && isDirty && (
-					<>
-						<SaveChangesMenu
-							disabled={isSaving}
-							onSaveAsNew={openSaveAsNew}
-							onUpdate={(): void => {
-								void handleUpdate();
-							}}
-						/>
-						<SavedViewsIconButton
-							title="Discard changes"
-							icon={<X size={14} />}
-							color="warning"
-							disabled={isSaving}
-							onClick={(): void => revertView(view)}
-							testId="saved-views-discard"
-						/>
-					</>
-				)}
-				{!isDirty && onOpenViews && (
-					<SavedViewsIconButton
-						title="All views"
-						icon={<Menu size={14} />}
-						onClick={onOpenViews}
-						testId="saved-views-open"
-					/>
-				)}
-			</div>
-
-			{modalMode && (
-				<SaveViewModal
-					mode={modalMode}
-					isSaving={isSaving}
-					onClose={closeModal}
-					onSave={handleSave}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default SavedViewsHeader;
--- a/frontend/src/container/SavedViews/SavedViewsIconButton.tsx
+++ b/frontend/src/container/SavedViews/SavedViewsIconButton.tsx
@@ -1,41 +0,0 @@
-import { forwardRef } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-
-import { SavedViewsIconButtonProps } from './types';
-
-// forwardRef and rest props so a menu can use it as its trigger.
-const SavedViewsIconButton = forwardRef<
-	HTMLButtonElement,
-	SavedViewsIconButtonProps
->(function SavedViewsIconButton(
-	{
-		title,
-		icon,
-		testId,
-		color = 'secondary',
-		disabled,
-		onClick,
-		...triggerProps
-	},
-	ref,
-): JSX.Element {
-	return (
-		<TooltipSimple title={title}>
-			<Button
-				ref={ref}
-				variant="ghost"
-				color={color}
-				size="icon"
-				aria-label={title}
-				prefix={icon}
-				disabled={disabled}
-				onClick={onClick}
-				{...triggerProps}
-				data-testid={testId}
-			/>
-		</TooltipSimple>
-	);
-});
-
-export default SavedViewsIconButton;
--- a/frontend/src/container/SavedViews/SavedViewsPanel.module.scss
+++ b/frontend/src/container/SavedViews/SavedViewsPanel.module.scss
@@ -1,21 +0,0 @@
-.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);
-}
--- a/frontend/src/container/SavedViews/SavedViewsPanel.tsx
+++ b/frontend/src/container/SavedViews/SavedViewsPanel.tsx
@@ -1,40 +0,0 @@
-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;
--- a/frontend/src/container/SavedViews/tests/SavedViewsHeader.save.test.tsx
+++ b/frontend/src/container/SavedViews/tests/SavedViewsHeader.save.test.tsx
@@ -1,211 +0,0 @@
-import { act, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { toast } from '@signozhq/ui/sonner';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { DataSource } from 'types/common/queryBuilder';
-
-import SavedViewsHeader from '../SavedViewsHeader';
-import {
-	explorerUrl,
-	makeView,
-	mockSavedViewsApi,
-	queryWith,
-	renderWithExplorerProviders,
-	urlParam,
-	viewUrl,
-} from './savedViewsTestUtils';
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-function renderHeader(
-	url: string,
-): ReturnType<typeof renderWithExplorerProviders> {
-	return renderWithExplorerProviders(
-		<SavedViewsHeader
-			source={SavedviewtypesSourceDTO.traces}
-			onOpenViews={jest.fn()}
-		/>,
-		url,
-	);
-}
-
-const modal = (): HTMLElement => screen.getByTestId('save-view-modal');
-const isModalOpen = (): boolean => !!screen.queryByTestId('save-view-modal');
-
-async function openDirtyView(
-	view: ReturnType<typeof makeView>,
-): Promise<ReturnType<typeof renderWithExplorerProviders>> {
-	const rendered = renderHeader(viewUrl(PATH, view));
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
-			view.spec.displayName,
-		),
-	);
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
-	);
-	act(() => {
-		rendered.history.push(
-			explorerUrl(PATH, {
-				query: queryWith(DataSource.TRACES, 'has_error = false'),
-				panelType: PANEL_TYPES.LIST,
-				viewKey: view.id,
-			}),
-		);
-	});
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-discard')).toBeInTheDocument(),
-	);
-	return rendered;
-}
-
-async function chooseFromSaveMenu(item: string): Promise<void> {
-	await userEvent.click(screen.getByTestId('saved-views-save-changes'));
-	await userEvent.click(await screen.findByRole('menuitem', { name: item }));
-}
-
-async function submitName(name: string): Promise<void> {
-	await userEvent.type(screen.getByTestId('save-view-name'), name);
-	await userEvent.click(screen.getByTestId('save-view-submit'));
-}
-
-describe('SavedViewsHeader saving', () => {
-	beforeEach(() => {
-		localStorage.clear();
-	});
-
-	describe('create', () => {
-		it('saves the current state under a generated name and opens it', async () => {
-			const requests = mockSavedViewsApi([], { createdId: 'view-new' });
-			const { history } = renderHeader(explorerUrl(PATH, {}));
-
-			await userEvent.click(screen.getByTestId('saved-views-create'));
-
-			expect(within(modal()).getByText('Create new view')).toBeInTheDocument();
-			expect(screen.getByTestId('save-view-submit')).toBeDisabled();
-
-			await submitName('Slow checkout');
-
-			await waitFor(() => expect(requests.created).toHaveLength(1));
-			expect(requests.created[0]).toStrictEqual(
-				expect.objectContaining({
-					generateName: true,
-					source: SavedviewtypesSourceDTO.traces,
-					schemaVersion: 'v2',
-					spec: expect.objectContaining({
-						displayName: 'Slow checkout',
-						panelType: 'list',
-					}),
-				}),
-			);
-			await waitFor(() =>
-				expect(urlParam(history, QueryParams.viewKey)).toBe(
-					JSON.stringify('view-new'),
-				),
-			);
-			expect(toast.success).toHaveBeenCalledWith(
-				'You have created a new view.',
-				expect.objectContaining({ position: 'top-right' }),
-			);
-			await waitFor(() => expect(isModalOpen()).toBe(false));
-			await waitFor(() =>
-				expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
-					'Slow checkout',
-				),
-			);
-		});
-
-		it('keeps the modal open and reports a failed save', async () => {
-			const requests = mockSavedViewsApi([], { createStatus: 500 });
-			const { history } = renderHeader(explorerUrl(PATH, {}));
-
-			await userEvent.click(screen.getByTestId('saved-views-create'));
-			await submitName('Slow checkout');
-
-			await waitFor(() => expect(toast.error).toHaveBeenCalled());
-			expect(requests.created).toHaveLength(1);
-			expect(isModalOpen()).toBe(true);
-			expect(screen.getByTestId('save-view-name')).toHaveValue('Slow checkout');
-			expect(urlParam(history, QueryParams.viewKey)).toBeNull();
-			expect(toast.success).not.toHaveBeenCalled();
-		});
-
-		it('cancel closes the modal without saving', async () => {
-			const requests = mockSavedViewsApi([]);
-			renderHeader(explorerUrl(PATH, {}));
-
-			await userEvent.click(screen.getByTestId('saved-views-create'));
-			await userEvent.type(screen.getByTestId('save-view-name'), 'Draft');
-			await userEvent.click(screen.getByTestId('save-view-cancel'));
-
-			await waitFor(() => expect(isModalOpen()).toBe(false));
-			expect(requests.created).toHaveLength(0);
-		});
-	});
-
-	it('save as new creates another view from the changed state', async () => {
-		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-		const requests = mockSavedViewsApi([errors], { createdId: 'view-copy' });
-		const { history } = await openDirtyView(errors);
-
-		await chooseFromSaveMenu('Save as new view');
-
-		expect(within(modal()).getByText('Save as new view')).toBeInTheDocument();
-		await submitName('Errors copy');
-
-		await waitFor(() => expect(requests.created).toHaveLength(1));
-		const body = requests.created[0] as {
-			spec: {
-				displayName: string;
-				queries: { spec: { filter: { expression: string } } }[];
-			};
-		};
-		expect(body.spec.displayName).toBe('Errors copy');
-		expect(body.spec.queries[0].spec.filter.expression).toBe('has_error = false');
-		expect(requests.updated).toHaveLength(0);
-		await waitFor(() =>
-			expect(urlParam(history, QueryParams.viewKey)).toBe(
-				JSON.stringify('view-copy'),
-			),
-		);
-	});
-
-	it('update stores the changed state on the open view, keeping its name', async () => {
-		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-		const requests = mockSavedViewsApi([errors]);
-		await openDirtyView(errors);
-
-		await chooseFromSaveMenu('Update selected view');
-
-		await waitFor(() => expect(requests.updated).toHaveLength(1));
-		const { id, body } = requests.updated[0] as {
-			id: string;
-			body: {
-				source: string;
-				spec: {
-					displayName: string;
-					queries: { spec: { filter: { expression: string } } }[];
-				};
-			};
-		};
-		expect(id).toBe('view-1');
-		expect(body.source).toBe(SavedviewtypesSourceDTO.traces);
-		expect(body.spec.displayName).toBe('Errors');
-		expect(body.spec.queries[0].spec.filter.expression).toBe('has_error = false');
-		await waitFor(() =>
-			expect(toast.success).toHaveBeenCalledWith(
-				'View updated',
-				expect.objectContaining({ position: 'top-right' }),
-			),
-		);
-		expect(requests.created).toHaveLength(0);
-	});
-});
--- a/frontend/src/container/SavedViews/tests/SavedViewsHeader.test.tsx
+++ b/frontend/src/container/SavedViews/tests/SavedViewsHeader.test.tsx
@@ -1,325 +0,0 @@
-import { act, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { useActiveSavedView } from '../hooks/useActiveSavedView';
-import SavedViewsHeader from '../SavedViewsHeader';
-import {
-	explorerUrl,
-	makeView,
-	mockSavedViewsApi,
-	queryWith,
-	renderWithExplorerProviders,
-	urlParam,
-	viewUrl,
-} from './savedViewsTestUtils';
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-const slow = makeView({
-	id: 'view-2',
-	displayName: 'Slow spans',
-	expression: 'duration_nano > 1000',
-	panelType: PANEL_TYPES.TIME_SERIES,
-});
-
-function renderHeader(
-	url: string,
-	onOpenViews: (() => void) | undefined = jest.fn(),
-): ReturnType<typeof renderWithExplorerProviders> {
-	return renderWithExplorerProviders(
-		<>
-			<SavedViewsHeader
-				source={SavedviewtypesSourceDTO.traces}
-				onOpenViews={onOpenViews}
-			/>
-			<RenderRecorder />
-		</>,
-		url,
-	);
-}
-
-const chip = (): HTMLElement => screen.getByTestId('saved-views-name');
-const isDirty = (): boolean => !!screen.queryByTestId('saved-views-discard');
-const saveChanges = (): HTMLElement =>
-	screen.getByTestId('saved-views-save-changes');
-
-async function waitForView(name: string): Promise<void> {
-	await waitFor(() => expect(chip()).toHaveTextContent(name));
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
-	);
-}
-
-// Each render's answer from the hook the header reads, so a state that lasts a
-// single render is seen too.
-interface RenderRecord {
-	viewId?: string;
-	dirty: boolean;
-	// The staged query had not caught up with the url yet.
-	isStaging: boolean;
-}
-let renders: RenderRecord[] = [];
-function RenderRecorder(): null {
-	const { view, hasUnsavedChanges } = useActiveSavedView(
-		SavedviewtypesSourceDTO.traces,
-	);
-	const { stagedQuery } = useQueryBuilder();
-	const compositeQuery = useGetCompositeQueryParam();
-	renders.push({
-		viewId: view?.id,
-		dirty: hasUnsavedChanges,
-		isStaging: stagedQuery?.id !== compositeQuery?.id,
-	});
-	return null;
-}
-
-async function recordRenders(change: () => void): Promise<RenderRecord[]> {
-	renders = [];
-	act(change);
-	await waitFor(() =>
-		expect(screen.queryByTestId('saved-views-loading')).toBeNull(),
-	);
-	await act(() => new Promise((resolve) => setTimeout(resolve, 100)));
-	return renders;
-}
-
-describe('SavedViewsHeader', () => {
-	beforeEach(() => {
-		localStorage.clear();
-	});
-
-	it('shows My view with create and all views when no view is open', async () => {
-		mockSavedViewsApi([errors]);
-		renderHeader(explorerUrl(PATH, {}));
-
-		expect(chip()).toHaveTextContent('My view');
-		expect(screen.getByTestId('saved-views-create')).toBeInTheDocument();
-		expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
-		expect(screen.queryByTestId('saved-views-clear')).toBeNull();
-		expect(screen.queryByTestId('saved-views-save-changes')).toBeNull();
-		expect(screen.queryByTestId('saved-views-discard')).toBeNull();
-	});
-
-	it('shows a skeleton while the view in the url loads', async () => {
-		mockSavedViewsApi([errors], { getDelay: 150 });
-		renderHeader(viewUrl(PATH, errors));
-
-		expect(screen.getByTestId('saved-views-loading')).toBeInTheDocument();
-		await waitForView('Errors');
-		expect(screen.queryByTestId('saved-views-loading')).toBeNull();
-	});
-
-	it('shows the open view clean, with clear and all views', async () => {
-		mockSavedViewsApi([errors]);
-		renderHeader(viewUrl(PATH, errors));
-
-		await waitForView('Errors');
-		expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
-		expect(screen.queryByTestId('saved-views-create')).toBeNull();
-		expect(isDirty()).toBe(false);
-	});
-
-	it('falls back to My view when the view in the url does not load', async () => {
-		mockSavedViewsApi([]);
-		renderHeader(viewUrl(PATH, errors));
-
-		await waitFor(() =>
-			expect(screen.queryByTestId('saved-views-loading')).toBeNull(),
-		);
-		expect(chip()).toHaveTextContent('My view');
-	});
-
-	it('marks the view dirty once the query changes, swapping in save and discard', async () => {
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(viewUrl(PATH, errors));
-		await waitForView('Errors');
-
-		act(() => {
-			history.push(
-				explorerUrl(PATH, {
-					query: queryWith(DataSource.TRACES, 'has_error = false'),
-					panelType: PANEL_TYPES.LIST,
-					viewKey: errors.id,
-				}),
-			);
-		});
-
-		await waitFor(() => expect(isDirty()).toBe(true));
-		expect(saveChanges()).toBeInTheDocument();
-		expect(screen.queryByTestId('saved-views-clear')).toBeNull();
-		expect(screen.queryByTestId('saved-views-open')).toBeNull();
-	});
-
-	it('marks the view dirty when only the tab changes', async () => {
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(viewUrl(PATH, errors));
-		await waitForView('Errors');
-
-		act(() => {
-			const params = new URLSearchParams(history.location.search);
-			params.set(QueryParams.panelTypes, JSON.stringify(PANEL_TYPES.TABLE));
-			history.push(`${PATH}?${params.toString()}`);
-		});
-
-		await waitFor(() => expect(isDirty()).toBe(true));
-	});
-
-	it('discard puts the saved query and tab back', async () => {
-		mockSavedViewsApi([slow]);
-		const { history } = renderHeader(viewUrl(PATH, slow));
-		await waitForView('Slow spans');
-
-		act(() => {
-			history.push(
-				explorerUrl(PATH, {
-					query: queryWith(DataSource.TRACES, 'has_error = true'),
-					panelType: PANEL_TYPES.LIST,
-					viewKey: slow.id,
-				}),
-			);
-		});
-		await waitFor(() => expect(isDirty()).toBe(true));
-
-		await userEvent.click(screen.getByTestId('saved-views-discard'));
-
-		await waitFor(() => expect(isDirty()).toBe(false));
-		expect(urlParam(history, QueryParams.panelTypes)).toBe(
-			JSON.stringify(PANEL_TYPES.TIME_SERIES),
-		);
-		expect(urlParam(history, QueryParams.viewKey)).toBe(JSON.stringify(slow.id));
-		expect(urlParam(history, QueryParams.viewName)).toBeNull();
-		const query = JSON.parse(
-			decodeURIComponent(urlParam(history, QueryParams.compositeQuery) ?? ''),
-		);
-		expect(query.builder.queryData[0].filter.expression).toBe(
-			'duration_nano > 1000',
-		);
-	});
-
-	it('clear drops the view from the url but keeps the time range', async () => {
-		localStorage.setItem(
-			LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
-			JSON.stringify({ traces: { key: errors.id, value: 'Errors' } }),
-		);
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(viewUrl(PATH, errors, '1h'));
-		await waitForView('Errors');
-
-		await userEvent.click(screen.getByTestId('saved-views-clear'));
-
-		await waitFor(() => expect(chip()).toHaveTextContent('My view'));
-		expect(urlParam(history, QueryParams.viewKey)).toBeNull();
-		expect(urlParam(history, QueryParams.panelTypes)).toBeNull();
-		expect(urlParam(history, QueryParams.relativeTime)).toBe('1h');
-		expect(
-			JSON.parse(localStorage.getItem(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) ?? '{}'),
-		).toStrictEqual({});
-	});
-
-	describe('last used view', () => {
-		beforeEach(() => {
-			localStorage.setItem(
-				LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
-				JSON.stringify({ traces: { key: errors.id, value: 'Errors' } }),
-			);
-		});
-
-		it('reopens on a bare explorer', async () => {
-			mockSavedViewsApi([errors]);
-			const { history } = renderHeader(explorerUrl(PATH, {}));
-
-			await waitForView('Errors');
-			expect(urlParam(history, QueryParams.viewKey)).toBe(
-				JSON.stringify(errors.id),
-			);
-		});
-
-		it('leaves a url with its own query alone', async () => {
-			mockSavedViewsApi([errors]);
-			const { history } = renderHeader(
-				explorerUrl(PATH, {
-					query: queryWith(DataSource.TRACES, 'service.name = "cart"'),
-				}),
-			);
-
-			await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
-			expect(chip()).toHaveTextContent('My view');
-			expect(urlParam(history, QueryParams.viewKey)).toBeNull();
-		});
-	});
-
-	describe('unsaved changes indicator', () => {
-		it('never flashes while switching between views already loaded', async () => {
-			mockSavedViewsApi([errors, slow]);
-			const { history } = renderHeader(viewUrl(PATH, slow));
-			await waitForView('Slow spans');
-			act(() => history.push(viewUrl(PATH, errors)));
-			await waitForView('Errors');
-
-			const states = await recordRenders(() => history.push(viewUrl(PATH, slow)));
-
-			expect(chip()).toHaveTextContent('Slow spans');
-			expect(states.some((render) => render.isStaging)).toBe(true);
-			expect(states.filter((render) => render.dirty)).toStrictEqual([]);
-		});
-
-		it('holds while the query keeps changing on a dirty view', async () => {
-			mockSavedViewsApi([errors]);
-			const { history } = renderHeader(viewUrl(PATH, errors));
-			await waitForView('Errors');
-			act(() => {
-				history.push(
-					explorerUrl(PATH, {
-						query: queryWith(DataSource.TRACES, 'has_error = false'),
-						panelType: PANEL_TYPES.LIST,
-						viewKey: errors.id,
-					}),
-				);
-			});
-			await waitFor(() => expect(isDirty()).toBe(true));
-
-			const states = await recordRenders(() =>
-				history.push(
-					explorerUrl(PATH, {
-						query: queryWith(DataSource.TRACES, 'duration_nano > 5'),
-						panelType: PANEL_TYPES.LIST,
-						viewKey: errors.id,
-					}),
-				),
-			);
-
-			expect(states.some((render) => render.isStaging)).toBe(true);
-			expect(states.filter((render) => !render.dirty)).toStrictEqual([]);
-		});
-	});
-
-	it('on metrics compares no columns and has no all views button', async () => {
-		const cpu = makeView({
-			id: 'view-3',
-			displayName: 'CPU',
-			source: SavedviewtypesSourceDTO.metrics,
-			dataSource: DataSource.METRICS,
-			expression: '',
-			panelType: PANEL_TYPES.TIME_SERIES,
-		});
-		mockSavedViewsApi([cpu]);
-		renderWithExplorerProviders(
-			<SavedViewsHeader source={SavedviewtypesSourceDTO.metrics} />,
-			viewUrl(ROUTES.METRICS_EXPLORER_EXPLORER, cpu),
-			DataSource.METRICS,
-		);
-
-		await waitForView('CPU');
-		expect(isDirty()).toBe(false);
-		expect(screen.queryByTestId('saved-views-open')).toBeNull();
-	});
-});
--- a/frontend/src/container/SavedViews/tests/savedViewsTestUtils.tsx
+++ b/frontend/src/container/SavedViews/tests/savedViewsTestUtils.tsx
@@ -1,304 +0,0 @@
-import { ReactElement, useEffect, useMemo } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { Router } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
-import { render, RenderResult } from '@testing-library/react';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSavedViewSpecDTO,
-	SavedviewtypesSchemaVersionDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { createMemoryHistory, MemoryHistory } from 'history';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { NuqsAdapter } from 'nuqs/adapters/react';
-import { AppContext } from 'providers/App/App';
-import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
-import { QueryBuilderProvider } from 'providers/QueryBuilder';
-import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import store from 'store';
-import { getAppContextMock } from 'tests/test-utils';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { __setSearchParamsGetterForTest } from 'utils/getUnstableCurrentSearchParams';
-
-import { getSavedViewQuery } from '../utils/getSavedViewQuery';
-import { toSavedViewSpec } from '../utils/toSavedViewSpec';
-
-export const API = 'http://localhost/api/v2/saved_views';
-
-// The server stores queries through typed structs: nulls, empty strings,
-// zeros and empty lists do not come back.
-function asStoredByServer(value: unknown): unknown {
-	if (Array.isArray(value)) {
-		const items = value.map(asStoredByServer).filter((v) => v !== undefined);
-		return items.length > 0 ? items : undefined;
-	}
-	if (value !== null && typeof value === 'object') {
-		return Object.fromEntries(
-			Object.entries(value)
-				.map(([key, v]) => [key, asStoredByServer(v)] as const)
-				.filter(([, v]) => v !== undefined),
-		);
-	}
-	return value === null || value === '' || value === 0 ? undefined : value;
-}
-
-export function queryWith(dataSource: DataSource, expression: string): Query {
-	const base = initialQueriesMap[dataSource];
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					filter: { expression },
-					aggregations: [{ expression: 'count()' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-export function makeView({
-	id,
-	displayName,
-	source = SavedviewtypesSourceDTO.traces,
-	dataSource = DataSource.TRACES,
-	expression = 'has_error = true',
-	panelType = PANEL_TYPES.LIST,
-}: {
-	id: string;
-	displayName: string;
-	source?: SavedviewtypesSourceDTO;
-	dataSource?: DataSource;
-	expression?: string;
-	panelType?: PANEL_TYPES;
-}): SavedviewtypesSavedViewDTO {
-	const spec = toSavedViewSpec({
-		query: queryWith(dataSource, expression),
-		panelType,
-		displayName,
-	});
-	return {
-		id,
-		name: `${displayName.toLowerCase()}-abc`,
-		source,
-		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
-		createdBy: 'test@signoz.io',
-		updatedBy: 'test@signoz.io',
-		spec: {
-			...spec,
-			queries: asStoredByServer(
-				JSON.parse(JSON.stringify(spec.queries)),
-			) as SavedviewtypesSavedViewSpecDTO['queries'],
-		},
-	} as SavedviewtypesSavedViewDTO;
-}
-
-// Params written the way the query builder redirect writes them.
-export function explorerUrl(
-	path: string,
-	{
-		query,
-		panelType,
-		viewKey,
-		relativeTime = '15m',
-	}: {
-		query?: Query;
-		panelType?: PANEL_TYPES;
-		viewKey?: string;
-		relativeTime?: string;
-	},
-): string {
-	const params = new URLSearchParams();
-	if (query) {
-		params.set(
-			QueryParams.compositeQuery,
-			encodeURIComponent(JSON.stringify({ ...query, id: `url-${Math.random()}` })),
-		);
-	}
-	if (panelType) {
-		params.set(QueryParams.panelTypes, JSON.stringify(panelType));
-	}
-	if (viewKey) {
-		params.set(QueryParams.viewKey, JSON.stringify(viewKey));
-	}
-	params.set(QueryParams.relativeTime, relativeTime);
-	return `${path}?${params.toString()}`;
-}
-
-export function viewUrl(
-	path: string,
-	view: SavedviewtypesSavedViewDTO,
-	relativeTime?: string,
-): string {
-	return explorerUrl(path, {
-		query: getSavedViewQuery(view),
-		panelType: view.spec.panelType as unknown as PANEL_TYPES,
-		viewKey: view.id,
-		relativeTime,
-	});
-}
-
-export interface Requests {
-	created: unknown[];
-	updated: { id: string; body: unknown }[];
-}
-
-export function mockSavedViewsApi(
-	views: SavedviewtypesSavedViewDTO[],
-	{
-		createStatus = 201,
-		createdId = 'view-new',
-		getDelay = 0,
-	}: { createStatus?: number; createdId?: string; getDelay?: number } = {},
-): Requests {
-	const requests: Requests = { created: [], updated: [] };
-	server.use(
-		rest.get(API, (req, res, ctx) => {
-			const source = req.url.searchParams.get('source');
-			return res(
-				ctx.status(200),
-				ctx.json({
-					status: 'success',
-					data: views.filter((view) => !source || view.source === source),
-				}),
-			);
-		}),
-		rest.get(`${API}/:id`, (req, res, ctx) => {
-			const view = views.find((v) => v.id === req.params.id);
-			if (!view) {
-				return res(ctx.status(404), ctx.json({ status: 'error' }));
-			}
-			return res(
-				ctx.delay(getDelay),
-				ctx.status(200),
-				ctx.json({ status: 'success', data: view }),
-			);
-		}),
-		rest.post(API, async (req, res, ctx) => {
-			const body = await req.json();
-			requests.created.push(body);
-			if (createStatus >= 400) {
-				return res(
-					ctx.status(createStatus),
-					ctx.json({
-						status: 'error',
-						error: { code: 'internal', message: 'boom' },
-					}),
-				);
-			}
-			views.push({ ...body, id: createdId } as SavedviewtypesSavedViewDTO);
-			return res(
-				ctx.status(createStatus),
-				ctx.json({ status: 'success', data: { id: createdId } }),
-			);
-		}),
-		rest.put(`${API}/:id`, async (req, res, ctx) => {
-			const body = await req.json();
-			requests.updated.push({ id: String(req.params.id), body });
-			return res(ctx.status(204));
-		}),
-	);
-	return requests;
-}
-
-const mockStore = configureStore([thunk]);
-
-// What the explorer page does around the header: writes its default query to a
-// bare url, and sets the provider's tab from the url (the provider alone seeds
-// it from the raw, still JSON-quoted param).
-function ExplorerShell({ dataSource }: { dataSource: DataSource }): null {
-	const panelType = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
-	const { handleSetConfig, updateAllQueriesOperators } = useQueryBuilder();
-	const defaultQuery = useMemo(
-		() =>
-			updateAllQueriesOperators(
-				initialQueriesMap[dataSource],
-				PANEL_TYPES.LIST,
-				dataSource,
-			),
-		[updateAllQueriesOperators, dataSource],
-	);
-	useShareBuilderUrl({ defaultValue: defaultQuery });
-	useEffect(() => {
-		handleSetConfig(panelType, dataSource);
-	}, [panelType, dataSource, handleSetConfig]);
-	return null;
-}
-
-export function renderWithExplorerProviders(
-	ui: ReactElement,
-	initialUrl: string,
-	dataSource: DataSource = DataSource.TRACES,
-): RenderResult & { history: MemoryHistory } {
-	const history = createMemoryHistory({ initialEntries: [initialUrl] });
-	// Parts of the explorer read window.location directly, so it follows the
-	// router's history.
-	const syncWindowLocation = (): void =>
-		window.history.replaceState(
-			null,
-			'',
-			`${history.location.pathname}${history.location.search}`,
-		);
-	syncWindowLocation();
-	history.listen(syncWindowLocation);
-	__setSearchParamsGetterForTest(
-		() => new URLSearchParams(history.location.search),
-	);
-	safeNavigateMock.mockImplementation((to) => {
-		history.push(
-			typeof to === 'string'
-				? to
-				: `${to.pathname ?? history.location.pathname}${to.search ?? ''}`,
-		);
-	});
-
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: { refetchOnWindowFocus: false, retry: false },
-			mutations: { retry: false },
-		},
-	});
-
-	const result = render(
-		<Router history={history}>
-			<CompatRouter>
-				<NuqsAdapter>
-					<QueryClientProvider client={queryClient}>
-						<Provider store={mockStore(store.getState())}>
-							<AppContext.Provider value={getAppContextMock('ADMIN')}>
-								<TooltipProvider>
-									<PreferenceContextProvider>
-										<QueryBuilderProvider>
-											<ExplorerShell dataSource={dataSource} />
-											{ui}
-										</QueryBuilderProvider>
-									</PreferenceContextProvider>
-								</TooltipProvider>
-							</AppContext.Provider>
-						</Provider>
-					</QueryClientProvider>
-				</NuqsAdapter>
-			</CompatRouter>
-		</Router>,
-	);
-	return { ...result, history };
-}
-
-export function urlParam(history: MemoryHistory, key: string): string | null {
-	return new URLSearchParams(history.location.search).get(key);
-}
--- a/frontend/src/container/SavedViews/constants.ts
+++ b/frontend/src/container/SavedViews/constants.ts
@@ -1,35 +0,0 @@
-import {
-	SavedviewtypesSchemaVersionDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { SaveViewModalMode } from './types';
-
-export const SAVED_VIEW_SCHEMA_VERSION = SavedviewtypesSchemaVersionDTO.v2;
-
-// Only the logs and traces explorers have columns and formatting to save.
-export const SAVED_VIEW_OPTIONS_DATA_SOURCE: Partial<
-	Record<SavedviewtypesSourceDTO, DataSource>
-> = {
-	[SavedviewtypesSourceDTO.logs]: DataSource.LOGS,
-	[SavedviewtypesSourceDTO.traces]: DataSource.TRACES,
-};
-
-// What selecting a view writes to the url, so clearing it removes exactly these.
-export const SAVED_VIEW_URL_PARAMS = [
-	QueryParams.viewKey,
-	QueryParams.viewName,
-	QueryParams.compositeQuery,
-	QueryParams.panelTypes,
-];
-
-export const MY_VIEW_NAME = 'My view';
-
-export const SAVE_VIEW_MODAL_TITLE: Record<SaveViewModalMode, string> = {
-	create: 'Create new view',
-	saveAsNew: 'Save as new view',
-};
-
-export const SAVED_VIEW_TOAST_POSITION = 'top-right' as const;
--- a/frontend/src/container/SavedViews/hooks/useActiveSavedView.ts
+++ b/frontend/src/container/SavedViews/hooks/useActiveSavedView.ts
@@ -1,76 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { useGetSavedView } from 'api/generated/services/saved-view';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import useOptionsMenu from 'container/OptionsMenu/useOptionsMenu';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { SAVED_VIEW_OPTIONS_DATA_SOURCE } from '../constants';
-import { UseActiveSavedViewResult } from '../types';
-import { hasUnsavedViewChanges } from '../utils/hasUnsavedViewChanges';
-
-export function useActiveSavedView(
-	source: SavedviewtypesSourceDTO,
-): UseActiveSavedViewResult {
-	const { viewKey } = useGetSavedViewParams();
-	const { stagedQuery, panelType } = useQueryBuilder();
-
-	const optionsDataSource = SAVED_VIEW_OPTIONS_DATA_SOURCE[source];
-	const { options } = useOptionsMenu({
-		dataSource: optionsDataSource ?? DataSource.LOGS,
-	});
-
-	const { data, isLoading, isError } = useGetSavedView(
-		{ id: viewKey },
-		{ query: { enabled: !!viewKey } },
-	);
-	const view = viewKey ? data?.data : undefined;
-
-	// The query builder stages the url query a render later. Until the ids
-	// match, keep the last answer for this view; another view starts clean.
-	const compositeQuery = useGetCompositeQueryParam();
-	const isStagedQueryCurrent =
-		!!stagedQuery && stagedQuery.id === compositeQuery?.id;
-	const lastResult = useRef<{ viewId?: string; hasUnsavedChanges: boolean }>({
-		hasUnsavedChanges: false,
-	});
-
-	const hasUnsavedChanges = useMemo((): boolean => {
-		if (!view) {
-			return false;
-		}
-		if (!isStagedQueryCurrent) {
-			return (
-				lastResult.current.viewId === view.id &&
-				lastResult.current.hasUnsavedChanges
-			);
-		}
-		return hasUnsavedViewChanges({
-			view,
-			stagedQuery,
-			panelType: panelType ?? PANEL_TYPES.LIST,
-			options: optionsDataSource ? options : undefined,
-		});
-	}, [
-		view,
-		isStagedQueryCurrent,
-		stagedQuery,
-		panelType,
-		optionsDataSource,
-		options,
-	]);
-
-	useEffect(() => {
-		lastResult.current = { viewId: view?.id, hasUnsavedChanges };
-	}, [view?.id, hasUnsavedChanges]);
-
-	return {
-		view,
-		isLoading: !!viewKey && isLoading,
-		isError: !!viewKey && isError,
-		hasUnsavedChanges,
-	};
-}
--- a/frontend/src/container/SavedViews/hooks/useLastUsedView.ts
+++ b/frontend/src/container/SavedViews/hooks/useLastUsedView.ts
@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import setLocalStorageKey from 'api/browser/localstorage/set';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import {
-	PreservedViewsInLocalStorage,
-	PreservedViewType,
-} from 'container/ExplorerOptions/types';
-
-import { UseLastUsedViewResult } from '../types';
-
-function readLastUsedViews(): PreservedViewsInLocalStorage {
-	try {
-		return JSON.parse(
-			getLocalStorageKey(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) || '{}',
-		) as PreservedViewsInLocalStorage;
-	} catch {
-		return {};
-	}
-}
-
-// Read at call time, not held in state: the hook is used from more than one
-// place and a cached copy would bring back a view another caller just cleared.
-export function useLastUsedView(
-	savedViewSource: SavedviewtypesSourceDTO,
-): UseLastUsedViewResult {
-	// The bar's enum carries the same four values as the v2 source.
-	const source = savedViewSource as unknown as PreservedViewType;
-
-	const getLastUsedViewKey = useCallback(
-		(): string | undefined => readLastUsedViews()[source]?.key,
-		[source],
-	);
-
-	const setLastUsedView = useCallback(
-		(id: string, displayName: string): void => {
-			setLocalStorageKey(
-				LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
-				JSON.stringify({
-					...readLastUsedViews(),
-					[source]: { key: id, value: displayName },
-				}),
-			);
-		},
-		[source],
-	);
-
-	const clearLastUsedView = useCallback((): void => {
-		const { [source]: _removed, ...rest } = readLastUsedViews();
-		setLocalStorageKey(LOCALSTORAGE.LAST_USED_SAVED_VIEWS, JSON.stringify(rest));
-	}, [source]);
-
-	return { getLastUsedViewKey, setLastUsedView, clearLastUsedView };
-}
--- a/frontend/src/container/SavedViews/hooks/useRestoreLastUsedView.ts
+++ b/frontend/src/container/SavedViews/hooks/useRestoreLastUsedView.ts
@@ -1,56 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useGetSavedView } from 'api/generated/services/saved-view';
-import { QueryParams } from 'constants/query';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
-import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
-
-import { UseRestoreLastUsedViewArgs } from '../types';
-import { useLastUsedView } from './useLastUsedView';
-
-export function useRestoreLastUsedView({
-	source,
-	selectView,
-}: UseRestoreLastUsedViewArgs): void {
-	const { viewKey } = useGetSavedViewParams();
-	const { getLastUsedViewKey, clearLastUsedView } = useLastUsedView(source);
-
-	// Decided on the first render, before the explorer writes its default query
-	// to the url; later an empty url means the view was cleared.
-	const [lastUsedViewKey] = useState(() => {
-		const params = getUnstableCurrentSearchParams();
-		const isBare =
-			!params.get(QueryParams.viewKey) && !params.get(QueryParams.compositeQuery);
-		return isBare ? getLastUsedViewKey() : undefined;
-	});
-	const hasRestored = useRef(false);
-
-	const shouldRestore = !!lastUsedViewKey && !viewKey && !hasRestored.current;
-
-	const { data, isError } = useGetSavedView(
-		{ id: lastUsedViewKey ?? '' },
-		{ query: { enabled: shouldRestore } },
-	);
-	const view = data?.data;
-
-	useEffect(() => {
-		if (!shouldRestore) {
-			return undefined;
-		}
-		if (isError) {
-			hasRestored.current = true;
-			clearLastUsedView();
-			return undefined;
-		}
-		if (!view) {
-			return undefined;
-		}
-
-		// Deferred like the bar's restore, so it lands after the explorer has
-		// written its default query to the url.
-		const timeoutId = setTimeout(() => {
-			hasRestored.current = true;
-			selectView(view);
-		}, 0);
-		return (): void => clearTimeout(timeoutId);
-	}, [shouldRestore, isError, view, clearLastUsedView, selectView]);
-}
--- a/frontend/src/container/SavedViews/hooks/useSavedViewActions.ts
+++ b/frontend/src/container/SavedViews/hooks/useSavedViewActions.ts
@@ -1,193 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui/sonner';
-import {
-	invalidateGetSavedView,
-	invalidateListSavedViews,
-	useCreateSavedView,
-	useUpdateSavedView,
-} from 'api/generated/services/saved-view';
-import {
-	RenderErrorResponseDTO,
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSavedViewSpecDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import useOptionsMenu from 'container/OptionsMenu/useOptionsMenu';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { DataSource } from 'types/common/queryBuilder';
-import { toAPIError } from 'utils/errorUtils';
-import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
-
-import {
-	SAVED_VIEW_OPTIONS_DATA_SOURCE,
-	SAVED_VIEW_SCHEMA_VERSION,
-	SAVED_VIEW_TOAST_POSITION,
-	SAVED_VIEW_URL_PARAMS,
-} from '../constants';
-import { UseSavedViewActionsResult } from '../types';
-import { getSavedViewQuery } from '../utils/getSavedViewQuery';
-import { toSavedViewSpec } from '../utils/toSavedViewSpec';
-import { useLastUsedView } from './useLastUsedView';
-
-// Columns and formatting need no handling here: with a viewKey in the url the
-// preference provider reads them from the view, and without one it falls back
-// to the user's own.
-export function useSavedViewActions(
-	source: SavedviewtypesSourceDTO,
-): UseSavedViewActionsResult {
-	const queryClient = useQueryClient();
-	const { pathname } = useLocation();
-	const { safeNavigate } = useSafeNavigate();
-	const { currentQuery, stagedQuery, panelType, redirectWithQueryBuilderData } =
-		useQueryBuilder();
-	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-	const { setLastUsedView, clearLastUsedView } = useLastUsedView(source);
-
-	const optionsDataSource = SAVED_VIEW_OPTIONS_DATA_SOURCE[source];
-	const { options } = useOptionsMenu({
-		dataSource: optionsDataSource ?? DataSource.LOGS,
-	});
-
-	const { mutateAsync: createSavedView, isLoading: isCreating } =
-		useCreateSavedView();
-	const { mutateAsync: updateSavedView, isLoading: isUpdating } =
-		useUpdateSavedView();
-
-	const invalidateViews = useCallback(
-		async (id?: string): Promise<void> => {
-			await Promise.all([
-				invalidateListSavedViews(queryClient),
-				id ? invalidateGetSavedView(queryClient, { id }) : undefined,
-				// The saved views bar still lists through v1.
-				queryClient.invalidateQueries([{ sourcepage: source }]),
-			]);
-		},
-		[queryClient, source],
-	);
-
-	const toCurrentSpec = useCallback(
-		(displayName: string, color?: string): SavedviewtypesSavedViewSpecDTO =>
-			toSavedViewSpec({
-				query: stagedQuery ?? currentQuery,
-				panelType: panelType ?? PANEL_TYPES.LIST,
-				displayName,
-				options: optionsDataSource ? options : undefined,
-				color,
-			}),
-		[stagedQuery, currentQuery, panelType, optionsDataSource, options],
-	);
-
-	const selectView = useCallback(
-		(view: SavedviewtypesSavedViewDTO): void => {
-			handleExplorerTabChange(view.spec.panelType, {
-				query: getSavedViewQuery(view),
-				viewKey: view.id,
-			});
-			setLastUsedView(view.id, view.spec.displayName);
-		},
-		[handleExplorerTabChange, setLastUsedView],
-	);
-
-	// The preference provider re-reads a view's columns only when its list
-	// changes, so the list is refetched as the view is applied again.
-	const revertView = useCallback(
-		(view: SavedviewtypesSavedViewDTO): void => {
-			void invalidateListSavedViews(queryClient);
-			selectView(view);
-		},
-		[queryClient, selectView],
-	);
-
-	// The query builder redirects only ever add params, so the url is rebuilt
-	// here; the time range and everything else a view does not set stays.
-	const clearView = useCallback((): void => {
-		clearLastUsedView();
-
-		const params = getUnstableCurrentSearchParams();
-		SAVED_VIEW_URL_PARAMS.forEach((param) => params.delete(param));
-		safeNavigate(`${pathname}?${params.toString()}`);
-	}, [clearLastUsedView, pathname, safeNavigate]);
-
-	const createView = useCallback(
-		async (displayName: string): Promise<string | undefined> => {
-			try {
-				const { data } = await createSavedView({
-					data: {
-						generateName: true,
-						source,
-						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
-						spec: toCurrentSpec(displayName),
-					},
-				});
-				await invalidateViews();
-				redirectWithQueryBuilderData(stagedQuery ?? currentQuery, {
-					[QueryParams.viewKey]: data.id,
-				});
-				setLastUsedView(data.id, displayName);
-				return data.id;
-			} catch (error) {
-				toast.error(
-					toAPIError(
-						error as ErrorType<RenderErrorResponseDTO>,
-						'Could not save the view',
-					).getErrorMessage(),
-					{ position: SAVED_VIEW_TOAST_POSITION },
-				);
-				return undefined;
-			}
-		},
-		[
-			createSavedView,
-			source,
-			toCurrentSpec,
-			invalidateViews,
-			redirectWithQueryBuilderData,
-			stagedQuery,
-			currentQuery,
-			setLastUsedView,
-		],
-	);
-
-	const updateView = useCallback(
-		async (view: SavedviewtypesSavedViewDTO): Promise<boolean> => {
-			try {
-				await updateSavedView({
-					pathParams: { id: view.id },
-					data: {
-						source,
-						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
-						spec: toCurrentSpec(view.spec.displayName, view.spec.display?.color),
-					},
-				});
-				await invalidateViews(view.id);
-				return true;
-			} catch (error) {
-				toast.error(
-					toAPIError(
-						error as ErrorType<RenderErrorResponseDTO>,
-						'Could not update the view',
-					).getErrorMessage(),
-					{ position: SAVED_VIEW_TOAST_POSITION },
-				);
-				return false;
-			}
-		},
-		[updateSavedView, source, toCurrentSpec, invalidateViews],
-	);
-
-	return {
-		selectView,
-		revertView,
-		clearView,
-		createView,
-		updateView,
-		isSaving: isCreating || isUpdating,
-	};
-}
--- a/frontend/src/container/SavedViews/types.ts
+++ b/frontend/src/container/SavedViews/types.ts
@@ -1,83 +0,0 @@
-import { ReactElement } from 'react';
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { OptionsQuery } from 'container/OptionsMenu/types';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-export type SavedViewSourcePage = DataSource | 'meter';
-
-export type SavedViewOptions = Pick<
-	OptionsQuery,
-	'selectColumns' | 'format' | 'maxLines' | 'fontSize'
->;
-
-export interface ToSavedViewSpecArgs {
-	query: Query;
-	panelType: PANEL_TYPES;
-	displayName: string;
-	options?: SavedViewOptions;
-	color?: string;
-}
-
-export interface HasUnsavedViewChangesArgs {
-	view: SavedviewtypesSavedViewDTO;
-	stagedQuery: Query | null;
-	panelType: PANEL_TYPES;
-	options?: SavedViewOptions;
-}
-
-export interface UseLastUsedViewResult {
-	getLastUsedViewKey: () => string | undefined;
-	setLastUsedView: (id: string, displayName: string) => void;
-	clearLastUsedView: () => void;
-}
-
-export interface UseActiveSavedViewResult {
-	view: SavedviewtypesSavedViewDTO | undefined;
-	isLoading: boolean;
-	isError: boolean;
-	hasUnsavedChanges: boolean;
-}
-
-export interface UseSavedViewActionsResult {
-	selectView: (view: SavedviewtypesSavedViewDTO) => void;
-	revertView: (view: SavedviewtypesSavedViewDTO) => void;
-	clearView: () => void;
-	createView: (displayName: string) => Promise<string | undefined>;
-	updateView: (view: SavedviewtypesSavedViewDTO) => Promise<boolean>;
-	isSaving: boolean;
-}
-
-export interface UseRestoreLastUsedViewArgs {
-	source: SavedviewtypesSourceDTO;
-	selectView: UseSavedViewActionsResult['selectView'];
-}
-
-export type SaveViewModalMode = 'create' | 'saveAsNew';
-
-export interface SaveViewModalProps {
-	mode: SaveViewModalMode;
-	isSaving: boolean;
-	onClose: () => void;
-	// Resolves true when saved; the modal stays open otherwise.
-	onSave: (displayName: string) => Promise<boolean>;
-}
-
-export interface SaveChangesMenuProps {
-	disabled: boolean;
-	onSaveAsNew: () => void;
-	onUpdate: () => void;
-}
-
-export interface SavedViewsIconButtonProps {
-	title: string;
-	icon: ReactElement;
-	testId: string;
-	color?: 'secondary' | 'warning';
-	disabled?: boolean;
-	onClick?: () => void;
-}
--- a/frontend/src/container/SavedViews/utils/tests/findSavedView.test.ts
+++ b/frontend/src/container/SavedViews/utils/tests/findSavedView.test.ts
@@ -1,20 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { findSavedView } from '../findSavedView';
-
-describe('findSavedView', () => {
-	const views = [{ id: 'a' }, { id: 'b' }] as SavedviewtypesSavedViewDTO[];
-
-	it('returns the view with the matching id', () => {
-		expect(findSavedView(views, 'b')?.id).toBe('b');
-	});
-
-	it('returns undefined when the id is not in the list', () => {
-		expect(findSavedView(views, 'c')).toBeUndefined();
-	});
-
-	it('returns undefined for a null or not yet loaded list', () => {
-		expect(findSavedView(null, 'a')).toBeUndefined();
-		expect(findSavedView(undefined, 'a')).toBeUndefined();
-	});
-});
--- a/frontend/src/container/SavedViews/utils/tests/getSavedViewQuery.test.ts
+++ b/frontend/src/container/SavedViews/utils/tests/getSavedViewQuery.test.ts
@@ -1,93 +0,0 @@
-import {
-	SavedviewtypesPanelTypeDTO,
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSchemaVersionDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { getSavedViewQuery } from '../getSavedViewQuery';
-
-jest.mock('uuid', () => ({
-	v4: (): string => 'test-id',
-}));
-
-function makeView(): SavedviewtypesSavedViewDTO {
-	return {
-		id: 'view-1',
-		name: 'errors-by-service-abc123',
-		source: SavedviewtypesSourceDTO.traces,
-		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
-		createdBy: 'a@b.c',
-		updatedBy: 'a@b.c',
-		spec: {
-			displayName: 'Errors by service',
-			panelType: SavedviewtypesPanelTypeDTO.list,
-			requestType: 'raw',
-			queries: [
-				{
-					type: 'builder_query',
-					spec: {
-						name: 'A',
-						signal: 'traces',
-						stepInterval: 60,
-						filter: { expression: 'has_error = true' },
-						// v2 reads back fully defaulted envelopes; nulls must not break the mapper
-						groupBy: null,
-						order: null,
-						selectFields: null,
-						functions: null,
-						legend: '',
-						disabled: false,
-					},
-				},
-			],
-			selectedFields: [{ name: 'service.name' }],
-			display: { color: 'red' },
-		},
-	} as SavedviewtypesSavedViewDTO;
-}
-
-describe('getSavedViewQuery', () => {
-	it('maps the v2 spec through the v5 branch of mapQueryDataFromApi', () => {
-		const query = getSavedViewQuery(makeView());
-
-		expect(query.queryType).toBe(EQueryType.QUERY_BUILDER);
-		expect(query.promql).toStrictEqual([]);
-		expect(query.clickhouse_sql).toStrictEqual([]);
-		expect(query.builder.queryData).toHaveLength(1);
-
-		const [queryData] = query.builder.queryData;
-		expect(queryData.queryName).toBe('A');
-		expect(queryData.dataSource).toBe(DataSource.TRACES);
-		expect(queryData.filter).toStrictEqual({ expression: 'has_error = true' });
-		expect(queryData.groupBy).toStrictEqual([]);
-		expect(queryData.orderBy).toStrictEqual([]);
-	});
-
-	it('keeps formulas alongside builder queries', () => {
-		const view = makeView();
-		view.spec.queries.push({
-			type: 'builder_formula',
-			spec: { name: 'F1', expression: 'A / 2' },
-		} as SavedviewtypesSavedViewDTO['spec']['queries'][number]);
-
-		const query = getSavedViewQuery(view);
-
-		expect(query.builder.queryData).toHaveLength(1);
-		expect(query.builder.queryFormulas).toHaveLength(1);
-		expect(query.builder.queryFormulas[0].queryName).toBe('F1');
-	});
-
-	it('does not read the panel type into the query', () => {
-		const view = makeView();
-		view.spec.panelType = SavedviewtypesPanelTypeDTO.graph;
-
-		const query = getSavedViewQuery(view);
-
-		// panelType travels separately (url param), the Query itself has no such field
-		expect(query).not.toHaveProperty('panelType', PANEL_TYPES.TIME_SERIES);
-	});
-});
--- a/frontend/src/container/SavedViews/utils/tests/hasUnsavedViewChanges.test.ts
+++ b/frontend/src/container/SavedViews/utils/tests/hasUnsavedViewChanges.test.ts
@@ -1,217 +0,0 @@
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSavedViewSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import {
-	initialQueriesMap,
-	initialQueryBuilderFormValuesMap,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
-import {
-	defaultLogsSelectedColumns,
-	defaultTraceSelectedColumns,
-	ensureLogsRequiredColumns,
-} from 'container/OptionsMenu/constants';
-import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { getSavedViewQuery } from '../getSavedViewQuery';
-import { hasUnsavedViewChanges } from '../hasUnsavedViewChanges';
-import { toSavedViewSpec } from '../toSavedViewSpec';
-
-jest.mock('uuid', () => ({
-	v4: (): string => 'test-id',
-}));
-
-function query(dataSource: DataSource, expression = 'has_error = true'): Query {
-	const base = initialQueriesMap[dataSource];
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					filter: { expression },
-					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-// The server stores the queries through typed structs: nulls, empty strings,
-// zeros and empty lists do not come back.
-function asStoredByServer(value: unknown): unknown {
-	if (Array.isArray(value)) {
-		const items = value.map(asStoredByServer).filter((v) => v !== undefined);
-		return items.length > 0 ? items : undefined;
-	}
-	if (value !== null && typeof value === 'object') {
-		const entries = Object.entries(value)
-			.map(([key, v]) => [key, asStoredByServer(v)] as const)
-			.filter(([, v]) => v !== undefined);
-		return Object.fromEntries(entries);
-	}
-	return value === null || value === '' || value === 0 ? undefined : value;
-}
-
-function viewFrom(
-	spec: SavedviewtypesSavedViewSpecDTO,
-): SavedviewtypesSavedViewDTO {
-	return {
-		id: 'view-1',
-		spec: {
-			...spec,
-			queries: asStoredByServer(
-				JSON.parse(JSON.stringify(spec.queries)),
-			) as SavedviewtypesSavedViewSpecDTO['queries'],
-		},
-	} as SavedviewtypesSavedViewDTO;
-}
-
-// What the query builder stages after the view is opened: the stored query,
-// with its defaults filled in.
-function stagedFrom(
-	view: SavedviewtypesSavedViewDTO,
-	dataSource: DataSource,
-): Query {
-	const saved = getSavedViewQuery(view);
-	return {
-		...saved,
-		builder: {
-			...saved.builder,
-			queryData: saved.builder.queryData.map((queryData) => ({
-				...initialQueryBuilderFormValuesMap[dataSource],
-				...queryData,
-			})),
-		},
-	};
-}
-
-const columns = [
-	{ name: 'service.name', key: 'service.name' },
-	{ name: 'name', key: 'name' },
-] as TelemetryFieldKey[];
-
-const formatting = {
-	format: 'raw' as LogViewMode,
-	maxLines: 2,
-	fontSize: FontSize.SMALL,
-};
-
-describe('hasUnsavedViewChanges', () => {
-	const options = { selectColumns: columns, ...formatting };
-	const view = viewFrom(
-		toSavedViewSpec({
-			query: query(DataSource.TRACES),
-			panelType: PANEL_TYPES.LIST,
-			displayName: 'Errors',
-			options,
-		}),
-	);
-	const staged = stagedFrom(view, DataSource.TRACES);
-
-	it('is dirty when the columns change', () => {
-		expect(
-			hasUnsavedViewChanges({
-				view,
-				stagedQuery: staged,
-				panelType: PANEL_TYPES.LIST,
-				options: { ...options, selectColumns: [columns[0]] },
-			}),
-		).toBe(true);
-	});
-
-	it('reads a traces view without columns as the default columns', () => {
-		const bare = viewFrom(
-			toSavedViewSpec({
-				query: query(DataSource.TRACES),
-				panelType: PANEL_TYPES.LIST,
-				displayName: 'Errors',
-			}),
-		);
-
-		expect(
-			hasUnsavedViewChanges({
-				view: bare,
-				stagedQuery: stagedFrom(bare, DataSource.TRACES),
-				panelType: PANEL_TYPES.LIST,
-				options: { ...options, selectColumns: defaultTraceSelectedColumns },
-			}),
-		).toBe(false);
-	});
-
-	describe('on logs', () => {
-		const logsView = viewFrom(
-			toSavedViewSpec({
-				query: query(DataSource.LOGS),
-				panelType: PANEL_TYPES.LIST,
-				displayName: 'Errors',
-				options: { selectColumns: columns, ...formatting },
-			}),
-		);
-		const logsStaged = stagedFrom(logsView, DataSource.LOGS);
-		// The explorer always adds the required logs columns.
-		const shownColumns = ensureLogsRequiredColumns(columns);
-
-		it('is clean with the required columns the explorer adds', () => {
-			expect(
-				hasUnsavedViewChanges({
-					view: logsView,
-					stagedQuery: logsStaged,
-					panelType: PANEL_TYPES.LIST,
-					options: { selectColumns: shownColumns, ...formatting },
-				}),
-			).toBe(false);
-		});
-
-		it('is dirty when the formatting changes', () => {
-			expect(
-				hasUnsavedViewChanges({
-					view: logsView,
-					stagedQuery: logsStaged,
-					panelType: PANEL_TYPES.LIST,
-					options: { selectColumns: shownColumns, ...formatting, maxLines: 5 },
-				}),
-			).toBe(true);
-		});
-
-		it('reads a view without formatting as the default formatting', () => {
-			const bare = viewFrom(
-				toSavedViewSpec({
-					query: query(DataSource.LOGS),
-					panelType: PANEL_TYPES.LIST,
-					displayName: 'Errors',
-				}),
-			);
-
-			expect(
-				hasUnsavedViewChanges({
-					view: bare,
-					stagedQuery: stagedFrom(bare, DataSource.LOGS),
-					panelType: PANEL_TYPES.LIST,
-					options: {
-						selectColumns: defaultLogsSelectedColumns,
-						format: 'table',
-						maxLines: 1,
-						fontSize: FontSize.SMALL,
-					},
-				}),
-			).toBe(false);
-		});
-	});
-
-	it('ignores formatting on traces', () => {
-		expect(
-			hasUnsavedViewChanges({
-				view,
-				stagedQuery: staged,
-				panelType: PANEL_TYPES.LIST,
-				options: { ...options, ...formatting, maxLines: 5 },
-			}),
-		).toBe(false);
-	});
-});
--- a/frontend/src/container/SavedViews/utils/tests/toSavedViewSource.test.ts
+++ b/frontend/src/container/SavedViews/utils/tests/toSavedViewSource.test.ts
@@ -1,17 +0,0 @@
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { toSavedViewSource } from '../toSavedViewSource';
-
-describe('toSavedViewSource', () => {
-	it('maps every explorer source page to the v2 source', () => {
-		expect(toSavedViewSource(DataSource.LOGS)).toBe(SavedviewtypesSourceDTO.logs);
-		expect(toSavedViewSource(DataSource.TRACES)).toBe(
-			SavedviewtypesSourceDTO.traces,
-		);
-		expect(toSavedViewSource(DataSource.METRICS)).toBe(
-			SavedviewtypesSourceDTO.metrics,
-		);
-		expect(toSavedViewSource('meter')).toBe(SavedviewtypesSourceDTO.meter);
-	});
-});
--- a/frontend/src/container/SavedViews/utils/tests/toSavedViewSpec.test.ts
+++ b/frontend/src/container/SavedViews/utils/tests/toSavedViewSpec.test.ts
@@ -1,95 +0,0 @@
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	SavedviewtypesPanelTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
-
-import { toSavedViewPanelType, toSavedViewSpec } from '../toSavedViewSpec';
-
-jest.mock('uuid', () => ({
-	v4: (): string => 'test-id',
-}));
-
-function tracesQuery(): Query {
-	const base = initialQueriesMap.traces;
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					filter: { expression: 'has_error = true' },
-					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-const columns = [
-	{
-		name: 'service.name',
-		key: 'service.name',
-		signal: 'traces',
-		fieldContext: 'resource',
-		fieldDataType: 'string',
-		isIndexed: true,
-	},
-	{ key: 'name' },
-] as unknown as TelemetryFieldKey[];
-
-describe('toSavedViewPanelType', () => {
-	it('folds a dashboard only panel type to graph', () => {
-		expect(toSavedViewPanelType(PANEL_TYPES.PIE)).toBe(
-			SavedviewtypesPanelTypeDTO.graph,
-		);
-	});
-});
-
-describe('toSavedViewSpec', () => {
-	it('stores only the field identity of the columns, naming key only ones', () => {
-		const spec = toSavedViewSpec({
-			query: tracesQuery(),
-			panelType: PANEL_TYPES.LIST,
-			displayName: 'Errors',
-			options: {
-				selectColumns: columns,
-				format: 'raw' as LogViewMode,
-				maxLines: 2,
-				fontSize: FontSize.SMALL,
-			},
-		});
-
-		expect(spec.selectedFields).toStrictEqual([
-			{
-				name: 'service.name',
-				signal: 'traces',
-				fieldContext: 'resource',
-				fieldDataType: 'string',
-			},
-			{ name: 'name' },
-		]);
-		expect(spec.display).toStrictEqual({
-			format: 'raw',
-			maxLines: 2,
-			fontSize: FontSize.SMALL,
-		});
-	});
-
-	it('keeps the colour in display', () => {
-		const spec = toSavedViewSpec({
-			query: tracesQuery(),
-			panelType: PANEL_TYPES.TIME_SERIES,
-			displayName: 'Errors',
-			color: 'red',
-		});
-
-		expect(spec.panelType).toBe(SavedviewtypesPanelTypeDTO.graph);
-		expect(spec.requestType).toBe(Querybuildertypesv5RequestTypeDTO.time_series);
-		expect(spec.display).toStrictEqual({ color: 'red' });
-	});
-});
--- a/frontend/src/container/SavedViews/utils/findSavedView.ts
+++ b/frontend/src/container/SavedViews/utils/findSavedView.ts
@@ -1,8 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-
-export function findSavedView(
-	views: SavedviewtypesSavedViewDTO[] | null | undefined,
-	id: string,
-): SavedviewtypesSavedViewDTO | undefined {
-	return views?.find((view) => view.id === id);
-}
--- a/frontend/src/container/SavedViews/utils/getSavedViewQuery.ts
+++ b/frontend/src/container/SavedViews/utils/getSavedViewQuery.ts
@@ -1,17 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryEnvelope } from 'types/api/v5/queryRange';
-import { EQueryType } from 'types/common/dashboard';
-
-// Explorers only save builder queries; v2 carries no queryType, so it is fixed here.
-export function getSavedViewQuery(view: SavedviewtypesSavedViewDTO): Query {
-	const { queries, panelType } = view.spec;
-	return mapQueryDataFromApi({
-		queries: queries as QueryEnvelope[],
-		panelType: panelType as unknown as PANEL_TYPES,
-		queryType: EQueryType.QUERY_BUILDER,
-		unit: undefined,
-	});
-}
--- a/frontend/src/container/SavedViews/utils/getViewColumnsAndFormatting.ts
+++ b/frontend/src/container/SavedViews/utils/getViewColumnsAndFormatting.ts
@@ -1,49 +0,0 @@
-import { SavedviewtypesSavedViewSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { TelemetryFieldKey } from 'api/v5/v5';
-import {
-	defaultLogsSelectedColumns,
-	defaultTraceSelectedColumns,
-	ensureLogsRequiredColumns,
-} from 'container/OptionsMenu/constants';
-import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
-import { Preferences } from 'providers/preferences/types';
-import { DataSource } from 'types/common/queryBuilder';
-
-function withColumnNames(
-	columns: TelemetryFieldKey[] | undefined,
-): TelemetryFieldKey[] | null {
-	if (!columns) {
-		return null;
-	}
-	return columns.map((column) => ({
-		...column,
-		name: column.name ?? column.key,
-	}));
-}
-
-// The columns and formatting the explorer shows for a saved view, with the
-// defaults filled in where the view has none.
-export function getViewColumnsAndFormatting(
-	spec: SavedviewtypesSavedViewSpecDTO | undefined,
-	dataSource: DataSource,
-): Preferences {
-	const selectedFields = spec?.selectedFields as TelemetryFieldKey[] | undefined;
-
-	if (dataSource === DataSource.LOGS) {
-		return {
-			columns: ensureLogsRequiredColumns(
-				withColumnNames(selectedFields) || defaultLogsSelectedColumns,
-			),
-			formatting: {
-				maxLines: spec?.display?.maxLines || 1,
-				format: (spec?.display?.format as LogViewMode) || 'table',
-				fontSize: (spec?.display?.fontSize as FontSize) || FontSize.SMALL,
-				version: 1,
-			},
-		};
-	}
-	if (dataSource === DataSource.TRACES) {
-		return { columns: selectedFields || defaultTraceSelectedColumns };
-	}
-	return { columns: [] };
-}
--- a/frontend/src/container/SavedViews/utils/hasUnsavedViewChanges.ts
+++ b/frontend/src/container/SavedViews/utils/hasUnsavedViewChanges.ts
@@ -1,81 +0,0 @@
-import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import isEqual from 'lodash-es/isEqual';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { HasUnsavedViewChangesArgs } from '../types';
-import { toSavedViewPanelType } from './toSavedViewSpec';
-import { getViewColumnsAndFormatting } from './getViewColumnsAndFormatting';
-
-// The server drops empty values when it stores a query, while the query
-// builder fills them with defaults, so both sides lose them before comparing.
-function withoutEmptyValues(value: unknown): unknown {
-	if (Array.isArray(value)) {
-		const items = value
-			.map(withoutEmptyValues)
-			.filter((item) => item !== undefined);
-		return items.length > 0 ? items : undefined;
-	}
-	if (value !== null && typeof value === 'object') {
-		const entries = Object.entries(value)
-			.map(([key, item]) => [key, withoutEmptyValues(item)] as const)
-			.filter(([, item]) => item !== undefined);
-		return entries.length > 0 ? Object.fromEntries(entries) : undefined;
-	}
-	if (value === null || value === '' || value === 0) {
-		return undefined;
-	}
-	return value;
-}
-
-// Compared as stored (v5 envelopes): mapped back to the builder's shape, each
-// side gets different defaults.
-export function hasUnsavedViewChanges({
-	view,
-	stagedQuery,
-	panelType,
-	options,
-}: HasUnsavedViewChangesArgs): boolean {
-	if (!stagedQuery) {
-		return false;
-	}
-	if (view.spec.panelType !== toSavedViewPanelType(panelType)) {
-		return true;
-	}
-
-	const { queries: stagedQueries } = mapCompositeQueryFromQuery(
-		stagedQuery,
-		panelType,
-	);
-	if (
-		!isEqual(
-			withoutEmptyValues(view.spec.queries),
-			withoutEmptyValues(stagedQueries),
-		)
-	) {
-		return true;
-	}
-
-	if (!options) {
-		return false;
-	}
-
-	const dataSource = stagedQuery.builder.queryData[0]?.dataSource;
-	const { columns, formatting } = getViewColumnsAndFormatting(
-		view.spec,
-		dataSource,
-	);
-	const toNames = (fields: { name?: string; key?: string }[]): unknown[] =>
-		fields.map((field) => field.name ?? field.key);
-	if (!isEqual(toNames(columns), toNames(options.selectColumns ?? []))) {
-		return true;
-	}
-
-	if (dataSource !== DataSource.LOGS || !formatting) {
-		return false;
-	}
-	return (
-		formatting.format !== options.format ||
-		formatting.maxLines !== options.maxLines ||
-		formatting.fontSize !== options.fontSize
-	);
-}
--- a/frontend/src/container/SavedViews/utils/toSavedViewSource.ts
+++ b/frontend/src/container/SavedViews/utils/toSavedViewSource.ts
@@ -1,23 +0,0 @@
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { SavedViewSourcePage } from '../types';
-
-// Explorers and the preferences module are keyed by DataSource (the signal),
-// the api keys views by source page. Same values today, so this is the one
-// place they meet. AI observability views will come with their own source and
-// DataSource cannot tell them apart from traces, so preferences should move to
-// source page at that point and this map goes with it.
-const SAVED_VIEW_SOURCE: Record<SavedViewSourcePage, SavedviewtypesSourceDTO> =
-	{
-		[DataSource.LOGS]: SavedviewtypesSourceDTO.logs,
-		[DataSource.TRACES]: SavedviewtypesSourceDTO.traces,
-		[DataSource.METRICS]: SavedviewtypesSourceDTO.metrics,
-		meter: SavedviewtypesSourceDTO.meter,
-	};
-
-export function toSavedViewSource(
-	sourcePage: SavedViewSourcePage,
-): SavedviewtypesSourceDTO {
-	return SAVED_VIEW_SOURCE[sourcePage];
-}
--- a/frontend/src/container/SavedViews/utils/toSavedViewSpec.ts
+++ b/frontend/src/container/SavedViews/utils/toSavedViewSpec.ts
@@ -1,80 +0,0 @@
-import {
-	Querybuildertypesv5QueryEnvelopeDTO,
-	SavedviewtypesDisplayDTO,
-	SavedviewtypesPanelTypeDTO,
-	SavedviewtypesSavedViewSpecDTO,
-	TelemetrytypesFieldContextDTO,
-	TelemetrytypesFieldDataTypeDTO,
-	TelemetrytypesSignalDTO,
-	TelemetrytypesTelemetryFieldKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import { panelTypeToRequestType } from 'pages/DashboardPage/DashboardContainer/queryV5/persesQueryAdapters';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-import { ToSavedViewSpecArgs } from '../types';
-
-const SAVED_VIEW_PANEL_TYPES = new Set<string>(
-	Object.values(SavedviewtypesPanelTypeDTO),
-);
-
-// Explorers only produce list / trace / graph / table; anything else a caller
-// hands over (a dashboard panel type) is stored as a time series view.
-export function toSavedViewPanelType(
-	panelType: PANEL_TYPES,
-): SavedviewtypesPanelTypeDTO {
-	return SAVED_VIEW_PANEL_TYPES.has(panelType)
-		? (panelType as unknown as SavedviewtypesPanelTypeDTO)
-		: SavedviewtypesPanelTypeDTO.graph;
-}
-
-// The api stores the field identity only; `key` and the column flags are ui state.
-function toFieldKey(
-	column: TelemetryFieldKey,
-): TelemetrytypesTelemetryFieldKeyDTO {
-	return {
-		name: column.name ?? column.key ?? '',
-		...(column.signal && {
-			signal: column.signal as unknown as TelemetrytypesSignalDTO,
-		}),
-		...(column.fieldContext && {
-			fieldContext:
-				column.fieldContext as unknown as TelemetrytypesFieldContextDTO,
-		}),
-		...(column.fieldDataType && {
-			fieldDataType:
-				column.fieldDataType as unknown as TelemetrytypesFieldDataTypeDTO,
-		}),
-		...(column.description && { description: column.description }),
-		...(column.unit && { unit: column.unit }),
-	};
-}
-
-export function toSavedViewSpec({
-	query,
-	panelType,
-	displayName,
-	options,
-	color,
-}: ToSavedViewSpecArgs): SavedviewtypesSavedViewSpecDTO {
-	const { queries } = mapCompositeQueryFromQuery(query, panelType);
-
-	const display: SavedviewtypesDisplayDTO = {
-		...(color && { color }),
-		...(options?.format && { format: options.format }),
-		...(options?.maxLines && { maxLines: options.maxLines }),
-		...(options?.fontSize && { fontSize: options.fontSize }),
-	};
-
-	return {
-		displayName,
-		panelType: toSavedViewPanelType(panelType),
-		requestType: panelTypeToRequestType(panelType),
-		queries: (queries ?? []) as unknown as Querybuildertypesv5QueryEnvelopeDTO[],
-		...(options?.selectColumns?.length && {
-			selectedFields: options.selectColumns.map(toFieldKey),
-		}),
-		...(Object.keys(display).length > 0 && { display }),
-	};
-}
--- a/frontend/src/container/TriggeredAlerts/TriggeredAlerts.module.scss
+++ b/frontend/src/container/TriggeredAlerts/TriggeredAlerts.module.scss
@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	flex: 1;
+	height: calc(100vh - 62px);
 	min-height: 400px;
 	padding-top: var(--spacing-8);
 }
--- a/frontend/src/container/Version/Version.styles.scss
+++ b/frontend/src/container/Version/Version.styles.scss
@@ -1,4 +1,7 @@
 .version-container {
+	max-height: 100vh;
+	overflow: hidden;
+
 	.version-page-header {
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);
--- a/frontend/src/hooks/saveViews/useDeleteView.ts
+++ b/frontend/src/hooks/saveViews/useDeleteView.ts
@@ -1,18 +1,11 @@
-import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
-import { invalidateListSavedViews } from 'api/generated/services/saved-view';
+import { useMutation, UseMutationResult } from 'react-query';
 import { deleteView } from 'api/saveView/deleteView';
 import { DeleteViewPayloadProps } from 'types/api/saveViews/types';

 export const useDeleteView = (
 	uuid: string,
-): UseMutationResult<DeleteViewPayloadProps, Error, string> => {
-	const queryClient = useQueryClient();
-
-	return useMutation({
+): UseMutationResult<DeleteViewPayloadProps, Error, string> =>
+	useMutation({
 		mutationKey: [uuid],
 		mutationFn: () => deleteView(uuid),
-		// v1 and v2 share storage; consumers already on v2 must see this write.
-		// Temporary till the v1 client is deleted with the explorer bar.
-		onSuccess: () => invalidateListSavedViews(queryClient),
 	});
-};
--- a/frontend/src/hooks/saveViews/useSaveView.ts
+++ b/frontend/src/hooks/saveViews/useSaveView.ts
@@ -1,5 +1,4 @@
-import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
-import { invalidateListSavedViews } from 'api/generated/services/saved-view';
+import { useMutation, UseMutationResult } from 'react-query';
 import { saveView } from 'api/saveView/saveView';
 import { AxiosResponse } from 'axios';
 import { SaveViewPayloadProps, SaveViewProps } from 'types/api/saveViews/types';
@@ -14,14 +13,8 @@ export const useSaveView = ({
 	Error,
 	SaveViewProps,
 	SaveViewPayloadProps
-> => {
-	const queryClient = useQueryClient();
-
-	return useMutation({
+> =>
+	useMutation({
 		mutationKey: [viewName, sourcePage, compositeQuery, extraData],
 		mutationFn: saveView,
-		// v1 and v2 share storage; consumers already on v2 must see this write.
-		// Temporary till the v1 client is deleted with the explorer bar.
-		onSuccess: () => invalidateListSavedViews(queryClient),
 	});
-};
--- a/frontend/src/hooks/saveViews/useUpdateView.ts
+++ b/frontend/src/hooks/saveViews/useUpdateView.ts
@@ -1,5 +1,4 @@
-import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
-import { invalidateListSavedViews } from 'api/generated/services/saved-view';
+import { useMutation, UseMutationResult } from 'react-query';
 import { updateView } from 'api/saveView/updateView';
 import {
 	UpdateViewPayloadProps,
@@ -17,10 +16,8 @@ export const useUpdateView = ({
 	Error,
 	UpdateViewProps,
 	UpdateViewPayloadProps
-> => {
-	const queryClient = useQueryClient();
-
-	return useMutation({
+> =>
+	useMutation({
 		mutationKey: [viewName, sourcePage, compositeQuery, extraData],
 		mutationFn: () =>
 			updateView({
@@ -30,8 +27,4 @@ export const useUpdateView = ({
 				sourcePage,
 				viewKey,
 			}),
-		// v1 and v2 share storage; consumers already on v2 must see this write.
-		// Temporary till the v1 client is deleted with the explorer bar.
-		onSuccess: () => invalidateListSavedViews(queryClient),
 	});
-};
--- a/frontend/src/hooks/useHandleExplorerTabChange.ts
+++ b/frontend/src/hooks/useHandleExplorerTabChange.ts
@@ -73,20 +73,32 @@ export const useHandleExplorerTabChange = (): {
 			}

 			const query = currentQueryData?.query || getUpdateQuery(newPanelType);
-			const nextViewKey = currentQueryData?.viewKey || viewKey;
-			const nextViewName = currentQueryData?.viewName || viewName;

-			redirectWithQueryBuilderData(
-				query,
-				{
-					[QueryParams.panelTypes]: newPanelType,
-					...(nextViewKey ? { [QueryParams.viewKey]: nextViewKey } : {}),
-					...(nextViewName ? { [QueryParams.viewName]: nextViewName } : {}),
-				},
-				redirectToUrl,
-				undefined,
-				newTab,
-			);
+			if (redirectToUrl) {
+				redirectWithQueryBuilderData(
+					query,
+					{
+						[QueryParams.panelTypes]: newPanelType,
+						[QueryParams.viewName]: currentQueryData?.viewName || viewName,
+						[QueryParams.viewKey]: currentQueryData?.viewKey || viewKey,
+					},
+					redirectToUrl,
+					undefined,
+					newTab,
+				);
+			} else {
+				redirectWithQueryBuilderData(
+					query,
+					{
+						[QueryParams.panelTypes]: newPanelType,
+						[QueryParams.viewName]: currentQueryData?.viewName || viewName,
+						[QueryParams.viewKey]: currentQueryData?.viewKey || viewKey,
+					},
+					undefined,
+					undefined,
+					newTab,
+				);
+			}
 		},
 		[panelType, getUpdateQuery, redirectWithQueryBuilderData, viewName, viewKey],
 	);
--- a/frontend/src/hooks/useSavedViewEnabled.ts
+++ b/frontend/src/hooks/useSavedViewEnabled.ts
@@ -1,11 +0,0 @@
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { useState } from 'react';
-
-export function useSavedViewEnabled(): boolean {
-	const [isEnabled] = useState(
-		() => getLocalStorageKey(LOCALSTORAGE.SAVED_VIEW_ENABLED) === 'true',
-	);
-
-	return isEnabled;
-}
--- a/frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts
+++ b/frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts
@@ -13,7 +13,7 @@ describe('Get Series Data', () => {
 		expect(seriesData).toHaveLength(5);
 		expect(seriesData[1].label).toBe('firstLegend');
 		expect(seriesData[1].show).toBe(true);
-		expect(seriesData[1].fill).toBe('#83C2EB');
+		expect(seriesData[1].fill).toBe('#FF6F91');
 		expect(seriesData[1].width).toBe(2);
 	});

--- a/frontend/src/lib/uPlotV2/components/Legend/Legend.module.scss
+++ b/frontend/src/lib/uPlotV2/components/Legend/Legend.module.scss
@@ -57,12 +57,3 @@
 	color: var(--l3-foreground);
 	text-align: center;
 }
-
-/* The bottom legend's box is only the rows reserved for it. */
-.container:not(.isRight) .emptyState {
-	flex: 1;
-	min-height: 0;
-	display: grid;
-	place-items: center;
-	padding: 0;
-}
--- a/frontend/src/lib/uPlotV2/components/Legend/Legend.tsx
+++ b/frontend/src/lib/uPlotV2/components/Legend/Legend.tsx
@@ -8,7 +8,7 @@ import { LegendAction, LegendPosition, LegendProps } from '../types';
 import { LEGEND_ITEM_EXTRA_WIDTH, MAX_LEGEND_WIDTH } from './constants';
 import LegendRow from './LegendRow';
 import LegendToolbar from './LegendToolbar';
-import { getVisibleSeriesState } from './utils';
+import { filterLegendItems, getShownSeriesState } from './utils';

 import styles from './Legend.module.scss';

@@ -20,7 +20,6 @@ export default function Legend({
 	items,
 	position,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
-	showSearch = false,
 	focusedSeriesIndex,
 	onAction,
 	showCopy = true,
@@ -31,22 +30,27 @@ export default function Legend({
 	const itemWidth = averageLegendWidth + LEGEND_ITEM_EXTRA_WIDTH;
 	const isRightPosition = position === LegendPosition.RIGHT;

-	// The layout decides: it reserves the height.
-	const showToolbar = showSearch && items.length > 0;
+	const { visibleCount, soleShownSeriesIndex } = useMemo(
+		() => getShownSeriesState(items),
+		[items],
+	);

-	const effectiveQuery = showToolbar ? filterQuery : '';
+	// A bottom legend gets two rows; spending one on chrome costs more chart than
+	// the readout is worth.
+	const showToolbar = isRightPosition && items.length > 0;
+	const showFilter = showToolbar;

-	const {
-		listedItems,
-		visibleCount,
-		onlyVisibleSeriesIndex,
-		areAllSeriesVisible,
-	} = useMemo(
-		() => getVisibleSeriesState(items, effectiveQuery),
+	const effectiveQuery = showFilter ? filterQuery : '';
+
+	const visibleLegendItems = useMemo(
+		() => filterLegendItems(items, effectiveQuery),
 		[items, effectiveQuery],
 	);

-	const isEmptyState = !!effectiveQuery.trim() && listedItems.length === 0;
+	const isEmptyState =
+		!!effectiveQuery.trim() && visibleLegendItems.length === 0;
+
+	const isAllShown = visibleCount === items.length;

 	// A row that unmounts under the pointer never fires its own mouseleave.
 	const handleMouseLeave = useCallback(
@@ -59,20 +63,14 @@ export default function Legend({
 			<LegendRow
 				key={item.seriesIndex}
 				item={item}
-				isOneSeriesVisible={onlyVisibleSeriesIndex === item.seriesIndex}
-				areAllSeriesVisible={areAllSeriesVisible}
+				isSoleShown={soleShownSeriesIndex === item.seriesIndex}
+				isAllShown={isAllShown}
 				isFocused={focusedSeriesIndex === item.seriesIndex}
 				showCopy={showCopy}
 				onAction={onAction}
 			/>
 		),
-		[
-			onlyVisibleSeriesIndex,
-			areAllSeriesVisible,
-			focusedSeriesIndex,
-			showCopy,
-			onAction,
-		],
+		[soleShownSeriesIndex, isAllShown, focusedSeriesIndex, showCopy, onAction],
 	);

 	return (
@@ -89,7 +87,7 @@ export default function Legend({
 				<LegendToolbar
 					visibleCount={visibleCount}
 					totalCount={items.length}
-					position={position}
+					showFilter={showFilter}
 					filterQuery={filterQuery}
 					onFilterQueryChange={setFilterQuery}
 				/>
@@ -103,7 +101,7 @@ export default function Legend({
 					className={styles.scroller}
 					listClassName={styles.gridList}
 					itemClassName={styles.gridItem}
-					data={listedItems}
+					data={visibleLegendItems}
 					itemContent={(_, item): JSX.Element => renderLegendItem(item)}
 				/>
 			)}
--- a/frontend/src/lib/uPlotV2/components/Legend/LegendRow.tsx
+++ b/frontend/src/lib/uPlotV2/components/Legend/LegendRow.tsx
@@ -13,9 +13,9 @@ import styles from './LegendRow.module.scss';
 export interface LegendRowProps {
 	item: LegendItem;
 	/** The only series currently shown, so hiding it is refused. */
-	isOneSeriesVisible: boolean;
+	isSoleShown: boolean;
 	/** Nothing is hidden, so the row's action can only narrow the selection. */
-	areAllSeriesVisible: boolean;
+	isAllShown: boolean;
 	isFocused: boolean;
 	showCopy: boolean;
 	onAction: OnLegendAction;
@@ -29,15 +29,15 @@ export interface LegendRowProps {
 */
 function LegendRow({
 	item,
-	isOneSeriesVisible,
-	areAllSeriesVisible,
+	isSoleShown,
+	isAllShown,
 	isFocused,
 	showCopy,
 	onAction,
 }: LegendRowProps): JSX.Element {
 	const { seriesIndex, show } = item;
 	const label = item.label ?? '';
-	const isShowAllAction = show && !areAllSeriesVisible;
+	const isShowAllAction = show && !isAllShown;
 	const scopeActionLabel = isShowAllAction
 		? 'Show all series'
 		: 'Show only current series';
@@ -47,15 +47,15 @@ function LegendRow({

 	/** Everything showing -> isolate; showing alone -> restore all. */
 	const handleRowClick = useCallback((): void => {
-		if (isOneSeriesVisible) {
+		if (isSoleShown) {
 			onAction({ type: LegendAction.SHOW_ALL });
 			return;
 		}
 		onAction({
-			type: areAllSeriesVisible ? LegendAction.SHOW_ONLY : LegendAction.TOGGLE,
+			type: isAllShown ? LegendAction.SHOW_ONLY : LegendAction.TOGGLE,
 			seriesIndex,
 		});
-	}, [isOneSeriesVisible, areAllSeriesVisible, onAction, seriesIndex]);
+	}, [isSoleShown, isAllShown, onAction, seriesIndex]);

 	const handleMarkerClick = useCallback(
 		(event: MouseEvent<HTMLButtonElement>): void => {
@@ -126,7 +126,7 @@ function LegendRow({
 					backgroundColor: show ? seriesColor : 'transparent',
 				}}
 				onClick={handleMarkerClick}
-				disabled={isOneSeriesVisible}
+				disabled={isSoleShown}
 				aria-label={`${show ? 'Hide' : 'Show'} ${label}`}
 				data-is-legend-marker={true}
 				data-testid={`legend-marker-${seriesIndex}`}
--- a/frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.module.scss
+++ b/frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.module.scss
@@ -33,32 +33,3 @@
 .searchIcon {
 	color: var(--l3-foreground);
 }
-
-/* Height + margin must match LEGEND_TOOLBAR_HEIGHT and LEGEND_TOOLBAR_GAP. */
-.inlineToolbar {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	height: 24px;
-	margin-bottom: var(--spacing-2);
-	padding-right: var(--spacing-4);
-}
-
-.search {
-	flex: 0 0 auto;
-	width: 240px;
-	max-width: 100%;
-}
-
-.statusInline {
-	// Truncates rather than wrapping onto a row the legend has not reserved.
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.searchInputInline {
-	width: 100%;
-	height: 24px;
-}
--- a/frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.tsx
+++ b/frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.tsx
@@ -1,17 +1,14 @@
 import { ChangeEvent, useCallback } from 'react';
-import cx from 'classnames';
 import { Input } from 'antd';
 import { Search } from '@signozhq/icons';

-import { LegendPosition } from '../types';
-
 import styles from './LegendToolbar.module.scss';

 export interface LegendToolbarProps {
 	visibleCount: number;
 	totalCount: number;
-	/** Layout only: the column stacks, the bottom row does not. */
-	position: LegendPosition;
+	/** Search is intrinsic to the right-positioned legend. */
+	showFilter: boolean;
 	filterQuery: string;
 	onFilterQueryChange: (query: string) => void;
 }
@@ -20,7 +17,7 @@ export interface LegendToolbarProps {
 export default function LegendToolbar({
 	visibleCount,
 	totalCount,
-	position,
+	showFilter,
 	filterQuery,
 	onFilterQueryChange,
 }: LegendToolbarProps): JSX.Element {
@@ -30,48 +27,30 @@ export default function LegendToolbar({
 		[onFilterQueryChange],
 	);

-	const searchProps = {
-		allowClear: true,
-		prefix: <Search size={12} className={styles.searchIcon} />,
-		placeholder: 'Search...',
-		value: filterQuery,
-		onChange: handleFilterChange,
-		className: styles.searchInput,
-		'data-testid': 'legend-search-input',
-	};
-
-	const status = (
-		<span
-			className={cx(styles.status, {
-				[styles.statusInline]: position !== LegendPosition.RIGHT,
-			})}
-			aria-live="polite"
-			data-testid="legend-status"
-		>
-			{`Showing ${visibleCount} of ${totalCount} series`}
-		</span>
-	);
-
-	if (position === LegendPosition.RIGHT) {
-		return (
-			<>
-				<div className={styles.searchContainer}>
-					<Input {...searchProps} />
-				</div>
-				<div className={styles.toolbar}>{status}</div>
-			</>
-		);
-	}
-
 	return (
-		<div className={styles.inlineToolbar}>
-			<div className={styles.search}>
-				<Input
-					{...searchProps}
-					className={cx(styles.searchInput, styles.searchInputInline)}
-				/>
+		<>
+			{showFilter && (
+				<div className={styles.searchContainer}>
+					<Input
+						allowClear
+						prefix={<Search size={12} className={styles.searchIcon} />}
+						placeholder="Search..."
+						value={filterQuery}
+						onChange={handleFilterChange}
+						className={styles.searchInput}
+						data-testid="legend-search-input"
+					/>
+				</div>
+			)}
+			<div className={styles.toolbar}>
+				<span
+					className={styles.status}
+					aria-live="polite"
+					data-testid="legend-status"
+				>
+					{`Showing ${visibleCount} of ${totalCount} series`}
+				</span>
 			</div>
-			{status}
-		</div>
+		</>
 	);
 }
--- a/frontend/src/lib/uPlotV2/components/Legend/UPlotLegend.tsx
+++ b/frontend/src/lib/uPlotV2/components/Legend/UPlotLegend.tsx
@@ -16,7 +16,6 @@ export default function UPlotLegend({
 	position = LegendPosition.BOTTOM,
 	config,
 	averageLegendWidth,
-	showSearch,
 }: UPlotLegendProps): JSX.Element {
 	const { legendItemsMap, focusedSeriesIndex } = useLegendsSync({ config });
 	const onAction = useLegendActions();
@@ -28,7 +27,6 @@ export default function UPlotLegend({
 			items={items}
 			position={position}
 			averageLegendWidth={averageLegendWidth}
-			showSearch={showSearch}
 			focusedSeriesIndex={focusedSeriesIndex}
 			onAction={onAction}
 		/>
--- a/frontend/src/lib/uPlotV2/components/Legend/tests/UPlotLegend.test.tsx
+++ b/frontend/src/lib/uPlotV2/components/Legend/tests/UPlotLegend.test.tsx
@@ -88,15 +88,11 @@ describe('UPlotLegend', () => {
 		jest.clearAllMocks();
 	});

-	const renderLegend = (
-		position?: LegendPosition,
-		showSearch = true,
-	): RenderResult =>
+	const renderLegend = (position?: LegendPosition): RenderResult =>
 		render(
 			<TooltipProvider>
 				<UPlotLegend
 					position={position}
-					showSearch={showSearch}
 					// config is consumed by the mocked useLegendsSync hook, not directly
 					config={{} as any}
 				/>
@@ -104,38 +100,14 @@ describe('UPlotLegend', () => {
 		);

 	describe('layout and position', () => {
-		it.each([LegendPosition.RIGHT, LegendPosition.BOTTOM])(
-			'gives the legend a search box and a readout (%s)',
-			(position) => {
-				renderLegend(position);
+		it('renders the search input on a RIGHT legend', () => {
+			renderLegend(LegendPosition.RIGHT);

-				expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
-				expect(screen.getByTestId('legend-status')).toBeInTheDocument();
-			},
-		);
+			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
+		});

-		it.each([LegendPosition.RIGHT, LegendPosition.BOTTOM])(
-			'counts down the readout as the search narrows the list (%s)',
-			async (position) => {
-				const user = userEvent.setup();
-				renderLegend(position);
-
-				// B is hidden.
-				expect(screen.getByTestId('legend-status')).toHaveTextContent(
-					'Showing 2 of 3 series',
-				);
-
-				await user.type(screen.getByTestId('legend-search-input'), 'a');
-
-				// Only A matches, counted against all three.
-				expect(screen.getByTestId('legend-status')).toHaveTextContent(
-					'Showing 1 of 3 series',
-				);
-			},
-		);
-
-		it('keeps a BOTTOM legend bare while every series is on screen', () => {
-			renderLegend(LegendPosition.BOTTOM, false);
+		it('keeps a BOTTOM legend bare — its two rows all go to series', () => {
+			renderLegend();

 			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
 			expect(screen.queryByTestId('legend-status')).not.toBeInTheDocument();
@@ -144,16 +116,6 @@ describe('UPlotLegend', () => {
 			expect(screen.getByTestId('legend-scope-0')).toBeInTheDocument();
 		});

-		it('filters a BOTTOM legend from its search box', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.BOTTOM);
-
-			await user.type(screen.getByTestId('legend-search-input'), 'b');
-
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.queryByText('A')).not.toBeInTheDocument();
-		});
-
 		it('renders the marker with the series colour, filled only when shown', () => {
 			renderLegend(LegendPosition.RIGHT);

--- a/frontend/src/lib/uPlotV2/components/Legend/tests/utils.test.ts
+++ b/frontend/src/lib/uPlotV2/components/Legend/tests/utils.test.ts
@@ -1,6 +1,6 @@
 import { LegendItem } from 'lib/uPlotV2/config/types';

-import { filterLegendItems, getVisibleSeriesState } from '../utils';
+import { filterLegendItems, getShownSeriesState } from '../utils';

 const items = (shown: boolean[]): LegendItem[] =>
 	shown.map((show, index) => ({
@@ -10,49 +10,26 @@ const items = (shown: boolean[]): LegendItem[] =>
 		show,
 	}));

-describe('getVisibleSeriesState', () => {
+describe('getShownSeriesState', () => {
 	it('counts the shown series', () => {
-		const state = getVisibleSeriesState(items([true, false, true]), '');
-
-		expect(state.visibleCount).toBe(2);
-		expect(state.onlyVisibleSeriesIndex).toBeNull();
-		expect(state.areAllSeriesVisible).toBe(false);
+		expect(getShownSeriesState(items([true, false, true]))).toStrictEqual({
+			visibleCount: 2,
+			soleShownSeriesIndex: null,
+		});
 	});

 	it('names the series when exactly one is shown', () => {
-		const state = getVisibleSeriesState(items([false, true, false]), '');
-
-		expect(state.visibleCount).toBe(1);
-		expect(state.onlyVisibleSeriesIndex).toBe(2);
+		expect(getShownSeriesState(items([false, true, false]))).toStrictEqual({
+			visibleCount: 1,
+			soleShownSeriesIndex: 2,
+		});
 	});

 	it('reports nothing shown', () => {
-		const state = getVisibleSeriesState(items([false, false]), '');
-
-		expect(state.visibleCount).toBe(0);
-		expect(state.onlyVisibleSeriesIndex).toBeNull();
-	});
-
-	it('reports every series shown', () => {
-		expect(
-			getVisibleSeriesState(items([true, true]), '').areAllSeriesVisible,
-		).toBe(true);
-	});
-
-	it('counts only the series the search listed', () => {
-		const state = getVisibleSeriesState(items([true, true, false]), 'series-1');
-
-		expect(state.listedItems.map((item) => item.label)).toStrictEqual([
-			'series-1',
-		]);
-		expect(state.visibleCount).toBe(1);
-	});
-
-	it('reads isolation off every series, not the listed ones', () => {
-		const state = getVisibleSeriesState(items([false, true, false]), 'series-2');
-
-		expect(state.listedItems).toHaveLength(1);
-		expect(state.onlyVisibleSeriesIndex).toBe(2);
+		expect(getShownSeriesState(items([false, false]))).toStrictEqual({
+			visibleCount: 0,
+			soleShownSeriesIndex: null,
+		});
 	});
 });

--- a/frontend/src/lib/uPlotV2/components/Legend/constants.ts
+++ b/frontend/src/lib/uPlotV2/components/Legend/constants.ts
@@ -21,9 +21,5 @@ export const LEGEND_ROW_HEIGHT = 28;
 export const LEGEND_ROW_GAP = 2;
 export const LEGEND_MAX_BOTTOM_ROWS = 2;

-/** Must match `.inlineToolbar`'s height and margin-bottom, or it eats a row. */
-export const LEGEND_TOOLBAR_HEIGHT = 24;
-export const LEGEND_TOOLBAR_GAP = 4;
-
 /** Hover delay before a row's full-name tooltip opens. */
 export const LEGEND_TOOLTIP_DELAY_MS = 500;
--- a/frontend/src/lib/uPlotV2/components/Legend/utils.ts
+++ b/frontend/src/lib/uPlotV2/components/Legend/utils.ts
@@ -1,12 +1,22 @@
 import { LegendItem } from 'lib/uPlotV2/config/types';

-export interface LegendViewState {
-	listedItems: LegendItem[];
-	/** Listed items that are toggled on, against every series in the readout. */
+export interface ShownSeriesState {
 	visibleCount: number;
-	/** The series index when exactly one series is toggled on, else null. */
-	onlyVisibleSeriesIndex: number | null;
-	areAllSeriesVisible: boolean;
+	/** The series index when exactly one series is shown, else null. */
+	soleShownSeriesIndex: number | null;
+}
+
+/**
+ * Driven by what is actually shown, never a remembered isolation: hiding series
+ * one at a time down to a single one is the same state as "Only".
+ */
+export function getShownSeriesState(items: LegendItem[]): ShownSeriesState {
+	const shown = items.filter((item) => item.show);
+
+	return {
+		visibleCount: shown.length,
+		soleShownSeriesIndex: shown.length === 1 ? shown[0].seriesIndex : null,
+	};
 }

 export function filterLegendItems(
@@ -22,23 +32,3 @@ export function filterLegendItems(
 		item.label?.toLowerCase().includes(normalisedQuery),
 	);
 }
-
-/**
- * Isolation is driven by what is actually shown, never a remembered one: hiding
- * series one at a time down to a single one is the same state as "Only". It is
- * read off the whole series set, not off what the search left listed.
- */
-export function getVisibleSeriesState(
-	items: LegendItem[],
-	query: string,
-): LegendViewState {
-	const visible = items.filter((item) => item.show);
-	const listedItems = filterLegendItems(items, query);
-
-	return {
-		listedItems,
-		visibleCount: listedItems.filter((item) => item.show).length,
-		onlyVisibleSeriesIndex: visible.length === 1 ? visible[0].seriesIndex : null,
-		areAllSeriesVisible: visible.length === items.length,
-	};
-}
--- a/frontend/src/lib/uPlotV2/components/Tooltip/tests/Tooltip.test.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/tests/Tooltip.test.tsx
@@ -73,9 +73,9 @@ function createTooltipContent(
 	};
 }

-function createUPlotInstance(cursorIdx: number | null, timestamp = 1): uPlot {
+function createUPlotInstance(cursorIdx: number | null): uPlot {
 	return {
-		data: [[timestamp], []],
+		data: [[1], []],
 		cursor: { idx: cursorIdx },
 		// The rest of the uPlot fields are not used by Tooltip
 	} as unknown as uPlot;
@@ -122,19 +122,6 @@ describe('Tooltip', () => {
 		expect(screen.getByText(expectedTitle)).toBeInTheDocument();
 	});

-	it('drops the date from the header title for a point on the current day', () => {
-		const todayTimestamp = dayjs().tz('UTC').startOf('hour').unix();
-		const uPlotInstance = createUPlotInstance(0, todayTimestamp);
-
-		renderTooltip({ uPlotInstance });
-
-		const expectedTitle = dayjs(todayTimestamp * 1000)
-			.tz('UTC')
-			.format(DATE_TIME_FORMATS.TIME_SECONDS);
-
-		expect(screen.getByText(expectedTitle)).toBeInTheDocument();
-	});
-
 	it('does not render header when showTooltipHeader is false', () => {
 		const uPlotInstance = createUPlotInstance(0);

--- a/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.tsx
@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
 import { Pin } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import type uPlot from 'uplot';
-import { formatTimestampOmittingTodaysDate } from 'utils/timeUtils';

 import { TooltipContentItem } from '../../../types';
 import TooltipItem from '../TooltipItem/TooltipItem';
@@ -18,7 +19,6 @@ interface TooltipHeaderProps {
 	isPinned: boolean;
 	activeItem: TooltipContentItem | null;
 	headerRowClassName?: string;
-	/** Overrides the default, which drops the date part for points on the current day. */
 	dateFormat?: string;
 }

@@ -29,7 +29,7 @@ export default function TooltipHeader({
 	isPinned,
 	activeItem,
 	headerRowClassName,
-	dateFormat,
+	dateFormat = DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS,
 }: TooltipHeaderProps): JSX.Element {
 	const { timezone: userTimezone } = useTimezone();
 	const resolvedTimezone = timezone?.value ?? userTimezone.value;
@@ -46,11 +46,9 @@ export default function TooltipHeader({
 		if (timestamp == null) {
 			return null;
 		}
-		return formatTimestampOmittingTodaysDate(
-			timestamp * 1000,
-			resolvedTimezone,
-			dateFormat,
-		);
+		return dayjs(timestamp * 1000)
+			.tz(resolvedTimezone)
+			.format(dateFormat);
 	}, [
 		resolvedTimezone,
 		uPlotInstance.data,
--- a/frontend/src/lib/uPlotV2/components/types.ts
+++ b/frontend/src/lib/uPlotV2/components/types.ts
@@ -145,8 +145,6 @@ export interface LegendProps {
 	/** Legend placement; always supplied by the container. */
 	position: LegendPosition;
 	averageLegendWidth?: number;
-	/** Set by the chart layout, which reserves the height for it. */
-	showSearch?: boolean;
 	/** Series index highlighted by the chart cursor. */
 	focusedSeriesIndex: number | null;
 	onAction: OnLegendAction;
@@ -160,7 +158,6 @@ export interface UPlotLegendProps {
 	position?: LegendPosition;
 	config: UPlotConfigBuilder;
 	averageLegendWidth?: number;
-	showSearch?: boolean;
 }

 export interface TooltipContentItem {
--- a/frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts
+++ b/frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts
@@ -265,7 +265,7 @@ function getPathBuilder({
 	drawStyle,
 	lineInterpolation,
 	barAlignment = BarAlignment.Center,
-	barWidthFactor = 0.85,
+	barWidthFactor = 0.6,
 	barMaxWidth = 200,
 	stepInterval,
 }: {
--- a/frontend/src/lib/uPlotV2/config/tests/UPlotSeriesBuilder.test.ts
+++ b/frontend/src/lib/uPlotV2/config/tests/UPlotSeriesBuilder.test.ts
@@ -297,7 +297,7 @@ describe('UPlotSeriesBuilder', () => {
 		);

 		const config = builder.getConfig();
-		expect(config.stroke).toBe('#AD42E0');
+		expect(config.stroke).toBe('#E64A3C');
 	});

 	it('passes through pointsFilter when provided', () => {
--- a/frontend/src/lib/visualization/charts/ChartWrapper/ChartWrapper.tsx
+++ b/frontend/src/lib/visualization/charts/ChartWrapper/ChartWrapper.tsx
@@ -1,7 +1,5 @@
 import { useCallback, useMemo, useRef } from 'react';
-import ChartLayout, {
-	LegendLayout,
-} from 'lib/visualization/layout/ChartLayout/ChartLayout';
+import ChartLayout from 'lib/visualization/layout/ChartLayout/ChartLayout';
 import UPlotLegend from 'lib/uPlotV2/components/Legend/UPlotLegend';
 import {
 	LegendPosition,
@@ -60,7 +58,7 @@ export default function ChartWrapper({
 	);

 	const legendComponent = useCallback(
-		({ averageLegendWidth, showSearch }: LegendLayout): React.ReactNode => {
+		(averageLegendWidth: number): React.ReactNode => {
 			if (!showLegend) {
 				return null;
 			}
@@ -69,7 +67,6 @@ export default function ChartWrapper({
 					config={config}
 					position={legendConfig.position}
 					averageLegendWidth={averageLegendWidth}
-					showSearch={showSearch}
 				/>
 			);
 		},
--- a/frontend/src/lib/visualization/charts/Pie/Pie.tsx
+++ b/frontend/src/lib/visualization/charts/Pie/Pie.tsx
@@ -68,23 +68,17 @@ export default function Pie({

 	// Reuse the uPlot chart/legend split so the donut + legend get the same area
 	// allocation (right column, or up-to-two bottom rows) as every other panel.
-	const {
-		width,
-		height,
-		legendWidth,
-		legendHeight,
-		averageLegendWidth,
-		showLegendSearch,
-	} = useMemo(
-		() =>
-			calculateChartDimensions({
-				containerWidth,
-				containerHeight,
-				legendConfig: { position },
-				seriesLabels: data.map((slice) => slice.label),
-			}),
-		[containerWidth, containerHeight, position, data],
-	);
+	const { width, height, legendWidth, legendHeight, averageLegendWidth } =
+		useMemo(
+			() =>
+				calculateChartDimensions({
+					containerWidth,
+					containerHeight,
+					legendConfig: { position },
+					seriesLabels: data.map((slice) => slice.label),
+				}),
+			[containerWidth, containerHeight, position, data],
+		);

 	// Donut geometry derived from the allocated chart box, sized to leave room
 	// for the external leader labels (see getDonutGeometry).
@@ -230,7 +224,6 @@ export default function Pie({
 					items={legendItems}
 					position={position}
 					averageLegendWidth={averageLegendWidth}
-					showSearch={showLegendSearch}
 					focusedSeriesIndex={focusedSeriesIndex}
 					onAction={onLegendAction}
 				/>
--- a/frontend/src/lib/visualization/charts/tests/utils.test.ts
+++ b/frontend/src/lib/visualization/charts/tests/utils.test.ts
@@ -25,7 +25,6 @@ describe('calculateChartDimensions', () => {
 			legendWidth: 0,
 			legendHeight: 0,
 			averageLegendWidth: 0,
-			showLegendSearch: false,
 		});
 	});

@@ -107,10 +106,10 @@ describe('calculateChartDimensions', () => {
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// Two 28px rows + 2px gap + 12px padding, plus the 24px search row + 4px.
-		expect(dims.showLegendSearch).toBe(true);
-		expect(dims.legendHeight).toBe(98);
-		expect(dims.height).toBe(402);
+		// Two 28px rows + the 2px row gap + 12px bottom padding — no room for a
+		// clipped third row, and none left over.
+		expect(dims.legendHeight).toBe(70);
+		expect(dims.height).toBe(430);
 	});

 	it('BOTTOM: items one past a row still reserve two rows', () => {
@@ -124,50 +123,6 @@ describe('calculateChartDimensions', () => {
 		expect(dims.legendHeight).toBe(70);
 	});

-	it('BOTTOM: no search row while every item is already on screen', () => {
-		// 1000px fits 4 per row, so 8 items fill both reserved rows exactly.
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(8),
-		});
-		expect(dims.showLegendSearch).toBe(false);
-		expect(dims.legendHeight).toBe(70);
-	});
-
-	it('BOTTOM: a search row once the grid overflows the reserved rows', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(9),
-		});
-		expect(dims.showLegendSearch).toBe(true);
-		expect(dims.legendHeight).toBe(98);
-	});
-
-	it('BOTTOM: no search row when it would push the legend past a short panel', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 120,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(40),
-		});
-		expect(dims.showLegendSearch).toBe(false);
-		expect(dims.legendHeight).toBe(40);
-	});
-
-	it('RIGHT: always carries its chrome; the column has the height for it', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.RIGHT },
-			seriesLabels: labels(40),
-		});
-		expect(dims.showLegendSearch).toBe(true);
-	});
-
 	it('BOTTOM: reserves the rows the grid actually lays out, not the rows a bare width estimate allows', () => {
 		// The item width alone suggests three fit on one row; the grid's per-item
 		// padding and column gap leave room for two.
--- a/frontend/src/lib/visualization/charts/utils.ts
+++ b/frontend/src/lib/visualization/charts/utils.ts
@@ -2,8 +2,6 @@ import {
 	LEGEND_MAX_BOTTOM_ROWS,
 	MIN_LEGEND_ITEM_WIDTH,
 	LEGEND_COLUMN_GAP,
-	LEGEND_TOOLBAR_GAP,
-	LEGEND_TOOLBAR_HEIGHT,
 	LEGEND_ITEM_EXTRA_WIDTH,
 	LEGEND_ROW_GAP,
 	LEGEND_ROW_HEIGHT,
@@ -17,8 +15,6 @@ export interface ChartDimensions {
 	legendWidth: number;
 	legendHeight: number;
 	averageLegendWidth: number;
-	/** For a BOTTOM legend that row's height is inside `legendHeight`. */
-	showLegendSearch: boolean;
 }

 const AVG_CHAR_WIDTH = 8;
@@ -80,8 +76,6 @@ export function calculateAverageLegendWidth(legends: string[]): number {
 *   - `legendHeight` is exactly those rows plus the wrapper's bottom padding, so
 *     the rectangle never clips a row or reserves space for half of one. Two
 *     rows that would take half a short panel fall back to one row.
- *   - A grid overflowing those rows also gets a search row, whose height is
- *     part of `legendHeight`.
 *   - Chart height is `containerHeight - legendHeight`, never below 0.
 * - `legendsPerSet` is the number of legend items that fit horizontally, based on the same text-width approximation.
 *
@@ -107,7 +101,6 @@ export function calculateChartDimensions({
 			legendWidth: 0,
 			legendHeight: 0,
 			averageLegendWidth: 0,
-			showLegendSearch: false,
 		};
 	}

@@ -147,7 +140,6 @@ export function calculateChartDimensions({
 			legendHeight: containerHeight,
 			// Single vertical list on the right.
 			averageLegendWidth: rightLegendWidth,
-			showLegendSearch: legendItemCount > 0,
 		};
 	}

@@ -166,25 +158,18 @@ export function calculateChartDimensions({
 		),
 	);

-	// The wrapper's bottom padding and the search row are inside this height.
-	const heightForRows = (rowCount: number, withToolbar: boolean): number =>
+	// The wrapper's bottom padding is inside this height (border-box).
+	const heightForRows = (rowCount: number): number =>
 		rowCount * LEGEND_ROW_HEIGHT +
 		(rowCount - 1) * LEGEND_ROW_GAP +
-		LEGEND_PADDING +
-		(withToolbar ? LEGEND_TOOLBAR_HEIGHT + LEGEND_TOOLBAR_GAP : 0);
-
-	const shortPanelBudget = containerHeight * MAX_SHORT_PANEL_LEGEND_RATIO;
-	const gridRowCount = Math.ceil(legendItemCount / legendItemsPerRow);
-
-	// Only once rows overflow — below that every series is already on screen —
-	// and only while the row it costs leaves the legend inside the panel's share.
-	const showLegendSearch =
-		gridRowCount > LEGEND_MAX_BOTTOM_ROWS &&
-		heightForRows(1, true) <= shortPanelBudget;
+		LEGEND_PADDING;

 	const neededRowCount = Math.max(
 		1,
-		Math.min(LEGEND_MAX_BOTTOM_ROWS, gridRowCount),
+		Math.min(
+			LEGEND_MAX_BOTTOM_ROWS,
+			Math.ceil(legendItemCount / legendItemsPerRow),
+		),
 	);

 	// Without this, short grid panels hand most of their area to the legend and
@@ -192,11 +177,11 @@ export function calculateChartDimensions({
 	// row's items are clipped rather than removed, so they are scroll-only here.
 	const legendRowCount =
 		neededRowCount > 1 &&
-		heightForRows(neededRowCount, showLegendSearch) > shortPanelBudget
+		heightForRows(neededRowCount) > containerHeight * MAX_SHORT_PANEL_LEGEND_RATIO
 			? 1
 			: neededRowCount;

-	const bottomLegendHeight = heightForRows(legendRowCount, showLegendSearch);
+	const bottomLegendHeight = heightForRows(legendRowCount);

 	return {
 		width: containerWidth,
@@ -204,6 +189,5 @@ export function calculateChartDimensions({
 		legendWidth: containerWidth,
 		legendHeight: bottomLegendHeight,
 		averageLegendWidth: legendItemWidth,
-		showLegendSearch,
 	};
 }
--- a/frontend/src/lib/visualization/layout/ChartLayout/ChartLayout.tsx
+++ b/frontend/src/lib/visualization/layout/ChartLayout/ChartLayout.tsx
@@ -7,14 +7,9 @@ import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';

 import 'lib/visualization/layout/ChartLayout/ChartLayout.styles.scss';

-export interface LegendLayout {
-	averageLegendWidth: number;
-	showSearch: boolean;
-}
-
 export interface ChartLayoutProps {
 	showLegend?: boolean;
-	legendComponent: (layout: LegendLayout) => React.ReactNode;
+	legendComponent: (legendPerSet: number) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
 		chartHeight: number;
@@ -45,7 +40,6 @@ export default function ChartLayout({
 					legendWidth: 0,
 					legendHeight: 0,
 					averageLegendWidth: MAX_LEGEND_WIDTH,
-					showLegendSearch: false,
 				};
 			}
 			const legendItemsMap = config.getLegendItems();
@@ -87,10 +81,7 @@ export default function ChartLayout({
 							width: chartDimensions.legendWidth,
 						}}
 					>
-						{legendComponent({
-							averageLegendWidth: chartDimensions.averageLegendWidth,
-							showSearch: chartDimensions.showLegendSearch,
-						})}
+						{legendComponent(chartDimensions.averageLegendWidth)}
 					</div>
 				)}
 			</div>
--- a/Show More
+++ b/Show More